@ui5/webcomponents-tools 0.0.0-fb61e9889 → 0.0.0-fca1107e7

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 (82) hide show
  1. package/CHANGELOG.md +980 -0
  2. package/README.md +6 -6
  3. package/assets-meta.js +16 -3
  4. package/bin/dev.js +1 -5
  5. package/components-package/eslint.js +36 -0
  6. package/components-package/nps.js +108 -70
  7. package/components-package/postcss.components.js +1 -21
  8. package/components-package/postcss.themes.js +1 -23
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +405 -353
  11. package/components-package/wdio.sync.js +26 -2
  12. package/icons-collection/nps.js +51 -18
  13. package/lib/amd-to-es6/index.js +102 -0
  14. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  15. package/lib/cem/custom-elements-manifest.config.mjs +501 -0
  16. package/lib/cem/event.mjs +131 -0
  17. package/lib/cem/schema-internal.json +1357 -0
  18. package/lib/cem/schema.json +1098 -0
  19. package/lib/cem/types-internal.d.ts +796 -0
  20. package/lib/cem/types.d.ts +736 -0
  21. package/lib/cem/utils.mjs +384 -0
  22. package/lib/cem/validate.js +70 -0
  23. package/lib/copy-and-watch/index.js +24 -1
  24. package/lib/copy-list/index.js +17 -17
  25. package/lib/create-icons/index.js +124 -58
  26. package/lib/create-illustrations/index.js +153 -66
  27. package/lib/create-new-component/index.js +71 -104
  28. package/lib/create-new-component/jsFileContentTemplate.js +73 -0
  29. package/lib/create-new-component/tsFileContentTemplate.js +71 -0
  30. package/lib/css-processors/css-processor-component-styles.mjs +47 -0
  31. package/lib/css-processors/css-processor-components.mjs +77 -0
  32. package/lib/css-processors/css-processor-themes.mjs +79 -0
  33. package/lib/css-processors/scope-variables.mjs +49 -0
  34. package/lib/css-processors/shared.mjs +76 -0
  35. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  36. package/lib/dev-server/dev-server.js +66 -0
  37. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  38. package/lib/generate-custom-elements-manifest/index.js +271 -0
  39. package/lib/generate-js-imports/illustrations.js +86 -0
  40. package/lib/generate-json-imports/i18n.js +43 -31
  41. package/lib/generate-json-imports/themes.js +36 -24
  42. package/lib/hbs2lit/src/compiler.js +24 -4
  43. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  44. package/lib/hbs2lit/src/litVisitor2.js +95 -24
  45. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  46. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +32 -4
  47. package/lib/hbs2ui5/index.js +56 -23
  48. package/lib/i18n/defaults.js +65 -57
  49. package/lib/i18n/toJSON.js +12 -11
  50. package/lib/jsdoc/configTypescript.json +29 -0
  51. package/lib/jsdoc/plugin.js +41 -0
  52. package/lib/jsdoc/preprocess.js +146 -0
  53. package/lib/jsdoc/template/publish.js +21 -2
  54. package/lib/postcss-combine-duplicated-selectors/index.js +185 -0
  55. package/lib/scoping/get-all-tags.js +2 -9
  56. package/lib/scoping/missing-dependencies.js +65 -0
  57. package/lib/scoping/report-tags-usage.js +28 -0
  58. package/lib/scoping/scope-test-pages.js +2 -1
  59. package/lib/test-runner/test-runner.js +71 -0
  60. package/package.json +32 -29
  61. package/components-package/rollup-plugins/empty-module.js +0 -15
  62. package/components-package/rollup.js +0 -237
  63. package/lib/documentation/index.js +0 -165
  64. package/lib/documentation/templates/api-component-since.js +0 -3
  65. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  66. package/lib/documentation/templates/api-events-section.js +0 -35
  67. package/lib/documentation/templates/api-methods-section.js +0 -26
  68. package/lib/documentation/templates/api-properties-section.js +0 -40
  69. package/lib/documentation/templates/api-slots-section.js +0 -28
  70. package/lib/documentation/templates/template.js +0 -38
  71. package/lib/esm-abs-to-rel/index.js +0 -54
  72. package/lib/hash/config.js +0 -10
  73. package/lib/hash/generate.js +0 -19
  74. package/lib/hash/upToDate.js +0 -31
  75. package/lib/polyfill-placeholder/index.js +0 -5
  76. package/lib/postcss-css-to-esm/index.js +0 -45
  77. package/lib/postcss-css-to-json/index.js +0 -31
  78. package/lib/postcss-new-files/index.js +0 -36
  79. package/lib/replace-global-core/index.js +0 -20
  80. package/lib/serve/index.js +0 -46
  81. package/lib/serve/serve.json +0 -3
  82. package/package-lock.json +0 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-tools",
