@ui5/webcomponents-tools 0.0.0-b0b835975 → 0.0.0-b132dd7b9
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 +1290 -0
- package/README.md +3 -5
- package/assets-meta.js +7 -9
- package/components-package/eslint.js +59 -29
- package/components-package/nps.js +75 -46
- package/components-package/postcss.components.js +1 -24
- package/components-package/postcss.themes.js +1 -30
- package/components-package/vite.config.js +7 -11
- package/components-package/wdio.js +415 -400
- package/icons-collection/nps.js +7 -5
- package/lib/amd-to-es6/index.js +102 -0
- package/lib/amd-to-es6/no-remaining-require.js +33 -0
- package/lib/cem/custom-elements-manifest.config.mjs +530 -0
- package/lib/cem/event.mjs +168 -0
- package/lib/cem/schema-internal.json +1422 -0
- package/lib/cem/schema.json +1098 -0
- package/lib/cem/types-internal.d.ts +808 -0
- package/lib/cem/types.d.ts +736 -0
- package/lib/cem/utils.mjs +423 -0
- package/lib/cem/validate.js +67 -0
- package/lib/create-icons/index.js +13 -10
- package/lib/create-illustrations/index.js +40 -33
- package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +15 -21
- package/lib/create-new-component/ComponentTemplate.js +12 -0
- package/lib/create-new-component/index.js +14 -22
- package/lib/css-processors/css-processor-components.mjs +78 -0
- package/lib/css-processors/css-processor-themes.mjs +74 -0
- package/lib/css-processors/scope-variables.mjs +49 -0
- package/lib/css-processors/shared.mjs +56 -0
- package/lib/dev-server/custom-hot-update-plugin.js +4 -4
- package/lib/dev-server/{dev-server.js → dev-server.mjs} +4 -4
- package/lib/dev-server/virtual-index-html-plugin.js +24 -20
- package/lib/generate-js-imports/illustrations.js +17 -14
- package/lib/generate-json-imports/i18n.js +45 -61
- package/lib/generate-json-imports/themes.js +16 -33
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +12 -7
- package/lib/hbs2ui5/index.js +3 -3
- package/lib/i18n/defaults.js +3 -2
- package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
- package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
- package/lib/scoping/get-all-tags.js +10 -3
- package/lib/scoping/lint-src.js +8 -7
- package/lib/scoping/scope-test-pages.js +2 -1
- package/package.json +16 -12
- package/tsconfig.json +18 -0
- package/components-package/wdio.sync.js +0 -368
- package/lib/create-new-component/jsFileContentTemplate.js +0 -73
- package/lib/esm-abs-to-rel/index.js +0 -58
- package/lib/generate-custom-elements-manifest/index.js +0 -327
- package/lib/jsdoc/config.json +0 -29
- package/lib/jsdoc/configTypescript.json +0 -29
- package/lib/jsdoc/plugin.js +0 -2468
- package/lib/jsdoc/preprocess.js +0 -146
- package/lib/jsdoc/template/publish.js +0 -4120
- package/lib/postcss-css-to-esm/index.js +0 -90
- package/lib/postcss-css-to-json/index.js +0 -47
- package/lib/postcss-new-files/index.js +0 -36
- package/lib/postcss-p/postcss-p.mjs +0 -14
- package/lib/postcss-scope-vars/index.js +0 -24
- package/lib/replace-global-core/index.js +0 -25
@@ -1,12 +1,12 @@
|
|
1
|
-
const
|
1
|
+
const Component = (componentName, tagName, library, packageName) => {
|
2
2
|
return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
3
3
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
4
4
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
5
5
|
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
6
|
-
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
|
7
|
-
import
|
6
|
+
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
7
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
8
8
|
|
9
|
-
import ${componentName}Template from "
|
9
|
+
import ${componentName}Template from "./${componentName}Template.js";
|
10
10
|
|
11
11
|
// Styles
|
12
12
|
import ${componentName}Css from "./generated/themes/${componentName}.css.js";
|
@@ -22,49 +22,43 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
|
|
22
22
|
* For the <code>${tagName}</code>
|
23
23
|
* <h3>ES6 Module Import</h3>
|
24
24
|
*
|
25
|
-
* <code>import ${packageName}/dist/${componentName}.js";</code>
|
25
|
+
* <code>import "${packageName}/dist/${componentName}.js";</code>
|
26
26
|
*
|
27
27
|
* @constructor
|
28
|
-
* @
|
29
|
-
* @alias sap.ui.webc.${library}.${componentName}
|
30
|
-
* @extends sap.ui.webc.base.UI5Element
|
31
|
-
* @tagname ${tagName}
|
28
|
+
* @extends UI5Element
|
32
29
|
* @public
|
33
30
|
*/
|
34
31
|
@customElement({
|
35
32
|
tag: "${tagName}",
|
36
|
-
renderer:
|
33
|
+
renderer: jsxRenderer,
|
37
34
|
styles: ${componentName}Css,
|
38
35
|
template: ${componentName}Template,
|
39
|
-
dependencies: [],
|
40
36
|
})
|
41
37
|
|
42
38
|
/**
|
43
39
|
* Example custom event.
|
44
40
|
* Please keep in mind that all public events should be documented in the API Reference as shown below.
|
45
41
|
*
|
46
|
-
* @event sap.ui.webc.${library}.${componentName}#interact
|
47
42
|
* @public
|
48
43
|
*/
|
49
|
-
@event("interact"
|
44
|
+
@event("interact")
|
50
45
|
class ${componentName} extends UI5Element {
|
46
|
+
eventDetails!: {
|
47
|
+
"interact": void,
|
48
|
+
};
|
49
|
+
|
51
50
|
/**
|
52
51
|
* Defines the value of the component.
|
53
52
|
*
|
54
|
-
* @
|
55
|
-
* @name sap.ui.webc.${library}.${componentName}.prototype.value
|
56
|
-
* @defaultvalue ""
|
53
|
+
* @default ""
|
57
54
|
* @public
|
58
55
|
*/
|
59
56
|
@property()
|
60
|
-
value
|
57
|
+
value?: string;
|
61
58
|
|
62
59
|
/**
|
63
60
|
* Defines the text of the component.
|
64
61
|
*
|
65
|
-
* @type {Node[]}
|
66
|
-
* @name sap.ui.webc.${library}.${componentName}.prototype.default
|
67
|
-
* @slot
|
68
62
|
* @public
|
69
63
|
*/
|
70
64
|
@slot({ type: Node, "default": true })
|
@@ -77,4 +71,4 @@ export default ${componentName};
|
|
77
71
|
`;
|
78
72
|
};
|
79
73
|
|
80
|
-
module.exports =
|
74
|
+
module.exports = Component;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
const ComponentTemplate = (componentName) => {
|
2
|
+
return `import type ${componentName} from "./${componentName}.js";
|
3
|
+
|
4
|
+
export default function ${componentName}Template(this: ${componentName}) {
|
5
|
+
return (
|
6
|
+
<div>Hello World!</div>
|
7
|
+
);
|
8
|
+
}
|
9
|
+
`;
|
10
|
+
};
|
11
|
+
|
12
|
+
module.exports = ComponentTemplate;
|
@@ -1,18 +1,17 @@
|
|
1
1
|
const fs = require("fs");
|
2
|
-
const path = require("path");
|
3
2
|
const prompts = require("prompts");
|
4
|
-
const
|
5
|
-
const
|
3
|
+
const Component = require("./Component.js");
|
4
|
+
const ComponentTemplate= require("./ComponentTemplate.js");
|
6
5
|
|
7
6
|
/**
|
8
|
-
* Hyphanates the given PascalCase string, f.e.:
|
9
|
-
* Foo -> "my-foo"
|
10
|
-
* FooBar -> "foo-bar"
|
7
|
+
* Hyphanates the given PascalCase string and adds prefix, f.e.:
|
8
|
+
* Foo -> "my-foo"
|
9
|
+
* FooBar -> "my-foo-bar"
|
11
10
|
*/
|
12
11
|
const hyphaneteComponentName = (componentName) => {
|
13
12
|
const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
|
14
13
|
|
15
|
-
return
|
14
|
+
return `my-${result}`;
|
16
15
|
};
|
17
16
|
|
18
17
|
/**
|
@@ -58,23 +57,17 @@ const getLibraryName = packageName => {
|
|
58
57
|
return packageName.substr("webcomponents-".length);
|
59
58
|
};
|
60
59
|
|
61
|
-
const generateFiles = (componentName, tagName, library, packageName
|
60
|
+
const generateFiles = (componentName, tagName, library, packageName) => {
|
62
61
|
componentName = capitalizeFirstLetter(componentName);
|
63
62
|
const filePaths = {
|
64
|
-
"main":
|
65
|
-
? `./src/${componentName}.ts`
|
66
|
-
: `./src/${componentName}.js`,
|
63
|
+
"main": `./src/${componentName}.ts`,
|
67
64
|
"css": `./src/themes/${componentName}.css`,
|
68
|
-
"template": `./src/${componentName}.
|
65
|
+
"template": `./src/${componentName}Template.tsx`,
|
69
66
|
};
|
70
67
|
|
71
|
-
|
72
|
-
? tsFileContentTemplate(componentName, tagName, library, packageName)
|
73
|
-
: jsFileContentTemplate(componentName, tagName, library, packageName);
|
74
|
-
|
75
|
-
fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
|
68
|
+
fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
|
76
69
|
fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
|
77
|
-
fs.writeFileSync(filePaths.template,
|
70
|
+
fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
|
78
71
|
|
79
72
|
console.log(`Successfully generated ${filePaths.main}`);
|
80
73
|
console.log(`Successfully generated ${filePaths.css}`);
|
@@ -82,8 +75,8 @@ const generateFiles = (componentName, tagName, library, packageName, isTypeScrip
|
|
82
75
|
|
83
76
|
// Change the color of the output
|
84
77
|
console.warn('\x1b[33m%s\x1b[0m', `
|
85
|
-
|
86
|
-
|
78
|
+
Now, import the component in src/bundle.esm.ts via: "import ${componentName} from ./${componentName}.js";
|
79
|
+
And, add it to your HTML: <${tagName}></${tagName}>.`);
|
87
80
|
}
|
88
81
|
|
89
82
|
// Main function
|
@@ -112,10 +105,9 @@ const createWebComponent = async () => {
|
|
112
105
|
}
|
113
106
|
}
|
114
107
|
|
115
|
-
const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
|
116
108
|
const tagName = hyphaneteComponentName(componentName);
|
117
109
|
|
118
|
-
generateFiles(componentName, tagName, library, packageName
|
110
|
+
generateFiles(componentName, tagName, library, packageName);
|
119
111
|
};
|
120
112
|
|
121
113
|
createWebComponent();
|
@@ -0,0 +1,78 @@
|
|
1
|
+
import { globby } from "globby";
|
2
|
+
import * as esbuild from 'esbuild'
|
3
|
+
import * as fs from "fs";
|
4
|
+
import * as path from "path";
|
5
|
+
import { writeFile, mkdir } from "fs/promises";
|
6
|
+
import chokidar from "chokidar";
|
7
|
+
import scopeVariables from "./scope-variables.mjs";
|
8
|
+
import { writeFileIfChanged, getFileContent } from "./shared.mjs";
|
9
|
+
|
10
|
+
const tsMode = process.env.UI5_TS === "true";
|
11
|
+
const extension = tsMode ? ".css.ts" : ".css.js";
|
12
|
+
|
13
|
+
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
14
|
+
const inputFilesGlob = "src/themes/*.css";
|
15
|
+
const restArgs = process.argv.slice(2);
|
16
|
+
|
17
|
+
let customPlugin = {
|
18
|
+
name: 'ui5-tools',
|
19
|
+
setup(build) {
|
20
|
+
build.initialOptions.write = false;
|
21
|
+
|
22
|
+
build.onEnd(result => {
|
23
|
+
result.outputFiles.forEach(async f => {
|
24
|
+
// scoping
|
25
|
+
let newText = scopeVariables(f.text, packageJSON);
|
26
|
+
newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
|
27
|
+
await mkdir(path.dirname(f.path), {recursive: true});
|
28
|
+
writeFile(f.path, newText);
|
29
|
+
|
30
|
+
// JS/TS
|
31
|
+
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
32
|
+
const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
|
33
|
+
writeFileIfChanged(jsPath, jsContent);
|
34
|
+
});
|
35
|
+
})
|
36
|
+
},
|
37
|
+
}
|
38
|
+
|
39
|
+
const getConfig = async () => {
|
40
|
+
const config = {
|
41
|
+
entryPoints: await globby(inputFilesGlob),
|
42
|
+
bundle: true,
|
43
|
+
minify: true,
|
44
|
+
outdir: 'dist/css',
|
45
|
+
outbase: 'src',
|
46
|
+
plugins: [
|
47
|
+
customPlugin,
|
48
|
+
]
|
49
|
+
};
|
50
|
+
return config;
|
51
|
+
}
|
52
|
+
|
53
|
+
if (restArgs.includes("-w")) {
|
54
|
+
let ready;
|
55
|
+
let config = await getConfig();
|
56
|
+
let ctx = await esbuild.context(config);
|
57
|
+
await ctx.watch()
|
58
|
+
console.log('watching...')
|
59
|
+
|
60
|
+
// when new component css files are added, they do not trigger a build as no one directly imports them
|
61
|
+
// restart the watch mode with the new entry points if a css file is added.
|
62
|
+
const watcher = chokidar.watch(inputFilesGlob);
|
63
|
+
watcher.on("ready", () => {
|
64
|
+
ready = true; // Initial scan is over -> waiting for new files
|
65
|
+
});
|
66
|
+
watcher.on("add", async path => {
|
67
|
+
if (ready) {
|
68
|
+
// new file
|
69
|
+
ctx.dispose();
|
70
|
+
config = await getConfig();
|
71
|
+
ctx = await esbuild.context(config);
|
72
|
+
ctx.watch();
|
73
|
+
}
|
74
|
+
});
|
75
|
+
} else {
|
76
|
+
const config = await getConfig();
|
77
|
+
const result = await esbuild.build(config);
|
78
|
+
}
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import { globby } from "globby";
|
2
|
+
import * as esbuild from 'esbuild'
|
3
|
+
import * as fs from "fs";
|
4
|
+
import * as path from "path";
|
5
|
+
import { writeFile, mkdir } from "fs/promises";
|
6
|
+
import postcss from "postcss";
|
7
|
+
import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
|
8
|
+
import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
|
9
|
+
import scopeVariables from "./scope-variables.mjs";
|
10
|
+
|
11
|
+
const tsMode = process.env.UI5_TS === "true";
|
12
|
+
const extension = tsMode ? ".css.ts" : ".css.js";
|
13
|
+
|
14
|
+
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
15
|
+
|
16
|
+
let inputFiles = await globby("src/**/parameters-bundle.css");
|
17
|
+
const restArgs = process.argv.slice(2);
|
18
|
+
|
19
|
+
const removeDuplicateSelectors = async (text) => {
|
20
|
+
const result = await postcss(combineDuplicatedSelectors).process(text);
|
21
|
+
return result.css;
|
22
|
+
}
|
23
|
+
|
24
|
+
let scopingPlugin = {
|
25
|
+
name: 'scoping',
|
26
|
+
setup(build) {
|
27
|
+
build.initialOptions.write = false;
|
28
|
+
|
29
|
+
build.onEnd(result => {
|
30
|
+
result.outputFiles.forEach(async f => {
|
31
|
+
// remove duplicate selectors
|
32
|
+
let newText = await removeDuplicateSelectors(f.text);
|
33
|
+
|
34
|
+
// strip unnecessary theming-base-content
|
35
|
+
newText = stripThemingBaseContent(newText);
|
36
|
+
|
37
|
+
// scoping
|
38
|
+
newText = scopeVariables(newText, packageJSON, f.path);
|
39
|
+
await mkdir(path.dirname(f.path), {recursive: true});
|
40
|
+
writeFile(f.path, newText);
|
41
|
+
|
42
|
+
// JSON
|
43
|
+
const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
|
44
|
+
await mkdir(path.dirname(jsonPath), {recursive: true});
|
45
|
+
writeFileIfChanged(jsonPath, JSON.stringify(newText));
|
46
|
+
|
47
|
+
// JS/TS
|
48
|
+
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
49
|
+
const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
|
50
|
+
writeFileIfChanged(jsPath, jsContent);
|
51
|
+
});
|
52
|
+
})
|
53
|
+
},
|
54
|
+
}
|
55
|
+
|
56
|
+
const config = {
|
57
|
+
entryPoints: inputFiles,
|
58
|
+
bundle: true,
|
59
|
+
minify: true,
|
60
|
+
outdir: 'dist/css',
|
61
|
+
outbase: 'src',
|
62
|
+
plugins: [
|
63
|
+
scopingPlugin,
|
64
|
+
],
|
65
|
+
external: ["*.ttf", "*.woff", "*.woff2"],
|
66
|
+
};
|
67
|
+
|
68
|
+
if (restArgs.includes("-w")) {
|
69
|
+
let ctx = await esbuild.context(config);
|
70
|
+
await ctx.watch()
|
71
|
+
console.log('watching...')
|
72
|
+
} else {
|
73
|
+
const result = await esbuild.build(config);
|
74
|
+
}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import * as path from "path";
|
2
|
+
import { createRequire } from 'node:module';
|
3
|
+
|
4
|
+
const require = createRequire(import.meta.url);
|
5
|
+
|
6
|
+
/**
|
7
|
+
* Tries to detect an override for a package
|
8
|
+
* @param {*} filePath For example: /my_project/src/themes/overrides/@ui5/webcomponents/my_custom_theme/parameters-bundle.css
|
9
|
+
* @returns
|
10
|
+
*/
|
11
|
+
const getOverrideVersion = filePath => {
|
12
|
+
if (!filePath) {
|
13
|
+
return;
|
14
|
+
}
|
15
|
+
|
16
|
+
if (!filePath.includes(`overrides${path.sep}`)) {
|
17
|
+
return; // The "overrides/" directory is the marker
|
18
|
+
}
|
19
|
+
const override = filePath.split(`overrides${path.sep}`)[1]; // For example, this will be: @ui5/webcomponents/my_custom_theme/parameters-bundle.css
|
20
|
+
if (!override) {
|
21
|
+
return; // There must be other directories after overrides/, the path can't end with it
|
22
|
+
}
|
23
|
+
const parts = override.split(path.sep);
|
24
|
+
if (parts.length < 3) {
|
25
|
+
return; // There must be at least a directory for the theme that is being overridden (my_custom_theme) and the name of the CSS file after the name of the package that is overridden
|
26
|
+
}
|
27
|
+
const packageName = parts.slice(0, -2).join(path.sep); // After the last 2 parts are removed (my_custom_theme and parameters-bundle.css from the example), the rest is the package
|
28
|
+
|
29
|
+
let overrideVersion;
|
30
|
+
try {
|
31
|
+
overrideVersion = require(`${packageName}${path.sep}package.json`).version;
|
32
|
+
} catch (e) {
|
33
|
+
console.log(`Error requiring package ${packageName}: ${e.message}`);
|
34
|
+
}
|
35
|
+
|
36
|
+
return overrideVersion;
|
37
|
+
}
|
38
|
+
|
39
|
+
const scopeVariables = (cssText, packageJSON, inputFile) => {
|
40
|
+
const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
|
41
|
+
const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
|
42
|
+
|
43
|
+
const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
|
44
|
+
|
45
|
+
return cssText.replaceAll(expr, `$1-${versionStr}$2`);
|
46
|
+
}
|
47
|
+
|
48
|
+
export default scopeVariables;
|
49
|
+
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { writeFile, readFile, mkdir } from "fs/promises";
|
2
|
+
import * as path from "path";
|
3
|
+
import assets from "../../assets-meta.js";
|
4
|
+
|
5
|
+
const readOldContent = async (fileName) => {
|
6
|
+
// it seems slower to read the old content, but writing the same content with no real changes
|
7
|
+
// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
|
8
|
+
let oldContent = "";
|
9
|
+
try {
|
10
|
+
oldContent = (await readFile(fileName)).toString();
|
11
|
+
} catch (e) {
|
12
|
+
// file not found
|
13
|
+
}
|
14
|
+
return oldContent;
|
15
|
+
}
|
16
|
+
|
17
|
+
const writeFileIfChanged = async (fileName, content) => {
|
18
|
+
const oldContent = await readOldContent(fileName);
|
19
|
+
if (content !== oldContent) {
|
20
|
+
if (!oldContent) {
|
21
|
+
await mkdir(path.dirname(fileName), {recursive: true});
|
22
|
+
}
|
23
|
+
return writeFile(fileName, content);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
// strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters
|
28
|
+
const stripThemingBaseContent = css => {
|
29
|
+
css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
|
30
|
+
css = css.replace(/\.background-image.*{.*}/, "");
|
31
|
+
css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
|
32
|
+
css = css.replace(/--sapFontUrl.*\);?/, "");
|
33
|
+
return css;
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
const DEFAULT_THEME = assets.themes.default;
|
38
|
+
|
39
|
+
const getDefaultThemeCode = packageName => {
|
40
|
+
return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
41
|
+
|
42
|
+
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
|
43
|
+
import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
|
44
|
+
|
45
|
+
registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
|
46
|
+
registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
|
47
|
+
`;
|
48
|
+
};
|
49
|
+
|
50
|
+
const getFileContent = (packageName, css, includeDefaultTheme) => {
|
51
|
+
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
|
52
|
+
return `${defaultTheme}export default ${css.trim()}`
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
export { writeFileIfChanged, stripThemingBaseContent, getFileContent}
|
@@ -3,15 +3,15 @@ const fs = require("fs");
|
|
3
3
|
/**
|
4
4
|
* A change is observed on MacOS since 13.5, where the build generates a large amount
|
5
5
|
* of JSON file that spotlight search has to index, as they are considered new files.
|
6
|
-
*
|
6
|
+
*
|
7
7
|
* Starting the vitejs dev server reads all of these files and this triggers the indexing.
|
8
8
|
* The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
|
9
9
|
* This metadata change is changing the ctime of the file, but not the mtime. This can be checked with `stat -x <path_to_file>
|
10
|
-
*
|
10
|
+
*
|
11
11
|
* Essentially only metadata is changed, not content. This should not cause a page refresh,
|
12
12
|
* but chokidar reports this change and vite refreshes the page.
|
13
13
|
* The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
|
14
|
-
*
|
14
|
+
*
|
15
15
|
* This plugin checks if the file causing the refresh is a generated json file (dist/*.json) and if ctime is changed after mtime
|
16
16
|
* In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
|
17
17
|
* which is in effect ignoring the page refresh.
|
@@ -22,7 +22,7 @@ const customHotUpdate = async () => {
|
|
22
22
|
name: 'custom-hot-update',
|
23
23
|
handleHotUpdate(ctx) {
|
24
24
|
// custom check for generated json files
|
25
|
-
if (ctx.file.
|
25
|
+
if (ctx.file.endsWith(".json")) {
|
26
26
|
const stat = fs.statSync(ctx.file);
|
27
27
|
|
28
28
|
// metadata change only
|
@@ -1,7 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
import fs from "fs/promises";
|
2
|
+
import { createServer } from 'vite';
|
3
|
+
import yargs from 'yargs';
|
4
|
+
import { hideBin } from 'yargs/helpers';
|
5
5
|
|
6
6
|
const argv = yargs(hideBin(process.argv))
|
7
7
|
.alias("c", "config")
|
@@ -1,23 +1,17 @@
|
|
1
|
-
const virtualIndexPlugin =
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
|
9
|
-
folder.push(path.basename(file));
|
10
|
-
});
|
1
|
+
const virtualIndexPlugin = () => {
|
2
|
+
return {
|
3
|
+
name: 'virtual-index-html',
|
4
|
+
async config() {
|
5
|
+
const path = (await import("path")).default;
|
6
|
+
const globby = (await import("globby")).globby;
|
7
|
+
const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
|
11
8
|
|
12
|
-
|
9
|
+
const rollupInput = {};
|
13
10
|
|
14
|
-
|
15
|
-
|
16
|
-
|
11
|
+
files.forEach(file => {
|
12
|
+
rollupInput[file] = path.resolve(process.cwd(), file);
|
13
|
+
});
|
17
14
|
|
18
|
-
return {
|
19
|
-
name: 'virtual-index-html',
|
20
|
-
config() {
|
21
15
|
return {
|
22
16
|
build: {
|
23
17
|
rollupOptions: {
|
@@ -26,7 +20,17 @@ const virtualIndexPlugin = async () => {
|
|
26
20
|
}
|
27
21
|
}
|
28
22
|
},
|
29
|
-
configureServer(server) {
|
23
|
+
async configureServer(server) {
|
24
|
+
const path = (await import("path")).default;
|
25
|
+
const globby = (await import("globby")).globby;
|
26
|
+
const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
|
27
|
+
|
28
|
+
const pagesPerFolder = {};
|
29
|
+
files.forEach(file => {
|
30
|
+
let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
|
31
|
+
folder.push(path.basename(file));
|
32
|
+
});
|
33
|
+
|
30
34
|
server.middlewares.use((req, res, next) => {
|
31
35
|
if (req.url === "/") {
|
32
36
|
const folders = Object.keys(pagesPerFolder);
|
@@ -37,8 +41,8 @@ const virtualIndexPlugin = async () => {
|
|
37
41
|
const pages = pagesPerFolder[folder];
|
38
42
|
return `<h1>${folder}</h1>
|
39
43
|
${pages.map(page => {
|
40
|
-
|
41
|
-
|
44
|
+
return `<li><a href='${folder}/${page}'>${page}</a></li>`
|
45
|
+
}).join("")}
|
42
46
|
`
|
43
47
|
}).join("")}`);
|
44
48
|
} else {
|
@@ -1,12 +1,14 @@
|
|
1
1
|
const fs = require("fs").promises;
|
2
2
|
const path = require("path");
|
3
3
|
|
4
|
-
const generateDynamicImportLines = (fileNames, location, exclusionPatterns = []) => {
|
4
|
+
const generateDynamicImportLines = async (fileNames, location, exclusionPatterns = []) => {
|
5
|
+
const packageName = JSON.parse(await fs.readFile("package.json")).name;
|
5
6
|
return fileNames
|
6
7
|
.filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
|
7
8
|
.map((fileName) => {
|
8
|
-
const
|
9
|
-
|
9
|
+
const illustrationName = fileName.replace(".js", "");
|
10
|
+
const illustrationPath = `${location}/${illustrationName}`;
|
11
|
+
return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
|
10
12
|
})
|
11
13
|
.join("\n");
|
12
14
|
};
|
@@ -19,11 +21,12 @@ const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = [])
|
|
19
21
|
);
|
20
22
|
};
|
21
23
|
|
22
|
-
const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, prefix = "") => {
|
23
|
-
return
|
24
|
+
const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, set, prefix = "") => {
|
25
|
+
return `// @ts-nocheck
|
26
|
+
import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
|
24
27
|
|
25
28
|
export const loadIllustration = async (illustrationName) => {
|
26
|
-
const collectionAndPrefix = "${collection}/${prefix}";
|
29
|
+
const collectionAndPrefix = "${set}/${collection}/${prefix}";
|
27
30
|
const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
|
28
31
|
switch (cleanIllustrationName) {
|
29
32
|
${dynamicImports}
|
@@ -38,7 +41,7 @@ const loadAndCheck = async (illustrationName) => {
|
|
38
41
|
};
|
39
42
|
|
40
43
|
${availableIllustrations}.forEach((illustrationName) =>
|
41
|
-
registerIllustrationLoader(\`${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
|
44
|
+
registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
|
42
45
|
);
|
43
46
|
`;
|
44
47
|
};
|
@@ -49,17 +52,17 @@ const getMatchingFiles = async (folder, pattern) => {
|
|
49
52
|
};
|
50
53
|
|
51
54
|
const generateIllustrations = async (config) => {
|
52
|
-
const { inputFolder, outputFile, collection, location, prefix, filterOut } = config;
|
55
|
+
const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
|
53
56
|
|
54
57
|
const normalizedInputFolder = path.normalize(inputFolder);
|
55
58
|
const normalizedOutputFile = path.normalize(outputFile);
|
56
59
|
|
57
60
|
const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
|
58
61
|
|
59
|
-
const dynamicImports = generateDynamicImportLines(illustrations, location, filterOut);
|
62
|
+
const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
|
60
63
|
const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
|
61
64
|
|
62
|
-
const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, prefix);
|
65
|
+
const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, set, prefix);
|
63
66
|
|
64
67
|
await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
|
65
68
|
await fs.writeFile(normalizedOutputFile, contentDynamic);
|
@@ -71,10 +74,10 @@ const generateIllustrations = async (config) => {
|
|
71
74
|
const config = {
|
72
75
|
inputFolder: process.argv[2],
|
73
76
|
outputFile: process.argv[3],
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
filterOut: process.argv.slice
|
77
|
+
set: process.argv[4],
|
78
|
+
collection: process.argv[5],
|
79
|
+
location: process.argv[6],
|
80
|
+
filterOut: process.argv.slice[7],
|
78
81
|
};
|
79
82
|
|
80
83
|
// Run the generation process
|