commit 219a53a3bce8a266167987355ad98c30449b137e Author: dm1sh Date: Tue Aug 31 16:12:37 2021 +0300 Initialized dev environment, readme and basic web component template diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dcb6ee4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +dist/ +pnpm-lock.yaml +package-lock.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..7bc89e7 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# My component + +`` is a web component + +## Example + +Installation: + +```bash +npm i my-component +``` + +Basic usage: + +### index.html + +```html + + +``` + +### main.js + +```javascript +import "my-component"; +``` diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..5c43361 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,13 @@ + + + + + + + Testing my-component + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..e2d8f2e --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/rollup.config.demo.js b/rollup.config.demo.js new file mode 100644 index 0000000..dad6b50 --- /dev/null +++ b/rollup.config.demo.js @@ -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; diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..5275604 --- /dev/null +++ b/rollup.config.js @@ -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; diff --git a/src/MyComponent.ts b/src/MyComponent.ts new file mode 100644 index 0000000..5da8551 --- /dev/null +++ b/src/MyComponent.ts @@ -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() {} +} diff --git a/src/html.d.ts b/src/html.d.ts new file mode 100644 index 0000000..3a031d8 --- /dev/null +++ b/src/html.d.ts @@ -0,0 +1,4 @@ +declare module "*.html" { + const content: string; + export default content; +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..687a2b1 --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export * from "./my-component"; diff --git a/src/my-component.ts b/src/my-component.ts new file mode 100644 index 0000000..21e50b5 --- /dev/null +++ b/src/my-component.ts @@ -0,0 +1,6 @@ +import { MyComponent, tagName } from "./MyComponent"; + +if (!window.customElements.get(tagName)) + window.customElements.define(tagName, MyComponent); + +export { MyComponent, tagName }; diff --git a/src/template.html b/src/template.html new file mode 100644 index 0000000..84e8320 --- /dev/null +++ b/src/template.html @@ -0,0 +1,11 @@ + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..06b7910 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "es2020", + "module": "es6", + "moduleResolution": "node", + "lib": ["dom"], + "declaration": true, + "declarationMap": true, + "experimentalDecorators": true + }, + "include": ["src/**/*.ts"] +}