@ui5/webcomponents-tools 1.4.0 → 1.5.0
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 +8 -0
- package/README.md +5 -6
- package/bin/dev.js +1 -5
- package/components-package/nps.js +47 -38
- package/components-package/vite.config.js +12 -0
- package/components-package/wdio.js +21 -4
- package/components-package/wdio.sync.js +1 -1
- package/lib/dev-server/dev-server.js +66 -0
- package/lib/dev-server/virtual-index-html-plugin.js +52 -0
- package/lib/generate-json-imports/themes.js +3 -3
- package/lib/postcss-css-to-esm/index.js +13 -1
- package/lib/postcss-css-to-json/index.js +12 -1
- package/lib/postcss-p/postcss-p.mjs +3 -0
- package/lib/scoping/scope-test-pages.js +1 -1
- package/lib/test-runner/test-runner.js +63 -0
- package/package.json +13 -16
- package/components-package/rollup-plugins/empty-module.js +0 -15
- package/components-package/rollup.js +0 -150
- package/lib/documentation/index.js +0 -168
- package/lib/documentation/templates/api-component-since.js +0 -3
- package/lib/documentation/templates/api-css-variables-section.js +0 -24
- package/lib/documentation/templates/api-events-section.js +0 -35
- package/lib/documentation/templates/api-methods-section.js +0 -26
- package/lib/documentation/templates/api-properties-section.js +0 -42
- package/lib/documentation/templates/api-slots-section.js +0 -28
- package/lib/documentation/templates/template.js +0 -39
- package/lib/serve/index.js +0 -46
- package/lib/serve/serve.json +0 -3
- package/package-lock.json +0 -48
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
# [1.5.0](https://github.com/SAP/ui5-webcomponents/compare/v1.4.0...v1.5.0) (2022-07-03)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @ui5/webcomponents-tools
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
6
14
|
# [1.4.0](https://github.com/SAP/ui5-webcomponents/compare/v1.3.1...v1.4.0) (2022-05-25)
|
7
15
|
|
8
16
|
|
package/README.md
CHANGED
@@ -1,24 +1,23 @@
|
|
1
|
-

