@ui5/create-webcomponents-package 0.0.0-b0b835975 → 0.0.0-b132dd7b9

package/template/cypress/tsconfig.template.json

@@ -0,0 +1,19 @@
+{
+    "include": [
+        "./**/*"
+    ],
+    "compilerOptions": {
+        "module": "NodeNext",
+        "moduleResolution": "nodenext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "@ui5/webcomponents-base",
+        "types": [
+            "cypress"
+        ]
+    },
+    "references": [
+        {
+            "path": "../"
+        }
+    ]
+}

package/template/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "@ui5/cypress-ct-ui5-webc" as any,
+      bundler: "vite",
+    },
+  },
+});

package/template/env

@@ -0,0 +1 @@
+VITE_BUNDLE_PATH="../../dist/bundle.esm.js"

package/template/gitignore

@@ -1,4 +1,4 @@
 node_modules
 dist
-jsdoc-dist
-src/generated
+src/generated
+.dev-server-port

package/template/{package-scripts.js → package-scripts.cjs}

@@ -2,7 +2,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
 	port: 8080,
-	typescript: INIT_PACKAGE_VAR_TYPESCRIPT,
 };
 
 const scripts = getScripts(options);

package/template/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "{{INIT_PACKAGE_VAR_NAME}}",
+    "version": "0.0.1",
+    "ui5": {
+        "webComponentsPackage": true
+    },
+    "type": "module",
+    "scripts": {
+        "clean": "wc-dev clean",
+        "lint": "wc-dev lint",
+        "start": "wc-dev start",
+        "watch": "wc-dev watch",
+        "build": "wc-dev build",
+        {{INIT_PACKAGE_CYPRESS_TEST_COMMANDS}}
+        "create-ui5-element": "wc-create-ui5-element",
+        "prepublishOnly": "npm run build"
+    },
+    "exports": {
+        "./src/*": "./src/*",
+        "./dist/*": "./dist/*",
+        "./package.json": "./package.json",
+        "./bundle.js": "./bundle.js",
+        "./*": "./dist/*"
+    },
+    "dependencies": {
+        "@ui5/webcomponents-base": "{{INIT_PACKAGE_VERSION}}",
+        "@ui5/webcomponents-theming": "{{INIT_PACKAGE_VERSION}}"
+    },
+    "devDependencies": {
+        {{INIT_PACKAGE_CYPRESS_DEV_DEPS}}
+        "@ui5/webcomponents-tools": "{{INIT_PACKAGE_VERSION}}",
+        "chromedriver": "*",
+        "typescript": "^5.6.2"
+    }
+}

package/template/src/Assets.ts

@@ -1,5 +1,5 @@
 import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
 
-// own INIT_PACKAGE_VAR_NAME package assets
+// own {{INIT_PACKAGE_VAR_NAME}} package assets
 import "./generated/json-imports/Themes.js";
 import "./generated/json-imports/i18n.js";

package/template/src/MyFirstComponent.ts

@@ -1,16 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 // Template
-import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Template from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}Template.js";
 
 // Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Css from "./generated/themes/{{INIT_PACKAGE_VAR_CLASS_NAME}}.css.js";
 
 import { COUNT } from "./generated/i18n/i18n-defaults.js";
 
@@ -19,45 +18,39 @@ import { COUNT } from "./generated/i18n/i18n-defaults.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
+ * The <code>{{INIT_PACKAGE_VAR_TAG}}</code> component is a demo component that displays some text.
  *
  * @constructor
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
+ * @extends UI5Element
  * @public
  */
 @customElement({
-	tag: "INIT_PACKAGE_VAR_TAG",
-	renderer: litRender,
-	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
-	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
+	tag: "{{INIT_PACKAGE_VAR_TAG}}",
+	renderer: jsxRenderer,
+	styles: {{INIT_PACKAGE_VAR_CLASS_NAME}}Css,
+	template: {{INIT_PACKAGE_VAR_CLASS_NAME}}Template,
 })
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+class {{INIT_PACKAGE_VAR_CLASS_NAME}} extends UI5Element {
+	@i18n("{{INIT_PACKAGE_VAR_NAME}}")
 	static i18nBundle: I18nBundle;
 
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
-	}
-
 	/**
 	 * Defines the component count.
-	 * @name INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.count
+	 * @default 0
 	 * @public
-	 * @type { sap.ui.webc.base.types.Integer }
 	 */
-	@property({ validator: Integer, defaultValue: 0 })
-	count!: number;
+	@property({ type: Number })
+	count = 0;
 
 	onClick() {
 		this.count++;
 	}
 
 	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
+		return {{INIT_PACKAGE_VAR_CLASS_NAME}}.i18nBundle.getText(COUNT);
 	}
 }
 
-INIT_PACKAGE_VAR_CLASS_NAME.define();
+{{INIT_PACKAGE_VAR_CLASS_NAME}}.define();
 
-export default INIT_PACKAGE_VAR_CLASS_NAME;
+export default {{INIT_PACKAGE_VAR_CLASS_NAME}};

package/template/src/MyFirstComponentTemplate.tsx

