@ui5/webcomponents-tools 0.0.0-07d38e78e → 0.0.0-093de5dd1

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 (105) hide show
  1. package/CHANGELOG.md +1030 -0
  2. package/LICENSE.txt +201 -0
  3. package/README.md +7 -10
  4. package/assets-meta.js +1 -5
  5. package/bin/dev.js +3 -2
  6. package/bin/ui5nps.js +274 -0
  7. package/components-package/eslint.js +59 -31
  8. package/components-package/nps.js +98 -75
  9. package/components-package/vite.config.js +7 -11
  10. package/components-package/wdio.js +12 -5
  11. package/icons-collection/nps.js +30 -21
  12. package/lib/amd-to-es6/index.js +15 -10
  13. package/lib/cem/cem.js +12 -0
  14. package/lib/cem/custom-elements-manifest.config.mjs +90 -45
  15. package/lib/cem/event.mjs +69 -32
  16. package/lib/cem/merge.mjs +220 -0
  17. package/lib/cem/patch/@custom-elements-manifest/analyzer/cli.js +128 -0
  18. package/lib/cem/patch/@custom-elements-manifest/analyzer/package.json +59 -0
  19. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/browser-entrypoint.js +23 -0
  20. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/create.js +117 -0
  21. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/arrow-function.js +26 -0
  22. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/class-jsdoc.js +157 -0
  23. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/classes.js +20 -0
  24. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createArrowFunction.js +17 -0
  25. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createAttribute.js +24 -0
  26. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createClass.js +301 -0
  27. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createClassField.js +26 -0
  28. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createFunctionLike.js +73 -0
  29. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createMixin.js +33 -0
  30. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createVariable.js +22 -0
  31. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/handlers.js +338 -0
  32. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/custom-elements-define-calls.js +90 -0
  33. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/exports.js +156 -0
  34. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/function-like.js +24 -0
  35. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/mixins.js +29 -0
  36. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/reexported-wrapped-mixin-exports.js +84 -0
  37. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/variables.js +34 -0
  38. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/collect-phase/collect-imports.js +101 -0
  39. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/catalyst.js +11 -0
  40. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/controller.js +34 -0
  41. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/catalyst.js +11 -0
  42. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/controller.js +34 -0
  43. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/attr.js +53 -0
  44. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/custom-element-decorator.js +36 -0
  45. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/fast/fast.js +7 -0
  46. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js +13 -0
  47. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/member-denylist.js +21 -0
  48. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/method-denylist.js +20 -0
  49. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/property-decorator.js +94 -0
  50. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/static-properties.js +121 -0
  51. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/utils.js +66 -0
  52. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/stencil/stencil.js +129 -0
  53. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/index.js +80 -0
  54. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/cleanup-classes.js +25 -0
  55. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/field-denylist.js +22 -0
  56. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/method-denylist.js +25 -0
  57. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/apply-inheritance.js +78 -0
  58. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/is-custom-element.js +34 -0
  59. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/link-class-to-tagname.js +27 -0
  60. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/remove-unexported-declarations.js +23 -0
  61. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/resolve-initializers.js +52 -0
  62. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/ast-helpers.js +186 -0
  63. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/cli-helpers.js +164 -0
  64. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/exports.js +44 -0
  65. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/find-external-manifests.js +67 -0
  66. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/imports.js +25 -0
  67. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/index.js +71 -0
  68. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/jsdoc.js +19 -0
  69. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/manifest-helpers.js +194 -0
  70. package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/mixins.js +112 -0
  71. package/lib/cem/schema-internal.json +65 -0
  72. package/lib/cem/types-internal.d.ts +14 -2
  73. package/lib/cem/utils.mjs +69 -30
  74. package/lib/cem/validate.js +61 -55
  75. package/lib/chokidar/chokidar.js +28 -0
  76. package/lib/copy-and-watch/index.js +105 -97
  77. package/lib/copy-list/index.js +16 -10
  78. package/lib/create-icons/index.js +24 -19
  79. package/lib/create-illustrations/index.js +49 -27
  80. package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +12 -9
  81. package/lib/create-new-component/ComponentTemplate.js +12 -0
  82. package/lib/create-new-component/index.js +13 -12
  83. package/lib/css-processors/css-processor-components.mjs +74 -59
  84. package/lib/css-processors/css-processor-themes.mjs +85 -62
  85. package/lib/css-processors/shared.mjs +5 -35
  86. package/lib/dev-server/{dev-server.js → dev-server.mjs} +26 -14
  87. package/lib/dev-server/virtual-index-html-plugin.js +24 -20
  88. package/lib/eslint/eslint.js +44 -0
  89. package/lib/generate-js-imports/illustrations.js +53 -54
  90. package/lib/generate-json-imports/i18n.js +56 -36
  91. package/lib/generate-json-imports/themes.js +27 -14
  92. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +12 -7
  93. package/lib/hbs2ui5/index.js +3 -3
  94. package/lib/i18n/defaults.js +15 -9
  95. package/lib/i18n/toJSON.js +38 -12
  96. package/lib/icons-hash/icons-hash.mjs +149 -0
  97. package/lib/remove-dev-mode/remove-dev-mode.mjs +38 -24
  98. package/lib/rimraf/rimraf.js +31 -0
  99. package/lib/scoping/get-all-tags.js +9 -2
  100. package/lib/test-runner/test-runner.js +56 -48
  101. package/lib/vite-bundler/vite-bundler.mjs +35 -0
  102. package/package.json +22 -19
  103. package/tsconfig.json +18 -0
  104. package/lib/css-processors/css-processor-component-styles.mjs +0 -48
  105. package/lib/dev-server/ssr-dom-shim-loader.js +0 -26
