@ui5/webcomponents-tools 0.0.0-701b14e36 → 0.0.0-7a547f8cc

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 (47) hide show
  1. package/CHANGELOG.md +158 -0
  2. package/README.md +5 -6
  3. package/bin/dev.js +1 -5
  4. package/components-package/eslint.js +28 -0
  5. package/components-package/nps.js +76 -44
  6. package/components-package/postcss.components.js +13 -13
  7. package/components-package/postcss.themes.js +15 -15
  8. package/components-package/vite.config.js +12 -0
  9. package/components-package/wdio.js +28 -4
  10. package/components-package/wdio.sync.js +1 -1
  11. package/icons-collection/nps.js +6 -3
  12. package/lib/copy-and-watch/index.js +0 -1
  13. package/lib/copy-list/index.js +2 -2
  14. package/lib/create-icons/index.js +27 -9
  15. package/lib/create-new-component/index.js +5 -5
  16. package/lib/dev-server/dev-server.js +66 -0
  17. package/lib/dev-server/virtual-index-html-plugin.js +53 -0
  18. package/lib/generate-custom-elements-manifest/index.js +327 -0
  19. package/lib/generate-js-imports/illustrations.js +72 -0
  20. package/lib/generate-json-imports/themes.js +3 -3
  21. package/lib/hbs2lit/src/compiler.js +8 -0
  22. package/lib/hbs2lit/src/litVisitor2.js +46 -8
  23. package/lib/i18n/defaults.js +18 -2
  24. package/lib/jsdoc/configTypescript.json +29 -0
  25. package/lib/jsdoc/plugin.js +32 -0
  26. package/lib/jsdoc/preprocess.js +146 -0
  27. package/lib/jsdoc/template/publish.js +9 -1
  28. package/lib/postcss-css-to-esm/index.js +51 -6
  29. package/lib/postcss-css-to-json/index.js +12 -1
  30. package/lib/postcss-p/postcss-p.mjs +3 -0
  31. package/lib/scoping/get-all-tags.js +1 -8
  32. package/lib/scoping/scope-test-pages.js +1 -1
  33. package/lib/test-runner/test-runner.js +63 -0
  34. package/package.json +15 -15
  35. package/components-package/rollup-plugins/empty-module.js +0 -15
  36. package/components-package/rollup.js +0 -150
  37. package/lib/documentation/index.js +0 -168
  38. package/lib/documentation/templates/api-component-since.js +0 -3
  39. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  40. package/lib/documentation/templates/api-events-section.js +0 -35
  41. package/lib/documentation/templates/api-methods-section.js +0 -26
  42. package/lib/documentation/templates/api-properties-section.js +0 -42
  43. package/lib/documentation/templates/api-slots-section.js +0 -28
  44. package/lib/documentation/templates/template.js +0 -39
  45. package/lib/serve/index.js +0 -46
  46. package/lib/serve/serve.json +0 -3
  47. package/package-lock.json +0 -48
