dm1sh/web-component-template
Template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initialized dev environment, readme and basic web component template

Browse Source
This commit is contained in:
Dmitriy Shishkov 2021-08-31 16:12:37 +03:00
commit 219a53a3bc
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060
12 changed files with 165 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
node_modules/
dist/
pnpm-lock.yaml
package-lock.json

26
README.md Normal file
View File

@ -0,0 +1,26 @@
# My component
`<my-component>` is a web component
## Example
Installation:
```bash
npm i my-component
```
Basic usage:
### index.html
```html
<my-component></my-component>
<script type="module" src="main.js"></script>
```
### main.js
```javascript
import "my-component";
```

13
demo/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing my-component</title>
</head>
<body>
<my-component></my-component>
<script src="../src/my-component.ts" type="module"></script>
</body>
</html>

20
package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "my-component",
"version": "0.0.1",
"main": "dist/bundle.cjs.js",
"module": "dist/bundle.esm.js",
"scripts": {
"start": "rollup --config rollup.config.demo.js --watch",
"build": "rollup --config rollup.config.js"
},
"devDependencies": {
"@open-wc/rollup-plugin-html": "^1.2.5",
"@rollup/plugin-node-resolve": "^13.0.4",
"esbuild": "^0.12.24",
"rollup": "^2.56.3",
"rollup-plugin-esbuild": "^4.5.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-string": "^3.0.0",
"typescript": "^4.4.2"
}
}

24
rollup.config.demo.js Normal file
View File

@ -0,0 +1,24 @@
import html from "@open-wc/rollup-plugin-html";
import { string } from "rollup-plugin-string";
import resolve from "@rollup/plugin-node-resolve";
import serve from "rollup-plugin-serve";
import esbuild from "rollup-plugin-esbuild";
/**
* @type {import('rollup').RollupOptions}
*/
const config = {
input: "./demo/index.html",
output: { dir: "./dist" },
plugins: [
resolve(),
string({
include: "src/**/*.html",
}),
esbuild(),
html(),
serve("dist"),
],
};
export default config;

27
rollup.config.js Normal file
View File

@ -0,0 +1,27 @@
import esbuild from "rollup-plugin-esbuild";
import { string } from "rollup-plugin-string";
/**
* @type {import('rollup').RollupOptions}
*/
const config = {
input: "src/index.ts",
output: [
{
file: "dist/bundle.cjs.js",
format: "cjs",
},
{
file: "dist/bundle.esm.js",
format: "esm",
},
],
plugins: [
string({
include: "src/**/*.html",
}),
esbuild(),
],
};
export default config;

17
src/MyComponent.ts Normal file
View File

@ -0,0 +1,17 @@
import htmlTemplate from "./template.html";
export const tagName = "my-component";
export class MyComponent extends HTMLElement {
#shadow: ShadowRoot;
constructor() {
super();
this.#shadow = this.attachShadow({ mode: "open" });
this.#shadow.innerHTML = htmlTemplate;
}
connectedCallback() {}
disconnectedCallback() {}
}

4
src/html.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.html" {
const content: string;
export default content;
}

1
src/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./my-component";

6
src/my-component.ts Normal file
View File

@ -0,0 +1,6 @@
import { MyComponent, tagName } from "./MyComponent";
if (!window.customElements.get(tagName))
window.customElements.define(tagName, MyComponent);
export { MyComponent, tagName };

11
src/template.html Normal file
View File

@ -0,0 +1,11 @@
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:host {
display: block;
}
</style>

12
tsconfig.json Normal file
View File

@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "es2020",
"module": "es6",
"moduleResolution": "node",
"lib": ["dom"],
"declaration": true,
"declarationMap": true,
"experimentalDecorators": true
},
"include": ["src/**/*.ts"]
}