@ui5/create-webcomponents-package 0.0.0-0f0e49a22 → 0.0.0-10f3c0dc7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +1921 -0
  2. package/LICENSE.txt +201 -0
  3. package/README.md +13 -18
  4. package/create-package.js +236 -202
  5. package/package.json +8 -9
  6. package/template/cypress/component/MyFirstComponent.cy.tsx +13 -0
  7. package/template/cypress/fixtures/example.json +5 -0
  8. package/template/cypress/support/commands.ts +37 -0
  9. package/template/cypress/support/component-index.html +12 -0
  10. package/template/cypress/support/component.ts +36 -0
  11. package/template/cypress/tsconfig.template.json +19 -0
  12. package/template/cypress.config.ts +10 -0
  13. package/template/env +1 -0
  14. package/template/{.eslintignore → eslintignore} +3 -2
  15. package/template/gitignore +2 -2
  16. package/template/npmignore +6 -0
  17. package/template/npsrc.json +3 -0
  18. package/template/{package-scripts.js → package-scripts.cjs} +1 -1
  19. package/template/package.json +35 -0
  20. package/template/src/Assets.ts +1 -1
  21. package/template/src/MyFirstComponent.ts +28 -20
  22. package/template/src/MyFirstComponentTemplate.tsx +9 -0
  23. package/template/{bundle.esm.js → src/bundle.esm.ts} +4 -5
  24. package/template/src/i18n/messagebundle.properties +3 -2
  25. package/template/src/i18n/messagebundle_de.properties +1 -1
  26. package/template/src/i18n/messagebundle_en.properties +1 -1
  27. package/template/src/i18n/messagebundle_es.properties +1 -1
  28. package/template/src/i18n/messagebundle_fr.properties +1 -1
  29. package/template/src/themes/MyFirstComponent.css +16 -10
  30. package/template/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  31. package/template/test/pages/css/index.css +89 -0
  32. package/template/test/pages/img/logo.png +0 -0
  33. package/template/test/pages/index.html +42 -42
  34. package/template/tsconfig.template.json +14 -0
  35. package/template/vite.config.js +14 -0
  36. package/template/config/postcss.components/postcss.config.js +0 -1
  37. package/template/config/postcss.themes/postcss.config.js +0 -1
  38. package/template/config/wdio.conf.js +0 -1
  39. package/template/src/Assets.js +0 -5
  40. package/template/src/MyFirstComponent.hbs +0 -1
  41. package/template/src/MyFirstComponent.js +0 -67
  42. package/template/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  43. package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  44. package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  45. package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  46. package/template/test/specs/Demo.spec.js +0 -14
  47. package/template/tsconfig.json +0 -15
  48. /package/template/{.eslintrc.js → eslintrc.cjs} +0 -0
package/create-package.js CHANGED
@@ -1,209 +1,261 @@
1
1
  #!/usr/bin/env node