@@ -34,7 +34,7 @@ function HTMLLitVisitor(debug) {
34
34
  this.blocks = {};
35
35
  this.result = "";
36
36
  this.mainBlock = "";
37
- this.blockPath = "context";
37
+ this.blockLevel = 0;
38
38
  this.blockParameters = ["context", "tags", "suffix"];
39
39
  this.paths = []; //contains all normalized relative paths
40
40
  this.debug = debug;
@@ -57,7 +57,6 @@ HTMLLitVisitor.prototype.Program = function(program) {
57
57
  this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
58
58
  } else {
59
59
  this.mainBlock = this.currentKey();
60
- this.paths.push(this.blockPath);
61
60
  }
62
61
 
63
62
  this.blocks[this.currentKey()] += "html`";
@@ -173,7 +172,7 @@ function visitEachBlock(block) {
173
172
 
174
173
  this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
175
174
  this.paths.push(normalizePath.call(this, block.params[0].original));
176
- this.blockPath = "item";
175
+ this.blockLevel++;
177
176
 
178
177
  if (this.blockParameters.indexOf("item") === -1) {
179
178
  bParamAdded = true;
@@ -185,8 +184,7 @@ function visitEachBlock(block) {
185
184
  this.blockParameters.shift("item");
186
185
  this.blockParameters.shift("index");
187
186
  }
188
- this.blockPath = "context";
189
-
187
+ this.blockLevel--;
190
188
  this.blocks[this.currentKey()] += ") }";
191
189
  }
192
190
 
@@ -195,12 +193,52 @@ function normalizePath(sPath) {
195
193
 
196
194
  //read carefully - https://github.com/wycats/handlebars.js/issues/1028
197
195
  //kpdecker commented on May 20, 2015
198
- if (result.indexOf("../") === 0) {
199
- let absolutePath = replaceAll(this.paths[this.paths.length - 1], ".", "/") + "/" + result;
196
+
197
+ if (result.indexOf("@root") === 0) {
198
+ // Trying to access root context via the HBS "@root" variable.
199
+ // Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
200
+ result = result.replace("@root", "context");
201
+
202
+ } else if (result.indexOf("../") === 0) {
203
+ let absolutePath;
204
+ const levelsUp = (result.match(/..\//g) || []).length;
205
+
206
+ if (this.blockLevel <= levelsUp) {
207
+ // Trying to access root context from nested loops.
208
+ // Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
209
+ // Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
210
+ absolutePath = `context.${replaceAll(result,"../", "")}`;
211
+ } else {
212
+ // Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
213
+ // Example: {{../property}} compiles to "context.property" - when called in a top level loop.
214
+ // Example: {{../property}} compiles to "item.property" - when called in a nested level loop.
215
+ // TODO: the second example, although correctly generated to "item.property", "item" will point to the current object within the nested loop,
216
+ // not the upper level loop as intended. So accessing the upper loop from nested loop is currently not working.
217
+ absolutePath = replaceAll(this.paths[this.paths.length - 1 - levelsUp], ".", "/") + "/" + result;
218
+ }
219
+
200
220
  result = replaceAll(path.normalize(absolutePath), path.sep, ".");
221
+
201
222
  } else {
202
- result = result ? replaceAll(this.blockPath + "/" + result, "/", ".") : this.blockPath;
223
+ // When neither "@root", nor "../" are used, use the following contexts:
224
+ // - use "context" - for the top level of execution, e.g "this.blockLevel = 0".
225
+ // - use "item" - for any nested level, e.g "this.blockLevel > 0".
226
+ // Example:
227
+ //
228
+ // {{text}} -> compiles to "context.text"
229
+ // {{#each items}}
230
+ // Item text: {{text}}</div> -> compiles to "item.text"
231
+ // {{#each words}}
232
+ // Word text: {{text}}</div> -> compiles to "item.text"
233
+ // {{/each}}
234
+ // Item text: {{text}}</div> -> compiles to "item.text"
235
+ // {{/each}}
236
+ // {{text}} -> compiles to "context.text"
237
+
238
+ const blockPath = this.blockLevel > 0 ? "item" : "context";
239
+ result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
203
240
  }
241
+
204
242
  return result;
205
243
  }
206
244
 
@@ -8,7 +8,9 @@ const generate = async () => {
8
8
 
9
9
  const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
10
10
  const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
11
- const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
11
+ const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
12
+
13
+ const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
12
14
 
13
15
  if (!messageBundle || !outputFile) {
14
16
  return;
@@ -22,6 +24,15 @@ const generate = async () => {
22
24
  } catch (e) {
23
25
  }
24
26
 
27
+ // Merge messagebundle.properties and messagebundle_en.properties files to generate the default texts.
28
+ // Note:
29
+ // (1) at DEV time, it's intuituve to work with the source bundle file - the messagebundle.properties,
30
+ // and see the changes there take effect.
31
+ // (2) as the messagebundle.properties file is always written in English,
32
+ // it makes sense to consider the messagebundle.properties content only when the default language is "en".
33
+ if (defaultLanguage === "en") {
34
+ defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
35
+ }
25
36
 
26
37
  /*
27
38
  * Returns the single text object to enable single export.
@@ -36,6 +47,9 @@ const generate = async () => {
36
47
  let effectiveValue = defaultLanguageValue || value;
37
48
  effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
38
49
 
50
+ if (tsMode) {
51
+ return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
52
+ }
39
53
  return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
40
54
  };
41
55
 
@@ -53,7 +67,9 @@ const generate = async () => {
53
67
  const textKeys = Object.keys(properties);
54
68
  const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
55
69
 
56
- return `${texts}
70
+ // 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
+ ${texts}
57
73
  export {${textKeys.join()}};`;
58
74
  };
59
75
 
@@ -0,0 +1,29 @@
1
+ {
2
+ "source": {
3
+ "include": "jsdoc-dist",
4
+ "excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
5
+ },
6
+ "opts" : {
7
+ "recurse": true,
8
+ "template" : "template",
9
+ "destination": ""
10
+ },
11
+ "plugins": [
12
+ "./plugin.js"
13
+ ],
14
+ "templates" : {
15
+ "ui5" : {
16
+ "variants": [
17
+ "apijson"
18
+ ],
19
+ "version": "1.62",
20
+ "apiJsonFolder": "",
21
+ "apiJsonFile": "dist/api.json",
22
+ "includeSettingsInConstructor": false
23
+ }
24
+ },
25
+ "tags": {
26
+ "allowUnknownTags": true,
27
+ "dictionaries": ["jsdoc"]
28
+ }
29
+ }
@@ -34,6 +34,10 @@
34
34
  * native
35
35
  *
36
36
  * noattribute
37
+ *
38
+ * formEvents
39
+ *
40
+ * formProperty
37
41
  *
38
42
  * allowPreventDefault
39
43
  *
@@ -2108,6 +2112,34 @@ exports.defineTags = function(dictionary) {
2108
2112
  doclet.noattribute = true;
2109
2113
  }
2110
2114
  });
2115
+
2116
+ dictionary.defineTag('formEvents', {
2117
+ mustHaveValue: false,
2118
+ onTagged: function(doclet, tag) {
2119
+ if (tag.value) {
2120
+ doclet.formEvents = doclet.formEvents || [];
2121
+ tag.value.split(" ").forEach(function($) {
2122
+ if ( doclet.formEvents.indexOf($) < 0 ) {
2123
+ doclet.formEvents.push($);
2124
+ }
2125
+ });
2126
+ }
2127
+ }
2128
+ });
2129
+
2130
+ dictionary.defineTag('formProperty', {
2131
+ mustHaveValue: false,
2132
+ onTagged: function(doclet, tag) {
2133
+ doclet.formProperty = true;
2134
+ }
2135
+ });
2136
+
2137
+ dictionary.defineTag('formAssociated', {
2138
+ mustHaveValue: false,
2139
+ onTagged: function(doclet, tag) {
2140
+ doclet.formAssociated = doclet.formAssociated || true;
2141
+ }
2142
+ });
2111
2143
  };
2112
2144
 
2113
2145
  exports.handlers = {
@@ -0,0 +1,146 @@
1
+ const process = require("process");
2
+ const path = require("path");
3
+ const fs = require("fs/promises");
4
+
5
+ const inputDir = process.argv[2];
6
+ const sourceDir = process.argv[3];
7
+
8
+ const preprocessTypes = async () => {
9
+ try {
10
+ const { globby } = await import("globby");
11
+ const fileNames = await globby(inputDir + "**/types/*.js");
12
+
13
+ return Promise.all(fileNames.map(processTypeFile));
14
+ } catch(e) {
15
+ console.log("JSDoc types preprocess failed: ", e);
16
+ }
17
+ };
18
+
19
+ const processTypeFile = async (fileName) => {
20
+ let fileContent = `${await fs.readFile(fileName)}`;
21
+
22
+ const re = new RegExp(`(\\/\\*\\*\\s*\\n([^\\*]|(\\*(?!\\/)))*\\*\\/)\\s+[\\w\\d]+\\[\\"([\\w\\d]+)\\"\\]\\s*=\\s*\\"([\\w\\d]+)\\";`, "gm")
23
+ let matches = [...fileContent.matchAll(re)];
24
+
25
+ // Get all type values
26
+ const typeData = matches.map(match => {
27
+ return {
28
+ comment: match[1],
29
+ key: match[4],
30
+ value: match[5],
31
+ };
32
+ });
33
+ if (typeData.length === 0) {
34
+ return;
35
+ }
36
+
37
+ const typeName = path.parse(fileName).name;
38
+
39
+ matches = fileContent.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//gm);
40
+ const comment = matches[0];
41
+
42
+ const propsCode = typeData.map(item => {
43
+ return `${item.comment}\n get ${item.key}() { return "${item.value}"; }`;
44
+ }).join("\n");
45
+
46
+ const newClassCode = `
47
+ ${comment}
48
+ class ${typeName} {
49
+ ${propsCode}
50
+ };
51
+
52
+ export default ${typeName};`;
53
+
54
+ fileContent = newClassCode;
55
+
56
+ return fs.writeFile(fileName, fileContent);
57
+ };
58
+
59
+ const preprocessComponents = async () => {
60
+ if (!sourceDir) {
61
+ return; // if the second param was not passed, there are no components
62
+ }
63
+
64
+ try {
65
+ const { globby } = await import("globby");
66
+ const fileNames = await globby(sourceDir + "/*.ts");
67
+
68
+ return Promise.all(fileNames.map(processComponentFile));
69
+ } catch(e) {
70
+ console.log("JSDoc components preprocess failed: ", e);
71
+ }
72
+ };
73
+
74
+ const isClass = text => {
75
+ return text.includes("@abstract") || text.includes("@class");
76
+ };
77
+
78
+ const isAnnotationComment = (comment) => {
79
+ return comment.includes("@name");
80
+ }
81
+
82
+ const processComponentFile = async (fileName) => {
83
+ // source file (src/*.ts)
84
+ let tsFileContent = `${await fs.readFile(fileName)}`;
85
+
86
+ // Skip all non-component files
87
+ if (!isClass(tsFileContent)) {
88
+ return;
89
+ }
90
+
91
+ // Gather all JSDocs from the original .ts file
92
+ const allJSDocsRegExp = new RegExp(`\\/\\*\\*(.|\\n)+?\\s+\\*\\/`, "gm");
93
+ let allJSDocs = [...tsFileContent.matchAll(allJSDocsRegExp)];
94
+ allJSDocs = allJSDocs.map(match => match[0]); // all /** ..... */ comments
95
+
96
+ // Find where the class is defined in the original file
97
+ const tsClassDefinitionRegExp = new RegExp(`^(abstract\\s)?class [\\w\\d_]+`, "gm");
98
+ let tsClassDefinitionMatch = tsFileContent.match(tsClassDefinitionRegExp);
99
+ if (!tsClassDefinitionMatch) {
100
+ return; // no class defined in this .ts file
101
+ }
102
+ const tsClassDefinition = tsClassDefinitionMatch[0];
103
+ const tsClassDefinitionIndex = tsFileContent.indexOf(tsClassDefinition);
104
+
105
+ // Gather all JSDocs that are before the class definition (except for the @class one)
106
+ const JSDocsToAppend = [];
107
+ allJSDocs.forEach(JSDoc => {
108
+ if (!isClass(JSDoc) && (tsFileContent.indexOf(JSDoc) < tsClassDefinitionIndex || isAnnotationComment(JSDoc, tsFileContent))) {
109
+ JSDocsToAppend.push(JSDoc);
110
+ }
111
+ });
112
+
113
+
114
+
115
+ // destination file (jsdoc-dist/*.js)
116
+ const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
117
+ let jsFileContent = `${await fs.readFile(destFileName)}`;
118
+
119
+ const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
120
+ let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
121
+ if (!classDefinitionMatch) {
122
+ return; // not a file, generated by typescript, nothing to do here
123
+ }
124
+
125
+ const classDefinition = classDefinitionMatch[0];
126
+ const classDefinitionIndex = jsFileContent.indexOf(classDefinition); // classDefinitionIndex is the position in the file where the class is defined
127
+
128
+ // All comments before the class definition, except for the @class comment, must be removed
129
+ allJSDocs.forEach(JSDoc => {
130
+ if (!isClass(JSDoc) && jsFileContent.indexOf(JSDoc) < classDefinitionIndex) {
131
+ jsFileContent = jsFileContent.replace(JSDoc, "");
132
+ }
133
+ });
134
+
135
+ // Put all other comments at the end of the file
136
+ jsFileContent = jsFileContent + "\n\n" + JSDocsToAppend.join("\n\n");
137
+ return fs.writeFile(destFileName, jsFileContent);
138
+ };
139
+
140
+ Promise.all([
141
+ preprocessTypes(),
142
+ preprocessComponents(),
143
+ ]).then(() => {
144
+ console.log("JSDoc preprocess ready.");
145
+ });
146
+
@@ -2820,6 +2820,14 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
2820
2820
  attrib("since", extractVersion(member.since));
2821
2821
  }
2822
2822
 
2823
+ if ( member.formEvents ) {
2824
+ attrib("formEvents", member.formEvents);
2825
+ }
2826
+
2827
+ if ( member.formEvents ) {
2828
+ attrib("formProperty", member.formProperty);
2829
+ }
2830
+
2823
2831
  var type = listTypes(member.type);
2824
2832
  attrib("type", type);
2825
2833
 
@@ -3865,7 +3873,7 @@ function createAPIJS(symbols, filename) {
3865
3873
 
3866
3874
  var output = [];
3867
3875
 
3868
- var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
3876
+ var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|formEvents|formProperty|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
3869
3877
 
3870
3878
  function isNoKeyword($) { return !rkeywords.test($.name); }
3871
3879
 
@@ -11,11 +11,38 @@ const getDefaultThemeCode = packageName => {
11
11
  import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
12
12
  import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
13
13
 
14
- registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
15
- registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
14
+ registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
15
+ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
16
16
  `;
17
17
  };
18
18
 
19
+ const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
20
+ if (tsMode) {
21
+ return getTSContent(targetFile, packageName, css, includeDefaultTheme);
22
+ }
23
+
24
+ return getJSContent(targetFile, packageName, css, includeDefaultTheme);
25
+ }
26
+
27
+ const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
28
+ const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
29
+ const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
30
+
31
+ // tabs are intentionally mixed to have proper identation in the produced file
32
+ return `${typeImport}
33
+ ${defaultTheme}
34
+ const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
35
+ export default styleData;
36
+ `;
37
+ }
38
+
39
+ const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
40
+ const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
41
+
42
+ return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
43
+ }
44
+
45
+
19
46
  const proccessCSS = css => {
20
47
  css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
21
48
  css = css.replace(/\.background-image.*{.*}/, "");
@@ -27,18 +54,36 @@ const proccessCSS = css => {
27
54
  module.exports = function (opts) {
28
55
  opts = opts || {};
29
56
 
57
+ const packageName = opts.packageName;
58
+ const includeDefaultTheme = opts.includeDefaultTheme;
59
+ const toReplace = opts.toReplace;
60
+
30
61
  return {
31
62
  postcssPlugin: 'postcss-css-to-esm',
32
63
  Once (root) {
64
+ const tsMode = process.env.UI5_TS === "true";
65
+
33
66
  let css = root.toString();
34
67
  css = proccessCSS(css);
35
68
 
36
- const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
69
+ const targetFile = root.source.input.from.replace(`/${toReplace}/`, "/src/generated/").replace(`\\${toReplace}\\`, "\\src\\generated\\");
37
70
  mkdirp.sync(path.dirname(targetFile));
38
71
 
39
- const filePath = `${targetFile}.js`;
40
- const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
41
- fs.writeFileSync(filePath, `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`);
72
+ const filePath = `${targetFile}.${tsMode ? "ts" : "js"}`;
73
+
74
+ // it seems slower to read the old content, but writing the same content with no real changes
75
+ // (as in initial build and then watch mode) will cause an unnecessary dev server refresh
76
+ let oldContent = "";
77
+ try {
78
+ oldContent = fs.readFileSync(filePath).toString();
79
+ } catch (e) {
80
+ // file not found
81
+ }
82
+
83
+ const content = getFileContent(tsMode, filePath, packageName, css, includeDefaultTheme);
84
+ if (content !== oldContent) {
85
+ fs.writeFileSync(filePath, content);
86
+ }
42
87
  }
43
88
  };
44
89
  };
@@ -28,7 +28,18 @@ module.exports = function (opts) {
28
28
  fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
29
29
  content: css
30
30
  };
31
- fs.writeFileSync(filePath, JSON.stringify({_: data}));
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
+ }
32
43
  }
33
44
  };
34
45
  };
@@ -1,5 +1,8 @@
1
1
  import 'zx/globals';
2
2
 
3
+ // don't print executed commands and their output
4
+ $.verbose = false;
5
+
3
6
  const inputFiles = await globby("src/**/parameters-bundle.css");
4
7
 
5
8
  const restArgs = process.argv.slice(2);
@@ -8,18 +8,11 @@ const getTag = file => {
8
8
  return matches ? matches[1] : undefined;
9
9
  };
10
10
 
11
- const getAltTag = file => {
12
- const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
13
- const matches = fileContent.match(/\baltTag\b:\s*\"(.*?)\"/);
14
- return matches ? matches[1] : undefined;
15
- };
16
-
17
11
  const getPackageTags = (packageDir) => {
18
12
  const srcDir = path.join(packageDir, "src/");
19
13
  return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
20
14
  const tag = getTag(file);
21
- const altTag = getAltTag(file);
22
- return [tag, altTag];
15
+ return [tag];
23
16
  }).filter(item => !!item);
24
17
  };
25
18
 
@@ -27,7 +27,7 @@ const replaceTagsAny = content => {
27
27
  // Replace bundle names and HTML tag names in test pages
28
28
  glob.sync(path.join(root, "/**/*.html")).forEach(file => {
29
29
  let content = String(fs.readFileSync(file));
30
- content = content.replace(/bundle\.(.*?)\.js/g, `bundle.scoped.$1.js`);
30
+ content = content.replace(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
31
31
  content = replaceTagsHTML(content);
32
32
  fs.writeFileSync(file, content);
33
33
  });
@@ -0,0 +1,63 @@
1
+ const child_process = require("child_process");
2
+ const { readFileSync } = require("fs");
3
+ const path = require("path");
4
+
5
+ // search for dev-server port
6
+ // start in current folder
7
+ // traversing upwards in case of mono repo tests and dev-server running in root folder of repository
8
+ let devServerFolder = process.cwd();
9
+ let devServerPort;
10
+ while (true) {
11
+ try {
12
+ devServerPort = readFileSync(path.join(devServerFolder, ".dev-server-port")).toString();
13
+ break; // found
14
+ } catch (e) {
15
+ // file not found
16
+ if (devServerFolder === path.dirname(devServerFolder)) {
17
+ break; // reached root folder "/"
18
+ }
19
+ devServerFolder = path.dirname(devServerFolder);
20
+ }
21
+ }
22
+
23
+ // check if we are in a monorepo and extract path from package.json
24
+ let packageRepositoryPath = "";
25
+ const pkg = require(path.join(process.cwd(), "package.json"));
26
+ packageRepositoryPath = pkg.repository.directory;
27
+
28
+ // construct base url
29
+ // use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
30
+ // if a dev server is running in the root of a mono repo, append tha package path like this
31
+ // http://localhost:${devServerPort}/packages/main/
32
+ let baseUrl = "";
33
+ if (devServerPort) {
34
+ console.log(`Found port ${devServerPort} from '${path.join(devServerFolder, ".dev-server-port")}'`);
35
+ const devServerInRoot = !devServerFolder.includes(packageRepositoryPath);
36
+ if (devServerInRoot) {
37
+ baseUrl = `--base-url http://localhost:${devServerPort}/${packageRepositoryPath}/`;
38
+ } else {
39
+ baseUrl = `--base-url http://localhost:${devServerPort}/`;
40
+ }
41
+ }
42
+
43
+ if (!baseUrl) {
44
+ console.log("No dev server running, running tests served from `dist`, make sure it is up to date");
45
+ }
46
+
47
+ // add single spec parameter if passed
48
+ let spec = "";
49
+ if (process.argv.length === 3) {
50
+ const specFile = process.argv[2];
51
+ spec = `--spec ${specFile}`;
52
+ }
53
+
54
+ // more parameters - pass them to wdio
55
+ let restParams = "";
56
+ if (process.argv.length > 3) {
57
+ restParams = process.argv.slice(2).join(" ");
58
+ }
59
+
60
+ // run wdio with calculated parameters
61
+ const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
62
+ console.log(`executing: ${cmd}`);
63
+ child_process.execSync(cmd, {stdio: 'inherit'});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-tools",
3
- "version": "0.0.0-701b14e36",
3
+ "version": "0.0.0-7a547f8cc",
4
4
  "description": "UI5 Web Components: webcomponents.tools",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -21,19 +21,19 @@
21
21
  "directory": "packages/tools"
22
22
  },
23
23
  "dependencies": {
24
- "@rollup/plugin-json": "^4.1.0",
25
- "@rollup/plugin-node-resolve": "^13.0.5",
26
- "@rollup/plugin-replace": "^3.0.0",
27
- "@wdio/cli": "^7.12.2",
28
- "@wdio/dot-reporter": "^7.10.1",
29
- "@wdio/local-runner": "^7.12.2",
30
- "@wdio/mocha-framework": "^7.12.2",
31
- "@wdio/spec-reporter": "^7.10.1",
24
+ "@typescript-eslint/eslint-plugin": "^5.42.1",
25
+ "@typescript-eslint/parser": "^5.42.1",
26
+ "@wdio/cli": "^7.19.7",
27
+ "@wdio/devtools-service": "^7.19.7",
28
+ "@wdio/dot-reporter": "^7.19.7",
29
+ "@wdio/local-runner": "^7.19.7",
30
+ "@wdio/mocha-framework": "^7.19.7",
31
+ "@wdio/spec-reporter": "^7.19.7",
32
+ "@wdio/static-server-service": "^7.19.5",
32
33
  "chai": "^4.3.4",
33
34
  "child_process": "^1.0.2",
34
35
  "chokidar": "^3.5.1",
35
36
  "chokidar-cli": "^3.0.0",
36
- "cli-color": "^2.0.1",
37
37
  "command-line-args": "^5.1.1",
38
38
  "concurrently": "^6.0.0",
39
39
  "cross-env": "^7.0.3",
@@ -61,15 +61,15 @@
61
61
  "recursive-readdir": "^2.2.2",
62
62
  "resolve": "^1.20.0",
63
63
  "rimraf": "^3.0.2",
64
- "rollup": "^2.41.4",
65
- "rollup-plugin-livereload": "^2.0.0",
66
- "rollup-plugin-terser": "^7.0.2",
67
- "serve": "^12.0.0",
68
64
  "slash": "3.0.0",
69
- "wdio-chromedriver-service": "^7.0.0",
65
+ "vite": "^2.9.12",
66
+ "wdio-chromedriver-service": "^7.3.2",
70
67
  "zx": "^4.3.0"
71
68
  },
72
69
  "peerDependencies": {
73
70
  "chromedriver": "*"
71
+ },
72
+ "devDependencies": {
73
+ "yargs": "^17.5.1"
74
74
  }
75
75
  }
@@ -1,15 +0,0 @@
1
- const slash = require("slash");
2
-
3
- function emptyModulePlugin({ emptyModules }) {
4
- return {
5
- name: "ui5-dev-empty-module-plugin",
6
- load(id) {
7
- if (emptyModules.some(mod => slash(id).includes(mod))) {
8
- return `export default ""`;
9
- }
10
- return null;
11
- },
12
- };
13
- }
14
-
15
- module.exports = emptyModulePlugin;