├── .DS_Store
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── src
    ├── add-styles.ts
    ├── expose.ts
    ├── index.ts
    ├── jsx.ts
    ├── renderer.ts
    └── types.ts
├── test
    ├── browser
    │   ├── .DS_Store
    │   ├── index.html
    │   ├── spec
    │   │   ├── add-styles.mjs
    │   │   ├── expose.mjs
    │   │   ├── index.mjs
    │   │   ├── jsx.mjs
    │   │   ├── pre-check.mjs
    │   │   ├── wc-composition.mjs
    │   │   └── wc-creation.mjs
    │   └── tester
    │   │   └── index.mjs
    └── modules
    │   ├── index
    │       ├── checker.js
    │       ├── test.cjs
    │       └── test.mjs
    │   └── jsx
    │       ├── checker.js
    │       ├── test.cjs
    │       └── test.mjs
├── tsconfig.json
└── webpack.config.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/felippe-regazio/wcwc/abdab1a4a332c1c3a9f626f667a0df08870890d9/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 | .vscode
3 | .DS_Store
4 | node_modules
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WCWC
2 | 
3 | Write Cool Web Components
4 | 
5 | [ Under Construction ]


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wcwc",
 3 |   "version": "1.0.0",
 4 |   "description": "Write Cool Web Components",
 5 |   "main": "lib/index.js",
 6 |   "types": "lib/d.ts",
 7 |   "files": [
 8 |     "lib/*"
 9 |   ],
10 |   "scripts": {
11 |     "clear": "rimraf --sync ./lib",
12 |     "build": "npm run clear && webpack --mode=production",
13 |     "dev": "npm run clear && npm run test:browser",
14 |     "test:browser": "webpack serve --mode=development --open",
15 |     "test:module:index": "node ./test/modules/index/test.cjs && node ./test/modules/index/test.mjs",
16 |     "test:module:jsx": "node ./test/modules/jsx/test.cjs && node ./test/modules/jsx/test.mjs",    
17 |     "test": "npm run clear && npm run build && npm run test:module:index && npm run test:module:jsx && npm run clear && npm run test:browser"
18 |   },
19 |   "keywords": [],
20 |   "author": "Felippe Regazio",
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "rimraf": "^3.0.2",
24 |     "terser-webpack-plugin": "^5.3.6",
25 |     "ts-loader": "^9.4.1",
26 |     "typescript": "^4.8.4",
27 |     "webpack": "^5.74.0",
28 |     "webpack-cli": "^4.10.0",
29 |     "webpack-dev-server": "^4.11.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/add-styles.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This function takes a .scss imported file (array style) or a String
 3 |  * and adds to the page as a <style> script. First it will extract the
 4 |  * style string, then will check if this style were already added. If 
 5 |  * not, will add the style. Elements with shadow dom will have the inner
 6 |  * styles always appended.
 7 |  * 
 8 |  * @param options: addStyleOptions
 9 |  * @returns Promise<boolean>
10 |  */
11 | export async function addStyles(options: addStylesOptions): Promise<boolean> {
12 |   return new Promise((resolve, reject) => {
13 |     try {
14 |       const { origin, styles, dataId } = options;
15 |       
16 |       const styleContent = (styles || [])
17 |         .map((s: StaticStyle) => s.toString())
18 |         .join(' ')
19 |         .trim();
20 | 
21 |       if (typeof window === 'undefined' || !styleContent) {
22 |         return resolve(true);
23 |       }
24 |       
25 |       const root = (origin.shadowRoot || origin).getRootNode() as Document|ShadowRoot;
26 |       const shadowed = root instanceof ShadowRoot;
27 | 
28 |       if (!shadowed) {
29 |         if (root?.head?.querySelector(`style[data-id=${dataId}]`)) {
30 |           return resolve(true);
31 |         }
32 | 
33 |         const style = Object.assign(document.createElement('style'), {
34 |           textContent: styleContent
35 |         });
36 |     
37 |         style.dataset.id = dataId;
38 |         root?.head?.append(style);  
39 |       }
40 | 
41 |       if (shadowed && root) {
42 |         const sheet = new CSSStyleSheet();
43 |         sheet.replaceSync(styleContent);
44 |         root.adoptedStyleSheets = [ sheet ];        
45 |       }
46 | 
47 |       return resolve(true);
48 |     } catch(error) {
49 |       console.error(error, options);
50 |       return reject(false);
51 |     }
52 |   })
53 | }
54 | 