3
- "version": "0.0.0-fb61e9889",
3
+ "version": "0.0.0-fca1107e7",
4
4
  "description": "UI5 Web Components: webcomponents.tools",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -21,61 +21,64 @@
21
21
  "directory": "packages/tools"
22
22
  },
23
23
  "dependencies": {
24
- "@babel/core": "^7.13.10",
25
- "@babel/preset-env": "^7.13.10",
26
- "@openui5/sap.ui.core": "1.95.0",
27
- "@rollup/plugin-babel": "^5.3.0",
28
- "@rollup/plugin-json": "^4.1.0",
29
- "@rollup/plugin-node-resolve": "^13.0.5",
30
- "@rollup/plugin-replace": "^3.0.0",
31
- "@rollup/plugin-url": "^6.0.0",
32
- "@wdio/cli": "^7.12.2",
33
- "@wdio/dot-reporter": "^7.10.1",
34
- "@wdio/local-runner": "^7.12.2",
35
- "@wdio/mocha-framework": "^7.12.2",
36
- "@wdio/spec-reporter": "^7.10.1",
37
- "@webcomponents/webcomponentsjs": "^2.5.0",
24
+ "@custom-elements-manifest/analyzer": "^0.8.4",
25
+ "@typescript-eslint/eslint-plugin": "^6.9.0",
26
+ "@typescript-eslint/parser": "^6.9.0",
27
+ "@wdio/cli": "^7.19.7",
28
+ "@wdio/dot-reporter": "^7.19.7",
29
+ "@wdio/local-runner": "^7.19.7",
30
+ "@wdio/mocha-framework": "^7.19.7",
31
+ "@wdio/spec-reporter": "^7.19.7",
32
+ "@wdio/static-server-service": "^7.19.5",
33
+ "ajv": "^8.12.0",
34
+ "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
38
35
  "chai": "^4.3.4",
39
36
  "child_process": "^1.0.2",
40
37
  "chokidar": "^3.5.1",
41
38
  "chokidar-cli": "^3.0.0",
42
- "colors": "^1.4.0",
43
39
  "command-line-args": "^5.1.1",
40
+ "comment-parser": "^1.4.0",
44
41
  "concurrently": "^6.0.0",
45
42
  "cross-env": "^7.0.3",
46
- "cssnano": "^4.1.11",
43
+ "custom-element-jet-brains-integration": "^1.4.4",
47
44
  "escodegen": "^2.0.0",
48
45
  "eslint": "^7.22.0",
49
46
  "eslint-config-airbnb-base": "^14.2.1",
50
47
  "eslint-plugin-import": "^2.22.1",
51
48
  "esprima": "^4.0.1",
52
- "folder-hash": "^4.0.1",
53
49
  "getopts": "^2.3.0",
54
50
  "glob": "^7.1.6",
55
51
  "glob-parent": "^6.0.2",
52
+ "globby": "^13.1.1",
56
53
  "handlebars": "^4.7.7",
57
54
  "is-port-reachable": "^3.1.0",
58
55
  "jsdoc": "^3.6.6",
59
56
  "json-beautify": "^1.1.1",
60
57
  "mkdirp": "^1.0.4",
61
58
  "nps": "^5.10.0",
62
- "postcss": "^8.2.10",
63
- "postcss-cli": "^9.0.1",
64
- "postcss-combine-duplicated-selectors": "^10.0.3",
65
- "postcss-import": "^14.0.0",
59
+ "postcss": "^8.4.5",
60
+ "postcss-cli": "^9.1.0",
61
+ "postcss-selector-parser": "^6.0.10",
62
+ "prompts": "^2.4.2",
66
63
  "properties-reader": "^2.2.0",
67
64
  "recursive-readdir": "^2.2.2",
68
65
  "resolve": "^1.20.0",
69
66
  "rimraf": "^3.0.2",
70
- "rollup": "^2.41.4",
71
- "rollup-plugin-filesize": "^9.1.1",
72
- "rollup-plugin-livereload": "^2.0.0",
73
- "rollup-plugin-terser": "^7.0.2",
74
- "serve": "^12.0.0",
75
67
  "slash": "3.0.0",
76
- "wdio-chromedriver-service": "^7.0.0"
68
+ "vite": "^4.4.9",
69
+ "wdio-chromedriver-service": "^7.3.2"
77
70
  },
