Skip to content

Commit 380d0d3

Browse files
tlentztlentz
committed
dev-test example
1 parent ff187bc commit 380d0d3

16 files changed

+3938
-1
lines changed

Diff for: ‎.gitignore

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
dev-test.js
27+
dev-test.zip

Diff for: ‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

Diff for: ‎.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"singleQuote": true,
5+
"trailingComma": "all",
6+
"arrowParens": "always",
7+
"bracketSpacing": true,
8+
"useTabs": false,
9+
"endOfLine": "lf",
10+
"semi": true
11+
}

Diff for: ‎README.md

+130-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,131 @@
11
# template-remix-webcomp
2-
Template repository for building a web component for the Remix Labs platform
2+
Template repository for building a web component for the Remix Labs platform using Vite + Typescript + Lit
3+
4+
## Resources
5+
- [Lit](https://lit.dev/)
6+
- [Vite](https://vitejs.dev/)
7+
8+
# Development
9+
```bash
10+
npm install
11+
npm run dev
12+
```
13+
14+
This will start a development server at http://localhost:5173/ where you can test your web component. `index.html` is the test page.
15+
# Build & bundle
16+
```bash
17+
npm run build
18+
```
19+
Will create a `dist` folder the built web component `dev-test.js`
20+
21+
```bash
22+
npm run bundle
23+
```
24+
Will build and bundle the web component with its manifest.json into a zip file `dist/dev-test.zip`
25+
26+
# Manifest.json
27+
28+
Web Components are distributed as zip files of the Javascript and a `manifest.json`. You drop this into your app's `files` and you should be able to select it from a WebComponent node.
29+
30+
Zip your javascript together with a `manifest.json` along the following lines:
31+
32+
```
33+
{
34+
"mix_package_version": "1",
35+
"mix_package_type": "webcomponent",
36+
"file": "dev-test.js",
37+
"tag": "dev-test",
38+
"ins": [
39+
{
40+
"name": "count",
41+
"type": "number"
42+
},
43+
{
44+
"name": "reset",
45+
"type": "event"
46+
}
47+
],
48+
"events": [
49+
{
50+
"name": "current-count",
51+
"payload": "number"
52+
}
53+
54+
],
55+
"slots": {
56+
"type": "NoSlots"
57+
}
58+
}
59+
```
60+
61+
## Structure
62+
63+
Each manifest has the following fields:
64+
* **mix_package_version** *(string, required)*: always use `"1"` at present
65+
* **mix_package_type**: set to `"webcomponent"`
66+
* **tag** *(string, required)*: the html tag used by the web component (e.g. good-map, etc...)
67+
* **file** *(string, required)*: the file name
68+
* **ins** *(array, optional)*: the set of input params to customise the web component (see section `ins` below)
69+
* **events** *(array, optional)*: the set of events fired by the web component (see section `events` below)
70+
71+
## Field: Ins
72+
73+
An array of input params (each will be translated into an in bndings).
74+
Each input param has the following fields:
75+
* name (string, required): the name of the field (needs to match a valid field of the web component)
76+
* type (string, required): the type of the field. See `Field Type` section below for valid field types
77+
78+
ex:
79+
```
80+
[
81+
{"name": "api-key", "type": "string"},
82+
{"name": "latitude", "type": "number"},
83+
{"name": "longitude", "type": "number", "defaultValue": 0},
84+
{"name": "trigger", "type": "event"},
85+
{"name": "style", "type": {}}
86+
]
87+
```
88+
89+
Note here that `trigger` needs to be public method in your WC.
90+
91+
## Field: Events
92+
93+
An array of events (each will be translated into a trigger out binding, and, if needed, an out binding for the payload of that event)
94+
Each event has the following fields:
95+
* name (string, required): the name of the event (needs to match a valid event name of the web component)
96+
* payload (string, optional): the type of the event payload (if any). See `Field Type` section below for valid field types
97+
98+
99+
### ex
100+
```
101+
[
102+
{"name": "zoom-changed", "payload": "number" },
103+
{"name": "center-changed", "payload": {}},
104+
{"name": "click"}
105+
]
106+
```
107+
This will create 5 out bindings:
108+
* `zoom-changed`: a trigger
109+
* `zoom-changed - payload`: a number
110+
* `center-changed`: a trigger
111+
* `center-changed - payload`: an object
112+
* `click`: a trigger
113+
114+
## Field Type
115+
- `"string"`
116+
- `"number"`
117+
- `"bool"`
118+
- `"date"`
119+
- `"color"`
120+
- `"url"`
121+
- `"image"`
122+
- `"icon"`
123+
- `"ref"`
124+
- `"email"`
125+
- `"card"`
126+
- `"event"`
127+
- `"location"`
128+
- `"data"`
129+
- `"entity"`
130+
- `{}`: an object
131+
- `["string"`], `["number"]`, `[{}]`, etc: an array (of strings, of numbers, of objects...)

Diff for: ‎bundle.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// bundles output with manifest to create distributable zip
2+
3+
import fs from "fs";
4+
import JSZip from "jszip";
5+
6+
const zip = new JSZip();
7+
const tag = "dev-test";
8+
9+
zip.file(`${tag}.js`, fs.readFileSync(`./dist/${tag}.js`), { binary: true });
10+
zip.file("manifest.json", fs.readFileSync("manifest.json", "utf-8"));
11+
12+
zip.generateAsync({ type: "uint8array" }).then((content) => {
13+
fs.writeFileSync(`dist/${tag}.zip`, content);
14+
});

Diff for: ‎index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Lit + TS</title>
8+
<link rel="stylesheet" href="/harness.css" />
9+
<script type="module" src="/src/dev-test.ts"></script>
10+
</head>
11+
<body>
12+
<dev-test title="test title">
13+
<h2>This is the Slot element</h2>
14+
</dev-test>
15+
16+
<div class="controls">
17+
<button id="reset">Reset</button>
18+
<div id="count"></div>
19+
</div>
20+
</body>
21+
22+
<script>
23+
const wc = document.querySelector("dev-test");
24+
const resetBtn = document.querySelector("#reset");
25+
const countDiv = document.querySelector("#count");
26+
wc.addEventListener(
27+
"current-count",
28+
(evt) => (countDiv.innerHTML = evt.detail)
29+
);
30+
wc.addEventListener("just-trigger", (evt) =>
31+
console.log("'just-trigger' fired")
32+
);
33+
resetBtn.addEventListener("click", () => wc.reset());
34+
</script>
35+
</html>

Diff for: ‎manifest.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"mix_package_version": "1",
3+
"mix_package_type": "webcomponent",
4+
"file": "dev-test.js",
5+
"tag": "dev-test",
6+
"version": "1.0.0",
7+
"icon": "test-tube",
8+
"description": "Tests all webcomp functionality",
9+
"module": true,
10+
"ins": [
11+
{
12+
"name": "title",
13+
"type": "string"
14+
},
15+
{
16+
"name": "count",
17+
"type": "number"
18+
},
19+
{
20+
"name": "reset",
21+
"type": "event"
22+
}
23+
],
24+
"events": [
25+
{
26+
"name": "current-count",
27+
"payload": "number"
28+
},
29+
{
30+
"name": "just-trigger"
31+
}
32+
],
33+
"slots": {
34+
"type": "SingleSlot",
35+
"param": false
36+
}
37+
}

0 commit comments

Comments
 (0)