@ui5/create-webcomponents-package 0.0.0-6298a142d → 0.0.0-69dbc5a15

package/README.md

@@ -1,6 +1,4 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
-
-# UI5 Web Components - Create Package
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Create Package
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
@@ -18,9 +16,8 @@ Usage:
 
 Options:
     --name <string>     - defines the package name
-    --componentName <string>      - defines the component class name that will be created in your new package
-    --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. 
-    --enable-typescript - enables TypeScript support for the package
+    --component-name <string>      - defines the component class name that will be created in your new package
+    --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.
     --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
 
@@ -34,8 +31,8 @@ Usage:
     yarn create @ui5/webcomponents-package [OPTIONS]
 Options:
     --name <string>     - defines the package name
+    --component-name <string>      - defines the component class name that will be created in your new package
     --tag <string>      - defines the tag name of the sample web component that will be created in your new package
-    --enable-typescript - enables TypeScript support for the package
     --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
 
@@ -45,10 +42,10 @@ components package.
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
-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/).
+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/).
 
 ## Contribute
 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

@@ -15,26 +15,20 @@ const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))
 // from where all the files will be copied
 const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
 
-// String utils
-const isTSRelatedFile = sourcePath => {
-	return ["Assets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
-};
-const isJSRelatedFile = sourcePath => {
-	return ["Assets.js", "MyFirstComponent.js"].some(fileName => sourcePath.includes(fileName));
-};
 const isGitIgnore = sourcePath => {
 	return sourcePath.includes("gitignore");
 };
+const isLogo = sourcePath => {
+	return sourcePath.includes("logo");
+};
 const isNPMRC = sourcePath => {
 	return sourcePath.includes("npmrc");
 };
 
 // Validation of user input
 const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
-const NamespacePattern = /^[a-z][a-z0-9\.\-]+$/;
 const isPackageNameValid = name => typeof name === "string" && name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/);
 const isComponentNameValid = name => typeof name === "string" && ComponentNamePattern.test(name);
-const isNamespaceValid = name => typeof name === "string" && NamespacePattern.test(name);
 const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
 
 /**
@@ -62,10 +56,8 @@ const replaceVarsInFileName = (vars, fileName) => {
 };
 
 const copyFile = (vars, sourcePath, destPath) => {
-	const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && isJSRelatedFile(sourcePath);
-	const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTSRelatedFile(sourcePath);
-
-	if (ignoreJsRelated || ignoreTsRelated) {
+	if (isLogo(sourcePath)) {
+		fs.copyFileSync(sourcePath, destPath);
 		return;
 	}
 
@@ -100,16 +92,14 @@ const copyFiles = (vars, sourcePath, destPath) => {
 	}
 };
 
-const generateFilesContent = (packageName, componentName, namespace, typescript, skipSubfolder) => {
+const generateFilesContent = (packageName, componentName, skipSubfolder) => {
 	const tagName = argv.tag || hyphaneteComponentName(componentName);
 
 	// All variables that will be replaced in the content of the resources/
 	const vars = {
-		INIT_PACKAGE_VAR_NAMESPACE: namespace, // namespace must be replaced before name
 		INIT_PACKAGE_VAR_NAME: packageName,
 		INIT_PACKAGE_VAR_TAG: tagName,
 		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
-		INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
 	};
 
 	const packageContent = {
@@ -118,6 +108,7 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 		ui5: {
 			webComponentsPackage: true,
 		},
+		type: "module",
 		scripts: {
 			"clean": "wc-dev clean",
 			"lint": "wc-dev lint",
@@ -142,13 +133,10 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 		"devDependencies": {
 			"@ui5/webcomponents-tools": version,
 			"chromedriver": "*",
+			"typescript": "^5.6.2"
 		},
 	};
 
-	if (typescript) {
-		packageContent.devDependencies.typescript = "^4.9.4";
-	}
-
 	// Update package.json
 	let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
 
@@ -188,22 +176,16 @@ const createWebcomponentsPackage = async () => {
 		throw new Error("The component name should be a string, starting with a capital letter [A-Z][a-z], for example: Button, MyButton, etc.");
 	}
 
-	if (argv.namespace && !isNamespaceValid(argv.namespace)) {
-		throw new Error("The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.");
-	}
-
 	if (argv.tag && !isTagValid(argv.tag) ) {
 		throw new Error("The tag should be in kebab-case (f.e my-component) and it can't be a single word.");
 	}
 
 	let packageName = argv.name || "my-package";
 	let componentName = argv.componentName || "MyComponent";
-	let namespace = argv.namespace || "demo.components";
-	let typescriptSupport = !!argv.enableTypescript;
 	const skipSubfolder = !!argv.skipSubfolder;
 
 	if (argv.skip) {
-		return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
+		return generateFilesContent(packageName, componentName, skipSubfolder);
 	}
 
 	if (!argv.name) {
@@ -216,25 +198,6 @@ const createWebcomponentsPackage = async () => {
 		packageName = response.name;
 	}
 
-	if (!typescriptSupport) {
-		response = await prompts({
-			type: "select",
-			name: "language",
-			message: "Project type:",
-			choices: [
-				{
-					title: "JavaScript",
-					value: false,
-				},
-				{
-					title: "TypeScript",
-					value: true,
-				},
-			],
-		});
-		typescriptSupport = response.language;
-	}
-
 	if (!argv.componentName) {
 		response = await prompts({
 			type: "text",
@@ -246,18 +209,7 @@ const createWebcomponentsPackage = async () => {
 		componentName = response.componentName;
 	}
 
-	if (!argv.namespace) {
-		response = await prompts({
-			type: "text",
-			name: "namespace",
-			message: "JSDoc namespace:",
-			initial: "demo.components",
-			validate: (value) => isNamespaceValid(value) ? true : "The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.",
-		});
-		namespace = response.namespace;
-	}
-
-	return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
+	return generateFilesContent(packageName, componentName, skipSubfolder);
 };
 
 createWebcomponentsPackage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-6298a142d",
+  "version": "0.0.0-69dbc5a15",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

package/template/.eslintignore

@@ -2,5 +2,4 @@
 dist
 test
 src/generated
-jsdoc-dist
-.eslintrc.js
+.eslintrc.cjs

package/template/.npsrc.json

@@ -0,0 +1,3 @@
+{
+	"config": "./package-scripts.cjs"
+}

package/template/bundle.esm.js

@@ -6,7 +6,6 @@ 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
@@ -25,7 +24,6 @@ window["sap-ui-webcomponents-bundle"] = {
 		getNoConflict,
 		setNoConflict,
 		getCalendarType,
-		getRTL,
 		getFirstDayOfWeek,
 	},
 };

package/template/gitignore

@@ -1,4 +1,3 @@
 node_modules
 dist
-jsdoc-dist
 src/generated

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/src/MyFirstComponent.ts

@@ -1,17 +1,17 @@
 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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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";
+import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./INIT_PACKAGE_VAR_CLASS_NAMETemplate.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";
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -21,14 +21,12 @@ import { COUNTER } from "./generated/i18n/i18n-defaults.js";
  * 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,
+	renderer: jsxRenderer,
 	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
 	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
 })
@@ -40,20 +38,19 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 	}
 
 	/**
-	 * Defines the component counter.
-	 * @name NIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.counter
+	 * Defines the component count.
+	 * @default 0
 	 * @public
-	 * @type { number }
 	 */
