@ui5/webcomponents-tools 0.0.0-bad80d0d6 → 0.0.0-bf8366eb6

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.
Files changed (107) hide show
  1. package/CHANGELOG.md +1326 -0
  2. package/README.md +6 -6
  3. package/assets-meta.js +17 -6
  4. package/bin/dev.js +1 -5
  5. package/components-package/eslint.js +36 -0
  6. package/components-package/nps.js +110 -67
  7. package/components-package/postcss.components.js +1 -21
  8. package/components-package/postcss.themes.js +1 -23
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +107 -37
  11. package/icons-collection/nps.js +51 -18
  12. package/lib/amd-to-es6/index.js +102 -0
  13. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  14. package/lib/cem/custom-elements-manifest.config.mjs +501 -0
  15. package/lib/cem/event.mjs +131 -0
  16. package/lib/cem/schema-internal.json +1357 -0
  17. package/lib/cem/schema.json +1098 -0
  18. package/lib/cem/types-internal.d.ts +796 -0
  19. package/lib/cem/types.d.ts +736 -0
  20. package/lib/cem/utils.mjs +384 -0
  21. package/lib/cem/validate.js +70 -0
  22. package/lib/copy-and-watch/index.js +24 -1
  23. package/lib/copy-list/index.js +28 -0
  24. package/lib/create-icons/index.js +126 -58
  25. package/lib/create-illustrations/index.js +182 -0
  26. package/lib/create-new-component/index.js +65 -97
  27. package/lib/create-new-component/tsFileContentTemplate.js +71 -0
  28. package/lib/css-processors/css-processor-component-styles.mjs +48 -0
  29. package/lib/css-processors/css-processor-components.mjs +77 -0
  30. package/lib/css-processors/css-processor-themes.mjs +79 -0
  31. package/lib/css-processors/scope-variables.mjs +49 -0
  32. package/lib/css-processors/shared.mjs +76 -0
  33. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  34. package/lib/dev-server/dev-server.js +66 -0
  35. package/lib/dev-server/ssr-dom-shim-loader.js +26 -0
  36. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  37. package/lib/generate-js-imports/illustrations.js +86 -0
  38. package/lib/generate-json-imports/i18n.js +35 -55
  39. package/lib/generate-json-imports/themes.js +30 -45
  40. package/lib/hbs2lit/src/compiler.js +24 -4
  41. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  42. package/lib/hbs2lit/src/litVisitor2.js +113 -25
  43. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  44. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +34 -13
  45. package/lib/hbs2ui5/index.js +56 -23
  46. package/lib/i18n/defaults.js +65 -57
  47. package/lib/i18n/toJSON.js +12 -11
  48. package/lib/postcss-combine-duplicated-selectors/index.js +185 -0
  49. package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
  50. package/lib/scoping/get-all-tags.js +2 -9
  51. package/lib/scoping/lint-src.js +9 -8
  52. package/lib/scoping/missing-dependencies.js +65 -0
  53. package/lib/scoping/report-tags-usage.js +28 -0
  54. package/lib/scoping/scope-test-pages.js +2 -1
  55. package/lib/test-runner/test-runner.js +71 -0
  56. package/package.json +38 -41
  57. package/bin/init-ui5-package.js +0 -3
  58. package/components-package/rollup.js +0 -195
  59. package/lib/documentation/index.js +0 -165
  60. package/lib/documentation/templates/api-component-since.js +0 -3
  61. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  62. package/lib/documentation/templates/api-events-section.js +0 -35
  63. package/lib/documentation/templates/api-methods-section.js +0 -26
  64. package/lib/documentation/templates/api-properties-section.js +0 -40
  65. package/lib/documentation/templates/api-slots-section.js +0 -28
  66. package/lib/documentation/templates/template.js +0 -38
  67. package/lib/hash/config.js +0 -10
  68. package/lib/hash/generate.js +0 -19
  69. package/lib/hash/upToDate.js +0 -31
  70. package/lib/init-package/index.js +0 -123
  71. package/lib/init-package/resources/.eslintignore +0 -3
  72. package/lib/init-package/resources/bundle.es5.js +0 -25
  73. package/lib/init-package/resources/bundle.esm.js +0 -31
  74. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  75. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  76. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  77. package/lib/init-package/resources/config/rollup.config.js +0 -1
  78. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  79. package/lib/init-package/resources/package-scripts.js +0 -11
  80. package/lib/init-package/resources/src/Assets.js +0 -5
  81. package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
  82. package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
  83. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  84. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  85. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  86. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  87. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  88. package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
  89. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  90. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  91. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  92. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  93. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  94. package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  95. package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  96. package/lib/init-package/resources/test/pages/index.html +0 -56
  97. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
  98. package/lib/jsdoc/config.json +0 -29
  99. package/lib/jsdoc/plugin.js +0 -2427
  100. package/lib/jsdoc/template/publish.js +0 -4101
  101. package/lib/polyfill-placeholder/index.js +0 -5
  102. package/lib/postcss-css-to-esm/index.js +0 -45
  103. package/lib/postcss-css-to-json/index.js +0 -31
  104. package/lib/postcss-new-files/index.js +0 -36
  105. package/lib/serve/index.js +0 -46
  106. package/lib/serve/serve.json +0 -3
  107. package/package-lock.json +0 -48
