weg-shared-layout 0.0.2 → 0.0.3

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 (2) hide show
  1. package/package.json +7 -3
  2. package/readme.md +35 -141
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "weg-shared-layout",
3
- "version": "0.0.2",
4
- "description": "Stencil Component Starter",
3
+ "version": "0.0.3",
4
+ "description": "Shared layout Web Components built with Stencil",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
7
7
  "types": "dist/components/index.d.ts",
@@ -29,8 +29,12 @@
29
29
  },
30
30
  "repository": {
31
31
  "type": "git",
32
- "url": "https://github.com/stenciljs/component-starter.git"
32
+ "url": "git+https://github.com/jobsac/weg-shared-layout.git"
33
33
  },
34
+ "bugs": {
35
+ "url": "https://github.com/jobsac/weg-shared-layout/issues"
36
+ },
37
+ "homepage": "https://github.com/jobsac/weg-shared-layout#readme",
34
38
  "files": [
35
39
  "dist/",
36
40
  "loader/"
package/readme.md CHANGED
@@ -1,115 +1,61 @@
1
1
  [![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
2
2
 
3
- # Stencil Component Starter
3
+ # weg-shared-layout
4
4
 
5
- > This is a starter project for building a standalone Web Components using Stencil.
5
+ > Shared layout Web Components (Stencil).
6
6
 
7
- Stencil is a compiler for building fast web apps using Web Components.
8
-
9
- Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime 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 specification.
10
-
11
- Stencil components are just Web Components, so they work in any major framework or with no framework at all.
12
-
13
- ## Getting Started
14
-
15
- To start building a new web component using Stencil, clone this repo to a new directory:
16
-
17
- ```bash
18
- git clone https://github.com/stenciljs/component-starter.git my-component
19
- cd my-component
20
- git remote rm origin
21
- ```
22
-
23
- and run:
7
+ Install:
24
8
 
25
9
  ```bash
26
- npm install
27
- npm start
10
+ npm i weg-shared-layout
28
11
  ```
29
12
 
30
- To build the component for production, run:
13
+ ## Using in Angular
31
14
 
32
- ```bash
33
- npm run build
34
- ```
15
+ Register custom elements (recommended in `main.ts`):
35
16
 
36
- To run the unit tests for the components, run:
17
+ ```ts
18
+ import { defineCustomElements } from 'weg-shared-layout/loader';
37
19
 
38
- ```bash
39
- npm test
20
+ defineCustomElements();
40
21
  ```
41
22
 
42
- Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
43
-
44
- ## Naming Components
45
-
46
- When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
47
-
48
- Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
49
-
50
- ## Using this component
51
-
52
- There are two strategies we recommend for using web components built with Stencil.
53
-
54
- The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
55
-
56
- You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
57
-
58
- ### Lazy Loading
59
-
60
- If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
23
+ Allow custom elements in the module that uses them:
61
24
 
62
- For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
25
+ ```ts
26
+ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
63
27
 
64
- ```html
65
- <script type="module" src="https://unpkg.com/my-design-system"></script>
66
- <!--
67
- To avoid unpkg.com redirects to the actual file, you can also directly import:
68
- https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
69
- -->
70
- <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
28
+ @NgModule({
29
+ // ...
30
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
31
+ })
32
+ export class AppModule {}
71
33
  ```
72
34
 
73
- This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
74
-
75
- You can also import the script as part of your `node_modules` in your applications entry file:
35
+ Use in a template (standard):
76
36
 
77
- ```tsx
78
- import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
37
+ ```html
38
+ <weg-footer
39
+ variant="standard"
40
+ company-name="WEG"
41
+ company-number="12345678"
42
+ social-links-src="/assets/footer-social-links.json"
43
+ standard-links-src="/assets/footer-standard-links.json"
44
+ ></weg-footer>
79
45
  ```
80
46
 
81
- Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
82
-
83
- ### Standalone
84
-
85
- If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
86
-
87
- To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
88
-
89
- For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
90
-
91
- ```tsx
92
- import 'foobar-design-system/my-component';
93
-
94
- function App() {
95
- return (
96
- <>
97
- <div>
98
- <my-component
99
- first="Stencil"
100
- middle="'Don't call me a framework'"
101
- last="JS"
102
- ></my-component>
103
- </div>
104
- </>
105
- );
106
- }
47
+ Use in a template (additional):
107
48
 
108
- export default App;
49
+ ```html
50
+ <weg-footer
51
+ variant="additional"
52
+ company-name="WEG"
53
+ company-number="12345678"
54
+ social-links-src="/assets/footer-social-links.json"
55
+ additional-groups-src="/assets/footer-additional-groups.json"
56
+ ></weg-footer>
109
57
  ```
110
58
 
111
- Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).
112
-
113
59
  ## Using in React
114
60
 
115
61
  Install:
@@ -205,58 +151,6 @@ Stencil generates `components.d.ts` in this repo, but React does not automatical
205
151
 
206
152
  If your app still complains about JSX intrinsic elements, you can also augment `JSX.IntrinsicElements` in that same file (varies by React/TS setup).
207
153
 
208
- ## Using in Angular
209
-
210
- Install:
211
-
212
- ```bash
213
- npm i weg-shared-layout
214
- ```
215
-
216
- Register custom elements (recommended in `main.ts`):
217
-
218
- ```ts
219
- import { defineCustomElements } from 'weg-shared-layout/loader';
220
-
221
- defineCustomElements();
222
- ```
223
-
224
- Allow custom elements in the module that uses them:
225
-
226
- ```ts
227
- import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
228
-
229
- @NgModule({
230
- // ...
231
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
232
- })
233
- export class AppModule {}
234
- ```
235
-
236
- Use in a template (standard):
237
-
238
- ```html
239
- <weg-footer
240
- variant="standard"
241
- company-name="WEG"
242
- company-number="12345678"
243
- social-links-src="/assets/footer-social-links.json"
244
- standard-links-src="/assets/footer-standard-links.json"
245
- ></weg-footer>
246
- ```
247
-
248
- Use in a template (additional):
249
-
250
- ```html
251
- <weg-footer
252
- variant="additional"
253
- company-name="WEG"
254
- company-number="12345678"
255
- social-links-src="/assets/footer-social-links.json"
256
- additional-groups-src="/assets/footer-additional-groups.json"
257
- ></weg-footer>
258
- ```
259
-
260
154
  ### Note on `*-src` JSON URLs
261
155
 
262
156
  `social-links-src`, `standard-links-src`, and `additional-groups-src` are fetched by the component at runtime, so the JSON files must be **served by the host app** (e.g. Angular’s `src/assets/`), or be a full `https://...` URL.