--------------------------------------------------------------------------------
/src/expose.ts:
--------------------------------------------------------------------------------
  1 | import { addStyles } from './add-styles';
  2 | import { renderClassComponent, render, appendChildren } from './renderer';
  3 | 
  4 | export const parseDefinedProps = (props: unknown[]): ComponentConfigDefinedProps => {
  5 |   return (props || []).reduce((obj: any, item: any) => {
  6 |     if (typeof item === 'string') {
  7 |       obj[item] = {};
  8 |     }
  9 | 
 10 |     if (typeof item === 'object' && item.name) {
 11 |       obj[item.name] = item;
 12 |     }
 13 | 
 14 |     return obj;
 15 |   }, {}) as ComponentConfigDefinedProps;
 16 | }
 17 | 
 18 | /**
 19 |  * This function receives a WCWC Class-Based Component and wrap it into
 20 |  * a Vanilla Web Component. All the component lifecycle and data flow will
 21 |  * be binded between the two different interfaces shaping a single new
 22 |  * powerful Web Component that can be used anywhere.
 23 |  * 
 24 |  * @param Component 
 25 |  * @param componentName 
 26 |  * @param definedConfig 
 27 |  */
 28 | export async function defineAsCustomElement(Component: any, componentName: string, definedConfig?: ExposeConfig) {
 29 |   const config = {
 30 |     shadow: definedConfig?.shadow,
 31 |     props: parseDefinedProps(definedConfig?.props || []),
 32 |   } as ComponentConfig;
 33 | 
 34 |   // ------------------ Wraps the WC "Component" on a Native Web Element
 35 | 
 36 |   customElements.define(componentName, class extends HTMLElement {
 37 |     private initialized: boolean = false;
 38 |     $component: any;
 39 | 
 40 |     constructor() {
 41 |       super();
 42 | 
 43 |       Component.prototype.beforeMount();
 44 |     }
 45 | 
 46 |     disconnectedCallback() {
 47 |       this.$component && this.$component._unmounted();
 48 |     }
 49 | 
 50 |     connectedCallback() {
 51 |       if (config.shadow || this.getAttribute('shadow')) {
 52 |         this.attachShadow((config.shadow || { mode: this.getAttribute('shadow') }) as ShadowRootInit);
 53 |       }
 54 | 
 55 |       /*
 56 |        * The constructor for a custom element is not supposed to read or write its DOM. 
 57 |        * It shouldn't create child elements or modify attributes. That work needs to be 
 58 |        * done later, usually in a connectedCallback() method (although note that connectedCallback() 
 59 |        * can be called multiple times if the element is removed and re-added to the DOM, 
 60 |        * so you may need to check for this, or undo changes in a disconnectedCallback()).
 61 |        * SPEC: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
 62 |        */
 63 |       !this.initialized && this.init();
 64 |     }    
 65 | 
 66 |     init() {
 67 |       addStyles({
 68 |         origin: this,
 69 |         styles: Component.styles || [],
 70 |         dataId: this.tagName.toLocaleLowerCase(), 
 71 |       }).catch(void 0);
 72 |       
 73 |       this.renderWC();
 74 |       this.initialized = true;
 75 |       this.$component.mounted();
 76 |     }
 77 | 
 78 |     private renderWC() {
 79 |       const root = (this.shadowRoot || this);
 80 |       const f = new DocumentFragment();
 81 | 
 82 |       while(root.lastChild) {
 83 |         f.prepend(root.lastChild);
 84 |       }
 85 | 
 86 |       const contents = renderClassComponent({
 87 |         component: Component,
 88 | 
 89 |         props: {
 90 |           $el: this,
 91 |           ref: (r: any) => (this.$component = r),
 92 |           children: render(Array.from(f.childNodes)),
 93 |           ...(this.attrsToProps() || {})
 94 |         }
 95 |       });
 96 | 
 97 |       appendChildren(root, contents);
 98 |     }
 99 | 
100 |     static get observedAttributes() {
101 |       return Object.keys(config.props);
102 |     }
103 | 
104 |     private attrsToProps(): unknown {
105 |       return Object.keys(config.props)
106 |         .reduce((data: any, attrName: string) => {
107 |           const attrConfig = config.props[attrName];
108 | 
109 |           if (!this.getAttribute(attrName) && attrConfig.default) {
110 |             this.setAttribute(attrName, String(attrConfig.default));        
111 |           }
112 | 
113 |           // mirror current attribute value to incremental props
114 |           data[attrName] = this.getAttribute(attrName);
115 |           
116 |           if (attrConfig.css && data[attrName]) {
117 |             this.attrToCSSProp(attrName, data[attrName] as any);
118 |           }
119 | 
120 |           return data;
121 |         }, {});
122 |     }
123 | 
124 |     private async attrToCSSProp(name: string, value: string|null): Promise<boolean> {
125 |       return new Promise((resolve, reject) => {
126 |         try {
127 |           const attr = config.props[name];
128 |           
129 |           if (attr && attr.css) {
130 |             const prefix = this?.tagName.toLowerCase();
131 |             const propName = typeof attr.css === 'string' ? attr.css : name;
132 |             this.style.setProperty(`--${prefix}-${propName}`, String(value || attr.default || ''));
133 |           }
134 | 
135 |           return resolve(true);
136 |         } catch(error) {
137 |           console.error(error);
138 |           return reject(false);
139 |         }
140 |       })
141 |     }
142 | 
143 |     attributeChangedCallback(name: string, oldv: any, newv: any) {
144 |       if (this.$component && oldv !== newv) {
145 |         this.$component.props[name] = newv;
146 |         this.attrToCSSProp(name, newv).catch(void 0);
147 | 
148 |         this.$component.update();
149 |         this.$component.attrChanged(name, oldv, newv);
150 |       }
151 |     }
152 |   });
153 | }
154 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import { h, Fragment } from './jsx';
  2 | import { _render } from './renderer';
  3 | import { defineAsCustomElement } from './expose';
  4 | 
  5 | /**
  6 |  * This class defines a Component. This is not the web component itself,
  7 |  * but the entire Component API that is used to build the whole lifecycle
  8 |  * and features to build everything that a WC can render. This will be what
  9 |  * a Vanilla Web Component will be binded to. this class controls all the 
 10 |  * render process, data flow and reactivity inside the web component. This 
 11 |  * is the Web Component Bridge. It has all the features of the Component Class 
 12 |  * an the Expose method, responsible to wrap our WC classe-based components 
 13 |  * into a real Vanilla Web component and bind all the data and lifecycle callbacks. 
 14 |  * The import of { WC } must be idealy deduplicated using your prefered bundler.
 15 |  */
 16 | export class WC<P extends Object = any> {
 17 |   static h: typeof h = h;
 18 |   static f: typeof Fragment = Fragment;
 19 | 
 20 |   public props: P;
 21 |   public $el: HTMLElement;
 22 |   static styles?: StaticStyle[];
 23 |   public static isWCWCClass = true;
 24 | 
 25 |   constructor(props: P) {
 26 |     this.props = props || {};
 27 |     this.$el = (props as any).$el;
 28 |   }
 29 |   
 30 |   private get $host(): HTMLElement|ShadowRoot {
 31 |     return this.$el.shadowRoot || this.$el;
 32 |   }
 33 | 
 34 |   private _unmounted(): any {
 35 |     queueMicrotask(() => this.unmounted());
 36 |   }
 37 | 
 38 |   public update(update?: any) {
 39 |     this.beforeUpdate();
 40 | 
 41 |     const oldElements = Array.from(this.$host.childNodes) as any;
 42 |     const rendered = _render(this.render(update)) as any;
 43 |     const newElements = Array.isArray(rendered) ? rendered : [ rendered ];
 44 |     
 45 |     newElements.forEach((child: HTMLElement) => {
 46 |       this.$host.insertBefore(child, oldElements[0]);
 47 |     });
 48 | 
 49 |     oldElements.forEach((child: HTMLElement) => {
 50 |       if (!newElements.includes(child)) {
 51 |         if (typeof child !== 'string') {
 52 |           child.remove();
 53 |         }
 54 | 
 55 |         (child as any) = null;
 56 |       }
 57 |     });
 58 | 
 59 |     this.$el.isConnected 
 60 |       ? queueMicrotask(() => this.updated()) 
 61 |       : this._unmounted();
 62 |   }
 63 | 
 64 |   public store(data: object, _cb?: Function): any {
 65 |     const cb = _cb ? _cb.bind(this) : this.update.bind(this);
 66 | 
 67 |     return new Proxy(data, {
 68 |       get: (obj: any, prop: any) => {
 69 |         const isArrayOrObject = Array.isArray(obj[prop]) || typeof obj[prop] === 'object';
 70 |         const isProxyOrCircular = !obj[prop]._isProxy && !Object.is(obj[prop], data);
 71 | 
 72 |         if (prop === '_isProxy') {
 73 |           return true;
 74 |         }
 75 | 
 76 |         if (isArrayOrObject && !isProxyOrCircular) {
 77 |           obj[prop] = this.store(obj[prop], _cb);
 78 |         }
 79 |         
 80 |         if (typeof obj[prop] === 'function') {
 81 |           return obj[prop].bind(this)();
 82 |         }
 83 | 
 84 |         return obj[prop];
 85 |       },
 86 | 
 87 |       set: (obj: any, prop: any, value: any) => {
 88 |         if (obj[prop] === value) {
 89 |           return true
 90 |         };
 91 | 
 92 |         obj[prop] = value;
 93 |         cb();
 94 | 
 95 |         return true;
 96 |       },
 97 | 
 98 |       deleteProperty: (obj: any, prop: any) => {
 99 |         delete obj[prop];
100 |         cb();
101 | 
102 |         return true;
103 |       }
104 |     });
105 |   }
106 | 
107 |   public static expose(tagname: string, options?: ExposeConfig) {
108 |     if (!window.customElements.get(tagname)) {
109 |       defineAsCustomElement(this, tagname, options);
110 |     }
111 |   }  
112 | 
113 |   // @ts-ignore
114 |   public attrChanged(name: string, oldv: any, newv: any) {}
115 |   public beforeMount(): any {}
116 |   public mounted(): any {}
117 |   public unmounted(): any {}
118 |   public beforeUpdate(): any {}
119 |   public updated(): any {}
120 |   public render(_update?: any): HTMLElement | void {}
121 | }
122 | 
123 | export const wcwc = { WC };
124 | 


--------------------------------------------------------------------------------
/src/jsx.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This is our Hyperscript function, which is responsible to convert JSX calls
  3 |  * from the TS compiler to functions that manipulates and generates elements
  4 |  * directly to the DOM. This function is exposed directly on the { WC } class
  5 |  * on index.ts and its used by the TS (tsconfig) as JSX pragma. This file also
  6 |  * exposes the fragment function, which is used to generate a JSX fragment. To 
  7 |  * configure your TS to compile JSX using the WCWC pragma you must install this
  8 |  * library and add those lines on you "tsconfig.json":
  9 |  * 
 10 |  *  {
 11 |  *    "compilerOptions": {
 12 |  *       "jsx": "react",
 13 |  *       "jsxFactory": "WC.h",
 14 |  *       "jsxFragmentFactory": "WC.f"
 15 |  *    }
 16 |  *  }
 17 |  * 
 18 |  * After this, you must import the WC on your file, this will automatically enable
 19 |  * the TS to compile JSX on your component:
 20 |  * 
 21 |  * import { WC } from 'wcwc';
 22 |  * 
 23 |  * Now just write your component using JSX as you wish. All the JSX will be compiled
 24 |  * to functions that manipulates the DOM directly and are optimized to save time,
 25 |  * space and complexity. See the WCWC docs for further details.
 26 |  */
 27 | import { hNS, appendChildren } from './renderer';
 28 | 
 29 | declare global {
 30 |   export namespace JSX {
 31 |     interface IntrinsicElements {
 32 |       [elemName: string]: any
 33 |     }
 34 |     interface ElementClass {
 35 |       render: any
 36 |     }
 37 |     interface ElementChildrenAttribute {
 38 |       children: any
 39 |     }
 40 |   }
 41 | }
 42 | 
 43 | export function Fragment(props: any = {}) {
 44 |   return props.children;
 45 | }
 46 | 
 47 | export function h(tagNameOrComponent: string|unknown, props: { [key: string|symbol]: any }, ...children: any[]) {
 48 |   children = [].concat(...children, props?.children);
 49 | 
 50 |   if (Object.is(tagNameOrComponent, Fragment)) {
 51 |     return Fragment({ ...(props || {}), children });
 52 |   }
 53 | 
 54 |   if (typeof tagNameOrComponent !== 'string') {
 55 |     return {
 56 |       component: tagNameOrComponent,
 57 |       props: { ...(props || {}), children },
 58 |     }
 59 |   }
 60 | 
 61 |   const element = tagNameOrComponent === 'svg'
 62 |     ? hNS('svg') as SVGElement
 63 |     : document.createElement(tagNameOrComponent) as HTMLElement;
 64 | 
 65 |   bindProps(props, element);  
 66 |   appendChildren(element, children as unknown as HTMLElement[]);
 67 | 
 68 |   if (props?.ref) {
 69 |     props.ref(element);
 70 |   }
 71 | 
 72 |   return element as HTMLElement;
 73 | }
 74 | 
 75 | export function dangerouslySetInnerHTML(target: SVGElement|HTMLElement, innerHTML?: string) {
 76 |   const fragment = Object.assign(document.createElement('fragment'), {
 77 |     innerHTML: innerHTML || ''
 78 |   });
 79 | 
 80 |   target.appendChild(fragment);
 81 | };
 82 | 
 83 | export function bindProps(props: any, element: SVGElement|HTMLElement) {
 84 |   if (!props) {
 85 |     return
 86 |   };
 87 | 
 88 |   for (const p in props) {
 89 |     if (p === 'style' && typeof props[p] === 'object') {
 90 |       Object.assign(element.style, props[p]);
 91 |       props[p] = element.getAttribute('style');
 92 | 
 93 |       continue;
 94 |     }
 95 | 
 96 |     if (p.toLowerCase().startsWith('on')) {
 97 |       element.addEventListener(p.toLowerCase().substring(2), (e: any) => props[p](e));
 98 | 
 99 |       continue;
100 |     }
101 |     
102 |     if (p === 'innerHTML') {
103 |       dangerouslySetInnerHTML(element, props[p]);
104 | 
105 |       continue;
106 |     }
107 | 
108 |     if (/^className$/i.test(p)) {
109 |       element.setAttribute('class', props[p]);
110 | 
111 |       continue;
112 |     }
113 | 
114 |     if (p !== 'children' && typeof props[p] !== 'undefined') {
115 |       element.setAttribute(p, props[p])
116 | 
117 |       continue;
118 |     }
119 |   }
120 | }
121 | 
122 | export const jsx = { h, Fragment };


