@ui5/webcomponents-tools 0.0.0-f651a470c → 0.0.0-f79db712b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +405 -0
- package/README.md +2 -1
- package/assets-meta.js +16 -7
- package/components-package/eslint.js +2 -0
- package/components-package/nps.js +37 -30
- package/components-package/postcss.components.js +1 -21
- package/components-package/postcss.themes.js +1 -26
- package/components-package/wdio.js +15 -3
- package/components-package/wdio.sync.js +9 -1
- package/icons-collection/nps.js +8 -6
- package/lib/cem/custom-elements-manifest.config.mjs +499 -0
- package/lib/cem/event.mjs +135 -0
- package/lib/cem/schema-internal.json +1354 -0
- package/lib/cem/schema.json +1098 -0
- package/lib/cem/types-internal.d.ts +801 -0
- package/lib/cem/types.d.ts +736 -0
- package/lib/cem/utils.mjs +354 -0
- package/lib/cem/validate.js +67 -0
- package/lib/create-illustrations/index.js +32 -28
- package/lib/create-new-component/index.js +28 -58
- package/lib/create-new-component/jsFileContentTemplate.js +0 -4
- package/lib/create-new-component/tsFileContentTemplate.js +2 -15
- package/lib/css-processors/css-processor-components.mjs +77 -0
- package/lib/css-processors/css-processor-themes.mjs +79 -0
- package/lib/css-processors/scope-variables.mjs +46 -0
- package/lib/{postcss-css-to-esm/index.js → css-processors/shared.mjs} +36 -50
- package/lib/dev-server/custom-hot-update-plugin.js +39 -0
- package/lib/esm-abs-to-rel/index.js +4 -1
- package/lib/generate-custom-elements-manifest/index.js +1 -1
- package/lib/generate-js-imports/illustrations.js +78 -64
- package/lib/generate-json-imports/i18n.js +10 -5
- package/lib/generate-json-imports/themes.js +10 -5
- package/lib/hbs2lit/src/compiler.js +9 -6
- package/lib/hbs2lit/src/litVisitor2.js +42 -17
- package/lib/hbs2lit/src/svgProcessor.js +12 -5
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +32 -4
- package/lib/hbs2ui5/index.js +21 -4
- package/lib/jsdoc/preprocess.js +1 -1
- package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
- package/lib/scoping/get-all-tags.js +1 -1
- package/lib/scoping/scope-test-pages.js +2 -1
- package/lib/test-runner/test-runner.js +2 -2
- package/package.json +10 -9
- package/lib/postcss-css-to-json/index.js +0 -47
- package/lib/postcss-new-files/index.js +0 -36
- package/lib/postcss-p/postcss-p.mjs +0 -14
@@ -12,15 +12,17 @@ const removeWhiteSpaces = (source) => {
|
|
12
12
|
.replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
|
13
13
|
};
|
14
14
|
|
15
|
-
const hbs2lit = async (file) => {
|
15
|
+
const hbs2lit = async (file, componentName) => {
|
16
16
|
let sPreprocessed = await includesReplacer.replace(file);
|
17
17
|
|
18
18
|
sPreprocessed = removeWhiteSpaces(sPreprocessed);
|
19
19
|
|
20
|
+
const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
|
21
|
+
|
20
22
|
// icons hack
|
21
23
|
if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
|
22
24
|
return `
|
23
|
-
|
25
|
+
function block0 (${blockSignature}) {
|
24
26
|
return svg\`${sPreprocessed}\`
|
25
27
|
}`;
|
26
28
|
}
|
@@ -28,7 +30,7 @@ const hbs2lit = async (file) => {
|
|
28
30
|
const ast = Handlebars.parse(sPreprocessed);
|
29
31
|
|
30
32
|
const pv = new PartialsVisitor();
|
31
|
-
const lv = new HTMLLitVisitor();
|
33
|
+
const lv = new HTMLLitVisitor(componentName);
|
32
34
|
|
33
35
|
let result = "";
|
34
36
|
|
@@ -41,10 +43,11 @@ const hbs2lit = async (file) => {
|
|
41
43
|
let block = lv.blocks[key];
|
42
44
|
|
43
45
|
if (block.match(/scopeTag/)) {
|
44
|
-
const matches = block.match(/^(.*?)( => )(.*?);$/);
|
45
|
-
const
|
46
|
+
// const matches = block.match(/^(.*?)( => )(.*?);$/);
|
47
|
+
const matches = block.match(/^(function .*? \{ return )(.*?);\}$/);
|
48
|
+
const scopedCode = matches[2];
|
46
49
|
const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
|
47
|
-
block = `${matches[1]}
|
50
|
+
block = `${matches[1]}suffix ? ${scopedCode} : ${normalCode};}`;
|
48
51
|
}
|
49
52
|
|
50
53
|
result += block + "\n";
|
@@ -28,14 +28,18 @@ if (!String.prototype.replaceAll) {
|
|
28
28
|
};
|
29
29
|
}
|
30
30
|
|
31
|
-
function HTMLLitVisitor(debug) {
|
31
|
+
function HTMLLitVisitor(componentName, debug) {
|
32
32
|
this.blockCounter = 0;
|
33
33
|
this.keys = [];
|
34
34
|
this.blocks = {};
|
35
35
|
this.result = "";
|
36
36
|
this.mainBlock = "";
|
37
37
|
this.blockLevel = 0;
|
38
|
-
this.
|
38
|
+
this.componentName = componentName
|
39
|
+
const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
|
40
|
+
const blockParametersDefinitionJS = ["context", "tags", "suffix"];
|
41
|
+
this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
|
42
|
+
this.blockParametersUsage = ["this", "context", "tags", "suffix"];
|
39
43
|
this.paths = []; //contains all normalized relative paths
|
40
44
|
this.debug = debug;
|
41
45
|
if (this.debug) {
|
@@ -51,17 +55,18 @@ HTMLLitVisitor.prototype.Program = function(program) {
|
|
51
55
|
this.keys.push(key);
|
52
56
|
this.debug && this.blockByNumber.push(key);
|
53
57
|
|
54
|
-
this.blocks[this.currentKey()] = "
|
58
|
+
// this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
|
59
|
+
this.blocks[this.currentKey()] = `function ${this.currentKey()} (${this.blockParametersDefinition.join(", ")}) { `;
|
55
60
|
|
56
61
|
if (this.keys.length > 1) { //it's a nested block
|
57
|
-
this.blocks[this.prevKey()] += this.currentKey() + "(" + this.
|
62
|
+
this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
|
58
63
|
} else {
|
59
64
|
this.mainBlock = this.currentKey();
|
60
65
|
}
|
61
66
|
|
62
|
-
this.blocks[this.currentKey()] += "html`";
|
67
|
+
this.blocks[this.currentKey()] += "return html`";
|
63
68
|
Visitor.prototype.Program.call(this, program);
|
64
|
-
this.blocks[this.currentKey()] += "`;";
|
69
|
+
this.blocks[this.currentKey()] += "`;}";
|
65
70
|
|
66
71
|
this.keys.pop(key);
|
67
72
|
};
|
@@ -98,14 +103,18 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
|
|
98
103
|
this.blocks[this.currentKey()] += "${index}";
|
99
104
|
} else {
|
100
105
|
const path = normalizePath.call(this, mustache.path.original);
|
101
|
-
const hasCalculatingClasses = path.includes("
|
106
|
+
const hasCalculatingClasses = path.includes("this.classes");
|
102
107
|
|
103
108
|
let parsedCode = "";
|
104
109
|
|
105
110
|
if (isNodeValue && !mustache.escaped) {
|
106
111
|
parsedCode = `\${unsafeHTML(${path})}`;
|
107
112
|
} else if (hasCalculatingClasses) {
|
108
|
-
|
113
|
+
if (process.env.UI5_TS) {
|
114
|
+
parsedCode = `\${classMap(${path} as ClassMapValue)}`;
|
115
|
+
} else {
|
116
|
+
parsedCode = `\${classMap(${path})}`;
|
117
|
+
}
|
109
118
|
} else if (isStyleAttribute) {
|
110
119
|
parsedCode = `\${styleMap(${path})}`;
|
111
120
|
} else if (skipIfDefined){
|
@@ -170,19 +179,35 @@ function visitEachBlock(block) {
|
|
170
179
|
var bParamAdded = false;
|
171
180
|
visitSubExpression.call(this, block);
|
172
181
|
|
173
|
-
|
182
|
+
const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
|
183
|
+
const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
|
184
|
+
const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
|
185
|
+
this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
|
174
186
|
this.paths.push(normalizePath.call(this, block.params[0].original));
|
175
187
|
this.blockLevel++;
|
176
188
|
|
177
|
-
|
189
|
+
// block params is [this, context, tags, suffix] for top level blocks
|
190
|
+
// blcok params is [this, context, tags, suffix, item, index] for nested blocks
|
191
|
+
if (!this.blockParametersUsage.includes("index")) {
|
192
|
+
// last item is not index, but an each block is processed, add the paramters for further nested blocks
|
178
193
|
bParamAdded = true;
|
179
|
-
|
180
|
-
|
194
|
+
if (process.env.UI5_TS) {
|
195
|
+
this.blockParametersDefinition.push("item: any");
|
196
|
+
this.blockParametersDefinition.push("index: number");
|
197
|
+
} else {
|
198
|
+
this.blockParametersDefinition.push("item");
|
199
|
+
this.blockParametersDefinition.push("index");
|
200
|
+
}
|
201
|
+
this.blockParametersUsage.push("item");
|
202
|
+
this.blockParametersUsage.push("index");
|
181
203
|
}
|
182
204
|
this.acceptKey(block, "program");
|
183
205
|
if (bParamAdded) {
|
184
|
-
this
|
185
|
-
this.
|
206
|
+
// if parameters were added at this step, remove the last two
|
207
|
+
this.blockParametersDefinition.pop();
|
208
|
+
this.blockParametersDefinition.pop();
|
209
|
+
this.blockParametersUsage.pop();
|
210
|
+
this.blockParametersUsage.pop();
|
186
211
|
}
|
187
212
|
this.blockLevel--;
|
188
213
|
this.blocks[this.currentKey()] += ") }";
|
@@ -197,7 +222,7 @@ function normalizePath(sPath) {
|
|
197
222
|
if (result.indexOf("@root") === 0) {
|
198
223
|
// Trying to access root context via the HBS "@root" variable.
|
199
224
|
// Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
|
200
|
-
result = result.replace("@root", "
|
225
|
+
result = result.replace("@root", "this");
|
201
226
|
|
202
227
|
} else if (result.indexOf("../") === 0) {
|
203
228
|
let absolutePath;
|
@@ -207,7 +232,7 @@ function normalizePath(sPath) {
|
|
207
232
|
// Trying to access root context from nested loops.
|
208
233
|
// Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
|
209
234
|
// Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
|
210
|
-
absolutePath = `
|
235
|
+
absolutePath = `this.${replaceAll(result,"../", "")}`;
|
211
236
|
} else {
|
212
237
|
// Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
|
213
238
|
// Example: {{../property}} compiles to "context.property" - when called in a top level loop.
|
@@ -235,7 +260,7 @@ function normalizePath(sPath) {
|
|
235
260
|
// {{/each}}
|
236
261
|
// {{text}} -> compiles to "context.text"
|
237
262
|
|
238
|
-
const blockPath = this.blockLevel > 0 ? "item" : "
|
263
|
+
const blockPath = this.blockLevel > 0 ? "item" : "this";
|
239
264
|
result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
|
240
265
|
}
|
241
266
|
|
@@ -2,7 +2,7 @@
|
|
2
2
|
const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
|
3
3
|
const blockrx = /block[0-9]+/g;
|
4
4
|
|
5
|
-
function
|
5
|
+
function processSVG(input) {
|
6
6
|
let matches;
|
7
7
|
let template = input;
|
8
8
|
let blockCounter = 0;
|
@@ -45,9 +45,16 @@ function getSVGMatches(template) {
|
|
45
45
|
}
|
46
46
|
|
47
47
|
function getSVGBlock(input, blockCounter) {
|
48
|
+
const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
|
49
|
+
return svg\`${input}\`;
|
50
|
+
};`;
|
51
|
+
const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
|
52
|
+
return svg\`${input}\`;
|
53
|
+
};`;
|
54
|
+
|
48
55
|
return {
|
49
|
-
usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
|
50
|
-
definition:
|
56
|
+
usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
|
57
|
+
definition: process.env.UI5_TS ? definitionTS : definitionJS,
|
51
58
|
};
|
52
59
|
}
|
53
60
|
|
@@ -55,7 +62,7 @@ function replaceInternalBlocks(template, svgContent) {
|
|
55
62
|
const internalBlocks = svgContent.match(blockrx) || [];
|
56
63
|
|
57
64
|
internalBlocks.forEach(blockName => {
|
58
|
-
const rx = new RegExp(`
|
65
|
+
const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
|
59
66
|
template = template.replace(rx, (match, p1) => {
|
60
67
|
return match.replace(p1, "svg\`");
|
61
68
|
});
|
@@ -65,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
|
|
65
72
|
}
|
66
73
|
|
67
74
|
module.exports = {
|
68
|
-
process:
|
75
|
+
process: processSVG,
|
69
76
|
};
|
@@ -1,7 +1,35 @@
|
|
1
|
-
const
|
2
|
-
|
3
|
-
|
1
|
+
const tsImports = (controlName, hasTypes) => {
|
2
|
+
if (!process.env.UI5_TS) {
|
3
|
+
return "";
|
4
|
+
}
|
5
|
+
|
6
|
+
const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
|
7
|
+
|
8
|
+
return `import type UI5Element from "${importPrefix}UI5Element.js";
|
9
|
+
${importForControl(controlName, hasTypes)}
|
10
|
+
import type { ClassMapValue } from "${importPrefix}types.js";
|
11
|
+
`;
|
12
|
+
}
|
13
|
+
const importForControl = (controlName, hasTypes) => {
|
14
|
+
|
15
|
+
if (!hasTypes) {
|
16
|
+
return `type ${controlName} = any;`;
|
17
|
+
}
|
4
18
|
|
19
|
+
if (process.env.UI5_BASE) {
|
20
|
+
// base package has a component in `test/elements` instead of `src`
|
21
|
+
return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
|
22
|
+
}
|
23
|
+
return `import type ${controlName} from "../../${controlName}.js";`
|
24
|
+
}
|
25
|
+
|
26
|
+
const buildRenderer = (controlName, litTemplate, hasTypes) => {
|
27
|
+
const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
|
28
|
+
|
29
|
+
// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
|
30
|
+
return `/* eslint no-unused-vars: 0 */
|
31
|
+
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
|
32
|
+
${tsImports(controlName, hasTypes)}
|
5
33
|
${litTemplate}
|
6
34
|
|
7
35
|
export default block0;`;
|
@@ -9,4 +37,4 @@ export default block0;`;
|
|
9
37
|
|
10
38
|
module.exports = {
|
11
39
|
generateTemplate: buildRenderer
|
12
|
-
};
|
40
|
+
};
|
package/lib/hbs2ui5/index.js
CHANGED
@@ -1,10 +1,13 @@
|
|
1
1
|
const fs = require('fs').promises;
|
2
|
+
const existsSync = require('fs').existsSync;
|
2
3
|
const getopts = require('getopts');
|
3
4
|
const hbs2lit = require('../hbs2lit');
|
4
5
|
const path = require('path');
|
5
6
|
const litRenderer = require('./RenderTemplates/LitRenderer');
|
6
7
|
const recursiveReadDir = require("recursive-readdir");
|
7
8
|
|
9
|
+
let missingTypesReported = false;
|
10
|
+
|
8
11
|
const args = getopts(process.argv.slice(2), {
|
9
12
|
alias: {
|
10
13
|
o: 'output',
|
@@ -23,13 +26,27 @@ const onError = (place) => {
|
|
23
26
|
|
24
27
|
const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
|
25
28
|
|
29
|
+
const hasTypes = (file, componentName) => {
|
30
|
+
const tsFile = path.join(path.dirname(file), componentName + ".ts")
|
31
|
+
const dtsFile = path.join(path.dirname(file), componentName + ".d.ts")
|
32
|
+
return existsSync(tsFile) || existsSync(dtsFile);
|
33
|
+
}
|
34
|
+
|
26
35
|
const processFile = async (file, outputDir) => {
|
27
|
-
const litCode = await hbs2lit(file);
|
28
|
-
const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
|
29
36
|
const componentNameMatcher = /(\w+)(\.hbs)/gim;
|
30
37
|
const componentName = componentNameMatcher.exec(file)[1];
|
38
|
+
const componentHasTypes = hasTypes(file, componentName);
|
39
|
+
if (!componentHasTypes) {
|
40
|
+
if (!missingTypesReported) {
|
41
|
+
console.warn("[Warn] The following templates do not have a corresponging .ts or .d.ts file and won't be type checked:")
|
42
|
+
missingTypesReported = true;
|
43
|
+
}
|
44
|
+
console.log(" -> " + componentName + ".hbs");
|
45
|
+
}
|
46
|
+
const litCode = await hbs2lit(file, componentName);
|
47
|
+
const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
|
31
48
|
|
32
|
-
return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
|
49
|
+
return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
|
33
50
|
};
|
34
51
|
|
35
52
|
const composeAbsoluteOutputDir = (file, outputDir) => {
|
@@ -70,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
|
|
70
87
|
|
71
88
|
await fs.mkdir(outputDir, { recursive: true });
|
72
89
|
|
73
|
-
const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
|
90
|
+
const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
|
74
91
|
|
75
92
|
// strip DOS line endings because the break the source maps
|
76
93
|
let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
|
package/lib/jsdoc/preprocess.js
CHANGED
@@ -116,7 +116,7 @@ const processComponentFile = async (fileName) => {
|
|
116
116
|
const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
|
117
117
|
let jsFileContent = `${await fs.readFile(destFileName)}`;
|
118
118
|
|
119
|
-
const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
|
119
|
+
const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm");
|
120
120
|
let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
|
121
121
|
if (!classDefinitionMatch) {
|
122
122
|
return; // not a file, generated by typescript, nothing to do here
|
@@ -154,22 +154,29 @@ module.exports = (options) => {
|
|
154
154
|
options.removeDuplicatedProperties ||
|
155
155
|
options.removeDuplicatedValues
|
156
156
|
) {
|
157
|
-
removeDupProperties(
|
158
|
-
|
159
|
-
|
160
|
-
);
|
157
|
+
// removeDupProperties(
|
158
|
+
// destination,
|
159
|
+
// options.removeDuplicatedValues,
|
160
|
+
// );
|
161
161
|
}
|
162
162
|
} else {
|
163
163
|
if (
|
164
164
|
options.removeDuplicatedProperties ||
|
165
165
|
options.removeDuplicatedValues
|
166
166
|
) {
|
167
|
-
removeDupProperties(rule, options.removeDuplicatedValues);
|
167
|
+
// removeDupProperties(rule, options.removeDuplicatedValues);
|
168
168
|
}
|
169
169
|
// add new selector to symbol table
|
170
170
|
map.set(selector, rule);
|
171
171
|
}
|
172
172
|
},
|
173
|
+
OnceExit(root) {
|
174
|
+
root.nodes.forEach(node => {
|
175
|
+
if (node.type === "rule") {
|
176
|
+
removeDupProperties(node, options.removeDuplicatedValues);
|
177
|
+
}
|
178
|
+
})
|
179
|
+
}
|
173
180
|
};
|
174
181
|
},
|
175
182
|
};
|
@@ -10,7 +10,7 @@ const getTag = file => {
|
|
10
10
|
|
11
11
|
const getPackageTags = (packageDir) => {
|
12
12
|
const srcDir = path.join(packageDir, "src/");
|
13
|
-
return glob.sync(path.join(srcDir, "/**/*.
|
13
|
+
return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
|
14
14
|
const tag = getTag(file);
|
15
15
|
return [tag];
|
16
16
|
}).filter(item => !!item);
|
@@ -18,6 +18,7 @@ const replaceTagsHTML = content => {
|
|
18
18
|
|
19
19
|
// Replace tags in any content
|
20
20
|
const replaceTagsAny = content => {
|
21
|
+
console.log(tags.length);
|
21
22
|
tags.forEach(tag => {
|
22
23
|
content = content.replace(new RegExp(`(^|[^\-_A-Za-z0-9])(${tag})([^\-_A-Za-z0-9]|$)`, "g"), `$1$2-${suffix}$3`);
|
23
24
|
});
|
@@ -27,7 +28,7 @@ const replaceTagsAny = content => {
|
|
27
28
|
// Replace bundle names and HTML tag names in test pages
|
28
29
|
glob.sync(path.join(root, "/**/*.html")).forEach(file => {
|
29
30
|
let content = String(fs.readFileSync(file));
|
30
|
-
content = content.replace(
|
31
|
+
content = content.replace("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
|
31
32
|
content = replaceTagsHTML(content);
|
32
33
|
fs.writeFileSync(file, content);
|
33
34
|
});
|
@@ -61,8 +61,8 @@ if (process.argv.length > 3) {
|
|
61
61
|
let wdioConfig = "";
|
62
62
|
if (fs.existsSync("config/wdio.conf.cjs")) {
|
63
63
|
wdioConfig = "config/wdio.conf.cjs";
|
64
|
-
} else {
|
65
|
-
|
64
|
+
} else if (fs.existsSync("config/wdio.conf.js")) {
|
65
|
+
wdioConfig = "config/wdio.conf.js";
|
66
66
|
}
|
67
67
|
|
68
68
|
// run wdio with calculated parameters
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ui5/webcomponents-tools",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-f79db712b",
|
4
4
|
"description": "UI5 Web Components: webcomponents.tools",
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
6
6
|
"license": "Apache-2.0",
|
@@ -21,23 +21,24 @@
|
|
21
21
|
"directory": "packages/tools"
|
22
22
|
},
|
23
23
|
"dependencies": {
|
24
|
-
"@
|
25
|
-
"@typescript-eslint/
|
24
|
+
"@custom-elements-manifest/analyzer": "^0.8.4",
|
25
|
+
"@typescript-eslint/eslint-plugin": "^6.9.0",
|
26
|
+
"@typescript-eslint/parser": "^6.9.0",
|
26
27
|
"@wdio/cli": "^7.19.7",
|
27
|
-
"@wdio/devtools-service": "^7.19.7",
|
28
28
|
"@wdio/dot-reporter": "^7.19.7",
|
29
29
|
"@wdio/local-runner": "^7.19.7",
|
30
30
|
"@wdio/mocha-framework": "^7.19.7",
|
31
31
|
"@wdio/spec-reporter": "^7.19.7",
|
32
32
|
"@wdio/static-server-service": "^7.19.5",
|
33
|
+
"ajv": "^8.12.0",
|
33
34
|
"chai": "^4.3.4",
|
34
35
|
"child_process": "^1.0.2",
|
35
36
|
"chokidar": "^3.5.1",
|
36
37
|
"chokidar-cli": "^3.0.0",
|
37
38
|
"command-line-args": "^5.1.1",
|
39
|
+
"comment-parser": "^1.4.0",
|
38
40
|
"concurrently": "^6.0.0",
|
39
41
|
"cross-env": "^7.0.3",
|
40
|
-
"cssnano": "^4.1.11",
|
41
42
|
"escodegen": "^2.0.0",
|
42
43
|
"eslint": "^7.22.0",
|
43
44
|
"eslint-config-airbnb-base": "^14.2.1",
|
@@ -55,16 +56,15 @@
|
|
55
56
|
"nps": "^5.10.0",
|
56
57
|
"postcss": "^8.4.5",
|
57
58
|
"postcss-cli": "^9.1.0",
|
58
|
-
"postcss-import": "^14.0.2",
|
59
59
|
"postcss-selector-parser": "^6.0.10",
|
60
|
+
"prompts": "^2.4.2",
|
60
61
|
"properties-reader": "^2.2.0",
|
61
62
|
"recursive-readdir": "^2.2.2",
|
62
63
|
"resolve": "^1.20.0",
|
63
64
|
"rimraf": "^3.0.2",
|
64
65
|
"slash": "3.0.0",
|
65
|
-
"vite": "^
|
66
|
-
"wdio-chromedriver-service": "^7.3.2"
|
67
|
-
"zx": "^4.3.0"
|
66
|
+
"vite": "^4.4.9",
|
67
|
+
"wdio-chromedriver-service": "^7.3.2"
|
68
68
|
},
|
69
69
|
"peerDependencies": {
|
70
70
|
"chromedriver": "*",
|
@@ -76,6 +76,7 @@
|
|
76
76
|
}
|
77
77
|
},
|
78
78
|
"devDependencies": {
|
79
|
+
"esbuild": "^0.19.9",
|
79
80
|
"yargs": "^17.5.1"
|
80
81
|
}
|
81
82
|
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
const fs = require('fs');
|
2
|
-
const path = require('path');
|
3
|
-
const mkdirp = require('mkdirp');
|
4
|
-
|
5
|
-
const proccessCSS = css => {
|
6
|
-
css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
|
7
|
-
css = css.replace(/\.background-image.*{.*}/, "");
|
8
|
-
css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
|
9
|
-
css = css.replace(/--sapFontUrl.*\);?/, "");
|
10
|
-
return css;
|
11
|
-
}
|
12
|
-
|
13
|
-
module.exports = function (opts) {
|
14
|
-
opts = opts || {};
|
15
|
-
|
16
|
-
return {
|
17
|
-
postcssPlugin: 'postcss-css-to-json',
|
18
|
-
Once (root) {
|
19
|
-
let css = root.toString();
|
20
|
-
css = proccessCSS(css);
|
21
|
-
|
22
|
-
const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
|
23
|
-
mkdirp.sync(path.dirname(targetFile));
|
24
|
-
|
25
|
-
const filePath = `${targetFile}.json`;
|
26
|
-
const data = {
|
27
|
-
packageName: opts.packageName,
|
28
|
-
fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
|
29
|
-
content: css
|
30
|
-
};
|
31
|
-
// it seems slower to read the old content, but writing the same content with no real changes
|
32
|
-
// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
|
33
|
-
let oldContent = "";
|
34
|
-
try {
|
35
|
-
oldContent = fs.readFileSync(filePath).toString();
|
36
|
-
} catch (e) {
|
37
|
-
// file not found
|
38
|
-
}
|
39
|
-
const content = JSON.stringify({_: data});
|
40
|
-
if (content !== oldContent) {
|
41
|
-
fs.writeFileSync(filePath, content);
|
42
|
-
}
|
43
|
-
}
|
44
|
-
};
|
45
|
-
};
|
46
|
-
|
47
|
-
module.exports.postcss = true;
|
@@ -1,36 +0,0 @@
|
|
1
|
-
const chokidar = require("chokidar");
|
2
|
-
const commandLineArgs = require("command-line-args");
|
3
|
-
const { exec } = require("child_process");
|
4
|
-
|
5
|
-
const options = commandLineArgs([
|
6
|
-
{ name: "srcFiles", type: String },
|
7
|
-
]);
|
8
|
-
|
9
|
-
const runPostcss = path => {
|
10
|
-
let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
|
11
|
-
console.log(`Executing: ${command}`);
|
12
|
-
exec(command, (err, stdout, stderr) => {
|
13
|
-
if (err) {
|
14
|
-
console.log(`Could not run postcss for ${path}. Error: ${err}`);
|
15
|
-
}
|
16
|
-
});
|
17
|
-
|
18
|
-
command = `${command} -w`;
|
19
|
-
console.log(`Executing: ${command}`);
|
20
|
-
exec(command, (err, stdout, stderr) => {
|
21
|
-
if (err) {
|
22
|
-
console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
|
23
|
-
}
|
24
|
-
});
|
25
|
-
};
|
26
|
-
|
27
|
-
let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
|
28
|
-
const watcher = chokidar.watch(options.srcFiles);
|
29
|
-
watcher.on("ready", () => {
|
30
|
-
ready = true; // Initial scan is over -> waiting for new files
|
31
|
-
});
|
32
|
-
watcher.on("add", path => {
|
33
|
-
if (ready) {
|
34
|
-
runPostcss(path);
|
35
|
-
}
|
36
|
-
});
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import 'zx/globals';
|
2
|
-
|
3
|
-
// don't print executed commands and their output
|
4
|
-
$.verbose = false;
|
5
|
-
|
6
|
-
const inputFiles = await globby("src/**/parameters-bundle.css");
|
7
|
-
|
8
|
-
const restArgs = process.argv.slice(2);
|
9
|
-
|
10
|
-
// run all postcss processes in parallel as passing the glob directly to postcss makes them processed sequentially.
|
11
|
-
// and the amount of imports give a big speed up when run in parallel
|
12
|
-
await Promise.all(inputFiles.map(file => {
|
13
|
-
return $`postcss ${file} --config config/postcss.themes --base src --dir dist/css/ ${restArgs}`;
|
14
|
-
}));
|