@ui5/webcomponents-tools 0.0.0-e7dd012d7 → 0.0.0-e818f286e
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 +200 -0
- package/README.md +5 -6
- package/assets-meta.js +16 -1
- package/bin/dev.js +1 -5
- package/components-package/nps.js +68 -46
- package/components-package/postcss.themes.js +6 -3
- package/components-package/vite.config.js +12 -0
- package/components-package/wdio.js +73 -31
- package/components-package/wdio.sync.js +360 -0
- package/icons-collection/nps.js +46 -8
- package/lib/copy-and-watch/index.js +30 -5
- package/lib/copy-list/index.js +28 -0
- package/lib/create-icons/index.js +82 -52
- package/lib/create-illustrations/index.js +161 -0
- package/lib/create-new-component/index.js +12 -4
- package/lib/dev-server/dev-server.js +66 -0
- package/lib/dev-server/virtual-index-html-plugin.js +52 -0
- package/lib/esm-abs-to-rel/index.js +58 -0
- package/lib/generate-json-imports/i18n.js +75 -30
- package/lib/generate-json-imports/themes.js +62 -24
- package/lib/hbs2lit/src/compiler.js +12 -3
- package/lib/hbs2lit/src/includesReplacer.js +5 -5
- package/lib/hbs2lit/src/litVisitor2.js +31 -6
- package/lib/hbs2lit/src/svgProcessor.js +3 -3
- package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +4 -11
- package/lib/hbs2ui5/index.js +37 -21
- package/lib/i18n/defaults.js +49 -57
- package/lib/i18n/toJSON.js +13 -12
- package/lib/jsdoc/config.json +1 -1
- package/lib/jsdoc/plugin.js +30 -1
- package/lib/jsdoc/template/publish.js +22 -2
- package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
- package/lib/postcss-css-to-esm/index.js +33 -18
- package/lib/postcss-css-to-json/index.js +31 -11
- package/lib/postcss-new-files/index.js +36 -0
- package/lib/postcss-p/postcss-p.mjs +14 -0
- package/lib/replace-global-core/index.js +25 -0
- package/lib/scoping/lint-src.js +1 -1
- package/lib/scoping/missing-dependencies.js +65 -0
- package/lib/scoping/report-tags-usage.js +28 -0
- package/lib/scoping/scope-test-pages.js +1 -1
- package/lib/test-runner/test-runner.js +63 -0
- package/package.json +42 -52
- package/bin/init-ui5-package.js +0 -3
- package/components-package/rollup.js +0 -145
- package/components-package/serve.json +0 -3
- package/lib/documentation/index.js +0 -143
- 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 -40
- package/lib/documentation/templates/api-slots-section.js +0 -28
- package/lib/documentation/templates/template.js +0 -38
- package/lib/init-package/index.js +0 -123
- package/lib/init-package/resources/.eslintignore +0 -3
- package/lib/init-package/resources/bundle.es5.js +0 -25
- package/lib/init-package/resources/bundle.esm.js +0 -34
- package/lib/init-package/resources/config/.eslintrc.js +0 -1
- package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
- package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
- package/lib/init-package/resources/config/rollup.config.js +0 -1
- package/lib/init-package/resources/config/wdio.conf.js +0 -1
- package/lib/init-package/resources/package-scripts.js +0 -11
- package/lib/init-package/resources/src/Assets.js +0 -5
- package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
- package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
- package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
- package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
- package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
- package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
- package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
- package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
- package/lib/init-package/resources/test/pages/index.html +0 -56
- package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
- package/package-lock.json +0 -48
@@ -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": "0.0.0-
|
3
|
+
"version": "0.0.0-e818f286e",
|
4
4
|
"description": "UI5 Web Components: webcomponents.tools",
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
6
6
|
"license": "Apache-2.0",
|
@@ -13,8 +13,7 @@
|
|
13
13
|
"scripts": {},
|
14
14
|
"bin": {
|
15
15
|
"wc-dev": "bin/dev.js",
|
16
|
-
"wc-create-ui5-element": "bin/create-ui5-element.js"
|
17
|
-
"wc-init-ui5-package": "bin/init-ui5-package.js"
|
16
|
+
"wc-create-ui5-element": "bin/create-ui5-element.js"
|
18
17
|
},
|
19
18
|
"repository": {
|
20
19
|
"type": "git",
|
@@ -22,62 +21,53 @@
|
|
22
21
|
"directory": "packages/tools"
|
23
22
|
},
|
24
23
|
"dependencies": {
|
25
|
-
"@
|
26
|
-
"@
|
27
|
-
"@
|
28
|
-
"@
|
29
|
-
"@
|
30
|
-
"@
|
31
|
-
"@
|
32
|
-
"
|
33
|
-
"
|
34
|
-
"
|
35
|
-
"
|
36
|
-
"@wdio/spec-reporter": "^6.0.16",
|
37
|
-
"@wdio/sync": "^6.1.0",
|
38
|
-
"@webcomponents/webcomponentsjs": "^2.4.0",
|
39
|
-
"chai": "^4.2.0",
|
40
|
-
"chokidar-cli": "^2.0.0",
|
41
|
-
"clean-css": "^4.2.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",
|
31
|
+
"chai": "^4.3.4",
|
32
|
+
"child_process": "^1.0.2",
|
33
|
+
"chokidar": "^3.5.1",
|
34
|
+
"chokidar-cli": "^3.0.0",
|
42
35
|
"command-line-args": "^5.1.1",
|
43
|
-
"concurrently": "^
|
44
|
-
"cross-env": "^
|
45
|
-
"cssnano": "^4.1.
|
46
|
-
"escodegen": "^
|
47
|
-
"eslint": "^
|
48
|
-
"eslint-config-airbnb-base": "^
|
49
|
-
"eslint-plugin-import": "^2.
|
36
|
+
"concurrently": "^6.0.0",
|
37
|
+
"cross-env": "^7.0.3",
|
38
|
+
"cssnano": "^4.1.11",
|
39
|
+
"escodegen": "^2.0.0",
|
40
|
+
"eslint": "^7.22.0",
|
41
|
+
"eslint-config-airbnb-base": "^14.2.1",
|
42
|
+
"eslint-plugin-import": "^2.22.1",
|
50
43
|
"esprima": "^4.0.1",
|
51
|
-
"getopts": "^2.
|
52
|
-
"glob": "^7.1.
|
53
|
-
"
|
54
|
-
"
|
44
|
+
"getopts": "^2.3.0",
|
45
|
+
"glob": "^7.1.6",
|
46
|
+
"glob-parent": "^6.0.2",
|
47
|
+
"globby": "^13.1.1",
|
48
|
+
"handlebars": "^4.7.7",
|
49
|
+
"is-port-reachable": "^3.1.0",
|
50
|
+
"jsdoc": "^3.6.6",
|
55
51
|
"json-beautify": "^1.1.1",
|
56
|
-
"mkdirp": "^0.
|
57
|
-
"
|
58
|
-
"
|
59
|
-
"postcss": "^
|
60
|
-
"postcss-
|
61
|
-
"postcss-
|
62
|
-
"
|
63
|
-
"properties-reader": "^0.3.1",
|
64
|
-
"puppeteer": "^1.11.0",
|
52
|
+
"mkdirp": "^1.0.4",
|
53
|
+
"nps": "^5.10.0",
|
54
|
+
"postcss": "^8.4.5",
|
55
|
+
"postcss-cli": "^9.1.0",
|
56
|
+
"postcss-import": "^14.0.2",
|
57
|
+
"postcss-selector-parser": "^6.0.10",
|
58
|
+
"properties-reader": "^2.2.0",
|
65
59
|
"recursive-readdir": "^2.2.2",
|
66
|
-
"
|
67
|
-
"
|
68
|
-
"
|
69
|
-
"
|
70
|
-
"
|
71
|
-
"
|
72
|
-
"rollup-plugin-terser": "^7.0.2",
|
73
|
-
"rollup-plugin-visualizer": "^0.9.2",
|
74
|
-
"serve": "^10.1.1",
|
75
|
-
"wdio-chromedriver-service": "^6.0.2"
|
60
|
+
"resolve": "^1.20.0",
|
61
|
+
"rimraf": "^3.0.2",
|
62
|
+
"slash": "3.0.0",
|
63
|
+
"vite": "^2.9.12",
|
64
|
+
"wdio-chromedriver-service": "^7.3.2",
|
65
|
+
"zx": "^4.3.0"
|
76
66
|
},
|
77
67
|
"peerDependencies": {
|
78
68
|
"chromedriver": "*"
|
79
69
|
},
|
80
|
-
"
|
81
|
-
"
|
70
|
+
"devDependencies": {
|
71
|
+
"yargs": "^17.5.1"
|
82
72
|
}
|
83
73
|
}
|
package/bin/init-ui5-package.js
DELETED
@@ -1,145 +0,0 @@
|
|
1
|
-
const process = require("process");
|
2
|
-
const fs = require("fs");
|
3
|
-
const os = require("os");
|
4
|
-
const { babel } = require("@rollup/plugin-babel");
|
5
|
-
const { nodeResolve } = require("@rollup/plugin-node-resolve");
|
6
|
-
const url = require("@rollup/plugin-url");
|
7
|
-
const { terser } = require("rollup-plugin-terser");
|
8
|
-
const notify = require('rollup-plugin-notify');
|
9
|
-
const filesize = require('rollup-plugin-filesize');
|
10
|
-
const livereload = require('rollup-plugin-livereload');
|
11
|
-
|
12
|
-
const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
|
13
|
-
const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
|
14
|
-
|
15
|
-
function ui5DevImportCheckerPlugin() {
|
16
|
-
return {
|
17
|
-
name: "ui5-dev-import-checker-plugin",
|
18
|
-
transform(code, file) {
|
19
|
-
const re = new RegExp(`^import.*"${packageName}/`);
|
20
|
-
if (re.test(code)) {
|
21
|
-
throw new Error(`illegal import in ${file}`);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
};
|
25
|
-
}
|
26
|
-
|
27
|
-
const getPlugins = ({ transpile }) => {
|
28
|
-
const plugins = [];
|
29
|
-
let publicPath = DEPLOY_PUBLIC_PATH;
|
30
|
-
|
31
|
-
if (!process.env.DEV) {
|
32
|
-
plugins.push(filesize({
|
33
|
-
render : function (options, bundle, { minSize, gzipSize, brotliSize, bundleSize }){
|
34
|
-
return gzipSize;
|
35
|
-
}
|
36
|
-
}));
|
37
|
-
}
|
38
|
-
|
39
|
-
plugins.push(ui5DevImportCheckerPlugin());
|
40
|
-
|
41
|
-
plugins.push(url({
|
42
|
-
limit: 0,
|
43
|
-
include: [
|
44
|
-
/.*assets\/.*\.json/
|
45
|
-
],
|
46
|
-
emitFiles: true,
|
47
|
-
fileName: "[name].[hash][extname]",
|
48
|
-
publicPath,
|
49
|
-
}));
|
50
|
-
|
51
|
-
|
52
|
-
if (transpile) {
|
53
|
-
plugins.push(babel({
|
54
|
-
presets: ["@babel/preset-env"],
|
55
|
-
exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, //exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
|
56
|
-
sourcemap: true,
|
57
|
-
}));
|
58
|
-
}
|
59
|
-
|
60
|
-
plugins.push(nodeResolve());
|
61
|
-
|
62
|
-
if (!process.env.DEV) {
|
63
|
-
plugins.push(terser());
|
64
|
-
}
|
65
|
-
|
66
|
-
if (process.env.DEV) {
|
67
|
-
plugins.push(notify());
|
68
|
-
}
|
69
|
-
|
70
|
-
const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
|
71
|
-
if (es6DevMain && os.platform() !== "win32") {
|
72
|
-
plugins.push(livereload({
|
73
|
-
watch: [
|
74
|
-
"dist/resources/bundle.esm.js",
|
75
|
-
"dist/**/*.html",
|
76
|
-
"dist/**/*.json",
|
77
|
-
]
|
78
|
-
}));
|
79
|
-
}
|
80
|
-
|
81
|
-
return plugins;
|
82
|
-
};
|
83
|
-
|
84
|
-
const getES6Config = (input = "bundle.esm.js") => {
|
85
|
-
return [{
|
86
|
-
input,
|
87
|
-
output: {
|
88
|
-
dir: "dist/resources",
|
89
|
-
format: "esm",
|
90
|
-
sourcemap: true
|
91
|
-
},
|
92
|
-
moduleContext: (id) => {
|
93
|
-
if (id.includes("url-search-params-polyfill")) {
|
94
|
-
// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
|
95
|
-
return "window";
|
96
|
-
}
|
97
|
-
},
|
98
|
-
watch: {
|
99
|
-
clearScreen: false
|
100
|
-
},
|
101
|
-
plugins: getPlugins({transpile: false}),
|
102
|
-
}];
|
103
|
-
};
|
104
|
-
|
105
|
-
const getES5Config = (input = "bundle.es5.js") => {
|
106
|
-
return [ {
|
107
|
-
input,
|
108
|
-
output: {
|
109
|
-
dir: "dist/resources",
|
110
|
-
format: "iife",
|
111
|
-
inlineDynamicImports: true,
|
112
|
-
name: "sap-ui-webcomponents-bundle",
|
113
|
-
extend: "true", // Whether or not to extend the global variable defined by the name option in umd or iife formats.
|
114
|
-
sourcemap: true
|
115
|
-
},
|
116
|
-
moduleContext: (id) => {
|
117
|
-
if (id.includes("url-search-params-polyfill")) {
|
118
|
-
// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
|
119
|
-
return "window";
|
120
|
-
}
|
121
|
-
},
|
122
|
-
watch: {
|
123
|
-
clearScreen: false
|
124
|
-
},
|
125
|
-
plugins: getPlugins({transpile: true}),
|
126
|
-
}];
|
127
|
-
};
|
128
|
-
|
129
|
-
let config = getES6Config();
|
130
|
-
|
131
|
-
if (process.env.ES5_BUILD) {
|
132
|
-
config = config.concat(getES5Config());
|
133
|
-
}
|
134
|
-
|
135
|
-
if (process.env.SCOPE) {
|
136
|
-
if (fs.existsSync("bundle.scoped.esm.js")) {
|
137
|
-
config = config.concat(getES6Config("bundle.scoped.esm.js"));
|
138
|
-
|
139
|
-
if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
|
140
|
-
config = config.concat(getES5Config("bundle.scoped.es5.js"));
|
141
|
-
}
|
142
|
-
}
|
143
|
-
}
|
144
|
-
|
145
|
-
module.exports = config;
|
@@ -1,143 +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');
|
11
|
-
const path = require('path');
|
12
|
-
const mkdirp = require('mkdirp');
|
13
|
-
|
14
|
-
const api = JSON.parse(fs.readFileSync(path.normalize(process.argv[2])));
|
15
|
-
|
16
|
-
const entries = api['symbols'];
|
17
|
-
const compiledHandlebars = Handlebars.compile(template);
|
18
|
-
const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
|
19
|
-
const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
|
20
|
-
const sinceMarker = "<!--since_tag_marker-->";
|
21
|
-
|
22
|
-
const getComponentByName = name => {
|
23
|
-
return entries.find(element => {
|
24
|
-
return element.basename === name;
|
25
|
-
})
|
26
|
-
};
|
27
|
-
|
28
|
-
const getCSSVarsByName = name => {
|
29
|
-
return cssVariables[name] || [];
|
30
|
-
};
|
31
|
-
|
32
|
-
const capitalize = str => {
|
33
|
-
return str.replace(/^./, str => str.toUpperCase());
|
34
|
-
};
|
35
|
-
|
36
|
-
Handlebars.registerHelper('toLowerCase', function (str) {
|
37
|
-
return str ? str.toLowerCase() : "";
|
38
|
-
});
|
39
|
-
|
40
|
-
Handlebars.registerHelper('toKebabCase', function (str) {
|
41
|
-
const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
42
|
-
return kebab !== str ? kebab : undefined;
|
43
|
-
});
|
44
|
-
|
45
|
-
Handlebars.registerHelper('checkEven', function (iIndex) {
|
46
|
-
return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
|
47
|
-
});
|
48
|
-
|
49
|
-
Handlebars.registerPartial('properties', propertiesTemplate);
|
50
|
-
Handlebars.registerPartial('slots', slotsTemplate);
|
51
|
-
Handlebars.registerPartial('events', eventsTemplate);
|
52
|
-
Handlebars.registerPartial('methods', methodsTemplate);
|
53
|
-
Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
|
54
|
-
|
55
|
-
mkdirp.sync(`dist/test-resources/api`);
|
56
|
-
|
57
|
-
let entriesAPI = [];
|
58
|
-
|
59
|
-
const appendCSSVarsAPI = entry => {
|
60
|
-
entry.cssVariables = getCSSVarsByName(entry.basename);
|
61
|
-
return entry;
|
62
|
-
}
|
63
|
-
|
64
|
-
const calculateAPI = entry => {
|
65
|
-
if (entriesAPI.indexOf(entry.basename) !== -1) {
|
66
|
-
return entry;
|
67
|
-
}
|
68
|
-
|
69
|
-
let parent = getComponentByName(entry.extends) || {};
|
70
|
-
|
71
|
-
entry = appendCSSVarsAPI(entry);
|
72
|
-
parent = appendCSSVarsAPI(parent);
|
73
|
-
|
74
|
-
parent = { ...{ properties: [], events: [], slots: [], cssVariables: [] }, ...parent };
|
75
|
-
|
76
|
-
// extend component documentation
|
77
|
-
entry.properties = [...(entry.properties || []), ...(parent.properties || [])];
|
78
|
-
entry.events = [...(entry.events || []), ...(parent.events || [])];
|
79
|
-
entry.slots = [...(entry.slots || []), ...(parent.slots || [])];
|
80
|
-
entry.cssVariables = [...(entry.cssVariables || []), ...(parent.cssVariables || [])];
|
81
|
-
|
82
|
-
entriesAPI.push(entry.basename);
|
83
|
-
|
84
|
-
return entry;
|
85
|
-
}
|
86
|
-
|
87
|
-
const appendAdditionalEntriesAPI = entry => {
|
88
|
-
if (entry.appenddocs) {
|
89
|
-
const additionalEntries = entry.appenddocs.split(" ");
|
90
|
-
entry.additionalDocs = [];
|
91
|
-
|
92
|
-
additionalEntries.forEach(entryName => {
|
93
|
-
let additionalEntry = getComponentByName(entryName);
|
94
|
-
additionalEntry = calculateAPI(additionalEntry);
|
95
|
-
entry.additionalDocs.push(additionalEntry);
|
96
|
-
});
|
97
|
-
}
|
98
|
-
|
99
|
-
return entry;
|
100
|
-
}
|
101
|
-
|
102
|
-
const generateSamplePage = entry => {
|
103
|
-
let content = "";
|
104
|
-
|
105
|
-
try {
|
106
|
-
content = fs.readFileSync(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
|
107
|
-
} catch (err) { }
|
108
|
-
|
109
|
-
if (content) {
|
110
|
-
const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
|
111
|
-
const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
|
112
|
-
|
113
|
-
content = content.replace('<!-- JSDoc marker -->', APIReference);
|
114
|
-
content = content.replace(sinceMarker, EntitySince);
|
115
|
-
|
116
|
-
content = content.replace(linkMatcher, match => {
|
117
|
-
const component = linkMatcher.exec(match)[2];
|
118
|
-
|
119
|
-
// reset the regex
|
120
|
-
linkMatcher.lastIndex = 0;
|
121
|
-
|
122
|
-
return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
|
123
|
-
});
|
124
|
-
|
125
|
-
fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
|
126
|
-
// console.log(err);
|
127
|
-
});
|
128
|
-
}
|
129
|
-
}
|
130
|
-
|
131
|
-
const generateComponentAPI = entry => {
|
132
|
-
// (1) calculate the API
|
133
|
-
entry = calculateAPI(entry);
|
134
|
-
|
135
|
-
// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
|
136
|
-
entry = appendAdditionalEntriesAPI(entry);
|
137
|
-
|
138
|
-
// (3) generate sample page
|
139
|
-
generateSamplePage(entry);
|
140
|
-
}
|
141
|
-
|
142
|
-
entries.forEach(generateComponentAPI);
|
143
|
-
entriesAPI = [];
|
@@ -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,40 +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
|
-
<code>{{toKebabCase this.name}}</code>
|
25
|
-
{{/if}}
|
26
|
-
</div>
|
27
|
-
<div class="cell api-table-content-cell">{{this.type}}</div>
|
28
|
-
<div class="cell api-table-content-cell">{{this.defaultValue}}</div>
|
29
|
-
<div class="cell api-table-content-cell api-table-content-cell-description">
|
30
|
-
{{{this.description}}}
|
31
|
-
{{#if this.since}}
|
32
|
-
<div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
|
33
|
-
{{/if}}
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
{{/each}}
|
37
|
-
|
38
|
-
</div>
|
39
|
-
{{/if}}`
|
40
|
-
};
|
@@ -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
|
-
};
|