--------------------------------------------------------------------------------
/src/renderer.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * The functions in this files are used by the lifecycle management and the
  3 |  * hyperscript compilation (JSX) to render the elements at runtime. There is no
  4 |  * Virtual DOM, all the element lifecycle, state, render and children management
  5 |  * is meant to be generated directly in the DOM. There is a LOT of optimization
  6 |  * on this functions in comparing to original ones because our context is way
  7 |  * smaller than what the NanoJSX framework does. If you are willing to understand
  8 |  * this file you should starting by the render and _render functions. They are
  9 |  * responsible to link the component current state as a DOM output.
 10 |  */
 11 | export const removeAllChildNodes = (parent: HTMLElement) => {
 12 |   let child: ChildNode|null;
 13 | 
 14 |   while (child = parent?.lastChild) {
 15 |     parent.removeChild(child);
 16 |   }
 17 | }
 18 | 
 19 | export const appendChildren = (parent: HTMLElement|SVGElement|ShadowRoot, children: HTMLElement|HTMLElement[]) => {
 20 |   if ((parent as any)?.shadowRoot) {
 21 |     appendChildren((parent as any).shadowRoot, children);
 22 | 
 23 |     return;
 24 |   }
 25 | 
 26 |   if (Array.isArray(children)) {
 27 |     children.forEach((nestedChild) => appendChildren(parent, nestedChild));
 28 | 
 29 |     return;
 30 |   }
 31 | 
 32 |   if (!children) {
 33 |     return;
 34 |   }
 35 | 
 36 |   const element: HTMLElement = _render(children);
 37 | 
 38 |   if (!element) {
 39 |     return;
 40 |   }
 41 | 
 42 |   if (Array.isArray(element)) {
 43 |     appendChildren(parent, element);
 44 | 
 45 |     return;
 46 |   }
 47 | 
 48 |   parent.appendChild(element.nodeType ? element : document.createTextNode(element as unknown as string))
 49 | }
 50 | 
 51 | export const hNS = (tag: string) => {
 52 |   return document.createElementNS('http://www.w3.org/2000/svg', tag) as SVGElement;
 53 | }
 54 | 
 55 | export const SVG = (props: any) => {
 56 |   const child = props.children[0] as SVGElement;
 57 |   const attrs = child.attributes;
 58 |   const svg = hNS('svg') as SVGElement;
 59 | 
 60 |   for (let i = attrs.length - 1; i >= 0; i--) {
 61 |     svg.setAttribute(attrs[i].name, attrs[i].value);
 62 |   }
 63 | 
 64 |   svg.innerHTML = child.innerHTML;
 65 |   return svg as SVGSVGElement
 66 | }
 67 | 
 68 | export const render = (component: unknown) => {
 69 |   let el = _render(component);
 70 | 
 71 |   if (Array.isArray(el)) {
 72 |     el = el.map(e => _render(e));
 73 | 
 74 |     if (el.length === 1) {
 75 |       el = el[0];
 76 |     }
 77 |   }
 78 | 
 79 |   return el;
 80 | }
 81 | 
 82 | export const _render = (comp: any): any => {
 83 |   // null, false, undefined
 84 |   if (comp === null || comp === false || typeof comp === 'undefined') return []
 85 | 
 86 |   // string, number
 87 |   if (typeof comp === 'string' || typeof comp === 'number') return document.createTextNode(String(comp))
 88 | 
 89 |   // SVGElement
 90 |   if (comp.tagName && comp.tagName.toLowerCase() === 'svg') return SVG({ children: [comp] })
 91 | 
 92 |   // HTMLElement
 93 |   if (comp.tagName) return comp
 94 | 
 95 |   // TEXTNode (Node.TEXT_NODE === 3)
 96 |   if (comp && comp.splitText) return comp
 97 | 
 98 |   // Class Component
 99 |   if (comp && comp.component && comp.component.isWCWCClass) return renderClassComponent(comp)
100 | 
101 |   // Class Component (Uninitialized)
102 |   if (comp.isWCWCClass) return renderClassComponent({ component: comp, props: {} })
103 | 
104 |   // Array (render each child and return the array) (is probably a fragment)
105 |   if (Array.isArray(comp)) return (comp.map(c => _render(c)) as any).flat()
106 | 
107 |   // function
108 |   if (typeof comp === 'function' && !comp.isWCWCClass) return _render(comp())
109 | 
110 |   // if component is a HTMLElement (rare case)
111 |   if (comp.component && comp.component.tagName && typeof comp.component.tagName === 'string')
112 |     return _render(comp.component)
113 | 
114 |   // (rare case)
115 |   if (Array.isArray(comp.component)) return _render(comp.component)
116 | 
117 |   // (rare case)
118 |   if (comp.component) return _render(comp.component)
119 | 
120 |   // object
121 |   if (typeof comp === 'object') return []
122 | 
123 |   // failed
124 |   console.trace('Something unexpected happened while trying to create Inner Element: ', comp);
125 | }
126 | 
127 | export const renderClassComponent = (classComp: any): any => {
128 |   const { component: Component, props } = classComp;
129 |   const component = new Component(props);
130 |   const rendered = _render(component.render());
131 | 
132 |   if (props && props.ref) {
133 |     props.ref(component);
134 |   }
135 | 
136 |   return rendered;
137 | }


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | type ExposeConfig = {
 2 |   shadow?: ShadowRootInit,
 3 |   props: unknown[]
 4 | }
 5 | 
 6 | type ComponentConfig = {
 7 |   shadow?: ShadowRootInit,
 8 |   props: ComponentConfigDefinedProps
 9 | }
10 | 
11 | type ComponentConfigDefinedProps = { 
12 |   [key: string|symbol|number]: ComponentConfigPropValue
13 | };
14 | 
15 | type ComponentConfigProps = { 
16 |   [key: string|symbol|number]: ComponentConfigPropValue
17 | };
18 | 
19 | type ComponentConfigPropValue = { 
20 |   default: unknown, 
21 |   css?: boolean|string
22 | };
23 | 
24 | type addStylesOptions = {
25 |   dataId: string, 
26 |   styles: StaticStyle[], 
27 |   origin: HTMLElement
28 | }
29 | 
30 | type StaticStyle = string | '*.scss';
31 | 


--------------------------------------------------------------------------------
/test/browser/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/felippe-regazio/wcwc/abdab1a4a332c1c3a9f626f667a0df08870890d9/test/browser/.DS_Store


--------------------------------------------------------------------------------
/test/browser/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>WCWC Browser Tests</title>
 8 |   <!-- 
 9 |     index.js is served from memory by webpack-dev-server
