├── .gitignore ├── .husky └── pre-commit ├── .npmignore ├── .prettierignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── assets ├── IMG_0682.png ├── IMG_0683.png ├── IMG_0684.png ├── styling.png ├── todo-app.gif ├── wc-base-demo.gif └── wc-feeling.gif ├── docs ├── .gitignore ├── .vscode │ ├── extensions.json │ └── launch.json ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public │ ├── apple-touch-icon.png │ ├── favicon.svg │ ├── mask-icon.svg │ └── touch-icon-large.png ├── src │ ├── assets │ │ └── houston.webp │ ├── components │ │ └── Attribution.astro │ ├── content.config.ts │ └── content │ │ └── docs │ │ ├── guides │ │ ├── examples.md │ │ ├── exports.md │ │ ├── getting-started.mdx │ │ ├── just-parts.md │ │ ├── library-size.md │ │ ├── life-cycle-hooks.md │ │ ├── prop-access.mdx │ │ ├── shadow-dom.md │ │ ├── styling.md │ │ ├── template-vs-render.md │ │ ├── usage.md │ │ └── why.mdx │ │ ├── index.mdx │ │ └── reference │ │ └── example.md └── tsconfig.json ├── eslint.config.mjs ├── examples ├── constructed-styles │ ├── index.html │ └── index.js ├── demo │ ├── BooleanPropTest.mjs │ ├── Counter.mjs │ ├── HelloWorld.mjs │ ├── SimpleText.mjs │ ├── Toggle.js │ └── index.html ├── pens │ └── counter-toggle.html ├── props-blueprint │ ├── hello-world.js │ ├── index.html │ └── index.js ├── style-objects │ ├── index.html │ └── index.js ├── templating │ ├── index.html │ ├── index.js │ └── with-lit.js ├── type-restore │ ├── Counter.mjs │ ├── HelloWorld.mjs │ ├── Object.mjs │ ├── Toggle.mjs │ └── index.html └── use-shadow │ ├── index.html │ └── index.js ├── netlify.toml ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prettier.config.mjs ├── src ├── WebComponent.js ├── html.js ├── index.js └── utils │ ├── create-element.mjs │ ├── deserialize.mjs │ ├── get-camel-case.mjs │ ├── get-kebab-case.mjs │ ├── index.js │ ├── serialize.mjs │ └── serialize.test.mjs ├── test ├── WebComponent.test.mjs └── utils │ └── serialize.test.mjs ├── tsconfig.json ├── vendors └── htm │ └── LICENSE.txt └── vitest.config.mjs /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | 4 | # temporary files 5 | *~ 6 | *swo 7 | *swp 8 | 9 | # nitro site 10 | *.log* 11 | .nitro 12 | .cache 13 | .output 14 | .env 15 | .eslintcache 16 | 17 | # vitest 18 | coverage -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm run lint --cache 2 | npm run test 3 | npm run build 4 | npx size-limit 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | examples/ 3 | assets/ 4 | src/ 5 | .vscode/ 6 | tsconfig.json 7 | 8 | # temporary files 9 | *~ 10 | *swo 11 | *swp 12 | 13 | # nitro site 14 | site/ 15 | *.log* 16 | .nitro 17 | .cache 18 | .output 19 | .env 20 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # someday let's think about formatting html 2 | **/*.html 3 | 4 | **/*.md 5 | **/*.css 6 | **/*.yml 7 | **/*.yaml -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "js/ts.implicitProjectConfig.checkJs": true, 3 | "editor.formatOnSave": true 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Ayo Ayco 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Component Base 2 | 3 | [![Package information: NPM version](https://img.shields.io/npm/v/web-component-base)](https://www.npmjs.com/package/web-component-base) 4 | [![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://www.npmjs.com/package/web-component-base) 5 | [![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://www.npmjs.com/package/web-component-base) 6 | [![Bundle Size](https://img.shields.io/bundlephobia/minzip/web-component-base)](#library-size) 7 | 8 | 🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily ✨ 9 | 10 | ![counter example code snippet](https://git.sr.ht/~ayoayco/wcb/blob/main/assets/IMG_0682.png) 11 | 12 | When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render. 13 | 14 | The result is a reactive UI on property changes. 15 | 16 | ## Links 17 | 18 | - [Documentation](https://webcomponent.io) 19 | - [Read a blog explaining the reactivity](https://ayos.blog/reactive-custom-elements-with-html-dataset/) 20 | - [View demo on CodePen](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010) 21 | 22 | ## Want to get in touch? 23 | 24 | There are many ways to get in touch: 25 | 26 | 1. Open a [GitHub issue](https://github.com/ayoayco/wcb/issues/new) or [discussion](https://github.com/ayoayco/wcb/discussions) 27 | 1. Submit a ticket via [SourceHut todo](https://todo.sr.ht/~ayoayco/wcb) 28 | 1. Email me: [ayo@ayco.io](mailto:ayo@ayco.io) 29 | 1. Chat on Discord: [Ayo's Projects](https://discord.gg/kkvW7GYNAp) 30 | 31 | ## Inspirations and thanks 32 | 33 | 1. [htm](https://github.com/developit/htm) - I use it for the `html` function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see. 34 | 1. [fast](https://github.com/microsoft/fast) - When I found that Microsoft has their own base class I thought it was super cool! 35 | 1. [lit](https://github.com/lit/lit) - `lit-html` continues to amaze me and I worked to make `wcb` generic so I (and others) can continue to use it 36 | 37 | --- 38 | *Just keep building.*
39 | *A project by [Ayo Ayco](https://ayo.ayco.io)* 40 | -------------------------------------------------------------------------------- /assets/IMG_0682.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/IMG_0682.png -------------------------------------------------------------------------------- /assets/IMG_0683.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/IMG_0683.png -------------------------------------------------------------------------------- /assets/IMG_0684.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/IMG_0684.png -------------------------------------------------------------------------------- /assets/styling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/styling.png -------------------------------------------------------------------------------- /assets/todo-app.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/todo-app.gif -------------------------------------------------------------------------------- /assets/wc-base-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/wc-base-demo.gif -------------------------------------------------------------------------------- /assets/wc-feeling.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/assets/wc-feeling.gif -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /docs/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /docs/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Starlight Starter Kit: Basics 2 | 3 | [![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build) 4 | 5 | ``` 6 | npm create astro@latest -- --template starlight 7 | ``` 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics) 10 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics) 11 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics) 12 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs) 13 | 14 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! 15 | 16 | ## 🚀 Project Structure 17 | 18 | Inside of your Astro + Starlight project, you'll see the following folders and files: 19 | 20 | ``` 21 | . 22 | ├── public/ 23 | ├── src/ 24 | │ ├── assets/ 25 | │ ├── content/ 26 | │ │ ├── docs/ 27 | │ └── content.config.ts 28 | ├── astro.config.mjs 29 | ├── package.json 30 | └── tsconfig.json 31 | ``` 32 | 33 | Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name. 34 | 35 | Images can be added to `src/assets/` and embedded in Markdown with a relative link. 36 | 37 | Static assets, like favicons, can be placed in the `public/` directory. 38 | 39 | ## 🧞 Commands 40 | 41 | All commands are run from the root of the project, from a terminal: 42 | 43 | | Command | Action | 44 | | :------------------------ | :----------------------------------------------- | 45 | | `npm install` | Installs dependencies | 46 | | `npm run dev` | Starts local dev server at `localhost:4321` | 47 | | `npm run build` | Build your production site to `./dist/` | 48 | | `npm run preview` | Preview your build locally, before deploying | 49 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 50 | | `npm run astro -- --help` | Get help using the Astro CLI | 51 | 52 | ## 👀 Want to learn more? 53 | 54 | Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat). 55 | -------------------------------------------------------------------------------- /docs/astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { defineConfig } from 'astro/config' 3 | import starlight from '@astrojs/starlight' 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | redirects: { 8 | '/guides/': '/guides/why', 9 | }, 10 | integrations: [ 11 | starlight({ 12 | title: 'WCB (alpha)', 13 | social: { 14 | npm: 'https://www.npmjs.com/package/web-component-base', 15 | sourcehut: 'https://sr.ht/~ayoayco/wcb/', 16 | github: 'https://github.com/ayoayco/wcb/', 17 | discord: 'https://discord.gg/kkvW7GYNAp', 18 | }, 19 | sidebar: [ 20 | { 21 | label: 'Guides', 22 | items: [ 23 | // Each item here is one entry in the navigation menu. 24 | 'getting-started', 25 | 'why', 26 | 'exports', 27 | 'usage', 28 | 'examples', 29 | 'template-vs-render', 30 | 'prop-access', 31 | 'shadow-dom', 32 | 'styling', 33 | 'just-parts', 34 | 'life-cycle-hooks', 35 | 'library-size', 36 | ], 37 | }, 38 | // { 39 | // label: 'Reference', 40 | // autogenerate: { directory: 'reference' }, 41 | // }, 42 | ], 43 | components: { 44 | Footer: './src/components/Attribution.astro', 45 | }, 46 | head: [ 47 | { 48 | tag: 'link', 49 | attrs: { 50 | rel: 'mask-icon', 51 | href: 'mask-icon.svg', 52 | color: '#000000', 53 | }, 54 | }, 55 | { 56 | tag: 'link', 57 | attrs: { 58 | rel: 'apple-touch-icon', 59 | href: 'apple-touch-icon.png', 60 | }, 61 | }, 62 | ], 63 | }), 64 | ], 65 | }) 66 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro", 11 | "deploy": "netlify deploy --site=$NETLIFY_SITE_ID --dir=dist --prod" 12 | }, 13 | "dependencies": { 14 | "@astrojs/starlight": "^0.32.5", 15 | "astro": "^5.5.3", 16 | "sharp": "^0.32.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/docs/public/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/mask-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/touch-icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/docs/public/touch-icon-large.png -------------------------------------------------------------------------------- /docs/src/assets/houston.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayoayco/wcb/9abf7fcc6bf4bdadd1b7b62b6749ec0036fc6530/docs/src/assets/houston.webp -------------------------------------------------------------------------------- /docs/src/components/Attribution.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Footer from '@astrojs/starlight/components/Footer.astro' 3 | --- 4 | 5 |