@ui5/create-webcomponents-package 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/README.md

@@ -1,22 +1,38 @@
-![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)
 
 Provides an `npm init` script for creating new "UI5 Web Components" packages.
 
-## Usage
+## Usage with npm
+
+```
+Usage:
+
+# npm 6.x
+    npm init @ui5/webcomponents-package [OPTIONS]
+# npm 7+, an extra double-dash is needed:
+    npm init @ui5/webcomponents-package -- [OPTIONS]
 
-with `npm`
+Options:
+    --name <string>                      - defines the package name
+    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
+    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
+```
 
-- `npm init @ui5/webcomponents-package` (the user will be asked for **name**, **port**, **tag**);
-- `npm init @ui5/webcomponents-package <NEW-PACKAGE-NAME>` (the user will be asked for **port** and **tag** only).
+The script creates a new directory, and fills it with a `package.json` file and all necessary source files, and resources for a new
+components package.
 
-And with `yarn`
+## Usage with yarn
 
-- `yarn create @ui5/webcomponents-package`
-- `yarn create @ui5/webcomponents-package <NEW-PACKAGE-NAME>`.
+```
+Usage:
+    yarn create @ui5/webcomponents-package [OPTIONS]
+Options:
+    --name <string>                      - defines the package name
+    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
+    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
+```
 
 The script creates a new directory, and fills it with a `package.json` file and all necessary source files, and resources for a new
 components package.
@@ -24,10 +40,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

