@ui5/webcomponents-tools 0.0.0-ef27ca1aa → 0.0.0-f24ff9019

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 (92) hide show
  1. package/CHANGELOG.md +752 -0
  2. package/README.md +6 -6
  3. package/assets-meta.js +23 -3
  4. package/bin/dev.js +12 -1
  5. package/components-package/eslint.js +34 -0
  6. package/components-package/nps.js +112 -44
  7. package/components-package/postcss.components.js +18 -15
  8. package/components-package/postcss.themes.js +23 -16
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +405 -297
  11. package/components-package/wdio.sync.js +368 -0
  12. package/icons-collection/nps.js +52 -11
  13. package/lib/copy-and-watch/index.js +145 -0
  14. package/lib/copy-list/index.js +28 -0
  15. package/lib/create-icons/index.js +124 -54
  16. package/lib/create-illustrations/index.js +175 -0
  17. package/lib/create-new-component/index.js +72 -93
  18. package/lib/create-new-component/jsFileContentTemplate.js +73 -0
  19. package/lib/create-new-component/tsFileContentTemplate.js +80 -0
  20. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  21. package/lib/dev-server/dev-server.js +66 -0
  22. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  23. package/lib/esm-abs-to-rel/index.js +58 -0
  24. package/lib/generate-custom-elements-manifest/index.js +327 -0
  25. package/lib/generate-js-imports/illustrations.js +83 -0
  26. package/lib/generate-json-imports/i18n.js +98 -47
  27. package/lib/generate-json-imports/themes.js +67 -17
  28. package/lib/hbs2lit/index.js +2 -4
  29. package/lib/hbs2lit/src/compiler.js +30 -9
  30. package/lib/hbs2lit/src/includesReplacer.js +23 -17
  31. package/lib/hbs2lit/src/litVisitor2.js +125 -26
  32. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  33. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +35 -7
  34. package/lib/hbs2ui5/index.js +69 -30
  35. package/lib/i18n/defaults.js +66 -54
  36. package/lib/i18n/toJSON.js +13 -10
  37. package/lib/jsdoc/config.json +1 -1
  38. package/lib/jsdoc/configTypescript.json +29 -0
  39. package/lib/jsdoc/plugin.js +65 -4
  40. package/lib/jsdoc/preprocess.js +146 -0
  41. package/lib/jsdoc/template/publish.js +32 -4
  42. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  43. package/lib/postcss-css-to-esm/index.js +64 -16
  44. package/lib/postcss-css-to-json/index.js +31 -11
  45. package/lib/postcss-new-files/index.js +36 -0
  46. package/lib/postcss-p/postcss-p.mjs +14 -0
  47. package/lib/postcss-scope-vars/index.js +24 -0
  48. package/lib/replace-global-core/index.js +25 -0
  49. package/lib/scoping/get-all-tags.js +37 -0
  50. package/lib/scoping/lint-src.js +31 -0
  51. package/lib/scoping/missing-dependencies.js +65 -0
  52. package/lib/scoping/report-tags-usage.js +28 -0
  53. package/lib/scoping/scope-test-pages.js +40 -0
  54. package/lib/test-runner/test-runner.js +71 -0
  55. package/package.json +54 -54
  56. package/bin/init-ui5-package.js +0 -3
  57. package/components-package/rollup.js +0 -134
  58. package/components-package/serve.json +0 -3
  59. package/lib/documentation/index.js +0 -143
  60. package/lib/documentation/templates/api-component-since.js +0 -3
  61. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  62. package/lib/documentation/templates/api-events-section.js +0 -35
  63. package/lib/documentation/templates/api-methods-section.js +0 -26
  64. package/lib/documentation/templates/api-properties-section.js +0 -40
  65. package/lib/documentation/templates/api-slots-section.js +0 -28
  66. package/lib/documentation/templates/template.js +0 -38
  67. package/lib/init-package/index.js +0 -119
  68. package/lib/init-package/resources/.eslintignore +0 -3
  69. package/lib/init-package/resources/bundle.es5.js +0 -25
  70. package/lib/init-package/resources/bundle.esm.js +0 -34
  71. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  72. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  73. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  74. package/lib/init-package/resources/config/rollup.config.js +0 -1
  75. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  76. package/lib/init-package/resources/package-scripts.js +0 -11
  77. package/lib/init-package/resources/src/Assets.js +0 -5
  78. package/lib/init-package/resources/src/Demo.hbs +0 -1
  79. package/lib/init-package/resources/src/Demo.js +0 -56
  80. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  81. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  82. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  83. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  84. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  85. package/lib/init-package/resources/src/themes/Demo.css +0 -11
  86. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  87. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  88. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  89. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  90. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  91. package/lib/init-package/resources/test/pages/index.html +0 -51
  92. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