@@ -0,0 +1,9 @@
+import type {{INIT_PACKAGE_VAR_CLASS_NAME}} from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+export default function {{INIT_PACKAGE_VAR_CLASS_NAME}}Template(this: {{INIT_PACKAGE_VAR_CLASS_NAME}}) {
+	return (
+		<div class="root" onClick={this.onClick}>
+			{this.counterText} :: {this.count}
+		</div>
+	);
+}

package/template/{bundle.esm.js → src/bundle.esm.ts}

@@ -6,15 +6,15 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 
 // Enable additional themes and i18n texts
-import "./dist/Assets.js";
+import "./Assets.js";
 
-// Import your web components here from the dist/ directory
-import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
+// Import your web components here from the src/ directory
+import "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
 
+// @ts-expect-error
 window["sap-ui-webcomponents-bundle"] = {
 	renderFinished,
 	configuration: {
@@ -25,7 +25,6 @@ window["sap-ui-webcomponents-bundle"] = {
 		getNoConflict,
 		setNoConflict,
 		getCalendarType,
-		getRTL,
 		getFirstDayOfWeek,
 	},
 };

package/template/src/themes/MyFirstComponent.css

@@ -1,4 +1,4 @@
-:host {
+.root {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -13,4 +13,5 @@
 	line-height: 3rem;
 	font-size: 1.25rem;
 	user-select: none;
+	cursor: pointer;
 }

package/template/test/pages/css/index.css

@@ -3,6 +3,7 @@ body {
 	background-color: var(--sapBackgroundColor);
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
+	padding: 2rem;
 }
 
 h1 {
@@ -11,26 +12,78 @@ h1 {
 }
 
 h2 {
-	font-size: var(--sapFontHeader3Size);
-	margin-bottom: 0.5rem;
+	font-size: var(--sapFontHeader4Size);
+}
+
+a {
+	margin: 0.25rem;
+	padding: 0.5rem;
+}
+
+a.link {
+	color: var(--sapLinkColor);
 }
 
-.app, .app-settings, .app-docs, .app-first-component  {
+a.theme-link {
+	color: var(--sapButton_Emphasized_TextColor);
+	background-color: var(--sapButton_Emphasized_Background);
+	text-decoration: none;
+	border-radius: 0.25rem;
+}
+
+a.lang-link {
+	color: var(--sapButton_Attention_TextColor);
+	background-color: var(--sapButton_Attention_Background);
+	text-decoration: none;
+	border-radius: 0.25rem;
+}
+
+.app {
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	flex-direction: column;
+	align-items: center;
 }
 
-.app-first-component {
-	margin-bottom: 3rem;
+.app-nav {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	justify-content: flex-end;
 }
 
-.app-docs {
-	margin-top: 3rem;
+.app-logo {
+	height: 5rem;
+	width: 5rem;
 }
 
-a {
-	margin: 0.25rem;
-	color: var(--sapLinkColor);
+.app-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.app-main {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	padding-top: 2rem;
+}
+
+.app-main-demo {
+	padding: 2rem;
+	border-radius: 0.5rem;
+	box-sizing: border-box;
+	background-color: var(--sapTile_Background);
+}
+
+.app-main-settings  {
+	display: flex;
+	flex-direction: column;
+	padding: 0 2rem;
+}
+
+@media (max-width: 768px) {
+	.app-main {
+		flex-direction: column;
+	}
 }

package/template/test/pages/index.html

@@ -1,57 +1,53 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
 	<meta charset="utf-8">
-
-	<title>INIT_PACKAGE_VAR_TAG</title>
+	<title>UI5 Web Components</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta charset="utf-8">
-
-	<script data-ui5-config type="application/json">
-		{
-			"theme": "sap_horizon_dark",
-			"language": "EN"
-		}
-	</script>
-
 	<link rel="stylesheet" type="text/css" href="./css/index.css">
-	<script src="../../bundle.esm.js" type="module"></script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 </head>
 
 <body>
 	<div class="app">
-		<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>
-
-		<div class="app-first-component">
-			<h1>Hooray! It's Your First Web Component!</h1>
-			<div> <pre>&lt;INIT_PACKAGE_VAR_TAG>&lt;/INIT_PACKAGE_VAR_TAG> </pre></div>
-			<INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
-		</div>
-
-		<div class="app-settings">
-
-			<h2>Switch themes</h2>
-			<div style="display: flex; flex-direction: row;">
-				<a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
-				<a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
-				<a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
-				<a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
+		<nav class="app-nav">
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/">Website</a>
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/components/">Components</a>
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/docs/development/package/">Development</a>
+		</nav>
+
+		<header class="app-header">
+			<a href="https://sap.github.io/ui5-webcomponents/" target="_blank"><img src="./img/logo.png" class="app-logo" alt="logo"/></a>
+			<h1>UI5 Web Components</h1>
+		</header>
+		
+		<main class="app-main">
+			<div class="app-main-demo">
+				<h2>Congrats! It's your First Web Component 🎉</h2>
+				<div> <pre>&lt;{{INIT_PACKAGE_VAR_TAG}}>&lt;/{{INIT_PACKAGE_VAR_TAG}}> </pre></div>
+				<{{INIT_PACKAGE_VAR_TAG}} id="myFirstComponent"></{{INIT_PACKAGE_VAR_TAG}}>
 			</div>
 
-			<h2>Switch language</h2>
-			<div>
-				<a class="link" href="?sap-ui-language=en">English</a>
-				<a class="link" href="?sap-ui-language=de">German</a>
-				<a class="link" href="?sap-ui-language=es">Spanish</a>
-				<a class="link" href="?sap-ui-language=fr">French</a>
+			<div class="app-main-settings">
+				<h3>Switch theme</h3>
+				<div style="display: grid; grid-template-columns: 1fr 1fr;">
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon">Horizon Morning</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_dark">Horizon Evening</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcb">High Contrast Black</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcw">High Contrast White</a>
+				</div>
+			
+				<h3>Switch language</h3>
+				<div style="display: grid; grid-template-columns: 1fr 1fr;">
+					<a class="link lang-link" href="?sap-ui-language=en">English</a>
+					<a class="link lang-link" href="?sap-ui-language=de">German</a>
+					<a class="link lang-link" href="?sap-ui-language=es">Spanish</a>
+					<a class="link lang-link" href="?sap-ui-language=fr">French</a>
+				</div>
 			</div>
-		</div>
-
-		<div class="app-docs">
-			<h2>Documentation</h2>
-			<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>
-		</div>
+		</main>
 	</div>
 </body>
 </html>

package/template/tsconfig.template.json

@@ -0,0 +1,14 @@
+{
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"src/**/*",
+		"global.d.ts"
+	],
+	"compilerOptions": {
+		{{INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG}}
+		"outDir": "dist",
+		"experimentalDecorators": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	},
+}

package/template/vite.config.js

@@ -0,0 +1,14 @@
+import viteConfig from "@ui5/webcomponents-tools/components-package/vite.config.js"; //eslint-disable-line
+
+// Modifying the default Vite configuration provided by the @ui5/webcomponents-tools package.
+// You can directly access and update the properties you need to change.
+// Ensure that the property exists before modifying it to avoid unintended errors.
+// For available configuration options, refer to: https://vite.dev/config/#configuring-vite
+//
+// Ensure the plugins array exists
+// viteConfig.plugins = viteConfig.plugins || [];
+//
+// Push a new fake plugin
+// viteConfig.plugins.push({ name: 'my-custom-plugin' });
+
+export default viteConfig;

package/template/config/postcss.components/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line

package/template/config/postcss.themes/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line

package/template/config/wdio.conf.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js"); // eslint-disable-line

package/template/src/Assets.js

@@ -1,5 +0,0 @@
-import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
-
-// own INIT_PACKAGE_VAR_NAME package assets
-import "./generated/json-imports/Themes.js";
-import "./generated/json-imports/i18n.js";

package/template/src/MyFirstComponent.hbs

@@ -1 +0,0 @@
-<div @click="{{onClick}}">{{counterText}} :: {{count}}</div>

package/template/src/MyFirstComponent.js

@@ -1,82 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-
-// Template
-import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
-
-// Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
-
-import { COUNT } from "./generated/i18n/i18n-defaults.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "INIT_PACKAGE_VAR_TAG",
-	properties: /** @lends INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype */ {
-		/**
-		 * Defines the count of the component.
-		 * @type { sap.ui.webc.base.types.Integer }
-		 * @defaultvalue 0
-		 * @public
-		 */
-		count: {
-			type: Integer,
-			defaultValue: 0,
-		},
-	},
-	slots: {
-	},
-	events: {
-	},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
- *
- * @constructor
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
- * @public
- */
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
-	}
-
-	static get styles() {
-		return INIT_PACKAGE_VAR_CLASS_NAMECss;
-	}
-
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
-	}
-
-	onClick() {
-		this.count++;
-	}
-
-	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
-	}
-}
-
-INIT_PACKAGE_VAR_CLASS_NAME.define();
-
-export default INIT_PACKAGE_VAR_CLASS_NAME;

package/template/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: blue;
-}

package/template/test/specs/Demo.spec.js

@@ -1,13 +0,0 @@
-const assert = require("assert");
-
-describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
-	before(async () => {
-		await browser.url("test/pages/index.html");
-	});
-
-	it("tests if web component is correctly rendered", async () => {
-		const innerContent = await browser.$("#myFirstComponent").shadow$("div");
-
-		assert.ok(innerContent, "content rendered");
-	});
-});

package/template/tsconfig.json

@@ -1,15 +0,0 @@
-{
-    "include": ["src/**/*", "global.d.ts"],
-    "compilerOptions": {
-      "target": "ES2021",
-      // Generate d.ts files
-      "declaration": true,
-      "outDir": "dist",
-      "skipLibCheck": true,
-      "sourceMap": true,
-      "inlineSources": true,
-      "strict": true,
-      "moduleResolution": "node",
-      "experimentalDecorators": true,
-    },
-}