@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+import fs from "fs/promises";
+import path, { dirname } from "path";
+import prompts from "prompts";
+import parser from "npm-config-user-agent-parser";
+import yargs from "yargs/yargs";
+import { hideBin } from "yargs/helpers";
+import { fileURLToPath } from "url";
+import * as prettier from "prettier";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const argv = yargs(hideBin(process.argv)).argv;
+const VERSION = JSON.parse(
+	await fs.readFile(path.join(__dirname, "package.json")),
+).version;
+
+// Constants
+const SUPPORTED_TEST_SETUPS = ["cypress", "manual"];
+const SRC_DIR = path.join(__dirname, "template");
+const DEST_DIR = process.cwd();
+
+const FILES_TO_RENAME = {
+	"eslintignore": ".eslintignore",
+	"eslintrc.cjs": ".eslintrc.cjs",
+	"npsrc.json": ".npsrc.json",
+	"npmrc": ".npmrc",
+	"env": ".env",
+	"gitignore": ".gitignore",
+	"tsconfig.template.json": "tsconfig.json",
+	"cypress/tsconfig.template.json": "cypress/tsconfig.json"
+};
+const FILES_TO_COPY = ["test/pages/img/logo.png"];
+
+// Validation Patterns
+const PackageNamePattern =
+	/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+const TagPattern = /^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/;
+
+// Utility Functions
+const isPackageNameValid = name =>
+	typeof name === "string" && PackageNamePattern.test(name);
+const isTagValid = tag => typeof tag === "string" && TagPattern.test(tag);
+const isTestSetupValid = setup =>
+	typeof setup === "string" && SUPPORTED_TEST_SETUPS.includes(setup);
+
+async function collectFiles(dir, fileList = []) {
+	const entries = await fs.readdir(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const fullPath = path.join(dir, entry.name);
+		if (entry.isDirectory()) {
+			await collectFiles(fullPath, fileList);
+		} else if (entry.isFile()) {
+			fileList.push(fullPath);
+		}
+	}
+
+	return fileList;
+}
+
+/**
+ * Hyphanates the given PascalCase string, f.e.:
+ * Foo -> "my-foo" (adds preffix)
+ * FooBar -> "foo-bar"
+ */
+const hyphenateComponentName = componentName => {
+	const result = componentName
+		.replace(/([a-z])([A-Z])/g, "$1-$2")
+		.toLowerCase();
+	return result.includes("-") ? result : `my-${result}`;
+};
+
+const replacePlaceholders = (content, replacements) =>
+	content.replace(/{{(.*?)}}/g, (_, key) => replacements[key.trim()] || "");
+
+const generateFilesContent = async (
+	packageName,
+	componentName,
+	skipSubfolder,
+	testSetup,
+) => {
+	// All variables that will be replaced in the content of the template folder/
+	const vars = {
+		INIT_PACKAGE_VAR_NAME: packageName,
+		INIT_PACKAGE_VERSION: VERSION,
+		INIT_PACKAGE_VAR_TAG: argv.tag || hyphenateComponentName(componentName),
+		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
+		INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG:
+			testSetup === "cypress"
+				? `"tsBuildInfoFile": "dist/.tsbuildinfo",\n"rootDir": "src",\n"composite": true,`
+				: "",
+		INIT_PACKAGE_CYPRESS_DEV_DEPS:
+			testSetup === "cypress"
+				? `"@ui5/cypress-ct-ui5-webc": "^0.0.4",\n"cypress": "^13.11.0",`
+				: "",
+		INIT_PACKAGE_CYPRESS_TEST_COMMANDS:
+			testSetup === "cypress"
+				? `"test": "cypress run --component --browser chrome",\n"test:open": "cypress open --component --browser chrome",`
+				: "",
+		INIT_PACKAGE_CYPRESS_ESLINT_IGNORES:
+			testSetup === "cypress" ? `cypress/*\ncypress.config.*` : "",
+	};
+
+	const packageBaseName = packageName.includes("@")
+		? packageName.slice(packageName.lastIndexOf("/") + 1)
+		: packageName;
+	const destDir = skipSubfolder
+		? path.join(DEST_DIR)
+		: path.join(DEST_DIR, packageBaseName);
+
+	await processFiles(destDir, vars, testSetup);
+
+	console.log("\nPackage successfully created!\nNext steps:\n");
+	console.log(`$ cd ${destDir}`);
+
+	try {
+		const userAgent = parser(process.env.npm_config_user_agent);
+		userAgent.yarn
+			? console.log(`$ yarn\n$ yarn start`)
+			: console.log(`$ npm i\n$ npm start`);
+	} catch {
+		console.log(`$ npm i\n$ npm start`);
+	}
+
+	console.log("\n");
+};
+
+async function processFiles(destDir, replacements, testSetup) {
+	const files = await collectFiles(SRC_DIR);
+	const FILE_PATHS_TO_SKIP = [
+		testSetup !== "cypress" ? "cypress" : undefined,
+	].filter(Boolean);
+
+	for (const file of files) {
+		const relativePath = path.relative(SRC_DIR, file);
+		let destPath = path.join(destDir, relativePath);
+
+		if (FILE_PATHS_TO_SKIP.some(filePath => file.includes(filePath))) {
+			// console.log(`Skipped: ${file} -> ${destPath}`);
+			continue;
+		}
+
+		// Component related file based on the user input
+		destPath = destPath.replace(
+			"/MyFirstComponent",
+			`/${replacements.INIT_PACKAGE_VAR_CLASS_NAME}`,
+		);
+
+		// Files that need to be renamed
+		if (FILES_TO_RENAME[relativePath]) {
+			destPath = destPath.replace(
+				relativePath,
+				FILES_TO_RENAME[relativePath],
+			);
+		}
+
+		await fs.mkdir(path.dirname(destPath), { recursive: true });
+
+		if (FILES_TO_COPY.includes(relativePath)) {
+			// Image like files that doesn't need proccessing
+			await fs.copyFile(file, destPath);
+		} else {
+			const content = await fs.readFile(file, { encoding: "utf8" });
+			const replaced = replacePlaceholders(content, replacements);
+			let formatted;
+			try {
+				formatted = await prettier.format(replaced, {
+					useTabs: true,
+					tabWidth: 4,
+					quoteProps: "consistent",
+					arrowParens: "avoid",
+					filepath: file,
+				});
+				// console.log(`Formatted: ${file} -> ${destPath}`);
+			} catch {
+				// console.log(`Not formatted: ${file} -> ${destPath}`);
+				formatted = replaced;
+			}
+
+			await fs.writeFile(destPath, formatted);
+		}
+
+		// console.log(`Processed: ${file} -> ${destPath}`);
+	}
+}
+
+const createWebcomponentsPackage = async () => {
+	let response;
+	if (argv.name && !isPackageNameValid(argv.name)) {
+		throw new Error(
+			"The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].",
+		);
+	}
+
+	if (argv.testSetup && !isTestSetupValid(argv.testSetup)) {
+		throw new Error(
+			`The test setup should be a string and one of the following options: ${SUPPORTED_TEST_SETUPS.join(", ")}`,
+		);
+	}
+
+	let packageName = argv.name || "my-package";
+	let componentName = "MyComponent";
+	let testSetup = argv.testSetup || "manual";
+	const skipSubfolder = !!argv.skipSubfolder;
+
+	if (argv.skip) {
+		return generateFilesContent(
+			packageName,
+			componentName,
+			skipSubfolder,
+			testSetup,
+		);
+	}
+
+	if (!argv.name) {
+		response = await prompts({
+			type: "text",
+			name: "name",
+			message: "Package name:",
+			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, _, -].",
+		});
+		packageName = response.name;
+	}
+
+	if (!argv.testSetup) {
+		response = await prompts({
+			type: "select",
+			name: "testSetup",
+			message: "How would you like to set up testing?",
+			choices: [
+				{ title: "Cypress", value: "cypress" },
+				{ title: "I'll set it up manually", value: "manual" },
+			],
+			initial: 0,
+		});
+
+		testSetup = response.testSetup;
+	}
+
+	return generateFilesContent(
+		packageName,
+		componentName,
+		skipSubfolder,
+		testSetup,
+	);
+};
+
+createWebcomponentsPackage();

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-e818f286e",
+  "version": "0.0.0-ebd9a4db3",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
+  "type": "module",
   "private": false,
   "keywords": [
     "openui5",
@@ -11,7 +12,7 @@
     "ui5"
   ],
   "bin": {
-    "create-webcomponents-package": "index.js"
+    "create-webcomponents-package": "create-package.js"
   },
   "repository": {
     "type": "git",
@@ -21,6 +22,8 @@
   "dependencies": {
     "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
-    "prompts": "^2.4.1"
+    "prettier": "^3.5.3",
+    "prompts": "^2.4.1",
+    "yargs": "^17.5.1"
   }
 }

