@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.
- package/CHANGELOG.md +1921 -0
- package/LICENSE.txt +201 -0
- package/README.md +13 -18
- package/create-package.js +236 -202
- package/package.json +8 -9
- package/template/cypress/component/MyFirstComponent.cy.tsx +13 -0
- package/template/cypress/fixtures/example.json +5 -0
- package/template/cypress/support/commands.ts +37 -0
- package/template/cypress/support/component-index.html +12 -0
- package/template/cypress/support/component.ts +36 -0
- package/template/cypress/tsconfig.template.json +19 -0
- package/template/cypress.config.ts +10 -0
- package/template/env +1 -0
- package/template/{.eslintignore → eslintignore} +3 -2
- package/template/gitignore +2 -2
- package/template/npmignore +6 -0
- package/template/npsrc.json +3 -0
- package/template/{package-scripts.js → package-scripts.cjs} +1 -1
- package/template/package.json +35 -0
- package/template/src/Assets.ts +1 -1
- package/template/src/MyFirstComponent.ts +28 -20
- package/template/src/MyFirstComponentTemplate.tsx +9 -0
- package/template/{bundle.esm.js → src/bundle.esm.ts} +4 -5
- package/template/src/i18n/messagebundle.properties +3 -2
- package/template/src/i18n/messagebundle_de.properties +1 -1
- package/template/src/i18n/messagebundle_en.properties +1 -1
- package/template/src/i18n/messagebundle_es.properties +1 -1
- package/template/src/i18n/messagebundle_fr.properties +1 -1
- package/template/src/themes/MyFirstComponent.css +16 -10
- package/template/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/template/test/pages/css/index.css +89 -0
- package/template/test/pages/img/logo.png +0 -0
- package/template/test/pages/index.html +42 -42
- package/template/tsconfig.template.json +14 -0
- package/template/vite.config.js +14 -0
- package/template/config/postcss.components/postcss.config.js +0 -1
- package/template/config/postcss.themes/postcss.config.js +0 -1
- package/template/config/wdio.conf.js +0 -1
- package/template/src/Assets.js +0 -5
- package/template/src/MyFirstComponent.hbs +0 -1
- package/template/src/MyFirstComponent.js +0 -67
- package/template/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
- package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
- package/template/test/specs/Demo.spec.js +0 -14
- package/template/tsconfig.json +0 -15
- /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
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
33
|
-
|
|
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
|
|
46
|
-
const result = componentName
|
|
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
|
-
|
|
52
|
-
|
|
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
|
-
|
|
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
|
-
|
|
131
|
+
INIT_PACKAGE_VERSION: VERSION,
|
|
132
|
+
INIT_PACKAGE_VAR_TAG: argv.tag || hyphenateComponentName(componentName),
|
|
111
133
|
INIT_PACKAGE_VAR_CLASS_NAME: componentName,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"
|
|
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
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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
|
-
|
|
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 ${
|
|
160
|
+
console.log(`$ cd ${packageBaseName}`);
|
|
163
161
|
|
|
164
|
-
let userAgentInfo;
|
|
165
162
|
try {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
console.log(`$
|
|
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
|
-
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
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
|
-
|
|
188
|
-
|
|
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
|
-
|
|
192
|
-
|
|
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.
|
|
196
|
-
throw new Error(
|
|
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 =
|
|
201
|
-
let
|
|
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(
|
|
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:
|
|
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 (!
|
|
274
|
+
if (!argv.testSetup) {
|
|
220
275
|
response = await prompts({
|
|
221
276
|
type: "select",
|
|
222
|
-
name: "
|
|
223
|
-
message: "
|
|
277
|
+
name: "testSetup",
|
|
278
|
+
message: "How would you like to set up testing?",
|
|
224
279
|
choices: [
|
|
225
|
-
{
|
|
226
|
-
|
|
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
|
-
|
|
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
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
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-
|
|
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
|
-
"
|
|
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/
|
|
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,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
|
+
}
|