@ui5/webcomponents-tools 0.0.0-f651a470c → 0.0.0-f6676abdd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1346 -0
- package/README.md +3 -5
- package/assets-meta.js +11 -10
- package/components-package/cypress/support/commands.js +66 -0
- package/components-package/cypress/support/component-index.html +17 -0
- package/components-package/cypress/support/component.d.ts +22 -0
- package/components-package/cypress/support/component.js +46 -0
- package/components-package/cypress/support/cypress-ct-preact.js +11 -0
- package/components-package/cypress.config.js +33 -0
- package/components-package/eslint.js +94 -28
- package/components-package/nps.js +58 -47
- package/components-package/postcss.components.js +1 -21
- package/components-package/postcss.themes.js +1 -26
- package/components-package/vite.config.js +7 -11
- package/components-package/wdio.js +415 -393
- package/icons-collection/nps.js +9 -7
- 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 +544 -0
- package/lib/cem/event.mjs +168 -0
- package/lib/cem/schema-internal.json +1413 -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 +70 -0
- package/lib/create-icons/index.js +8 -6
- package/lib/create-illustrations/index.js +51 -30
- package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +15 -25
- package/lib/create-new-component/ComponentTemplate.js +12 -0
- package/lib/create-new-component/index.js +35 -73
- package/lib/css-processors/css-processor-components.mjs +77 -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 +39 -0
- 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 +78 -64
- package/lib/generate-json-imports/i18n.js +45 -61
- package/lib/generate-json-imports/themes.js +16 -33
- package/lib/hbs2lit/src/compiler.js +9 -6
- package/lib/hbs2lit/src/litVisitor2.js +42 -17
- package/lib/hbs2lit/src/svgProcessor.js +12 -5
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +39 -6
- package/lib/hbs2ui5/index.js +23 -6
- 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/lib/test-runner/test-runner.js +2 -2
- package/package.json +25 -13
- package/tsconfig.json +18 -0
- package/types/index.d.ts +1 -0
- package/components-package/wdio.sync.js +0 -360
- package/lib/create-new-component/jsFileContentTemplate.js +0 -77
- 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/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,57 +22,47 @@ 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 })
|
71
65
|
text!: Array<Node>;
|
72
|
-
|
73
|
-
static async onDefine() {
|
74
|
-
|
75
|
-
}
|
76
66
|
}
|
77
67
|
|
78
68
|
${componentName}.define();
|
@@ -81,4 +71,4 @@ export default ${componentName};
|
|
81
71
|
`;
|
82
72
|
};
|
83
73
|
|
84
|
-
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,7 +1,29 @@
|
|
1
1
|
const fs = require("fs");
|
2
2
|
const prompts = require("prompts");
|
3
|
-
const
|
4
|
-
const
|
3
|
+
const Component = require("./Component.js");
|
4
|
+
const ComponentTemplate= require("./ComponentTemplate.js");
|
5
|
+
|
6
|
+
/**
|
7
|
+
* Hyphanates the given PascalCase string, f.e.:
|
8
|
+
* Foo -> "my-foo" (adds preffix)
|
9
|
+
* FooBar -> "foo-bar"
|
10
|
+
*/
|
11
|
+
const hyphaneteComponentName = (componentName) => {
|
12
|
+
const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
|
13
|
+
|
14
|
+
return result.includes("-") ? result : `my-${result}`;
|
15
|
+
};
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Capitalizes first letter of string.
|
19
|
+
*/
|
20
|
+
const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Validates component name, enforcing PascalCase pattern - Button, MyButton.
|
24
|
+
*/
|
25
|
+
const PascalCasePattern = /^[A-Z][A-Za-z0-9]+$/;
|
26
|
+
const isNameValid = name => typeof name === "string" && PascalCasePattern.test(name);
|
5
27
|
|
6
28
|
const getPackageName = () => {
|
7
29
|
if (!fs.existsSync("./package.json")) {
|
@@ -35,30 +57,17 @@ const getLibraryName = packageName => {
|
|
35
57
|
return packageName.substr("webcomponents-".length);
|
36
58
|
};
|
37
59
|
|
38
|
-
|
39
|
-
const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
|
40
|
-
|
41
|
-
// Validation of user input
|
42
|
-
const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9_-]*$/);
|
43
|
-
const isTagNameValid = tagName => tagName.match(/^([a-z][a-z0-9]*-)([a-z0-9]+(-[a-z0-9]+)*)$/);
|
44
|
-
|
45
|
-
const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
|
60
|
+
const generateFiles = (componentName, tagName, library, packageName) => {
|
46
61
|
componentName = capitalizeFirstLetter(componentName);
|
47
62
|
const filePaths = {
|
48
|
-
"main":
|
49
|
-
? `./src/${componentName}.ts`
|
50
|
-
: `./src/${componentName}.js`,
|
63
|
+
"main": `./src/${componentName}.ts`,
|
51
64
|
"css": `./src/themes/${componentName}.css`,
|
52
|
-
"template": `./src/${componentName}.
|
65
|
+
"template": `./src/${componentName}Template.tsx`,
|
53
66
|
};
|
54
67
|
|
55
|
-
|
56
|
-
? tsFileContentTemplate(componentName, tagName, library, packageName)
|
57
|
-
: jsFileContentTemplate(componentName, tagName, library, packageName);
|
58
|
-
|
59
|
-
fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
|
68
|
+
fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
|
60
69
|
fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
|
61
|
-
fs.writeFileSync(filePaths.template,
|
70
|
+
fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
|
62
71
|
|
63
72
|
console.log(`Successfully generated ${filePaths.main}`);
|
64
73
|
console.log(`Successfully generated ${filePaths.css}`);
|
@@ -66,8 +75,8 @@ const generateFiles = (componentName, tagName, library, packageName, isTypeScrip
|
|
66
75
|
|
67
76
|
// Change the color of the output
|
68
77
|
console.warn('\x1b[33m%s\x1b[0m', `
|
69
|
-
|
70
|
-
|
78
|
+
Now, import the component via: "import ${componentName} from ./${componentName}.js";
|
79
|
+
And, add it to your HTML: <${tagName}></${tagName}>.`);
|
71
80
|
}
|
72
81
|
|
73
82
|
// Main function
|
@@ -77,21 +86,9 @@ const createWebComponent = async () => {
|
|
77
86
|
|
78
87
|
const consoleArguments = process.argv.slice(2);
|
79
88
|
let componentName = consoleArguments[0];
|
80
|
-
let tagName = consoleArguments[1];
|
81
|
-
let language = consoleArguments[2];
|
82
|
-
let isTypeScript;
|
83
|
-
|
84
89
|
|
85
90
|
if (componentName && !isNameValid(componentName)) {
|
86
|
-
throw new Error(
|
87
|
-
}
|
88
|
-
|
89
|
-
if (tagName && !isTagNameValid(tagName)) {
|
90
|
-
throw new Error("Invalid tag name. The tag name should only contain lowercase letters, numbers, dashes, and underscores. The first character must be a letter, and it should follow the pattern 'tag-name'.");
|
91
|
-
}
|
92
|
-
|
93
|
-
if (language && language !== "typescript" && language !== "ts" && language !== "javascript" && language !== "js") {
|
94
|
-
throw new Error("Invalid language. Please use 'typescript','javascript' or their respective 'ts','js'.");
|
91
|
+
throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one: Button, MyButton, etc.`);
|
95
92
|
}
|
96
93
|
|
97
94
|
if (!componentName) {
|
@@ -99,7 +96,7 @@ const createWebComponent = async () => {
|
|
99
96
|
type: "text",
|
100
97
|
name: "componentName",
|
101
98
|
message: "Please enter a component name:",
|
102
|
-
validate: (value) => isNameValid(value),
|
99
|
+
validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
|
103
100
|
});
|
104
101
|
componentName = response.componentName;
|
105
102
|
|
@@ -108,44 +105,9 @@ const createWebComponent = async () => {
|
|
108
105
|
}
|
109
106
|
}
|
110
107
|
|
111
|
-
|
112
|
-
const response = await prompts({
|
113
|
-
type: "text",
|
114
|
-
name: "tagName",
|
115
|
-
message: "Please enter a tag name:",
|
116
|
-
validate: (value) => isTagNameValid(value),
|
117
|
-
});
|
118
|
-
tagName = response.tagName;
|
119
|
-
|
120
|
-
if (!tagName) {
|
121
|
-
process.exit();
|
122
|
-
}
|
123
|
-
}
|
124
|
-
|
125
|
-
if (!language) {
|
126
|
-
const response = await prompts({
|
127
|
-
type: "select",
|
128
|
-
name: "isTypeScript",
|
129
|
-
message: "Please select a language:",
|
130
|
-
choices: [
|
131
|
-
{
|
132
|
-
title: "TypeScript (recommended)",
|
133
|
-
value: true,
|
134
|
-
},
|
135
|
-
{
|
136
|
-
title: "JavaScript",
|
137
|
-
value: false,
|
138
|
-
},
|
139
|
-
],
|
140
|
-
});
|
141
|
-
isTypeScript = response.isTypeScript;
|
142
|
-
} else if (language === "typescript" || language === "ts") {
|
143
|
-
isTypeScript = true;
|
144
|
-
} else {
|
145
|
-
isTypeScript = false;
|
146
|
-
}
|
108
|
+
const tagName = hyphaneteComponentName(componentName);
|
147
109
|
|
148
|
-
generateFiles(componentName, tagName, library, packageName
|
110
|
+
generateFiles(componentName, tagName, library, packageName);
|
149
111
|
};
|
150
112
|
|
151
113
|
createWebComponent();
|
@@ -0,0 +1,77 @@
|
|
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
|
+
const newText = scopeVariables(f.text, packageJSON);
|
26
|
+
await mkdir(path.dirname(f.path), {recursive: true});
|
27
|
+
writeFile(f.path, newText);
|
28
|
+
|
29
|
+
// JS/TS
|
30
|
+
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
31
|
+
const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
|
32
|
+
writeFileIfChanged(jsPath, jsContent);
|
33
|
+
});
|
34
|
+
})
|
35
|
+
},
|
36
|
+
}
|
37
|
+
|
38
|
+
const getConfig = async () => {
|
39
|
+
const config = {
|
40
|
+
entryPoints: await globby(inputFilesGlob),
|
41
|
+
bundle: true,
|
42
|
+
minify: true,
|
43
|
+
outdir: 'dist/css',
|
44
|
+
outbase: 'src',
|
45
|
+
plugins: [
|
46
|
+
customPlugin,
|
47
|
+
]
|
48
|
+
};
|
49
|
+
return config;
|
50
|
+
}
|
51
|
+
|
52
|
+
if (restArgs.includes("-w")) {
|
53
|
+
let ready;
|
54
|
+
let config = await getConfig();
|
55
|
+
let ctx = await esbuild.context(config);
|
56
|
+
await ctx.watch()
|
57
|
+
console.log('watching...')
|
58
|
+
|
59
|
+
// when new component css files are added, they do not trigger a build as no one directly imports them
|
60
|
+
// restart the watch mode with the new entry points if a css file is added.
|
61
|
+
const watcher = chokidar.watch(inputFilesGlob);
|
62
|
+
watcher.on("ready", () => {
|
63
|
+
ready = true; // Initial scan is over -> waiting for new files
|
64
|
+
});
|
65
|
+
watcher.on("add", async path => {
|
66
|
+
if (ready) {
|
67
|
+
// new file
|
68
|
+
ctx.dispose();
|
69
|
+
config = await getConfig();
|
70
|
+
ctx = await esbuild.context(config);
|
71
|
+
ctx.watch();
|
72
|
+
}
|
73
|
+
});
|
74
|
+
} else {
|
75
|
+
const config = await getConfig();
|
76
|
+
const result = await esbuild.build(config);
|
77
|
+
}
|
@@ -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}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
const fs = require("fs");
|
2
|
+
|
3
|
+
/**
|
4
|
+
* A change is observed on MacOS since 13.5, where the build generates a large amount
|
5
|
+
* of JSON file that spotlight search has to index, as they are considered new files.
|
6
|
+
*
|
7
|
+
* Starting the vitejs dev server reads all of these files and this triggers the indexing.
|
8
|
+
* The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
|
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
|
+
*
|
11
|
+
* Essentially only metadata is changed, not content. This should not cause a page refresh,
|
12
|
+
* but chokidar reports this change and vite refreshes the page.
|
13
|
+
* The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
|
14
|
+
*
|
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
|
+
* In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
|
17
|
+
* which is in effect ignoring the page refresh.
|
18
|
+
*/
|
19
|
+
|
20
|
+
const customHotUpdate = async () => {
|
21
|
+
return {
|
22
|
+
name: 'custom-hot-update',
|
23
|
+
handleHotUpdate(ctx) {
|
24
|
+
// custom check for generated json files
|
25
|
+
if (ctx.file.endsWith(".json")) {
|
26
|
+
const stat = fs.statSync(ctx.file);
|
27
|
+
|
28
|
+
// metadata change only
|
29
|
+
if (stat.ctime > stat.mtime) {
|
30
|
+
// uncomment for debugging
|
31
|
+
// console.log("ignoring hot update for:", ctx.file);
|
32
|
+
return [];
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
};
|
38
|
+
|
39
|
+
module.exports = customHotUpdate;
|
@@ -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 {
|