@@ -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";
@@ -30,10 +30,9 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
30
30
  */
31
31
  @customElement({
32
32
  tag: "${tagName}",
33
- renderer: litRender,
33
+ renderer: jsxRenderer,
34
34
  styles: ${componentName}Css,
35
35
  template: ${componentName}Template,
36
- dependencies: [],
37
36
  })
38
37
 
39
38
  /**
@@ -42,8 +41,12 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
42
41
  *
43
42
  * @public
44
43
  */
45
- @event("interact", { detail: { /* event payload ( optional ) */ } })
44
+ @event("interact")
46
45
  class ${componentName} extends UI5Element {
46
+ eventDetails!: {
47
+ "interact": void,
48
+ };
49
+
47
50
  /**
48
51
  * Defines the value of the component.
49
52
  *
@@ -51,7 +54,7 @@ class ${componentName} extends UI5Element {
51
54
  * @public
52
55
  */
53
56
  @property()
54
- value!: string;
57
+ value?: string;
55
58
 
56
59
  /**
57
60
  * Defines the text of the component.
@@ -68,4 +71,4 @@ export default ${componentName};
68
71
  `;
69
72
  };
70
73
 
71
- 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,18 +1,19 @@
1
1
  const fs = require("fs");
2
- const path = require("path");
3
2
  const prompts = require("prompts");
4
- const jsFileContentTemplate = require("./jsFileContentTemplate.js");
5
- const tsFileContentTemplate = require("./tsFileContentTemplate.js");
3
+ const Component = require("./Component.js");
4
+ const ComponentTemplate= require("./ComponentTemplate.js");
5
+ const dotenv = require('dotenv');
6
+ dotenv.config();
6
7
 
7
8
  /**
8
- * Hyphanates the given PascalCase string, f.e.:
9
- * Foo -> "my-foo" (adds preffix)
10
- * FooBar -> "foo-bar"
9
+ * Hyphanates the given PascalCase string and adds prefix, f.e.:
10
+ * Foo -> "my-foo"
11
+ * FooBar -> "my-foo-bar"
11
12
  */
12
13
  const hyphaneteComponentName = (componentName) => {
13
14
  const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
14
15
 
15
- return result.includes("-") ? result : `my-${result}`;
16
+ return `${process.env.UI5_TAG_NAME_PREFIX ?? "my"}-${result}`;
16
17
  };
17
18
 
18
19
  /**
@@ -63,12 +64,12 @@ const generateFiles = (componentName, tagName, library, packageName) => {
63
64
  const filePaths = {
64
65
  "main": `./src/${componentName}.ts`,
65
66
  "css": `./src/themes/${componentName}.css`,
66
- "template": `./src/${componentName}.hbs`,
67
+ "template": `./src/${componentName}${process.env.UI5_TEMPLATE_FILENAME_SUFFIX ?? "Template"}.tsx`,
67
68
  };
68
69
 
69
- fs.writeFileSync(filePaths.main, tsFileContentTemplate(componentName, tagName, library, packageName), { flag: "wx+" });
70
+ fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
70
71
  fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
71
- fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
72
+ fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
72
73
 
73
74
  console.log(`Successfully generated ${filePaths.main}`);
74
75
  console.log(`Successfully generated ${filePaths.css}`);
@@ -76,8 +77,8 @@ const generateFiles = (componentName, tagName, library, packageName) => {
76
77
 
77
78
  // Change the color of the output
78
79
  console.warn('\x1b[33m%s\x1b[0m', `
79
- Make sure to import the component in your bundle by using:
80
- import "./dist/${componentName}.js";`);
80
+ Now, import the component in "src/bundle.esm.ts" via: import "./${componentName}.js";
81
+ And, add it to your HTML: <${tagName}></${tagName}>.`);
81
82
  }
82
83
 
83
84
  // Main function
@@ -6,72 +6,87 @@ import { writeFile, mkdir } from "fs/promises";
6
6
  import chokidar from "chokidar";
7
7
  import scopeVariables from "./scope-variables.mjs";
8
8
  import { writeFileIfChanged, getFileContent } from "./shared.mjs";
9
+ import { pathToFileURL } from "url";
9
10
 
10
- const tsMode = process.env.UI5_TS === "true";
11
- const extension = tsMode ? ".css.ts" : ".css.js";
11
+ const generate = async (argv) => {
12
+ const tsMode = process.env.UI5_TS === "true";
13
+ const extension = tsMode ? ".css.ts" : ".css.js";
12
14
 
13
- const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
14
- const inputFilesGlob = "src/themes/*.css";
15
- const restArgs = process.argv.slice(2);
15
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
16
+ const inputFilesGlob = "src/themes/*.css";
17
+ const restArgs = argv.slice(2);
16
18
 
17
- let customPlugin = {
18
- name: 'ui5-tools',
19
- setup(build) {
20
- build.initialOptions.write = false;
19
+ let customPlugin = {
20
+ name: 'ui5-tools',
21
+ setup(build) {
22
+ build.initialOptions.write = false;
21
23
 
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);
24
+ build.onEnd(result => {
25
+ result.outputFiles.forEach(async f => {
26
+ // scoping
27
+ let newText = scopeVariables(f.text, packageJSON);
28
+ newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
29
+ await mkdir(path.dirname(f.path), { recursive: true });
30
+ writeFile(f.path, newText);
28
31
 
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
- }
32
+ // JS/TS
33
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
34
+ const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
35
+ writeFileIfChanged(jsPath, jsContent);
36
+ });
37
+ })
38
+ },
39
+ }
40
+
41
+ const getConfig = async () => {
42
+ const config = {
43
+ entryPoints: await globby(inputFilesGlob),
44
+ bundle: true,
45
+ minify: true,
46
+ outdir: 'dist/css',
47
+ outbase: 'src',
48
+ plugins: [
49
+ customPlugin,
50
+ ]
51
+ };
52
+ return config;
53
+ }
37
54
 
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;
55
+ if (restArgs.includes("-w")) {
56
+ let ready;
57
+ let config = await getConfig();
58
+ let ctx = await esbuild.context(config);
59
+ await ctx.watch()
60
+ console.log('watching...')
61
+
62
+ // when new component css files are added, they do not trigger a build as no one directly imports them
63
+ // restart the watch mode with the new entry points if a css file is added.
64
+ const watcher = chokidar.watch(inputFilesGlob);
65
+ watcher.on("ready", () => {
66
+ ready = true; // Initial scan is over -> waiting for new files
67
+ });
68
+ watcher.on("add", async path => {
69
+ if (ready) {
70
+ // new file
71
+ ctx.dispose();
72
+ config = await getConfig();
73
+ ctx = await esbuild.context(config);
74
+ ctx.watch();
75
+ }
76
+ });
77
+ } else {
78
+ const config = await getConfig();
79
+ const result = await esbuild.build(config);
80
+ }
50
81
  }
51
82
 
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...')
83
+ const filePath = process.argv[1];
84
+ const fileUrl = pathToFileURL(filePath).href;
58
85
 
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);
86
+ if (import.meta.url === fileUrl) {
87
+ generate(process.argv)
77
88
  }
89
+
90
+ export default {
91
+ _ui5mainFn: generate
92
+ }
@@ -5,75 +5,98 @@ import * as path from "path";
5
5
  import { writeFile, mkdir } from "fs/promises";
6
6
  import postcss from "postcss";
7
7
  import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
8
- import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
8
+ import { writeFileIfChanged, getFileContent } from "./shared.mjs";
9
9
  import scopeVariables from "./scope-variables.mjs";
10
+ import { pathToFileURL } from "url";
10
11
 
11
- const tsMode = process.env.UI5_TS === "true";
12
- const extension = tsMode ? ".css.ts" : ".css.js";
12
+ const generate = async (argv) => {
13
+ const tsMode = process.env.UI5_TS === "true";
14
+ const extension = tsMode ? ".css.ts" : ".css.js";
13
15
 
14
- const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
16
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
15
17
 
16
- let inputFiles = await globby("src/**/parameters-bundle.css");
17
- const restArgs = process.argv.slice(2);
18
+ const inputFiles = await globby([
19
+ "src/**/parameters-bundle.css",
20
+ ]);
21
+ const restArgs = argv.slice(2);
18
22
 
19
- const removeDuplicateSelectors = async (text) => {
20
- const result = await postcss(combineDuplicatedSelectors).process(text);
21
- return result.css;
22
- }
23
+ const processThemingPackageFile = async (f) => {
24
+ const selector = ':root';
25
+ const result = await postcss().process(f.text);
26
+
27
+ const newRule = postcss.rule({ selector });
23
28
 
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);
29
+ result.root.walkRules(selector, rule => {
30
+ rule.walkDecls(decl => {
31
+ if (!decl.prop.startsWith('--sapFontUrl')) {
32
+ newRule.append(decl.clone());
33
+ }
56
34
  });
57
- })
58
- },
35
+ });
36
+
37
+ return newRule.toString();
38
+ };
39
+
40
+ const processComponentPackageFile = async (f) => {
41
+ const result = await postcss(combineDuplicatedSelectors).process(f.text);
42
+
43
+ return scopeVariables(result.css, packageJSON, f.path);
44
+ }
45
+
46
+ let scopingPlugin = {
47
+ name: 'scoping',
48
+ setup(build) {
49
+ build.initialOptions.write = false;
50
+
51
+ build.onEnd(result => {
52
+ result.outputFiles.forEach(async f => {
53
+ let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
54
+
55
+ await mkdir(path.dirname(f.path), { recursive: true });
56
+ writeFile(f.path, newText);
57
+
58
+ // JSON
59
+ const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
60
+ await mkdir(path.dirname(jsonPath), { recursive: true });
61
+ writeFileIfChanged(jsonPath, JSON.stringify(newText));
62
+
63
+ // JS/TS
64
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
65
+ const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
66
+ writeFileIfChanged(jsPath, jsContent);
67
+ });
68
+ })
69
+ },
70
+ }
71
+
72
+ const config = {
73
+ entryPoints: inputFiles,
74
+ bundle: true,
75
+ minify: true,
76
+ outdir: 'dist/css',
77
+ outbase: 'src',
78
+ plugins: [
79
+ scopingPlugin,
80
+ ],
81
+ external: ["*.ttf", "*.woff", "*.woff2"],
82
+ };
83
+
84
+ if (restArgs.includes("-w")) {
85
+ let ctx = await esbuild.context(config);
86
+ console.log('watching...')
87
+ await ctx.watch()
88
+ } else {
89
+ await esbuild.build(config);
90
+ }
91
+ }
92
+
93
+ const filePath = process.argv[1];
94
+ const fileUrl = pathToFileURL(filePath).href;
95
+
96
+ if (import.meta.url === fileUrl) {
97
+ generate(process.argv)
59
98
  }
