I need to add random variables to my template.
It's an ejected Angular project that uses HtmlWebpackPlugin.
My HtmlWebpackPlugin configuration looks like this:
new HtmlWebpackPlugin({
"filename": "./index.html",
"hash": false,
"inject": false,
"compile": true,
"favicon": false,
"minify": false,
"template": "./src/index.html",
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"myHash": Math.random().toString(36).slice(2),
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
})
myHash is the variable I need to add to template.
For some reason, this doesn't work:
<p><%= htmlWebpackPlugin.options.myHash %></p>
The generated Html looks like same:
<p><%= htmlWebpackPlugin.options.myHash %></p>
When I had very similar (extrapolating <%=htmlWebpackPlugin.files.webpackManifest%>) problem in webpack 1, I solved it by excluding html-file from html-loader:
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: minifyHtmlOpts
}],
// excluding, so ejs loader will be used for these pages
exclude: /index.html/
}
And it still works with webpack 3.
Related
I'm trying to make an IDE that works in the browser using the Monaco editor. I wanted to use Prettier for a nice formatting. It only works for Javascript files or only html files. However, it does not work on files of the types I have specified below. How can I fix.
Expected :
Result :
Also i am getting this error :
monaco.languages.registerDocumentFormattingEditProvider("javascript", {
async provideDocumentFormattingEdits(model) {
alert(1);
var text1 = prettier.format(model.getValue(), {
wrapAttributes: "force",
parser: "babel",
// plugins: [babel],
htmlWhitespaceSensitivity: "ignore",
arrowParens: "always",
bracketSpacing: true,
endOfLine: "lf",
insertPragma: false,
singleAttributePerLine: false,
bracketSameLine: false,
printWidth: 400,
proseWrap: "preserve",
quoteProps: "as-needed",
requirePragma: false,
semi: true,
singleQuote: true,
tabWidth: 4,
//trailingComma: 'es5',
useTabs: false,
vueIndentScriptAndStyle: false,
});
return [
{
range: model.getFullModelRange(),
text: text1,
},
];
},
});
monaco_scr_editor = monaco.editor.create(document.getElementById("browserIDE"), {
value: ["<html>Please Wait Loading</html>"].join("\n"),
language: "javascript",
theme: "vs-dark",
wrappingColumn: 0,
autoIndent: true,
formatOnPaste: true,
formatOnType: true,
wrappingIndent: "indent",
wordWrap: "off",
automaticLayout: true,
overviewRulerLanes: 1,
overviewRulerBorder: true,
minimap: { enabled: false },
});
You need to provide right value for options.parser.
From docs
options.parser must be set according to the language you are formatting (see the list of available parsers). Alternatively, options.filepath can be specified for Prettier to infer the parser from the file extension.
so set it to parser: "html".
It seems like designed to use pre-defined formatter.
Please refer this issue : Disable default formatters.
I tested code as below(from a thread),
monaco.languages.html.htmlDefaults.setModeConfiguration({
...monaco.languages.html.htmlDefaults.modeConfiguration,
documentFormattingEdits: false,
documentRangeFormattingEdits: false,
});
This will work for you.
But you still get error relate with prettier.
Refer this issue : https://github.com/prettier/prettier/issues/6264
Before doing this, install this to make easy import parser list from node_module.
npm install #types/prettier
and then import it.
import * as prettier from 'prettier/standalone'
import * as parserHtml from 'prettier/parser-html'
...
prettier.format(model.getValue(), {
...
parser: "html",
plugins: [parserHtml],
...
I've created a completely new angular application using ng new test-app, added Prettier to devDependencies and installed it and have disabled all extensions except Prettier in VSCode.
The problem is that when I set up VSCode to format on save, it always removes the trailing commas in typescript arrays and objects.
I've set "trailingComma":"all" in .prettierrc.json as well as having these settings in settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"prettier.trailingComma": "all",
"prettier.proseWrap": "always",
"prettier.useEditorConfig": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always"
}
My User settings for all vscode projects is
{
"git.autoStash": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"git.autofetch": true,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"workbench.startupEditor": "newUntitledFile",
"cSpell.userWords": [
"Reorderable",
"configcat",
"datatable",
"devkit",
"initialise",
"initialising",
"primeng"
],
"editor.largeFileOptimizations": false,
"git.confirmSync": false,
"diffEditor.wordWrap": "on",
"explorer.confirmDelete": true,
"explorer.confirmDragAndDrop": true,
"workbench.editorAssociations": {
"*.sqlite": "default"
},
"diffEditor.ignoreTrimWhitespace": false
}
Turns out Prettier does add trailing comma's but only if the array is split over multiple lines.
E.g. the code below will have a trailing comma added by prettier
let x = [
"aaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbb",
"cccccccccccccccc",
"dddddddddddddddd",
"eeeeeeeeeeeeeeee",
"ffffffffffffffff"
];
my Test config file is not able to find the spec file. i already have spec files created. previously i ran those scripts also.. but for more framework update i updated the paths of the files.. that makes spec files error and even i gave the full path also it is not able to find the spec file.
Spec File
var utilityInit,page2//browser2;
page1=new facebook(firstBrowser);
module.exports=function(){
this.Given(/^Open the browser and Load the URL$/,async function(){
await firstBrowser.get(properties.get("url1"));
browser.logger.info("Title of the window is :"+await browser.getTitle());
//screenshots.takesScreenshot("filename");
});
this.When(/^User entered the text in the search box$/,async function(){
firstBrowser.sleep(3000);
await page1.email().sendKeys(testData.Login.CM[0].Username);
browser.sleep(3000);
await page1.password().sendKeys(testData.Login.CM[0].Password);
});
this.Then(/^click on login button$/,async function(){
browser.sleep(3000);
await facebook.submit().click();
});
this.Then(/^User tried to open in new browser instance$/,async function(){
browser2=await openNewBrowser.newBrowserInit(firstBrowser);
utilityInit=new utility(browser2);
utilityInit.ignoreSync(properties.get("url2"));
browser2.manage().window().maximize();
console.log(await utilityInit.title()+" title");
browser2.sleep(5000);
});
this.When(/^User entered the text in the email field$/,async function(){
page2=new facebook(browser2);
console.log(await page2.title()+" browser2");
await page2.search().sendKeys("testing");
browser2.sleep(3000);
page1=new facebook(firstBrowser);
console.log(await page1.title()+" browser1")
await page1.email().sendKeys(testData.Login.CM[0].Username);
screenshots.takeScreenshot("newScreenshot");
firstBrowser.sleep(5000);
})
}
Config file
const log4js = require('log4js');
var fs=require('fs');
global.screenshots = require('protractor-take-screenshots-on-demand');
global.browser2;
var propertiesReader=require('properties-reader');
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect:true,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome',
metadata: {
browser: {
name: 'chrome',
version: '79'
},
device: 'MacBook Pro 15',
platform: {
name: 'OSX',
version: '10.12.6'
},
disableLog:true,
durationInMS:true,
openReportInBrowser:true
}
},
ignoreUncaughtExceptions:false,
// Spec patterns are relative to this directory.
specs: [
'../Proc/src/test/java/com/proc/features/test.feature'
],
beforeLaunch:function(){
if (fs.existsSync('./logs/ExecutionLog.log')) {
fs.unlink('./logs/ExecutionLog.log')
}
log4js.configure({
appenders: {
out: { type: 'console' },
info:{ type: 'dateFile', filename: '../Reports/logs/info', "pattern":"-dd.log",alwaysIncludePattern:false},
"console" : {
"type": "console",
"category": "console"
},
"file" : {
"category": "test-file-appender",
"type": "file",
"filename": "../Reports/logs/log_file.log",
"maxLogSize": 10240,
// "backups": 3,
// "pattern": "%d{dd/MM hh:mm} %-5p %m"
}
},
categories: {
"info" :{"appenders": ["console"], "level": "info"},
"default" :{"appenders": ["console", "file"], "level": "DEBUG"},
//"file" : {"appenders": ["file"], "level": "DEBUG"}
}
});
},
cucumberOpts: {
require:['../src/test/resources/com.proc.utility/timeOutConfig.js','../src/test/java/com/proc/TestCases/spec.js'],
tags: false,
profile: false,
format:'json:../Reports/jsonResult/results.json',
'no-source': true
},
onPrepare: function () {
const logDefault = log4js.getLogger('default');
const logInfo=log4js.getLogger('info');
screenshots.browserNameJoiner = ' - '; //this is the default
//folder of screenshot
screenshots.screenShotDirectory = '../Screenshots';
global.openNewBrowser=require("../src/test/resources/com.proc.utility/newBrowserinstance.js")
global.testData=require("../TestData/testData.json");
browser.logger = log4js.getLogger('protractorLog4js');
global.firstBrowser=browser;
global.properties=propertiesReader("../TestData/propertyConfig.properties");
browser.waitForAngularEnabled(false);
browser.manage().window().maximize();
global.facebook=require("../src/test/java/com/proc/pages/fbPageObjects.js");
global.utility=require("../src/test/resources/com.proc.utility/testFile.js");
},
plugins: [{
package: '../Proc/node_modules/protractor-multiple-cucumber-html-reporter-plugin',
options:{
// read the options part for more options
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true,
reportPath:"../Reports/HtmlReports",
reportName:"test.html"
},
customData: {
title: 'Run info',
data: [
{label: 'Project', value: 'Framework Setup'},
{label: 'Release', value: '1.2.3'},
{label: 'Cycle', value: 'Test Cycle'}
]
},
}]
};
Log
H:\workspace\Proc\Configuration>protractor testConfig.js
[23:38:00] I/launcher - Running 1 instances of WebDriver
[23:38:00] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:51680/devtools/browser/e9688f83-2047-4535-91ba-bf2100fe6016
0 scenarios
0 steps
0m00.000s
can some one please help me to clear this issue.. this is related to my project framework POC..
To clarify some other comments I have seen being made by others here, you do not have to give the exact file path. You can do
specs: [
'../Proc/src/test/java/com/proc/features/']
This path does not look correct to me ^ are you sure that is the correct path? also you have a javascript project but your file structure is a java structure src/test/java why?
it's a simple thing that makes my framework works..
npm install cucumber#1.3.3 --save-dev
This because of the Spec path
specs: [
'../Proc/src/test/java/com/proc/features/test.feature' //Provide a complete path to your test file along with file extension(.ts)
],
Hope it helps you
We are using dojo in our product extensively and recently all pages with Enhanced grid were updated to gridx and its working fine.
We had compressed gridx files into dojo through Dojo custom build without errors ( i have included all these js files into profile.js file and gridx folder is at the same level where dojo,dijit,dojox are there),i still see my pages requesting few gridx/modules files when page is loaded.
Can someone tell how to avoid downloading these files.
This is profile.js used,its trimmed down to show only gridx related files.
var profile = (function() {
return {
basePath: "./",
releaseDir: "blinkx",
releaseName: "dojo_lib22",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "warn",
selectorEngine: "lite",
resourceTags: {
amd: function(filename, mid) {
return false;
}
},
packages: [{
name: "dojo",
location: "dojo"
}, {
name: "dijit",
location: "dijit"
}, {
name: "dojox",
location: "dojox"
}, {
name: "gridx",
location: 'gridx'
}],
layers: {
"dojo": {
include: ["gridx/nls/gridx",
"gridx/modules/extendedSelect/Column",
"gridx/modules/extendedSelect/Cell",
"gridx/modules/extendedSelect/_RowCellBase",
"gridx/modules/extendedSelect/_Base",
"gridx/modules/AutoScroll",
"gridx/modules/select/Row",
"gridx/modules/CellWidget",
"gridx/modules/NavigableCell",
"gridx/modules/Edit",
"gridx/core/model/extensions/Modify",
"gridx/core/model/extensions/Mark",
"gridx/modules/HiddenColumns",
"gridx/modules/RowLock",
"gridx/core/model/cache/Async",
"gridx/core/model/cache/Sync",
"gridx/core/model/_Extension",
"gridx/core/model/Model",
"gridx/core/Row",
"gridx/core/Column",
"gridx/core/Cell",
"gridx/core/_Module",
"gridx/core/model/extensions/Query",
"gridx/modules/Header",
"gridx/modules/View",
"gridx/modules/Body",
"gridx/support/query",
"gridx/modules/VLayout",
"gridx/modules/HLayout",
"gridx/modules/VScroller",
"gridx/modules/HScroller",
"gridx/modules/ColumnWidth",
"gridx/modules/Focus",
"gridx/modules/Pagination",
"gridx/modules/pagination/PaginationBar",
"gridx/support/Summary",
"gridx/modules/Bar",
"gridx/support/LinkPager",
"gridx/support/LinkSizer",
"gridx/support/GotoPageButton",
"gridx/support/GotoPagePane",
"gridx/modules/SingleSort",
"gridx/core/model/extensions/Sort",
"gridx/modules/Filter",
"gridx/core/model/extensions/ClientFilter",
"gridx/modules/filter/FilterBar",
"gridx/modules/filter/FilterDialog",
"gridx/modules/filter/FilterPane",
"gridx/modules/filter/DistinctComboBoxMenu",
"gridx/modules/filter/FilterConfirmDialog",
"gridx/modules/filter/FilterTooltip",
"gridx/modules/filter/QuickFilter",
"gridx/support/QuickFilter",
"gridx/modules/Puller",
"gridx/modules/VirtualVScroller",
"gridx/modules/Menu",
"gridx/modules/ColumnResizer",
"dijit/form/FilteringSelect",
"gridx/modules/RowHeader"
],
customBase: true,
boot: true
}
}
};
})();
I'm following the official documentation page about the topic but I cannot configure it to ignore .txt files.
I have a all.profile.js on the root of my project:
var profile = (function(){
return {
basePath: "./",
releaseDir: "../web",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{ name: "myapp", location: "myapp" }
]
};
})();
And this is the package.json inside the folder myapp:
{
"dojoBuild": "myapp.profile.js",
"name": "my-app",
"description": "This is My App",
"version": "1.0",
"main": "src"
}
And this is the myapp.profile.js also inside the folder myapp:
var profile = (function(){
return {
// don't need to do anything on the 'test' folder so don't define it on the trees.
trees: [
["libs","libs",/txt$/], // ignore .txt files -> DOESN'T WORK!
["src","src",/txt$/] // ignore .txt files -> DOESN'T WORK!
],
resourceTags: {
test: function(filename, mid){
console.log("[test] filename: ",filename);
return filename.indexOf("test/") !== -1;
},
copyOnly: function(filename, mid){
//console.log("[copyOnly] mid: ",mid);
return false;
},
miniExclude: function (filename, mid) {
console.log("[miniExclude] filename: ",filename);
return mid in {
'myapp/myapp.profile': 1,
'myapp/package.json': 2
} || mid.indexOf(".txt") !== -1; // .txt are not ignored so exclude them...
},
amd: function(filename, mid) {
//console.log("[amd] mid: ",mid);
// myapp is not AMD but this will 'convert' it
return false;
}
}
};
})();
Finally, this is the folder structure:
web_dev/
-- myapp/
---- libs/
---- src/
---- test/
---- myapp.profile.js
---- package.json
-- all.profile.js
The build tool runs fine, it reads and process all files but the .txt files are still on the release dir.
Please let me know if you spot any mistakes on my logic or how I'm configuring the build system. I'm using Dojo 1.9.1.
Thanks in advance.
I'm not sure what is wrong with my initial scenario but here are the changes that I made to have the desired result:
Move the trees declaration from the myapp.profile.js to
all.profile.js inside the 'myapp' package definition.
Instead of specifying the root of the trees, check
everything and exclude accordingly: [".", ".",
/(\/\.)|(~$)|(test|txt)/]
The final all.profile.js:
var profile = {
basePath: "./",
releaseDir: "../web",
releaseName: "built",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{
name: "myapp",
location: "myapp",
trees: [
// don't bother with .hidden, tests and txt.
[".", ".", /(\/\.)|(~$)|(test|txt)/]
]
}
]
};
If anyone can pin point exactly what I was doing wrong, please share.