@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.
Files changed (83) hide show
  1. package/CHANGELOG.md +200 -0
  2. package/README.md +5 -6
  3. package/assets-meta.js +16 -1
  4. package/bin/dev.js +1 -5
  5. package/components-package/nps.js +68 -46
  6. package/components-package/postcss.themes.js +6 -3
  7. package/components-package/vite.config.js +12 -0
  8. package/components-package/wdio.js +73 -31
  9. package/components-package/wdio.sync.js +360 -0
  10. package/icons-collection/nps.js +46 -8
  11. package/lib/copy-and-watch/index.js +30 -5
  12. package/lib/copy-list/index.js +28 -0
  13. package/lib/create-icons/index.js +82 -52
  14. package/lib/create-illustrations/index.js +161 -0
  15. package/lib/create-new-component/index.js +12 -4
  16. package/lib/dev-server/dev-server.js +66 -0
  17. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  18. package/lib/esm-abs-to-rel/index.js +58 -0
  19. package/lib/generate-json-imports/i18n.js +75 -30
  20. package/lib/generate-json-imports/themes.js +62 -24
  21. package/lib/hbs2lit/src/compiler.js +12 -3
  22. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  23. package/lib/hbs2lit/src/litVisitor2.js +31 -6
  24. package/lib/hbs2lit/src/svgProcessor.js +3 -3
  25. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +4 -11
  26. package/lib/hbs2ui5/index.js +37 -21
  27. package/lib/i18n/defaults.js +49 -57
  28. package/lib/i18n/toJSON.js +13 -12
  29. package/lib/jsdoc/config.json +1 -1
  30. package/lib/jsdoc/plugin.js +30 -1
  31. package/lib/jsdoc/template/publish.js +22 -2
  32. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  33. package/lib/postcss-css-to-esm/index.js +33 -18
  34. package/lib/postcss-css-to-json/index.js +31 -11
  35. package/lib/postcss-new-files/index.js +36 -0
  36. package/lib/postcss-p/postcss-p.mjs +14 -0
  37. package/lib/replace-global-core/index.js +25 -0
  38. package/lib/scoping/lint-src.js +1 -1
  39. package/lib/scoping/missing-dependencies.js +65 -0
  40. package/lib/scoping/report-tags-usage.js +28 -0
  41. package/lib/scoping/scope-test-pages.js +1 -1
  42. package/lib/test-runner/test-runner.js +63 -0
  43. package/package.json +42 -52
  44. package/bin/init-ui5-package.js +0 -3
  45. package/components-package/rollup.js +0 -145
  46. package/components-package/serve.json +0 -3
  47. package/lib/documentation/index.js +0 -143
  48. package/lib/documentation/templates/api-component-since.js +0 -3
  49. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  50. package/lib/documentation/templates/api-events-section.js +0 -35
  51. package/lib/documentation/templates/api-methods-section.js +0 -26
  52. package/lib/documentation/templates/api-properties-section.js +0 -40
  53. package/lib/documentation/templates/api-slots-section.js +0 -28
  54. package/lib/documentation/templates/template.js +0 -38
  55. package/lib/init-package/index.js +0 -123
  56. package/lib/init-package/resources/.eslintignore +0 -3
  57. package/lib/init-package/resources/bundle.es5.js +0 -25
  58. package/lib/init-package/resources/bundle.esm.js +0 -34
  59. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  60. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  61. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  62. package/lib/init-package/resources/config/rollup.config.js +0 -1
  63. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  64. package/lib/init-package/resources/package-scripts.js +0 -11
  65. package/lib/init-package/resources/src/Assets.js +0 -5
  66. package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
  67. package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
  68. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  69. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  70. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  71. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  72. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  73. package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
  74. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  75. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  76. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  77. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  78. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  79. package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  80. package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  81. package/lib/init-package/resources/test/pages/index.html +0 -56
  82. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
  83. 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-e7dd012d7",
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
- "@babel/cli": "^7.1.2",
26
- "@babel/core": "^7.1.2",
27
- "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
28
- "@babel/preset-env": "^7.1.0",
29
- "@rollup/plugin-babel": "^5.2.1",
30
- "@rollup/plugin-node-resolve": "^9.0.0",
31
- "@rollup/plugin-url": "^5.0.1",
32
- "@wdio/cli": "^6.1.3",
33
- "@wdio/dot-reporter": "^6.0.16",
34
- "@wdio/local-runner": "^6.1.3",
35
- "@wdio/mocha-framework": "^6.1.0",
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": "^5.0.0",
44
- "cross-env": "^5.2.0",
45
- "cssnano": "^4.1.10",
46
- "escodegen": "^1.11.0",
47
- "eslint": "^5.10.0",
48
- "eslint-config-airbnb-base": "^13.1.0",
49
- "eslint-plugin-import": "^2.14.0",
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.2.3",
52
- "glob": "^7.1.3",
53
- "handlebars": "^4.7.6",
54
- "jsdoc": "^3.6.3",
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.5.1",
57
- "npm-run-all": "^4.1.3",
58
- "nps": "^5.9.8",
59
- "postcss": "^7.0.18",
60
- "postcss-cli": "^6.1.3",
61
- "postcss-combine-duplicated-selectors": "^7.0.0",
62
- "postcss-import": "^12.0.1",
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
- "rimraf": "^2.6.2",
67
- "rollup": "^2.28.2",
68
- "rollup-plugin-filesize": "^6.0.1",
69
- "rollup-plugin-livereload": "^1.0.4",
70
- "rollup-plugin-notify": "^1.1.0",
71
- "rollup-plugin-string": "^2.0.2",
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
- "resolutions": {
81
- "rollup-plugin-livereload/livereload/chokidar": "^3.x"
70
+ "devDependencies": {
71
+ "yargs": "^17.5.1"
82
72
  }
83
73
  }
@@ -1,3 +0,0 @@
1
- #!/usr/bin/env node
2
-
3
- require("../lib/init-package/index.js");
@@ -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,3 +0,0 @@
1
- {
2
- "cleanUrls": false
3
- }
@@ -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,3 +0,0 @@
1
- module.exports = {
2
- template: `{{#if this.since}}v{{this.since}}{{/if}}`
3
- };
@@ -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
- };