@ui5/create-webcomponents-package 0.0.0-6298a142d → 0.0.0-6827fdc09

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/DemoCounter.ts

@@ -0,0 +1,56 @@
+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 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 DemoCounterTemplate from "./DemoCounterTemplate.js";
+
+// Styles
+import DemoCounterCss from "./generated/themes/DemoCounter.css.js";
+
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>demo-counter</code> component is a demo component that increases a number upon click.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+	tag: "demo-counter",
+	renderer: jsxRenderer,
+	styles: DemoCounterCss,
+	template: DemoCounterTemplate,
+})
+class DemoCounter extends UI5Element {
+	@i18n("{{INIT_PACKAGE_VAR_NAME}}")
+	static i18nBundle: I18nBundle;
+
+	/**
+	 * Defines the component count.
+	 * @default 0
+	 * @public
+	 */
+	@property({ type: Number })
+	count = 0;
+
+	onClick() {
+		this.count++;
+	}
+
+	get counterText() {
+		return DemoCounter.i18nBundle.getText(COUNT);
+	}
+}
+
+DemoCounter.define();
+
+export default DemoCounter;

package/template/src/DemoCounterTemplate.tsx

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

package/template/src/bundle.esm.ts

@@ -0,0 +1,7 @@
+// Entry point for all components and resources used in the test pages
+
+// Themes and i18n texts
+import "./Assets.js";
+
+// Web components
+import "./DemoCounter.js";

package/template/src/i18n/messagebundle.properties

@@ -1,3 +1,3 @@
 # the "counter" text for the sample component
-COUNTER=Counter
+COUNT=Count
 

package/template/src/i18n/messagebundle_de.properties

@@ -1 +1 @@
-COUNTER=Schalter
+COUNT=Zählung

package/template/src/i18n/messagebundle_en.properties

@@ -1 +1 @@
-COUNTER=Counter
+COUNT=Count

package/template/src/i18n/messagebundle_es.properties

@@ -1 +1 @@
-COUNTER=Encimera
+COUNT=Cuenta

package/template/src/i18n/messagebundle_fr.properties

@@ -1 +1 @@
-COUNTER=Comptoir
+COUNT=Comte

package/template/src/themes/{MyFirstComponent.css → DemoCounter.css}

@@ -1,4 +1,8 @@
-:host {
+.root {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
 	padding: 0 2rem;
 	color: var(--sapAvatar_6_TextColor);
 	background-color: var(--sapAvatar_6_Background);
@@ -9,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,76 @@ 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-first-component, .app-settings, .app-docs  {
+a.theme-link {
+	color: var(--sapButton_Emphasized_TextColor);
+	background-color: var(--sapButton_Emphasized_Background);
+	text-decoration: none;
+}
+
+a.lang-link {
+	color: var(--sapButton_Attention_TextColor);
+	background-color: var(--sapButton_Attention_Background);
+	text-decoration: none;
+}
+
+.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="../../dist/bundle.esm.js" type="module"></script>
 </head>
 
 <body>
 	<div class="app">
-		<a href="https://sap.github.io/ui5-webcomponents/playground/getting-started" 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">
+		<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>
 
-			<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>
-			</div>
+		<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>
 		
-			<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>
+		<main class="app-main">
+			<div class="app-main-demo">
+				<h2>Congrats! It's your First Web Component 🎉</h2>
+				<div> <pre>&lt;demo-counter>&lt;/demo-counter> </pre></div>
+				<demo-counter id="myFirstComponent"></demo-counter>
 			</div>
-		</div>
 
-		<div class="app-docs">
-			<h2>Documentation</h2>
-			<a class="link" href="https://sap.github.io/ui5-webcomponents/playground/development">Custom Component Development</a>
-		</div>
+			<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>
+		</main>
 	</div>
 </body>
 </html>

package/template/tsconfig.json

@@ -1,15 +1,14 @@
 {
-    "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,
-    },
-}
+	"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/bundle.esm.js

@@ -1,31 +0,0 @@
-// used in test pages
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-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 your web components here from the dist/ directory
-import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
-
-window["sap-ui-webcomponents-bundle"] = {
-	renderFinished,
-	configuration: {
-		getAnimationMode,
-		getLanguage,
-		getTheme,
-		setTheme,
-		getNoConflict,
-		setNoConflict,
-		getCalendarType,
-		getRTL,
-		getFirstDayOfWeek,
-	},
-};

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/vite.config.js

@@ -1,4 +0,0 @@
-// vite.config.js
-const config = require("@ui5/webcomponents-tools/components-package/vite.config.js"); // eslint-disable-line
-config.server = { open: "/test/pages/index.html" };
-module.exports = config;

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}} :: {{counter}}</div>

package/template/src/MyFirstComponent.js

@@ -1,80 +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";
-
-// 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 { COUNTER } 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 counter of the component.
-		 * @type { number }
-		 * @defaultvalue 0
-		 * @public
-		 */
-		counter: {
-			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.counter++;
-	}
-
-	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
-	}
-}
-
-INIT_PACKAGE_VAR_CLASS_NAME.define();
-
-export default INIT_PACKAGE_VAR_CLASS_NAME;

package/template/src/MyFirstComponent.ts

@@ -1,62 +0,0 @@
-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 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";
-
-// Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
-
-import { COUNTER } from "./generated/i18n/i18n-defaults.js";
-
-/**
- * @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
- */
-@customElement({
-	tag: "INIT_PACKAGE_VAR_TAG",
-	renderer: litRender,
-	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
-	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
-})
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
-	static i18nBundle: I18nBundle;
-
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
-	}
-
-	/**
-	 * Defines the component counter.
-	 * @name NIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.counter
-	 * @public
-	 * @type { number }
-	 */
-	@property({ defaultValue: 0 })
-	counter!: number;
-
-	onClick() {
-		this.counter++;
-	}
-
-	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
-	}
-}
-
-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");
-	});
-});