@ui5/create-webcomponents-package 0.0.0-9261ac932 → 0.0.0-95afb1087

package/template/src/MyFirstComponent.ts

@@ -1,15 +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";
 
 // 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";
 
@@ -18,25 +18,22 @@ 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
  * @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.
 	 * @default 0
@@ -50,10 +47,10 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 	}
 
 	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}

@@ -9,11 +9,12 @@ import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/confi
 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: {

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,31 +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-nav {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	justify-content: flex-end;
 }
 
 .app-logo {
-	height: 230px;
-	width: 230px;
+	height: 5rem;
+	width: 5rem;
 }
 
-.app-first-component {
-	margin-bottom: 3rem;
+.app-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 
-.app-docs {
-	margin-top: 3rem;
+.app-main {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	padding-top: 2rem;
 }
 
-a {
-	margin: 0.25rem;
-	color: var(--sapLinkColor);
+.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/docs/getting-started/first-steps/" target="_blank"><img src="./img/logo.png" class="app-logo" 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://ui5.github.io/webcomponents/">Website</a>
+			<a class="link" href="https://ui5.github.io/webcomponents/components/">Components</a>
+			<a class="link" href="https://ui5.github.io/webcomponents/docs/development/package/">Development</a>
+		</nav>
+
+		<header class="app-header">
+			<a href="https://ui5.github.io/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/docs/development/custom-UI5-Web-Components-Packages/">Custom Component Development</a>
-		</div>
+		</main>
 	</div>
 </body>
 </html>

package/template/{tsconfig.json → tsconfig.template.json}

@@ -5,9 +5,10 @@
 		"global.d.ts"
 	],
 	"compilerOptions": {
+		{{INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG}}
 		"outDir": "dist",
 		"experimentalDecorators": true,
 		"module": "NodeNext",
-		"moduleResolution": "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/wdio.conf.cjs

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

package/template/src/MyFirstComponent.hbs

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

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 @@
-import { assert } from "chai";
-
-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");
-	});
-});