@ui5/webcomponents-tools 0.0.0-fc993d8cd → 0.0.0-fca1107e7

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 (51) hide show
  1. package/CHANGELOG.md +623 -0
  2. package/README.md +2 -1
  3. package/assets-meta.js +15 -7
  4. package/components-package/eslint.js +2 -0
  5. package/components-package/nps.js +41 -32
  6. package/components-package/postcss.components.js +1 -21
  7. package/components-package/postcss.themes.js +1 -26
  8. package/components-package/wdio.js +15 -3
  9. package/components-package/wdio.sync.js +9 -1
  10. package/icons-collection/nps.js +8 -6
  11. package/lib/amd-to-es6/index.js +102 -0
  12. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  13. package/lib/cem/custom-elements-manifest.config.mjs +501 -0
  14. package/lib/cem/event.mjs +131 -0
  15. package/lib/cem/schema-internal.json +1357 -0
  16. package/lib/cem/schema.json +1098 -0
  17. package/lib/cem/types-internal.d.ts +796 -0
  18. package/lib/cem/types.d.ts +736 -0
  19. package/lib/cem/utils.mjs +384 -0
  20. package/lib/cem/validate.js +70 -0
  21. package/lib/create-illustrations/index.js +51 -30
  22. package/lib/create-new-component/index.js +28 -58
  23. package/lib/create-new-component/jsFileContentTemplate.js +1 -5
  24. package/lib/create-new-component/tsFileContentTemplate.js +3 -16
  25. package/lib/css-processors/css-processor-component-styles.mjs +47 -0
  26. package/lib/css-processors/css-processor-components.mjs +77 -0
  27. package/lib/css-processors/css-processor-themes.mjs +79 -0
  28. package/lib/css-processors/scope-variables.mjs +49 -0
  29. package/lib/{postcss-css-to-esm/index.js → css-processors/shared.mjs} +36 -50
  30. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  31. package/lib/generate-custom-elements-manifest/index.js +51 -107
  32. package/lib/generate-js-imports/illustrations.js +78 -64
  33. package/lib/generate-json-imports/i18n.js +10 -5
  34. package/lib/generate-json-imports/themes.js +10 -5
  35. package/lib/hbs2lit/src/compiler.js +9 -6
  36. package/lib/hbs2lit/src/litVisitor2.js +42 -17
  37. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  38. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +32 -4
  39. package/lib/hbs2ui5/index.js +21 -4
  40. package/lib/i18n/toJSON.js +1 -1
  41. package/lib/jsdoc/preprocess.js +3 -3
  42. package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
  43. package/lib/scoping/get-all-tags.js +1 -1
  44. package/lib/scoping/scope-test-pages.js +2 -1
  45. package/lib/test-runner/test-runner.js +2 -2
  46. package/package.json +13 -10
  47. package/lib/esm-abs-to-rel/index.js +0 -58
  48. package/lib/postcss-css-to-json/index.js +0 -47
  49. package/lib/postcss-new-files/index.js +0 -36
  50. package/lib/postcss-p/postcss-p.mjs +0 -14
  51. package/lib/replace-global-core/index.js +0 -25
@@ -28,14 +28,18 @@ if (!String.prototype.replaceAll) {
28
28
  };
29
29
  }
30
30
 
