@ui5/create-webcomponents-package 0.0.0-c638668a1 → 0.0.0-c8721b8d2
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 +666 -0
- package/README.md +35 -13
- package/create-package.js +271 -0
- package/package.json +4 -3
- package/template/.eslintignore +3 -0
- package/template/.eslintrc.js +5 -0
- package/template/gitignore +4 -0
- package/template/npmrc +2 -0
- package/template/package-scripts.js +2 -1
- package/template/src/Assets.ts +5 -0
- package/template/src/MyFirstComponent.hbs +1 -1
- package/template/src/MyFirstComponent.js +35 -4
- package/template/src/MyFirstComponent.ts +63 -0
- package/template/src/i18n/messagebundle.properties +3 -2
- package/template/src/i18n/messagebundle_de.properties +1 -1
- package/template/src/i18n/messagebundle_en.properties +1 -1
- package/template/src/i18n/messagebundle_es.properties +1 -1
- package/template/src/i18n/messagebundle_fr.properties +1 -1
- package/template/src/themes/MyFirstComponent.css +14 -9
- package/template/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/template/src/themes/sap_horizon_dark/parameters-bundle.css +3 -0
- package/template/src/themes/sap_horizon_hcb/parameters-bundle.css +3 -0
- package/template/test/pages/css/index.css +36 -0
- package/template/test/pages/img/logo.png +0 -0
- package/template/test/pages/index.html +36 -33
- package/template/test/specs/Demo.spec.js +3 -2
- package/template/tsconfig.json +15 -0
- package/index.js +0 -168
- package/template/config/.eslintrc.js +0 -1
- package/template/config/postcss.components/postcss.config.js +0 -1
- package/template/config/postcss.themes/postcss.config.js +0 -1
- package/template/config/rollup.config.js +0 -1
- package/template/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
- /package/template/src/themes/{sap_belize → sap_horizon}/parameters-bundle.css +0 -0
- /package/template/src/themes/{sap_belize_hcb → sap_horizon_hcw}/parameters-bundle.css +0 -0
|
@@ -2,53 +2,56 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
5
|
<meta charset="utf-8">
|
|
7
6
|
|
|
8
7
|
<title>INIT_PACKAGE_VAR_TAG</title>
|
|
9
8
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
11
9
|
<meta charset="utf-8">
|
|
12
10
|
|
|
13
11
|
<script data-ui5-config type="application/json">
|
|
14
12
|
{
|
|
13
|
+
"theme": "sap_horizon_dark",
|
|
15
14
|
"language": "EN"
|
|
16
15
|
}
|
|
17
16
|
</script>
|
|
18
17
|
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
<style>
|
|
22
|
-
code { color: blue; font-size: small; }
|
|
23
|
-
</style>
|
|
24
|
-
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="./css/index.css">
|
|
19
|
+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
|
|
25
20
|
</head>
|
|
26
21
|
|
|
27
22
|
<body>
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
23
|
+
<div class="app">
|
|
24
|
+
<a href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-getting-started-first-steps--docs" target="_blank"><img src="./img/logo.png" alt="logo"/></a>
|
|
25
|
+
|
|
26
|
+
<div class="app-first-component">
|
|
27
|
+
<h1>Hooray! It's Your First Web Component!</h1>
|
|
28
|
+
<div> <pre><INIT_PACKAGE_VAR_TAG></INIT_PACKAGE_VAR_TAG> </pre></div>
|
|
29
|
+
<INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="app-settings">
|
|
33
|
+
|
|
34
|
+
<h2>Switch themes</h2>
|
|
35
|
+
<div style="display: flex; flex-direction: row;">
|
|
36
|
+
<a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
|
|
37
|
+
<a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
|
|
38
|
+
<a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
|
|
39
|
+
<a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<h2>Switch language</h2>
|
|
43
|
+
<div>
|
|
44
|
+
<a class="link" href="?sap-ui-language=en">English</a>
|
|
45
|
+
<a class="link" href="?sap-ui-language=de">German</a>
|
|
46
|
+
<a class="link" href="?sap-ui-language=es">Spanish</a>
|
|
47
|
+
<a class="link" href="?sap-ui-language=fr">French</a>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="app-docs">
|
|
52
|
+
<h2>Documentation</h2>
|
|
53
|
+
<a class="link" href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-development-custom-ui5-web-components-packages--docs">Custom Component Development</a>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
52
56
|
</body>
|
|
53
|
-
|
|
54
57
|
</html>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
const assert = require("assert");
|
|
2
2
|
|
|
3
3
|
describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
|
|
4
|
-
|
|
4
|
+
before(async () => {
|
|
5
|
+
await browser.url("test/pages/index.html");
|
|
6
|
+
});
|
|
5
7
|
|
|
6
8
|
it("tests if web component is correctly rendered", async () => {
|
|
7
|
-
|
|
8
9
|
const innerContent = await browser.$("#myFirstComponent").shadow$("div");
|
|
9
10
|
|
|
10
11
|
assert.ok(innerContent, "content rendered");
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"include": ["src/**/*", "global.d.ts"],
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "ES2021",
|
|
5
|
+
// Generate d.ts files
|
|
6
|
+
"declaration": true,
|
|
7
|
+
"outDir": "dist",
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"sourceMap": true,
|
|
10
|
+
"inlineSources": true,
|
|
11
|
+
"strict": true,
|
|
12
|
+
"moduleResolution": "node",
|
|
13
|
+
"experimentalDecorators": true,
|
|
14
|
+
},
|
|
15
|
+
}
|
package/index.js
DELETED
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
const fs = require("fs");
|
|
4
|
-
const path = require("path");
|
|
5
|
-
const mkdirp = require("mkdirp");
|
|
6
|
-
const prompts = require("prompts");
|
|
7
|
-
const parser = require("npm-config-user-agent-parser");
|
|
8
|
-
|
|
9
|
-
// from where all the files will be copied
|
|
10
|
-
const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
|
|
11
|
-
|
|
12
|
-
// String utils
|
|
13
|
-
const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
|
|
14
|
-
const kebabToCamelCase = string => toCamelCase(string.split("-"));
|
|
15
|
-
const toCamelCase = parts => {
|
|
16
|
-
return parts.map((string, index) => {
|
|
17
|
-
return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
|
|
18
|
-
}).join("");
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
// Validation of user input
|
|
22
|
-
const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z0-9\-_]+$/);
|
|
23
|
-
const isPortValid = port => typeof port === "string" && port.match(/^[0-9]+$/);
|
|
24
|
-
const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
|
|
25
|
-
|
|
26
|
-
// Utils for building the file structure
|
|
27
|
-
const replaceVarsInFileContent = (vars, content) => {
|
|
28
|
-
for (let key in vars) {
|
|
29
|
-
const re = new RegExp(key, "g");
|
|
30
|
-
content = content.replace(re, vars[key]);
|
|
31
|
-
}
|
|
32
|
-
return content;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const replaceVarsInFileName = (vars, fileName) => {
|
|
36
|
-
return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const copyFile = (vars, sourcePath, destPath) => {
|
|
40
|
-
let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
|
|
41
|
-
content = replaceVarsInFileContent(vars, content);
|
|
42
|
-
destPath = replaceVarsInFileName(vars, destPath);
|
|
43
|
-
fs.writeFileSync(destPath, content);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const copyFiles = (vars, sourcePath, destPath) => {
|
|
47
|
-
const isDir = fs.lstatSync(sourcePath).isDirectory();
|
|
48
|
-
if (isDir) {
|
|
49
|
-
if (destPath) {
|
|
50
|
-
mkdirp.sync(destPath);
|
|
51
|
-
}
|
|
52
|
-
fs.readdirSync(sourcePath).forEach(file => {
|
|
53
|
-
copyFiles(vars, path.join(sourcePath, file), path.join(destPath, file));
|
|
54
|
-
});
|
|
55
|
-
} else {
|
|
56
|
-
copyFile(vars, sourcePath, destPath);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
// Main function
|
|
61
|
-
const createWebcomponentsPackage = async () => {
|
|
62
|
-
let response;
|
|
63
|
-
|
|
64
|
-
// Get the name
|
|
65
|
-
let name = process.argv[2];
|
|
66
|
-
|
|
67
|
-
if (!isNameValid(name)) {
|
|
68
|
-
response = await prompts({
|
|
69
|
-
type: "text",
|
|
70
|
-
name: "name",
|
|
71
|
-
message: "Package name:",
|
|
72
|
-
validate: isNameValid,
|
|
73
|
-
});
|
|
74
|
-
name = response.name;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Get the port
|
|
78
|
-
response = await prompts({
|
|
79
|
-
type: "text",
|
|
80
|
-
name: "port",
|
|
81
|
-
message: "Dev server port:",
|
|
82
|
-
validate: isPortValid,
|
|
83
|
-
initial: "8080",
|
|
84
|
-
});
|
|
85
|
-
const port = response.port;
|
|
86
|
-
|
|
87
|
-
// Get the tag
|
|
88
|
-
response = await prompts({
|
|
89
|
-
type: "text",
|
|
90
|
-
name: "tag",
|
|
91
|
-
message: "Demo component name:",
|
|
92
|
-
initial: "my-first-component",
|
|
93
|
-
validate: isTagValid,
|
|
94
|
-
});
|
|
95
|
-
const tag = response.tag;
|
|
96
|
-
|
|
97
|
-
const className = capitalizeFirst(kebabToCamelCase(tag));
|
|
98
|
-
|
|
99
|
-
// All variables that will be replaced in the content of the resources/
|
|
100
|
-
const vars = {
|
|
101
|
-
INIT_PACKAGE_VAR_NAME: name,
|
|
102
|
-
INIT_PACKAGE_VAR_PORT: port,
|
|
103
|
-
INIT_PACKAGE_VAR_TAG: tag,
|
|
104
|
-
INIT_PACKAGE_VAR_CLASS_NAME: className,
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
const packageContent = {
|
|
108
|
-
name,
|
|
109
|
-
version: "0.0.1",
|
|
110
|
-
ui5: {
|
|
111
|
-
webComponentsPackage: true,
|
|
112
|
-
},
|
|
113
|
-
scripts: {
|
|
114
|
-
"clean": "wc-dev clean",
|
|
115
|
-
"lint": "wc-dev lint",
|
|
116
|
-
"start": "wc-dev start",
|
|
117
|
-
"watch": "wc-dev watch",
|
|
118
|
-
"serve": "wc-dev serve",
|
|
119
|
-
"build": "wc-dev build",
|
|
120
|
-
"test": "wc-dev test",
|
|
121
|
-
"create-ui5-element": "wc-create-ui5-element",
|
|
122
|
-
"prepublishOnly": "npm run build",
|
|
123
|
-
},
|
|
124
|
-
exports: {
|
|
125
|
-
"./.port": "./.port",
|
|
126
|
-
"./src/*": "./src/*",
|
|
127
|
-
"./dist/*": "./dist/*",
|
|
128
|
-
"./package.json": "./package.json",
|
|
129
|
-
"./bundle.js": "./bundle.js",
|
|
130
|
-
"./*": "./dist/*",
|
|
131
|
-
},
|
|
132
|
-
"dependencies": {
|
|
133
|
-
"@ui5/webcomponents-base": "1.1.1",
|
|
134
|
-
"@ui5/webcomponents-theming": "1.1.1",
|
|
135
|
-
},
|
|
136
|
-
"devDependencies": {
|
|
137
|
-
"@ui5/webcomponents-tools": "1.1.1",
|
|
138
|
-
"chromedriver": "*",
|
|
139
|
-
},
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
// Update package.json
|
|
143
|
-
const destDir = path.join(`./`, name);
|
|
144
|
-
mkdirp.sync(destDir);
|
|
145
|
-
fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
|
|
146
|
-
// Copy files
|
|
147
|
-
copyFiles(vars, TEMPLATE_DIR, destDir);
|
|
148
|
-
|
|
149
|
-
console.log("\nPackage successfully created!\nNext steps:\n");
|
|
150
|
-
console.log(`$ cd ${name}`);
|
|
151
|
-
|
|
152
|
-
let userAgentInfo;
|
|
153
|
-
try {
|
|
154
|
-
userAgentInfo = parser(process.env.npm_config_user_agent);
|
|
155
|
-
} catch (e) {}
|
|
156
|
-
|
|
157
|
-
if (userAgentInfo && userAgentInfo.yarn) {
|
|
158
|
-
console.log(`$ yarn`);
|
|
159
|
-
console.log(`$ yarn start`);
|
|
160
|
-
} else {
|
|
161
|
-
console.log(`$ npm i`);
|
|
162
|
-
console.log(`$ npm start`);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
console.log("\n");
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
createWebcomponentsPackage();
|
|
@@ -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
|
|
File without changes
|
|
File without changes
|