package/template/.eslintignore

@@ -1,3 +1,7 @@
 # Note: Changes to this file also must be applied to the top level .eslintignore file.
 dist
 test
+src/generated
+.eslintrc.cjs
+
+{{INIT_PACKAGE_CYPRESS_ESLINT_IGNORES}}

package/template/.eslintrc.cjs

@@ -0,0 +1,5 @@
+const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+
+// This eslint config is defined @ui5/webcomponents-tools,
+// Feel free to override part of the configuration or provide entirely new config to fit your dev requirements.
+module.exports = config;

package/template/.npsrc.json

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

package/template/cypress/component/MyFirstComponent.cy.tsx

@@ -0,0 +1,13 @@
+import {{INIT_PACKAGE_VAR_CLASS_NAME}} from "../../src/{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+describe('{{INIT_PACKAGE_VAR_CLASS_NAME}}.cy.tsx', () => {
+  it('playground', () => {
+    cy.mount(<{{INIT_PACKAGE_VAR_CLASS_NAME}} />)
+
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
+      .click();
+
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
+      .should("have.prop", "count", 1)
+  })
+})

package/template/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/template/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/template/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/template/cypress/support/component.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

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

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

package/template/npmrc

@@ -0,0 +1,2 @@
+# Auto detect the chromedriver version
+detect_chromedriver_version=true

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

@@ -1,7 +1,7 @@
 const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); //eslint-disable-line
 
 const options = {
-	port: INIT_PACKAGE_VAR_PORT,
+	port: 8080,
 };
 
 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.js → 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

@@ -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 {{INIT_PACKAGE_VAR_CLASS_NAME}}Template from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}Template.js";
+
+// Styles
+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";
+
+/**
+ * @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
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+	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 {
+	@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 {{INIT_PACKAGE_VAR_CLASS_NAME}}.i18nBundle.getText(COUNT);
+	}
+}
+
+{{INIT_PACKAGE_VAR_CLASS_NAME}}.define();
+
+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,
 	},
 };