@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.
- package/CHANGELOG.md +158 -0
- package/README.md +5 -6
- package/bin/dev.js +1 -5
- package/components-package/eslint.js +28 -0
- package/components-package/nps.js +76 -44
- package/components-package/postcss.components.js +13 -13
- package/components-package/postcss.themes.js +15 -15
- package/components-package/vite.config.js +12 -0
- package/components-package/wdio.js +28 -4
- package/components-package/wdio.sync.js +1 -1
- package/icons-collection/nps.js +6 -3
- package/lib/copy-and-watch/index.js +0 -1
- package/lib/copy-list/index.js +2 -2
- package/lib/create-icons/index.js +27 -9
- package/lib/create-new-component/index.js +5 -5
- package/lib/dev-server/dev-server.js +66 -0
- package/lib/dev-server/virtual-index-html-plugin.js +53 -0
- package/lib/generate-custom-elements-manifest/index.js +327 -0
- package/lib/generate-js-imports/illustrations.js +72 -0
- package/lib/generate-json-imports/themes.js +3 -3
- package/lib/hbs2lit/src/compiler.js +8 -0
- package/lib/hbs2lit/src/litVisitor2.js +46 -8
- package/lib/i18n/defaults.js +18 -2
- package/lib/jsdoc/configTypescript.json +29 -0
- package/lib/jsdoc/plugin.js +32 -0
- package/lib/jsdoc/preprocess.js +146 -0
- package/lib/jsdoc/template/publish.js +9 -1
- package/lib/postcss-css-to-esm/index.js +51 -6
- package/lib/postcss-css-to-json/index.js +12 -1
- package/lib/postcss-p/postcss-p.mjs +3 -0
- package/lib/scoping/get-all-tags.js +1 -8
- package/lib/scoping/scope-test-pages.js +1 -1
- package/lib/test-runner/test-runner.js +63 -0
- package/package.json +15 -15
- package/components-package/rollup-plugins/empty-module.js +0 -15
- package/components-package/rollup.js +0 -150
- package/lib/documentation/index.js +0 -168
- package/lib/documentation/templates/api-component-since.js +0 -3
- package/lib/documentation/templates/api-css-variables-section.js +0 -24
- package/lib/documentation/templates/api-events-section.js +0 -35
- package/lib/documentation/templates/api-methods-section.js +0 -26
- package/lib/documentation/templates/api-properties-section.js +0 -42
- package/lib/documentation/templates/api-slots-section.js +0 -28
- package/lib/documentation/templates/template.js +0 -39
- package/lib/serve/index.js +0 -46
- package/lib/serve/serve.json +0 -3
- 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.
|
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.
|
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.
|
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
|
-
|
199
|
-
|
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
|
-
|
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
|
|
package/lib/i18n/defaults.js
CHANGED
@@ -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
|
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
|
-
|
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
|
+
}
|
package/lib/jsdoc/plugin.js
CHANGED
@@ -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(`/${
|
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}
|
40
|
-
|
41
|
-
|
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
|
-
|
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
|
};
|
@@ -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
|
-
|
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,
|
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-
|
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
|
-
"@
|
25
|
-
"@
|
26
|
-
"@
|
27
|
-
"@wdio/
|
28
|
-
"@wdio/dot-reporter": "^7.
|
29
|
-
"@wdio/local-runner": "^7.
|
30
|
-
"@wdio/mocha-framework": "^7.
|
31
|
-
"@wdio/spec-reporter": "^7.
|
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
|
-
"
|
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;
|