@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.
Files changed (35) hide show
  1. package/CHANGELOG.md +1198 -0
  2. package/README.md +6 -9
  3. package/create-package.js +21 -55
  4. package/package.json +1 -1
  5. package/template/.eslintignore +1 -2
  6. package/template/.npsrc.json +3 -0
  7. package/template/bundle.esm.js +0 -2
  8. package/template/gitignore +0 -1
  9. package/template/{package-scripts.js → package-scripts.cjs} +0 -1
  10. package/template/src/MyFirstComponent.ts +20 -12
  11. package/template/src/MyFirstComponentTemplate.tsx +9 -0
  12. package/template/src/i18n/messagebundle.properties +3 -2
  13. package/template/src/i18n/messagebundle_de.properties +1 -1
  14. package/template/src/i18n/messagebundle_en.properties +1 -1
  15. package/template/src/i18n/messagebundle_es.properties +1 -1
  16. package/template/src/i18n/messagebundle_fr.properties +1 -1
  17. package/template/src/themes/MyFirstComponent.css +16 -10
  18. package/template/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
  19. package/template/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  20. package/template/test/pages/css/index.css +41 -0
  21. package/template/test/pages/img/logo.png +0 -0
  22. package/template/test/pages/index.html +35 -31
  23. package/template/test/specs/Demo.spec.js +1 -2
  24. package/template/tsconfig.json +12 -14
  25. package/template/config/postcss.components/postcss.config.js +0 -1
  26. package/template/config/postcss.themes/postcss.config.js +0 -1
  27. package/template/global.d.ts +0 -12
  28. package/template/src/Assets.js +0 -5
  29. package/template/src/MyFirstComponent.hbs +0 -1
  30. package/template/src/MyFirstComponent.js +0 -67
  31. package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  32. package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  33. package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  34. /package/template/{.eslintrc.js → .eslintrc.cjs} +0 -0
  35. /package/template/config/{wdio.conf.js → wdio.conf.cjs} +0 -0
package/README.md CHANGED
@@ -1,6 +1,4 @@
1
- ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
2
-
3
- # UI5 Web Components - Create Package
1
+ # ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Create Package
4
2
 
5
3
  [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](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
- --componentName <string> - defines the component class name that will be created in your new package
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/playground/)
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://join-ui5-slack.herokuapp.com/).
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 isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9\-_]+$/);
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
- const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && isJSRelatedFile(sourcePath);
71
- const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTSRelatedFile(sourcePath);
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 = (name, componentName, typescript, skipSubfolder) => {
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: 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
- const destDir = skipSubfolder ? path.join("./") : path.join("./", name);
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 ${name}`);
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 && !isNameValid(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 name = argv.name || "my-package";
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(name, componentName, typescriptSupport, skipSubfolder);
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) => isNameValid(value) ? true : "Package name should be a string, starting with a letter and containing the following symbols [a-z, A-Z ,0-9, _, -].",
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
- typescriptSupport = response.language;
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(name, componentName, typescriptSupport, skipSubfolder);
212
+ return generateFilesContent(packageName, componentName, skipSubfolder);
247
213
  };
248
214
 
249
215
  createWebcomponentsPackage();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/create-webcomponents-package",
3
- "version": "0.0.0-354b6d238",
3
+ "version": "0.0.0-37338d49d",
4
4
  "description": "UI5 Web Components: create package",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -2,5 +2,4 @@
2
2
  dist
3
3
  test
4
4
  src/generated
5
- jsdoc-dist
6
- .eslintrc.js
5
+ .eslintrc.cjs
@@ -0,0 +1,3 @@
1
+ {
2
+ "config": "./package-scripts.cjs"
3
+ }
@@ -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
  };
@@ -1,4 +1,3 @@
1
1
  node_modules
2
2
  dist
3
- jsdoc-dist
4
3
  src/generated
@@ -2,7 +2,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
2
2
 
3
3
  const options = {
4
4
  port: 8080,
5
- typescript: INIT_PACKAGE_VAR_TYPESCRIPT,
6
5
  };
7
6
 
8
7
  const scripts = getScripts(options);
@@ -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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
4
- import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
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 "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
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 { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
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
- * @alias demo.components.INIT_PACKAGE_VAR_CLASS_NAME
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: litRender,
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
- static async onDefine() {
38
- INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
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 pleaseWaitText() {
42
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
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
- #please wait text for the sample component
2
- PLEASE_WAIT=wait
1
+ # the "counter" text for the sample component
2
+ COUNT=Count
3
+
@@ -1 +1 @@
1
- PLEASE_WAIT=Bitte warten
1
+ COUNT=Zählung
@@ -1 +1 @@
1
- PLEASE_WAIT=Please wait
1
+ COUNT=Count
@@ -1 +1 @@
1
- PLEASE_WAIT=Espere
1
+ COUNT=Cuenta
@@ -1 +1 @@
1
- PLEASE_WAIT=Patientez.
1
+ COUNT=Comte
@@ -1,11 +1,17 @@
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;
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
  }
@@ -1,3 +1,3 @@
1
1
  :root {
2
- --my-component-border-color: green;
2
+ --my-component-border-color: blue;
3
3
  }
@@ -1,3 +1,3 @@
1
1
  :root {
2
- --my-component-border-color: blue;
2
+ --my-component-border-color: darkblue;
3
3
  }
@@ -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
- <ul>
27
- <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
28
- <li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
29
- <li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
30
- <li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
31
- <li><a href="?sap-ui-theme=sap_horizon">Horizon</a></li>
32
- <li><a href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a></li>
33
- <li><a href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a></li>
34
- <li><a href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a></li>
35
- </ul>
36
- <br>
37
- <span>or in the browser console, for example:</span>
38
- <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon_hcb")</code>
39
-
40
- <br><br>
41
-
42
- <a href="?sap-ui-language=en">English</a> |
43
- <a href="?sap-ui-language=de">German</a> |
44
- <a href="?sap-ui-language=es">Spanish</a> |
45
- <a href="?sap-ui-language=fr">French</a>
46
-
47
- <br><br>
48
-
49
- <h1>Test your web components here</h1>
50
- <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
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>&lt;INIT_PACKAGE_VAR_TAG>&lt;/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
- const assert = require("assert");
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");
@@ -1,15 +1,13 @@
1
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
- }
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
@@ -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
- }
@@ -1,5 +0,0 @@
1
- import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
2
-
3
- // own INIT_PACKAGE_VAR_NAME package assets
4
- import "./generated/json-imports/Themes.js";
5
- import "./generated/json-imports/i18n.js";
@@ -1 +0,0 @@
1
- <div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>