-	@property({ defaultValue: 0 })
-	counter!: number;
+	@property({ type: Number })
+	count = 0;
 
 	onClick() {
-		this.counter++;
+		this.count++;
 	}
 
 	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
 	}
 }
 

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_NAMETemplate(this: INIT_PACKAGE_VAR_CLASS_NAME) {
+	return (
+		<div class="root" onClick={this.onClick}>
+			{this.counterText} :: {this.count}
+		</div>
+	);
+}

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

@@ -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

@@ -15,13 +15,18 @@ h2 {
 	margin-bottom: 0.5rem;
 }
 
-.app, .app-first-component, .app-settings, .app-docs  {
+.app, .app-settings, .app-docs, .app-first-component  {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 }
 
+.app-logo {
+	height: 230px;
+	width: 230px;
+}
+
 .app-first-component {
 	margin-bottom: 3rem;
 }
@@ -33,4 +38,4 @@ h2 {
 a {
 	margin: 0.25rem;
 	color: var(--sapLinkColor);
-}
+}

package/template/test/pages/index.html

@@ -14,21 +14,21 @@
 			"language": "EN"
 		}
 	</script>
-	
+
 	<link rel="stylesheet" type="text/css" href="./css/index.css">
 	<script src="../../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>
+		<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>
@@ -38,7 +38,7 @@
 				<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>
-		
+
 			<h2>Switch language</h2>
 			<div>
 				<a class="link" href="?sap-ui-language=en">English</a>
@@ -50,7 +50,7 @@
 
 		<div class="app-docs">
 			<h2>Documentation</h2>
-			<a class="link" href="https://sap.github.io/ui5-webcomponents/playground/development">Custom Component Development</a>
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/docs/development/custom-UI5-Web-Components-Packages/">Custom Component Development</a>
 		</div>
 	</div>
 </body>

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

@@ -1,4 +1,4 @@
-const assert = require("assert");
+import { assert } from "chai";
 
 describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
 	before(async () => {

package/template/tsconfig.json

@@ -1,15 +1,13 @@
 {
-    "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": {
+		"outDir": "dist",
+		"experimentalDecorators": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+	},
+}

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/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;