@@ -0,0 +1,77 @@
1
+ import { globby } from "globby";
2
+ import * as esbuild from 'esbuild'
3
+ import * as fs from "fs";
4
+ import * as path from "path";
5
+ import { writeFile, mkdir } from "fs/promises";
6
+ import chokidar from "chokidar";
7
+ import scopeVariables from "./scope-variables.mjs";
8
+ import { writeFileIfChanged, getFileContent } from "./shared.mjs";
9
+
10
+ const tsMode = process.env.UI5_TS === "true";
11
+ const extension = tsMode ? ".css.ts" : ".css.js";
12
+
13
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
14
+ const inputFilesGlob = "src/themes/*.css";
15
+ const restArgs = process.argv.slice(2);
16
+
17
+ let customPlugin = {
18
+ name: 'ui5-tools',
19
+ setup(build) {
20
+ build.initialOptions.write = false;
21
+
22
+ build.onEnd(result => {
23
+ result.outputFiles.forEach(async f => {
24
+ // scoping
25
+ const newText = scopeVariables(f.text, packageJSON);
26
+ await mkdir(path.dirname(f.path), {recursive: true});
27
+ writeFile(f.path, newText);
28
+
29
+ // JS/TS
30
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
31
+ const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
32
+ writeFileIfChanged(jsPath, jsContent);
33
+ });
34
+ })
35
+ },
36
+ }
37
+
38
+ const getConfig = async () => {
39
+ const config = {
40
+ entryPoints: await globby(inputFilesGlob),
41
+ bundle: true,
42
+ minify: true,
43
+ outdir: 'dist/css',
44
+ outbase: 'src',
45
+ plugins: [
46
+ customPlugin,
47
+ ]
48
+ };
49
+ return config;
50
+ }
51
+
52
+ if (restArgs.includes("-w")) {
53
+ let ready;
54
+ let config = await getConfig();
55
+ let ctx = await esbuild.context(config);
56
+ await ctx.watch()
57
+ console.log('watching...')
58
+
59
+ // when new component css files are added, they do not trigger a build as no one directly imports them
60
+ // restart the watch mode with the new entry points if a css file is added.
61
+ const watcher = chokidar.watch(inputFilesGlob);
62
+ watcher.on("ready", () => {
63
+ ready = true; // Initial scan is over -> waiting for new files
64
+ });
65
+ watcher.on("add", async path => {
66
+ if (ready) {
67
+ // new file
68
+ ctx.dispose();
69
+ config = await getConfig();
70
+ ctx = await esbuild.context(config);
71
+ ctx.watch();
72
+ }
73
+ });
74
+ } else {
75
+ const config = await getConfig();
76
+ const result = await esbuild.build(config);
77
+ }
@@ -0,0 +1,79 @@
1
+ import { globby } from "globby";
2
+ import * as esbuild from 'esbuild'
3
+ import * as fs from "fs";
4
+ import * as path from "path";
5
+ import { writeFile, mkdir } from "fs/promises";
6
+ import postcss from "postcss";
7
+ import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
8
+ import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
9
+ import scopeVariables from "./scope-variables.mjs";
10
+
11
+ const tsMode = process.env.UI5_TS === "true";
12
+ const extension = tsMode ? ".css.ts" : ".css.js";
13
+
14
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
15
+
16
+ let inputFiles = await globby("src/**/parameters-bundle.css");
17
+ const restArgs = process.argv.slice(2);
18
+
19
+ const removeDuplicateSelectors = async (text) => {
20
+ const result = await postcss(combineDuplicatedSelectors).process(text);
21
+ return result.css;
22
+ }
23
+
24
+ let scopingPlugin = {
25
+ name: 'scoping',
26
+ setup(build) {
27
+ build.initialOptions.write = false;
28
+
29
+ build.onEnd(result => {
30
+ result.outputFiles.forEach(async f => {
31
+ // remove duplicate selectors
32
+ let newText = await removeDuplicateSelectors(f.text);
33
+
34
+ // strip unnecessary theming-base-content
35
+ newText = stripThemingBaseContent(newText);
36
+
37
+ // scoping
38
+ newText = scopeVariables(newText, packageJSON, f.path);
39
+ await mkdir(path.dirname(f.path), {recursive: true});
40
+ writeFile(f.path, newText);
41
+
42
+ // JSON
43
+ const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
44
+ await mkdir(path.dirname(jsonPath), {recursive: true});
45
+ const data = {
46
+ packageName: packageJSON.name,
47
+ fileName: jsonPath.substr(jsonPath.lastIndexOf("themes")),
48
+ content: newText,
49
+ };
50
+ writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
51
+
52
+ // JS/TS
53
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
54
+ const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
55
+ writeFileIfChanged(jsPath, jsContent);
56
+ });
57
+ })
58
+ },
59
+ }
60
+
61
+ const config = {
62
+ entryPoints: inputFiles,
63
+ bundle: true,
64
+ minify: true,
65
+ outdir: 'dist/css',
66
+ outbase: 'src',
67
+ plugins: [
68
+ scopingPlugin,
69
+ ],
70
+ external: ["*.ttf", "*.woff", "*.woff2"],
71
+ };
72
+
73
+ if (restArgs.includes("-w")) {
74
+ let ctx = await esbuild.context(config);
75
+ await ctx.watch()
76
+ console.log('watching...')
77
+ } else {
78
+ const result = await esbuild.build(config);
79
+ }
@@ -0,0 +1,49 @@
1
+ import * as path from "path";
2
+ import { createRequire } from 'node:module';
3
+
4
+ const require = createRequire(import.meta.url);
5
+
6
+ /**
7
+ * Tries to detect an override for a package
8
+ * @param {*} filePath For example: /my_project/src/themes/overrides/@ui5/webcomponents/my_custom_theme/parameters-bundle.css
9
+ * @returns
10
+ */
11
+ const getOverrideVersion = filePath => {
12
+ if (!filePath) {
13
+ return;
14
+ }
15
+
16
+ if (!filePath.includes(`overrides${path.sep}`)) {
17
+ return; // The "overrides/" directory is the marker
18
+ }
19
+ const override = filePath.split(`overrides${path.sep}`)[1]; // For example, this will be: @ui5/webcomponents/my_custom_theme/parameters-bundle.css
20
+ if (!override) {
21
+ return; // There must be other directories after overrides/, the path can't end with it
22
+ }
23
+ const parts = override.split(path.sep);
24
+ if (parts.length < 3) {
25
+ return; // There must be at least a directory for the theme that is being overridden (my_custom_theme) and the name of the CSS file after the name of the package that is overridden
26
+ }
27
+ const packageName = parts.slice(0, -2).join(path.sep); // After the last 2 parts are removed (my_custom_theme and parameters-bundle.css from the example), the rest is the package
28
+
29
+ let overrideVersion;
30
+ try {
31
+ overrideVersion = require(`${packageName}${path.sep}package.json`).version;
32
+ } catch (e) {
33
+ console.log(`Error requiring package ${packageName}: ${e.message}`);
34
+ }
35
+
36
+ return overrideVersion;
37
+ }
38
+
39
+ const scopeVariables = (cssText, packageJSON, inputFile) => {
40
+ const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
41
+ const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
42
+
43
+ const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
44
+
45
+ return cssText.replaceAll(expr, `$1-${versionStr}$2`);
46
+ }
47
+
48
+ export default scopeVariables;
49
+
@@ -0,0 +1,76 @@
1
+ import { writeFile, readFile, mkdir } from "fs/promises";
2
+ import * as path from "path";
3
+ import assets from "../../assets-meta.js";
4
+
5
+ const readOldContent = async (fileName) => {
6
+ // it seems slower to read the old content, but writing the same content with no real changes
7
+ // (as in initial build and then watch mode) will cause an unnecessary dev server refresh
8
+ let oldContent = "";
9
+ try {
10
+ oldContent = (await readFile(fileName)).toString();
11
+ } catch (e) {
12
+ // file not found
13
+ }
14
+ return oldContent;
15
+ }
16
+
17
+ const writeFileIfChanged = async (fileName, content) => {
18
+ const oldContent = await readOldContent(fileName);
19
+ if (content !== oldContent) {
20
+ if (!oldContent) {
21
+ await mkdir(path.dirname(fileName), {recursive: true});
22
+ }
23
+ return writeFile(fileName, content);
24
+ }
25
+ }
26
+
27
+ // strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters
28
+ const stripThemingBaseContent = css => {
29
+ css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
30
+ css = css.replace(/\.background-image.*{.*}/, "");
31
+ css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
32
+ css = css.replace(/--sapFontUrl.*\);?/, "");
33
+ return css;
34
+ }
35
+
36
+
37
+ const DEFAULT_THEME = assets.themes.default;
38
+
39
+ const getDefaultThemeCode = packageName => {
40
+ return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
41
+
42
+ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
43
+ import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
44
+
45
+ registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
46
+ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
47
+ `;
48
+ };
49
+
50
+ const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
51
+ if (tsMode) {
52
+ return getTSContent(targetFile, packageName, css, includeDefaultTheme);
53
+ }
54
+
55
+ return getJSContent(targetFile, packageName, css, includeDefaultTheme);
56
+ }
57
+
58
+ const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
59
+ const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
60
+ const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
61
+
62
+ // tabs are intentionally mixed to have proper identation in the produced file
63
+ return `${typeImport}
64
+ ${defaultTheme}
65
+ const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
66
+ export default styleData;
67
+ `;
68
+ }
69
+
70
+ const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
71
+ const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
72
+
73
+ return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
74
+ }
75
+
76
+ export { writeFileIfChanged, stripThemingBaseContent, getFileContent}
@@ -0,0 +1,39 @@
1
+ const fs = require("fs");
2
+
3
+ /**
4
+ * A change is observed on MacOS since 13.5, where the build generates a large amount
5
+ * of JSON file that spotlight search has to index, as they are considered new files.
6
+ *
7
+ * Starting the vitejs dev server reads all of these files and this triggers the indexing.
8
+ * The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
9
+ * This metadata change is changing the ctime of the file, but not the mtime. This can be checked with `stat -x <path_to_file>
10
+ *
11
+ * Essentially only metadata is changed, not content. This should not cause a page refresh,
12
+ * but chokidar reports this change and vite refreshes the page.
13
+ * The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
14
+ *
15
+ * This plugin checks if the file causing the refresh is a generated json file (dist/*.json) and if ctime is changed after mtime
16
+ * In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
17
+ * which is in effect ignoring the page refresh.
18
+ */
19
+
20
+ const customHotUpdate = async () => {
21
+ return {
22
+ name: 'custom-hot-update',
23
+ handleHotUpdate(ctx) {
24
+ // custom check for generated json files
25
+ if (ctx.file.endsWith(".json")) {
26
+ const stat = fs.statSync(ctx.file);
27
+
28
+ // metadata change only
29
+ if (stat.ctime > stat.mtime) {
30
+ // uncomment for debugging
31
+ // console.log("ignoring hot update for:", ctx.file);
32
+ return [];
33
+ }
34
+ }
35
+ }
36
+ }
37
+ };
38
+
39
+ module.exports = customHotUpdate;
@@ -0,0 +1,66 @@
1
+ const fs = require("fs/promises");
2
+ const { createServer } = require('vite');
3
+ const yargs = require('yargs/yargs')
4
+ const { hideBin } = require('yargs/helpers')
5
+
6
+ const argv = yargs(hideBin(process.argv))
7
+ .alias("c", "config")
8
+ .argv;
9
+
10
+ const startVite = async (port) => {
11
+ const server = await createServer({
12
+ configFile: argv.config,
13
+ server: {
14
+ port: port,
15
+ strictPort: true,
16
+ open: true,
17
+ host: true,
18
+ },
19
+ logLevel: 'info',
20
+ clearScreen: false,
21
+ })
22
+ await server.listen()
23
+ server.printUrls()
24
+ return server;
25
+ };
26
+
27
+ const rmPortFile = async () => {
28
+ // exit handler must be sync
29
+ try {
30
+ await fs.rm(".dev-server-port");
31
+ } catch (e) {}
32
+ process.exit();
33
+ }
34
+
35
+ ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException", "SIGTERM"].forEach((eventType) => {
36
+ process.on(eventType, rmPortFile);
37
+ });
38
+
39
+ (async () => {
40
+ let retries = 10;
41
+ let port = 8080;
42
+ while (retries--) {
43
+ console.log(`taking port ${port}`);
44
+ await fs.writeFile(".dev-server-port", `${port}`);
45
+ try {
46
+ // execSync(command, {stdio: 'pipe'});
47
+ const server = await startVite(port);
48
+ if (server) {
49
+ // server started, don't try other ports
50
+ break;
51
+ }
52
+ } catch (e) {
53
+ // uncomment for debug
54
+ // console.log(e.toString());
55
+ if (e.toString().includes("already in use")) {
56
+ console.log(`Port ${port} already in use`)
57
+ port++;
58
+ continue;
59
+ }
60
+ // other error or CTRL-C
61
+ process.exit();
62
+ }
63
+ // no error normal exit
64
+ // process.exit();
65
+ }
66
+ })();
@@ -0,0 +1,26 @@
1
+ const fs = require("fs");
2
+
3
+ /**
4
+ * UI5Elements loads the ssr-dom.js file with a package specifier to use the export conditions
5
+ * in the package.json so that a shim for the dom can be loaded from SSR environments
6
+ * This however makes the TS Checker plugin used for development try to load the file from dist as input
7
+ * This plugin loads an empty file and TS ignores the file completely
8
+ */
9
+
10
+ const ssrDomShimLoader = async () => {
11
+ return {
12
+ name: 'ssr-dom-shim-loader',
13
+ resolveId(id) {
14
+ if (id === "@ui5/webcomponents-base/dist/ssr-dom.js") {
15
+ return "\0shim"
16
+ }
17
+ },
18
+ load(id) {
19
+ if (id === "\0shim") {
20
+ return "";
21
+ }
22
+ }
23
+ }
24
+ };
25
+
26
+ module.exports = ssrDomShimLoader;
@@ -0,0 +1,52 @@
1
+ const virtualIndexPlugin = async () => {
2
+ const path = await import("path");
3
+ const { globby } = await import("globby");
4
+ const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
5
+
6
+ const pagesPerFolder = {};
7
+ files.forEach(file => {
8
+ let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
9
+ folder.push(path.basename(file));
10
+ });
11
+
12
+ const rollupInput = {};
13
+
14
+ files.forEach(file => {
15
+ rollupInput[file] = path.resolve(process.cwd(), file);
16
+ })
17
+
18
+ return {
19
+ name: 'virtual-index-html',
20
+ config() {
21
+ return {
22
+ build: {
23
+ rollupOptions: {
24
+ input: rollupInput
25
+ }
26
+ }
27
+ }
28
+ },
29
+ configureServer(server) {
30
+ server.middlewares.use((req, res, next) => {
31
+ if (req.url === "/") {
32
+ const folders = Object.keys(pagesPerFolder);
33
+
34
+ res.statusCode = 200;
35
+ res.setHeader("Content-Type", "text/html; charset=utf-8");
36
+ res.end(`${folders.map(folder => {
37
+ const pages = pagesPerFolder[folder];
38
+ return `<h1>${folder}</h1>
39
+ ${pages.map(page => {
40
+ return `<li><a href='${folder}/${page}'>${page}</a></li>`
41
+ }).join("")}
42
+ `
43
+ }).join("")}`);
44
+ } else {
45
+ next();
46
+ }
47
+ })
48
+ },
49
+ }
50
+ };
51
+
52
+ module.exports = virtualIndexPlugin;
@@ -0,0 +1,86 @@
1
+ const fs = require("fs").promises;
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));
52
+ };
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$/);
61
+
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
+ };
72
+
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],
81
+ };
82
+
83
+ // Run the generation process
84
+ generateIllustrations(config).catch((error) => {
85
+ console.error("Error generating illustrations:", error);
86
+ });
@@ -1,64 +1,39 @@
1
- const fs = require("fs");
1
+ const fs = require("fs").promises;
2
2
  const path = require('path');
