@ui5/webcomponents-tools 0.0.0-e463d2345 → 0.0.0-e55c2cec6
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 +319 -1
- package/README.md +5 -6
- package/assets-meta.js +153 -0
- package/bin/dev.js +12 -1
- package/components-package/eslint.js +28 -0
- package/components-package/nps.js +99 -42
- package/components-package/postcss.themes.js +6 -3
- package/components-package/vite.config.js +12 -0
- package/components-package/wdio.js +125 -65
- package/components-package/wdio.sync.js +360 -0
- package/icons-collection/nps.js +67 -28
- package/lib/copy-and-watch/index.js +145 -0
- package/lib/copy-list/index.js +28 -0
- package/lib/create-icons/index.js +101 -50
- package/lib/create-illustrations/index.js +161 -0
- package/lib/create-new-component/index.js +23 -11
- package/lib/dev-server/dev-server.js +66 -0
- package/lib/dev-server/virtual-index-html-plugin.js +53 -0
- package/lib/esm-abs-to-rel/index.js +58 -0
- package/lib/generate-custom-elements-manifest/index.js +373 -0
- package/lib/generate-js-imports/illustrations.js +72 -0
- package/lib/generate-json-imports/i18n.js +98 -47
- package/lib/generate-json-imports/themes.js +71 -16
- package/lib/hbs2lit/index.js +2 -4
- package/lib/hbs2lit/src/compiler.js +26 -8
- package/lib/hbs2lit/src/includesReplacer.js +23 -17
- package/lib/hbs2lit/src/litVisitor2.js +103 -19
- package/lib/hbs2lit/src/svgProcessor.js +3 -3
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +5 -5
- package/lib/hbs2ui5/index.js +52 -30
- package/lib/i18n/defaults.js +72 -52
- package/lib/i18n/toJSON.js +25 -13
- package/lib/jsdoc/config.json +1 -1
- package/lib/jsdoc/configTypescript.json +29 -0
- package/lib/jsdoc/plugin.js +65 -4
- package/lib/jsdoc/preprocess.js +146 -0
- package/lib/jsdoc/template/publish.js +32 -4
- package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
- package/lib/postcss-css-to-esm/index.js +45 -21
- package/lib/postcss-css-to-json/index.js +38 -11
- package/lib/postcss-new-files/index.js +36 -0
- package/lib/postcss-p/postcss-p.mjs +14 -0
- package/lib/replace-global-core/index.js +25 -0
- package/lib/scoping/get-all-tags.js +37 -0
- package/lib/scoping/lint-src.js +31 -0
- package/lib/scoping/missing-dependencies.js +65 -0
- package/lib/scoping/report-tags-usage.js +28 -0
- package/lib/scoping/scope-test-pages.js +40 -0
- package/lib/test-runner/test-runner.js +63 -0
- package/package.json +48 -55
- package/bin/init-ui5-package.js +0 -3
- package/components-package/rollup.js +0 -134
- package/components-package/serve.json +0 -3
- package/lib/documentation/index.js +0 -143
- package/lib/documentation/templates/api-component-since.js +0 -3
- package/lib/documentation/templates/api-css-variables-section.js +0 -24
- package/lib/documentation/templates/api-events-section.js +0 -35
- package/lib/documentation/templates/api-methods-section.js +0 -26
- package/lib/documentation/templates/api-properties-section.js +0 -40
- package/lib/documentation/templates/api-slots-section.js +0 -28
- package/lib/documentation/templates/template.js +0 -38
- package/lib/init-package/index.js +0 -119
- package/lib/init-package/resources/.eslintignore +0 -3
- package/lib/init-package/resources/bundle.es5.js +0 -25
- package/lib/init-package/resources/bundle.esm.js +0 -34
- package/lib/init-package/resources/config/.eslintrc.js +0 -1
- package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
- package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
- package/lib/init-package/resources/config/rollup.config.js +0 -1
- package/lib/init-package/resources/config/wdio.conf.js +0 -1
- package/lib/init-package/resources/package-scripts.js +0 -11
- package/lib/init-package/resources/src/Assets.js +0 -6
- package/lib/init-package/resources/src/Demo.hbs +0 -1
- package/lib/init-package/resources/src/Demo.js +0 -57
- package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
- package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
- package/lib/init-package/resources/src/themes/Demo.css +0 -11
- package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
- package/lib/init-package/resources/test/pages/index.html +0 -51
- package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
package/lib/hbs2lit/index.js
CHANGED
@@ -5,15 +5,26 @@ const includesReplacer = require("./includesReplacer");
|
|
5
5
|
const svgProcessor = require("./svgProcessor");
|
6
6
|
|
7
7
|
const removeWhiteSpaces = (source) => {
|
8
|
-
return source
|
8
|
+
return source
|
9
|
+
.replace(/\s*\r*\n+\s*/g, " ") // Replace new lines and all whitespace between them with a space
|
10
|
+
.replace(/\s*<\s*/g, "<") // Strip whitespace round <
|
11
|
+
.replace(/\s*>\s*/g, ">") // Strip whitespace round >
|
12
|
+
.replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
|
9
13
|
};
|
10
14
|
|
11
|
-
const
|
12
|
-
let sPreprocessed =
|
15
|
+
const hbs2lit = async (file) => {
|
16
|
+
let sPreprocessed = await includesReplacer.replace(file);
|
13
17
|
|
14
|
-
sPreprocessed = await includesReplacer.replace(sPreprocessed, config);
|
15
18
|
sPreprocessed = removeWhiteSpaces(sPreprocessed);
|
16
19
|
|
20
|
+
// icons hack
|
21
|
+
if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
|
22
|
+
return `
|
23
|
+
let block0 = () => {
|
24
|
+
return svg\`${sPreprocessed}\`
|
25
|
+
}`;
|
26
|
+
}
|
27
|
+
|
17
28
|
const ast = Handlebars.parse(sPreprocessed);
|
18
29
|
|
19
30
|
const pv = new PartialsVisitor();
|
@@ -27,13 +38,20 @@ const compileString = async (sInput, config) => {
|
|
27
38
|
lv.accept(ast);
|
28
39
|
|
29
40
|
for (let key in lv.blocks) {
|
30
|
-
|
41
|
+
let block = lv.blocks[key];
|
42
|
+
|
43
|
+
if (block.match(/scopeTag/)) {
|
44
|
+
const matches = block.match(/^(.*?)( => )(.*?);$/);
|
45
|
+
const scopedCode = matches[3];
|
46
|
+
const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
|
47
|
+
block = `${matches[1]}${matches[2]}suffix ? ${scopedCode} : ${normalCode};`;
|
48
|
+
}
|
49
|
+
|
50
|
+
result += block + "\n";
|
31
51
|
}
|
32
52
|
|
33
53
|
result = svgProcessor.process(result);
|
34
54
|
return result;
|
35
55
|
};
|
36
56
|
|
37
|
-
module.exports =
|
38
|
-
compileString
|
39
|
-
};
|
57
|
+
module.exports = hbs2lit;
|
@@ -1,25 +1,31 @@
|
|
1
1
|
const path = require("path");
|
2
|
-
const
|
3
|
-
const nativeFs = require("fs");
|
2
|
+
const fs = require("fs").promises;
|
4
3
|
|
5
|
-
|
6
|
-
const
|
7
|
-
|
8
|
-
const inclRegex = /{{>\s*include\s*["']([a-zA-Z.\/]+)["']}}/g;
|
9
|
-
|
10
|
-
async function replacer(match, p1) {
|
11
|
-
const includeContent = await readFile(path.join(config.templatesPath, p1), "utf-8");
|
12
|
-
hbs = hbs.replace(match, includeContent);
|
13
|
-
}
|
4
|
+
const replaceIncludes = async (file) => {
|
5
|
+
const filePath = path.dirname(file);
|
6
|
+
let fileContent = await fs.readFile(file, "utf-8");
|
14
7
|
|
8
|
+
const inclRegex = /{{>\s*include\s*["'](.+?)["']}}/g;
|
15
9
|
let match;
|
16
|
-
|
17
|
-
while
|
18
|
-
|
10
|
+
|
11
|
+
while((match = inclRegex.exec(fileContent)) !== null) {
|
12
|
+
inclRegex.lastIndex = 0;
|
13
|
+
|
14
|
+
let targetFile = match[1];
|
15
|
+
if (targetFile.startsWith(".")) {
|
16
|
+
// Relative path, f.e. {{>include "./Popup.hbs"}} or {{>include "../partials/Header.hbs"}}
|
17
|
+
targetFile = path.join(filePath, targetFile);
|
18
|
+
} else {
|
19
|
+
// Node module path, f.e. {{>include "@ui5/webcomponents/src/Popup.hbs"}}
|
20
|
+
targetFile = require.resolve(targetFile);
|
21
|
+
}
|
22
|
+
|
23
|
+
fileContent = fileContent.replace(match[0], await replaceIncludes(targetFile));
|
19
24
|
}
|
20
|
-
|
21
|
-
|
25
|
+
|
26
|
+
return fileContent;
|
27
|
+
};
|
22
28
|
|
23
29
|
module.exports = {
|
24
30
|
replace: replaceIncludes
|
25
|
-
};
|
31
|
+
};
|
@@ -2,14 +2,40 @@ const Handlebars = require("handlebars/dist/handlebars.min.js");
|
|
2
2
|
const path = require("path");
|
3
3
|
const Visitor = Handlebars.Visitor;
|
4
4
|
|
5
|
+
// skip ifDefined for event handlers and boolean attrs
|
6
|
+
let skipIfDefined = false;
|
7
|
+
|
8
|
+
// when true => an HTML node value, when false => an attribute value
|
9
|
+
let isNodeValue = false;
|
10
|
+
|
11
|
+
// when true => the current attribute is "style"
|
12
|
+
let isStyleAttribute = false;
|
13
|
+
|
14
|
+
// matches event handlers @click= and boolean attrs ?disabled=
|
15
|
+
const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
|
16
|
+
|
17
|
+
if (!String.prototype.replaceAll) {
|
18
|
+
String.prototype.replaceAll = function(str, newStr){
|
19
|
+
|
20
|
+
// If a regex pattern
|
21
|
+
if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
|
22
|
+
return this.replace(str, newStr);
|
23
|
+
}
|
24
|
+
|
25
|
+
// If a string
|
26
|
+
return this.replace(new RegExp(str, 'g'), newStr);
|
27
|
+
|
28
|
+
};
|
29
|
+
}
|
30
|
+
|
5
31
|
function HTMLLitVisitor(debug) {
|
6
32
|
this.blockCounter = 0;
|
7
33
|
this.keys = [];
|
8
34
|
this.blocks = {};
|
9
35
|
this.result = "";
|
10
36
|
this.mainBlock = "";
|
11
|
-
this.
|
12
|
-
this.blockParameters = ["context"];
|
37
|
+
this.blockLevel = 0;
|
38
|
+
this.blockParameters = ["context", "tags", "suffix"];
|
13
39
|
this.paths = []; //contains all normalized relative paths
|
14
40
|
this.debug = debug;
|
15
41
|
if (this.debug) {
|
@@ -25,18 +51,17 @@ HTMLLitVisitor.prototype.Program = function(program) {
|
|
25
51
|
this.keys.push(key);
|
26
52
|
this.debug && this.blockByNumber.push(key);
|
27
53
|
|
28
|
-
this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") =>
|
54
|
+
this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
|
29
55
|
|
30
56
|
if (this.keys.length > 1) { //it's a nested block
|
31
57
|
this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
|
32
58
|
} else {
|
33
59
|
this.mainBlock = this.currentKey();
|
34
|
-
this.paths.push(this.blockPath);
|
35
60
|
}
|
36
61
|
|
37
62
|
this.blocks[this.currentKey()] += "html`";
|
38
63
|
Visitor.prototype.Program.call(this, program);
|
39
|
-
this.blocks[this.currentKey()] += "`;
|
64
|
+
this.blocks[this.currentKey()] += "`;";
|
40
65
|
|
41
66
|
this.keys.pop(key);
|
42
67
|
};
|
@@ -45,8 +70,25 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
|
|
45
70
|
Visitor.prototype.ContentStatement.call(this, content);
|
46
71
|
// let content = content.orgiinal; // attribute="__ attribute = "__ attribute ="__
|
47
72
|
|
48
|
-
|
73
|
+
let contentStatement = content.original;
|
74
|
+
skipIfDefined = !!dynamicAttributeRgx.exec(contentStatement);
|
75
|
+
|
76
|
+
const closingIndex = contentStatement.lastIndexOf(">");
|
77
|
+
const openingIndex = contentStatement.lastIndexOf("<");
|
78
|
+
if (closingIndex !== -1 || openingIndex !== -1) { // Only change isNodeValue whenever < or > is found in the content statement
|
79
|
+
isNodeValue = closingIndex > openingIndex;
|
80
|
+
}
|
81
|
+
|
82
|
+
isStyleAttribute = !isNodeValue && contentStatement.match(/style *= *["']? *$/);
|
49
83
|
|
84
|
+
if (!isStyleAttribute && contentStatement.match(/style=/)) {
|
85
|
+
console.log("WARNING: style hard-coded", contentStatement);
|
86
|
+
}
|
87
|
+
|
88
|
+
// Scope custom element tags
|
89
|
+
contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
|
90
|
+
|
91
|
+
this.blocks[this.currentKey()] += contentStatement;
|
50
92
|
};
|
51
93
|
|
52
94
|
HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
|
@@ -57,14 +99,17 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
|
|
57
99
|
} else {
|
58
100
|
const path = normalizePath.call(this, mustache.path.original);
|
59
101
|
const hasCalculatingClasses = path.includes("context.classes");
|
60
|
-
|
61
|
-
|
102
|
+
|
62
103
|
let parsedCode = "";
|
63
104
|
|
64
|
-
if (
|
65
|
-
parsedCode = `\${
|
66
|
-
} else if (
|
67
|
-
parsedCode = `\${
|
105
|
+
if (isNodeValue && !mustache.escaped) {
|
106
|
+
parsedCode = `\${unsafeHTML(${path})}`;
|
107
|
+
} else if (hasCalculatingClasses) {
|
108
|
+
parsedCode = `\${classMap(${path})}`;
|
109
|
+
} else if (isStyleAttribute) {
|
110
|
+
parsedCode = `\${styleMap(${path})}`;
|
111
|
+
} else if (skipIfDefined){
|
112
|
+
parsedCode = `\${${path}}`;
|
68
113
|
} else {
|
69
114
|
parsedCode = `\${ifDefined(${path})}`;
|
70
115
|
}
|
@@ -125,9 +170,9 @@ function visitEachBlock(block) {
|
|
125
170
|
var bParamAdded = false;
|
126
171
|
visitSubExpression.call(this, block);
|
127
172
|
|
128
|
-
this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ",
|
173
|
+
this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
|
129
174
|
this.paths.push(normalizePath.call(this, block.params[0].original));
|
130
|
-
this.
|
175
|
+
this.blockLevel++;
|
131
176
|
|
132
177
|
if (this.blockParameters.indexOf("item") === -1) {
|
133
178
|
bParamAdded = true;
|
@@ -139,8 +184,7 @@ function visitEachBlock(block) {
|
|
139
184
|
this.blockParameters.shift("item");
|
140
185
|
this.blockParameters.shift("index");
|
141
186
|
}
|
142
|
-
this.
|
143
|
-
|
187
|
+
this.blockLevel--;
|
144
188
|
this.blocks[this.currentKey()] += ") }";
|
145
189
|
}
|
146
190
|
|
@@ -149,12 +193,52 @@ function normalizePath(sPath) {
|
|
149
193
|
|
150
194
|
//read carefully - https://github.com/wycats/handlebars.js/issues/1028
|
151
195
|
//kpdecker commented on May 20, 2015
|
152
|
-
|
153
|
-
|
196
|
+
|
197
|
+
if (result.indexOf("@root") === 0) {
|
198
|
+
// Trying to access root context via the HBS "@root" variable.
|
199
|
+
// Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
|
200
|
+
result = result.replace("@root", "context");
|
201
|
+
|
202
|
+
} else if (result.indexOf("../") === 0) {
|
203
|
+
let absolutePath;
|
204
|
+
const levelsUp = (result.match(/..\//g) || []).length;
|
205
|
+
|
206
|
+
if (this.blockLevel <= levelsUp) {
|
207
|
+
// Trying to access root context from nested loops.
|
208
|
+
// Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
|
209
|
+
// Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
|
210
|
+
absolutePath = `context.${replaceAll(result,"../", "")}`;
|
211
|
+
} else {
|
212
|
+
// Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
|
213
|
+
// Example: {{../property}} compiles to "context.property" - when called in a top level loop.
|
214
|
+
// Example: {{../property}} compiles to "item.property" - when called in a nested level loop.
|
215
|
+
// TODO: the second example, although correctly generated to "item.property", "item" will point to the current object within the nested loop,
|
216
|
+
// not the upper level loop as intended. So accessing the upper loop from nested loop is currently not working.
|
217
|
+
absolutePath = replaceAll(this.paths[this.paths.length - 1 - levelsUp], ".", "/") + "/" + result;
|
218
|
+
}
|
219
|
+
|
154
220
|
result = replaceAll(path.normalize(absolutePath), path.sep, ".");
|
221
|
+
|
155
222
|
} else {
|
156
|
-
|
223
|
+
// When neither "@root", nor "../" are used, use the following contexts:
|
224
|
+
// - use "context" - for the top level of execution, e.g "this.blockLevel = 0".
|
225
|
+
// - use "item" - for any nested level, e.g "this.blockLevel > 0".
|
226
|
+
// Example:
|
227
|
+
//
|
228
|
+
// {{text}} -> compiles to "context.text"
|
229
|
+
// {{#each items}}
|
230
|
+
// Item text: {{text}}</div> -> compiles to "item.text"
|
231
|
+
// {{#each words}}
|
232
|
+
// Word text: {{text}}</div> -> compiles to "item.text"
|
233
|
+
// {{/each}}
|
234
|
+
// Item text: {{text}}</div> -> compiles to "item.text"
|
235
|
+
// {{/each}}
|
236
|
+
// {{text}} -> compiles to "context.text"
|
237
|
+
|
238
|
+
const blockPath = this.blockLevel > 0 ? "item" : "context";
|
239
|
+
result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
|
157
240
|
}
|
241
|
+
|
158
242
|
return result;
|
159
243
|
}
|
160
244
|
|
@@ -46,8 +46,8 @@ function getSVGMatches(template) {
|
|
46
46
|
|
47
47
|
function getSVGBlock(input, blockCounter) {
|
48
48
|
return {
|
49
|
-
usage: `\${blockSVG${blockCounter}(context)}`,
|
50
|
-
definition: `\nconst blockSVG${blockCounter} = (context) =>
|
49
|
+
usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
|
50
|
+
definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
|
51
51
|
};
|
52
52
|
}
|
53
53
|
|
@@ -55,7 +55,7 @@ function replaceInternalBlocks(template, svgContent) {
|
|
55
55
|
const internalBlocks = svgContent.match(blockrx) || [];
|
56
56
|
|
57
57
|
internalBlocks.forEach(blockName => {
|
58
|
-
const rx = new RegExp(`const ${blockName}.*(html\`)
|
58
|
+
const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
|
59
59
|
template = template.replace(rx, (match, p1) => {
|
60
60
|
return match.replace(p1, "svg\`");
|
61
61
|
});
|
@@ -1,10 +1,10 @@
|
|
1
1
|
const buildRenderer = (controlName, litTemplate) => {
|
2
|
-
return
|
3
|
-
|
4
|
-
|
5
|
-
import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
|
2
|
+
return `/* eslint no-unused-vars: 0 */
|
3
|
+
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
4
|
+
|
6
5
|
${litTemplate}
|
7
|
-
|
6
|
+
|
7
|
+
export default block0;`;
|
8
8
|
};
|
9
9
|
|
10
10
|
module.exports = {
|
package/lib/hbs2ui5/index.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
|
-
const fs = require('fs');
|
1
|
+
const fs = require('fs').promises;
|
2
2
|
const getopts = require('getopts');
|
3
3
|
const hbs2lit = require('../hbs2lit');
|
4
4
|
const path = require('path');
|
5
5
|
const litRenderer = require('./RenderTemplates/LitRenderer');
|
6
|
+
const recursiveReadDir = require("recursive-readdir");
|
6
7
|
|
7
8
|
const args = getopts(process.argv.slice(2), {
|
8
9
|
alias: {
|
@@ -18,55 +19,74 @@ const args = getopts(process.argv.slice(2), {
|
|
18
19
|
|
19
20
|
const onError = (place) => {
|
20
21
|
console.log(`A problem occoured when reading ${place}. Please recheck passed parameters.`);
|
21
|
-
}
|
22
|
+
};
|
23
|
+
|
22
24
|
const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
|
23
|
-
const parseFile = (filePath, inputDir, outputDir) => {
|
24
|
-
fs.readFile(filePath, 'utf-8', (err, content) => {
|
25
25
|
|
26
|
-
|
27
|
-
|
28
|
-
|
26
|
+
const processFile = async (file, outputDir) => {
|
27
|
+
const litCode = await hbs2lit(file);
|
28
|
+
const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
|
29
|
+
const componentNameMatcher = /(\w+)(\.hbs)/gim;
|
30
|
+
const componentName = componentNameMatcher.exec(file)[1];
|
29
31
|
|
30
|
-
|
31
|
-
|
32
|
-
compiledTemplatesPath: outputDir
|
33
|
-
}).then((litCode) => {
|
34
|
-
const componentNameMatcher = /(\w+)(\.hbs)/gim;
|
35
|
-
const componentName = componentNameMatcher.exec(filePath)[1];
|
32
|
+
return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
|
33
|
+
};
|
36
34
|
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
35
|
+
const composeAbsoluteOutputDir = (file, outputDir) => {
|
36
|
+
// (1) Extract the dir structure from the source file path - "src/lvl1/lvl2/MyCompBadge.hbs"
|
37
|
+
// - remove the filename - "src/lvl1/lvl2"
|
38
|
+
// - remove the leading dir - "lvl1/lvl2"
|
39
|
+
const fileDir = file.split(path.sep).slice(1, -1).join(path.sep);
|
40
|
+
|
41
|
+
// (2) Compose full output dir - "dist/generated/templates/lvl1/lvl2"
|
42
|
+
return `${outputDir}${path.sep}${fileDir}`;
|
43
|
+
};
|
41
44
|
|
42
45
|
const wrapDirectory = (directory, outputDir) => {
|
43
46
|
directory = path.normalize(directory);
|
44
47
|
outputDir = path.normalize(outputDir);
|
45
48
|
|
46
|
-
|
49
|
+
return new Promise((resolve, reject) => {
|
50
|
+
recursiveReadDir(directory, (err, files) => {
|
47
51
|
|
48
|
-
|
49
|
-
|
50
|
-
|
52
|
+
if (err) {
|
53
|
+
onError('directory');
|
54
|
+
reject();
|
55
|
+
}
|
51
56
|
|
52
|
-
|
53
|
-
|
57
|
+
const promises = files.map(fileName => {
|
58
|
+
if (isHandlebars(fileName)) {
|
59
|
+
return processFile(fileName, outputDir);
|
60
|
+
}
|
61
|
+
}).filter(x => !!x);
|
54
62
|
|
55
|
-
|
56
|
-
parseFile(directory + fileName, directory, outputDir);
|
57
|
-
}
|
63
|
+
resolve(Promise.all(promises));
|
58
64
|
});
|
59
|
-
})
|
65
|
+
});
|
60
66
|
};
|
61
67
|
|
62
|
-
const writeRenderers = (outputDir, controlName, fileContent) => {
|
68
|
+
const writeRenderers = async (outputDir, controlName, fileContent) => {
|
63
69
|
try {
|
70
|
+
|
71
|
+
await fs.mkdir(outputDir, { recursive: true });
|
72
|
+
|
64
73
|
const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
|
65
74
|
|
66
75
|
// strip DOS line endings because the break the source maps
|
67
76
|
let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
|
68
77
|
fileContentUnix = fileContentUnix.replace(/\r/g, "\n");
|
69
|
-
|
78
|
+
|
79
|
+
// Only write to the file system actual changes - each updated file, no matter if the same or not, triggers an expensive operation for rollup
|
80
|
+
// Note: .hbs files that include a changed .hbs file will also be recompiled as their content will be updated too
|
81
|
+
|
82
|
+
let existingFileContent = "";
|
83
|
+
try {
|
84
|
+
existingFileContent = await fs.readFile(compiledFilePath);
|
85
|
+
} catch (e) {}
|
86
|
+
|
87
|
+
if (existingFileContent !== fileContentUnix) {
|
88
|
+
return fs.writeFile(compiledFilePath, fileContentUnix);
|
89
|
+
}
|
70
90
|
|
71
91
|
} catch (e) {
|
72
92
|
console.log(e);
|
@@ -76,5 +96,7 @@ const writeRenderers = (outputDir, controlName, fileContent) => {
|
|
76
96
|
if (!args['d'] || !args['o']) {
|
77
97
|
console.log('Please provide an input and output directory (-d and -o)');
|
78
98
|
} else {
|
79
|
-
wrapDirectory(args['d'], args['o'])
|
99
|
+
wrapDirectory(args['d'], args['o']).then(() => {
|
100
|
+
console.log("Templates generated");
|
101
|
+
});
|
80
102
|
}
|
package/lib/i18n/defaults.js
CHANGED
@@ -1,55 +1,75 @@
|
|
1
|
-
const fs = require('fs');
|
1
|
+
const fs = require('fs').promises;
|
2
2
|
const path = require('path');
|
3
3
|
const PropertiesReader = require('properties-reader');
|
4
|
-
const
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
}
|
10
|
-
|
11
|
-
const
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
4
|
+
const assets = require('../../assets-meta.js');
|
5
|
+
|
6
|
+
const generate = async () => {
|
7
|
+
const defaultLanguage = assets.languages.default;
|
8
|
+
|
9
|
+
const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
|
10
|
+
const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
|
11
|
+
const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
|
12
|
+
|
13
|
+
if (!messageBundle || !outputFile) {
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
|
17
|
+
const properties = PropertiesReader(messageBundle)._properties;
|
18
|
+
|
19
|
+
let defaultLanguageProperties;
|
20
|
+
try {
|
21
|
+
defaultLanguageProperties = PropertiesReader(messageBundleDefaultLanguage)._properties;
|
22
|
+
} catch (e) {
|
23
|
+
}
|
24
|
+
|
25
|
+
// Merge messagebundle.properties and messagebundle_en.properties files to generate the default texts.
|
26
|
+
// Note:
|
27
|
+
// (1) at DEV time, it's intuituve to work with the source bundle file - the messagebundle.properties,
|
28
|
+
// and see the changes there take effect.
|
29
|
+
// (2) as the messagebundle.properties file is always written in English,
|
30
|
+
// it makes sense to consider the messagebundle.properties content only when the default language is "en".
|
31
|
+
if (defaultLanguage === "en") {
|
32
|
+
defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
|
33
|
+
}
|
34
|
+
|
35
|
+
/*
|
36
|
+
* Returns the single text object to enable single export.
|
37
|
+
*
|
38
|
+
* Example:
|
39
|
+
* const ARIA_LABEL_CARD_CONTENT = {
|
40
|
+
* key: "ARIA_LABEL_CARD_CONTENT",
|
41
|
+
* defaultText: "Card Content",
|
42
|
+
* };
|
43
|
+
*/
|
44
|
+
const getTextInfo = (key, value, defaultLanguageValue) => {
|
45
|
+
let effectiveValue = defaultLanguageValue || value;
|
46
|
+
effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
|
47
|
+
|
48
|
+
return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
|
49
|
+
};
|
50
|
+
|
51
|
+
/*
|
52
|
+
* Returns the complete content of i18n-defaults.js file:
|
53
|
+
* (1) the single text objects
|
54
|
+
* (2) the export statement at the end of the file
|
55
|
+
*
|
56
|
+
* Example:
|
57
|
+
* export {
|
58
|
+
* ARIA_LABEL_CARD_CONTENT,
|
59
|
+
* }
|
60
|
+
*/
|
61
|
+
const getOutputFileContent = (properties, defaultLanguageProperties) => {
|
62
|
+
const textKeys = Object.keys(properties);
|
63
|
+
const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
|
64
|
+
|
65
|
+
return `${texts}
|
39
66
|
export {${textKeys.join()}};`;
|
40
|
-
}
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
}
|
50
|
-
|
51
|
-
console.log(`[i18n]: "${file}" file has been created`);
|
52
|
-
});
|
53
|
-
}
|
54
|
-
|
55
|
-
writeI18nDefaultsFile(outputFile, getOutputFileContent(properties));
|
67
|
+
};
|
68
|
+
|
69
|
+
await fs.mkdir(path.dirname(outputFile), { recursive: true });
|
70
|
+
await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
|
71
|
+
};
|
72
|
+
|
73
|
+
generate().then(() => {
|
74
|
+
console.log("i18n default file generated.");
|
75
|
+
});
|
package/lib/i18n/toJSON.js
CHANGED
@@ -3,29 +3,41 @@
|
|
3
3
|
*
|
4
4
|
* Execution (note: the paths depends on the the execution context)
|
5
5
|
* node toJSON.js ../../src/assets/i18n ../../dist/generated/assets/i18n
|
6
|
-
*
|
6
|
+
*
|
7
7
|
* The 1st param '../../src/assets/i18n' is the location of messagebundle_*.properties files
|
8
8
|
* The 2nd param './../dist/generated/assets/i18n' is where the JSON files would be written to.
|
9
9
|
*/
|
10
10
|
const path = require("path");
|
11
|
-
const glob = require("glob");
|
12
11
|
const PropertiesReader = require('properties-reader');
|
13
|
-
const fs = require('fs');
|
12
|
+
const fs = require('fs').promises;
|
13
|
+
const assets = require('../../assets-meta.js');
|
14
|
+
|
15
|
+
const allLanguages = assets.languages.all;
|
16
|
+
|
14
17
|
const messagesBundles = path.normalize(`${process.argv[2]}/messagebundle_*.properties`);
|
15
18
|
const messagesJSONDist = path.normalize(`${process.argv[3]}`);
|
16
19
|
|
17
|
-
|
20
|
+
const convertToJSON = async (file) => {
|
18
21
|
const properties = PropertiesReader(file)._properties;
|
19
22
|
const filename = path.basename(file, path.extname(file));
|
23
|
+
const language = filename.match(/^messagebundle_(.*?)$/)[1];
|
24
|
+
if (!allLanguages.includes(language)) {
|
25
|
+
console.log("Not supported language: ", language);
|
26
|
+
return;
|
27
|
+
}
|
20
28
|
const outputFile = path.normalize(`${messagesJSONDist}/${filename}.json`);
|
21
29
|
|
22
|
-
fs.
|
23
|
-
console.log(`[i18n]: "${filename}.json" has been generated!`);
|
24
|
-
}
|
30
|
+
return fs.writeFile(outputFile, JSON.stringify(properties));
|
31
|
+
// console.log(`[i18n]: "${filename}.json" has been generated!`);
|
32
|
+
};
|
25
33
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
files.
|
31
|
-
}
|
34
|
+
const generate = async () => {
|
35
|
+
const { globby } = await import("globby");
|
36
|
+
await fs.mkdir(messagesJSONDist, { recursive: true });
|
37
|
+
const files = await globby(messagesBundles);
|
38
|
+
return Promise.all(files.map(convertToJSON));
|
39
|
+
};
|
40
|
+
|
41
|
+
generate().then(() => {
|
42
|
+
console.log("Message bundle JSON files generated.");
|
43
|
+
});
|
package/lib/jsdoc/config.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"source": {
|
3
3
|
"include": "src",
|
4
|
-
"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js"
|
4
|
+
"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
|
5
5
|
},
|
6
6
|
"opts" : {
|
7
7
|
"recurse": true,
|