@@ -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,38 +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
- {{> cssVariables this}}
27
- </section>
28
- </section>
29
- </div>
30
- {{/each}}
31
- <footer class="footer-wrapper">
32
- <div class="footer-links">
33
- <a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
34
- <a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
35
- </div>
36
- <img src="../../../../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
37
- </footer>`
38
- };
@@ -1,119 +0,0 @@
1
- const fs = require("fs");
2
- const path = require("path");
3
- const mkdirp = require("mkdirp");
4
- const commandLineArgs = require('command-line-args');
5
- const beautify = require("json-beautify");
6
-
7
- // String utils
8
- const kebabToCamelCase = string => toCamelCase(string.split("-"));
9
- const toCamelCase = parts => {
10
- return parts.map((string, index) => {
11
- return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
12
- }).join("");
13
- };
14
- const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
15
-
16
- // content of package.json
17
- let packageContent;
18
-
19
- const DEFAULT_PORT = 8080;
20
- const DEFAULT_TAG = 'ui5-demo';
21
- const BETA_VER = "0.19.0";
22
- const RC_VER = "1.0.0-rc.6";
23
-
24
- // from where all the files will be copied
25
- const RESOURCES_DIR = path.join(`${__dirname}`, `resources/`);
26
-
27
- // Command line options
28
- const options = commandLineArgs([
29
- {name: 'port', alias: 'p', type: Number},
30
- {name: 'tag', type: String},
31
- ]);
32
-
33
- // Ensure there is package.json
34
- try {
35
- packageContent = JSON.parse(fs.readFileSync("package.json"));
36
- } catch (err) {
37
- console.log("No package.json found, please run: 'npm init' first");
38
- process.exit(1);
39
- }
40
-
41
- // Ensure correct tag
42
- const tag = options.tag || DEFAULT_TAG;
43
- if (!tag.match(/^ui5-/)) {
44
- console.log("tag name should start with ui5-");
45
- process.exit(1);
46
- }
47
- const className = capitalizeFirst(kebabToCamelCase(tag.substr(4)));
48
-
49
- // All variables that will be replaced in the content of the resources/
50
- const vars = {
51
- INIT_PACKAGE_VAR_NAME: packageContent.name,
52
- INIT_PACKAGE_VAR_PORT: options.port || DEFAULT_PORT,
53
- INIT_PACKAGE_VAR_TAG: tag,
54
- INIT_PACKAGE_VAR_CLASS_NAME: className,
55
- };
56
- console.log(vars);
57
-
58
- const replaceVarsInFileContent = content => {
59
- for (let key in vars) {
60
- const re = new RegExp(key, "g");
61
- content = content.replace(re, vars[key]);
62
- }
63
- return content;
64
- };
65
-
66
- const replaceVarsInFileName = fileName => {
67
- return fileName.replace(/Demo/, vars.INIT_PACKAGE_VAR_CLASS_NAME) ;
68
- };
69
-
70
- const copyFile = (sourcePath, destPath) => {
71
- let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
72
- content = replaceVarsInFileContent(content);
73
- destPath = replaceVarsInFileName(destPath);
74
- fs.writeFileSync(destPath, content);
75
- console.log(destPath);
76
- };
77
-
78
- const copyResources = sourcePath => {
79
- const destPath = sourcePath.substr(RESOURCES_DIR.length);
80
- const isDir = fs.lstatSync(sourcePath).isDirectory();
81
- if (isDir) {
82
- if (destPath) {
83
- mkdirp.sync(destPath);
84
- console.log(destPath);
85
- }
86
- fs.readdirSync(sourcePath).forEach(file => {
87
- copyResources(path.join(sourcePath, file));
88
- });
89
- } else {
90
- copyFile(sourcePath, destPath);
91
- }
92
- };
93
-
94
- const updatePackageFile = () => {
95
- packageContent.scripts = {
96
- "clean": "wc-dev clean",
97
- "lint": "wc-dev lint",
98
- "start": "wc-dev start",
99
- "build": "wc-dev build",
100
- "test": "wc-dev test",
101
- "create-ui5-element": "wc-create-ui5-element",
102
- "prepublishOnly": "npm run build"
103
- };
104
-
105
- packageContent.dependencies = packageContent.dependencies || {};
106
- packageContent.dependencies["@ui5/webcomponents-base"] = BETA_VER;
107
- packageContent.dependencies["@ui5/webcomponents-theme-base"] = RC_VER;
108
- packageContent.dependencies["@ui5/webcomponents-tools"] = RC_VER;
109
-
110
- fs.writeFileSync("package.json", beautify(packageContent, null, 2, 100));
111
- };
112
-
113
- // Copy files
114
- copyResources(RESOURCES_DIR);
115
-
116
- // Update package.json
117
- updatePackageFile();
118
-
119
- console.log("Package successfully initialized.");
@@ -1,3 +0,0 @@
1
- # Note: Changes to this file also must be applied to the top level .eslintignore file.
2
- dist
3
- test
@@ -1,25 +0,0 @@
1
- // ES5 bundle targets IE11 only
2
- import "@ui5/webcomponents-base/dist/features/browsersupport/IE11.js";
3
-
4
- import "./bundle.esm.js";
5
-
6
- import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
7
- import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
8
- import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
9
- import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
10
- import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
11
- import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
12
- import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
13
-
14
- const configuration = {
15
- getAnimationMode,
16
- getLanguage,
17
- getTheme,
18
- setTheme,
19
- getNoConflict,
20
- setNoConflict,
21
- getCalendarType,
22
- getRTL,
23
- getFirstDayOfWeek,
24
- };
25
- export default configuration;
@@ -1,34 +0,0 @@
1
- // ESM bundle targets Edge + browsers with native support
2
- import "@ui5/webcomponents-base/dist/features/browsersupport/Edge.js";
3
-
4
- // used in test pages
5
- import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
6
-
7
- import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
8
- import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
9
- import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
10
- import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
11
- import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
12
- import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
13
- import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
14
-
15
- // Enable additional themes and i18n texts
16
- import "./dist/Assets.js";
17
-
18
- // Import your web components here from the dist/ directory
19
- import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
20
-
21
- window.RenderScheduler = RenderScheduler;
22
- window["sap-ui-webcomponents-bundle"] = {
23
- configuration: {
24
- getAnimationMode,
25
- getLanguage,
26
- getTheme,
27
- setTheme,
28
- getNoConflict,
29
- setNoConflict,
30
- getCalendarType,
31
- getRTL,
32
- getFirstDayOfWeek,
33
- },
34
- };
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/eslint.js");
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js");
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js");
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js");
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js");
@@ -1,11 +0,0 @@
1
- const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
2
-
3
- const options = {
4
- port: INIT_PACKAGE_VAR_PORT,
5
- };
6
-
7
- const scripts = getScripts(options);
8
-
9
- module.exports = {
10
- scripts,
11
- };
@@ -1,5 +0,0 @@
1
- import "@ui5/webcomponents-theme-base/dist/Assets.js"; // Theming
2
-
3
- // own INIT_PACKAGE_VAR_NAME package assets
4
- import "./generated/json-imports/Themes.js";
5
- import "./generated/json-imports/i18n.js";
@@ -1 +0,0 @@
1
- <div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
@@ -1,56 +0,0 @@
1
- import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
- import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3
- import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4
-
5
- // Template
6
- import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
7
-
8
- // Styles
9
- import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
10
-
11
- import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
12
-
13
- const metadata = {
14
- tag: "INIT_PACKAGE_VAR_TAG",
15
- properties: {
16
- },
17
- slots: {
18
- },
19
- events: {
20
- },
21
- };
22
-
23
- class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
24
- constructor() {
25
- super();
26
- this.i18nBundle = getI18nBundle("INIT_PACKAGE_VAR_NAME");
27
- }
28
-
29
- get pleaseWaitText() {
30
- return this.i18nBundle.getText(PLEASE_WAIT);
31
- }
32
-
33
- static get metadata() {
34
- return metadata;
35
- }
36
-
37
- static get render() {
38
- return litRender;
39
- }
40
-
41
- static get template() {
42
- return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
43
- }
44
-
45
- static get styles() {
46
- return INIT_PACKAGE_VAR_CLASS_NAMECss;
47
- }
48
-
49
- static async onDefine() {
50
- await fetchI18nBundle("INIT_PACKAGE_VAR_NAME");
51
- }
52
- }
53
-
54
- INIT_PACKAGE_VAR_CLASS_NAME.define();
55
-
56
- export default INIT_PACKAGE_VAR_CLASS_NAME;
@@ -1,2 +0,0 @@
1
- #please wait text for the demo component
2
- PLEASE_WAIT=wait
@@ -1 +0,0 @@
1
- PLEASE_WAIT=Bitte warten
@@ -1 +0,0 @@
1
- PLEASE_WAIT=Please wait
@@ -1 +0,0 @@
1
- PLEASE_WAIT=Espere
@@ -1 +0,0 @@
1
- PLEASE_WAIT=Patientez.
@@ -1,11 +0,0 @@
1
- :host {
2
- border: 2px solid var(--ui5-demo-border-color);
3
- background-color: var(--sapBackgroundColor);
4
- color: var(--sapTextColor);
5
- display: block;
6
- width: 16rem;
7
- height: 3rem;
8
- text-align: center;
9
- vertical-align: middle;
10
- line-height: 3rem;
11
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --ui5-demo-border-color: lightblue;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --ui5-demo-border-color: black;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --ui5-demo-border-color: black;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --ui5-demo-border-color: green;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --ui5-demo-border-color: blue;
3
- }
@@ -1,51 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta charset="utf-8">
7
-
8
- <title>INIT_PACKAGE_VAR_TAG</title>
9
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
11
- <meta charset="utf-8">
12
-
13
- <script data-ui5-config type="application/json">
14
- {
15
- "language": "EN"
16
- }
17
- </script>
18
-
19
- <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
20
- <script src="../../resources/bundle.esm.js" type="module"></script>
21
- <script nomodule src="../../resources/bundle.es5.js"></script>
22
-
23
- <style>
24
- code { color: blue; font-size: small; }
25
- </style>
26
-
27
- </head>
28
-
29
- <body>
30
- <a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a> |
31
- <a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a> |
32
- <a href="?sap-ui-theme=sap_belize">Belize</a> |
33
- <a href="?sap-ui-theme=sap_belize_hcb">Belize High Contrast Black</a>
34
- <br>
35
- <span>or in the browser console, for example:</span>
36
- <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_belize_hcb")</code>
37
-
38
- <br><br>
39
-
40
- <a href="?sap-ui-language=en">English</a> |
41
- <a href="?sap-ui-language=de">German</a> |
42
- <a href="?sap-ui-language=es">Spanish</a> |
43
- <a href="?sap-ui-language=fr">French</a>
44
-
45
- <br><br>
46
-
47
- <h1>Test your web components here</h1>
48
- <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
49
- </body>
50
-
51
- </html>
@@ -1,12 +0,0 @@
1
- const assert = require("assert");
2
-
3
- describe("INIT_PACKAGE_VAR_TAG rendering", () => {
4
- browser.url("http://localhost:INIT_PACKAGE_VAR_PORT/test-resources/pages/index.html");
5
-
6
- it("tests if web component is correctly rendered", () => {
7
-
8
- const innerContent = browser.$("#myFirstComponent").shadow$("div");
9
-
10
- assert.ok(innerContent, "content rendered");
11
- });
12
- });