@ui5/webcomponents-tools 0.0.0-07d38e78e → 0.0.0-093de5dd1
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 +1030 -0
- package/LICENSE.txt +201 -0
- package/README.md +7 -10
- package/assets-meta.js +1 -5
- package/bin/dev.js +3 -2
- package/bin/ui5nps.js +274 -0
- package/components-package/eslint.js +59 -31
- package/components-package/nps.js +98 -75
- package/components-package/vite.config.js +7 -11
- package/components-package/wdio.js +12 -5
- package/icons-collection/nps.js +30 -21
- package/lib/amd-to-es6/index.js +15 -10
- package/lib/cem/cem.js +12 -0
- package/lib/cem/custom-elements-manifest.config.mjs +90 -45
- package/lib/cem/event.mjs +69 -32
- package/lib/cem/merge.mjs +220 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/cli.js +128 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/package.json +59 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/browser-entrypoint.js +23 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/create.js +117 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/arrow-function.js +26 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/class-jsdoc.js +157 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/classes.js +20 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createArrowFunction.js +17 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createAttribute.js +24 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createClass.js +301 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createClassField.js +26 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createFunctionLike.js +73 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createMixin.js +33 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/createVariable.js +22 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/handlers.js +338 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/custom-elements-define-calls.js +90 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/exports.js +156 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/function-like.js +24 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/mixins.js +29 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/reexported-wrapped-mixin-exports.js +84 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/variables.js +34 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/collect-phase/collect-imports.js +101 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/catalyst.js +11 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/controller.js +34 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/catalyst.js +11 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/controller.js +34 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/attr.js +53 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/custom-element-decorator.js +36 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/fast/fast.js +7 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js +13 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/member-denylist.js +21 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/method-denylist.js +20 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/property-decorator.js +94 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/static-properties.js +121 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/utils.js +66 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/stencil/stencil.js +129 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/index.js +80 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/cleanup-classes.js +25 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/field-denylist.js +22 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/method-denylist.js +25 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/apply-inheritance.js +78 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/is-custom-element.js +34 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/link-class-to-tagname.js +27 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/remove-unexported-declarations.js +23 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/resolve-initializers.js +52 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/ast-helpers.js +186 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/cli-helpers.js +164 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/exports.js +44 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/find-external-manifests.js +67 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/imports.js +25 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/index.js +71 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/jsdoc.js +19 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/manifest-helpers.js +194 -0
- package/lib/cem/patch/@custom-elements-manifest/analyzer/src/utils/mixins.js +112 -0
- package/lib/cem/schema-internal.json +65 -0
- package/lib/cem/types-internal.d.ts +14 -2
- package/lib/cem/utils.mjs +69 -30
- package/lib/cem/validate.js +61 -55
- package/lib/chokidar/chokidar.js +28 -0
- package/lib/copy-and-watch/index.js +105 -97
- package/lib/copy-list/index.js +16 -10
- package/lib/create-icons/index.js +24 -19
- package/lib/create-illustrations/index.js +49 -27
- package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +12 -9
- package/lib/create-new-component/ComponentTemplate.js +12 -0
- package/lib/create-new-component/index.js +13 -12
- package/lib/css-processors/css-processor-components.mjs +74 -59
- package/lib/css-processors/css-processor-themes.mjs +85 -62
- package/lib/css-processors/shared.mjs +5 -35
- package/lib/dev-server/{dev-server.js → dev-server.mjs} +26 -14
- package/lib/dev-server/virtual-index-html-plugin.js +24 -20
- package/lib/eslint/eslint.js +44 -0
- package/lib/generate-js-imports/illustrations.js +53 -54
- package/lib/generate-json-imports/i18n.js +56 -36
- package/lib/generate-json-imports/themes.js +27 -14
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +12 -7
- package/lib/hbs2ui5/index.js +3 -3
- package/lib/i18n/defaults.js +15 -9
- package/lib/i18n/toJSON.js +38 -12
- package/lib/icons-hash/icons-hash.mjs +149 -0
- package/lib/remove-dev-mode/remove-dev-mode.mjs +38 -24
- package/lib/rimraf/rimraf.js +31 -0
- package/lib/scoping/get-all-tags.js +9 -2
- package/lib/test-runner/test-runner.js +56 -48
- package/lib/vite-bundler/vite-bundler.mjs +35 -0
- package/package.json +22 -19
- package/tsconfig.json +18 -0
- package/lib/css-processors/css-processor-component-styles.mjs +0 -48
- package/lib/dev-server/ssr-dom-shim-loader.js +0 -26
|
@@ -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";
|
|
@@ -30,10 +30,9 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
|
|
|
30
30
|
*/
|
|
31
31
|
@customElement({
|
|
32
32
|
tag: "${tagName}",
|
|
33
|
-
renderer:
|
|
33
|
+
renderer: jsxRenderer,
|
|
34
34
|
styles: ${componentName}Css,
|
|
35
35
|
template: ${componentName}Template,
|
|
36
|
-
dependencies: [],
|
|
37
36
|
})
|
|
38
37
|
|
|
39
38
|
/**
|
|
@@ -42,8 +41,12 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
|
|
|
42
41
|
*
|
|
43
42
|
* @public
|
|
44
43
|
*/
|
|
45
|
-
@event("interact"
|
|
44
|
+
@event("interact")
|
|
46
45
|
class ${componentName} extends UI5Element {
|
|
46
|
+
eventDetails!: {
|
|
47
|
+
"interact": void,
|
|
48
|
+
};
|
|
49
|
+
|
|
47
50
|
/**
|
|
48
51
|
* Defines the value of the component.
|
|
49
52
|
*
|
|
@@ -51,7 +54,7 @@ class ${componentName} extends UI5Element {
|
|
|
51
54
|
* @public
|
|
52
55
|
*/
|
|
53
56
|
@property()
|
|
54
|
-
value
|
|
57
|
+
value?: string;
|
|
55
58
|
|
|
56
59
|
/**
|
|
57
60
|
* Defines the text of the component.
|
|
@@ -68,4 +71,4 @@ export default ${componentName};
|
|
|
68
71
|
`;
|
|
69
72
|
};
|
|
70
73
|
|
|
71
|
-
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,19 @@
|
|
|
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");
|
|
5
|
+
const dotenv = require('dotenv');
|
|
6
|
+
dotenv.config();
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
|
-
* Hyphanates the given PascalCase string, f.e.:
|
|
9
|
-
* Foo -> "my-foo"
|
|
10
|
-
* FooBar -> "foo-bar"
|
|
9
|
+
* Hyphanates the given PascalCase string and adds prefix, f.e.:
|
|
10
|
+
* Foo -> "my-foo"
|
|
11
|
+
* FooBar -> "my-foo-bar"
|
|
11
12
|
*/
|
|
12
13
|
const hyphaneteComponentName = (componentName) => {
|
|
13
14
|
const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
|
|
14
15
|
|
|
15
|
-
return
|
|
16
|
+
return `${process.env.UI5_TAG_NAME_PREFIX ?? "my"}-${result}`;
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
/**
|
|
@@ -63,12 +64,12 @@ const generateFiles = (componentName, tagName, library, packageName) => {
|
|
|
63
64
|
const filePaths = {
|
|
64
65
|
"main": `./src/${componentName}.ts`,
|
|
65
66
|
"css": `./src/themes/${componentName}.css`,
|
|
66
|
-
"template": `./src/${componentName}.
|
|
67
|
+
"template": `./src/${componentName}${process.env.UI5_TEMPLATE_FILENAME_SUFFIX ?? "Template"}.tsx`,
|
|
67
68
|
};
|
|
68
69
|
|
|
69
|
-
fs.writeFileSync(filePaths.main,
|
|
70
|
+
fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
|
|
70
71
|
fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
|
|
71
|
-
fs.writeFileSync(filePaths.template,
|
|
72
|
+
fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
|
|
72
73
|
|
|
73
74
|
console.log(`Successfully generated ${filePaths.main}`);
|
|
74
75
|
console.log(`Successfully generated ${filePaths.css}`);
|
|
@@ -76,8 +77,8 @@ const generateFiles = (componentName, tagName, library, packageName) => {
|
|
|
76
77
|
|
|
77
78
|
// Change the color of the output
|
|
78
79
|
console.warn('\x1b[33m%s\x1b[0m', `
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
Now, import the component in "src/bundle.esm.ts" via: import "./${componentName}.js";
|
|
81
|
+
And, add it to your HTML: <${tagName}></${tagName}>.`);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
84
|
// Main function
|
|
@@ -6,72 +6,87 @@ import { writeFile, mkdir } from "fs/promises";
|
|
|
6
6
|
import chokidar from "chokidar";
|
|
7
7
|
import scopeVariables from "./scope-variables.mjs";
|
|
8
8
|
import { writeFileIfChanged, getFileContent } from "./shared.mjs";
|
|
9
|
+
import { pathToFileURL } from "url";
|
|
9
10
|
|
|
10
|
-
const
|
|
11
|
-
const
|
|
11
|
+
const generate = async (argv) => {
|
|
12
|
+
const tsMode = process.env.UI5_TS === "true";
|
|
13
|
+
const extension = tsMode ? ".css.ts" : ".css.js";
|
|
12
14
|
|
|
13
|
-
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
|
14
|
-
const inputFilesGlob = "src/themes/*.css";
|
|
15
|
-
const restArgs =
|
|
15
|
+
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
|
16
|
+
const inputFilesGlob = "src/themes/*.css";
|
|
17
|
+
const restArgs = argv.slice(2);
|
|
16
18
|
|
|
17
|
-
let customPlugin = {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
let customPlugin = {
|
|
20
|
+
name: 'ui5-tools',
|
|
21
|
+
setup(build) {
|
|
22
|
+
build.initialOptions.write = false;
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
build.onEnd(result => {
|
|
25
|
+
result.outputFiles.forEach(async f => {
|
|
26
|
+
// scoping
|
|
27
|
+
let newText = scopeVariables(f.text, packageJSON);
|
|
28
|
+
newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
|
|
29
|
+
await mkdir(path.dirname(f.path), { recursive: true });
|
|
30
|
+
writeFile(f.path, newText);
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
32
|
+
// JS/TS
|
|
33
|
+
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
|
34
|
+
const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
|
|
35
|
+
writeFileIfChanged(jsPath, jsContent);
|
|
36
|
+
});
|
|
37
|
+
})
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const getConfig = async () => {
|
|
42
|
+
const config = {
|
|
43
|
+
entryPoints: await globby(inputFilesGlob),
|
|
44
|
+
bundle: true,
|
|
45
|
+
minify: true,
|
|
46
|
+
outdir: 'dist/css',
|
|
47
|
+
outbase: 'src',
|
|
48
|
+
plugins: [
|
|
49
|
+
customPlugin,
|
|
50
|
+
]
|
|
51
|
+
};
|
|
52
|
+
return config;
|
|
53
|
+
}
|
|
37
54
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
if (restArgs.includes("-w")) {
|
|
56
|
+
let ready;
|
|
57
|
+
let config = await getConfig();
|
|
58
|
+
let ctx = await esbuild.context(config);
|
|
59
|
+
await ctx.watch()
|
|
60
|
+
console.log('watching...')
|
|
61
|
+
|
|
62
|
+
// when new component css files are added, they do not trigger a build as no one directly imports them
|
|
63
|
+
// restart the watch mode with the new entry points if a css file is added.
|
|
64
|
+
const watcher = chokidar.watch(inputFilesGlob);
|
|
65
|
+
watcher.on("ready", () => {
|
|
66
|
+
ready = true; // Initial scan is over -> waiting for new files
|
|
67
|
+
});
|
|
68
|
+
watcher.on("add", async path => {
|
|
69
|
+
if (ready) {
|
|
70
|
+
// new file
|
|
71
|
+
ctx.dispose();
|
|
72
|
+
config = await getConfig();
|
|
73
|
+
ctx = await esbuild.context(config);
|
|
74
|
+
ctx.watch();
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
} else {
|
|
78
|
+
const config = await getConfig();
|
|
79
|
+
const result = await esbuild.build(config);
|
|
80
|
+
}
|
|
50
81
|
}
|
|
51
82
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
let config = await getConfig();
|
|
55
|
-
let ctx = await esbuild.context(config);
|
|
56
|
-
await ctx.watch()
|
|
57
|
-
console.log('watching...')
|
|
83
|
+
const filePath = process.argv[1];
|
|
84
|
+
const fileUrl = pathToFileURL(filePath).href;
|
|
58
85
|
|
|
59
|
-
|
|
60
|
-
|
|
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);
|
|
86
|
+
if (import.meta.url === fileUrl) {
|
|
87
|
+
generate(process.argv)
|
|
77
88
|
}
|
|
89
|
+
|
|
90
|
+
export default {
|
|
91
|
+
_ui5mainFn: generate
|
|
92
|
+
}
|
|
@@ -5,75 +5,98 @@ import * as path from "path";
|
|
|
5
5
|
import { writeFile, mkdir } from "fs/promises";
|
|
6
6
|
import postcss from "postcss";
|
|
7
7
|
import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
|
|
8
|
-
import { writeFileIfChanged,
|
|
8
|
+
import { writeFileIfChanged, getFileContent } from "./shared.mjs";
|
|
9
9
|
import scopeVariables from "./scope-variables.mjs";
|
|
10
|
+
import { pathToFileURL } from "url";
|
|
10
11
|
|
|
11
|
-
const
|
|
12
|
-
const
|
|
12
|
+
const generate = async (argv) => {
|
|
13
|
+
const tsMode = process.env.UI5_TS === "true";
|
|
14
|
+
const extension = tsMode ? ".css.ts" : ".css.js";
|
|
13
15
|
|
|
14
|
-
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
|
16
|
+
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
const inputFiles = await globby([
|
|
19
|
+
"src/**/parameters-bundle.css",
|
|
20
|
+
]);
|
|
21
|
+
const restArgs = argv.slice(2);
|
|
18
22
|
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
const processThemingPackageFile = async (f) => {
|
|
24
|
+
const selector = ':root';
|
|
25
|
+
const result = await postcss().process(f.text);
|
|
26
|
+
|
|
27
|
+
const newRule = postcss.rule({ selector });
|
|
23
28
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
const data = {
|
|
46
|
-
packageName: packageJSON.name,
|
|
47
|
-
fileName: jsonPath.substr(jsonPath.lastIndexOf("themes")),
|
|
48
|
-
content: newText,
|
|
49
|
-
};
|
|
50
|
-
writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
|
|
51
|
-
|
|
52
|
-
// JS/TS
|
|
53
|
-
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
|
54
|
-
const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
|
|
55
|
-
writeFileIfChanged(jsPath, jsContent);
|
|
29
|
+
result.root.walkRules(selector, rule => {
|
|
30
|
+
rule.walkDecls(decl => {
|
|
31
|
+
if (!decl.prop.startsWith('--sapFontUrl')) {
|
|
32
|
+
newRule.append(decl.clone());
|
|
33
|
+
}
|
|
56
34
|
});
|
|
57
|
-
})
|
|
58
|
-
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
return newRule.toString();
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const processComponentPackageFile = async (f) => {
|
|
41
|
+
const result = await postcss(combineDuplicatedSelectors).process(f.text);
|
|
42
|
+
|
|
43
|
+
return scopeVariables(result.css, packageJSON, f.path);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
let scopingPlugin = {
|
|
47
|
+
name: 'scoping',
|
|
48
|
+
setup(build) {
|
|
49
|
+
build.initialOptions.write = false;
|
|
50
|
+
|
|
51
|
+
build.onEnd(result => {
|
|
52
|
+
result.outputFiles.forEach(async f => {
|
|
53
|
+
let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
|
|
54
|
+
|
|
55
|
+
await mkdir(path.dirname(f.path), { recursive: true });
|
|
56
|
+
writeFile(f.path, newText);
|
|
57
|
+
|
|
58
|
+
// JSON
|
|
59
|
+
const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
|
|
60
|
+
await mkdir(path.dirname(jsonPath), { recursive: true });
|
|
61
|
+
writeFileIfChanged(jsonPath, JSON.stringify(newText));
|
|
62
|
+
|
|
63
|
+
// JS/TS
|
|
64
|
+
const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
|
|
65
|
+
const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
|
|
66
|
+
writeFileIfChanged(jsPath, jsContent);
|
|
67
|
+
});
|
|
68
|
+
})
|
|
69
|
+
},
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const config = {
|
|
73
|
+
entryPoints: inputFiles,
|
|
74
|
+
bundle: true,
|
|
75
|
+
minify: true,
|
|
76
|
+
outdir: 'dist/css',
|
|
77
|
+
outbase: 'src',
|
|
78
|
+
plugins: [
|
|
79
|
+
scopingPlugin,
|
|
80
|
+
],
|
|
81
|
+
external: ["*.ttf", "*.woff", "*.woff2"],
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
if (restArgs.includes("-w")) {
|
|
85
|
+
let ctx = await esbuild.context(config);
|
|
86
|
+
console.log('watching...')
|
|
87
|
+
await ctx.watch()
|
|
88
|
+
} else {
|
|
89
|
+
await esbuild.build(config);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const filePath = process.argv[1];
|
|
94
|
+
const fileUrl = pathToFileURL(filePath).href;
|
|
95
|
+
|
|
96
|
+
if (import.meta.url === fileUrl) {
|
|
97
|
+
generate(process.argv)
|
|
59
98
|
}
|
|
60
99
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
bundle: true,
|
|
64
|
-
minify: true,
|
|
65
|
-
outdir: 'dist/css',
|
|
66
|
-
outbase: 'src',
|
|
67
|
-
plugins: [
|
|
68
|
-
scopingPlugin,
|
|
69
|
-
],
|
|
70
|
-
external: ["*.ttf", "*.woff", "*.woff2"],
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
if (restArgs.includes("-w")) {
|
|
74
|
-
let ctx = await esbuild.context(config);
|
|
75
|
-
await ctx.watch()
|
|
76
|
-
console.log('watching...')
|
|
77
|
-
} else {
|
|
78
|
-
const result = await esbuild.build(config);
|
|
100
|
+
export default {
|
|
101
|
+
_ui5mainFn: generate
|
|
79
102
|
}
|
|
@@ -24,16 +24,6 @@ const writeFileIfChanged = async (fileName, content) => {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
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
27
|
const DEFAULT_THEME = assets.themes.default;
|
|
38
28
|
|
|
39
29
|
const getDefaultThemeCode = packageName => {
|
|
@@ -42,35 +32,15 @@ const getDefaultThemeCode = packageName => {
|
|
|
42
32
|
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
|
|
43
33
|
import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
|
|
44
34
|
|
|
45
|
-
registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
|
|
46
|
-
registerThemePropertiesLoader("${
|
|
35
|
+
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
|
|
36
|
+
registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme);
|
|
47
37
|
`;
|
|
48
38
|
};
|
|
49
39
|
|
|
50
|
-
const getFileContent = (
|
|
51
|
-
if (tsMode) {
|
|
52
|
-
return getTSContent(targetFile, packageName, css, includeDefaultTheme);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return getJSContent(targetFile, packageName, css, includeDefaultTheme);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
|
|
59
|
-
const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
|
|
40
|
+
const getFileContent = (packageName, css, includeDefaultTheme) => {
|
|
60
41
|
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
|
|
61
|
-
|
|
62
|
-
// tabs are intentionally mixed to have proper identation in the produced file
|
|
63
|
-
return `${typeImport}
|
|
64
|
-
${defaultTheme}
|
|
65
|
-
const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
|
|
66
|
-
export default styleData;
|
|
67
|
-
`;
|
|
42
|
+
return `${defaultTheme}export default ${css.trim()}`
|
|
68
43
|
}
|
|
69
44
|
|
|
70
|
-
const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
|
|
71
|
-
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
|
|
72
|
-
|
|
73
|
-
return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
|
|
74
|
-
}
|
|
75
45
|
|
|
76
|
-
export { writeFileIfChanged,
|
|
46
|
+
export { writeFileIfChanged, getFileContent}
|
|
@@ -1,15 +1,12 @@
|
|
|
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
|
+
import { pathToFileURL } from "url";
|
|
5
6
|
|
|
6
|
-
const
|
|
7
|
-
.alias("c", "config")
|
|
8
|
-
.argv;
|
|
9
|
-
|
|
10
|
-
const startVite = async (port) => {
|
|
7
|
+
const startVite = async (config, port) => {
|
|
11
8
|
const server = await createServer({
|
|
12
|
-
configFile:
|
|
9
|
+
configFile: config,
|
|
13
10
|
server: {
|
|
14
11
|
port: port,
|
|
15
12
|
strictPort: true,
|
|
@@ -28,7 +25,7 @@ const rmPortFile = async () => {
|
|
|
28
25
|
// exit handler must be sync
|
|
29
26
|
try {
|
|
30
27
|
await fs.rm(".dev-server-port");
|
|
31
|
-
} catch (e) {}
|
|
28
|
+
} catch (e) { }
|
|
32
29
|
process.exit();
|
|
33
30
|
}
|
|
34
31
|
|
|
@@ -36,7 +33,11 @@ const rmPortFile = async () => {
|
|
|
36
33
|
process.on(eventType, rmPortFile);
|
|
37
34
|
});
|
|
38
35
|
|
|
39
|
-
|
|
36
|
+
async function start(outArgv) {
|
|
37
|
+
const argv = yargs(hideBin(outArgv))
|
|
38
|
+
.alias("c", "config")
|
|
39
|
+
.argv;
|
|
40
|
+
|
|
40
41
|
let retries = 10;
|
|
41
42
|
let port = 8080;
|
|
42
43
|
while (retries--) {
|
|
@@ -44,7 +45,7 @@ const rmPortFile = async () => {
|
|
|
44
45
|
await fs.writeFile(".dev-server-port", `${port}`);
|
|
45
46
|
try {
|
|
46
47
|
// execSync(command, {stdio: 'pipe'});
|
|
47
|
-
const server = await startVite(port);
|
|
48
|
+
const server = await startVite(argv.config ?? "", port);
|
|
48
49
|
if (server) {
|
|
49
50
|
// server started, don't try other ports
|
|
50
51
|
break;
|
|
@@ -63,4 +64,15 @@ const rmPortFile = async () => {
|
|
|
63
64
|
// no error normal exit
|
|
64
65
|
// process.exit();
|
|
65
66
|
}
|
|
66
|
-
}
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const filePath = process.argv[1];
|
|
70
|
+
const fileUrl = pathToFileURL(filePath).href;
|
|
71
|
+
|
|
72
|
+
if (import.meta.url === fileUrl) {
|
|
73
|
+
start(process.argv)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default {
|
|
77
|
+
_ui5mainFn: start
|
|
78
|
+
}
|
|
@@ -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 {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
const fs = require("fs");
|
|
2
|
+
const { ESLint: ESLint7 } = require("eslint"); // isolated v7
|
|
3
|
+
const path = require("path");
|
|
4
|
+
|
|
5
|
+
const main = async argv => {
|
|
6
|
+
let eslintConfig;
|
|
7
|
+
if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
|
|
8
|
+
// preferred way of custom configuration in root project folder
|
|
9
|
+
eslintConfig = null;
|
|
10
|
+
} else {
|
|
11
|
+
// no custom configuration - use default from tools project
|
|
12
|
+
eslintConfig = require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const packageDir = path.dirname(require.resolve("@ui5/webcomponents-tools/package.json"));
|
|
16
|
+
const eslint = new ESLint7({
|
|
17
|
+
overrideConfigFile: eslintConfig,
|
|
18
|
+
fix: argv.includes("--fix"),
|
|
19
|
+
resolvePluginsRelativeTo: packageDir,
|
|
20
|
+
});
|
|
21
|
+
console.log("Running ESLint v7...");
|
|
22
|
+
|
|
23
|
+
// Lint files
|
|
24
|
+
const results = await eslint.lintFiles(["."]);
|
|
25
|
+
|
|
26
|
+
// Format results
|
|
27
|
+
const formatter = await eslint.loadFormatter("stylish");
|
|
28
|
+
const resultText = formatter.format(results);
|
|
29
|
+
|
|
30
|
+
// Output results
|
|
31
|
+
console.log(resultText);
|
|
32
|
+
|
|
33
|
+
// Exit with error code if there are errors
|
|
34
|
+
const hasErrors = results.some(result => result.errorCount > 0);
|
|
35
|
+
if (hasErrors) {
|
|
36
|
+
process.exit(1);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (require.main === module) {
|
|
41
|
+
main(process.argv)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
exports._ui5mainFn = main;
|