@six-group/ui-library 4.0.0-beta.3 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/cjs/index-900437fc.js +210 -1
- package/dist/cjs/index-900437fc.js.map +1 -1
- package/dist/cjs/ui-library.cjs.js +1 -1
- package/dist/cjs/ui-library.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/components.json +2 -2
- package/dist/esm/index-8a74f992.js +210 -1
- package/dist/esm/index-8a74f992.js.map +1 -1
- package/dist/esm/ui-library.js +1 -1
- package/dist/esm/ui-library.js.map +1 -1
- package/dist/ui-library/p-6153045b.js.map +1 -1
- package/dist/ui-library/ui-library.esm.js.map +1 -1
- package/package.json +2 -2
- package/readme.md +0 -156
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.0.
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.0.5 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAyBjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,EC/B/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,q9TAAuCH"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@six-group/ui-library",
|
|
3
|
-
"version": "4.0.0
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
|
+
"description": "Web components in alignment with the SIX corporate styleguide",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "./dist/index.js",
|
package/readme.md
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Six UI Components
|
|
4
|
-
|
|
5
|
-
This is the actual UI components library.
|
|
6
|
-
|
|
7
|
-
The Webcomponents in this library are built with Stencil.
|
|
8
|
-
|
|
9
|
-
## Stencil
|
|
10
|
-
|
|
11
|
-
Stencil is a compiler for building fast web apps using Web Components.
|
|
12
|
-
|
|
13
|
-
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
|
|
14
|
-
|
|
15
|
-
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
|
|
16
|
-
|
|
17
|
-
## Getting Started
|
|
18
|
-
|
|
19
|
-
To start building a new webcomponent using Stencil:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm run generate six-name-of-new-component
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
This will create a new folder containing everything necessary for you to develop a new component
|
|
26
|
-
|
|
27
|
-
To run the unit tests for the components, run:
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npm test
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
|
|
34
|
-
|
|
35
|
-
## Testing
|
|
36
|
-
|
|
37
|
-
To run all unit and e2e tests simply execute
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm run teste2e
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
If you want to run a specific file, simply add the filename ad the end to the command above:
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
npm run test:2e components/six-button/test/six-button.e2e.ts
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
For debugging stencil provides the `--devtools` flag. This will slow down chrome and open the devtools automatically.
|
|
50
|
-
|
|
51
|
-
Simply add a `debugger;` statement in the code where you want the test to stop and run:
|
|
52
|
-
|
|
53
|
-
```bash
|
|
54
|
-
npm run test:debug components/six-button/test/six-button.e2e.ts
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
If you need evaluation at a certain breakpoint the easiest is to open the `ui-library` folder in vscode. The provided
|
|
58
|
-
`launch.json` automatically adds the correct runconfigurations to debug tests in vscode
|
|
59
|
-
|
|
60
|
-
If you want to do some more advanced debugging you can also use `page.evaluate`. Add the following in your code:
|
|
61
|
-
|
|
62
|
-
```javascript
|
|
63
|
-
await page.evaluate(() => {
|
|
64
|
-
console.log('this is some evaluation');
|
|
65
|
-
debugger;
|
|
66
|
-
});
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
and run the same command as above:
|
|
70
|
-
|
|
71
|
-
```bash
|
|
72
|
-
npm run test:debug components/six-button/test/six-button.e2e.ts
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
FYI: There seems to be some weird bug when using `page.evaluate` where the browser first stops in a ghost breakpoint and
|
|
76
|
-
you have to reload the browser (Ctrl + R) to get to your evaluation endpoint.
|
|
77
|
-
|
|
78
|
-
### Visual Diff Testing
|
|
79
|
-
|
|
80
|
-
The flag `--screenshot` allows to run visual diff e2e tests. When we run these tests we will make a screenshot of the
|
|
81
|
-
component and compare it with previous screenshots. You can find the screenshots in [this image folder](./screenshot/images).
|
|
82
|
-
|
|
83
|
-
When a screenshot test fails you can open the [compare.html](./screenshot/compare.html) which will present you what changed.
|
|
84
|
-
|
|
85
|
-
When you actually redesigned the component and expect the changes simply delete the old images.
|
|
86
|
-
|
|
87
|
-
The screenshot tests are not run in the build because the tests seem to always fail in the build and it's very hard to
|
|
88
|
-
figure out what exactly differs there. So if you want to validate the components are still working properly run it locally:
|
|
89
|
-
|
|
90
|
-
`npm run test:inclScrnsht`
|
|
91
|
-
|
|
92
|
-
## Adding documentation
|
|
93
|
-
|
|
94
|
-
To see the documentation for your component you need to do the following:
|
|
95
|
-
|
|
96
|
-
- add an `index.html` to your component folder
|
|
97
|
-
- the `index.html` should have the following structure, where a div with the `container` class surrounds all your examples.
|
|
98
|
-
And the code examples are wrapped in `<div class="container"></div>`:
|
|
99
|
-
`html
|
|
100
|
-
<!DOCTYPE html>
|
|
101
|
-
<html dir="ltr" lang="en">
|
|
102
|
-
<head>
|
|
103
|
-
<meta charset="utf-8"/>
|
|
104
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>
|
|
105
|
-
<script type="module" src="/build/ui-library.esm.js"></script>
|
|
106
|
-
<script nomodule src="/build/ui-library.js"></script>
|
|
107
|
-
<link rel="stylesheet" href="/build/ui-library.css">
|
|
108
|
-
<title>MyComponent</title>
|
|
109
|
-
</head>
|
|
110
|
-
<body>
|
|
111
|
-
<div class="container">
|
|
112
|
-
<h1>MyComponent</h1>
|
|
113
|
-
<p>MyComponent is used for blablabla</p>
|
|
114
|
-
<section class="demo">
|
|
115
|
-
<my-component></my-component>
|
|
116
|
-
</section>
|
|
117
|
-
</div>
|
|
118
|
-
</body>
|
|
119
|
-
</html>
|
|
120
|
-
`
|
|
121
|
-
- additionally you need to have an `EXAMPLES` comment in your readme.md:
|
|
122
|
-
|
|
123
|
-
```
|
|
124
|
-
<!-- EXAMPLES -->
|
|
125
|
-
|
|
126
|
-
<!-- Auto Generated Below -->
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Prepare
|
|
130
|
-
|
|
131
|
-
Before creating a new version make sure that:
|
|
132
|
-
|
|
133
|
-
- you built the projects to be publish (dist folder should be updated)
|
|
134
|
-
- you updated [CHANGELOG.md](CHANGELOG.md)
|
|
135
|
-
- you know which version to update to
|
|
136
|
-
- our library follows [Semantic Versioning](https://semver.org/) so follow this guide to decide what kind of version update you will bring:
|
|
137
|
-
- <b>MAJOR</b> version when you make incompatible API changes
|
|
138
|
-
- <b>=></b> Users of the SIX Web Components Library must adapt their code to use the new version.
|
|
139
|
-
- <b>MINOR</b> version when you add functionality in a backwards compatible manner, and
|
|
140
|
-
- <b>=></b> Users of the SIX Web Component Library can use new features but must not adapt their existing code.
|
|
141
|
-
- <b>PATCH</b> version when you make backwards compatible bug fixes.
|
|
142
|
-
- <b>=></b> Users of the SIX Web Component Library get a bug fixed but must not adapt their existing code.
|
|
143
|
-
|
|
144
|
-
There are different ways how to create a new version:
|
|
145
|
-
|
|
146
|
-
- manually increase the version in the `package.json` and `package-lock.json`
|
|
147
|
-
- use `npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]`
|
|
148
|
-
- [see here for more details](https://docs.npmjs.com/updating-your-published-package-version-number)
|
|
149
|
-
- [use lerna publish](https://lerna.js.org/)
|
|
150
|
-
|
|
151
|
-
No matter what kind of method you use to bump the version make sure that the different packages are in sync - always publish these together:
|
|
152
|
-
|
|
153
|
-
- ui-library
|
|
154
|
-
|
|
155
|
-
* ui-library-react
|
|
156
|
-
* ui-library-vue
|