78
71
  "peerDependencies": {
79
- "chromedriver": "*"
72
+ "chromedriver": "*",
73
+ "typescript": "^5.2.2"
74
+ },
75
+ "peerDependenciesMeta": {
76
+ "typescript": {
77
+ "optional": true
78
+ }
79
+ },
80
+ "devDependencies": {
81
+ "esbuild": "^0.19.9",
82
+ "yargs": "^17.5.1"
80
83
  }
81
84
  }
@@ -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,237 +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 json = require("@rollup/plugin-json");
9
- const replace = require("@rollup/plugin-replace");
10
- const colors = require("colors/safe");
11
- const filesize = require("rollup-plugin-filesize");
12
- const livereload = require("rollup-plugin-livereload");
13
- const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
14
-
15
- const packageFile = JSON.parse(fs.readFileSync("./package.json"));
16
- const packageName = packageFile.name;
17
- const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
18
-
19
- const warningsToSkip = [{
20
- warningCode: "THIS_IS_UNDEFINED",
21
- filePath: /.+zxing.+/,
22
- }];
23
-
24
- function ui5DevImportCheckerPlugin() {
25
- return {
26
- name: "ui5-dev-import-checker-plugin",
27
- transform(code, file) {
28
- const re = new RegExp(`^import.*"${packageName}/`);
29
- if (re.test(code)) {
30
- throw new Error(`illegal import in ${file}`);
31
- }
32
- },
33
- };
34
- }
35
-
36
- function onwarn(warning, warn) {
37
- // Skip warning for known false positives that will otherwise polute the log
38
- let skip = warningsToSkip.find(warningToSkip => {
39
- let loc, file;
40
- return warning.code === warningToSkip.warningCode
41
- && (loc = warning.loc)
42
- && (file = loc.file)
43
- && file.match(warningToSkip.filePath);
44
- });
45
- if (skip) {
46
- return;
47
- }
48
-
49
- // warn everything else
50
- warn( warning );
51
- }
52
-
53
- const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
54
- function ui5DevReadyMessagePlugin() {
55
- return {
56
- name: "ui5-dev-message-ready-plugin",
57
- writeBundle: (assets, bundle) => {
58
- if (reportedForPackages.has(packageName)) {
59
- return;
60
- }
61
- console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
62
-
63
- if (fs.existsSync(".port")) {
64
- const port = `${fs.readFileSync(".port")}`;
65
- if (port) {
66
- console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
67
- }
68
- }
69
- reportedForPackages.add(packageName);
70
- },
71
- };
72
- }
73
-
74
- const getPlugins = ({ transpile }) => {
75
- const plugins = [];
76
-
77
- if (process.env.DEV) {
78
- plugins.push(replace({
79
- values: {
80
- 'const DEV_MODE = false': 'const DEV_MODE = true',
81
- },
82
- preventAssignment: false,
83
- }));
84
- }
85
-
86
- if (process.env.DEV && !process.env.ENABLE_CLDR) {
87
- // Empty the CLDR assets file for better performance during development
88
- plugins.push(emptyModulePlugin({
89
- emptyModules: [
90
- "localization/dist/Assets.js",
91
- ],
92
- }));
93
- }
94
-
95
- if (!process.env.DEV) {
96
- plugins.push(filesize(
97
- {
98
- reporter(options, bundle, {
99
- minSize, gzipSize, brotliSize, bundleSize,
100
- fileName,
101
- // "showBeforeSizes: release"
102
- lastVersion,
103
- // "showBeforeSizes: "release" or "showBeforeSizes": "build"
104
- bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
105
- }) {
106
- // If a promise is returned, it will be awaited before rendering.
107
- return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
108
- },
109
- },
110
-
111
- ));
112
- }
113
-
114
- const publicPath = DEPLOY_PUBLIC_PATH;
115
-
116
- plugins.push(ui5DevImportCheckerPlugin());
117
-
118
- if (!transpile) {
119
- plugins.push(json({
120
- include: [
121
- /.*assets\/.*\.json/,
122
- ],
123
- namedExports: false,
124
- }));
125
- }
126
-
127
- if (transpile) {
128
- plugins.push(url({
129
- limit: 0,
130
- include: [
131
- /.*assets\/.*\.json/,
132
- ],
133
- emitFiles: true,
134
- fileName: "[name].[hash][extname]",
135
- publicPath,
136
- }));
137
- }
138
-
139
- if (transpile) {
140
- plugins.push(babel({
141
- presets: ["@babel/preset-env"],
142
- exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
143
- sourcemap: true,
144
- babelHelpers: "bundled",
145
- }));
146
- }
147
-
148
- plugins.push(nodeResolve());
149
-
150
- if (!process.env.DEV) {
151
- plugins.push(terser({
152
- numWorkers: 1,
153
- }));
154
- }
155
-
156
- const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
157
- if (es6DevMain && os.platform() !== "win32") {
158
- plugins.push(livereload({
159
- watch: [
160
- "dist/resources/bundle.esm.js",
161
- "dist/**/*.html",
162
- "dist/**/*.json",
163
- ],
164
- }));
165
- }
166
-
167
- if (process.env.DEV) {
168
- plugins.push(ui5DevReadyMessagePlugin());
169
- }
170
-
171
- return plugins;
172
- };
173
-
174
- const getES6Config = (input = "bundle.esm.js") => {
175
- return [{
176
- input,
177
- output: {
178
- dir: "dist/resources",
179
- format: "esm",
180
- sourcemap: true,
181
- },
182
- moduleContext: id => {
183
- if (typeof id === "string" && id.includes("url-search-params-polyfill")) {
184
- // suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
185
- return "window";
186
- }
187
- },
188
- watch: {
189
- clearScreen: false,
190
- },
191
- plugins: getPlugins({ transpile: false }),
192
- onwarn: onwarn,
193
- }];
194
- };
195
-
196
- const getES5Config = (input = "bundle.es5.js") => {
197
- return [{
198
- input,
199
- output: {
200
- dir: "dist/resources",
201
- format: "iife",
202
- inlineDynamicImports: true,
203
- name: "sap-ui-webcomponents-bundle",
204
- extend: "true", // Whether or not to extend the global variable defined by the name option in umd or iife formats.
205
- sourcemap: true,
206
- },
207
- moduleContext: id => {
208
- if (id.includes("url-search-params-polyfill")) {
209
- // suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
210
- return "window";
211
- }
212
- },
213
- watch: {
214
- clearScreen: false,
215
- },
216
- plugins: getPlugins({ transpile: true }),
217
- onwarn: onwarn,
218
- }];
219
- };
220
-
221
- let config = getES6Config();
222
-
223
- if (process.env.ES5_BUILD && fs.existsSync("bundle.es5.js")) {
224
- config = config.concat(getES5Config());
225
- }
226
-
227
- if (process.env.SCOPE) {
228
- if (fs.existsSync("bundle.scoped.esm.js")) {
229
- config = config.concat(getES6Config("bundle.scoped.esm.js"));
230
-
231
- if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
232
- config = config.concat(getES5Config("bundle.scoped.es5.js"));
233
- }
234
- }
235
- }
236
-
237
- module.exports = config;
@@ -1,165 +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
- const beautify = require("json-beautify");
14
-
15
-
16
- const apiJSONPath = path.normalize(process.argv[2]);
17
- const api = JSON.parse(fs.readFileSync(apiJSONPath));
18
-
19
- fs.writeFileSync(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
- mkdirp.sync(`dist/test-resources/api`);
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 = entry => {
120
- let content = "";
121
-
122
- try {
123
- content = fs.readFileSync(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
124
- } catch (err) { }
125
-
126
- if (content) {
127
- entry.slots.forEach(slotData => {
128
- if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
129
- slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
130
- }
131
- });
132
- const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
133
- const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
134
-
135
- content = content.replace('<!-- JSDoc marker -->', APIReference);
136
- content = content.replace(sinceMarker, EntitySince);
137
-
138
- content = content.replace(linkMatcher, match => {
139
- const component = linkMatcher.exec(match)[2];
140
-
141
- // reset the regex
142
- linkMatcher.lastIndex = 0;
143
-
144
- return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
145
- });
146
-
147
- fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
148
- // console.log(err);
149
- });
150
- }
151
- }
152
-
153
- const generateComponentAPI = entry => {
154
- // (1) calculate the API
155
- entry = calculateAPI(entry);
156
-
157
- // (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
158
- entry = appendAdditionalEntriesAPI(entry);
159
-
160
- // (3) generate sample page
161
- generateSamplePage(entry);
162
- }
163
-
164
- entries.forEach(generateComponentAPI);
165
- 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
- };