10 |     and mimics the lib/index.js but with most recent code.
11 |     the index will expose ths globals { WC, wcwc } that 
12 |     can be accessed from the spec es6 modules to be tested.
13 |     The same will happen for jsx module and its exports.
14 |   -->
15 |   <script src="index.js"></script>
16 |   <script src="jsx.js"></script>
17 | </head>
18 | <body>
19 |   <h1>WCWC Browser Tests - Results:</h1>
20 |   <div id="tester-output"></div>
21 |   <script src="spec/index.mjs" type="module"></script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/test/browser/spec/add-styles.mjs:
--------------------------------------------------------------------------------
 1 | import { Tester } from '../tester/index.mjs';
 2 | 
 3 | const $t = new Tester();
 4 | 
 5 | $t.it('Check add-styles module', () => {
 6 |   $t.assert('Static property "styles" must assign a style tag to the page', async () => {
 7 |     const styleContent = '--style-test: 1';
 8 | 
 9 |     (class TestComponent extends WC {
10 |       static styles = [ styleContent ]
11 | 
12 |       render() { 
13 |         return '' 
14 |       }
15 | 
16 |       mounted() {
17 |         this.$el.check();
18 |       }
19 |     }).expose('c-style-a');
20 | 
21 |     return new Promise(resolve => {
22 |       const $el = document.createElement('c-style-a');
23 |       
24 |       $el.check = () => {
25 |         const styleElement = document.head.querySelector('style[data-id=c-style-a]');
26 |         const styleContentOk = styleContent === styleElement.innerHTML;
27 |         resolve(!!styleElement && styleContentOk);
28 |       }
29 |       
30 |       document.body.append($el);
31 |     });
32 |   });
33 | 
34 |   $t.assert('Same multiple components must assign only one style to the Head', async () => {
35 |     (class TestComponent extends WC {
36 |       static styles = [ '--style-test: 2' ]
37 | 
38 |       render() { 
39 |         return '' 
40 |       }
41 | 
42 |       mounted() {
43 |         this.$el.check && this.$el.check();
44 |       }
45 |     }).expose('c-style-b');
46 | 
47 |     return new Promise(resolve => {
48 |       const $elA = document.createElement('c-style-b');
49 |       const $elB = document.createElement('c-style-b');
50 |       const $elC = document.createElement('c-style-b');
51 |       const $elD = document.createElement('c-style-b');
52 |       
53 |       $elD.check = () => {
54 |         const styles = document.querySelectorAll('style[data-id=c-style-b]');
55 | 
56 |         resolve(styles.length === 1);
57 |       }
58 | 
59 |       document.body.append($elA, $elB, $elC);
60 |       document.body.append($elD);
61 |     });
62 |   });
63 |   
64 |   $t.assert('Shadowed components must adopt style sheet internally', async () => {
65 |     const styleContent = ':host { display: none; }';
66 |       
67 |     (class ShadowedOpened extends WC {
68 |       static styles = [ styleContent ]
69 | 
70 |       render() {
71 |         return 'Hello world';
72 |       }
73 |     }).expose('shadowed-open-styled-component', {
74 |       shadow: { mode: 'open' }
75 |     });
76 |   
77 |     const shadowed = document.createElement('shadowed-open-styled-component');
78 |     document.body.append(shadowed);
79 |     const adoptedStyle = shadowed.shadowRoot.adoptedStyleSheets[0].cssRules[0].cssText;
80 |     shadowed.remove();
81 | 
82 |     return adoptedStyle === styleContent;
83 |   });
84 | });