60
99
 
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);
100
+ export default {
101
+ _ui5mainFn: generate
79
102
  }
@@ -24,16 +24,6 @@ const writeFileIfChanged = async (fileName, content) => {
24
24
  }
25
25
  }
26
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
27
  const DEFAULT_THEME = assets.themes.default;
38
28
 
39
29
  const getDefaultThemeCode = packageName => {
@@ -42,35 +32,15 @@ const getDefaultThemeCode = packageName => {
42
32
  import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
43
33
  import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
44
34
 
45
- registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
46
- registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
35
+ registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
36
+ registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme);
47
37
  `;
48
38
  };
49
39
 
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\";"
40
+ const getFileContent = (packageName, css, includeDefaultTheme) => {
60
41
  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
- `;
42
+ return `${defaultTheme}export default ${css.trim()}`
68
43
  }
69
44
 
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
45
 
76
- export { writeFileIfChanged, stripThemingBaseContent, getFileContent}
46
+ export { writeFileIfChanged, getFileContent}
@@ -1,15 +1,12 @@
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
+ import { pathToFileURL } from "url";
5
6
 
6
- const argv = yargs(hideBin(process.argv))
7
- .alias("c", "config")
8
- .argv;
9
-
10
- const startVite = async (port) => {
7
+ const startVite = async (config, port) => {
11
8
  const server = await createServer({
12
- configFile: argv.config,
9
+ configFile: config,
13
10
  server: {
14
11
  port: port,
15
12
  strictPort: true,
@@ -28,7 +25,7 @@ const rmPortFile = async () => {
28
25
  // exit handler must be sync
29
26
  try {
30
27
  await fs.rm(".dev-server-port");
31
- } catch (e) {}
28
+ } catch (e) { }
32
29
  process.exit();
33
30
  }
34
31
 
@@ -36,7 +33,11 @@ const rmPortFile = async () => {
36
33
  process.on(eventType, rmPortFile);
37
34
  });
38
35
 
39
- (async () => {
36
+ async function start(outArgv) {
37
+ const argv = yargs(hideBin(outArgv))
38
+ .alias("c", "config")
39
+ .argv;
40
+
40
41
  let retries = 10;
41
42
  let port = 8080;
42
43
  while (retries--) {
@@ -44,7 +45,7 @@ const rmPortFile = async () => {
44
45
  await fs.writeFile(".dev-server-port", `${port}`);
45
46
  try {
46
47
  // execSync(command, {stdio: 'pipe'});
47
- const server = await startVite(port);
48
+ const server = await startVite(argv.config ?? "", port);
48
49
  if (server) {
49
50
  // server started, don't try other ports
50
51
  break;
@@ -63,4 +64,15 @@ const rmPortFile = async () => {
63
64
  // no error normal exit
64
65
  // process.exit();
65
66
  }
66
- })();
67
+ };
68
+
69
+ const filePath = process.argv[1];
70
+ const fileUrl = pathToFileURL(filePath).href;
71
+
72
+ if (import.meta.url === fileUrl) {
73
+ start(process.argv)
74
+ }
75
+
76
+ export default {
77
+ _ui5mainFn: start
78
+ }
@@ -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 {
@@ -0,0 +1,44 @@
1
+ const fs = require("fs");
2
+ const { ESLint: ESLint7 } = require("eslint"); // isolated v7
3
+ const path = require("path");
4
+
5
+ const main = async argv => {
6
+ let eslintConfig;
7
+ if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
8
+ // preferred way of custom configuration in root project folder
9
+ eslintConfig = null;
10
+ } else {
11
+ // no custom configuration - use default from tools project
12
+ eslintConfig = require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")
13
+ };
14
+
15
+ const packageDir = path.dirname(require.resolve("@ui5/webcomponents-tools/package.json"));
16
+ const eslint = new ESLint7({
17
+ overrideConfigFile: eslintConfig,
18
+ fix: argv.includes("--fix"),
19
+ resolvePluginsRelativeTo: packageDir,
20
+ });
21
+ console.log("Running ESLint v7...");
22
+
23
+ // Lint files
24
+ const results = await eslint.lintFiles(["."]);
25
+
26
+ // Format results
27
+ const formatter = await eslint.loadFormatter("stylish");
28
+ const resultText = formatter.format(results);
29
+
30
+ // Output results
31
+ console.log(resultText);
32
+
33
+ // Exit with error code if there are errors
34
+ const hasErrors = results.some(result => result.errorCount > 0);
35
+ if (hasErrors) {
36
+ process.exit(1);
37
+ }
38
+ }
39
+
40
+ if (require.main === module) {
41
+ main(process.argv)
42
+ }
43
+
44
+ exports._ui5mainFn = main;