@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.
Files changed (70) hide show
  1. package/CHANGELOG.md +1346 -0
  2. package/README.md +3 -5
  3. package/assets-meta.js +11 -10
  4. package/components-package/cypress/support/commands.js +66 -0
  5. package/components-package/cypress/support/component-index.html +17 -0
  6. package/components-package/cypress/support/component.d.ts +22 -0
  7. package/components-package/cypress/support/component.js +46 -0
  8. package/components-package/cypress/support/cypress-ct-preact.js +11 -0
  9. package/components-package/cypress.config.js +33 -0
  10. package/components-package/eslint.js +94 -28
  11. package/components-package/nps.js +58 -47
  12. package/components-package/postcss.components.js +1 -21
  13. package/components-package/postcss.themes.js +1 -26
  14. package/components-package/vite.config.js +7 -11
  15. package/components-package/wdio.js +415 -393
  16. package/icons-collection/nps.js +9 -7
  17. package/lib/amd-to-es6/index.js +102 -0
  18. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  19. package/lib/cem/custom-elements-manifest.config.mjs +544 -0
  20. package/lib/cem/event.mjs +168 -0
  21. package/lib/cem/schema-internal.json +1413 -0
  22. package/lib/cem/schema.json +1098 -0
  23. package/lib/cem/types-internal.d.ts +808 -0
  24. package/lib/cem/types.d.ts +736 -0
  25. package/lib/cem/utils.mjs +423 -0
  26. package/lib/cem/validate.js +70 -0
  27. package/lib/create-icons/index.js +8 -6
  28. package/lib/create-illustrations/index.js +51 -30
  29. package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +15 -25
  30. package/lib/create-new-component/ComponentTemplate.js +12 -0
  31. package/lib/create-new-component/index.js +35 -73
  32. package/lib/css-processors/css-processor-components.mjs +77 -0
  33. package/lib/css-processors/css-processor-themes.mjs +74 -0
  34. package/lib/css-processors/scope-variables.mjs +49 -0
  35. package/lib/css-processors/shared.mjs +56 -0
  36. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  37. package/lib/dev-server/{dev-server.js → dev-server.mjs} +4 -4
  38. package/lib/dev-server/virtual-index-html-plugin.js +24 -20
  39. package/lib/generate-js-imports/illustrations.js +78 -64
  40. package/lib/generate-json-imports/i18n.js +45 -61
  41. package/lib/generate-json-imports/themes.js +16 -33
  42. package/lib/hbs2lit/src/compiler.js +9 -6
  43. package/lib/hbs2lit/src/litVisitor2.js +42 -17
  44. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  45. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +39 -6
  46. package/lib/hbs2ui5/index.js +23 -6
  47. package/lib/i18n/defaults.js +3 -2
  48. package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
  49. package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
  50. package/lib/scoping/get-all-tags.js +10 -3
  51. package/lib/scoping/lint-src.js +8 -7
  52. package/lib/scoping/scope-test-pages.js +2 -1
  53. package/lib/test-runner/test-runner.js +2 -2
  54. package/package.json +25 -13
  55. package/tsconfig.json +18 -0
  56. package/types/index.d.ts +1 -0
  57. package/components-package/wdio.sync.js +0 -360
  58. package/lib/create-new-component/jsFileContentTemplate.js +0 -77
  59. package/lib/esm-abs-to-rel/index.js +0 -58
  60. package/lib/generate-custom-elements-manifest/index.js +0 -327
  61. package/lib/jsdoc/config.json +0 -29
  62. package/lib/jsdoc/configTypescript.json +0 -29
  63. package/lib/jsdoc/plugin.js +0 -2468
  64. package/lib/jsdoc/preprocess.js +0 -146
  65. package/lib/jsdoc/template/publish.js +0 -4120
  66. package/lib/postcss-css-to-esm/index.js +0 -90
  67. package/lib/postcss-css-to-json/index.js +0 -47
  68. package/lib/postcss-new-files/index.js +0 -36
  69. package/lib/postcss-p/postcss-p.mjs +0 -14
  70. package/lib/replace-global-core/index.js +0 -25