--------------------------------------------------------------------------------
/test/browser/spec/expose.mjs:
--------------------------------------------------------------------------------
  1 | import { Tester } from '../tester/index.mjs';
  2 | 
  3 | const $t = new Tester();
  4 | 
  5 | $t.it('Check { expose } function', () => {
  6 |   const content = 'Hello world';
  7 | 
  8 |   (class TestComponent extends WC {
  9 |     render() {
 10 |       return content;
 11 |     }
 12 |   }).expose('test-component');
 13 | 
 14 |   function checkBasics() {
 15 |     $t.assert('Expose function must define the component as a Vanilla WC', () => {    
 16 |       const testComponent = document.createElement('test-component');
 17 |       document.body.append(testComponent);
 18 |       const result = testComponent.innerHTML === content;
 19 |       testComponent.remove();
 20 |       return result;
 21 |     });
 22 |   
 23 |     $t.assert('The element must not render when in memory-only mode (if not connected to the DOM)', () => {
 24 |       const testComponent = document.createElement('test-component');
 25 |       return !testComponent.innerHTML;
 26 |     });
 27 |   }
 28 | 
 29 |   function checkShadowedOpened() {
 30 |     const content = 'Hello world';
 31 | 
 32 |     (class ShadowedOpened extends WC {
 33 |       render() {
 34 |         return content;
 35 |       }
 36 |     }).expose(`shadowed-component-open`, {
 37 |       shadow: { mode: 'open' }
 38 |     });
 39 |   
 40 |     const shadowed = document.createElement(`shadowed-component-open`);
 41 |     document.body.append(shadowed);
 42 |     const wrapper = shadowed.shadowRoot.firstChild;
 43 |   
 44 |     $t.assert('Expose function with { shadow: open } option must create a opened shadowed WC', () => {    
 45 |       const result = !!shadowed.shadowRoot;
 46 |       return result;
 47 |     });
 48 |   
 49 |     $t.assert('The shadow root mode must be the same that was passed to exposed option', () => {
 50 |       return shadowed.shadowRoot.mode === 'open';
 51 |     });
 52 |   
 53 |     shadowed.remove();
 54 |   }
 55 | 
 56 |   function checkShadowedClosed() {
 57 |     const content = 'Hello world';
 58 | 
 59 |     (class ShadowedClosed extends WC {
 60 |       render() {
 61 |         return content;
 62 |       }
 63 |     }).expose(`shadowed-component-closed`, {
 64 |       shadow: { mode: 'closed' }
 65 |     });
 66 |   
 67 |     const shadowed = document.createElement(`shadowed-component-closed`);
 68 |     document.body.append(shadowed);
 69 |   
 70 |     $t.assert('Expose function with { shadow: closed } option must create a closed shadowed WC', () => {    
 71 |       const result = !shadowed.shadowRoot;
 72 |       shadowed.remove();
 73 |       return result;
 74 |     });
 75 |   
 76 |     shadowed.remove();
 77 |   }
 78 | 
 79 |   checkBasics();
 80 |   checkShadowedOpened();
 81 |   checkShadowedClosed();
 82 | });
 83 | 
 84 | 
 85 | $t.it(`Check { expose } props declaration and props reactivity`, () => {
 86 |   $t.assert('Non exposed props will not be reactive, wont trigger update and and wont be on this.props object', () => {
 87 |     (class TestComponent extends WC {
 88 |       ok = true;
 89 | 
 90 |       render() { 
 91 |         return this.props.testing || '';
 92 |       }
 93 | 
 94 |       updated() {
 95 |         this.ok = false;
 96 |       }
 97 | 
 98 |       unmounted() {
 99 |         this.$el.__done(this.ok && !this.props.testing);
100 |       }
101 |     }).expose('wc-prop-check-a');
102 | 
103 |     return new Promise(resolve => {
104 |       const c = document.createElement('wc-prop-check-a');
105 |       c.__done = result => resolve(result);
106 |       document.body.append(c);
107 |       c.setAttribute('testing', '1');
108 |       c.setAttribute('testing', '2');
109 |       c.remove();  
110 |       setTimeout(() => resolve(false), 200);
111 |     })
112 |   });
113 | 
114 |   $t.assert('Exposed props must be reactive, trigger update and be on this.props', () => {
115 |     (class TestComponent extends WC {
116 |       ok = false;
117 | 
118 |       render() { 
119 |         return this.props.testing;
120 |       }
121 | 
122 |       updated() {
123 |         this.ok = true;
124 |       }
125 | 
126 |       unmounted() {
127 |         this.$el.__done(this.ok && this.props.testing && this.$el.textContent === '2');
128 |       }
129 |     }).expose('wc-prop-check-b', {
130 |       props: {
131 |         testing: { initial: 1 }
132 |       }
133 |     });
134 | 
135 |     return new Promise(resolve => {
136 |       const c = document.createElement('wc-prop-check-b');
137 |       c.__done = result => resolve(result);
138 |       document.body.append(c);
139 |       c.setAttribute('testing', '2');
140 |       c.remove();
141 |       setTimeout(() => resolve(false), 200);
142 |     });
143 |   });
144 | 
145 |   $t.assert('Exposed props with { css: true } must mirror to css prop', () => {
146 |     (class TestComponent extends WC {
147 |       render() { 
148 |         return '';
149 |       }
150 | 
151 |       mounted() {
152 |         const propCheck = window.getComputedStyle(this.$el).getPropertyValue('--wc-attr-testCssColor');
153 |         
154 |         this.$el.__done(propCheck === 'blue');
155 |       }
156 |     }).expose('wc-prop-check-c', {
157 |       props: {
158 |         testCssColor: { 
159 |           css: true,
160 |           initial: 'blue'
161 |         }
162 |       }
163 |     });
164 | 
165 |     return new Promise(resolve => {
166 |       const c = document.createElement('wc-prop-check-c');
167 |       c.__done = result => resolve(result);
168 |       document.body.append(c);
169 |       c.remove();
170 |       setTimeout(() => resolve(false), 200);
171 |     });    
172 |   });
173 | });
174 | 
175 | $t.it('Check Component Lifecycle Hooks', () => {
176 |   $t.assert('beforeMount', () => {
177 |     const keycheck = '__wcBeforeMountCheck';
178 | 
179 |     (class TestComponent extends WC {
180 |       render() { 
181 |         this.rendered = true;
182 |         return 'Hello world'; 
183 |       }
184 |       
185 |       beforeMount() {
186 |         window[keycheck] = this.rendered;
187 |       }
188 |     }).expose('wc-before-mount');
189 | 
190 |     const c = document.createElement('wc-before-mount');
191 |     document.body.append(c);
192 |     c.remove();
193 | 
194 |     return window[keycheck] === undefined;
195 |   });
196 | 
197 |   $t.assert('mounted', async () => {
198 |     (class TestComponent extends WC {
199 |       render() { 
200 |         return Object.assign(document.createElement('div'), { id: 'mounted', style: 'display: none' }); 
201 |       }
202 |       
203 |       beforeMount() {
204 |         this.mustBeTrue = !this.$el && !this.isConnected;
205 |       }
206 | 
207 |       mounted() {
208 |         this.$el.__mounted(this.mustBeTrue && this.$el.isConnected);
209 |       }
210 |     }).expose('wc-mounted');
211 |     
212 |     return new Promise(resolve => {
213 |       const c = document.createElement('wc-mounted');
214 |       c.__mounted = result => resolve(result);
215 |       
216 |       document.body.append(c);
217 |       setTimeout(() => resolve(false), 200);
218 |     });
219 |   });
220 | 
221 |   $t.assert('beforeUpdate', async () => {
222 |     (class TestComponent extends WC {
223 |       data = this.store({ content: 1 })
224 | 
225 |       render() { 
226 |         return Object.assign(document.createElement('div'), {
227 |           style: 'display: none',
228 |           textContent: this.data.content
229 |         }); 
230 |       }
231 | 
232 |       mounted() {
233 |         this.data.content = 2;
234 |       }
235 |       
236 |       beforeUpdate() {
237 |         this.$el.__beforeUpdate(this.$el.textContent.trim() === '1');
238 |       }
239 |     }).expose('wc-before-update');
240 |     
241 |     return new Promise(resolve => {
242 |       const c = document.createElement('wc-before-update');
243 |       c.__beforeUpdate = result => resolve(result);
244 |       
245 |       document.body.append(c);
246 |       setTimeout(() => resolve(false), 200);
247 |     });
248 |   });
249 | 
250 |   $t.assert('updated', async () => {
251 |     (class TestComponent extends WC {
252 |       data = this.store({ content: 1 })
253 | 
254 |       render() { 
255 |         return Object.assign(document.createElement('div'), {
256 |           style: 'display: none',
257 |           textContent: this.data.content
258 |         }); 
259 |       }
260 | 
261 |       mounted() {
262 |         this.data.content = 2;
263 |       }
264 |       
265 |       updated() {
266 |         this.$el.__updated(this.$el.textContent.trim() === '2');
267 |       }
268 |     }).expose('wc-updated');
269 |     
270 |     return new Promise(resolve => {
271 |       const c = document.createElement('wc-updated');
272 |       c.__updated = result => resolve(result);
273 |       
274 |       document.body.append(c);
275 |       setTimeout(() => resolve(false), 200);
276 |     });
277 |   });
278 | 
279 |   $t.assert('unmounted', async () => {
280 |     (class TestComponent extends WC {
281 |       render() { 
282 |         return Object.assign(document.createElement('div'), {
283 |           style: 'display: none',
284 |           textContent: 'should be unmounted'
285 |         }); 
286 |       }
287 | 
288 |       mounted() {
289 |         this.wasmounted = this.$el.isConnected;
290 |       }
291 | 
292 |       unmounted() {
293 |         this.$el.__unmounted(this.wasmounted && !this.$el.isConnected);
294 |       }
295 |     }).expose('wc-unmounted');
296 |     
297 |     return new Promise(resolve => {
298 |       const c = document.createElement('wc-unmounted');
299 |       c.__unmounted = result => resolve(result);
300 |       
301 |       document.body.append(c);
302 |       c.remove();
303 |       
304 |       setTimeout(() => resolve(false), 200);
305 |     });
306 |   });
307 | 
308 |   $t.assert('attrChanged', async () => {
309 |     (class TestComponent extends WC {
310 |       attrs = [];
311 | 
312 |       render() {
313 |         return Object.assign(document.createElement('div'), { style: 'display: none' });
314 |       }
315 | 
316 |       attrChanged(name, oldv, newv) {
317 |         this.$el.__done(name === 'testing' && oldv === '1' && newv === '2');
318 |       }
319 |     }).expose('wc-attr-changed', {
320 |       props: {
321 |         testing: { initial: 1 }
322 |       }
323 |     });
324 |     
325 |     return new Promise(resolve => {
326 |       const c = document.createElement('wc-attr-changed');
327 |       c.__done = result => resolve(result);
328 |       document.body.append(c);
329 |       c.setAttribute('testing', '2');
330 |       setTimeout(() => resolve(false), 200);
331 |     });
332 |   });  
333 | });
334 | 
335 | $t.it('Check Component Lifecycle Hooks { Shadow Mode }', () => {
336 |   $t.assert('beforeMount', () => {
337 |     const keycheck = '__wcBeforeMountCheck';
338 | 
339 |     (class TestComponent extends WC {
340 |       render() { 
341 |         this.rendered = true;
342 |         return 'Hello world'; 
343 |       }
344 |       
345 |       beforeMount() {
346 |         window[keycheck] = this.rendered;
347 |       }
348 |     }).expose('wc-before-mount-shadowed', { shadow: { mode: 'open' } });
349 | 
350 |     const c = document.createElement('wc-before-mount-shadowed');
351 |     document.body.append(c);
352 |     c.remove();
353 | 
354 |     return window[keycheck] === undefined;
355 |   });
356 | 
357 |   $t.assert('mounted', async () => {
358 |     (class TestComponent extends WC {
359 |       render() { 
360 |         return Object.assign(document.createElement('div'), { id: 'mounted', style: 'display: none' }); 
361 |       }
362 |       
363 |       beforeMount() {
364 |         this.mustBeTrue = !this.$el && !this.isConnected;
365 |       }
366 | 
367 |       mounted() {
368 |         this.$el.__mounted(this.mustBeTrue && this.$el.isConnected);
369 |       }
370 |     }).expose('wc-mounted-shadowed', { shadow: { mode: 'open' } });
371 |     
372 |     return new Promise(resolve => {
373 |       const c = document.createElement('wc-mounted-shadowed');
374 |       c.__mounted = result => resolve(result);
375 |       document.body.append(c);
376 |       setTimeout(() => resolve(false), 200);
377 |     });
378 |   });
379 | 
380 |   $t.assert('beforeUpdate', async () => {
381 |     (class TestComponent extends WC {
382 |       data = this.store({ content: 1 })
383 | 
384 |       render() {
385 |         return Object.assign(document.createElement('div'), {
386 |           style: 'display: none',
387 |           textContent: this.data.content
388 |         }); 
389 |       }
390 | 
391 |       mounted() {
392 |         this.data.content = 2;
393 |       }
394 |       
395 |       beforeUpdate() {
396 |         this.$el.__beforeUpdate(this.$el.shadowRoot.textContent.trim() === '1');
397 |       }
398 |     }).expose('wc-before-update-shadowed', { shadow: { mode: 'open' } });
399 |     
400 |     return new Promise(resolve => {
401 |       const c = document.createElement('wc-before-update-shadowed');
402 |       c.__beforeUpdate = result => resolve(result);
403 |       
404 |       document.body.append(c);
405 |       setTimeout(() => resolve(false), 200);
406 |     });
407 |   });
408 | 
409 |   $t.assert('updated', async () => {
410 |     (class TestComponent extends WC {
411 |       data = this.store({ content: 1 })
412 | 
413 |       render() { 
414 |         return Object.assign(document.createElement('div'), {
415 |           style: 'display: none',
416 |           textContent: this.data.content
417 |         }); 
418 |       }
419 | 
420 |       mounted() {
421 |         this.data.content = 2;
422 |       }
423 |       
424 |       updated() {
425 |         this.$el.__updated(this.$el.shadowRoot.textContent.trim() === '2');
426 |       }
427 |     }).expose('wc-updated-shadowed', { shadow: { mode: 'open' } });
428 |     
429 |     return new Promise(resolve => {
430 |       const c = document.createElement('wc-updated-shadowed');
431 |       c.__updated = result => resolve(result);
432 |       
433 |       document.body.append(c);
434 |       setTimeout(() => resolve(false), 200);
435 |     });
436 |   });
437 | 
438 |   $t.assert('unmounted', async () => {
439 |     (class TestComponent extends WC {
440 |       render() { 
441 |         return Object.assign(document.createElement('div'), {
442 |           style: 'display: none',
443 |           textContent: 'should be unmounted'
444 |         }); 
445 |       }
446 | 
447 |       mounted() {
448 |         this.wasmounted = this.$el.isConnected;
449 |       }
450 | 
451 |       unmounted() {
452 |         this.$el.__unmounted(this.wasmounted && !this.$el.isConnected);
453 |       }
454 |     }).expose('wc-unmounted-shadowed', { shadow: { mode: 'open' } });
455 |     
456 |     return new Promise(resolve => {
457 |       const c = document.createElement('wc-unmounted-shadowed');
458 |       c.__unmounted = result => resolve(result);
459 |       
460 |       document.body.append(c);
461 |       c.remove();
462 |       
463 |       setTimeout(() => resolve(false), 200);
464 |     });
465 |   });
466 | 
467 |   $t.assert('attrChanged', async () => {
468 |     (class TestComponent extends WC {
469 |       attrs = [];
470 | 
471 |       render() {
472 |         return Object.assign(document.createElement('div'), { style: 'display: none' });
473 |       }
474 | 
475 |       attrChanged(name, oldv, newv) {
476 |         this.$el.__done(name === 'testing' && oldv === '1' && newv === '2');
477 |       }
478 |     }).expose('wc-attr-changed-shadowed', {
479 |       shadow: { mode: 'open' },
480 |       props: {
481 |         testing: { initial: 1 }
482 |       }
483 |     });
484 |     
485 |     return new Promise(resolve => {
486 |       const c = document.createElement('wc-attr-changed-shadowed');
487 |       c.__done = result => resolve(result);
488 |       document.body.append(c);
489 |       c.setAttribute('testing', '2');
490 |       setTimeout(() => resolve(false), 200);
491 |     });
492 |   });  
493 | });
494 | 