|
2
2
|
|
3
3
|
# UI5 Web Components - Tools
|
4
4
|
|
5
|
-
[](https://travis-ci.org/SAP/ui5-webcomponents)
|
6
5
|
[](https://www.npmjs.com/package/@ui5/webcomponents)
|
7
6
|
|
8
7
|
Provides libraries, configuration files and build artifacts,
|
9
8
|
used by other UI5 Web Components packages, such as `main` and `fiori`.
|
10
9
|
|
11
10
|
## Resources
|
12
|
-
- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/
|
11
|
+
- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
|
13
12
|
- [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
|
14
13
|
- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
|
15
14
|
|
16
15
|
## Support
|
17
|
-
We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/
|
16
|
+
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/).
|
18
17
|
|
19
18
|
## Contribute
|
20
|
-
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/
|
19
|
+
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
|
21
20
|
|
22
21
|
## License
|
23
22
|
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
|
24
|
-
This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/
|
23
|
+
This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.
|
package/bin/dev.js
CHANGED
@@ -10,11 +10,7 @@ if (command === "watch") {
|
|
10
10
|
command = `watch.${argument}`;
|
11
11
|
}
|
12
12
|
} else if (command === "test") {
|
13
|
-
|
14
|
-
command = `test.run`;
|
15
|
-
} else if (argument) { // yarn test test/specs/Button.spec.js
|
16
|
-
command = `test.spec --spec ${argument}`;
|
17
|
-
}
|
13
|
+
command = `test ${process.argv.slice(3).join(" ")}`;
|
18
14
|
}
|
19
15
|
|
20
16
|
child_process.execSync(`npx nps "${command}"`, {stdio: 'inherit'});
|
@@ -1,26 +1,45 @@
|
|
1
1
|
const path = require("path");
|
2
2
|
const fs = require("fs");
|
3
|
-
|
4
3
|
const LIB = path.join(__dirname, `../lib/`);
|
5
|
-
|
4
|
+
|
6
5
|
|
7
6
|
const getScripts = (options) => {
|
8
7
|
|
9
|
-
const port = options.port || 8080; // preferred port
|
10
|
-
const portStep = options.portStep || 1; // step to check for available ports, if preferred port is already used
|
11
8
|
let illustrations = options.illustrationsData || [];
|
12
|
-
|
13
9
|
illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
|
14
|
-
|
15
10
|
let illustrationsScript = illustrations.join(" && ");
|
16
11
|
|
12
|
+
let viteConfig;
|
13
|
+
if (fs.existsSync("config/vite.config.js")) {
|
14
|
+
// old project setup where config file is in separate folder
|
15
|
+
viteConfig = "-c config/vite.config.js";
|
16
|
+
} else if (fs.existsSync("vite.config.js")) {
|
17
|
+
// preferred way of custom configuration in root project folder
|
18
|
+
viteConfig = "";
|
19
|
+
} else {
|
20
|
+
// no custom configuration - use default from tools project
|
21
|
+
viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
|
22
|
+
}
|
23
|
+
|
24
|
+
let eslintConfig;
|
25
|
+
if (fs.existsSync("config/.eslintrc.js")) {
|
26
|
+
// old project setup where config file is in separate folder
|
27
|
+
eslintConfig = "--config config/.eslintrc.js";
|
28
|
+
} else if (fs.existsSync(".eslintrc.js")) {
|
29
|
+
// preferred way of custom configuration in root project folder
|
30
|
+
eslintConfig = "";
|
31
|
+
} else {
|
32
|
+
// no custom configuration - use default from tools project
|
33
|
+
eslintConfig = `--config "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
|
34
|
+
}
|
35
|
+
|
17
36
|
const scripts = {
|
18
|
-
clean:
|
19
|
-
lint:
|
20
|
-
lintfix:
|
37
|
+
clean: 'rimraf dist && rimraf .port && nps "scope.testPages.clean"',
|
38
|
+
lint: `eslint . ${eslintConfig}`,
|
39
|
+
lintfix: `eslint . ${eslintConfig}`,
|
21
40
|
prepare: {
|
22
41
|
default: "nps clean prepare.all",
|
23
|
-
all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.
|
42
|
+
all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.api" "nps build.illustrations"',
|
24
43
|
styleRelated: "nps build.styles build.jsonImports",
|
25
44
|
},
|
26
45
|
build: {
|
@@ -41,26 +60,21 @@ const getScripts = (options) => {
|
|
41
60
|
themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
|
42
61
|
i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
|
43
62
|
},
|
44
|
-
bundle:
|
45
|
-
|
46
|
-
default: "nps build.samples.api build.samples.docs",
|
47
|
-
api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
|
48
|
-
docs: `node "${LIB}/documentation/index.js" dist/api.json`,
|
49
|
-
},
|
63
|
+
bundle: `vite build ${viteConfig}`,
|
64
|
+
api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
|
50
65
|
illustrations: illustrationsScript
|
51
66
|
},
|
52
67
|
copy: {
|
53
|
-
default: "nps copy.src copy.props
|
68
|
+
default: "nps copy.src copy.props",
|
54
69
|
src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
|
55
70
|
props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
|
56
|
-
test: `node "${LIB}/copy-and-watch/index.js" --silent "test/**/*.*" dist/test-resources`,
|
57
71
|
},
|
58
72
|
watch: {
|
59
|
-
default: 'concurrently "nps watch.templates" "nps watch.
|
73
|
+
default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
|
74
|
+
devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
|
60
75
|
src: 'nps "copy.src --watch --safe --skip-initial-copy"',
|
61
76
|
props: 'nps "copy.props --watch --safe --skip-initial-copy"',
|
62
|
-
|
63
|
-
bundle: 'rollup --config config/rollup.config.js -w --environment DEV',
|
77
|
+
bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
|
64
78
|
styles: {
|
65
79
|
default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
|
66
80
|
themes: 'nps "build.styles.themes -w"',
|
@@ -71,31 +85,26 @@ const getScripts = (options) => {
|
|
71
85
|
},
|
72
86
|
},
|
73
87
|
templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
|
74
|
-
|
88
|
+
api: 'chokidar "test/**/*.sample.html" -c "nps build.api"',
|
75
89
|
i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
|
76
90
|
},
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
test: {
|
81
|
-
|
82
|
-
default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
|
83
|
-
run: "cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js",
|
84
|
-
spec: "wdio run config/wdio.conf.js",
|
85
|
-
},
|
86
|
-
startWithScope: "nps scope.prepare scope.dev",
|
91
|
+
start: "nps prepare watch.devServer",
|
92
|
+
test: `node "${LIB}/test-runner/test-runner.js"`,
|
93
|
+
"test-suite-1": `node "${LIB}/test-runner/test-runner.js" --suite suite1`,
|
94
|
+
"test-suite-2": `node "${LIB}/test-runner/test-runner.js" --suite suite2`,
|
95
|
+
startWithScope: "nps scope.prepare scope.watchWithBundle",
|
87
96
|
scope: {
|
88
97
|
prepare: "nps scope.lint prepare scope.testPages",
|
89
98
|
lint: `node "${LIB}/scoping/lint-src.js"`,
|
90
99
|
testPages: {
|
91
100
|
default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
|
92
|
-
clean: "rimraf
|
93
|
-
copy: `node "${LIB}/copy-and-watch/index.js" --silent "
|
94
|
-
replace: `node "${LIB}/scoping/scope-test-pages.js"
|
101
|
+
clean: "rimraf test/pages/scoped",
|
102
|
+
copy: `node "${LIB}/copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
|
103
|
+
replace: `node "${LIB}/scoping/scope-test-pages.js" test/pages/scoped demo`,
|
95
104
|
},
|
96
|
-
|
97
|
-
watch: 'concurrently "nps watch.templates" "nps watch.
|
98
|
-
bundle:
|
105
|
+
watchWithBundle: 'concurrently "nps scope.watch" "nps scope.bundle" ',
|
106
|
+
watch: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.test" "nps watch.src" "nps watch.props" "nps watch.styles"',
|
107
|
+
bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
|
99
108
|
}
|
100
109
|
};
|
101
110
|
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// vite.config.js
|
2
|
+
const { defineConfig } = require('vite');
|
3
|
+
const virtualIndex = require("../lib/dev-server/virtual-index-html-plugin.js");
|
4
|
+
|
5
|
+
module.exports = defineConfig(async () => {
|
6
|
+
return {
|
7
|
+
build: {
|
8
|
+
emptyOutDir: false,
|
9
|
+
},
|
10
|
+
plugins: [await virtualIndex()],
|
11
|
+
}
|
12
|
+
});
|
@@ -50,7 +50,7 @@ exports.config = {
|
|
50
50
|
// maxInstances can get overwritten per capability. So if you have an in-house Selenium
|
51
51
|
// grid with only 5 firefox instances available you can make sure that not more than
|
52
52
|
// 5 instances get started at a time.
|
53
|
-
maxInstances:
|
53
|
+
maxInstances: 5,
|
54
54
|
//
|
55
55
|
browserName: 'chrome',
|
56
56
|
'goog:chromeOptions': {
|
@@ -82,7 +82,7 @@ exports.config = {
|
|
82
82
|
// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
|
83
83
|
// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
|
84
84
|
// gets prepended directly.
|
85
|
-
baseUrl:
|
85
|
+
baseUrl: 'http://localhost:4567', // This is important since WDIO 7+ does not accept an empty string for baseUrl
|
86
86
|
path: '',
|
87
87
|
//
|
88
88
|
// Default timeout for all waitFor* commands.
|
@@ -99,7 +99,14 @@ exports.config = {
|
|
99
99
|
// Services take over a specific job you don't want to take care of. They enhance
|
100
100
|
// your test setup with almost no effort. Unlike plugins, they don't add new
|
101
101
|
// commands. Instead, they hook themselves up into the test process.
|
102
|
-
services: ['chromedriver', 'devtools'
|
102
|
+
services: ['chromedriver', 'devtools',
|
103
|
+
['static-server', {
|
104
|
+
folders: [
|
105
|
+
{ mount: '/', path: './dist' },
|
106
|
+
],
|
107
|
+
port: '4567',
|
108
|
+
}],
|
109
|
+
],
|
103
110
|
// options
|
104
111
|
chromeDriverArgs: ['--port=9515'], // default
|
105
112
|
// Framework you want to run your specs with.
|
@@ -316,7 +323,6 @@ exports.config = {
|
|
316
323
|
"click",
|
317
324
|
"doubleClick",
|
318
325
|
"dragAndDrop",
|
319
|
-
"keys",
|
320
326
|
"pause",
|
321
327
|
"removeAttribute", // custom
|
322
328
|
"scrollIntoView",
|
@@ -327,10 +333,21 @@ exports.config = {
|
|
327
333
|
"touchAction",
|
328
334
|
"url",
|
329
335
|
];
|
336
|
+
|
337
|
+
const waitForWithDelay = [
|
338
|
+
"keys",
|
339
|
+
];
|
340
|
+
|
330
341
|
if (waitFor.includes(commandName)) {
|
331
342
|
await browser.executeAsync(function (done) {
|
332
343
|
window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
|
333
344
|
});
|
345
|
+
} else if (waitForWithDelay.includes(commandName)) {
|
346
|
+
await browser.executeAsync(function (done) {
|
347
|
+
setTimeout(() => {
|
348
|
+
window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
|
349
|
+
}, 10);
|
350
|
+
});
|
334
351
|
}
|
335
352
|
},
|
336
353
|
/**
|
@@ -50,7 +50,7 @@ exports.config = {
|
|
50
50
|
// maxInstances can get overwritten per capability. So if you have an in-house Selenium
|
51
51
|
// grid with only 5 firefox instances available you can make sure that not more than
|
52
52
|
// 5 instances get started at a time.
|
53
|
-
maxInstances:
|
53
|
+
maxInstances: 5,
|
54
54
|
//
|
55
55
|
browserName: 'chrome',
|
56
56
|
'goog:chromeOptions': {
|
@@ -0,0 +1,66 @@
|
|
1
|
+
const fs = require("fs/promises");
|
2
|
+
const { createServer } = require('vite');
|
3
|
+
const yargs = require('yargs/yargs')
|
4
|
+
const { hideBin } = require('yargs/helpers')
|
5
|
+
|
6
|
+
const argv = yargs(hideBin(process.argv))
|
7
|
+
.alias("c", "config")
|
8
|
+
.argv;
|
9
|
+
|
10
|
+
const startVite = async (port) => {
|
11
|
+
const server = await createServer({
|
12
|
+
configFile: argv.config,
|
13
|
+
server: {
|
14
|
+
port: port,
|
15
|
+
strictPort: true,
|
16
|
+
open: true,
|
17
|
+
host: true,
|
18
|
+
},
|
19
|
+
logLevel: 'info',
|
20
|
+
clearScreen: false,
|
21
|
+
})
|
22
|
+
await server.listen()
|
23
|
+
server.printUrls()
|
24
|
+
return server;
|
25
|
+
};
|
26
|
+
|
27
|
+
const rmPortFile = async () => {
|
28
|
+
// exit handler must be sync
|
29
|
+
try {
|
30
|
+
await fs.rm(".dev-server-port");
|
31
|
+
} catch (e) {}
|
32
|
+
process.exit();
|
33
|
+
}
|
34
|
+
|
35
|
+
["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException", "SIGTERM"].forEach((eventType) => {
|
36
|
+
process.on(eventType, rmPortFile);
|
37
|
+
});
|
38
|
+
|
39
|
+
(async () => {
|
40
|
+
let retries = 10;
|
41
|
+
let port = 8080;
|
42
|
+
while (retries--) {
|
43
|
+
console.log(`taking port ${port}`);
|
44
|
+
await fs.writeFile(".dev-server-port", `${port}`);
|
45
|
+
try {
|
46
|
+
// execSync(command, {stdio: 'pipe'});
|
47
|
+
const server = await startVite(port);
|
48
|
+
if (server) {
|
49
|
+
// server started, don't try other ports
|
50
|
+
break;
|
51
|
+
}
|
52
|
+
} catch (e) {
|
53
|
+
// uncomment for debug
|
54
|
+
// console.log(e.toString());
|
55
|
+
if (e.toString().includes("already in use")) {
|
56
|
+
console.log(`Port ${port} already in use`)
|
57
|
+
port++;
|
58
|
+
continue;
|
59
|
+
}
|
60
|
+
// other error or CTRL-C
|
61
|
+
process.exit();
|
62
|
+
}
|
63
|
+
// no error normal exit
|
64
|
+
// process.exit();
|
65
|
+
}
|
66
|
+
})();
|
@@ -0,0 +1,52 @@
|
|
1
|
+
let path = require("path");
|
2
|
+
|
3
|
+
const virtualIndexPlugin = async () => {
|
4
|
+
const { globby } = await import("globby");
|
5
|
+
const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
|
6
|
+
|
7
|
+
const pagesPerFolder = {};
|
8
|
+
files.forEach(file => {
|
9
|
+
let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
|
10
|
+
folder.push(path.basename(file));
|
11
|
+
});
|
12
|
+
|
13
|
+
const rollupInput = {};
|
14
|
+
|
15
|
+
files.forEach(file => {
|
16
|
+
rollupInput[file] = path.resolve(process.cwd(), file);
|
17
|
+
})
|
18
|
+
|
19
|
+
return {
|
20
|
+
name: 'virtual-index-html',
|
21
|
+
config() {
|
22
|
+
return {
|
23
|
+
build: {
|
24
|
+
rollupOptions: {
|
25
|
+
input: rollupInput
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
},
|
30
|
+
configureServer(server) {
|
31
|
+
server.middlewares.use((req, res, next) => {
|
32
|
+
if (req.url === "/") {
|
33
|
+
const folders = Object.keys(pagesPerFolder);
|
34
|
+
|
35
|
+
res.statusCode = 200;
|
36
|
+
res.end(`${folders.map(folder => {
|
37
|
+
const pages = pagesPerFolder[folder];
|
38
|
+
return `<h1>${folder}</h1>
|
39
|
+
${pages.map(page => {
|
40
|
+
return `<li><a href='${folder}/${page}'>${page}</a></li>`
|
41
|
+
}).join("")}
|
42
|
+
`
|
43
|
+
}).join("")}`);
|
44
|
+
} else {
|
45
|
+
next();
|
46
|
+
}
|
47
|
+
})
|
48
|
+
},
|
49
|
+
}
|
50
|
+
};
|
51
|
+
|
52
|
+
module.exports = virtualIndexPlugin;
|
@@ -39,7 +39,7 @@ const loadThemeProperties = async (themeName) => {
|
|
39
39
|
throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
|
40
40
|
}
|
41
41
|
return (await fetch(themeUrlsByName[themeName])).json();
|
42
|
-
}
|
42
|
+
};
|
43
43
|
|
44
44
|
${availableThemesArray}
|
45
45
|
.forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
|
@@ -54,7 +54,7 @@ const loadThemeProperties = async (themeName) => {
|
|
54
54
|
${dynamicImportLines}
|
55
55
|
default: throw "unknown theme"
|
56
56
|
}
|
57
|
-
}
|
57
|
+
};
|
58
58
|
|
59
59
|
const loadAndCheck = async (themeName) => {
|
60
60
|
const data = await loadThemeProperties(themeName);
|
@@ -62,7 +62,7 @@ const loadAndCheck = async (themeName) => {
|
|
62
62
|
throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
|
63
63
|
}
|
64
64
|
return data;
|
65
|
-
}
|
65
|
+
};
|
66
66
|
|
67
67
|
${availableThemesArray}
|
68
68
|
.forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
|
@@ -38,7 +38,19 @@ module.exports = function (opts) {
|
|
38
38
|
|
39
39
|
const filePath = `${targetFile}.js`;
|
40
40
|
const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
|
41
|
-
|
41
|
+
|
42
|
+
// it seems slower to read the old content, but writing the same content with no real changes
|
43
|
+
// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
|
44
|
+
let oldContent = "";
|
45
|
+
try {
|
46
|
+
oldContent = fs.readFileSync(filePath).toString();
|
47
|
+
} catch (e) {
|
48
|
+
// file not found
|
49
|
+
}
|
50
|
+
const content = `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
|
51
|
+
if (content !== oldContent) {
|
52
|
+
fs.writeFileSync(filePath, content);
|
53
|
+
}
|
42
54
|
}
|
43
55
|
};
|
44
56
|
};
|
@@ -28,7 +28,18 @@ module.exports = function (opts) {
|
|
28
28
|
fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
|
29
29
|
content: css
|
30
30
|
};
|
31
|
-
|
31
|
+
// it seems slower to read the old content, but writing the same content with no real changes
|
32
|
+
// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
|
33
|
+
let oldContent = "";
|
34
|
+
try {
|
35
|
+
oldContent = fs.readFileSync(filePath).toString();
|
36
|
+
} catch (e) {
|
37
|
+
// file not found
|
38
|
+
}
|
39
|
+
const content = JSON.stringify({_: data});
|
40
|
+
if (content !== oldContent) {
|
41
|
+
fs.writeFileSync(filePath, content);
|
42
|
+
}
|
32
43
|
}
|
33
44
|
};
|
34
45
|
};
|
@@ -27,7 +27,7 @@ const replaceTagsAny = content => {
|
|
27
27
|
// Replace bundle names and HTML tag names in test pages
|
28
28
|
glob.sync(path.join(root, "/**/*.html")).forEach(file => {
|
29
29
|
let content = String(fs.readFileSync(file));
|
30
|
-
content = content.replace(/bundle\.(.*?)\.js/g,
|
30
|
+
content = content.replace(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
|
31
31
|
content = replaceTagsHTML(content);
|
32
32
|
fs.writeFileSync(file, content);
|
33
33
|
});
|
@@ -0,0 +1,63 @@
|
|
1
|
+
const child_process = require("child_process");
|
2
|
+
const { readFileSync } = require("fs");
|
3
|
+
const path = require("path");
|
4
|
+
|
5
|
+
// search for dev-server port
|
6
|
+
// start in current folder
|
7
|
+
// traversing upwards in case of mono repo tests and dev-server running in root folder of repository
|
8
|
+
let devServerFolder = process.cwd();
|
9
|
+
let devServerPort;
|
10
|
+
while (true) {
|
11
|
+
try {
|
12
|
+
devServerPort = readFileSync(path.join(devServerFolder, ".dev-server-port")).toString();
|
13
|
+
break; // found
|
14
|
+
} catch (e) {
|
15
|
+
// file not found
|
16
|
+
if (devServerFolder === path.dirname(devServerFolder)) {
|
17
|
+
break; // reached root folder "/"
|
18
|
+
}
|
19
|
+
devServerFolder = path.dirname(devServerFolder);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
// check if we are in a monorepo and extract path from package.json
|
24
|
+
let packageRepositoryPath = "";
|
25
|
+
const pkg = require(path.join(process.cwd(), "package.json"));
|
26
|
+
packageRepositoryPath = pkg.repository.directory;
|
27
|
+
|
28
|
+
// construct base url
|
29
|
+
// use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
|
30
|
+
// if a dev server is running in the root of a mono repo, append tha package path like this
|
31
|
+
// http://localhost:${devServerPort}/packages/main/
|
32
|
+
let baseUrl = "";
|
33
|
+
if (devServerPort) {
|
34
|
+
console.log(`Found port ${devServerPort} from '${path.join(devServerFolder, ".dev-server-port")}'`);
|
35
|
+
const devServerInRoot = !devServerFolder.includes(packageRepositoryPath);
|
36
|
+
if (devServerInRoot) {
|
37
|
+
baseUrl = `--base-url http://localhost:${devServerPort}/${packageRepositoryPath}/`;
|
38
|
+
} else {
|
39
|
+
baseUrl = `--base-url http://localhost:${devServerPort}/`;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
if (!baseUrl) {
|
44
|
+
console.log("No dev server running, running tests served from `dist`, make sure it is up to date");
|
45
|
+
}
|
46
|
+
|
47
|
+
// add single spec parameter if passed
|
48
|
+
let spec = "";
|
49
|
+
if (process.argv.length === 3) {
|
50
|
+
const specFile = process.argv[2];
|
51
|
+
spec = `--spec ${specFile}`;
|
52
|
+
}
|
53
|
+
|
54
|
+
// more parameters - pass them to wdio
|
55
|
+
let restParams = "";
|
56
|
+
if (process.argv.length > 3) {
|
57
|
+
restParams = process.argv.slice(2).join(" ");
|
58
|
+
}
|
59
|
+
|
60
|
+
// run wdio with calculated parameters
|
61
|
+
const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
|
62
|
+
console.log(`executing: ${cmd}`);
|
63
|
+
child_process.execSync(cmd, {stdio: 'inherit'});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ui5/webcomponents-tools",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.5.0",
|
4
4
|
"description": "UI5 Web Components: webcomponents.tools",
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
6
6
|
"license": "Apache-2.0",
|
@@ -21,20 +21,17 @@
|
|
21
21
|
"directory": "packages/tools"
|
22
22
|
},
|
23
23
|
"dependencies": {
|
24
|
-
"@
|
25
|
-
"@
|
26
|
-
"@
|
27
|
-
"@wdio/
|
28
|
-
"@wdio/
|
29
|
-
"@wdio/
|
30
|
-
"@wdio/
|
31
|
-
"@wdio/mocha-framework": "^7.12.2",
|
32
|
-
"@wdio/spec-reporter": "^7.10.1",
|
24
|
+
"@wdio/cli": "^7.19.7",
|
25
|
+
"@wdio/devtools-service": "^7.19.7",
|
26
|
+
"@wdio/dot-reporter": "^7.19.7",
|
27
|
+
"@wdio/local-runner": "^7.19.7",
|
28
|
+
"@wdio/mocha-framework": "^7.19.7",
|
29
|
+
"@wdio/spec-reporter": "^7.19.7",
|
30
|
+
"@wdio/static-server-service": "^7.19.5",
|
33
31
|
"chai": "^4.3.4",
|
34
32
|
"child_process": "^1.0.2",
|
35
33
|
"chokidar": "^3.5.1",
|
36
34
|
"chokidar-cli": "^3.0.0",
|
37
|
-
"cli-color": "^2.0.1",
|
38
35
|
"command-line-args": "^5.1.1",
|
39
36
|
"concurrently": "^6.0.0",
|
40
37
|
"cross-env": "^7.0.3",
|
@@ -62,15 +59,15 @@
|
|
62
59
|
"recursive-readdir": "^2.2.2",
|
63
60
|
"resolve": "^1.20.0",
|
64
61
|
"rimraf": "^3.0.2",
|
65
|
-
"rollup": "^2.41.4",
|
66
|
-
"rollup-plugin-livereload": "^2.0.0",
|
67
|
-
"rollup-plugin-terser": "^7.0.2",
|
68
|
-
"serve": "^12.0.0",
|
69
62
|
"slash": "3.0.0",
|
70
|
-
"
|
63
|
+
"vite": "^2.9.12",
|
64
|
+
"wdio-chromedriver-service": "^7.3.2",
|
71
65
|
"zx": "^4.3.0"
|
72
66
|
},
|
73
67
|
"peerDependencies": {
|
74
68
|
"chromedriver": "*"
|
69
|
+
},
|
70
|
+
"devDependencies": {
|
71
|
+
"yargs": "^17.5.1"
|
75
72
|
}
|
76
73
|
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
const slash = require("slash");
|
2
|
-
|
3
|
-
function emptyModulePlugin({ emptyModules }) {
|
4
|
-
return {
|
5
|
-
name: "ui5-dev-empty-module-plugin",
|
6
|
-
load(id) {
|
7
|
-
if (emptyModules.some(mod => slash(id).includes(mod))) {
|
8
|
-
return `export default ""`;
|
9
|
-
}
|
10
|
-
return null;
|
11
|
-
},
|
12
|
-
};
|
13
|
-
}
|
14
|
-
|
15
|
-
module.exports = emptyModulePlugin;
|
@@ -1,150 +0,0 @@
|
|
1
|
-
const process = require("process");
|
2
|
-
const fs = require("fs");
|
3
|
-
const os = require("os");
|
4
|
-
const { nodeResolve } = require("@rollup/plugin-node-resolve");
|
5
|
-
const { terser } = require("rollup-plugin-terser");
|
6
|
-
const json = require("@rollup/plugin-json");
|
7
|
-
const replace = require("@rollup/plugin-replace");
|
8
|
-
const colors = require("cli-color");
|
9
|
-
const livereload = require("rollup-plugin-livereload");
|
10
|
-
const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
|
11
|
-
|
12
|
-
const packageFile = JSON.parse(fs.readFileSync("./package.json"));
|
13
|
-
const packageName = packageFile.name;
|
14
|
-
|
15
|
-
const warningsToSkip = [{
|
16
|
-
warningCode: "THIS_IS_UNDEFINED",
|
17
|
-
filePath: /.+zxing.+/,
|
18
|
-
}];
|
19
|
-
|
20
|
-
function ui5DevImportCheckerPlugin() {
|
21
|
-
return {
|
22
|
-
name: "ui5-dev-import-checker-plugin",
|
23
|
-
transform(code, file) {
|
24
|
-
const re = new RegExp(`^import.*"${packageName}/`);
|
25
|
-
if (re.test(code)) {
|
26
|
-
throw new Error(`illegal import in ${file}`);
|
27
|
-
}
|
28
|
-
},
|
29
|
-
};
|
30
|
-
}
|
31
|
-
|
32
|
-
function onwarn(warning, warn) {
|
33
|
-
// Skip warning for known false positives that will otherwise polute the log
|
34
|
-
let skip = warningsToSkip.find(warningToSkip => {
|
35
|
-
let loc, file;
|
36
|
-
return warning.code === warningToSkip.warningCode
|
37
|
-
&& (loc = warning.loc)
|
38
|
-
&& (file = loc.file)
|
39
|
-
&& file.match(warningToSkip.filePath);
|
40
|
-
});
|
41
|
-
if (skip) {
|
42
|
-
return;
|
43
|
-
}
|
44
|
-
|
45
|
-
// warn everything else
|
46
|
-
warn( warning );
|
47
|
-
}
|
48
|
-
|
49
|
-
const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
|
50
|
-
function ui5DevReadyMessagePlugin() {
|
51
|
-
return {
|
52
|
-
name: "ui5-dev-message-ready-plugin",
|
53
|
-
writeBundle: (assets, bundle) => {
|
54
|
-
if (reportedForPackages.has(packageName)) {
|
55
|
-
return;
|
56
|
-
}
|
57
|
-
console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
|
58
|
-
|
59
|
-
if (fs.existsSync(".port")) {
|
60
|
-
const port = `${fs.readFileSync(".port")}`;
|
61
|
-
if (port) {
|
62
|
-
console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
|
63
|
-
}
|
64
|
-
}
|
65
|
-
reportedForPackages.add(packageName);
|
66
|
-
},
|
67
|
-
};
|
68
|
-
}
|
69
|
-
|
70
|
-
const getPlugins = () => {
|
71
|
-
const plugins = [];
|
72
|
-
|
73
|
-
if (process.env.DEV) {
|
74
|
-
plugins.push(replace({
|
75
|
-
values: {
|
76
|
-
'const DEV_MODE = false': 'const DEV_MODE = true',
|
77
|
-
},
|
78
|
-
preventAssignment: false,
|
79
|
-
}));
|
80
|
-
}
|
81
|
-
|
82
|
-
if (process.env.DEV && !process.env.ENABLE_CLDR) {
|
83
|
-
// Empty the CLDR assets file for better performance during development
|
84
|
-
plugins.push(emptyModulePlugin({
|
85
|
-
emptyModules: [
|
86
|
-
"localization/dist/Assets.js",
|
87
|
-
],
|
88
|
-
}));
|
89
|
-
}
|
90
|
-
|
91
|
-
plugins.push(ui5DevImportCheckerPlugin());
|
92
|
-
|
93
|
-
plugins.push(json({
|
94
|
-
include: [
|
95
|
-
/.*assets\/.*\.json/,
|
96
|
-
],
|
97
|
-
namedExports: false,
|
98
|
-
}));
|
99
|
-
|
100
|
-
plugins.push(nodeResolve());
|
101
|
-
|
102
|
-
if (!process.env.DEV) {
|
103
|
-
plugins.push(terser({
|
104
|
-
numWorkers: 1,
|
105
|
-
}));
|
106
|
-
}
|
107
|
-
|
108
|
-
const es6DevMain = process.env.DEV && packageName === "@ui5/webcomponents";
|
109
|
-
if (es6DevMain && os.platform() !== "win32") {
|
110
|
-
plugins.push(livereload({
|
111
|
-
watch: [
|
112
|
-
"dist/resources/bundle.esm.js",
|
113
|
-
"dist/**/*.html",
|
114
|
-
"dist/**/*.json",
|
115
|
-
],
|
116
|
-
}));
|
117
|
-
}
|
118
|
-
|
119
|
-
if (process.env.DEV) {
|
120
|
-
plugins.push(ui5DevReadyMessagePlugin());
|
121
|
-
}
|
122
|
-
|
123
|
-
return plugins;
|
124
|
-
};
|
125
|
-
|
126
|
-
const getES6Config = (input = "bundle.esm.js") => {
|
127
|
-
return [{
|
128
|
-
input,
|
129
|
-
output: {
|
130
|
-
dir: "dist/resources",
|
131
|
-
format: "esm",
|
132
|
-
sourcemap: true,
|
133
|
-
},
|
134
|
-
watch: {
|
135
|
-
clearScreen: false,
|
136
|
-
},
|
137
|
-
plugins: getPlugins(),
|
138
|
-
onwarn: onwarn,
|
139
|
-
}];
|
140
|
-
};
|
141
|
-
|
142
|
-
let config = getES6Config();
|
143
|
-
|
144
|
-
if (process.env.SCOPE) {
|
145
|
-
if (fs.existsSync("bundle.scoped.esm.js")) {
|
146
|
-
config = config.concat(getES6Config("bundle.scoped.esm.js"));
|
147
|
-
}
|
148
|
-
}
|
149
|
-
|
150
|
-
module.exports = config;
|
@@ -1,168 +0,0 @@
|
|
1
|
-
const cssVariables = {};
|
2
|
-
const template = require('./templates/template').template;
|
3
|
-
const sinceTemplate = require('./templates/api-component-since').template;
|
4
|
-
const propertiesTemplate = require('./templates/api-properties-section').template;
|
5
|
-
const slotsTemplate = require('./templates/api-slots-section').template;
|
6
|
-
const eventsTemplate = require('./templates/api-events-section').template;
|
7
|
-
const methodsTemplate = require('./templates/api-methods-section').template;
|
8
|
-
const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
|
9
|
-
const Handlebars = require('handlebars/dist/handlebars.min.js');
|
10
|
-
const fs = require('fs').promises;
|
11
|
-
const path = require('path');
|
12
|
-
const beautify = require("json-beautify");
|
13
|
-
|
14
|
-
const generate = async () => {
|
15
|
-
|
16
|
-
const apiJSONPath = path.normalize(process.argv[2]);
|
17
|
-
const api = JSON.parse(await fs.readFile(apiJSONPath));
|
18
|
-
|
19
|
-
await fs.writeFile(apiJSONPath, beautify(api, null, 2, 100));
|
20
|
-
|
21
|
-
const entries = api['symbols'];
|
22
|
-
const compiledHandlebars = Handlebars.compile(template);
|
23
|
-
const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
|
24
|
-
const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
|
25
|
-
const sinceMarker = "<!--since_tag_marker-->";
|
26
|
-
|
27
|
-
const getComponentByName = name => {
|
28
|
-
return entries.find(element => {
|
29
|
-
return element.basename === name;
|
30
|
-
})
|
31
|
-
};
|
32
|
-
|
33
|
-
const getCSSVarsByName = name => {
|
34
|
-
return cssVariables[name] || [];
|
35
|
-
};
|
36
|
-
|
37
|
-
const capitalize = str => {
|
38
|
-
return str.replace(/^./, str => str.toUpperCase());
|
39
|
-
};
|
40
|
-
|
41
|
-
Handlebars.registerHelper('toLowerCase', function (str) {
|
42
|
-
return str ? str.toLowerCase() : "";
|
43
|
-
});
|
44
|
-
|
45
|
-
Handlebars.registerHelper('toKebabCase', function (str) {
|
46
|
-
const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
47
|
-
return kebab !== str ? kebab : undefined;
|
48
|
-
});
|
49
|
-
|
50
|
-
Handlebars.registerHelper('checkEven', function (iIndex) {
|
51
|
-
return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
|
52
|
-
});
|
53
|
-
|
54
|
-
Handlebars.registerPartial('properties', propertiesTemplate);
|
55
|
-
Handlebars.registerPartial('slots', slotsTemplate);
|
56
|
-
Handlebars.registerPartial('events', eventsTemplate);
|
57
|
-
Handlebars.registerPartial('methods', methodsTemplate);
|
58
|
-
Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
|
59
|
-
|
60
|
-
await fs.mkdir(`dist/test-resources/api`, { recursive: true });
|
61
|
-
|
62
|
-
let entriesAPI = [];
|
63
|
-
|
64
|
-
const appendCSSVarsAPI = entry => {
|
65
|
-
entry.cssVariables = getCSSVarsByName(entry.basename);
|
66
|
-
return entry;
|
67
|
-
}
|
68
|
-
|
69
|
-
const componentHasEntityItem = (component, entity, name) => {
|
70
|
-
return component[entity].some(x => x && x.name === name);
|
71
|
-
};
|
72
|
-
const removeEmpty = arr => arr.filter(x => x);
|
73
|
-
|
74
|
-
const calculateAPI = component => {
|
75
|
-
if (entriesAPI.indexOf(component.basename) !== -1) {
|
76
|
-
return component;
|
77
|
-
}
|
78
|
-
const entities = ["properties", "slots", "events", "methods", "cssVariables"];
|
79
|
-
|
80
|
-
// Initialize all entities with [] if necessary, and remove undefined things, and only leave public things
|
81
|
-
entities.forEach(entity => {
|
82
|
-
component[entity] = removeEmpty(component[entity] || []).filter(x => x.visibility === "public");
|
83
|
-
});
|
84
|
-
|
85
|
-
component = appendCSSVarsAPI(component);
|
86
|
-
|
87
|
-
let parent = getComponentByName(component.extends);
|
88
|
-
if (parent) {
|
89
|
-
let parentComponent = calculateAPI(parent);
|
90
|
-
entities.forEach(entity => {
|
91
|
-
parentComponent[entity].forEach(x => {
|
92
|
-
if (!componentHasEntityItem(component, entity, x.name)) {
|
93
|
-
component[entity].push(x);
|
94
|
-
}
|
95
|
-
});
|
96
|
-
});
|
97
|
-
}
|
98
|
-
|
99
|
-
entriesAPI.push(component.basename);
|
100
|
-
|
101
|
-
return component;
|
102
|
-
};
|
103
|
-
|
104
|
-
const appendAdditionalEntriesAPI = entry => {
|
105
|
-
if (entry.appenddocs) {
|
106
|
-
const additionalEntries = entry.appenddocs.split(" ");
|
107
|
-
entry.additionalDocs = [];
|
108
|
-
|
109
|
-
additionalEntries.forEach(entryName => {
|
110
|
-
let additionalEntry = getComponentByName(entryName);
|
111
|
-
additionalEntry = calculateAPI(additionalEntry);
|
112
|
-
entry.additionalDocs.push(additionalEntry);
|
113
|
-
});
|
114
|
-
}
|
115
|
-
|
116
|
-
return entry;
|
117
|
-
}
|
118
|
-
|
119
|
-
const generateSamplePage = async entry => {
|
120
|
-
let content = "";
|
121
|
-
|
122
|
-
try {
|
123
|
-
content = await fs.readFile(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
|
124
|
-
} catch (err) {
|
125
|
-
}
|
126
|
-
|
127
|
-
if (content) {
|
128
|
-
entry.slots.forEach(slotData => {
|
129
|
-
if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
|
130
|
-
slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
|
131
|
-
}
|
132
|
-
});
|
133
|
-
const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
|
134
|
-
const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
|
135
|
-
|
136
|
-
content = content.replace('<!-- JSDoc marker -->', APIReference);
|
137
|
-
content = content.replace(sinceMarker, EntitySince);
|
138
|
-
|
139
|
-
content = content.replace(linkMatcher, match => {
|
140
|
-
const component = linkMatcher.exec(match)[2];
|
141
|
-
|
142
|
-
// reset the regex
|
143
|
-
linkMatcher.lastIndex = 0;
|
144
|
-
|
145
|
-
return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
|
146
|
-
});
|
147
|
-
|
148
|
-
return fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content);
|
149
|
-
}
|
150
|
-
}
|
151
|
-
|
152
|
-
const generateComponentAPI = entry => {
|
153
|
-
// (1) calculate the API
|
154
|
-
entry = calculateAPI(entry);
|
155
|
-
|
156
|
-
// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
|
157
|
-
entry = appendAdditionalEntriesAPI(entry);
|
158
|
-
|
159
|
-
// (3) generate sample page
|
160
|
-
return generateSamplePage(entry);
|
161
|
-
}
|
162
|
-
|
163
|
-
return Promise.all(entries.map(generateComponentAPI));
|
164
|
-
};
|
165
|
-
|
166
|
-
generate().then(() => {
|
167
|
-
console.log("Documentation generated.");
|
168
|
-
});
|
@@ -1,24 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
{{#if cssVariables}}
|
4
|
-
<h3 class="comment-api-title" >CSS variables</h3>
|
5
|
-
<p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
|
6
|
-
|
7
|
-
<div class="small-space-top api-table">
|
8
|
-
<div class="head api-table-header-roll">
|
9
|
-
<div class="cell api-table-header-cell">Name</div>
|
10
|
-
<div class="cell api-table-header-cell">Description</div>
|
11
|
-
</div>
|
12
|
-
|
13
|
-
{{#each cssVariables}}
|
14
|
-
<div class="row {{checkEven @index}}">
|
15
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
|
16
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">
|
17
|
-
{{{this.description}}}
|
18
|
-
</div>
|
19
|
-
</div>
|
20
|
-
{{/each}}
|
21
|
-
|
22
|
-
</div>
|
23
|
-
{{/if}}`
|
24
|
-
};
|
@@ -1,35 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
{{#if events}}
|
4
|
-
<h3 class="comment-api-title space-top">Events</h3>
|
5
|
-
<p class="small-space-top" >This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as <code>addEventListener</code>. </p>
|
6
|
-
|
7
|
-
<div class="small-space-top api-table">
|
8
|
-
<div class="head api-table-header-roll">
|
9
|
-
<div class="cell api-table-header-cell">Name</div>
|
10
|
-
<div class="cell api-table-header-cell">Description</div>
|
11
|
-
</div>
|
12
|
-
|
13
|
-
{{#each events}}
|
14
|
-
<div class="row {{checkEven @index}}">
|
15
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
|
16
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">
|
17
|
-
{{{this.description}}}
|
18
|
-
{{#if this.since}}
|
19
|
-
<div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
|
20
|
-
{{/if}}
|
21
|
-
</div>
|
22
|
-
</div>
|
23
|
-
|
24
|
-
{{#each this.parameters}}
|
25
|
-
<tr class="api-table-event-param">
|
26
|
-
<div class="api-table-content-event-params-wrapper">
|
27
|
-
<div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
|
28
|
-
<div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
|
29
|
-
</div>
|
30
|
-
</tr>
|
31
|
-
{{/each}}
|
32
|
-
{{/each}}
|
33
|
-
</div>
|
34
|
-
{{/if}}`
|
35
|
-
};
|
@@ -1,26 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
{{#if methods}}
|
4
|
-
<h3 class="comment-api-title space-top">Methods</h3>
|
5
|
-
<p class="small-space-top" >This Web Component exposes public methods. You can invoke them directly on the Web Component instance.</p>
|
6
|
-
|
7
|
-
<div class="small-space-top api-table">
|
8
|
-
<div class="head api-table-header-roll">
|
9
|
-
<div class="cell api-table-header-cell">Name</div>
|
10
|
-
<div class="cell api-table-header-cell">Description</div>
|
11
|
-
</div>
|
12
|
-
|
13
|
-
{{#each methods}}
|
14
|
-
<div class="row {{checkEven @index}}">
|
15
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
|
16
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
|
17
|
-
</div>
|
18
|
-
|
19
|
-
{{#each this.parameters}}
|
20
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold api-table-param-name">{{this.name}}</div>
|
21
|
-
<div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
|
22
|
-
{{/each}}
|
23
|
-
{{/each}}
|
24
|
-
</div>
|
25
|
-
{{/if}}`
|
26
|
-
};
|
@@ -1,42 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
{{#if properties}}
|
4
|
-
<h3 class="comment-api-title" >Properties/Attributes</h3>
|
5
|
-
<p class="small-space-top" >You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.</p>
|
6
|
-
|
7
|
-
<div class="small-space-top api-table">
|
8
|
-
<div class="head api-table-header-roll">
|
9
|
-
<div class="cell api-table-header-cell">Name</div>
|
10
|
-
<div class="cell api-table-header-cell">Type</div>
|
11
|
-
<div class="cell api-table-header-cell">Default Value</div>
|
12
|
-
<div class="cell api-table-header-cell">Description</div>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
{{#each properties}}
|
16
|
-
<div class="row {{checkEven @index}}">
|
17
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold">
|
18
|
-
{{this.name}}
|
19
|
-
{{#if this.readonly}}
|
20
|
-
(readonly)
|
21
|
-
{{/if}}
|
22
|
-
<br>
|
23
|
-
{{#if (toKebabCase this.name)}}
|
24
|
-
{{#unless this.noattribute}}
|
25
|
-
<code>{{toKebabCase this.name}}</code>
|
26
|
-
{{/unless}}
|
27
|
-
{{/if}}
|
28
|
-
</div>
|
29
|
-
<div class="cell api-table-content-cell">{{this.type}}</div>
|
30
|
-
<div class="cell api-table-content-cell">{{this.defaultValue}}</div>
|
31
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">
|
32
|
-
{{{this.description}}}
|
33
|
-
{{#if this.since}}
|
34
|
-
<div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
|
35
|
-
{{/if}}
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
{{/each}}
|
39
|
-
|
40
|
-
</div>
|
41
|
-
{{/if}}`
|
42
|
-
};
|
@@ -1,28 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
{{#if slots}}
|
4
|
-
<h3 class="comment-api-title space-top" >Slots</h3>
|
5
|
-
<p class="small-space-top" >
|
6
|
-
This Element provides slot(s). This means it can display its child nodes.<br>
|
7
|
-
Unless targeting the default slot, use the <code>slot</code> attribute to define the destination slot for each child.<br>
|
8
|
-
Text, along with HTML Elements with no <code>slot</code> attribute, goes the the <code>default</code> slot.
|
9
|
-
</p>
|
10
|
-
|
11
|
-
<div class="small-space-top api-table">
|
12
|
-
<div class="head api-table-header-roll">
|
13
|
-
<div class="cell api-table-header-cell">Slot</div>
|
14
|
-
<div class="cell api-table-header-cell">Type</div>
|
15
|
-
<div class="cell api-table-header-cell">Description</div>
|
16
|
-
</div>
|
17
|
-
|
18
|
-
{{#each slots}}
|
19
|
-
<div class="row {{checkEven @index}}">
|
20
|
-
<div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
|
21
|
-
<div class="cell api-table-content-cell">{{this.type}}</div>
|
22
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
|
23
|
-
</div>
|
24
|
-
{{/each}}
|
25
|
-
|
26
|
-
</div>
|
27
|
-
{{/if}}`
|
28
|
-
};
|
@@ -1,39 +0,0 @@
|
|
1
|
-
module.exports = {
|
2
|
-
template: `
|
3
|
-
<div class="page-container">
|
4
|
-
<div class="api-container">
|
5
|
-
<section class="component-description">
|
6
|
-
{{{description}}}
|
7
|
-
<section class="component-api space-top">
|
8
|
-
{{> properties this}}
|
9
|
-
{{> slots this}}
|
10
|
-
{{> events this}}
|
11
|
-
{{> methods this}}
|
12
|
-
{{> cssVariables this}}
|
13
|
-
</section>
|
14
|
-
</section>
|
15
|
-
</div>
|
16
|
-
</div>
|
17
|
-
{{#each additionalDocs}}
|
18
|
-
<div class="api-container appended-doc">
|
19
|
-
<h1>{{this.basename}}</h1>
|
20
|
-
<section class="component-description">
|
21
|
-
{{{this.description}}}
|
22
|
-
<section class="component-api space-top">
|
23
|
-
{{> properties this}}
|
24
|
-
{{> slots this}}
|
25
|
-
{{> events this}}
|
26
|
-
{{> methods this}}
|
27
|
-
{{> cssVariables this}}
|
28
|
-
</section>
|
29
|
-
</section>
|
30
|
-
</div>
|
31
|
-
{{/each}}
|
32
|
-
<footer class="footer-wrapper">
|
33
|
-
<div class="footer-links">
|
34
|
-
<a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
|
35
|
-
<a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
|
36
|
-
</div>
|
37
|
-
<img src="../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
|
38
|
-
</footer>`
|
39
|
-
};
|
package/lib/serve/index.js
DELETED
@@ -1,46 +0,0 @@
|
|
1
|
-
const fs = require("fs");
|
2
|
-
const path = require("path");
|
3
|
-
const commandLineArgs = require("command-line-args");
|
4
|
-
const { exec } = require("child_process");
|
5
|
-
const colors = require("cli-color");
|
6
|
-
const isPortReachable = require("is-port-reachable");
|
7
|
-
|
8
|
-
const options = commandLineArgs([
|
9
|
-
{ name: "port", type: Number },
|
10
|
-
{ name: "portStep", type: Number },
|
11
|
-
{ name: "packageName", type: String },
|
12
|
-
{ name: "dir", type: String },
|
13
|
-
{ name: "config", type: String },
|
14
|
-
]);
|
15
|
-
const serveConfig = path.join(__dirname, `serve.json`);
|
16
|
-
|
17
|
-
const requestPort = async () => {
|
18
|
-
const serveProcess = (await gen.next()).value;
|
19
|
-
serveProcess.stdout.on('data', data => {
|
20
|
-
const matches = data.match(/Accepting connections at .*?:(\d+)/);
|
21
|
-
if (matches) {
|
22
|
-
console.log(colors.yellow(`Reserved port ${matches[1]} for the ${options.packageName} package.`));
|
23
|
-
fs.writeFileSync(".port", matches[1]);
|
24
|
-
}
|
25
|
-
});
|
26
|
-
};
|
27
|
-
|
28
|
-
async function* serverGenerator(callback, port = 8080, step = 1) {
|
29
|
-
while (true) {
|
30
|
-
const portInUse = await isPortReachable(port, { host: "127.0.0.1" });
|
31
|
-
if (!portInUse) {
|
32
|
-
const command = `serve --config "${serveConfig}" --no-port-switching --no-clipboard -l ${port} ${options.dir}`;
|
33
|
-
console.log(colors.yellow(`Executing: ${command}`));
|
34
|
-
const serveProcess = exec(command, (err) => {
|
35
|
-
console.log(colors.yellow(`Port ${port} already in use.`));
|
36
|
-
callback();
|
37
|
-
});
|
38
|
-
yield serveProcess;
|
39
|
-
}
|
40
|
-
port += step;
|
41
|
-
}
|
42
|
-
}
|
43
|
-
|
44
|
-
const gen = serverGenerator(requestPort, options.port, options.portStep);
|
45
|
-
|
46
|
-
requestPort();
|
package/lib/serve/serve.json
DELETED
package/package-lock.json
DELETED
@@ -1,48 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "@ui5/webcomponents-tools",
|
3
|
-
"version": "1.0.0-rc.8",
|
4
|
-
"lockfileVersion": 1,
|
5
|
-
"requires": true,
|
6
|
-
"dependencies": {
|
7
|
-
"balanced-match": {
|
8
|
-
"version": "1.0.0",
|
9
|
-
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
10
|
-
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
11
|
-
"dev": true
|
12
|
-
},
|
13
|
-
"brace-expansion": {
|
14
|
-
"version": "1.1.11",
|
15
|
-
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
16
|
-
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
17
|
-
"dev": true,
|
18
|
-
"requires": {
|
19
|
-
"balanced-match": "^1.0.0",
|
20
|
-
"concat-map": "0.0.1"
|
21
|
-
}
|
22
|
-
},
|
23
|
-
"concat-map": {
|
24
|
-
"version": "0.0.1",
|
25
|
-
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
26
|
-
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
27
|
-
"dev": true
|
28
|
-
},
|
29
|
-
"minimatch": {
|
30
|
-
"version": "3.0.4",
|
31
|
-
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
32
|
-
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
33
|
-
"dev": true,
|
34
|
-
"requires": {
|
35
|
-
"brace-expansion": "^1.1.7"
|
36
|
-
}
|
37
|
-
},
|
38
|
-
"recursive-readdir": {
|
39
|
-
"version": "2.2.2",
|
40
|
-
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
|
41
|
-
"integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
|
42
|
-
"dev": true,
|
43
|
-
"requires": {
|
44
|
-
"minimatch": "3.0.4"
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
48
|
-
}
|