@ui5/webcomponents-tools 0.0.0-11d529e8a → 0.0.0-1e08ebdef
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 +24 -0
- package/README.md +1 -1
- package/assets-meta.js +2 -1
- package/components-package/nps.js +2 -4
- package/components-package/postcss.themes.js +5 -2
- package/components-package/rollup-plugins/empty-module.js +15 -0
- package/components-package/rollup.js +34 -5
- package/icons-collection/nps.js +40 -6
- package/lib/create-icons/index.js +20 -6
- package/lib/documentation/templates/template.js +1 -1
- package/lib/hbs2lit/src/litVisitor2.js +10 -2
- package/lib/postcss-css-to-esm/index.js +4 -4
- package/lib/postcss-css-to-json/index.js +7 -2
- package/package.json +8 -9
- package/bin/init-ui5-package.js +0 -3
- package/lib/init-package/index.js +0 -134
- package/lib/init-package/resources/.eslintignore +0 -3
- package/lib/init-package/resources/bundle.esm.js +0 -31
- package/lib/init-package/resources/config/.eslintrc.js +0 -1
- package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
- package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
- package/lib/init-package/resources/config/rollup.config.js +0 -1
- package/lib/init-package/resources/config/wdio.conf.js +0 -1
- package/lib/init-package/resources/package-scripts.js +0 -11
- package/lib/init-package/resources/src/Assets.js +0 -5
- package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
- package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
- package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
- package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
- package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
- package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
- package/lib/init-package/resources/test/pages/index.html +0 -54
- package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,30 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [1.0.1](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0...v1.0.1) (2021-11-10)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @ui5/webcomponents-tools
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
14
|
+
# [1.0.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.16...v1.0.0) (2021-11-10)
|
15
|
+
|
16
|
+
|
17
|
+
**Note:** Version bump only for package @ui5/webcomponents-tools
|
18
|
+
|
19
|
+
|
20
|
+
# [1.0.0-rc.16](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.15...v1.0.0-rc.16) (2021-11-09)
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
### Features
|
25
|
+
|
26
|
+
* **tools:** create an npm init script ([#4090](https://github.com/SAP/ui5-webcomponents/issues/4090)) ([5608e04](https://github.com/SAP/ui5-webcomponents/commit/5608e04))
|
27
|
+
|
28
|
+
|
29
|
+
|
6
30
|
# [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
|
7
31
|
|
8
32
|
|
package/README.md
CHANGED
@@ -17,7 +17,7 @@ used by other UI5 Web Components packages, such as `main` and `fiori`.
|
|
17
17
|
We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
|
18
18
|
|
19
19
|
## Contribute
|
20
|
-
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/
|
20
|
+
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
|
21
21
|
|
22
22
|
## License
|
23
23
|
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
|
package/assets-meta.js
CHANGED
@@ -10,7 +10,7 @@ const getScripts = (options) => {
|
|
10
10
|
|
11
11
|
const port = options.port || 8080; // preferred port
|
12
12
|
const portStep = options.portStep || 1; // step to check for available ports, if preferred port is already used
|
13
|
-
let illustrations = options.
|
13
|
+
let illustrations = options.illustrationsData || [];
|
14
14
|
|
15
15
|
illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
|
16
16
|
|
@@ -48,9 +48,7 @@ const getScripts = (options) => {
|
|
48
48
|
api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
|
49
49
|
docs: `node "${LIB}/documentation/index.js" dist/api.json`,
|
50
50
|
},
|
51
|
-
illustrations:
|
52
|
-
default: illustrationsScript
|
53
|
-
}
|
51
|
+
illustrations: illustrationsScript
|
54
52
|
},
|
55
53
|
copy: {
|
56
54
|
default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
|
@@ -3,6 +3,9 @@ const combineSelectors = require('postcss-combine-duplicated-selectors');
|
|
3
3
|
const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
|
4
4
|
const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
|
5
5
|
const cssnano = require('cssnano');
|
6
|
+
const fs = require("fs");
|
7
|
+
|
8
|
+
const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
|
6
9
|
|
7
10
|
module.exports = {
|
8
11
|
plugins: [
|
@@ -17,7 +20,7 @@ module.exports = {
|
|
17
20
|
},
|
18
21
|
]
|
19
22
|
},),
|
20
|
-
postcssCSStoJSON({toReplace: 'src'}),
|
21
|
-
postcssCSStoESM({toReplace: 'src'}),
|
23
|
+
postcssCSStoJSON({toReplace: 'src', packageName}),
|
24
|
+
postcssCSStoESM({toReplace: 'src', packageName}),
|
22
25
|
]
|
23
26
|
};
|
@@ -0,0 +1,15 @@
|
|
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;
|
@@ -6,18 +6,27 @@ const { nodeResolve } = require("@rollup/plugin-node-resolve");
|
|
6
6
|
const url = require("@rollup/plugin-url");
|
7
7
|
const { terser } = require("rollup-plugin-terser");
|
8
8
|
const json = require("@rollup/plugin-json");
|
9
|
+
const replace = require("@rollup/plugin-replace");
|
10
|
+
const commonjs = require("@rollup/plugin-commonjs");
|
9
11
|
const colors = require("colors/safe");
|
10
12
|
const filesize = require("rollup-plugin-filesize");
|
11
13
|
const livereload = require("rollup-plugin-livereload");
|
14
|
+
const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
|
12
15
|
|
13
16
|
const packageFile = JSON.parse(fs.readFileSync("./package.json"));
|
14
17
|
const packageName = packageFile.name;
|
15
18
|
const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
|
16
19
|
|
17
|
-
const warningsToSkip = [
|
18
|
-
|
19
|
-
|
20
|
-
|
20
|
+
const warningsToSkip = [
|
21
|
+
{
|
22
|
+
warningCode: "THIS_IS_UNDEFINED",
|
23
|
+
filePath: /.+zxing.+/,
|
24
|
+
},
|
25
|
+
{
|
26
|
+
warningCode: "THIS_IS_UNDEFINED",
|
27
|
+
filePath: /focus-visible.js/,
|
28
|
+
},
|
29
|
+
];
|
21
30
|
|
22
31
|
function ui5DevImportCheckerPlugin() {
|
23
32
|
return {
|
@@ -71,6 +80,25 @@ function ui5DevReadyMessagePlugin() {
|
|
71
80
|
|
72
81
|
const getPlugins = ({ transpile }) => {
|
73
82
|
const plugins = [];
|
83
|
+
|
84
|
+
if (process.env.DEV) {
|
85
|
+
plugins.push(replace({
|
86
|
+
values: {
|
87
|
+
'const DEV_MODE = false': 'const DEV_MODE = true',
|
88
|
+
},
|
89
|
+
preventAssignment: false,
|
90
|
+
}));
|
91
|
+
}
|
92
|
+
|
93
|
+
if (process.env.DEV && !process.env.ENABLE_CLDR) {
|
94
|
+
// Empty the CLDR assets file for better performance during development
|
95
|
+
plugins.push(emptyModulePlugin({
|
96
|
+
emptyModules: [
|
97
|
+
"localization/dist/Assets.js",
|
98
|
+
],
|
99
|
+
}));
|
100
|
+
}
|
101
|
+
|
74
102
|
if (!process.env.DEV) {
|
75
103
|
plugins.push(filesize(
|
76
104
|
{
|
@@ -116,10 +144,11 @@ const getPlugins = ({ transpile }) => {
|
|
116
144
|
}
|
117
145
|
|
118
146
|
if (transpile) {
|
147
|
+
plugins.push(commonjs());
|
119
148
|
plugins.push(babel({
|
120
149
|
presets: ["@babel/preset-env"],
|
121
150
|
exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
|
122
|
-
sourcemap:
|
151
|
+
sourcemap: false,
|
123
152
|
babelHelpers: "bundled",
|
124
153
|
}));
|
125
154
|
}
|
package/icons-collection/nps.js
CHANGED
@@ -7,15 +7,49 @@ const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date.
|
|
7
7
|
|
8
8
|
const LIB = path.join(__dirname, `../lib/`);
|
9
9
|
|
10
|
+
const createIconImportsCommand = (options) => {
|
11
|
+
if (!options.versions) {
|
12
|
+
return `node "${LIB}/create-icons/index.js" "${options.collectionName}"`;
|
13
|
+
}
|
14
|
+
|
15
|
+
const command = { default: "nps" };
|
16
|
+
options.versions.forEach((v) => {
|
17
|
+
command.default += ` build.icons.create${v}`;
|
18
|
+
command[`create${v}`] = `node "${LIB}/create-icons/index.js" "${options.collectionName}" "${v}"`;
|
19
|
+
});
|
20
|
+
|
21
|
+
return command;
|
22
|
+
}
|
23
|
+
|
24
|
+
const copyIconAssetsCommand = (options) => {
|
25
|
+
if (!options.versions) {
|
26
|
+
return {
|
27
|
+
default: "nps copy.json-imports copy.icon-collection",
|
28
|
+
"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
|
29
|
+
"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`,
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
const command = {
|
34
|
+
default: "nps copy.json-imports ",
|
35
|
+
"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
|
36
|
+
};
|
37
|
+
|
38
|
+
options.versions.forEach((v) => {
|
39
|
+
command.default += ` copy.icon-collection${v}`;
|
40
|
+
command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" dist/generated/assets/${v}/`;
|
41
|
+
});
|
42
|
+
|
43
|
+
return command;
|
44
|
+
}
|
45
|
+
|
10
46
|
const getScripts = (options) => {
|
47
|
+
const createJSImportsCmd = createIconImportsCommand(options);
|
48
|
+
const copyAssetsCmd = copyIconAssetsCommand(options);
|
11
49
|
|
12
50
|
const scripts = {
|
13
51
|
clean: "rimraf dist",
|
14
|
-
copy:
|
15
|
-
default: "nps copy.json-imports copy.icon-collection",
|
16
|
-
"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
|
17
|
-
"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`
|
18
|
-
},
|
52
|
+
copy: copyAssetsCmd,
|
19
53
|
build: {
|
20
54
|
default: `${UP_TO_DATE} || nps clean copy build.i18n build.icons build.jsonImports hash`,
|
21
55
|
i18n: {
|
@@ -27,7 +61,7 @@ const getScripts = (options) => {
|
|
27
61
|
default: "mkdirp dist/generated/json-imports && nps build.jsonImports.i18n",
|
28
62
|
i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
|
29
63
|
},
|
30
|
-
icons:
|
64
|
+
icons: createJSImportsCmd,
|
31
65
|
},
|
32
66
|
hash: `node "${generateHash}" dist/ hash.txt`,
|
33
67
|
};
|
@@ -3,12 +3,13 @@ const path = require("path");
|
|
3
3
|
const mkdirp = require("mkdirp");
|
4
4
|
|
5
5
|
const collectionName = process.argv[2] || "SAP-icons";
|
6
|
-
const
|
7
|
-
const
|
6
|
+
const collectionVersion = process.argv[3];
|
7
|
+
const srcFile = collectionVersion ? path.normalize(`src/${collectionVersion}/${collectionName}.json`) : path.normalize(`src/${collectionName}.json`);
|
8
|
+
const destDir = collectionVersion ? path.normalize(`dist/${collectionVersion}/`) : path.normalize("dist/");
|
8
9
|
|
9
10
|
mkdirp.sync(destDir);
|
10
11
|
|
11
|
-
const
|
12
|
+
const iconTemplate = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
|
12
13
|
|
13
14
|
const name = "${name}";
|
14
15
|
const pathData = "${pathData}";
|
@@ -21,8 +22,8 @@ registerIcon(name, { pathData, ltr, collection, packageName });
|
|
21
22
|
export default { pathData };`;
|
22
23
|
|
23
24
|
|
24
|
-
const
|
25
|
-
import { ${accData.key} } from "
|
25
|
+
const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
|
26
|
+
import { ${accData.key} } from "../generated/i18n/i18n-defaults.js";
|
26
27
|
|
27
28
|
const name = "${name}";
|
28
29
|
const pathData = "${pathData}";
|
@@ -35,6 +36,15 @@ registerIcon(name, { pathData, ltr, accData, collection, packageName });
|
|
35
36
|
|
36
37
|
export default { pathData, accData };`;
|
37
38
|
|
39
|
+
|
40
|
+
|
41
|
+
const collectionTemplate = (name) => `import { isTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
|
42
|
+
import pathDataV4 from "./v5/${name}.js";
|
43
|
+
import pathDataV5 from "./v4/${name}.js";
|
44
|
+
const pathData = isTheme("sap_horizon") ? pathDataV5 : pathDataV4;
|
45
|
+
export default { pathData };`;
|
46
|
+
|
47
|
+
|
38
48
|
const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
39
49
|
<path d="${pathData}"/>
|
40
50
|
</svg>`;
|
@@ -48,10 +58,14 @@ const createIcons = (file) => {
|
|
48
58
|
const ltr = !!iconData.ltr;
|
49
59
|
const acc = iconData.acc;
|
50
60
|
|
51
|
-
const content = acc ?
|
61
|
+
const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.packageName);
|
52
62
|
|
53
63
|
fs.writeFileSync(path.join(destDir, `${name}.js`), content);
|
54
64
|
fs.writeFileSync(path.join(destDir, `${name}.svg`), svgTemplate(pathData));
|
65
|
+
|
66
|
+
if (json.version) {
|
67
|
+
fs.writeFileSync(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name));
|
68
|
+
}
|
55
69
|
}
|
56
70
|
};
|
57
71
|
|
@@ -33,6 +33,6 @@ module.exports = {
|
|
33
33
|
<a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
|
34
34
|
<a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
|
35
35
|
</div>
|
36
|
-
<img src="
|
36
|
+
<img src="../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
|
37
37
|
</footer>`
|
38
38
|
};
|
@@ -8,6 +8,9 @@ let skipIfDefined = false;
|
|
8
8
|
// when true => an HTML node value, when false => an attribute value
|
9
9
|
let isNodeValue = false;
|
10
10
|
|
11
|
+
// when true => the current attribute is "style"
|
12
|
+
let isStyleAttribute = false;
|
13
|
+
|
11
14
|
// matches event handlers @click= and boolean attrs ?disabled=
|
12
15
|
const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
|
13
16
|
|
@@ -77,6 +80,12 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
|
|
77
80
|
isNodeValue = closingIndex > openingIndex;
|
78
81
|
}
|
79
82
|
|
83
|
+
isStyleAttribute = !isNodeValue && contentStatement.match(/style *= *["']? *$/);
|
84
|
+
|
85
|
+
if (!isStyleAttribute && contentStatement.match(/style=/)) {
|
86
|
+
console.log("WARNING: style hard-coded", contentStatement);
|
87
|
+
}
|
88
|
+
|
80
89
|
// Scope custom element tags
|
81
90
|
contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
|
82
91
|
|
@@ -91,7 +100,6 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
|
|
91
100
|
} else {
|
92
101
|
const path = normalizePath.call(this, mustache.path.original);
|
93
102
|
const hasCalculatingClasses = path.includes("context.classes");
|
94
|
-
const hasStylesCalculation = path.includes("context.styles");
|
95
103
|
|
96
104
|
let parsedCode = "";
|
97
105
|
|
@@ -99,7 +107,7 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
|
|
99
107
|
parsedCode = `\${unsafeHTML(${path})}`;
|
100
108
|
} else if (hasCalculatingClasses) {
|
101
109
|
parsedCode = `\${classMap(${path})}`;
|
102
|
-
} else if (
|
110
|
+
} else if (isStyleAttribute) {
|
103
111
|
parsedCode = `\${styleMap(${path})}`;
|
104
112
|
} else if (skipIfDefined){
|
105
113
|
parsedCode = `\${${path}}`;
|
@@ -8,10 +8,10 @@ const DEFAULT_THEME = assets.themes.default;
|
|
8
8
|
const getDefaultThemeCode = packageName => {
|
9
9
|
return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
10
10
|
|
11
|
-
import defaultThemeBase from "@ui5/webcomponents-
|
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-
|
14
|
+
registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
|
15
15
|
registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
|
16
16
|
`;
|
17
17
|
};
|
@@ -38,8 +38,8 @@ module.exports = function (opts) {
|
|
38
38
|
|
39
39
|
const filePath = `${targetFile}.js`;
|
40
40
|
const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
|
41
|
-
fs.writeFileSync(filePath, `${defaultTheme}export default ${css}
|
41
|
+
fs.writeFileSync(filePath, `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`);
|
42
42
|
}
|
43
43
|
};
|
44
44
|
};
|
45
|
-
module.exports.postcss = true;
|
45
|
+
module.exports.postcss = true;
|
@@ -23,9 +23,14 @@ module.exports = function (opts) {
|
|
23
23
|
mkdirp.sync(path.dirname(targetFile));
|
24
24
|
|
25
25
|
const filePath = `${targetFile}.json`;
|
26
|
-
|
26
|
+
const data = {
|
27
|
+
packageName: opts.packageName,
|
28
|
+
fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
|
29
|
+
content: css
|
30
|
+
};
|
31
|
+
fs.writeFileSync(filePath, JSON.stringify({_: data}));
|
27
32
|
}
|
28
33
|
};
|
29
34
|
};
|
30
35
|
|
31
|
-
module.exports.postcss = true;
|
36
|
+
module.exports.postcss = true;
|
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-1e08ebdef",
|
4
4
|
"description": "UI5 Web Components: webcomponents.tools",
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
6
6
|
"license": "Apache-2.0",
|
@@ -13,8 +13,7 @@
|
|
13
13
|
"scripts": {},
|
14
14
|
"bin": {
|
15
15
|
"wc-dev": "bin/dev.js",
|
16
|
-
"wc-create-ui5-element": "bin/create-ui5-element.js"
|
17
|
-
"wc-init-ui5-package": "bin/init-ui5-package.js"
|
16
|
+
"wc-create-ui5-element": "bin/create-ui5-element.js"
|
18
17
|
},
|
19
18
|
"repository": {
|
20
19
|
"type": "git",
|
@@ -22,13 +21,14 @@
|
|
22
21
|
"directory": "packages/tools"
|
23
22
|
},
|
24
23
|
"dependencies": {
|
25
|
-
"@babel/cli": "^7.13.10",
|
26
24
|
"@babel/core": "^7.13.10",
|
27
|
-
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
|
28
25
|
"@babel/preset-env": "^7.13.10",
|
26
|
+
"@openui5/sap.ui.core": "1.95.0",
|
29
27
|
"@rollup/plugin-babel": "^5.3.0",
|
28
|
+
"@rollup/plugin-commonjs": "^21.0.1",
|
30
29
|
"@rollup/plugin-json": "^4.1.0",
|
31
30
|
"@rollup/plugin-node-resolve": "^13.0.5",
|
31
|
+
"@rollup/plugin-replace": "^3.0.0",
|
32
32
|
"@rollup/plugin-url": "^6.0.0",
|
33
33
|
"@wdio/cli": "^7.12.2",
|
34
34
|
"@wdio/dot-reporter": "^7.10.1",
|
@@ -40,7 +40,6 @@
|
|
40
40
|
"child_process": "^1.0.2",
|
41
41
|
"chokidar": "^3.5.1",
|
42
42
|
"chokidar-cli": "^3.0.0",
|
43
|
-
"clean-css": "^5.1.1",
|
44
43
|
"colors": "^1.4.0",
|
45
44
|
"command-line-args": "^5.1.1",
|
46
45
|
"concurrently": "^6.0.0",
|
@@ -54,27 +53,27 @@
|
|
54
53
|
"folder-hash": "^4.0.1",
|
55
54
|
"getopts": "^2.3.0",
|
56
55
|
"glob": "^7.1.6",
|
56
|
+
"glob-parent": "^6.0.2",
|
57
57
|
"handlebars": "^4.7.7",
|
58
58
|
"is-port-reachable": "^3.1.0",
|
59
59
|
"jsdoc": "^3.6.6",
|
60
60
|
"json-beautify": "^1.1.1",
|
61
61
|
"mkdirp": "^1.0.4",
|
62
|
-
"npm-run-all": "^4.1.3",
|
63
62
|
"nps": "^5.10.0",
|
64
63
|
"postcss": "^8.2.10",
|
65
64
|
"postcss-cli": "^9.0.1",
|
66
65
|
"postcss-combine-duplicated-selectors": "^10.0.3",
|
67
66
|
"postcss-import": "^14.0.0",
|
68
67
|
"properties-reader": "^2.2.0",
|
69
|
-
"puppeteer": "^10.4.0",
|
70
68
|
"recursive-readdir": "^2.2.2",
|
69
|
+
"resolve": "^1.20.0",
|
71
70
|
"rimraf": "^3.0.2",
|
72
71
|
"rollup": "^2.41.4",
|
73
72
|
"rollup-plugin-filesize": "^9.1.1",
|
74
73
|
"rollup-plugin-livereload": "^2.0.0",
|
75
|
-
"rollup-plugin-string": "^3.0.0",
|
76
74
|
"rollup-plugin-terser": "^7.0.2",
|
77
75
|
"serve": "^12.0.0",
|
76
|
+
"slash": "3.0.0",
|
78
77
|
"wdio-chromedriver-service": "^7.0.0"
|
79
78
|
},
|
80
79
|
"peerDependencies": {
|
package/bin/init-ui5-package.js
DELETED
@@ -1,134 +0,0 @@
|
|
1
|
-
const fs = require("fs");
|
2
|
-
const path = require("path");
|
3
|
-
const mkdirp = require("mkdirp");
|
4
|
-
const commandLineArgs = require('command-line-args');
|
5
|
-
const beautify = require("json-beautify");
|
6
|
-
|
7
|
-
// String utils
|
8
|
-
const kebabToCamelCase = string => toCamelCase(string.split("-"));
|
9
|
-
const toCamelCase = parts => {
|
10
|
-
return parts.map((string, index) => {
|
11
|
-
return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
|
12
|
-
}).join("");
|
13
|
-
};
|
14
|
-
const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
|
15
|
-
|
16
|
-
// content of package.json
|
17
|
-
let packageContent;
|
18
|
-
|
19
|
-
const DEFAULT_PORT = 8080;
|
20
|
-
const DEFAULT_TAG = 'my-first-component';
|
21
|
-
|
22
|
-
// from where all the files will be copied
|
23
|
-
const RESOURCES_DIR = path.join(`${__dirname}`, `resources/`);
|
24
|
-
|
25
|
-
// Command line options
|
26
|
-
const options = commandLineArgs([
|
27
|
-
{name: 'port', alias: 'p', type: Number},
|
28
|
-
{name: 'tag', type: String},
|
29
|
-
]);
|
30
|
-
|
31
|
-
// Ensure there is package.json
|
32
|
-
try {
|
33
|
-
packageContent = JSON.parse(fs.readFileSync("package.json"));
|
34
|
-
} catch (err) {
|
35
|
-
console.log("No package.json found, please run: 'npm init' first");
|
36
|
-
process.exit(1);
|
37
|
-
}
|
38
|
-
|
39
|
-
// Ensure correct tag
|
40
|
-
const tag = options.tag || DEFAULT_TAG;
|
41
|
-
if (!tag.includes("-")) {
|
42
|
-
console.log("tag name should contain at least one dash");
|
43
|
-
process.exit(1);
|
44
|
-
}
|
45
|
-
if (tag.startsWith("ui5-")) {
|
46
|
-
console.log("The ui5- prefix is reserved for the standard UI5 Web Components due to future possible name clashes.");
|
47
|
-
process.exit(1);
|
48
|
-
}
|
49
|
-
|
50
|
-
const className = capitalizeFirst(kebabToCamelCase(tag));
|
51
|
-
|
52
|
-
// All variables that will be replaced in the content of the resources/
|
53
|
-
const vars = {
|
54
|
-
INIT_PACKAGE_VAR_NAME: packageContent.name,
|
55
|
-
INIT_PACKAGE_VAR_PORT: options.port || DEFAULT_PORT,
|
56
|
-
INIT_PACKAGE_VAR_TAG: tag,
|
57
|
-
INIT_PACKAGE_VAR_CLASS_NAME: className,
|
58
|
-
};
|
59
|
-
console.log(vars);
|
60
|
-
|
61
|
-
const replaceVarsInFileContent = content => {
|
62
|
-
for (let key in vars) {
|
63
|
-
const re = new RegExp(key, "g");
|
64
|
-
content = content.replace(re, vars[key]);
|
65
|
-
}
|
66
|
-
return content;
|
67
|
-
};
|
68
|
-
|
69
|
-
const replaceVarsInFileName = fileName => {
|
70
|
-
return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME) ;
|
71
|
-
};
|
72
|
-
|
73
|
-
const copyFile = (sourcePath, destPath) => {
|
74
|
-
let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
|
75
|
-
content = replaceVarsInFileContent(content);
|
76
|
-
destPath = replaceVarsInFileName(destPath);
|
77
|
-
fs.writeFileSync(destPath, content);
|
78
|
-
console.log(destPath);
|
79
|
-
};
|
80
|
-
|
81
|
-
const copyResources = sourcePath => {
|
82
|
-
const destPath = sourcePath.substr(RESOURCES_DIR.length);
|
83
|
-
const isDir = fs.lstatSync(sourcePath).isDirectory();
|
84
|
-
if (isDir) {
|
85
|
-
if (destPath) {
|
86
|
-
mkdirp.sync(destPath);
|
87
|
-
console.log(destPath);
|
88
|
-
}
|
89
|
-
fs.readdirSync(sourcePath).forEach(file => {
|
90
|
-
copyResources(path.join(sourcePath, file));
|
91
|
-
});
|
92
|
-
} else {
|
93
|
-
copyFile(sourcePath, destPath);
|
94
|
-
}
|
95
|
-
};
|
96
|
-
|
97
|
-
const updatePackageFile = () => {
|
98
|
-
packageContent.scripts = {
|
99
|
-
"clean": "wc-dev clean",
|
100
|
-
"lint": "wc-dev lint",
|
101
|
-
"start": "wc-dev start",
|
102
|
-
"watch": "wc-dev watch",
|
103
|
-
"serve": "wc-dev serve",
|
104
|
-
"build": "wc-dev build",
|
105
|
-
"test": "wc-dev test",
|
106
|
-
"create-ui5-element": "wc-create-ui5-element",
|
107
|
-
"prepublishOnly": "npm run build"
|
108
|
-
};
|
109
|
-
|
110
|
-
// make convinient exports (no dist in component path)
|
111
|
-
// export the rest that is used directly or via require.resolve in scripts
|
112
|
-
packageContent.exports = {
|
113
|
-
"./.port": "./.port",
|
114
|
-
"./src/*": "./src/*",
|
115
|
-
"./dist/*": "./dist/*",
|
116
|
-
"./package.json": "./package.json",
|
117
|
-
"./bundle.js": "./bundle.js",
|
118
|
-
"./*": "./dist/*"
|
119
|
-
}
|
120
|
-
|
121
|
-
packageContent.ui5 = {
|
122
|
-
webComponentsPackage: true
|
123
|
-
};
|
124
|
-
|
125
|
-
fs.writeFileSync("package.json", beautify(packageContent, null, 2, 100));
|
126
|
-
};
|
127
|
-
|
128
|
-
// Copy files
|
129
|
-
copyResources(RESOURCES_DIR);
|
130
|
-
|
131
|
-
// Update package.json
|
132
|
-
updatePackageFile();
|
133
|
-
|
134
|
-
console.log("Package successfully initialized.");
|
@@ -1,31 +0,0 @@
|
|
1
|
-
// used in test pages
|
2
|
-
import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
|
3
|
-
|
4
|
-
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
|
5
|
-
import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
|
6
|
-
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
|
7
|
-
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
|
8
|
-
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
|
9
|
-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
|
10
|
-
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
|
11
|
-
|
12
|
-
// Enable additional themes and i18n texts
|
13
|
-
import "./dist/Assets.js";
|
14
|
-
|
15
|
-
// Import your web components here from the dist/ directory
|
16
|
-
import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
|
17
|
-
|
18
|
-
window["sap-ui-webcomponents-bundle"] = {
|
19
|
-
renderFinished,
|
20
|
-
configuration: {
|
21
|
-
getAnimationMode,
|
22
|
-
getLanguage,
|
23
|
-
getTheme,
|
24
|
-
setTheme,
|
25
|
-
getNoConflict,
|
26
|
-
setNoConflict,
|
27
|
-
getCalendarType,
|
28
|
-
getRTL,
|
29
|
-
getFirstDayOfWeek,
|
30
|
-
},
|
31
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = require("@ui5/webcomponents-tools/components-package/eslint.js"); // eslint-disable-line
|
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line
|
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line
|
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js"); // eslint-disable-line
|
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js"); // eslint-disable-line
|
@@ -1 +0,0 @@
|
|
1
|
-
<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
|
@@ -1,56 +0,0 @@
|
|
1
|
-
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
2
|
-
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
3
|
-
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
4
|
-
|
5
|
-
// Template
|
6
|
-
import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
|
7
|
-
|
8
|
-
// Styles
|
9
|
-
import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
|
10
|
-
|
11
|
-
import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
|
12
|
-
|
13
|
-
const metadata = {
|
14
|
-
tag: "INIT_PACKAGE_VAR_TAG",
|
15
|
-
properties: {
|
16
|
-
},
|
17
|
-
slots: {
|
18
|
-
},
|
19
|
-
events: {
|
20
|
-
},
|
21
|
-
};
|
22
|
-
|
23
|
-
class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
|
24
|
-
constructor() {
|
25
|
-
super();
|
26
|
-
this.i18nBundle = getI18nBundle("INIT_PACKAGE_VAR_NAME");
|
27
|
-
}
|
28
|
-
|
29
|
-
get pleaseWaitText() {
|
30
|
-
return this.i18nBundle.getText(PLEASE_WAIT);
|
31
|
-
}
|
32
|
-
|
33
|
-
static get metadata() {
|
34
|
-
return metadata;
|
35
|
-
}
|
36
|
-
|
37
|
-
static get render() {
|
38
|
-
return litRender;
|
39
|
-
}
|
40
|
-
|
41
|
-
static get template() {
|
42
|
-
return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
|
43
|
-
}
|
44
|
-
|
45
|
-
static get styles() {
|
46
|
-
return INIT_PACKAGE_VAR_CLASS_NAMECss;
|
47
|
-
}
|
48
|
-
|
49
|
-
static async onDefine() {
|
50
|
-
await fetchI18nBundle("INIT_PACKAGE_VAR_NAME");
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
INIT_PACKAGE_VAR_CLASS_NAME.define();
|
55
|
-
|
56
|
-
export default INIT_PACKAGE_VAR_CLASS_NAME;
|
@@ -1 +0,0 @@
|
|
1
|
-
PLEASE_WAIT=Bitte warten
|
@@ -1 +0,0 @@
|
|
1
|
-
PLEASE_WAIT=Please wait
|
@@ -1 +0,0 @@
|
|
1
|
-
PLEASE_WAIT=Espere
|
@@ -1 +0,0 @@
|
|
1
|
-
PLEASE_WAIT=Patientez.
|
@@ -1,11 +0,0 @@
|
|
1
|
-
:host {
|
2
|
-
border: 2px solid var(--my-component-border-color);
|
3
|
-
background-color: var(--sapBackgroundColor);
|
4
|
-
color: var(--sapTextColor);
|
5
|
-
display: block;
|
6
|
-
width: 24rem;
|
7
|
-
height: 3rem;
|
8
|
-
text-align: center;
|
9
|
-
vertical-align: middle;
|
10
|
-
line-height: 3rem;
|
11
|
-
}
|
@@ -1,54 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html>
|
3
|
-
|
4
|
-
<head>
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6
|
-
<meta charset="utf-8">
|
7
|
-
|
8
|
-
<title>INIT_PACKAGE_VAR_TAG</title>
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
10
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
11
|
-
<meta charset="utf-8">
|
12
|
-
|
13
|
-
<script data-ui5-config type="application/json">
|
14
|
-
{
|
15
|
-
"language": "EN"
|
16
|
-
}
|
17
|
-
</script>
|
18
|
-
|
19
|
-
<script src="../../resources/bundle.esm.js" type="module"></script>
|
20
|
-
|
21
|
-
<style>
|
22
|
-
code { color: blue; font-size: small; }
|
23
|
-
</style>
|
24
|
-
|
25
|
-
</head>
|
26
|
-
|
27
|
-
<body>
|
28
|
-
<ul>
|
29
|
-
<li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
|
30
|
-
<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
|
31
|
-
<li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
|
32
|
-
<li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
|
33
|
-
<li><a href="?sap-ui-theme=sap_belize">Belize</a></li>
|
34
|
-
<li><a href="?sap-ui-theme=sap_belize_hcb">Belize High Contrast Black</a></li>
|
35
|
-
<li><a href="?sap-ui-theme=sap_belize_hcw">Belize High Contrast White</a></li>
|
36
|
-
</ul>
|
37
|
-
<br>
|
38
|
-
<span>or in the browser console, for example:</span>
|
39
|
-
<code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_belize_hcb")</code>
|
40
|
-
|
41
|
-
<br><br>
|
42
|
-
|
43
|
-
<a href="?sap-ui-language=en">English</a> |
|
44
|
-
<a href="?sap-ui-language=de">German</a> |
|
45
|
-
<a href="?sap-ui-language=es">Spanish</a> |
|
46
|
-
<a href="?sap-ui-language=fr">French</a>
|
47
|
-
|
48
|
-
<br><br>
|
49
|
-
|
50
|
-
<h1>Test your web components here</h1>
|
51
|
-
<INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
|
52
|
-
</body>
|
53
|
-
|
54
|
-
</html>
|
@@ -1,12 +0,0 @@
|
|
1
|
-
const assert = require("assert");
|
2
|
-
|
3
|
-
describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
|
4
|
-
await browser.url("http://localhost:INIT_PACKAGE_VAR_PORT/test-resources/pages/index.html");
|
5
|
-
|
6
|
-
it("tests if web component is correctly rendered", async () => {
|
7
|
-
|
8
|
-
const innerContent = await browser.$("#myFirstComponent").shadow$("div");
|
9
|
-
|
10
|
-
assert.ok(innerContent, "content rendered");
|
11
|
-
});
|
12
|
-
});
|