@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,10 +1,13 @@
1
1
  const fs = require('fs').promises;
2
+ const existsSync = require('fs').existsSync;
2
3
  const getopts = require('getopts');
3
4
  const hbs2lit = require('../hbs2lit');
4
5
  const path = require('path');
5
6
  const litRenderer = require('./RenderTemplates/LitRenderer');
6
7
  const recursiveReadDir = require("recursive-readdir");
7
8
 
9
+ let missingTypesReported = false;
10
+
8
11
  const args = getopts(process.argv.slice(2), {
9
12
  alias: {
10
13
  o: 'output',
@@ -21,15 +24,29 @@ const onError = (place) => {
21
24
  console.log(`A problem occoured when reading ${place}. Please recheck passed parameters.`);
22
25
  };
23
26
 
24
- const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
27
+ const isHandlebars = (fileName) => fileName.endsWith('.hbs');
28
+
29
+ const hasTypes = (file, componentName) => {
30
+ const tsFile = path.join(path.dirname(file), componentName + ".ts")
31
+ const dtsFile = path.join(path.dirname(file), componentName + ".d.ts")
32
+ return existsSync(tsFile) || existsSync(dtsFile);
33
+ }
25
34
 
26
35
  const processFile = async (file, outputDir) => {
27
- const litCode = await hbs2lit(file);
28
- const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
29
36
  const componentNameMatcher = /(\w+)(\.hbs)/gim;
30
37
  const componentName = componentNameMatcher.exec(file)[1];
38
+ const componentHasTypes = hasTypes(file, componentName);
39
+ if (!componentHasTypes) {
40
+ if (!missingTypesReported) {
41
+ console.warn("[Warn] The following templates do not have a corresponging .ts or .d.ts file and won't be type checked:")
42
+ missingTypesReported = true;
43
+ }
44
+ console.log(" -> " + componentName + ".hbs");
45
+ }
46
+ const litCode = await hbs2lit(file, componentName);
47
+ const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
31
48
 
32
- return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
49
+ return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
33
50
  };
34
51
 
35
52
  const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -70,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
70
87
 
71
88
  await fs.mkdir(outputDir, { recursive: true });
72
89
 
73
- const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
90
+ const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
74
91
 
75
92
  // strip DOS line endings because the break the source maps
76
93
  let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
@@ -81,7 +98,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
81
98
 
82
99
  let existingFileContent = "";
83
100
  try {
84
- existingFileContent = await fs.readFile(compiledFilePath);
101
+ existingFileContent = (await fs.readFile(compiledFilePath)).toString();
85
102
  } catch (e) {}
86
103
 
87
104
  if (existingFileContent !== fileContentUnix) {
@@ -31,7 +31,8 @@ const generate = async () => {
31
31
  // (2) as the messagebundle.properties file is always written in English,
32
32
  // it makes sense to consider the messagebundle.properties content only when the default language is "en".
33
33
  if (defaultLanguage === "en") {
34
- defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
34
+ // use messagebundle_en.properties to overwrite all developer properties, only the not translated ones will remain
35
+ defaultLanguageProperties = Object.assign({}, properties, defaultLanguageProperties);
35
36
  }
36
37
 
37
38
  /*
@@ -68,7 +69,7 @@ const generate = async () => {
68
69
  const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
69
70
 
70
71
  // tabs are intentionally mixed to have proper identation in the produced file
71
- return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
72
+ return `${tsMode ? `import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
72
73
  ${texts}
73
74
  export {${textKeys.join()}};`;
74
75
  };
@@ -154,22 +154,29 @@ module.exports = (options) => {
154
154
  options.removeDuplicatedProperties ||
155
155
  options.removeDuplicatedValues
156
156
  ) {
157
- removeDupProperties(
158
- destination,
159
- options.removeDuplicatedValues,
160
- );
157
+ // removeDupProperties(
158
+ // destination,
159
+ // options.removeDuplicatedValues,
160
+ // );
161
161
  }
162
162
  } else {
163
163
  if (
164
164
  options.removeDuplicatedProperties ||
165
165
  options.removeDuplicatedValues
166
166
  ) {
167
- removeDupProperties(rule, options.removeDuplicatedValues);
167
+ // removeDupProperties(rule, options.removeDuplicatedValues);
168
168
  }
169
169
  // add new selector to symbol table
170
170
  map.set(selector, rule);
171
171
  }
172
172
  },
173
+ OnceExit(root) {
174
+ root.nodes.forEach(node => {
175
+ if (node.type === "rule") {
176
+ removeDupProperties(node, options.removeDuplicatedValues);
177
+ }
178
+ })
179
+ }
173
180
  };
174
181
  },
175
182
  };
@@ -0,0 +1,37 @@
1
+ import { globby } from "globby";
2
+ import * as esbuild from 'esbuild'
3
+ import * as fs from "fs";
4
+
5
+ let customPlugin = {
6
+ name: 'ui5-tools',
7
+ setup(build) {
8
+ build.onLoad({ filter: /UI5Element.ts$/ }, async (args) => {
9
+ let text = await fs.promises.readFile(args.path, 'utf8');
10
+ text = text.replaceAll(/const DEV_MODE = true/g, "");
11
+ text = text.replaceAll(/if \(DEV_MODE\)/g, "if (false)");
12
+ return {
13
+ contents: text,
14
+ loader: 'ts',
15
+ }
16
+ })
17
+ },
18
+ }
19
+
20
+ const getConfig = async () => {
21
+ const config = {
22
+ entryPoints: await globby("src/**/*.ts"),
23
+ bundle: false,
24
+ minify: true,
25
+ sourcemap: true,
26
+ outdir: 'dist/prod',
27
+ outbase: 'src',
28
+ plugins: [
29
+ customPlugin,
30
+ ]
31
+ };
32
+ return config;
33
+ }
34
+
35
+
36
+ const config = await getConfig();
37
+ const result = await esbuild.build(config);
@@ -4,13 +4,20 @@ const glob = require("glob");
4
4
 
5
5
  const getTag = file => {
6
6
  const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
7
- const matches = fileContent.match(/\btag\b:\s*\"(.*?)\"/);
8
- return matches ? matches[1] : undefined;
7
+ let matches = fileContent.match(/\btag\b:\s*\"(.*?)\"/);
8
+ if (matches) {
9
+ return matches[1];
10
+ }
11
+ matches = fileContent.match(/@customElement\("(.*?)"\)/);
12
+ if (matches) {
13
+ return matches[1];
14
+ }
15
+ return undefined;
9
16
  };
10
17
 
11
18
  const getPackageTags = (packageDir) => {
12
19
  const srcDir = path.join(packageDir, "src/");
13
- return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
20
+ return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
14
21
  const tag = getTag(file);
15
22
  return [tag];
16
23
  }).filter(item => !!item);
@@ -7,25 +7,26 @@ const tags = getAllTags(process.cwd());
7
7
 
8
8
  const errors = [];
9
9
 
10
+ const removeComments = str => str.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "");
11
+
10
12
  glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
11
- let content = String(fs.readFileSync(file));
13
+ let content = removeComments(String(fs.readFileSync(file)));
12
14
  tags.forEach(tag => {
13
15
  if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
14
- errors.push(`Warning! ${tag} found in ${file}`);
16
+ errors.push(`${tag} found in ${file}`);
15
17
  }
16
18
  });
17
19
  });
