@ui5/webcomponents-tools 0.0.0-f651a470c → 0.0.0-f6676abdd
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 +1346 -0
- package/README.md +3 -5
- package/assets-meta.js +11 -10
- package/components-package/cypress/support/commands.js +66 -0
- package/components-package/cypress/support/component-index.html +17 -0
- package/components-package/cypress/support/component.d.ts +22 -0
- package/components-package/cypress/support/component.js +46 -0
- package/components-package/cypress/support/cypress-ct-preact.js +11 -0
- package/components-package/cypress.config.js +33 -0
- package/components-package/eslint.js +94 -28
- package/components-package/nps.js +58 -47
- package/components-package/postcss.components.js +1 -21
- package/components-package/postcss.themes.js +1 -26
- package/components-package/vite.config.js +7 -11
- package/components-package/wdio.js +415 -393
- package/icons-collection/nps.js +9 -7
- package/lib/amd-to-es6/index.js +102 -0
- package/lib/amd-to-es6/no-remaining-require.js +33 -0
- package/lib/cem/custom-elements-manifest.config.mjs +544 -0
- package/lib/cem/event.mjs +168 -0
- package/lib/cem/schema-internal.json +1413 -0
- package/lib/cem/schema.json +1098 -0
- package/lib/cem/types-internal.d.ts +808 -0
- package/lib/cem/types.d.ts +736 -0
- package/lib/cem/utils.mjs +423 -0
- package/lib/cem/validate.js +70 -0
- package/lib/create-icons/index.js +8 -6
- package/lib/create-illustrations/index.js +51 -30
- package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +15 -25
- package/lib/create-new-component/ComponentTemplate.js +12 -0
- package/lib/create-new-component/index.js +35 -73
- package/lib/css-processors/css-processor-components.mjs +77 -0
- package/lib/css-processors/css-processor-themes.mjs +74 -0
- package/lib/css-processors/scope-variables.mjs +49 -0
- package/lib/css-processors/shared.mjs +56 -0
- package/lib/dev-server/custom-hot-update-plugin.js +39 -0
- package/lib/dev-server/{dev-server.js → dev-server.mjs} +4 -4
- package/lib/dev-server/virtual-index-html-plugin.js +24 -20
- package/lib/generate-js-imports/illustrations.js +78 -64
- package/lib/generate-json-imports/i18n.js +45 -61
- package/lib/generate-json-imports/themes.js +16 -33
- 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 +39 -6
- package/lib/hbs2ui5/index.js +23 -6
- package/lib/i18n/defaults.js +3 -2
- package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
- package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
- package/lib/scoping/get-all-tags.js +10 -3
- package/lib/scoping/lint-src.js +8 -7
- package/lib/scoping/scope-test-pages.js +2 -1
- package/lib/test-runner/test-runner.js +2 -2
- package/package.json +25 -13
- package/tsconfig.json +18 -0
- package/types/index.d.ts +1 -0
- package/components-package/wdio.sync.js +0 -360
- package/lib/create-new-component/jsFileContentTemplate.js +0 -77
- package/lib/esm-abs-to-rel/index.js +0 -58
- package/lib/generate-custom-elements-manifest/index.js +0 -327
- package/lib/jsdoc/config.json +0 -29
- package/lib/jsdoc/configTypescript.json +0 -29
- package/lib/jsdoc/plugin.js +0 -2468
- package/lib/jsdoc/preprocess.js +0 -146
- package/lib/jsdoc/template/publish.js +0 -4120
- package/lib/postcss-css-to-esm/index.js +0 -90
- 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
- package/lib/replace-global-core/index.js +0 -25
@@ -1,72 +1,86 @@
|
|
1
1
|
const fs = require("fs").promises;
|
2
|
-
const path = require(
|
3
|
-
|
4
|
-
const
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
2
|
+
const path = require("path");
|
3
|
+
|
4
|
+
const generateDynamicImportLines = async (fileNames, location, exclusionPatterns = []) => {
|
5
|
+
const packageName = JSON.parse(await fs.readFile("package.json")).name;
|
6
|
+
return fileNames
|
7
|
+
.filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
|
8
|
+
.map((fileName) => {
|
9
|
+
const illustrationName = fileName.replace(".js", "");
|
10
|
+
const illustrationPath = `${location}/${illustrationName}`;
|
11
|
+
return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
|
12
|
+
})
|
13
|
+
.join("\n");
|
14
|
+
};
|
15
|
+
|
16
|
+
const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = []) => {
|
17
|
+
return JSON.stringify(
|
18
|
+
fileNames
|
19
|
+
.filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
|
20
|
+
.map((fileName) => fileName.replace(".js", ""))
|
21
|
+
);
|
22
|
+
};
|
23
|
+
|
24
|
+
const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, set, prefix = "") => {
|
25
|
+
return `// @ts-nocheck
|
26
|
+
import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
|
27
|
+
|
28
|
+
export const loadIllustration = async (illustrationName) => {
|
29
|
+
const collectionAndPrefix = "${set}/${collection}/${prefix}";
|
30
|
+
const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
|
31
|
+
switch (cleanIllustrationName) {
|
32
|
+
${dynamicImports}
|
33
|
+
default:
|
34
|
+
throw new Error("[Illustrations] Illustration not found: " + illustrationName);
|
35
|
+
}
|
36
|
+
};
|
37
|
+
|
38
|
+
const loadAndCheck = async (illustrationName) => {
|
39
|
+
const data = await loadIllustration(illustrationName);
|
40
|
+
return data;
|
41
|
+
};
|
42
|
+
|
43
|
+
${availableIllustrations}.forEach((illustrationName) =>
|
44
|
+
registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
|
45
|
+
);
|
46
|
+
`;
|
47
|
+
};
|
48
|
+
|
49
|
+
const getMatchingFiles = async (folder, pattern) => {
|
50
|
+
const dir = await fs.readdir(folder);
|
51
|
+
return dir.filter((fileName) => fileName.match(pattern));
|
51
52
|
};
|
52
|
-
const loadAndCheck = async (illustrationName) => {
|
53
|
-
const data = await loadIllustration(illustrationName);
|
54
|
-
return data;
|
55
|
-
}
|
56
53
|
|
54
|
+
const generateIllustrations = async (config) => {
|
55
|
+
const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
|
56
|
+
|
57
|
+
const normalizedInputFolder = path.normalize(inputFolder);
|
58
|
+
const normalizedOutputFile = path.normalize(outputFile);
|
59
|
+
|
60
|
+
const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
|
57
61
|
|
58
|
-
|
59
|
-
|
60
|
-
|
62
|
+
const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
|
63
|
+
const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
|
64
|
+
|
65
|
+
const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, set, prefix);
|
66
|
+
|
67
|
+
await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
|
68
|
+
await fs.writeFile(normalizedOutputFile, contentDynamic);
|
69
|
+
|
70
|
+
console.log(`Generated ${normalizedOutputFile}`);
|
71
|
+
};
|
61
72
|
|
62
|
-
|
63
|
-
|
73
|
+
// Parse configuration from command-line arguments
|
74
|
+
const config = {
|
75
|
+
inputFolder: process.argv[2],
|
76
|
+
outputFile: process.argv[3],
|
77
|
+
set: process.argv[4],
|
78
|
+
collection: process.argv[5],
|
79
|
+
location: process.argv[6],
|
80
|
+
filterOut: process.argv.slice[7],
|
64
81
|
};
|
65
82
|
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
.catch(err => {
|
70
|
-
console.error(err);
|
71
|
-
process.exit(1);
|
83
|
+
// Run the generation process
|
84
|
+
generateIllustrations(config).catch((error) => {
|
85
|
+
console.error("Error generating illustrations:", error);
|
72
86
|
});
|
@@ -1,95 +1,79 @@
|
|
1
1
|
const fs = require("fs").promises;
|
2
2
|
const path = require('path');
|
3
3
|
|
4
|
+
const isTypeScript = process.env.UI5_TS;
|
5
|
+
const ext = isTypeScript ? 'ts' : 'js';
|
6
|
+
|
7
|
+
|
8
|
+
const getContent = function(caseLines, languagesKeysStringArray, packageName) {
|
9
|
+
return `// @ts-nocheck
|
10
|
+
import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
|
11
|
+
|
12
|
+
const importMessageBundle = async (localeId) => {
|
13
|
+
switch (localeId) {
|
14
|
+
${caseLines}
|
15
|
+
default: throw "unknown locale"
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
const importAndCheck = async (localeId) => {
|
20
|
+
const data = await importMessageBundle(localeId);
|
21
|
+
if (typeof data === "string" && data.endsWith(".json")) {
|
22
|
+
throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
|
23
|
+
}
|
24
|
+
return data;
|
25
|
+
}
|
26
|
+
|
27
|
+
const localeIds = [${languagesKeysStringArray}];
|
28
|
+
|
29
|
+
localeIds.forEach(localeId => {
|
30
|
+
registerI18nLoader("${packageName}", localeId, importAndCheck);
|
31
|
+
});
|
32
|
+
`;
|
33
|
+
}
|
34
|
+
|
4
35
|
const generate = async () => {
|
5
36
|
|
6
37
|
const packageName = JSON.parse(await fs.readFile("package.json")).name;
|
7
38
|
|
8
39
|
const inputFolder = path.normalize(process.argv[2]);
|
9
|
-
const
|
10
|
-
const
|
40
|
+
const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
|
41
|
+
const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/i18n-fetch.${ext}`);
|
11
42
|
|
12
|
-
// All languages present in the file system
|
43
|
+
// All languages present in the file system
|
13
44
|
const files = await fs.readdir(inputFolder);
|
14
45
|
const languages = files.map(file => {
|
15
46
|
const matches = file.match(/messagebundle_(.+?).json$/);
|
16
47
|
return matches ? matches[1] : undefined;
|
17
48
|
}).filter(key => !!key);
|
18
49
|
|
19
|
-
let
|
50
|
+
let contentDynamic;
|
51
|
+
let contentFetchMetaResolve;
|
20
52
|
|
21
|
-
// No i18n - just import dependencies, if any
|
53
|
+
// No i18n - just import dependencies, if any
|
22
54
|
if (languages.length === 0) {
|
23
|
-
contentStatic = "";
|
24
55
|
contentDynamic = "";
|
25
|
-
|
56
|
+
contentFetchMetaResolve = "";
|
57
|
+
// There is i18n - generate the full file
|
26
58
|
} else {
|
27
59
|
// Keys for the array
|
28
|
-
const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
|
29
60
|
const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
|
30
61
|
|
31
62
|
// Actual imports for json assets
|
32
|
-
const
|
33
|
-
|
34
|
-
// static imports
|
35
|
-
contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
|
36
|
-
|
37
|
-
${assetsImportsString}
|
38
|
-
|
39
|
-
const bundleMap = {
|
40
|
-
${languagesKeysString}
|
41
|
-
};
|
42
|
-
|
43
|
-
const fetchMessageBundle = async (localeId) => {
|
44
|
-
if (typeof bundleMap[localeId] === "object") {
|
45
|
-
// inlined from build
|
46
|
-
throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
|
47
|
-
}
|
48
|
-
return (await fetch(bundleMap[localeId])).json()
|
49
|
-
}
|
50
|
-
|
51
|
-
const localeIds = [${languagesKeysStringArray}];
|
52
|
-
|
53
|
-
localeIds.forEach(localeId => {
|
54
|
-
registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
|
55
|
-
});
|
56
|
-
`;
|
57
|
-
|
58
|
-
// Actual imports for json assets
|
59
|
-
const dynamicImportsString = languages.map(key => ` case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
|
63
|
+
const dynamicImportsString = languages.map(key => ` case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
|
64
|
+
const fetchMetaResolveString = languages.map(key => ` case "${key}": return (await fetch(new URL("../assets/i18n/messagebundle_${key}.json", import.meta.url))).json();`).join("\n");
|
60
65
|
|
61
66
|
// Resulting file content
|
62
|
-
contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
|
63
|
-
|
64
|
-
const importMessageBundle = async (localeId) => {
|
65
|
-
switch (localeId) {
|
66
|
-
${dynamicImportsString}
|
67
|
-
default: throw "unknown locale"
|
68
|
-
}
|
69
|
-
}
|
70
|
-
|
71
|
-
const importAndCheck = async (localeId) => {
|
72
|
-
const data = await importMessageBundle(localeId);
|
73
|
-
if (typeof data === "string" && data.endsWith(".json")) {
|
74
|
-
throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
|
75
|
-
}
|
76
|
-
return data;
|
77
|
-
}
|
78
|
-
|
79
|
-
const localeIds = [${languagesKeysStringArray}];
|
80
|
-
|
81
|
-
localeIds.forEach(localeId => {
|
82
|
-
registerI18nLoader("${packageName}", localeId, importAndCheck);
|
83
|
-
});
|
84
|
-
`;
|
85
67
|
|
68
|
+
contentDynamic = getContent(dynamicImportsString, languagesKeysStringArray, packageName);
|
69
|
+
contentFetchMetaResolve = getContent(fetchMetaResolveString, languagesKeysStringArray, packageName);
|
86
70
|
|
87
71
|
}
|
88
72
|
|
89
|
-
await fs.mkdir(path.dirname(
|
73
|
+
await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
|
90
74
|
return Promise.all([
|
91
|
-
fs.writeFile(outputFile, contentStatic),
|
92
75
|
fs.writeFile(outputFileDynamic, contentDynamic),
|
76
|
+
fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
|
93
77
|
]);
|
94
78
|
}
|
95
79
|
|
@@ -2,10 +2,13 @@ const fs = require("fs").promises;
|
|
2
2
|
const path = require('path');
|
3
3
|
const assets = require("../../assets-meta.js");
|
4
4
|
|
5
|
+
const isTypeScript = process.env.UI5_TS;
|
6
|
+
const ext = isTypeScript ? 'ts' : 'js';
|
7
|
+
|
5
8
|
const generate = async () => {
|
6
9
|
const inputFolder = path.normalize(process.argv[2]);
|
7
|
-
const
|
8
|
-
const
|
10
|
+
const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
|
11
|
+
const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
|
9
12
|
|
10
13
|
// All supported optional themes
|
11
14
|
const allThemes = assets.themes.all;
|
@@ -19,39 +22,18 @@ const generate = async () => {
|
|
19
22
|
|
20
23
|
const packageName = JSON.parse(await fs.readFile("package.json")).name;
|
21
24
|
|
22
|
-
const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
|
23
|
-
const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
|
24
25
|
const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
|
25
|
-
const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
|
26
|
-
|
27
|
-
|
28
|
-
// static imports file content
|
29
|
-
const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
30
|
-
|
31
|
-
${importLines}
|
32
|
-
|
33
|
-
const themeUrlsByName = ${themeUrlsByName};
|
34
|
-
const isInlined = obj => typeof (obj) === "object";
|
35
|
-
|
36
|
-
const loadThemeProperties = async (themeName) => {
|
37
|
-
if (typeof themeUrlsByName[themeName] === "object") {
|
38
|
-
// inlined from build
|
39
|
-
throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
|
40
|
-
}
|
41
|
-
return (await fetch(themeUrlsByName[themeName])).json();
|
42
|
-
};
|
43
|
-
|
44
|
-
${availableThemesArray}
|
45
|
-
.forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
|
46
|
-
`;
|
47
|
-
|
26
|
+
const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
|
27
|
+
const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n");
|
48
28
|
|
49
29
|
// dynamic imports file content
|
50
|
-
const contentDynamic =
|
30
|
+
const contentDynamic = function (lines) {
|
31
|
+
return `// @ts-nocheck
|
32
|
+
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
51
33
|
|
52
34
|
const loadThemeProperties = async (themeName) => {
|
53
35
|
switch (themeName) {
|
54
|
-
${
|
36
|
+
${lines}
|
55
37
|
default: throw "unknown theme"
|
56
38
|
}
|
57
39
|
};
|
@@ -59,7 +41,7 @@ ${dynamicImportLines}
|
|
59
41
|
const loadAndCheck = async (themeName) => {
|
60
42
|
const data = await loadThemeProperties(themeName);
|
61
43
|
if (typeof data === "string" && data.endsWith(".json")) {
|
62
|
-
throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build
|
44
|
+
throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
|
63
45
|
}
|
64
46
|
return data;
|
65
47
|
};
|
@@ -67,11 +49,12 @@ const loadAndCheck = async (themeName) => {
|
|
67
49
|
${availableThemesArray}
|
68
50
|
.forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
|
69
51
|
`;
|
52
|
+
}
|
70
53
|
|
71
|
-
await fs.mkdir(path.dirname(
|
54
|
+
await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
|
72
55
|
return Promise.all([
|
73
|
-
fs.writeFile(
|
74
|
-
fs.writeFile(
|
56
|
+
fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
|
57
|
+
fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
|
75
58
|
]);
|
76
59
|
};
|
77
60
|
|
@@ -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,12 +1,45 @@
|
|
1
|
-
const
|
2
|
-
|
3
|
-
|
1
|
+
const tsImports = (controlName, hasTypes) => {
|
2
|
+
if (!process.env.UI5_TS) {
|
3
|
+
return "";
|
4
|
+
}
|
4
5
|
|
5
|
-
|
6
|
+
const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@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
|
+
}
|
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 "../../../${controlName}.js";`
|
22
|
+
}
|
23
|
+
return `import type ${controlName} from "../../${controlName}.js";`
|
24
|
+
}
|
6
25
|
|
7
|
-
|
26
|
+
const buildRenderer = (controlName, litTemplate, hasTypes) => {
|
27
|
+
const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/";
|
28
|
+
|
29
|
+
const mainTemplateFunction = process.env.UI5_TS ?
|
30
|
+
`function template(this: ${controlName}) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }` :
|
31
|
+
`function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }`;
|
32
|
+
|
33
|
+
// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
|
34
|
+
return `/* eslint no-unused-vars: 0 */
|
35
|
+
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
|
36
|
+
import { getCustomElementsScopingSuffix } from "${importPrefix}CustomElementsScopeUtils.js";
|
37
|
+
${tsImports(controlName, hasTypes)}
|
38
|
+
${litTemplate}
|
39
|
+
${mainTemplateFunction}
|
40
|
+
export default template;`;
|
8
41
|
};
|
9
42
|
|
10
43
|
module.exports = {
|
11
44
|
generateTemplate: buildRenderer
|
12
|
-
};
|
45
|
+
};
|