@lukso/web-components 1.0.1
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/LICENSE +21 -0
- package/README.md +152 -0
- package/package.json +104 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Butopen
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# Tailwind web components starter kit
|
|
2
|
+
|
|
3
|
+
This is a starter kit to develop web components using Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
Tailwind and web components do not play well together.
|
|
6
|
+
|
|
7
|
+
We managed to find a way to make them work without hacks or weird tech: just common technologies combined in a elegant way.
|
|
8
|
+
|
|
9
|
+
No dependencies, based on [lit-element](https://lit.dev/docs/).
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Although the original form of the project suggests pnpm, storybook is not so happy
|
|
14
|
+
using linked npms.
|
|
15
|
+
|
|
16
|
+
Please run `yarn install`
|
|
17
|
+
And then use scripts as `yarn <SCRIPT>`
|
|
18
|
+
|
|
19
|
+
## Storybook
|
|
20
|
+
|
|
21
|
+
To use storybook do `yarn storybook` and `yarn build-storybook`.
|
|
22
|
+
There is a `yarn test-storybook` but that's still having problems.
|
|
23
|
+
|
|
24
|
+
## How will you create a tailwind component?
|
|
25
|
+
|
|
26
|
+
Here is a sample code:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { html } from 'lit'
|
|
30
|
+
import { customElement, property } from 'lit/decorators.js'
|
|
31
|
+
import { TailwindElement } from '../shared/tailwind.element'
|
|
32
|
+
|
|
33
|
+
import style from './test.component.scss?inline' // #1
|
|
34
|
+
|
|
35
|
+
@customElement('test-component')
|
|
36
|
+
export class TestComponent extends TailwindElement(style) {
|
|
37
|
+
// #2
|
|
38
|
+
|
|
39
|
+
@property()
|
|
40
|
+
name?: string = 'World'
|
|
41
|
+
|
|
42
|
+
render() {
|
|
43
|
+
return html`
|
|
44
|
+
<p>
|
|
45
|
+
Hello,
|
|
46
|
+
<b>${this.name}</b>
|
|
47
|
+
!
|
|
48
|
+
</p>
|
|
49
|
+
<button class="bg-blue-200 text-yellow-200 p-2 rounded-full text-2xl">
|
|
50
|
+
Hello world!
|
|
51
|
+
</button>
|
|
52
|
+
`
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
It is based on the [lit element](https://lit.dev/docs/) technology: if you wrote a lit component before, you'll find it familiar.
|
|
58
|
+
|
|
59
|
+
There are only two differences to a standard _LitElement_:
|
|
60
|
+
|
|
61
|
+
1. You must import your styles from a separate file. And this is good for two reasons:
|
|
62
|
+
- it separates the CSS from the logic
|
|
63
|
+
- you can decide to use CSS or SCSS
|
|
64
|
+
- note the `?inline` at the end of the file path: if you don't add it, then vite will add the style to the head of the html. If you add it, the style is scoped into the component only
|
|
65
|
+
2. the class extends a _TailwindElement_ rather than a LitElement
|
|
66
|
+
|
|
67
|
+
A _TailwindElement_ extends a _LitElmement_ (see below) and adds the logic to integrate tailwind and your styles.
|
|
68
|
+
|
|
69
|
+
## Get started
|
|
70
|
+
|
|
71
|
+
To run the project:
|
|
72
|
+
|
|
73
|
+
1. `yarn install` (only the first time)
|
|
74
|
+
2. `yarn start` to run the server
|
|
75
|
+
3. to develop the library, run `yarn build` and copy the static assets where you need them.
|
|
76
|
+
|
|
77
|
+
You may clone this repo and start developing your components by looking at the _test.component_ as reference.
|
|
78
|
+
|
|
79
|
+
As an alternative, and if you like to have control over every piece, do the following:
|
|
80
|
+
|
|
81
|
+
1. copy the files in the shared folder:
|
|
82
|
+
- _tailwind.element.ts_ extends LitElement by adding the tailwind support
|
|
83
|
+
- _tailwind.global.css_ includes tha Tailwind base classes into each component
|
|
84
|
+
- _globals.d.ts_ is used to avoid TypeScript errors whe nimporting CSS/Scss files in typescript files (thanks [@emaant96](https://github.com/emaant96))
|
|
85
|
+
2. copy the _package.json_ or the devDependencies inside into your own _package.json_ (**there are no dependencies**)
|
|
86
|
+
3. copy _postcss.config.js_, _tailwind.config.js_ and _tsconfig.js_
|
|
87
|
+
|
|
88
|
+
That's all.
|
|
89
|
+
|
|
90
|
+
## Folder structure
|
|
91
|
+
|
|
92
|
+
Each folder in the src folder will become a published component.
|
|
93
|
+
|
|
94
|
+
```text
|
|
95
|
+
src
|
|
96
|
+
component1
|
|
97
|
+
index.ts
|
|
98
|
+
componrnt2
|
|
99
|
+
index.ts
|
|
100
|
+
styles.scss
|
|
101
|
+
test.stories.ts
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
The vite build script will automatically update package.json and the vite config to publish each of the components.
|
|
105
|
+
|
|
106
|
+
## Show me the pieces
|
|
107
|
+
|
|
108
|
+
If you want to understand how it works, it's simple:
|
|
109
|
+
|
|
110
|
+
- the **package.json** integrates these technolgies:
|
|
111
|
+
|
|
112
|
+
```json
|
|
113
|
+
"autoprefixer": "^10.4.12",
|
|
114
|
+
"postcss": "^8.4.18",
|
|
115
|
+
"lit": "^2.4.0",
|
|
116
|
+
"tailwindcss": "^3.2.0",
|
|
117
|
+
"typescript": "^4.8.4",
|
|
118
|
+
"vite": "^3.1.8",
|
|
119
|
+
"sass": "^1.55.0"
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
- **vite** does almost all the work automatically
|
|
123
|
+
- to integrate tailwind, the most important file is in _src/shared/tailwind.element.ts_
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
import { LitElement, unsafeCSS } from 'lit'
|
|
127
|
+
|
|
128
|
+
import style from './tailwind.global.css'
|
|
129
|
+
|
|
130
|
+
const tailwindElement = unsafeCSS(style)
|
|
131
|
+
|
|
132
|
+
export const TailwindElement = style =>
|
|
133
|
+
class extends LitElement {
|
|
134
|
+
static styles = [tailwindElement, unsafeCSS(style)]
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
It extends a _LitElement_ class at runtime and adds the component tailwind classes.
|
|
139
|
+
|
|
140
|
+
The _style_ variable comes from your component, where it is imported from an external CSS (or SCSS) file.
|
|
141
|
+
|
|
142
|
+
Then it is combined with the default tailwind classes.
|
|
143
|
+
|
|
144
|
+
If you add more components, the common parts are reused.
|
|
145
|
+
|
|
146
|
+
## Who uses it?
|
|
147
|
+
|
|
148
|
+
We developed this starter kit to implement a web session player for our open source SaaS [browserbot](https://browserbot.io/).
|
|
149
|
+
|
|
150
|
+
If you want to contribute or share soem thoughts, just get in touch with us.
|
|
151
|
+
|
|
152
|
+
Enjoy.
|
package/package.json
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lukso/web-components",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"files": [
|
|
6
|
+
"dist"
|
|
7
|
+
],
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"require": "./dist/index.cjs",
|
|
14
|
+
"import": "./dist/index.js"
|
|
15
|
+
},
|
|
16
|
+
"./lukso-button": {
|
|
17
|
+
"require": "./dist/lukso-button.cjs",
|
|
18
|
+
"import": "./dist/lukso-button.js"
|
|
19
|
+
},
|
|
20
|
+
"./lukso-test": {
|
|
21
|
+
"require": "./dist/lukso-test.cjs",
|
|
22
|
+
"import": "./dist/lukso-test.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"start": "vite dev --host",
|
|
27
|
+
"dev": "vite dev --host",
|
|
28
|
+
"build": "yarn analyze && vite build",
|
|
29
|
+
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:{eslint,css,fmt}'",
|
|
30
|
+
"lint:eslint": "eslint src --fix",
|
|
31
|
+
"lint:fmt": "prettier --check --loglevel=warn .",
|
|
32
|
+
"lint:css": "stylelint \"**/*.{scss,css}\"",
|
|
33
|
+
"lint:fmt:fix": "prettier --write .",
|
|
34
|
+
"analyze": "cem analyze --litelement --globs 'src/**/index.ts' --exclude 'src/**/*.stories.ts'",
|
|
35
|
+
"analyze:watch": "cem analyze --litelement --globs 'src/**/index.ts' --exclude 'src/**/*.stories.ts' --watch",
|
|
36
|
+
"storybook": "concurrently 'yarn analyze:watch' 'storybook dev -p 6006'",
|
|
37
|
+
"build-storybook": "storybook build",
|
|
38
|
+
"test-storybook": "test-storybook",
|
|
39
|
+
"test": "yarn analyze && yarn build-storybook && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006' 'wait-on -v tcp:127.0.0.1:6006 && yarn test-storybook --url http://127.0.0.1:6006'",
|
|
40
|
+
"prepare": "husky install"
|
|
41
|
+
},
|
|
42
|
+
"lint-staged": {
|
|
43
|
+
"*.{ts,js,vue}": [
|
|
44
|
+
"prettier --list-different",
|
|
45
|
+
"eslint"
|
|
46
|
+
],
|
|
47
|
+
"*.json": "prettier --list-different",
|
|
48
|
+
"*.ya?ml": "prettier --list-different",
|
|
49
|
+
"*.{scss,css,vue}": [
|
|
50
|
+
"prettier --list-different",
|
|
51
|
+
"stylelint"
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@custom-elements-manifest/analyzer": "^0.6.7",
|
|
56
|
+
"@lit-labs/motion": "^1.0.3",
|
|
57
|
+
"@storybook/addon-controls": "^7.0.0-beta.21",
|
|
58
|
+
"@storybook/addon-essentials": "^7.0.0-beta.21",
|
|
59
|
+
"@storybook/addon-interactions": "^7.0.0-beta.21",
|
|
60
|
+
"@storybook/addon-links": "^7.0.0-beta.21",
|
|
61
|
+
"@storybook/blocks": "^7.0.0-beta.21",
|
|
62
|
+
"@storybook/builder-vite": "^7.0.0-beta.21",
|
|
63
|
+
"@storybook/client-api": "^6.5.15",
|
|
64
|
+
"@storybook/jest": "^0.0.10",
|
|
65
|
+
"@storybook/test-runner": "^0.9.2",
|
|
66
|
+
"@storybook/testing-library": "^0.0.13",
|
|
67
|
+
"@storybook/web-components-vite": "^7.0.0-beta.21",
|
|
68
|
+
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
69
|
+
"@typescript-eslint/parser": "^5.48.0",
|
|
70
|
+
"autoprefixer": "^10.4.13",
|
|
71
|
+
"concurrently": "^7.6.0",
|
|
72
|
+
"eslint": "^8.31.0",
|
|
73
|
+
"eslint-config-prettier": "^8.6.0",
|
|
74
|
+
"eslint-import-resolver-typescript": "^3.5.2",
|
|
75
|
+
"eslint-plugin-import": "^2.26.0",
|
|
76
|
+
"eslint-plugin-json": "^3.1.0",
|
|
77
|
+
"eslint-plugin-lit": "^1.7.2",
|
|
78
|
+
"espree": "^9.4.1",
|
|
79
|
+
"http-server": "^14.1.1",
|
|
80
|
+
"husky": "^8.0.3",
|
|
81
|
+
"lint-staged": "^13.1.0",
|
|
82
|
+
"lit": "^2.5.0",
|
|
83
|
+
"lit-analyzer": "^1.2.1",
|
|
84
|
+
"lit-html": "^2.5.0",
|
|
85
|
+
"npm-run-all": "^4.1.5",
|
|
86
|
+
"playwright": "^1.29.2",
|
|
87
|
+
"postcss": "^8.4.21",
|
|
88
|
+
"prettier": "^2.8.2",
|
|
89
|
+
"react": "^18.2.0",
|
|
90
|
+
"react-dom": "^18.2.0",
|
|
91
|
+
"sass": "^1.57.1",
|
|
92
|
+
"storybook": "^7.0.0-beta.21",
|
|
93
|
+
"stylelint": "^14.16.1",
|
|
94
|
+
"stylelint-config-prettier": "^9.0.4",
|
|
95
|
+
"stylelint-config-standard-scss": "^6.1.0",
|
|
96
|
+
"stylelint-prettier": "^2.0.0",
|
|
97
|
+
"tailwindcss": "^3.2.4",
|
|
98
|
+
"typescript": "^4.9.4",
|
|
99
|
+
"vite": "^4.0.4",
|
|
100
|
+
"wait-on": "^7.0.1"
|
|
101
|
+
},
|
|
102
|
+
"packageManager": "yarn@3.3.1",
|
|
103
|
+
"customElements": "custom-elements.json"
|
|
104
|
+
}
|