3
- const mkdirp = require("mkdirp");
4
3
 
5
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
4
+ const isTypeScript = process.env.UI5_TS;
5
+ const ext = isTypeScript ? 'ts' : 'js';
6
6
 
7
- const inputFolder = path.normalize(process.argv[2]);
8
- const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
9
- const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
7
+ const generate = async () => {
8
+
9
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
10
+
11
+ const inputFolder = path.normalize(process.argv[2]);
12
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
10
13
 
11
14
  // All languages present in the file system
12
- const files = fs.readdirSync(inputFolder);
13
- const languages = files.map(file => {
14
- const matches = file.match(/messagebundle_(.+?).json$/);
15
- return matches ? matches[1] : undefined;
16
- }).filter(key => !!key);
15
+ const files = await fs.readdir(inputFolder);
16
+ const languages = files.map(file => {
17
+ const matches = file.match(/messagebundle_(.+?).json$/);
18
+ return matches ? matches[1] : undefined;
19
+ }).filter(key => !!key);
17
20
 
18
- let contentStatic, contentDynamic;
21
+ let contentDynamic;
19
22
 
20
23
  // No i18n - just import dependencies, if any
21
- if (languages.length === 0) {
22
- contentStatic = "";
23
- contentDynamic = "";
24
+ if (languages.length === 0) {
25
+ contentDynamic = "";
24
26
  // There is i18n - generate the full file
25
- } else {
26
- // Keys for the array
27
- const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
28
- const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
29
-
30
- // Actual imports for json assets
31
- const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
32
-
33
- // static imports
34
- contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
35
-
36
- ${assetsImportsString}
37
-
38
- const bundleMap = {
39
- ${languagesKeysString}
40
- };
41
-
42
- const fetchMessageBundle = async (localeId) => {
43
- if (typeof bundleMap[localeId] === "object") {
44
- // inlined from build
45
- throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
46
- }
47
- return (await fetch(bundleMap[localeId])).json()
48
- }
49
-
50
- const localeIds = [${languagesKeysStringArray}];
51
-
52
- localeIds.forEach(localeId => {
53
- registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
54
- });
55
- `;
27
+ } else {
28
+ // Keys for the array
29
+ const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
56
30
 
57
- // Actual imports for json assets
58
- const dynamicImportsString = languages.map(key => ` case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
31
+ // Actual imports for json assets
32
+ const dynamicImportsString = languages.map(key => ` case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
59
33
 
60
- // Resulting file content
61
- contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
34
+ // Resulting file content
35
+ contentDynamic = `// @ts-nocheck
36
+ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
62
37
 
63
38
  const importMessageBundle = async (localeId) => {
64
39
  switch (localeId) {
@@ -70,7 +45,7 @@ localeIds.forEach(localeId => {
70
45
  const importAndCheck = async (localeId) => {
71
46
  const data = await importMessageBundle(localeId);
72
47
  if (typeof data === "string" && data.endsWith(".json")) {
73
- 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.\`);
48
+ 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.\`);
74
49
  }
75
50
  return data;
76
51
  }
@@ -83,9 +58,14 @@ localeIds.forEach(localeId => {
83
58
  `;
84
59
 
85
60
 
86
- }
61
+ }
87
62
 
63
+ await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
64
+ return Promise.all([
65
+ fs.writeFile(outputFileDynamic, contentDynamic),
66
+ ]);
67
+ }
88
68
 
89
- mkdirp.sync(path.dirname(outputFile));
90
- fs.writeFileSync(outputFile, contentStatic);
91
- fs.writeFileSync(outputFileDynamic, contentDynamic);
69
+ generate().then(() => {
70
+ console.log("Generated i18n JSON imports.");
71
+ });