18
20
 
19
- glob.sync(path.join(process.cwd(), "src/**/*.js")).forEach(file => {
20
- let content = String(fs.readFileSync(file));
21
+ glob.sync(path.join(process.cwd(), "src/**/*.ts")).forEach(file => {
22
+ let content = removeComments(String(fs.readFileSync(file)));
21
23
  tags.forEach(tag => {
22
24
  if (content.match(new RegExp(`querySelector[A-Za-z]*..${tag}`, "g"))) {
23
- errors.push(`Warning! querySelector for ${tag} found in ${file}`);
25
+ errors.push(`querySelector for ${tag} found in ${file}`);
24
26
  }
25
27
  });
26
28
  });
27
29
 
28
30
  if (errors.length) {
29
- errors.forEach(error => console.log(error));
30
- throw new Error("Errors found.");
31
+ throw new Error(`Scoping-related errors found (f.e. used ui5-input instead of [ui5-input]): \n ${errors.join("\n")}`);
31
32
  }
@@ -18,6 +18,7 @@ const replaceTagsHTML = content => {
18
18
 
19
19
  // Replace tags in any content
20
20
  const replaceTagsAny = content => {
21
+ console.log(tags.length);
21
22
  tags.forEach(tag => {
22
23
  content = content.replace(new RegExp(`(^|[^\-_A-Za-z0-9])(${tag})([^\-_A-Za-z0-9]|$)`, "g"), `$1$2-${suffix}$3`);
23
24
  });
@@ -27,7 +28,7 @@ const replaceTagsAny = content => {
27
28
  // Replace bundle names and HTML tag names in test pages
28
29
  glob.sync(path.join(root, "/**/*.html")).forEach(file => {
29
30
  let content = String(fs.readFileSync(file));
30
- content = content.replace(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
31
+ content = content.replace("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
31
32
  content = replaceTagsHTML(content);
32
33
  fs.writeFileSync(file, content);
33
34
  });
@@ -61,8 +61,8 @@ if (process.argv.length > 3) {
61
61
  let wdioConfig = "";
62
62
  if (fs.existsSync("config/wdio.conf.cjs")) {
63
63
  wdioConfig = "config/wdio.conf.cjs";
64
- } else {
65
- fs.existsSync("config/wdio.conf.js")
64
+ } else if (fs.existsSync("config/wdio.conf.js")) {
65
+ wdioConfig = "config/wdio.conf.js";
66
66
  }
67
67
 
68
68
  // run wdio with calculated parameters
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-tools",
3
- "version": "0.0.0-f651a470c",
3
+ "version": "0.0.0-f6676abdd",
4
4
  "description": "UI5 Web Components: webcomponents.tools",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -10,6 +10,7 @@
10
10
  "sapui5",
11
11
  "ui5"
12
12
  ],
13
+ "types": "./types/index.d.ts",
13
14
  "scripts": {},
14
15
  "bin": {
15
16
  "wc-dev": "bin/dev.js",
@@ -21,27 +22,35 @@
21
22
  "directory": "packages/tools"
22
23
  },
23
24
  "dependencies": {
24
- "@typescript-eslint/eslint-plugin": "^5.42.1",
25
- "@typescript-eslint/parser": "^5.42.1",
25
+ "@custom-elements-manifest/analyzer": "^0.8.4",
26
+ "@cypress/code-coverage": "^3.13.10",
27
+ "@typescript-eslint/eslint-plugin": "^6.9.0",
28
+ "@typescript-eslint/parser": "^6.9.0",
26
29
  "@wdio/cli": "^7.19.7",
27
- "@wdio/devtools-service": "^7.19.7",
28
30
  "@wdio/dot-reporter": "^7.19.7",
29
31
  "@wdio/local-runner": "^7.19.7",
30
32
  "@wdio/mocha-framework": "^7.19.7",
31
33
  "@wdio/spec-reporter": "^7.19.7",
32
34
  "@wdio/static-server-service": "^7.19.5",
35
+ "ajv": "^8.12.0",
36
+ "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
33
37
  "chai": "^4.3.4",
34
38
  "child_process": "^1.0.2",
35
- "chokidar": "^3.5.1",
39
+ "chokidar": "^3.6.0",
36
40
  "chokidar-cli": "^3.0.0",
37
41
  "command-line-args": "^5.1.1",
42
+ "comment-parser": "^1.4.0",
38
43
  "concurrently": "^6.0.0",
39
44
  "cross-env": "^7.0.3",
40
- "cssnano": "^4.1.11",
45
+ "custom-element-jet-brains-integration": "^1.4.4",
46
+ "cypress": "^13.11.0",
47
+ "cypress-real-events": "^1.12.0",
41
48
  "escodegen": "^2.0.0",
42
49
  "eslint": "^7.22.0",
43
50
  "eslint-config-airbnb-base": "^14.2.1",
44
- "eslint-plugin-import": "^2.22.1",
51
+ "eslint-plugin-cypress": "^3.4.0",
52
+ "eslint-plugin-import": "^2.31.0",
53
+ "eslint-plugin-jsx-no-leaked-values": "^0.1.24",
45
54
  "esprima": "^4.0.1",
46
55
  "getopts": "^2.3.0",
47
56
  "glob": "^7.1.6",
@@ -49,26 +58,26 @@
49
58
  "globby": "^13.1.1",
50
59
  "handlebars": "^4.7.7",
51
60
  "is-port-reachable": "^3.1.0",
52
- "jsdoc": "^3.6.6",
53
61
  "json-beautify": "^1.1.1",
54
62
  "mkdirp": "^1.0.4",
55
63
  "nps": "^5.10.0",
56
64
  "postcss": "^8.4.5",
57
65
  "postcss-cli": "^9.1.0",
58
- "postcss-import": "^14.0.2",
59
66
  "postcss-selector-parser": "^6.0.10",
67
+ "preact": "^10.25.4",
68
+ "prompts": "^2.4.2",
60
69
  "properties-reader": "^2.2.0",
61
70
  "recursive-readdir": "^2.2.2",
62
71
  "resolve": "^1.20.0",
63
72
  "rimraf": "^3.0.2",
64
73
  "slash": "3.0.0",
65
- "vite": "^3.0.4",
66
- "wdio-chromedriver-service": "^7.3.2",
67
- "zx": "^4.3.0"
74
+ "vite": "^5.4.8",
75
+ "vite-plugin-istanbul": "^6.0.2",
76
+ "wdio-chromedriver-service": "^7.3.2"
68
77
  },
69
78
  "peerDependencies": {
70
79
  "chromedriver": "*",
71
- "typescript": "^4.9.4"
80
+ "typescript": "^5.6.2"
72
81
  },
73
82
  "peerDependenciesMeta": {
74
83
  "typescript": {
@@ -76,6 +85,9 @@
76
85
  }
77
86
  },
78
87
  "devDependencies": {
88
+ "@cypress/mount-utils": "^4.1.2",
89
+ "cypress-real-events": "^1.12.0",
90
+ "esbuild": "^0.25.0",
79
91
  "yargs": "^17.5.1"
80
92
  }
81
93
  }
package/tsconfig.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2021",
4
+ "lib": [
5
+ "DOM",
6
+ "DOM.Iterable",
7
+ "ES2023"
8
+ ],
9
+ "declaration": true,
10
+ "skipLibCheck": true,
11
+ "sourceMap": true,
12
+ "inlineSources": true,
13
+ "strict": true,
14
+ "moduleResolution": "node",
15
+ "jsx": "react-jsx",
16
+ "jsxImportSource": "@ui5/webcomponents-base",
17
+ }
18
+ }
@@ -0,0 +1 @@
1
+ import "../components-package/cypress/support/component"