@ui5/create-webcomponents-package 0.0.0-354b6d238 → 0.0.0-37338d49d
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 +1198 -0
- package/README.md +6 -9
- package/create-package.js +21 -55
- package/package.json +1 -1
- package/template/.eslintignore +1 -2
- package/template/.npsrc.json +3 -0
- package/template/bundle.esm.js +0 -2
- package/template/gitignore +0 -1
- package/template/{package-scripts.js → package-scripts.cjs} +0 -1
- package/template/src/MyFirstComponent.ts +20 -12
- package/template/src/MyFirstComponentTemplate.tsx +9 -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 +16 -10
- package/template/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/template/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/template/test/pages/css/index.css +41 -0
- package/template/test/pages/img/logo.png +0 -0
- package/template/test/pages/index.html +35 -31
- package/template/test/specs/Demo.spec.js +1 -2
- package/template/tsconfig.json +12 -14
- package/template/config/postcss.components/postcss.config.js +0 -1
- package/template/config/postcss.themes/postcss.config.js +0 -1
- package/template/global.d.ts +0 -12
- package/template/src/Assets.js +0 -5
- package/template/src/MyFirstComponent.hbs +0 -1
- package/template/src/MyFirstComponent.js +0 -67
- 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/{.eslintrc.js → .eslintrc.cjs} +0 -0
- /package/template/config/{wdio.conf.js → wdio.conf.cjs} +0 -0
package/README.md
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
UI5 Web Components - Create Package
|
|
4
2
|
|
|
5
3
|
[](https://www.npmjs.com/package/@ui5/webcomponents)
|
|
6
4
|
|
|
@@ -18,9 +16,8 @@ Usage:
|
|
|
18
16
|
|
|
19
17
|
Options:
|
|
20
18
|
--name <string> - defines the package name
|
|
21
|
-
--
|
|
22
|
-
--tag <string> - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided.
|
|
23
|
-
--enable-typescript - enables TypeScript support for the package
|
|
19
|
+
--component-name <string> - defines the component class name that will be created in your new package
|
|
20
|
+
--tag <string> - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided.
|
|
24
21
|
--skip - skips configuration and generates package with a default value for each parameter that wasn't passed
|
|
25
22
|
```
|
|
26
23
|
|
|
@@ -34,8 +31,8 @@ Usage:
|
|
|
34
31
|
yarn create @ui5/webcomponents-package [OPTIONS]
|
|
35
32
|
Options:
|
|
36
33
|
--name <string> - defines the package name
|
|
34
|
+
--component-name <string> - defines the component class name that will be created in your new package
|
|
37
35
|
--tag <string> - defines the tag name of the sample web component that will be created in your new package
|
|
38
|
-
--enable-typescript - enables TypeScript support for the package
|
|
39
36
|
--skip - skips configuration and generates package with a default value for each parameter that wasn't passed
|
|
40
37
|
```
|
|
41
38
|
|
|
@@ -45,10 +42,10 @@ components package.
|
|
|
45
42
|
## Resources
|
|
46
43
|
- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
|
|
47
44
|
- [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
|
|
48
|
-
- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/
|
|
45
|
+
- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
|
|
49
46
|
|
|
50
47
|
## Support
|
|
51
|
-
We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://
|
|
48
|
+
We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
|
|
52
49
|
|
|
53
50
|
## Contribute
|
|
54
51
|
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
|
package/create-package.js
CHANGED
|
@@ -15,30 +15,19 @@ const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))
|
|
|
15
15
|
// from where all the files will be copied
|
|
16
16
|
const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
|
|
17
17
|
|
|
18
|
-
// String utils
|
|
19
|
-
const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
|
|
20
|
-
const kebabToCamelCase = string => toCamelCase(string.split("-"));
|
|
21
|
-
const toCamelCase = parts => {
|
|
22
|
-
return parts.map((string, index) => {
|
|
23
|
-
return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
|
|
24
|
-
}).join("");
|
|
25
|
-
};
|
|
26
|
-
const isTSRelatedFile = sourcePath => {
|
|
27
|
-
return ["Assets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
|
|
28
|
-
};
|
|
29
|
-
const isJSRelatedFile = sourcePath => {
|
|
30
|
-
return ["Assets.js", "MyFirstComponent.js"].some(fileName => sourcePath.includes(fileName));
|
|
31
|
-
};
|
|
32
18
|
const isGitIgnore = sourcePath => {
|
|
33
19
|
return sourcePath.includes("gitignore");
|
|
34
20
|
};
|
|
21
|
+
const isLogo = sourcePath => {
|
|
22
|
+
return sourcePath.includes("logo");
|
|
23
|
+
};
|
|
35
24
|
const isNPMRC = sourcePath => {
|
|
36
25
|
return sourcePath.includes("npmrc");
|
|
37
26
|
};
|
|
38
27
|
|
|
39
28
|
// Validation of user input
|
|
40
29
|
const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
|
|
41
|
-
const
|
|
30
|
+
const isPackageNameValid = name => typeof name === "string" && name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/);
|
|
42
31
|
const isComponentNameValid = name => typeof name === "string" && ComponentNamePattern.test(name);
|
|
43
32
|
const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
|
|
44
33
|
|
|
@@ -67,10 +56,8 @@ const replaceVarsInFileName = (vars, fileName) => {
|
|
|
67
56
|
};
|
|
68
57
|
|
|
69
58
|
const copyFile = (vars, sourcePath, destPath) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
if (ignoreJsRelated || ignoreTsRelated) {
|
|
59
|
+
if (isLogo(sourcePath)) {
|
|
60
|
+
fs.copyFileSync(sourcePath, destPath);
|
|
74
61
|
return;
|
|
75
62
|
}
|
|
76
63
|
|
|
@@ -105,23 +92,23 @@ const copyFiles = (vars, sourcePath, destPath) => {
|
|
|
105
92
|
}
|
|
106
93
|
};
|
|
107
94
|
|
|
108
|
-
const generateFilesContent = (
|
|
95
|
+
const generateFilesContent = (packageName, componentName, skipSubfolder) => {
|
|
109
96
|
const tagName = argv.tag || hyphaneteComponentName(componentName);
|
|
110
97
|
|
|
111
98
|
// All variables that will be replaced in the content of the resources/
|
|
112
99
|
const vars = {
|
|
113
|
-
INIT_PACKAGE_VAR_NAME:
|
|
100
|
+
INIT_PACKAGE_VAR_NAME: packageName,
|
|
114
101
|
INIT_PACKAGE_VAR_TAG: tagName,
|
|
115
102
|
INIT_PACKAGE_VAR_CLASS_NAME: componentName,
|
|
116
|
-
INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
|
|
117
103
|
};
|
|
118
104
|
|
|
119
105
|
const packageContent = {
|
|
120
|
-
name,
|
|
106
|
+
name: packageName,
|
|
121
107
|
version: "0.0.1",
|
|
122
108
|
ui5: {
|
|
123
109
|
webComponentsPackage: true,
|
|
124
110
|
},
|
|
111
|
+
type: "module",
|
|
125
112
|
scripts: {
|
|
126
113
|
"clean": "wc-dev clean",
|
|
127
114
|
"lint": "wc-dev lint",
|
|
@@ -146,22 +133,21 @@ const generateFilesContent = (name, componentName, typescript, skipSubfolder) =>
|
|
|
146
133
|
"devDependencies": {
|
|
147
134
|
"@ui5/webcomponents-tools": version,
|
|
148
135
|
"chromedriver": "*",
|
|
136
|
+
"typescript": "^5.6.2"
|
|
149
137
|
},
|
|
150
138
|
};
|
|
151
139
|
|
|
152
|
-
if (typescript) {
|
|
153
|
-
packageContent.devDependencies.typescript = "^4.9.4";
|
|
154
|
-
}
|
|
155
|
-
|
|
156
140
|
// Update package.json
|
|
157
|
-
|
|
141
|
+
let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
|
|
142
|
+
|
|
143
|
+
destDir = skipSubfolder ? path.join("./") : path.join("./", destDir);
|
|
158
144
|
mkdirp.sync(destDir);
|
|
159
145
|
fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
|
|
160
146
|
// Copy files
|
|
161
147
|
copyFiles(vars, TEMPLATE_DIR, destDir);
|
|
162
148
|
|
|
163
149
|
console.log("\nPackage successfully created!\nNext steps:\n");
|
|
164
|
-
console.log(`$ cd ${
|
|
150
|
+
console.log(`$ cd ${destDir}`);
|
|
165
151
|
|
|
166
152
|
let userAgentInfo;
|
|
167
153
|
try {
|
|
@@ -182,7 +168,7 @@ const generateFilesContent = (name, componentName, typescript, skipSubfolder) =>
|
|
|
182
168
|
// Main function
|
|
183
169
|
const createWebcomponentsPackage = async () => {
|
|
184
170
|
let response;
|
|
185
|
-
if (argv.name && !
|
|
171
|
+
if (argv.name && !isPackageNameValid(argv.name)) {
|
|
186
172
|
throw new Error("The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].");
|
|
187
173
|
}
|
|
188
174
|
|
|
@@ -194,13 +180,12 @@ const createWebcomponentsPackage = async () => {
|
|
|
194
180
|
throw new Error("The tag should be in kebab-case (f.e my-component) and it can't be a single word.");
|
|
195
181
|
}
|
|
196
182
|
|
|
197
|
-
let
|
|
183
|
+
let packageName = argv.name || "my-package";
|
|
198
184
|
let componentName = argv.componentName || "MyComponent";
|
|
199
|
-
let typescriptSupport = !!argv.enableTypescript;
|
|
200
185
|
const skipSubfolder = !!argv.skipSubfolder;
|
|
201
186
|
|
|
202
187
|
if (argv.skip) {
|
|
203
|
-
return generateFilesContent(
|
|
188
|
+
return generateFilesContent(packageName, componentName, skipSubfolder);
|
|
204
189
|
}
|
|
205
190
|
|
|
206
191
|
if (!argv.name) {
|
|
@@ -208,28 +193,9 @@ const createWebcomponentsPackage = async () => {
|
|
|
208
193
|
type: "text",
|
|
209
194
|
name: "name",
|
|
210
195
|
message: "Package name:",
|
|
211
|
-
validate: (value) =>
|
|
212
|
-
});
|
|
213
|
-
name = response.name;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
if (!typescriptSupport) {
|
|
217
|
-
response = await prompts({
|
|
218
|
-
type: "select",
|
|
219
|
-
name: "language",
|
|
220
|
-
message: "Project type:",
|
|
221
|
-
choices: [
|
|
222
|
-
{
|
|
223
|
-
title: "JavaScript",
|
|
224
|
-
value: false,
|
|
225
|
-
},
|
|
226
|
-
{
|
|
227
|
-
title: "TypeScript",
|
|
228
|
-
value: true,
|
|
229
|
-
},
|
|
230
|
-
],
|
|
196
|
+
validate: (value) => isPackageNameValid(value) ? true : "Package name should be a string, starting with a letter and containing the following symbols [a-z, A-Z ,0-9, _, -].",
|
|
231
197
|
});
|
|
232
|
-
|
|
198
|
+
packageName = response.name;
|
|
233
199
|
}
|
|
234
200
|
|
|
235
201
|
if (!argv.componentName) {
|
|
@@ -243,7 +209,7 @@ const createWebcomponentsPackage = async () => {
|
|
|
243
209
|
componentName = response.componentName;
|
|
244
210
|
}
|
|
245
211
|
|
|
246
|
-
return generateFilesContent(
|
|
212
|
+
return generateFilesContent(packageName, componentName, skipSubfolder);
|
|
247
213
|
};
|
|
248
214
|
|
|
249
215
|
createWebcomponentsPackage();
|
package/package.json
CHANGED
package/template/.eslintignore
CHANGED
package/template/bundle.esm.js
CHANGED
|
@@ -6,7 +6,6 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
|
|
|
6
6
|
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
|
|
7
7
|
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
|
|
8
8
|
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
|
|
9
|
-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
|
|
10
9
|
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
|
|
11
10
|
|
|
12
11
|
// Enable additional themes and i18n texts
|
|
@@ -25,7 +24,6 @@ window["sap-ui-webcomponents-bundle"] = {
|
|
|
25
24
|
getNoConflict,
|
|
26
25
|
setNoConflict,
|
|
27
26
|
getCalendarType,
|
|
28
|
-
getRTL,
|
|
29
27
|
getFirstDayOfWeek,
|
|
30
28
|
},
|
|
31
29
|
};
|
package/template/gitignore
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
2
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
|
+
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
|
|
5
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
5
6
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
6
7
|
|
|
7
8
|
// Template
|
|
8
|
-
import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./
|
|
9
|
+
import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./INIT_PACKAGE_VAR_CLASS_NAMETemplate.js";
|
|
9
10
|
|
|
10
11
|
// Styles
|
|
11
12
|
import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
|
|
12
13
|
|
|
13
|
-
import {
|
|
14
|
+
import { COUNT } from "./generated/i18n/i18n-defaults.js";
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* @class
|
|
@@ -20,26 +21,33 @@ import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
|
|
|
20
21
|
* The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
|
|
21
22
|
*
|
|
22
23
|
* @constructor
|
|
23
|
-
* @
|
|
24
|
-
* @extends sap.ui.webc.base.UI5Element
|
|
25
|
-
* @tagname INIT_PACKAGE_VAR_TAG
|
|
24
|
+
* @extends UI5Element
|
|
26
25
|
* @public
|
|
27
26
|
*/
|
|
28
27
|
@customElement({
|
|
29
28
|
tag: "INIT_PACKAGE_VAR_TAG",
|
|
30
|
-
renderer:
|
|
29
|
+
renderer: jsxRenderer,
|
|
31
30
|
styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
|
|
32
31
|
template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
|
|
33
32
|
})
|
|
34
33
|
class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
|
|
34
|
+
@i18n("INIT_PACKAGE_VAR_NAME")
|
|
35
35
|
static i18nBundle: I18nBundle;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
/**
|
|
38
|
+
* Defines the component count.
|
|
39
|
+
* @default 0
|
|
40
|
+
* @public
|
|
41
|
+
*/
|
|
42
|
+
@property({ type: Number })
|
|
43
|
+
count = 0;
|
|
44
|
+
|
|
45
|
+
onClick() {
|
|
46
|
+
this.count++;
|
|
39
47
|
}
|
|
40
48
|
|
|
41
|
-
get
|
|
42
|
-
return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(
|
|
49
|
+
get counterText() {
|
|
50
|
+
return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
|
|
43
51
|
}
|
|
44
52
|
}
|
|
45
53
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type INIT_PACKAGE_VAR_CLASS_NAME from "./INIT_PACKAGE_VAR_CLASS_NAME.js";
|
|
2
|
+
|
|
3
|
+
export default function INIT_PACKAGE_VAR_CLASS_NAMETemplate(this: INIT_PACKAGE_VAR_CLASS_NAME) {
|
|
4
|
+
return (
|
|
5
|
+
<div class="root" onClick={this.onClick}>
|
|
6
|
+
{this.counterText} :: {this.count}
|
|
7
|
+
</div>
|
|
8
|
+
);
|
|
9
|
+
}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
1
|
+
# the "counter" text for the sample component
|
|
2
|
+
COUNT=Count
|
|
3
|
+
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
COUNT=Zählung
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
COUNT=Count
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
COUNT=Cuenta
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
COUNT=Comte
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
.root {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
padding: 0 2rem;
|
|
7
|
+
color: var(--sapAvatar_6_TextColor);
|
|
8
|
+
background-color: var(--sapAvatar_6_Background);
|
|
9
|
+
border: 2px solid var(--my-component-border-color);
|
|
10
|
+
border-radius: 0.5rem;
|
|
11
|
+
box-shadow: var(--sapContent_Shadow0);
|
|
12
|
+
text-align: center;
|
|
13
|
+
line-height: 3rem;
|
|
14
|
+
font-size: 1.25rem;
|
|
15
|
+
user-select: none;
|
|
16
|
+
cursor: pointer;
|
|
11
17
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
body {
|
|
2
|
+
color: var(--sapTextColor);
|
|
3
|
+
background-color: var(--sapBackgroundColor);
|
|
4
|
+
font-size: var(--sapFontSize);
|
|
5
|
+
font-family: var(--sapFontFamily);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
h1 {
|
|
9
|
+
font-size: var(--sapFontHeader2Size);
|
|
10
|
+
margin-bottom: 0.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
h2 {
|
|
14
|
+
font-size: var(--sapFontHeader3Size);
|
|
15
|
+
margin-bottom: 0.5rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.app, .app-settings, .app-docs, .app-first-component {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.app-logo {
|
|
26
|
+
height: 230px;
|
|
27
|
+
width: 230px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.app-first-component {
|
|
31
|
+
margin-bottom: 3rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.app-docs {
|
|
35
|
+
margin-top: 3rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a {
|
|
39
|
+
margin: 0.25rem;
|
|
40
|
+
color: var(--sapLinkColor);
|
|
41
|
+
}
|
|
Binary file
|
|
@@ -10,44 +10,48 @@
|
|
|
10
10
|
|
|
11
11
|
<script data-ui5-config type="application/json">
|
|
12
12
|
{
|
|
13
|
+
"theme": "sap_horizon_dark",
|
|
13
14
|
"language": "EN"
|
|
14
15
|
}
|
|
15
16
|
</script>
|
|
16
17
|
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="./css/index.css">
|
|
17
19
|
<script src="../../bundle.esm.js" type="module"></script>
|
|
18
|
-
|
|
19
|
-
<style>
|
|
20
|
-
code { color: blue; font-size: small; }
|
|
21
|
-
</style>
|
|
22
|
-
|
|
23
20
|
</head>
|
|
24
21
|
|
|
25
22
|
<body>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
23
|
+
<div class="app">
|
|
24
|
+
<a href="https://sap.github.io/ui5-webcomponents/docs/getting-started/first-steps/" target="_blank"><img src="./img/logo.png" class="app-logo" 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/docs/development/custom-UI5-Web-Components-Packages/">Custom Component Development</a>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
51
56
|
</body>
|
|
52
|
-
|
|
53
57
|
</html>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { assert } from "chai";
|
|
2
2
|
|
|
3
3
|
describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
|
|
4
4
|
before(async () => {
|
|
@@ -6,7 +6,6 @@ describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
|
|
|
6
6
|
});
|
|
7
7
|
|
|
8
8
|
it("tests if web component is correctly rendered", async () => {
|
|
9
|
-
|
|
10
9
|
const innerContent = await browser.$("#myFirstComponent").shadow$("div");
|
|
11
10
|
|
|
12
11
|
assert.ok(innerContent, "content rendered");
|
package/template/tsconfig.json
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
}
|
|
2
|
+
"extends": "@ui5/webcomponents-tools/tsconfig.json",
|
|
3
|
+
"include": [
|
|
4
|
+
"src/**/*",
|
|
5
|
+
"global.d.ts"
|
|
6
|
+
],
|
|
7
|
+
"compilerOptions": {
|
|
8
|
+
"outDir": "dist",
|
|
9
|
+
"experimentalDecorators": true,
|
|
10
|
+
"module": "NodeNext",
|
|
11
|
+
"moduleResolution": "NodeNext",
|
|
12
|
+
},
|
|
13
|
+
}
|
|
@@ -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
|
package/template/global.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line
|
|
2
|
-
import "@ui5/webcomponents-base/dist/global";
|
|
3
|
-
import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
|
|
4
|
-
|
|
5
|
-
export {};
|
|
6
|
-
|
|
7
|
-
declare global {
|
|
8
|
-
module "*.lit.js" {
|
|
9
|
-
const content: TemplateFunction;
|
|
10
|
-
export default content;
|
|
11
|
-
}
|
|
12
|
-
}
|
package/template/src/Assets.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
|