2
-
3
- const fs = require("fs");
4
- const path = require("path");
5
- const mkdirp = require("mkdirp");
6
- const prompts = require("prompts");
7
- const parser = require("npm-config-user-agent-parser");
8
- const yargs = require("yargs/yargs");
9
- const { hideBin } = require("yargs/helpers");
10
-
11
- const argv = yargs(hideBin(process.argv)).argv;
12
-
13
- const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))).version;
14
-
15
- // from where all the files will be copied
16
- const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
17
-
18
- // String utils
19
- const isTSRelatedFile = sourcePath => {
20
- return ["Assets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
21
- };
22
- const isJSRelatedFile = sourcePath => {
23
- return ["Assets.js", "MyFirstComponent.js"].some(fileName => sourcePath.includes(fileName));
24
- };
25
- const isGitIgnore = sourcePath => {
26
- return sourcePath.includes("gitignore");
27
- };
28
- const isNPMRC = sourcePath => {
29
- return sourcePath.includes("npmrc");
2
+ import fs from "fs/promises";
3
+ import path, { dirname } from "path";
4
+ import prompts from "prompts";
5
+ import parser from "npm-config-user-agent-parser";
6
+ import yargs from "yargs/yargs";
7
+ import { hideBin } from "yargs/helpers";
8
+ import { fileURLToPath } from "url";
9
+ import * as prettier from "prettier";
10
+
11
+ const __filename = fileURLToPath(import.meta.url);
12
+ const __dirname = dirname(__filename);
13
+ const VERSION = JSON.parse(
14
+ await fs.readFile(path.join(__dirname, "package.json")),
15
+ ).version;
16
+
17
+ const argv = yargs(hideBin(process.argv))
18
+ .usage("Usage: npm create @ui5/webcomponents-package [options]")
19
+ .option("name", {
20
+ type: "string",
21
+ description: "Package name (npm-compatible)",
22
+ default: "my-package",
23
+ })
24
+ .option("tag", {
25
+ type: "string",
26
+ description: "Component tag name (e.g., my-button)",
27
+ })
28
+ .option("testSetup", {
29
+ type: "string",
30
+ choices: ["cypress", "manual"],
31
+ description: "Test setup configuration",
32
+ default: "manual",
33
+ })
34
+ .option("skip", {
35
+ type: "boolean",
36
+ description: "Skip interactive prompts and use defaults/provided values",
37
+ default: false,
38
+ })
39
+ .option("skipSubfolder", {
40
+ type: "boolean",
41
+ description: "Create files in current directory instead of a subfolder",
42
+ default: false,
43
+ })
44
+ .example(
45
+ "npm create @ui5/webcomponents-package",
46
+ "Interactive mode with prompts",
47
+ )
48
+ .example(
49
+ "npm create @ui5/webcomponents-package -- --name my-components --skip",
50
+ "Non-interactive with custom name",
51
+ )
52
+ .example(
53
+ "npm create @ui5/webcomponents-package -- --name @scope/my-lib --testSetup cypress --skip",
54
+ "Non-interactive with scoped name and Cypress",
55
+ )
56
+ .help()
57
+ .alias("h", "help")
58
+ .version(VERSION)
59
+ .alias("v", "version")
60
+ .wrap(100).argv;
61
+
62
+ // Constants
63
+ const SUPPORTED_TEST_SETUPS = ["cypress", "manual"];
64
+ const SRC_DIR = path.join(__dirname, "template");
65
+ const DEST_DIR = process.cwd();
66
+
67
+ const FILES_TO_RENAME = {
68
+ [path.normalize("eslintignore")]: path.normalize(".eslintignore"),
69
+ [path.normalize("eslintrc.cjs")]: path.normalize(".eslintrc.cjs"),
70
+ [path.normalize("gitignore")]: path.normalize(".gitignore"),
71
+ [path.normalize("npmignore")]: path.normalize(".npmignore"),
72
+ [path.normalize("npsrc.json")]: path.normalize(".npsrc.json"),
73
+ [path.normalize("npmrc")]: path.normalize(".npmrc"),
74
+ [path.normalize("env")]: path.normalize(".env"),
75
+ [path.normalize("tsconfig.template.json")]: path.normalize("tsconfig.json"),
76
+ [path.normalize("cypress/tsconfig.template.json")]: path.normalize("cypress/tsconfig.json")
30
77
  };
78
+ const FILES_TO_COPY = ["test/pages/img/logo.png"];
79
+
80
+ // Validation Patterns
81
+ const PackageNamePattern =
82
+ /^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
83
+ const TagPattern = /^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/;
84
+
85
+ // Utility Functions
86
+ const isPackageNameValid = name =>
87
+ typeof name === "string" && PackageNamePattern.test(name);
88
+ const isTagValid = tag => typeof tag === "string" && TagPattern.test(tag);
89
+ const isTestSetupValid = setup =>
90
+ typeof setup === "string" && SUPPORTED_TEST_SETUPS.includes(setup);
91
+
92
+ async function collectFiles(dir, fileList = []) {
93
+ const entries = await fs.readdir(dir, { withFileTypes: true });
94
+
95
+ for (const entry of entries) {
96
+ const fullPath = path.join(dir, entry.name);
97
+ if (entry.isDirectory()) {
98
+ await collectFiles(fullPath, fileList);
99
+ } else if (entry.isFile()) {
100
+ fileList.push(fullPath);
101
+ }
102
+ }
31
103
 
32
- // Validation of user input
33
- const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
34
- const NamespacePattern = /^[a-z][a-z0-9\.\-]+$/;
35
- const isPackageNameValid = name => typeof name === "string" && name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/);
36
- const isComponentNameValid = name => typeof name === "string" && ComponentNamePattern.test(name);
37
- const isNamespaceValid = name => typeof name === "string" && NamespacePattern.test(name);
38
- const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
104
+ return fileList;
105
+ }
39
106
 
40
107
  /**
41
108
  * Hyphanates the given PascalCase string, f.e.:
42
109
  * Foo -> "my-foo" (adds preffix)
43
110
  * FooBar -> "foo-bar"
44
111
  */
45
- const hyphaneteComponentName = (componentName) => {
46
- const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
47
-
112
+ const hyphenateComponentName = componentName => {
113
+ const result = componentName
114
+ .replace(/([a-z])([A-Z])/g, "$1-$2")
115
+ .toLowerCase();
48
116
  return result.includes("-") ? result : `my-${result}`;
49
117
  };
50
118
 
51
- // Utils for building the file structure
52
- const replaceVarsInFileContent = (vars, content) => {
53
- for (let key in vars) {
54
- const re = new RegExp(key, "g");
55
- content = content.replace(re, vars[key]);
56
- }
57
- return content;
58
- };
59
-
60
- const replaceVarsInFileName = (vars, fileName) => {
61
- return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME);
62
- };
63
-
64
- const copyFile = (vars, sourcePath, destPath) => {
65
- const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && isJSRelatedFile(sourcePath);
66
- const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTSRelatedFile(sourcePath);
67
-
68
- if (ignoreJsRelated || ignoreTsRelated) {
69
- return;
70
- }
71
-
72
- let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
73
- content = replaceVarsInFileContent(vars, content);
74
- destPath = replaceVarsInFileName(vars, destPath);
75
-
76
- fs.writeFileSync(destPath, content);
77
-
78
- // Rename "gitignore" to ".gitignore" (npm init won't include ".gitignore", so we add it as "gitignore" and rename it later)
79
- if (isGitIgnore(sourcePath)) {
80
- fs.renameSync(destPath, destPath.replace("gitignore", ".gitignore"))
81
- }
82
-
83
- // Rename "npmrc" to ".npmrc" (npm init won't include ".npmrc", so we add it as "npmrc" and rename it later)
84
- if (isNPMRC(sourcePath)) {
85
- fs.renameSync(destPath, destPath.replace("npmrc", ".npmrc"));
86
- }
87
- };
88
-
89
- const copyFiles = (vars, sourcePath, destPath) => {
90
- const isDir = fs.lstatSync(sourcePath).isDirectory();
91
- if (isDir) {
92
- if (destPath) {
93
- mkdirp.sync(destPath);
94
- }
95
- fs.readdirSync(sourcePath).forEach(file => {
96
- copyFiles(vars, path.join(sourcePath, file), path.join(destPath, file));
97
- });
98
- } else {
99
- copyFile(vars, sourcePath, destPath);
100
- }
101
- };
102
-
103
- const generateFilesContent = (packageName, componentName, namespace, typescript, skipSubfolder) => {
104
- const tagName = argv.tag || hyphaneteComponentName(componentName);
119
+ const replacePlaceholders = (content, replacements) =>
120
+ content.replace(/{{(.*?)}}/g, (_, key) => replacements[key.trim()] || "");
105
121
 
106
- // All variables that will be replaced in the content of the resources/
122
+ const generateFilesContent = async (
123
+ packageName,
124
+ componentName,
125
+ skipSubfolder,
126
+ testSetup,
127
+ ) => {
128
+ // All variables that will be replaced in the content of the template folder/
107
129
  const vars = {
108
- INIT_PACKAGE_VAR_NAMESPACE: namespace, // namespace must be replaced before name
109
130
  INIT_PACKAGE_VAR_NAME: packageName,
110
- INIT_PACKAGE_VAR_TAG: tagName,
131
+ INIT_PACKAGE_VERSION: VERSION,
132
+ INIT_PACKAGE_VAR_TAG: argv.tag || hyphenateComponentName(componentName),
111
133
  INIT_PACKAGE_VAR_CLASS_NAME: componentName,
112
- INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
113
- };
114
-
115
- const packageContent = {
116
- packageName,
117
- version: "0.0.1",
118
- ui5: {
119
- webComponentsPackage: true,
120
- },
121
- scripts: {
122
- "clean": "wc-dev clean",
123
- "lint": "wc-dev lint",
124
- "start": "wc-dev start",
125
- "watch": "wc-dev watch",
126
- "build": "wc-dev build",
127
- "test": "wc-dev test",
128
- "create-ui5-element": "wc-create-ui5-element",
129
- "prepublishOnly": "npm run build",
130
- },
131
- exports: {
132
- "./src/*": "./src/*",
133
- "./dist/*": "./dist/*",
134
- "./package.json": "./package.json",
135
- "./bundle.js": "./bundle.js",
136
- "./*": "./dist/*",
137
- },
138
- "dependencies": {
139
- "@ui5/webcomponents-base": version,
140
- "@ui5/webcomponents-theming": version,
141
- },
142
- "devDependencies": {
143
- "@ui5/webcomponents-tools": version,
144
- "chromedriver": "*",
145
- },
134
+ INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG:
135
+ testSetup === "cypress"
136
+ ? `"tsBuildInfoFile": "dist/.tsbuildinfo",\n"rootDir": "src",\n"composite": true,`
137
+ : "",
138
+ INIT_PACKAGE_CYPRESS_DEV_DEPS:
139
+ testSetup === "cypress"
140
+ ? `"@ui5/cypress-ct-ui5-webc": "^0.0.4",\n"cypress": "^13.11.0",`
141
+ : "",
142
+ INIT_PACKAGE_CYPRESS_TEST_COMMANDS:
143
+ testSetup === "cypress"
144
+ ? `"test": "cypress run --component --browser chrome",\n"test:open": "cypress open --component --browser chrome",`
145
+ : "",
146
+ INIT_PACKAGE_CYPRESS_ESLINT_IGNORES:
147
+ testSetup === "cypress" ? `cypress/*\ncypress.config.*` : "",
146
148
  };
147
149
 
148
- if (typescript) {
149
- packageContent.devDependencies.typescript = "^4.9.4";
150
- }
151
-
152
- // Update package.json
153
- let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
150
+ const packageBaseName = packageName.includes("@")
151
+ ? packageName.slice(packageName.lastIndexOf("/") + 1)
152
+ : packageName;
153
+ const destDir = skipSubfolder
154
+ ? path.join(DEST_DIR)
155
+ : path.join(DEST_DIR, packageBaseName);
154
156
 
155
- destDir = skipSubfolder ? path.join("./") : path.join("./", destDir);
156
- mkdirp.sync(destDir);
157
- fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
158
- // Copy files
159
- copyFiles(vars, TEMPLATE_DIR, destDir);
157
+ await processFiles(destDir, vars, testSetup);
160
158
 
161
159
  console.log("\nPackage successfully created!\nNext steps:\n");
162
- console.log(`$ cd ${destDir}`);
160
+ console.log(`$ cd ${packageBaseName}`);
163
161
 
164
- let userAgentInfo;
165
162
  try {
166
- userAgentInfo = parser(process.env.npm_config_user_agent);
167
- } catch (e) {}
168
-
169
- if (userAgentInfo && userAgentInfo.yarn) {
170
- console.log(`$ yarn`);
171
- console.log(`$ yarn start`);
172
- } else {
173
- console.log(`$ npm i`);
174
- console.log(`$ npm start`);
163
+ const userAgent = parser(process.env.npm_config_user_agent);
164
+ userAgent.yarn
165
+ ? console.log(`$ yarn\n$ yarn start`)
166
+ : console.log(`$ npm i\n$ npm start`);
167
+ } catch {
168
+ console.log(`$ npm i\n$ npm start`);
175
169
  }
176
170
 
177
171
  console.log("\n");
178
172
  };
179
173
 
180
- // Main function
181
- const createWebcomponentsPackage = async () => {
182
- let response;
183
- if (argv.name && !isPackageNameValid(argv.name)) {
184
- throw new Error("The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].");
185
- }
174
+ async function processFiles(destDir, replacements, testSetup) {
175
+ const files = await collectFiles(SRC_DIR);
176
+ const FILE_PATHS_TO_SKIP = [
177
+ testSetup !== "cypress" ? path.normalize("cypress") : undefined,
178
+ ].filter(Boolean);
179
+
180
+ for (const file of files) {
181
+ const relativePath = path.relative(SRC_DIR, file);
182
+ let destPath = path.join(destDir, relativePath);
183
+
184
+ if (FILE_PATHS_TO_SKIP.some(filePath => file.includes(filePath))) {
185
+ // console.log(`Skipped: ${file} -> ${destPath}`);
186
+ continue;
187
+ }
188
+
189
+ // // Component related file based on the user input
190
+ // destPath = destPath.replace(
191
+ // "MyFirstComponent",
192
+ // replacements.INIT_PACKAGE_VAR_CLASS_NAME,
193
+ // );
194
+
195
+ // Files that need to be renamed
196
+ if (FILES_TO_RENAME[relativePath]) {
197
+ destPath = destPath.replace(
198
+ relativePath,
199
+ FILES_TO_RENAME[relativePath],
200
+ );
201
+ }
186
202
 
187
- if (argv.componentName && !isComponentNameValid(argv.componentName)) {
188
- throw new Error("The component name should be a string, starting with a capital letter [A-Z][a-z], for example: Button, MyButton, etc.");
203
+ await fs.mkdir(path.dirname(destPath), { recursive: true });
204
+
205
+ if (FILES_TO_COPY.includes(relativePath)) {
206
+ // Image like files that doesn't need proccessing
207
+ await fs.copyFile(file, destPath);
208
+ } else {
209
+ const content = await fs.readFile(file, { encoding: "utf8" });
210
+ const replaced = replacePlaceholders(content, replacements);
211
+ let formatted;
212
+ try {
213
+ formatted = await prettier.format(replaced, {
214
+ useTabs: true,
215
+ tabWidth: 4,
216
+ quoteProps: "consistent",
217
+ arrowParens: "avoid",
218
+ filepath: file,
219
+ });
220
+ // console.log(`Formatted: ${file} -> ${destPath}`);
221
+ } catch {
222
+ // console.log(`Not formatted: ${file} -> ${destPath}`);
223
+ formatted = replaced;
224
+ }
225
+
226
+ await fs.writeFile(destPath, formatted);
227
+ }
228
+
229
+ // console.log(`Processed: ${file} -> ${destPath}`);
189
230
  }
231
+ }
190
232
 
191
- if (argv.namespace && !isNamespaceValid(argv.namespace)) {
192
- throw new Error("The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.");
233
+ const createWebcomponentsPackage = async () => {
234
+ let response;
235
+ if (argv.name && !isPackageNameValid(argv.name)) {
236
+ throw new Error(
237
+ "The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].",
238
+ );
193
239
  }
194
240
 
195
- if (argv.tag && !isTagValid(argv.tag) ) {
196
- throw new Error("The tag should be in kebab-case (f.e my-component) and it can't be a single word.");
241
+ if (argv.testSetup && !isTestSetupValid(argv.testSetup)) {
242
+ throw new Error(
243
+ `The test setup should be a string and one of the following options: ${SUPPORTED_TEST_SETUPS.join(", ")}`,
244
+ );
197
245
  }
198
246
 
199
247
  let packageName = argv.name || "my-package";
200
- let componentName = argv.componentName || "MyComponent";
201
- let namespace = argv.namespace || "demo.components";
202
- let typescriptSupport = !!argv.enableTypescript;
248
+ let componentName = "MyFirstComponent";
249
+ let testSetup = argv.testSetup || "manual";
203
250
  const skipSubfolder = !!argv.skipSubfolder;
204
251
 
205
252
  if (argv.skip) {
206
- return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
253
+ return generateFilesContent(
254
+ packageName,
255
+ componentName,
256
+ skipSubfolder,
257
+ testSetup,
258
+ );
207
259
  }
208
260
 
209
261
  if (!argv.name) {
@@ -211,53 +263,35 @@ const createWebcomponentsPackage = async () => {
211
263
  type: "text",
212
264
  name: "name",
213
265
  message: "Package name:",
214
- 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, _, -].",
266
+ validate: value =>
267
+ isPackageNameValid(value)
268
+ ? true
269
+ : "Package name should be a string, starting with a letter and containing the following symbols [a-z, A-Z ,0-9, _, -].",
215
270
  });
216
271
  packageName = response.name;
217
272
  }
218
273
 
219
- if (!typescriptSupport) {
274
+ if (!argv.testSetup) {
220
275
  response = await prompts({
221
276
  type: "select",
222
- name: "language",
223
- message: "Project type:",
277
+ name: "testSetup",
278
+ message: "How would you like to set up testing?",
224
279
  choices: [
225
- {
226
- title: "JavaScript",
227
- value: false,
228
- },
229
- {
230
- title: "TypeScript",
231
- value: true,
232
- },
280
+ { title: "Cypress", value: "cypress" },
281
+ { title: "I'll set it up manually", value: "manual" },
233
282
  ],
283
+ initial: 0,
234
284
  });
235
- typescriptSupport = response.language;
236
- }
237
285
 
238
- if (!argv.componentName) {
239
- response = await prompts({
240
- type: "text",
241
- name: "componentName",
242
- message: "Component name:",
243
- initial: "MyComponent",
244
- validate: (value) => isComponentNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
245
- });
246
- componentName = response.componentName;
286
+ testSetup = response.testSetup;
247
287
  }
248
288
 
249
- if (!argv.namespace) {
250
- response = await prompts({
251
- type: "text",
252
- name: "namespace",
253
- message: "JSDoc namespace:",
254
- initial: "demo.components",
255
- validate: (value) => isNamespaceValid(value) ? true : "The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.",
256
- });
257
- namespace = response.namespace;
258
- }
259
-
260
- return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
289
+ return generateFilesContent(
290
+ packageName,
291
+ componentName,
292
+ skipSubfolder,
293
+ testSetup,
294
+ );
261
295
  };
262
296
 
263
297
  createWebcomponentsPackage();
package/package.json CHANGED
@@ -1,27 +1,26 @@
1
1
  {
2
2
  "name": "@ui5/create-webcomponents-package",
3
- "version": "0.0.0-0f0e49a22",
3
+ "version": "0.0.0-10f3c0dc7",
4
4
  "description": "UI5 Web Components: create package",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
7
- "private": false,
7
+ "type": "module",
8
8
  "keywords": [
9
9
  "openui5",
10
10
  "sapui5",
11
11
  "ui5"
12
12
  ],
13
- "bin": {
14
- "create-webcomponents-package": "create-package.js"
15
- },
13
+ "bin": "create-package.js",
16
14
  "repository": {
17
15
  "type": "git",
18
- "url": "https://github.com/SAP/ui5-webcomponents.git",
16
+ "url": "https://github.com/UI5/webcomponents.git",
19
17
  "directory": "packages/create-package"
20
18
  },
21
19
  "dependencies": {
22
- "mkdirp": "^1.0.4",
23
20
  "npm-config-user-agent-parser": "^1.0.0",
21
+ "prettier": "^3.5.3",
24
22
  "prompts": "^2.4.1",
25
23
  "yargs": "^17.5.1"
26
- }
27
- }
24
+ },
25
+ "gitHead": "9e6f99d5b102ad848966e4781188a2eddc8d1e10"
26
+ }
@@ -0,0 +1,13 @@
1
+ import {{INIT_PACKAGE_VAR_CLASS_NAME}} from "../../src/{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
2
+
3
+ describe('{{INIT_PACKAGE_VAR_CLASS_NAME}}.cy.tsx', () => {
4
+ it('playground', () => {
5
+ cy.mount(<{{INIT_PACKAGE_VAR_CLASS_NAME}} />)
6
+
7
+ cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
8
+ .click();
9
+
10
+ cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
11
+ .should("have.prop", "count", 1)
12
+ })
13
+ })
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "Using fixtures to represent data",
3
+ "email": "hello@cypress.io",
4
+ "body": "Fixtures are a great way to mock data for responses to routes"
5
+ }
@@ -0,0 +1,37 @@
1
+ /// <reference types="cypress" />
2
+ // ***********************************************
3
+ // This example commands.ts shows you how to
4
+ // create various custom commands and overwrite
5
+ // existing commands.
6
+ //
7
+ // For more comprehensive examples of custom
8
+ // commands please read more here:
9
+ // https://on.cypress.io/custom-commands
10
+ // ***********************************************
11
+ //
12
+ //
13
+ // -- This is a parent command --
14
+ // Cypress.Commands.add('login', (email, password) => { ... })
15
+ //
16
+ //
17
+ // -- This is a child command --
18
+ // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19
+ //
20
+ //
21
+ // -- This is a dual command --
22
+ // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23
+ //
24
+ //
25
+ // -- This will overwrite an existing command --
26
+ // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27
+ //
28
+ // declare global {
29
+ // namespace Cypress {
30
+ // interface Chainable {
31
+ // login(email: string, password: string): Chainable<void>
32
+ // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33
+ // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34
+ // visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35
+ // }
36
+ // }
37
+ // }
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <title>Components App</title>
8
+ </head>
9
+ <body>
10
+ <div data-cy-root></div>
11
+ </body>
12
+ </html>
@@ -0,0 +1,36 @@
1
+ // ***********************************************************
2
+ // This example support/component.ts is processed and
3
+ // loaded automatically before your test files.
4
+ //
5
+ // This is a great place to put global configuration and
6
+ // behavior that modifies Cypress.
7
+ //
8
+ // You can change the location of this file or turn off
9
+ // automatically serving support files with the
10
+ // 'supportFile' configuration option.
11
+ //
12
+ // You can read more here:
13
+ // https://on.cypress.io/configuration
14
+ // ***********************************************************
15
+
16
+ // Import commands.js using ES2015 syntax:
17
+ import './commands'
18
+
19
+ import { mount } from '@ui5/cypress-ct-ui5-webc'
20
+
21
+ // Augment the Cypress namespace to include type definitions for
22
+ // your custom command.
23
+ // Alternatively, can be defined in cypress/support/component.d.ts
24
+ // with a <reference path="./component" /> at the top of your spec.
25
+ declare global {
26
+ namespace Cypress {
27
+ interface Chainable {
28
+ mount: typeof mount
29
+ }
30
+ }
31
+ }
32
+
33
+ Cypress.Commands.add('mount', mount)
34
+
35
+ // Example use:
36
+ // cy.mount(MyComponent)
@@ -0,0 +1,19 @@
1
+ {
2
+ "include": [
3
+ "./**/*"
4
+ ],
5
+ "compilerOptions": {
6
+ "module": "NodeNext",
7
+ "moduleResolution": "nodenext",
8
+ "jsx": "react-jsx",
9
+ "jsxImportSource": "@ui5/webcomponents-base",
10
+ "types": [
11
+ "cypress"
12
+ ]
13
+ },
14
+ "references": [
15
+ {
16
+ "path": "../"
17
+ }
18
+ ]
19
+ }