@@ -1,12 +1,12 @@
1
- const tsFileContentTemplate = (componentName, tagName, library, packageName) => {
1
+ const Component = (componentName, tagName, library, packageName) => {
2
2
  return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
3
3
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
4
4
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
5
5
  import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
6
- import event from "@ui5/webcomponents-base/dist/decorators/event.js";
7
- import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
6
+ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
7
+ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
8
8
 
9
- import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
9
+ import ${componentName}Template from "./${componentName}Template.js";
10
10
 
11
11
  // Styles
12
12
  import ${componentName}Css from "./generated/themes/${componentName}.css.js";
@@ -22,57 +22,47 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
22
22
  * For the <code>${tagName}</code>
23
23
  * <h3>ES6 Module Import</h3>
24
24
  *
25
- * <code>import ${packageName}/dist/${componentName}.js";</code>
25
+ * <code>import "${packageName}/dist/${componentName}.js";</code>
26
26
  *
27
27
  * @constructor
28
- * @author SAP SE
29
- * @alias sap.ui.webc.${library}.${componentName}
30
- * @extends sap.ui.webc.base.UI5Element
31
- * @tagname ${tagName}
28
+ * @extends UI5Element
32
29
  * @public
33
30
  */
34
31
  @customElement({
35
32
  tag: "${tagName}",
36
- renderer: litRender,
33
+ renderer: jsxRenderer,
37
34
  styles: ${componentName}Css,
38
35
  template: ${componentName}Template,
39
- dependencies: [],
40
36
  })
41
37
 
42
38
  /**
43
39
  * Example custom event.
44
40
  * Please keep in mind that all public events should be documented in the API Reference as shown below.
45
41
  *
46
- * @event sap.ui.webc.${library}.${componentName}#interact
47
42
  * @public
48
43
  */
49
- @event("interact", { detail: { /* event payload ( optional ) */ } })
44
+ @event("interact")
50
45
  class ${componentName} extends UI5Element {
46
+ eventDetails!: {
47
+ "interact": void,
48
+ };
49
+
51
50
  /**
52
51
  * Defines the value of the component.
53
52
  *
54
- * @type {string}
55
- * @name sap.ui.webc.${library}.${componentName}.prototype.value
56
- * @defaultvalue ""
53
+ * @default ""
57
54
  * @public
58
55
  */
59
56
  @property()
60
- value!: string;
57
+ value?: string;
61
58
 
62
59
  /**
63
60
  * Defines the text of the component.
64
61
  *
65
- * @type {Node[]}
66
- * @name sap.ui.webc.${library}.${componentName}.prototype.default
67
- * @slot
68
62
  * @public
69
63
  */
70
64
  @slot({ type: Node, "default": true })
71
65
  text!: Array<Node>;
72
-
73
- static async onDefine() {
74
-
75
- }
76
66
  }
77
67
 
78
68
  ${componentName}.define();
@@ -81,4 +71,4 @@ export default ${componentName};
81
71
  `;
82
72
  };
83
73
 
84
- module.exports = tsFileContentTemplate;
74
+ module.exports = Component;
@@ -0,0 +1,12 @@
1
+ const ComponentTemplate = (componentName) => {
2
+ return `import type ${componentName} from "./${componentName}.js";
3
+
4
+ export default function ${componentName}Template(this: ${componentName}) {
5
+ return (
6
+ <div>Hello World!</div>
7
+ );
8
+ }
9
+ `;
10
+ };
11
+
12
+ module.exports = ComponentTemplate;
@@ -1,7 +1,29 @@
1
1
  const fs = require("fs");
2
2
  const prompts = require("prompts");
3
- const jsFileContentTemplate = require("./jsFileContentTemplate.js");
4
- const tsFileContentTemplate = require("./tsFileContentTemplate.js");
3
+ const Component = require("./Component.js");
4
+ const ComponentTemplate= require("./ComponentTemplate.js");
5
+
6
+ /**
7
+ * Hyphanates the given PascalCase string, f.e.:
8
+ * Foo -> "my-foo" (adds preffix)
9
+ * FooBar -> "foo-bar"
10
+ */
11
+ const hyphaneteComponentName = (componentName) => {
12
+ const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
13
+
14
+ return result.includes("-") ? result : `my-${result}`;
15
+ };
16
+
17
+ /**
18
+ * Capitalizes first letter of string.
19
+ */
20
+ const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
21
+
22
+ /**
23
+ * Validates component name, enforcing PascalCase pattern - Button, MyButton.
24
+ */
25
+ const PascalCasePattern = /^[A-Z][A-Za-z0-9]+$/;
26
+ const isNameValid = name => typeof name === "string" && PascalCasePattern.test(name);
5
27
 
6
28
  const getPackageName = () => {
7
29
  if (!fs.existsSync("./package.json")) {
@@ -35,30 +57,17 @@ const getLibraryName = packageName => {
35
57
  return packageName.substr("webcomponents-".length);
36
58
  };
37
59
 
38
- // String manipulation
39
- const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
40
-
41
- // Validation of user input
42
- const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9_-]*$/);
43
- const isTagNameValid = tagName => tagName.match(/^([a-z][a-z0-9]*-)([a-z0-9]+(-[a-z0-9]+)*)$/);
44
-
45
- const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
60
+ const generateFiles = (componentName, tagName, library, packageName) => {
46
61
  componentName = capitalizeFirstLetter(componentName);
47
62
  const filePaths = {
48
- "main": isTypeScript
49
- ? `./src/${componentName}.ts`
50
- : `./src/${componentName}.js`,
63
+ "main": `./src/${componentName}.ts`,
51
64
  "css": `./src/themes/${componentName}.css`,
52
- "template": `./src/${componentName}.hbs`,
65
+ "template": `./src/${componentName}Template.tsx`,
53
66
  };
54
67
 
55
- const FileContentTemplate = isTypeScript
56
- ? tsFileContentTemplate(componentName, tagName, library, packageName)
57
- : jsFileContentTemplate(componentName, tagName, library, packageName);
58
-
59
- fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
68
+ fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
60
69
  fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
61
- fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
70
+ fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
62
71
 
63
72
  console.log(`Successfully generated ${filePaths.main}`);
64
73
  console.log(`Successfully generated ${filePaths.css}`);
@@ -66,8 +75,8 @@ const generateFiles = (componentName, tagName, library, packageName, isTypeScrip
66
75
 
67
76
  // Change the color of the output
68
77
  console.warn('\x1b[33m%s\x1b[0m', `
69
- Make sure to import the component in your bundle by using:
70
- import ${componentName} from "./dist/${componentName}.js";`);
78
+ Now, import the component via: "import ${componentName} from ./${componentName}.js";
79
+ And, add it to your HTML: <${tagName}></${tagName}>.`);
71
80
  }
