@hydrophobefireman/qwc v0.0.6

QWC - Quick Web Components

QWC is the simplest way to create a new webcomponent, no need to write classes, QWC does that for you.

Usage

1. Quick dirty non reactive element:

   index.html

   <template is="custom" custom-element="custom-element-name">
     <style>
       .your-scoped-css {
       }
     </style>
     <button>My Custom Element</button>
   </template>
   <custom-element-name></custom-element-name>

   App.js

   import { init } from "@hydrophobefireman/qwc";
   init();

2. Custom logic for your element

   index.html

   <template is="custom" custom-element="my-custom-element">
     ...
   </template>
   <my-custom-element></my-custom-element>

   App.js

   import { init } from "@hydrophobefireman/qwc";
   init({
     "my-custom-element": {
       modifyConstructor(constructor) {
         // modify class constructor
       },
       observedAttributes: [
         {
           prop: "src",
           listener(oldVal, newVal) {
             //handle change
           }
         }
       ],
       modifyPrototype(prototype) {
         Object.defineProperty(prototype, "connectedCallback", {
           value() {
             //runs when element is connected (added to dom)
           }
         });
       }
     }
   });

3) Dynamic properties in the dom

index.html

<template is="custom" custom-element="button-counter">
  <div data-text-content="currentDate"></div>
  <button
    updates-reactively
    data-text-content="count"
    data-onclick="handleClick"
  ></button>
</template>
<button-counter></button-counter>

Note: only use attribute updates-reactively if your event listeners bring changes to your <custom-element/> otherwise using the attribute has no effect and leads to unnecessary updates.

App.js

import { init } from "@hydrophobefireman/qwc";
const conf = {
  "button-counter": {
    count: 0,
    handleClick() {
      conf.count++;
    },
    currentDate: new Date().toString()
  }
};
init(null, conf);

NOTE: QWC prefers your <template> elements to be inlined in your html instead of having to write html-in-js. But you can provide it with all template elements if you prefer, as the 3rd argument

Installation

npm i @hydrophobefireman/qwc --save