--------------------------------------------------------------------------------
/test/browser/spec/index.mjs:
--------------------------------------------------------------------------------
1 | import './pre-check.mjs';
2 | import './expose.mjs';
3 | import './add-styles.mjs';
4 | import './jsx.mjs';
5 | import './wc-creation.mjs';
6 | import './wc-composition.mjs';


--------------------------------------------------------------------------------
/test/browser/spec/jsx.mjs:
--------------------------------------------------------------------------------
  1 | import { Tester } from '../tester/index.mjs';
  2 | 
  3 | const $t = new Tester();
  4 | 
  5 | $t.it('Check { h } module', () => {
  6 |   $t.assert('A Fragment must simply return its children (no parent)', () => {
  7 |     return `${Fragment({ children: 1 })} ${Fragment({})}` === `1 undefined`;
  8 |   });
  9 | 
 10 |   $t.assert('{ h } element creation. E.g. h("SVG|DIV|SPAN|P|H1")', () => {
 11 |     return [
 12 |       'svg',
 13 |       'div',
 14 |       'span',
 15 |       'p',
 16 |       'h1'
 17 |     ].map(tagName => {
 18 |       return { input: tagName, output: h(tagName) };
 19 |     }).every(item => {
 20 |       return item.input.toUpperCase() === item.output.tagName.toUpperCase();
 21 |     });
 22 |   });
 23 | 
 24 |   $t.assert('{ h } with props children', () => {
 25 |     const children = [ 
 26 |       document.createElement('div'), 
 27 |       document.createElement('p'), 
 28 |       document.createElement('i'), 
 29 |     ];
 30 | 
 31 |     const el = h('div', { children });
 32 | 
 33 |     return children.every((item, index) => Array.from(el.children)[index] === item);
 34 |   });
 35 | 
 36 |   $t.assert('{ h } with element children', () => {
 37 |     const children = [ 
 38 |       document.createElement('div'), 
 39 |       document.createElement('p'), 
 40 |       document.createElement('i'), 
 41 |     ];
 42 | 
 43 |     const el = h('div', {}, children);
 44 | 
 45 |     return children.every((item, index) => Array.from(el.children)[index] === item);
 46 |   });
 47 | 
 48 |   $t.assert('{ h } with props & element children', () => {
 49 |     const elemChildren = [
 50 |       document.createElement('h1'),
 51 |       document.createElement('h2'), 
 52 |       document.createElement('h3'), 
 53 |     ];
 54 | 
 55 |     const propsChildren = [ 
 56 |       document.createElement('h4'),
 57 |       document.createElement('h5'), 
 58 |       document.createElement('h6'), 
 59 |     ];
 60 | 
 61 |     const checkChildren = [].concat(elemChildren, propsChildren);
 62 |     const el = h('div', { children: propsChildren }, elemChildren);
 63 | 
 64 |     return checkChildren.every((item, index) => Array.from(el.children)[index] === item);
 65 |   });
 66 | 
 67 |   $t.assert('{ h } with Object as arg', () => {
 68 |     const div = document.createElement('div');
 69 |     const result = h(div, { test: true }, [ 'testing' ]);
 70 |     return result.component === div && result.props.test && result.props.children[0] === 'testing';
 71 |   });
 72 | 
 73 |   $t.assert('{ h } bindProps()', () => {
 74 |     let eventBindingOk = false;
 75 | 
 76 |     const element = h('div', {
 77 |       style: { display: 'flex', alignItems: 'center' },
 78 |       class: 'fizz buzz',
 79 |       'data-x': 'fizz',
 80 |       'disabled': true,
 81 |       innerHTML: 'testing',
 82 |       onClick: () => { eventBindingOk = true; }
 83 |     });
 84 | 
 85 |     element.click();
 86 | 
 87 |     return (
 88 |       element.style.display === 'flex' &&
 89 |       element.style.alignItems === 'center' &&
 90 |       element.classList.contains('fizz', 'buzz') &&
 91 |       element.dataset.x === 'fizz' &&
 92 |       element.getAttribute('disabled') === 'true' &&
 93 |       element.textContent === 'testing' &&
 94 |       eventBindingOk
 95 |     );
 96 |   });
 97 | 
 98 |   $t.assert('{ h } with text node children', () => {
 99 |     const children = [ 
100 |       'Hello',
101 |       ' ',
102 |       document.createTextNode('World')
103 |     ];
104 | 
105 |     const el = h('div', { children });
106 |     return el.textContent === 'Hello World';
107 |   })
108 | });
109 | 
110 | $t.it('Check { Fragment } &lt;>&lt;/> behavior', () => {
111 |   $t.assert('Fragment() === undefined', () => {
112 |     return Fragment() === undefined;
113 |   });
114 | 
115 |   $t.assert('Fragment({}) === undefined', () => {
116 |     return Fragment({}) === undefined;
117 |   });
118 | 
119 |   [
120 |     null,
121 |     undefined,
122 |     true,
123 |     '',
124 |     [],
125 |     'Testing',
126 |     Symbol('Test'),
127 |     document.createElement('span'),
128 |     document.createTextNode('Testing')
129 |   ].forEach(item => {
130 |     const testLabel = (item?.toString() || JSON.stringify(item)) + ' : ' + typeof item;
131 | 
132 |     $t.assert(`Fragment({ children: ${testLabel} })`, () => {
133 |       return  Object.is(Fragment({ children: item }), item);
134 |     });
135 |   });
136 | });
137 | 