72
81
 
73
82
  // Main function
@@ -77,21 +86,9 @@ const createWebComponent = async () => {
77
86
 
78
87
  const consoleArguments = process.argv.slice(2);
79
88
  let componentName = consoleArguments[0];
80
- let tagName = consoleArguments[1];
81
- let language = consoleArguments[2];
82
- let isTypeScript;
83
-
84
89
 
85
90
  if (componentName && !isNameValid(componentName)) {
86
- throw new Error("Invalid component name. Please use only letters, numbers, dashes and underscores. The first character must be a letter.");
87
- }
88
-
89
- if (tagName && !isTagNameValid(tagName)) {
90
- throw new Error("Invalid tag name. The tag name should only contain lowercase letters, numbers, dashes, and underscores. The first character must be a letter, and it should follow the pattern 'tag-name'.");
91
- }
92
-
93
- if (language && language !== "typescript" && language !== "ts" && language !== "javascript" && language !== "js") {
94
- throw new Error("Invalid language. Please use 'typescript','javascript' or their respective 'ts','js'.");
91
+ throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one: Button, MyButton, etc.`);
95
92
  }
96
93
 
97
94
  if (!componentName) {
@@ -99,7 +96,7 @@ const createWebComponent = async () => {
99
96
  type: "text",
100
97
  name: "componentName",
101
98
  message: "Please enter a component name:",
102
- validate: (value) => isNameValid(value),
99
+ validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
103
100
  });
104
101
  componentName = response.componentName;
105
102
 
@@ -108,44 +105,9 @@ const createWebComponent = async () => {
108
105
  }
109
106
  }
110
107
 
111
- if (!tagName) {
112
- const response = await prompts({
113
- type: "text",
114
- name: "tagName",
115
- message: "Please enter a tag name:",
116
- validate: (value) => isTagNameValid(value),
117
- });
118
- tagName = response.tagName;
119
-
120
- if (!tagName) {
121
- process.exit();
122
- }
123
- }
124
-
125
- if (!language) {
126
- const response = await prompts({
127
- type: "select",
128
- name: "isTypeScript",
129
- message: "Please select a language:",
130
- choices: [
131
- {
132
- title: "TypeScript (recommended)",
133
- value: true,
134
- },
135
- {
136
- title: "JavaScript",
137
- value: false,
138
- },
139
- ],
140
- });
141
- isTypeScript = response.isTypeScript;
142
- } else if (language === "typescript" || language === "ts") {
143
- isTypeScript = true;
144
- } else {
145
- isTypeScript = false;
146
- }
108
+ const tagName = hyphaneteComponentName(componentName);
147
109
 
148
- generateFiles(componentName, tagName, library, packageName, isTypeScript);
110
+ generateFiles(componentName, tagName, library, packageName);
149
111
  };
150
112
 
151
113
  createWebComponent();
@@ -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(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,74 @@
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
+ writeFileIfChanged(jsonPath, JSON.stringify(newText));
46
+
47
+ // JS/TS
48
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
49
+ const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
50
+ writeFileIfChanged(jsPath, jsContent);
51
+ });
52
+ })
53
+ },
54
+ }
55
+
56
+ const config = {
57
+ entryPoints: inputFiles,
58
+ bundle: true,
59
+ minify: true,
60
+ outdir: 'dist/css',
61
+ outbase: 'src',
62
+ plugins: [
63
+ scopingPlugin,
64
+ ],
65
+ external: ["*.ttf", "*.woff", "*.woff2"],
66
+ };
67
+
68
+ if (restArgs.includes("-w")) {
69
+ let ctx = await esbuild.context(config);
70
+ await ctx.watch()
71
+ console.log('watching...')
72
+ } else {
73
+ const result = await esbuild.build(config);
74
+ }
@@ -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,56 @@
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 = (packageName, css, includeDefaultTheme) => {
51
+ const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
52
+ return `${defaultTheme}export default ${css.trim()}`
53
+ }
54
+
55
+
56
+ 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;
@@ -1,7 +1,7 @@
1
- const fs = require("fs/promises");
2
- const { createServer } = require('vite');
3
- const yargs = require('yargs/yargs')
4
- const { hideBin } = require('yargs/helpers')
1
+ import fs from "fs/promises";
2
+ import { createServer } from 'vite';
3
+ import yargs from 'yargs';
4
+ import { hideBin } from 'yargs/helpers';
5
5
 
6
6
  const argv = yargs(hideBin(process.argv))
7
7
  .alias("c", "config")
@@ -1,23 +1,17 @@
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
- });
1
+ const virtualIndexPlugin = () => {
2
+ return {
3
+ name: 'virtual-index-html',
4
+ async config() {
5
+ const path = (await import("path")).default;
6
+ const globby = (await import("globby")).globby;
7
+ const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
11
8
 
12
- const rollupInput = {};
9
+ const rollupInput = {};
13
10
 
14
- files.forEach(file => {
15
- rollupInput[file] = path.resolve(process.cwd(), file);
16
- })
11
+ files.forEach(file => {
12
+ rollupInput[file] = path.resolve(process.cwd(), file);
13
+ });
17
14
 
18
- return {
19
- name: 'virtual-index-html',
20
- config() {
21
15
  return {
22
16
  build: {
23
17
  rollupOptions: {
@@ -26,7 +20,17 @@ const virtualIndexPlugin = async () => {
26
20
  }
27
21
  }
28
22
  },
29
- configureServer(server) {
23
+ async configureServer(server) {
24
+ const path = (await import("path")).default;
25
+ const globby = (await import("globby")).globby;
26
+ const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
27
+
28
+ const pagesPerFolder = {};
29
+ files.forEach(file => {
30
+ let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
31
+ folder.push(path.basename(file));
32
+ });
33
+
30
34
  server.middlewares.use((req, res, next) => {
31
35
  if (req.url === "/") {
32
36
  const folders = Object.keys(pagesPerFolder);
@@ -37,8 +41,8 @@ const virtualIndexPlugin = async () => {
37
41
  const pages = pagesPerFolder[folder];
38
42
  return `<h1>${folder}</h1>
39
43
  ${pages.map(page => {
40
- return `<li><a href='${folder}/${page}'>${page}</a></li>`
41
- }).join("")}
44
+ return `<li><a href='${folder}/${page}'>${page}</a></li>`
45
+ }).join("")}
42
46
  `
43
47
  }).join("")}`);
44
48
  } else {