31
- function HTMLLitVisitor(debug) {
31
+ function HTMLLitVisitor(componentName, debug) {
32
32
  this.blockCounter = 0;
33
33
  this.keys = [];
34
34
  this.blocks = {};
35
35
  this.result = "";
36
36
  this.mainBlock = "";
37
37
  this.blockLevel = 0;
38
- this.blockParameters = ["context", "tags", "suffix"];
38
+ this.componentName = componentName
39
+ const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
40
+ const blockParametersDefinitionJS = ["context", "tags", "suffix"];
41
+ this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
42
+ this.blockParametersUsage = ["this", "context", "tags", "suffix"];
39
43
  this.paths = []; //contains all normalized relative paths
40
44
  this.debug = debug;
41
45
  if (this.debug) {
@@ -51,17 +55,18 @@ HTMLLitVisitor.prototype.Program = function(program) {
51
55
  this.keys.push(key);
52
56
  this.debug && this.blockByNumber.push(key);
53
57
 
54
- this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
58
+ // this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
59
+ this.blocks[this.currentKey()] = `function ${this.currentKey()} (${this.blockParametersDefinition.join(", ")}) { `;
55
60
 
56
61
  if (this.keys.length > 1) { //it's a nested block
57
- this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
62
+ this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
58
63
  } else {
59
64
  this.mainBlock = this.currentKey();
60
65
  }
61
66
 
62
- this.blocks[this.currentKey()] += "html`";
67
+ this.blocks[this.currentKey()] += "return html`";
63
68
  Visitor.prototype.Program.call(this, program);
64
- this.blocks[this.currentKey()] += "`;";
69
+ this.blocks[this.currentKey()] += "`;}";
65
70
 
66
71
  this.keys.pop(key);
67
72
  };
@@ -98,14 +103,18 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
98
103
  this.blocks[this.currentKey()] += "${index}";
99
104
  } else {
100
105
  const path = normalizePath.call(this, mustache.path.original);
101
- const hasCalculatingClasses = path.includes("context.classes");
106
+ const hasCalculatingClasses = path.includes("this.classes");
102
107
 
103
108
  let parsedCode = "";
104
109
 
105
110
  if (isNodeValue && !mustache.escaped) {
106
111
  parsedCode = `\${unsafeHTML(${path})}`;
107
112
  } else if (hasCalculatingClasses) {
108
- parsedCode = `\${classMap(${path})}`;
113
+ if (process.env.UI5_TS) {
114
+ parsedCode = `\${classMap(${path} as ClassMapValue)}`;
115
+ } else {
116
+ parsedCode = `\${classMap(${path})}`;
117
+ }
109
118
  } else if (isStyleAttribute) {
110
119
  parsedCode = `\${styleMap(${path})}`;
111
120
  } else if (skipIfDefined){
@@ -170,19 +179,35 @@ function visitEachBlock(block) {
170
179
  var bParamAdded = false;
171
180
  visitSubExpression.call(this, block);
172
181
 
173
- this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
182
+ const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
183
+ const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
184
+ const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
185
+ this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
174
186
  this.paths.push(normalizePath.call(this, block.params[0].original));
175
187
  this.blockLevel++;
176
188
 
177
- if (this.blockParameters.indexOf("item") === -1) {
189
+ // block params is [this, context, tags, suffix] for top level blocks
190
+ // blcok params is [this, context, tags, suffix, item, index] for nested blocks
191
+ if (!this.blockParametersUsage.includes("index")) {
192
+ // last item is not index, but an each block is processed, add the paramters for further nested blocks
178
193
  bParamAdded = true;
179
- this.blockParameters.unshift("index");
180
- this.blockParameters.unshift("item");
194
+ if (process.env.UI5_TS) {
195
+ this.blockParametersDefinition.push("item: any");
196
+ this.blockParametersDefinition.push("index: number");
197
+ } else {
198
+ this.blockParametersDefinition.push("item");
199
+ this.blockParametersDefinition.push("index");
200
+ }
201
+ this.blockParametersUsage.push("item");
202
+ this.blockParametersUsage.push("index");
181
203
  }
182
204
  this.acceptKey(block, "program");
183
205
  if (bParamAdded) {
184
- this.blockParameters.shift("item");
185
- this.blockParameters.shift("index");
206
+ // if parameters were added at this step, remove the last two
207
+ this.blockParametersDefinition.pop();
208
+ this.blockParametersDefinition.pop();
209
+ this.blockParametersUsage.pop();
210
+ this.blockParametersUsage.pop();
186
211
  }
187
212
  this.blockLevel--;
188
213
  this.blocks[this.currentKey()] += ") }";
@@ -197,7 +222,7 @@ function normalizePath(sPath) {
197
222
  if (result.indexOf("@root") === 0) {
198
223
  // Trying to access root context via the HBS "@root" variable.
199
224
  // Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
200
- result = result.replace("@root", "context");
225
+ result = result.replace("@root", "this");
201
226
 
202
227
  } else if (result.indexOf("../") === 0) {
203
228
  let absolutePath;
@@ -207,7 +232,7 @@ function normalizePath(sPath) {
207
232
  // Trying to access root context from nested loops.
208
233
  // Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
209
234
  // Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
210
- absolutePath = `context.${replaceAll(result,"../", "")}`;
235
+ absolutePath = `this.${replaceAll(result,"../", "")}`;
211
236
  } else {
212
237
  // Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
213
238
  // Example: {{../property}} compiles to "context.property" - when called in a top level loop.
@@ -235,7 +260,7 @@ function normalizePath(sPath) {
235
260
  // {{/each}}
236
261
  // {{text}} -> compiles to "context.text"
237
262
 
238
- const blockPath = this.blockLevel > 0 ? "item" : "context";
263
+ const blockPath = this.blockLevel > 0 ? "item" : "this";
239
264
  result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
240
265
  }
241
266
 
@@ -2,7 +2,7 @@
2
2
  const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
3
3
  const blockrx = /block[0-9]+/g;
4
4
 
5
- function process(input) {
5
+ function processSVG(input) {
6
6
  let matches;
7
7
  let template = input;
8
8
  let blockCounter = 0;
@@ -45,9 +45,16 @@ function getSVGMatches(template) {
45
45
  }
46
46
 
47
47
  function getSVGBlock(input, blockCounter) {
48
+ const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
49
+ return svg\`${input}\`;
50
+ };`;
51
+ const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
52
+ return svg\`${input}\`;
53
+ };`;
54
+
48
55
  return {
49
- usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
50
- definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
56
+ usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
57
+ definition: process.env.UI5_TS ? definitionTS : definitionJS,
51
58
  };
52
59
  }
53
60
 
@@ -55,7 +62,7 @@ function replaceInternalBlocks(template, svgContent) {
55
62
  const internalBlocks = svgContent.match(blockrx) || [];
56
63
 
57
64
  internalBlocks.forEach(blockName => {
58
- const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
65
+ const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
59
66
  template = template.replace(rx, (match, p1) => {
60
67
  return match.replace(p1, "svg\`");
61
68
  });
@@ -65,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
65
72
  }
66
73
 
67
74
  module.exports = {
68
- process: process
75
+ process: processSVG,
69
76
  };
@@ -1,7 +1,35 @@
1
- const buildRenderer = (controlName, litTemplate) => {
2
- return `/* eslint no-unused-vars: 0 */
3
- import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
1
+ const tsImports = (controlName, hasTypes) => {
2
+ if (!process.env.UI5_TS) {
3
+ return "";
4
+ }
5
+
6
+ const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
7
+
8
+ return `import type UI5Element from "${importPrefix}UI5Element.js";
9
+ ${importForControl(controlName, hasTypes)}
10
+ import type { ClassMapValue } from "${importPrefix}types.js";
11
+ `;
12
+ }
13
+ const importForControl = (controlName, hasTypes) => {
14
+
15
+ if (!hasTypes) {
16
+ return `type ${controlName} = any;`;
17
+ }
4
18
 
19
+ if (process.env.UI5_BASE) {
20
+ // base package has a component in `test/elements` instead of `src`
21
+ return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
22
+ }
23
+ return `import type ${controlName} from "../../${controlName}.js";`
24
+ }
25
+
26
+ const buildRenderer = (controlName, litTemplate, hasTypes) => {
27
+ const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
28
+
29
+ // typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
30
+ return `/* eslint no-unused-vars: 0 */
31
+ import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
32
+ ${tsImports(controlName, hasTypes)}
5
33
  ${litTemplate}
6
34
 
7
35
  export default block0;`;
@@ -9,4 +37,4 @@ export default block0;`;
9
37
 
10
38
  module.exports = {
11
39
  generateTemplate: buildRenderer
12
- };
40
+ };
@@ -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',
@@ -23,13 +26,27 @@ const onError = (place) => {
23
26
 
24
27
  const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
25
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
+ }
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");
@@ -34,7 +34,7 @@ const convertToJSON = async (file) => {
34
34
  const generate = async () => {
35
35
  const { globby } = await import("globby");
36
36
  await fs.mkdir(messagesJSONDist, { recursive: true });
37
- const files = await globby(messagesBundles);
37
+ const files = await globby(messagesBundles.replace(/\\/g, "/"));
38
38
  return Promise.all(files.map(convertToJSON));
39
39
  };
40
40
 
@@ -8,7 +8,7 @@ const sourceDir = process.argv[3];
8
8
  const preprocessTypes = async () => {
9
9
  try {
10
10
  const { globby } = await import("globby");
11
- const fileNames = await globby(inputDir + "**/types/*.js");
11
+ const fileNames = await globby(inputDir.replace(/\\/g, "/") + "**/types/*.js");
12
12
 
13
13
  return Promise.all(fileNames.map(processTypeFile));
14
14
  } catch(e) {
@@ -63,7 +63,7 @@ const preprocessComponents = async () => {
63
63
 
64
64
  try {
65
65
  const { globby } = await import("globby");
66
- const fileNames = await globby(sourceDir + "/*.ts");
66
+ const fileNames = await globby(sourceDir.replace(/\\/g, "/") + "/*.ts");
67
67
 
68
68
  return Promise.all(fileNames.map(processComponentFile));
69
69
  } catch(e) {
@@ -116,7 +116,7 @@ const processComponentFile = async (fileName) => {
116
116
  const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
117
117
  let jsFileContent = `${await fs.readFile(destFileName)}`;
118
118
 
119
- const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
119
+ const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm");
120
120
  let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
121
121
  if (!classDefinitionMatch) {
122
122
  return; // not a file, generated by typescript, nothing to do here
@@ -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
  };
@@ -10,7 +10,7 @@ const getTag = file => {
10
10
 
11
11
  const getPackageTags = (packageDir) => {
12
12
  const srcDir = path.join(packageDir, "src/");
13
- return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
13
+ return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
14
14
  const tag = getTag(file);
15
15
  return [tag];
16
16
  }).filter(item => !!item);
@@ -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-fc993d8cd",
3
+ "version": "0.0.0-fca1107e7",
4
4
  "description": "UI5 Web Components: webcomponents.tools",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -21,23 +21,26 @@
21
21
  "directory": "packages/tools"
22
22
  },
23
23
  "dependencies": {
24
- "@typescript-eslint/eslint-plugin": "^5.42.1",
25
- "@typescript-eslint/parser": "^5.42.1",
24
+ "@custom-elements-manifest/analyzer": "^0.8.4",
25
+ "@typescript-eslint/eslint-plugin": "^6.9.0",
26
+ "@typescript-eslint/parser": "^6.9.0",
26
27
  "@wdio/cli": "^7.19.7",
27
- "@wdio/devtools-service": "^7.19.7",
28
28
  "@wdio/dot-reporter": "^7.19.7",
29
29
  "@wdio/local-runner": "^7.19.7",
30
30
  "@wdio/mocha-framework": "^7.19.7",
31
31
  "@wdio/spec-reporter": "^7.19.7",
32
32
  "@wdio/static-server-service": "^7.19.5",
33
+ "ajv": "^8.12.0",
34
+ "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
33
35
  "chai": "^4.3.4",
34
36
  "child_process": "^1.0.2",
35
37
  "chokidar": "^3.5.1",
36
38
  "chokidar-cli": "^3.0.0",
37
39
  "command-line-args": "^5.1.1",
40
+ "comment-parser": "^1.4.0",
38
41
  "concurrently": "^6.0.0",
39
42
  "cross-env": "^7.0.3",
40
- "cssnano": "^4.1.11",
43
+ "custom-element-jet-brains-integration": "^1.4.4",
41
44
  "escodegen": "^2.0.0",
42
45
  "eslint": "^7.22.0",
43
46
  "eslint-config-airbnb-base": "^14.2.1",
@@ -55,20 +58,19 @@
55
58
  "nps": "^5.10.0",
56
59
  "postcss": "^8.4.5",
57
60
  "postcss-cli": "^9.1.0",
58
- "postcss-import": "^14.0.2",
59
61
  "postcss-selector-parser": "^6.0.10",
62
+ "prompts": "^2.4.2",
60
63
  "properties-reader": "^2.2.0",
61
64
  "recursive-readdir": "^2.2.2",
62
65
  "resolve": "^1.20.0",
63
66
  "rimraf": "^3.0.2",
64
67
  "slash": "3.0.0",
65
- "vite": "^3.0.4",
66
- "wdio-chromedriver-service": "^7.3.2",
67
- "zx": "^4.3.0"
68
+ "vite": "^4.4.9",
69
+ "wdio-chromedriver-service": "^7.3.2"
68
70
  },
69
71
  "peerDependencies": {
70
72
  "chromedriver": "*",
71
- "typescript": "^4.9.4"
73
+ "typescript": "^5.2.2"
72
74
  },
73
75
  "peerDependenciesMeta": {
74
76
  "typescript": {
@@ -76,6 +78,7 @@
76
78
  }
77
79
  },
78
80
  "devDependencies": {
81
+ "esbuild": "^0.19.9",
79
82
  "yargs": "^17.5.1"
80
83
  }
81
84
  }
@@ -1,58 +0,0 @@
1
- const esprima = require("esprima");
2
- const escodegen = require("escodegen");
3
-
4
- const fs = require("fs").promises;
5
- const path = require("path");
6
- const basePath = process.argv[2];
7
-
8
- const convertImports = async (srcPath) => {
9
- let changed = false;
10
- // console.log("scanning imports of", srcPath);
11
- let code = (await fs.readFile(srcPath)).toString();
12
- const tree = esprima.parseModule(code);
13
- const importer = srcPath.replace(basePath, "");
14
- const importerDir = path.dirname(importer);
15
- // console.log("-> ", importer);
16
- tree.body.forEach(node => {
17
- if (node.type === "ImportDeclaration") {
18
- let importee = node.source.value;
19
- if (importee.startsWith(".")) {
20
- // add .js extension if missing
21
- if (!importee.endsWith(".js")) {
22
- node.source.value += ".js"
23
- changed = true;
24
- }
25
- return;
26
- }
27
- let importeeDir = path.dirname(importee);
28
- let importeeFile = path.basename(importee);
29
- let relativePath = path.relative(importerDir, importeeDir);
30
- if (relativePath.length === 0) {
31
- relativePath = "."
32
- }
33
- if (!relativePath.startsWith(".")) {
34
- relativePath = "./" + relativePath;
35
- }
36
-
37
- relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
38
- let relativeImport = `${relativePath}/${importeeFile}.js`;
39
- // console.log(importee + " --> " + relativeImport);
40
- node.source.value = relativeImport;
41
- changed = true;
42
- }
43
- });
44
-
45
- if (changed) {
46
- return fs.writeFile(srcPath, escodegen.generate(tree));
47
- }
48
- }
49
-
50
- const generate = async () => {
51
- const { globby } = await import("globby");
52
- const fileNames = await globby(basePath + "**/*.js");
53
- return Promise.all(fileNames.map(convertImports).filter(x => !!x));
54
- };
55
-
56
- generate().then(() => {
57
- console.log("Success: Converted absolute imports to relative for files in:", basePath);
58
- });
@@ -1,47 +0,0 @@
1
- const fs = require('fs');
2
- const path = require('path');
3
- const mkdirp = require('mkdirp');
4
-
5
- const proccessCSS = css => {
6
- css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
7
- css = css.replace(/\.background-image.*{.*}/, "");
8
- css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
9
- css = css.replace(/--sapFontUrl.*\);?/, "");
10
- return css;
11
- }
12
-
13
- module.exports = function (opts) {
14
- opts = opts || {};
15
-
16
- return {
17
- postcssPlugin: 'postcss-css-to-json',
18
- Once (root) {
19
- let css = root.toString();
20
- css = proccessCSS(css);
21
-
22
- const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
23
- mkdirp.sync(path.dirname(targetFile));
24
-
25
- const filePath = `${targetFile}.json`;
26
- const data = {
27
- packageName: opts.packageName,
28
- fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
29
- content: css
30
- };
31
- // it seems slower to read the old content, but writing the same content with no real changes
32
- // (as in initial build and then watch mode) will cause an unnecessary dev server refresh
33
- let oldContent = "";
34
- try {
35
- oldContent = fs.readFileSync(filePath).toString();
36
- } catch (e) {
37
- // file not found
38
- }
39
- const content = JSON.stringify({_: data});
40
- if (content !== oldContent) {
41
- fs.writeFileSync(filePath, content);
42
- }
43
- }
44
- };
45
- };
46
-
47
- module.exports.postcss = true;
@@ -1,36 +0,0 @@
1
- const chokidar = require("chokidar");
2
- const commandLineArgs = require("command-line-args");
3
- const { exec } = require("child_process");
4
-
5
- const options = commandLineArgs([
6
- { name: "srcFiles", type: String },
7
- ]);
8
-
9
- const runPostcss = path => {
10
- let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
11
- console.log(`Executing: ${command}`);
12
- exec(command, (err, stdout, stderr) => {
13
- if (err) {
14
- console.log(`Could not run postcss for ${path}. Error: ${err}`);
15
- }
16
- });
17
-
18
- command = `${command} -w`;
19
- console.log(`Executing: ${command}`);
20
- exec(command, (err, stdout, stderr) => {
21
- if (err) {
22
- console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
23
- }
24
- });
25
- };
26
-
27
- let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
28
- const watcher = chokidar.watch(options.srcFiles);
29
- watcher.on("ready", () => {
30
- ready = true; // Initial scan is over -> waiting for new files
31
- });
32
- watcher.on("add", path => {
33
- if (ready) {
34
- runPostcss(path);
35
- }
36
- });
@@ -1,14 +0,0 @@
1
- import 'zx/globals';
2
-
3
- // don't print executed commands and their output
4
- $.verbose = false;
5
-
6
- const inputFiles = await globby("src/**/parameters-bundle.css");
7
-
8
- const restArgs = process.argv.slice(2);
9
-
10
- // run all postcss processes in parallel as passing the glob directly to postcss makes them processed sequentially.
11
- // and the amount of imports give a big speed up when run in parallel
12
- await Promise.all(inputFiles.map(file => {
13
- return $`postcss ${file} --config config/postcss.themes --base src --dir dist/css/ ${restArgs}`;
14
- }));
@@ -1,25 +0,0 @@
1
- const fs = require("fs").promises;
2
-
3
- const basePath = process.argv[2];
4
-
5
- const replaceGlobalCoreUsage = async (srcPath) => {
6
-
7
- const original = (await fs.readFile(srcPath)).toString();
8
- let replaced = original.replace(/sap\.ui\.getCore\(\)/g, `Core`);
9
-
10
- if (original !== replaced) {
11
- replaced = `import Core from 'sap/ui/core/Core';
12
- ${replaced}`;
13
- return fs.writeFile(srcPath, replaced);
14
- }
15
- };
16
-
17
- const generate = async () => {
18
- const { globby } = await import("globby");
19
- const fileNames = await globby(basePath + "**/*.js");
20
- return Promise.all(fileNames.map(replaceGlobalCoreUsage).filter(x => !!x));
21
- };
22
-
23
- generate().then(() => {
24
- console.log("Success: Replaced global core usage in:", basePath);
25
- });