--------------------------------------------------------------------------------
/test/browser/spec/pre-check.mjs:
--------------------------------------------------------------------------------
 1 | import { Tester } from '../tester/index.mjs';
 2 | 
 3 | const $t = new Tester();
 4 | 
 5 | $t.it('Check the library structure', () => {
 6 |   $t.assert('WCWC must export the WC class as "export class WC {...}" from src/index.ts', () => {
 7 |     return !!WC;
 8 |   });
 9 | 
10 |   $t.assert('WCWC must export a member called wcwc as "export const wcwc = { WC }" from src/index.ts for browser compatibility', () => {        
11 |     return !!wcwc;
12 |   });
13 | 
14 |   $t.assert('The { wcwc } exported member from src/index.ts must contain the WC class: "export const wcwc = { WC }"', () => {        
15 |     return !!wcwc.WC;
16 |   });
17 | 
18 |   $t.assert('The "wcwc.WC" and "WC" objects must be the same WC class on src/index.ts', () => {        
19 |     return wcwc.WC === WC;
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/test/browser/spec/wc-composition.mjs:
--------------------------------------------------------------------------------
  1 | import { Tester } from '../tester/index.mjs';
  2 | 
  3 | const $t = new Tester();
  4 | 
  5 | $t.it('Check component composition', () => {
  6 |   $t.assert('By append', () => {
  7 |     (class WCLevelA extends WC {
  8 |       render() { return this.props.children };
  9 |     }).expose('wc-append-level-a');
 10 |   
 11 |     (class WCLevelB extends WC {
 12 |       render() { return this.props.children };
 13 |     }).expose('wc-append-level-b');
 14 |   
 15 |     (class WCLevelC extends WC {
 16 |       static styles = [`
 17 |         wc-append-level-c {
 18 |           border: solid 1px #bbb;
 19 |           display: block;
 20 |           padding: 16px;
 21 |           max-width: 300px;
 22 |           border-radius: 8px;
 23 |           margin: 16px 0;
 24 |         }
 25 |       `];
 26 |   
 27 |       render() { return 'Checking component composition' };
 28 |     }).expose('wc-append-level-c');  
 29 |   
 30 |     const a = document.createElement('wc-append-level-a');
 31 |     const b = document.createElement('wc-append-level-b');
 32 |     const c = document.createElement('wc-append-level-c');
 33 |   
 34 |     a.append(b);
 35 |     b.append(c);
 36 |     $t.assert(a);
 37 | 
 38 |     const result = a.firstChild === b && b.firstChild === c;
 39 |     a.remove();
 40 |     return result;
 41 |   });
 42 | 
 43 |   $t.assert('By props.children', () => {
 44 |     class WCLevelA extends WC {
 45 |       render() { return this.props.children };
 46 |     }
 47 |   
 48 |     class WCLevelB extends WC {
 49 |       render() { return this.props.children };
 50 |     }
 51 |     
 52 |     class WCLevelC extends WC {
 53 |       static styles = [`
 54 |         wc-children-level-c {
 55 |           border: solid 1px #bbb;
 56 |           display: block;
 57 |           padding: 16px;
 58 |           max-width: 300px;
 59 |           border-radius: 8px;
 60 |           margin: 16px 0;
 61 |         }
 62 |       `];
 63 |   
 64 |       render() { return this.props.children };
 65 |     }
 66 |     
 67 |     WCLevelA.expose('wc-children-level-a');
 68 |     WCLevelB.expose('wc-children-level-b');
 69 |     WCLevelC.expose('wc-children-level-c');    
 70 |     
 71 |     const div = Object.assign(document.createElement('div'), {
 72 |       innerHTML: `
 73 |         <wc-children-level-a>
 74 |           <wc-children-level-b> 
 75 |             <wc-children-level-c>Checking component composition</wc-children-level-c>  
 76 |           </wc-children-level-b>
 77 |         </wc-children-level-a>
 78 |       `
 79 |     });
 80 | 
 81 |     $t.assert(div);
 82 | 
 83 |     const result = (
 84 |       div.firstElementChild.tagName.toLowerCase() === 'wc-children-level-a' && 
 85 |       div.firstElementChild.firstElementChild.tagName.toLowerCase() === 'wc-children-level-b' && 
 86 |       div.firstElementChild.firstElementChild.firstElementChild.tagName.toLowerCase() === 'wc-children-level-c'
 87 |     );
 88 | 
 89 |     div.remove();
 90 |     return result;
 91 |   });  
 92 | 
 93 |   $t.assert('Props Children vs Element Children', () => {
 94 |     const expectedContent = 'Element initial HTML was overwrited by render';
 95 | 
 96 |     (class wcPropsVsChildren extends WC {
 97 |       render() { return expectedContent };
 98 |     }).expose('wc-props-vs-children');
 99 | 
100 |     const $wcPropsVsChildren = Object.assign(document.createElement('wc-props-vs-children'), {
101 |       innerHTML: 'Initial InnerHTML'
102 |     });
103 | 
104 |     $t.assert($wcPropsVsChildren);
105 |     const result = $wcPropsVsChildren.textContent === expectedContent;
106 |     $wcPropsVsChildren.remove();
107 | 
108 |     return result;
109 |   });
110 | });
111 | 


--------------------------------------------------------------------------------
/test/browser/spec/wc-creation.mjs:
--------------------------------------------------------------------------------
  1 | import { Tester } from '../tester/index.mjs';
  2 | 
  3 | const $t = new Tester();
  4 | 
  5 | $t.it('Check Component API behavior (No shadow)', () => {
  6 |   const create = (tag, attrs = {}) => Object.assign(document.createElement(tag), attrs);
  7 | 
  8 |   (class WCCounter extends WC {
  9 |     data = this.store({ count: 0 });
 10 | 
 11 |     static styles = [`
 12 |       wc-counter { 
 13 |         border: solid 1px #bbb;
 14 |         display: block;
 15 |         padding: 16px;
 16 |         max-width: 300px;
 17 |         border-radius: 8px;
 18 |         margin: 16px 0;
 19 | 
 20 |         & p {
 21 |           margin: 0;
 22 |           margin-bottom: 8px;
 23 |         }
 24 |       }
 25 |     `];
 26 | 
 27 |     render() {
 28 |       const t = create('div', { innerHTML: `<p>Count: ${this.data.count}</p>`, title: 'Not shadowed counter' });
 29 |       t.append(create('button', { textContent: 'Dec', onclick: () => this.data.count--, style: 'margin-right: 8px' }));
 30 |       t.append(create('button', { textContent: 'Inc', onclick: () => this.data.count++ }));
 31 |       return t;
 32 |     }
 33 |   }).expose('wc-counter');
 34 |   
 35 |   const $counter = document.createElement('wc-counter');
 36 |   $t.assert($counter);
 37 | 
 38 |   $t.assert('Checks the component initial state', () => {
 39 |     return $counter.querySelector('p').textContent === 'Count: 0';
 40 |   });
 41 | 
 42 |   $t.assert('Checks the component reactive state (count +)', () => {
 43 |     $counter.querySelector('button:last-child').click();    
 44 |     return $counter.querySelector('p').textContent === 'Count: 1';
 45 |   });
 46 |   
 47 |   $t.assert('Checks the component reactive state (count -)', () => {
 48 |     $counter.querySelector('button').click();
 49 |     return $counter.querySelector('p').textContent === 'Count: 0';
 50 |   });
 51 | });
 52 | 
 53 | $t.it('Check Component API behavior (Shadowed)', () => {
 54 |   const create = (tag, attrs = {}) => Object.assign(document.createElement(tag), attrs);
 55 | 
 56 |   (class WCCounter extends WC {
 57 |     data = this.store({ count: 0 });
 58 | 
 59 |     static styles = [`
 60 |       :host { 
 61 |         border: solid 1px #bbb;
 62 |         display: block;
 63 |         padding: 16px;
 64 |         max-width: 300px;
 65 |         border-radius: 8px;
 66 |         margin: 16px 0;
 67 |       }
 68 | 
 69 |       :host p {
 70 |         margin: 0;
 71 |         margin-bottom: 8px;
 72 |       }
 73 |     `];
 74 | 
 75 |     render() {
 76 |       const t = create('div', { innerHTML: `<p>Count: ${this.data.count}</p>`, title: 'Shadowed counter' });
 77 |       t.append(create('button', { textContent: 'Dec', onclick: () => this.data.count--, style: 'margin-right: 8px' }));
 78 |       t.append(create('button', { textContent: 'Inc', onclick: () => this.data.count++ }));
 79 |       return t;
 80 |     }
 81 |   }).expose('wc-counter-shadowed', {
 82 |     shadow: { mode: 'open' }
 83 |   });
 84 |   
 85 |   const $counter = document.createElement('wc-counter-shadowed');
 86 |   $t.assert($counter);
 87 | 
 88 |   $t.assert('Checks the component initial state', () => {
 89 |     return $counter.shadowRoot.querySelector('p').textContent === 'Count: 0';
 90 |   });
 91 | 
 92 |   $t.assert('Checks the component reactive state (count +)', () => {
 93 |     $counter.shadowRoot.querySelector('button:last-child').click();    
 94 |     return $counter.shadowRoot.querySelector('p').textContent === 'Count: 1';
 95 |   });
 96 |   
 97 |   $t.assert('Checks the component reactive state (count -)', () => {
 98 |     $counter.shadowRoot.querySelector('button').click();
 99 |     return $counter.shadowRoot.querySelector('p').textContent === 'Count: 0';
100 |   });
101 | 
102 |   $t.assert('Special Attribute shadow: Component initialized with [shadow] attribute must be shadowed', () => {
103 |     const content = 'Testing shadow special ATTR';
104 | 
105 |     (class WCTestShadowAttr extends WC {
106 |       static styles = [`
107 |         :host {
108 |           border: solid 1px #bbb;
109 |           display: block;
110 |           padding: 16px;
111 |           max-width: 300px;
112 |           border-radius: 8px;
113 |           margin: 16px 0;
114 |         }
115 |       `];
116 |   
117 |       render() {
118 |         return content;
119 |       };
120 |     }).expose('wc-test-shadow-attr');
121 |   
122 |     const $wcTestShadowAttr = document.createElement('wc-test-shadow-attr');
123 |     $wcTestShadowAttr.setAttribute('shadow', 'open');
124 |     $t.assert($wcTestShadowAttr);
125 |   
126 |     const result = (
127 |       $wcTestShadowAttr.getAttribute('shadow') === 'open' &&
128 |       $wcTestShadowAttr.shadowRoot &&
129 |       $wcTestShadowAttr.shadowRoot.textContent === content
130 |     );
131 | 
132 |     $wcTestShadowAttr.remove();
133 |     return result;
134 |   });
135 | });
136 | 


--------------------------------------------------------------------------------
/test/browser/tester/index.mjs:
--------------------------------------------------------------------------------
 1 | export class Tester {
 2 |   constructor(options = {}) {
 3 |     this.$output = document.querySelector(options.output || '#tester-output');
 4 |     this.style();
 5 |   }
 6 | 
 7 |   style() {
 8 |     if (!document.querySelector('#tester-style')) {
 9 |       const style = Object.assign(document.createElement('style'), {
10 |         id: 'tester-style',
11 |         
12 |         innerHTML: `
13 |           #tester-output {
14 |             box-sizing: border-box;
15 |           }
16 | 
17 |           #tester-output * {
18 |             box-sizing: border-box;
19 |           }
20 | 
21 |           #tester-output > span {
22 |             display: block;
23 |             font-weight: 700;
24 |           }
25 | 
26 |           #tester-output .tester-output-info {
27 |             color: #555555;
28 |           }
29 | 
30 |           #tester-output .tester-output-success {
31 |             color: #097969;
32 |           }
33 | 
34 |           #tester-output .tester-output-error {
35 |             color: #C70039
36 |           }
37 | 
38 |           #tester-output p:empty {
39 |             display: none;
40 |           }
41 |         `
42 |       });
43 | 
44 |       document.head.append(style);
45 |     }
46 |   }
47 | 
48 |   log(msg, level = 'info') {
49 |     const msgElement = Object.assign(document.createElement('span'), {
50 |       classList: `tester-output-${level}`,
51 |       innerHTML: msg
52 |     });
53 | 
54 |     this.$output.append(msgElement);
55 |     return msgElement;
56 |   }
57 |   
58 |   it(msg, cb) {
59 |     this.log('<hr/>')
60 |     this.log(`<h2>${msg}</h2>`);
61 | 
62 |     try {
63 |       cb && cb();
64 |     } catch(error) {
65 |       this.log(error, 'error');
66 |     }
67 |   }
68 | 
69 |   async assert(msg, cb) {
70 |     let result;
71 |     let holder = this.log('<p></p>');
72 | 
73 |     if (typeof msg !== 'string') {
74 |       holder.append(msg);
75 |       return;
76 |     }
77 | 
78 |     try {
79 |       result = await cb();
80 |     } catch(error) {
81 |       this.log(error, 'error');
82 |     }
83 | 
84 |     const emoji = result === true ? '✅' : '❌';
85 |     const level = result ? 'success' : 'error';
86 | 
87 |     holder.innerHTML = `${emoji} ${msg}`;
88 |     holder.setAttribute('class', `tester-output-${level}`);
89 |   }
90 | }


--------------------------------------------------------------------------------
/test/modules/index/checker.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (WC, wcwc, msg = '') {
 2 |   try {
 3 |     console.log(msg);
 4 |   
 5 |     if (!WC) {
 6 |       error('WCWC must export the WC class as "export class WC {...}" from src/index.ts');
 7 |     }
 8 |   
 9 |     if (!wcwc) {
10 |       error('WCWC must export a member called wcwc as "export const wcwc = { WC }" from src/index.ts for browser compatibility');
11 |     }
12 |   
13 |     if (!wcwc.WC) {
14 |       error('The { wcwc } exported member from src/index.ts must contain the WC class: "export const wcwc = { WC }"');
15 |     }
16 |   
17 |     if (wcwc.WC !== WC ) {
18 |       error('The "wcwc.WC" and "WC" objects must be the same WC class on src/index.ts');
19 |     }
20 |   
21 |     console.log('Done.\n')
22 |   } catch (error) {
23 |     console.error(error);
24 |   }
25 | }


--------------------------------------------------------------------------------
/test/modules/index/test.cjs:
--------------------------------------------------------------------------------
1 | const { WC, wcwc } = require('../../../lib/index.js');
2 | const check = require('./checker.js');
3 | 
4 | check(WC, wcwc, '\nTesting if WCWC is correctly exposed as a EcmaScript Module.');


--------------------------------------------------------------------------------
/test/modules/index/test.mjs:
--------------------------------------------------------------------------------
1 | import WCWC from '../../../lib/index.js';
2 | import check from './checker.js';
3 | const { WC, wcwc } = WCWC;
4 | 
5 | check(WC, wcwc, '\nTesting if WCWC is correctly exposed as a CommonJS Module.');


--------------------------------------------------------------------------------
/test/modules/jsx/checker.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (jsx, h, Fragment, msg = '') {
 2 |   try {
 3 |     console.log(msg);
 4 |   
 5 |     if (!h) {
 6 |       error('Module "jsx" must export an { h } function');
 7 |     }
 8 |   
 9 |     if (!Fragment) {
10 |       error('Module "jsx" must export an { Fragment } function');
11 |     }
12 |   
13 |     if (!jsx.h) {
14 |       error('The { jsx } exported member from src/jsx.ts must contain the { h } function');
15 |     }
16 |   
17 |     if (!jsx.Fragment) {
18 |       error('The { jsx } exported member from src/jsx.ts must contain the { Fragment } function');
19 |     }
20 |   
21 |     console.log('Done.\n')
22 |   } catch (error) {
23 |     console.error(error);
24 |   }
25 | }


--------------------------------------------------------------------------------
/test/modules/jsx/test.cjs:
--------------------------------------------------------------------------------
1 | const { jsx, h, Fragment } = require('../../../lib/jsx.js');
2 | const check = require('./checker.js');
3 | 
4 | check(jsx, h, Fragment, '\nTesting if { jsx, h, Fragment } are correctly exposed as a EcmaScript Module.');


--------------------------------------------------------------------------------
/test/modules/jsx/test.mjs:
--------------------------------------------------------------------------------
1 | import JSX from '../../../lib/jsx.js';
2 | const { jsx, h, Fragment } = JSX;
3 | import check from './checker.js';
4 | 
5 | check(jsx, h, Fragment, '\nTesting if { jsx, h, Fragment } are correctly exposed as a CommonJS Module.');


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [ "src/index.ts", "src/types.ts" ],
 3 |   "exclude": [ "node_modules" ],
 4 | 
 5 |   "compilerOptions": {
 6 |     "noEmit": false,
 7 |     "declaration": true,
 8 |     "declarationMap": true,
 9 |     "declarationDir": "lib/d.ts/",
10 |     "module": "ES2015",
11 |     "target": "ES2015",
12 |     "sourceMap": true,
13 |     "outDir": "lib",
14 |     "moduleResolution": "node",
15 |     "removeComments": true,
16 |     "allowUnreachableCode": false,
17 |     "allowSyntheticDefaultImports": true,
18 |     "alwaysStrict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "lib": [ "es5", "dom" ],
22 |     "strict": true,
23 |     "esModuleInterop": true,
24 |     "forceConsistentCasingInFileNames": true    
25 |   }
26 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const TerserPlugin = require('terser-webpack-plugin');
 3 | 
 4 | module.exports = (_env, argv) => {
 5 |   const { mode } = argv;
 6 | 
 7 |   const config = {
 8 |     mode,
 9 |     target: 'web',
10 |     entry: {
11 |       jsx: path.resolve('src', 'jsx.ts'),
12 |       index: path.resolve('src', 'index.ts')
13 |     },
14 |     resolve: {
15 |       extensions: ['.ts', '.tsx', '.js']
16 |     },
17 |     module: {
18 |       rules: [
19 |         {
20 |           test: /\.tsx?$/,
21 |           exclude: /(node_modules)/,
22 |           use: {  
23 |             loader: 'ts-loader'
24 |           }
25 |         },
26 |       ]
27 |     },
28 |     output: {
29 |       filename: `[name].js`,
30 |       path: path.resolve(__dirname, 'lib'),
31 |       globalObject: 'globalThis',
32 |       library: {
33 |         type: 'umd'
34 |       }
35 |     }
36 |   }
37 | 
38 |   if (mode === 'production') {
39 |     config.optimization = {
40 |       minimize: true,
41 |       minimizer: [ new TerserPlugin() ]    
42 |     }
43 |   }
44 | 
45 |   if (mode === 'development') {
46 |     Object.assign(config, {
47 |       devtool: 'inline-source-map',
48 |       
49 |       devServer: {
50 |         port: 9000,
51 |         static: {
52 |           directory: path.join(__dirname, 'test', 'browser'),
53 |         }
54 |       }    
55 |     });
56 |   }
57 |   
58 |   return config;
59 | }


--------------------------------------------------------------------------------