redgin 0.1.18 → 0.2.1

package/README.md

@@ -1,153 +1,226 @@
+[![NPM](https://nodei.co/npm/redgin.svg?style=flat&data=v,d&color=red)](https://nodei.co/npm/redgin/)
+
 # RedGin
-# ~5.3kb Simplified library for building [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), works on Vanilla JS / all JS framework
 
-* Use Javascript [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for Template syntax
-* Rerender element with [`watch`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)  
-* Create getter/setters with [`getset`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)   
-* Create Property reflection with [`propReflect`](https://stackblitz.com/edit/typescript-hlms7u?file=index.html)
-* Create Inline Events with [`event`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)   
-* Create custom events with [`emit`](https://stackblitz.com/edit/redgin-childtoparent?file=index.ts) 
-* Inject Global Styles with [`injectStyles`](https://stackblitz.com/edit/redgin-bootstrap?file=index.ts)
-* [Support Typescript](https://stackblitz.com/edit/typescript-ue61k6?file=index.ts)
+A lightweight (~5.3kb) library that solves the pain points of native Web Components. RedGin offers fine-grained reactivity, surgical updates, and intuitive APIs - making Web Components actually enjoyable to build.
 
+## Why RedGin?
 
-## Install
+Native Web Components are powerful but come with friction:
 
-### Plug & Play, Import directly from cdn
+| Pain Point | Native Web Components | RedGin |
+|------------|----------------------|--------|
+| **Boilerplate** | Manual lifecycle callbacks, attributeChangedCallback, getters/setters | Zero boilerplate with `getset` and `propReflect` |
+| **Reactivity** | Manual observation with `attributeChangedCallback` | Automatic reactivity with `watch`, `s()`, and fine-grained updates |
+| **Template Updates** | Manual DOM manipulation | Surgical updates - only changed parts re-render |
+| **Attribute Reflection** | Manual sync between properties and attributes | Automatic with `propReflect` |
+| **Event Binding** | `addEventListener` boilerplate | Inline events with `on()` |
+| **Style Sharing** | Duplicated styles per component | Global `shareStyle` injection |
+| **Performance** | Full re-renders on any change | Only changed elements update |
+| **TypeScript** | Complex typing for custom elements | First-class TypeScript support |
 
-```js
-// latest 
-import { Redgin } from 'https://cdn.jsdelivr.net/npm/redgin@latest/dist/redgin.min.js'
+## Core Philosophy
 
-// or specific version
-import { RedGin } from 'https://cdn.jsdelivr.net/npm/redgin@0.1.18/dist/redgin.min.js'
+RedGin is built around **surgical updates** - only the elements that need to change, change. No virtual DOM, no heavy diffing, just precise, targeted updates to your components.
 
-```
+## Key Features
 
-### Or Install using NPM
+- **🎯 Surgical Rendering**: Update only what changes - perfect for large lists
+- **📝 Template Literals**: Write components using familiar JS template syntax
+- **⚡️ Fine-grained Reactivity**: Multiple reactivity patterns (`watch`, `s()`, `getset`, `propReflect`)
+- **🔗 Attribute Binding**: Smart `attr()` helper for dynamic attributes
+- **🔄 Property Reflection**: Sync properties with attributes using `propReflect`
+- **📊 Reactive Getters/Setters**: Create reactive state with `getset`
+- **🎨 Style Management**: Global style injection with `shareStyle` and scoped styles with `css`
+- **📘 TypeScript Ready**: Full type safety and IntelliSense
 
-```js
-npm i redgin   
+## Installation
+
+### Via npm
+```bash
+npm i redgin
 ```
 
-#### then import the library, helpers
+## Via CDN
 
 ```js
-import { Redgin, propReflect, getset, watch, event, emit, html, css } from 'redgin'
+<script type="module" src="https://cdn.jsdelivr.net/npm/redgin@latest/dist/redgin.min.js"></script>
 ```
 
 
-## How to use?
-### Inline Events
-it uses <code>event</code> directive to create event listener behind the scene and automatically clear once the component is remove from DOM
+## Quick Start
+
 ```js
-class Event extends RedGin { 
+import { RedGin, getset, on, html } from 'redgin';
+
+class Counter extends RedGin {
+  count = getset(0);
+
   render() {
-    return html`<button 
-                  ${ event('click', () => alert('Click Me') )} 
-                >Submit</button>`
-  } 
+    return html`
+      <button ${on('click', () => this.count++)}>
+        Count: ${this.count}
+      </button>
+    `;
+  }
 }
-customElements.define('sample-event', Event);
-```
 
-### List Render (Reactive) 
-* its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
-* its uses <code>watch</code> directives to rerender inside html when value change
-```js
-class Loop extends RedGin {
-  arr = propReflect([1, 2, 3])
-  static observedAttributes = ['arr'] 
-
-  render() {    
-    return html`<ul> ${ watch(['arr'], () => 
-                        this.arr.map( e => `Number: ${e}`) 
-                       ).join('') 
-                      } 
-                </ul>`
-    } 
-}
-customElements.define('sample-loop', Loop);
+customElements.define('my-counter', Counter);
 ```
 
-### IF condition (Reactive)
-* its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
-* its uses <code>watch</code> directives to rerender inside html when value change
+## API Reference
+
+
+### Core Helpers
+
+| Helper | Purpose | Example |
+| :--- | :--- | :--- |
+| `getset(initial)` | Creates reactive property with getter/setter | `count = getset(0)` |
+| `propReflect(initial)` | Reactive property that reflects to attribute | `theme = propReflect('light')` |
+| `watch(deps, callback)` | Fine-grained control - rerenders when specified dependencies change | `${watch(['count', 'theme'], () => html`<div>...</div>`)}` |
+| `s(callback)` | Shorthand for reactive value binding | `${s(() => this.count)}` |
+| `attr(name, callback)` | Surgical attribute binding | `${attr('disabled', () => !this.editable)}` |
+| `on(event, handler)` | Event listener binding | `${on('click', () => this.save())}` |
+| `html` | Template literal tag for HTML | `html`<div>Hello</div>`` |
+
+### Style Helpers
+
+| Helper | Purpose | Example |
+| :--- | :--- | :--- |
+| `css` | Template literal tag for component-scoped styles | `styles = [css`.card { padding: 1rem; }`]` |
+| `shareStyle(styles)` | Injects global styles across all components | `shareStyle(css:host { --brand: blue; })` |
+
+
+## Lifecycle Methods
+
+* onInit() - After first render
+* onDoUpdate() - After data sync
+* onUpdated() - After every attribute change/requestUpdate
+
+## Style Management Examples
+
+### Global Design System with shareStyle
+import { RedGin, shareStyle, css, html } from 'redgin';
+
+// Share Bootstrap globally (injected once, used everywhere)
+shareStyle('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">')
+
+// Share design tokens across all components
 ```js
-class If extends RedGin {
-  isDisable = propReflect(false)
-  static observedAttributes = ['is-disable']
+shareStyle(css`
+  :host {
+    --brand-primary: #007bff;
+    --brand-success: #28a745;
+    --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  }
+  
+  .rg-card {
+    border-radius: 8px;
+    box-shadow: var(--card-shadow);
+    transition: transform 0.2s;
+  }
+`);
+
+class ProductCard extends RedGin {
+  // Component-specific styles (merged with shared styles)
+  styles = [css`
+    .local-price { color: var(--brand-success); font-weight: bold; }
+  `]
 
   render() {
-    return `
-        ${ watch(['isDisable'], () => html`
-                <button
-                    ${ this.isDisable ? `disable` : ``}
-                > Submit</button>`
-         )
-        }
-    `
+    // Bootstrap classes work without local import!
+    return html`
+      <div class="rg-card p-3">
+        <div class="local-price">$120.00</div>
+        <button class="btn btn-primary">Buy Now</button>
+      </div>
+    `;
   }
 }
-customElements.define('sample-if', If);
 ```
 
-### Render Obj (Reactive)
-* recommend to use watch directive when rendering obj
-```js
-obj = getset({
-    id:1, 
-    name:'John Doe'
- }) //for complex just define a setter/getter manually?
+## Reactivity Patterns: watch vs s()
 
-  
-render() {       
-  return `${ watch(['obj'], () => 
-              html`<div>${ this.obj.id }</div>
-                   <div>${ this.obj.name }</div>` 
-           ) }`
+### RedGin offers two complementary reactivity patterns:
+
+## s() - Smart Auto-detection
+```js
+// Automatically tracks dependencies
+render() {
+  return html`
+    <div>${s(() => this.count)}</div>
+    <div>${s(() => this.theme)}</div>
+  `;
 }
 ```
 
-### Render List of Obj (Reactive)
+## watch - Explicit Control
 ```js
-onInit() {
-  this.obj = [{id:1, name:'John Doe'}]
-}
-  
-render() {       
-  return `${ watch(['obj'], () => this.obj.map( (e: any) => 
-               html`<span>ID:${e.id} Name:${e.name}</span>`)
-            ) }`
+// Fine-grained control over dependencies
+render() {
+  return html`
+    ${watch(['count', 'theme'], () => html`
+      <div class="${this.theme}">
+        Count: ${this.count}
+      </div>
+    `)}
+  `;
 }
 ```
 
-## For VSCode Syntax Highlight template literals
 
-### Install extension [inline-html](https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html)
+## Examples
 
-```js
-    render() {
-      return html`<div>with syntax highlighted</div>`
-    }
-```
+Check out these live examples demonstrating RedGin's capabilities:
 
+### Basic Examples
+* [Simple Counter](https://github.com/josnin/redgin/tree/Dev/samples) - Getting started with RedGin
+* [Two-way Data Binding](https://github.com/josnin/redgin/tree/Dev/samples) - Using getset and events
+* [Todo App](https://github.com/josnin/redgin/tree/Dev/samples) - Classic todo example
 
 
-## Reference
-https://web.dev/custom-elements-best-practices/
+### Style Examples
+
+* [Bootstrap Integration](https://github.com/josnin/redgin/tree/Dev/samples) - Using shareStyle with CSS frameworks
+* [Design Tokens](https://github.com/josnin/redgin/tree/Dev/samples) - Global theme variables
+* [Scoped Styles](https://github.com/josnin/redgin/tree/Dev/samples) - Component-specific CSS
 
-https://web.dev/shadowdom-v1/
 
+### Advanced Patterns
+* [Surgical List Updates (1,000+ items)](https://github.com/josnin/redgin/tree/Dev/samples) - Only updated rows re-render
+* [E-commerce Application](https://github.com/josnin/redgin/tree/Dev/samples) - Cart, checkout, and async operations
+* [CRM Dashboard](https://github.com/josnin/redgin/tree/Dev/samples) - Multi-view with modals and pipeline
+* [Parent-Child Communication](https://github.com/josnin/redgin/tree/Dev/samples) - Custom events and props
 
-## How to run development server? 
+### Integration Examples
+
+* [TypeScript Support](https://github.com/josnin/redgin/tree/Dev/samples) - Full type safety
+* [With Bootstrap](https://github.com/josnin/redgin/tree/Dev/samples) - Using CSS frameworks
+* [Property Reflection](https://github.com/josnin/redgin/tree/Dev/samples) - Syncing props with attributes
+
+## Performance
+
+* Surgical Updates: Only changed elements re-render
+* Bundle Size: ~5.3kb minified + gzipped
+* Memory: Zero virtual DOM overhead
+* Style Injection: Global styles shared once, not duplicated per component
+
+## Contributing
+
+We welcome contributions!
 ```
-git clone git@github.com:josnin/redgin.git 
-cd ~/Documents/redgin/
+git clone https://github.com/josnin/redgin.git
+cd redgin
 npm install
 npm run dev
 ```
 
+## Reference
+https://web.dev/custom-elements-best-practices/
+
+https://web.dev/shadowdom-v1/
+
+
 ## Help
 
 Need help? Open an issue in: [ISSUES](https://github.com/josnin/redgin/issues)
@@ -156,3 +229,4 @@ Need help? Open an issue in: [ISSUES](https://github.com/josnin/redgin/issues)
 ## Contributing
 Want to improve and add feature? Fork the repo, add your changes and send a pull request.
 
+

package/dist/directives/attr.d.ts

@@ -0,0 +1,11 @@
+/**
+ * watchProp: Specifically for component attributes/props.
+ * Returns a marker string that the RedGin core parses as a "Directive on a Tag".
+ */
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+type WatchExpression<T = any> = (this: T) => any;
+export declare const attr: (attrName: string, exp: WatchExpression) => string;
+export {};

package/dist/directives/events.d.ts

@@ -1,4 +1,16 @@
-export declare const event: (type: string, fn: any) => string;
+export type EventHandler = (this: any, e: any) => any;
+export declare const event: (type: string, fn: EventHandler) => string;
+/**
+ * Alias for 'event'. Moving forward, use 'on' for a more
+ * declarative feel (e.g., on('click', ...))
+ */
+export declare const on: (type: string, fn: EventHandler) => string;
 export declare function emit(this: any, customEvent: string, value: any, options?: CustomEvent): void;
+/**
+ * Attach all events for this component
+ */
 export declare function applyEventListeners(this: any): void;
+/**
+ * Remove all events for this component
+ */
 export declare function removeEventListeners(this: any): void;

package/dist/directives/index.d.ts

@@ -1,3 +1,5 @@
 export * from './watch';
+export * from './stream';
+export * from './attr';
 export * from './events';
 export * from './directives';

package/dist/directives/stream.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+type WatchExpression<T = any> = (this: T) => any;
+/**
+ * The 's' (stream) utility: Provides "Auto-Tracked" reactivity.
+ *
+ * Unlike standard 'watch', it treats the expression as a dynamic stream.
+ * It surgically extracts dependencies via regex from the function source,
+ * removing the need for manual reference arrays.
+ *
+ * It creates a placeholder <in-watch> and registers it to the component
+ * instance for O(1) targeted updates.
+ */
+export declare const s: (exp: WatchExpression) => string;
+export {};

package/dist/directives/watch.d.ts

@@ -1,2 +1,10 @@
-export declare const watch: (ref: string[], exp: any) => string;
-export declare function watchFn(this: any, _prop: string): boolean;
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+export type WatchExpression<T = any> = (this: T) => any;
+/**
+ * The 'watch' utility used inside render().
+ * It creates a placeholder and registers dependencies to the current component instance.
+ */
+export declare const watch: (refs: string[], exp?: WatchExpression) => string;

package/dist/props/getset.d.ts

@@ -1,5 +1,13 @@
+/**
+ * Options for the getset behavior.
+ * forWatch: determines if changing this property should trigger a DOM update.
+ */
 interface IGetSet {
     forWatch?: boolean;
 }
+/**
+ * Factory function to mark a property as reactive state.
+ * Usage: myData = getset(0)
+ */
 export declare function getset<T>(value: T, options?: IGetSet): T;
 export {};

package/dist/props/propReflect.d.ts

@@ -1,8 +1,16 @@
+/**
+ * Interface for propReflect options.
+ * Allows custom conversion logic and explicit type declarations.
+ */
 interface IPropReflect<T = any> {
     serializerFn?: (this: any, prop: string, type: any, _default: T) => T;
     deserializerFn?: (this: any, prop: string, type: any, _default: T, value: T) => void;
     type?: any;
     name?: string;
 }
+/**
+ * Marks a property for reflection.
+ * Usage: myProp = propReflect(false)
+ */
 export declare function propReflect<T>(value: T, options?: IPropReflect<T>): T;
 export {};

package/dist/redgin.d.ts

@@ -1,25 +1,88 @@
-export { event, emit, watch, customDirectives } from './directives/index';
+import { WatchExpression } from './directives/index';
+export { on, event, // to obsolete
+emit, s, watch, attr, customDirectives, } from './directives/index';
 export { getset, propReflect, customPropsBehavior } from './props/index';
-export declare const attachShadow: ShadowRootInit;
-export declare let injectStyles: string[];
-export declare let defaultStyles: string[];
-export declare const html: (raw: TemplateStringsArray, ...values: any[]) => string;
-export declare const css: (raw: TemplateStringsArray, ...values: any[]) => string;
+export declare const shared: string[];
+export declare const defaultStyle = ":host{display:block}";
+/**
+ * Handles style injection with support for adoptedStyleSheets (faster memory sharing)
+ * and standard <style>/<link> fallbacks.
+ */
+export declare function _applyStyle(styles: string | string[], shadowRoot?: ShadowRoot): string;
+/**
+ * Add global styles that will be applied to every RedGin component
+ */
+export declare function shareStyle(style: string): void;
+/**
+ * THE SURGICAL FLATTENER:
+ * 1. Recursively flattens arrays.
+ * 2. Joins with EMPTY STRING '' (kills the comma). --> Note: watcher do this
+ * 3. Filters out 'dead' values (null, undefined, false).
+ */
+export declare const _f: (v: any) => string;
+export declare const html: (raw: TemplateStringsArray, ...vals: any[]) => string;
+export declare const safe: (val: any) => string;
+export declare const css: (raw: TemplateStringsArray, ...vals: any[]) => string;
 export declare class RedGin extends HTMLElement {
+    private _pending;
+    private _changed;
+    private _connected;
+    private _reactiveCache;
+    /**
+     * INSTANCE-LEVEL CACHING
+     * These Maps allow O(1) lookups for data-binding.
+     * We store direct references to HTMLElements so we never use querySelector during updates.
+     */
+    _watchRegistry: Map<string, Map<string, WatchExpression<any>>>;
+    _idToProps: Map<string, string[]>;
+    _watchElements: Map<string, HTMLElement>;
+    _attrRegistry: Map<string, Map<string, WatchExpression<any>>>;
+    _attrElements: Map<string, HTMLElement>;
+    _eventElements: Map<string, HTMLElement>;
+    styles: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(prop: any, oldValue: any, newValue: any): void;
     disconnectedCallback(): void;
-    private updateContents;
-    private setEventListeners;
-    private setPropsBehavior;
-    getStyles(styles: string[]): string;
-    private _onInit;
-    private _onDoUpdate;
-    private _onUpdated;
+    attributeChangedCallback(prop: string, oldV: any, newV: any): void;
+    /**
+     * Schedules a DOM update using a Microtask.
+     * If 5 properties change at once, only 1 DOM update is triggered.
+     */
+    protected requestUpdate(prop: string): void;
+    /**
+     * The "Tick" where DOM updates actually happen.
+     */
+    private _flush;
+    /**
+     * Initial setup: Sets up props, applies styles, renders HTML, and caches DOM nodes.
+     */
+    private _init;
+    private _collectElements;
+    /**
+     * Garbage collection: Removes watcher references when an <in-watch> element is removed.
+     */
+    _cleanupWatch(uniqId: string): void;
+    /**
+     * First-time synchronization of property values to DOM.
+     */
+    private _sync;
+    /**
+     * Core update logic: Calls registered directives (like watchFn)
+     */
+    private _update;
+    /**
+     * Lifecycle hook triggered after DOM updates are finished.
+     */
+    private _afterUpdate;
+    private _afterUpdateNoDomChange;
+    /**
+     * Identifies all class properties to be made reactive.
+     * Caches the list to avoid repeat CPU-heavy property reflection.
+     */
+    private _setupProps;
+    private _reactiveProps;
     onInit(): void;
     onDoUpdate(): void;
     onUpdated(): void;
-    styles: string[];
     render(): string;
 }

package/dist/redgin.min.js

@@ -1,13 +1,2 @@
-var O=Object.defineProperty;var $=(s,t,e)=>t in s?O(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var f=(s,t,e)=>($(s,typeof t!="symbol"?t+"":t,e),e);var d=()=>crypto.randomUUID().split("-")[0],v=s=>s.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),u=s=>s.replace(/-./g,t=>t[1].toUpperCase());function x(s){let t=[];for(let e of h.reg)t.push(e.call(this,s));return t.filter(e=>e===!0).length>0}var y=class{static define(t){y.reg.push(t)}},h=y;f(h,"reg",[]);var p={},m=class extends HTMLElement{};customElements.get("in-watch")||customElements.define("in-watch",m);var L=(s,t)=>{let e=document.createElement("in-watch"),o=d();for(let r of s)Object.hasOwn(p,r)||(p[r]={}),p[r][o]=t;return e.dataset.watch__=o,e.outerHTML};function _(s){let t=u(s),e=!1;if(Object.hasOwn(p,t)){for(let o of Object.keys(p[t]))if(this.shadowRoot){let r=this.shadowRoot.querySelector(`[data-watch__="${o}"]`);r&&(r.innerHTML=p[t][o]?p[t][o].call(this):this[t],e=!0)}}return e}h.define(_);var S=[];var C=(s,t)=>{let e=d();return S.push([s,t,e]),`data-evt__=${e}`};function I(s,t,e){let o={detail:t,composed:!0},r=new CustomEvent(s,{...o,...e});this.shadowRoot&&this.shadowRoot.dispatchEvent(r)}function E(s){for(let t of S){let[e,o,r]=t;if(this.shadowRoot){let i=this.shadowRoot.querySelector(`[data-evt__="${r}"]`);i&&(s===0?i.addEventListener(e,o):i.removeEventListener(e,o))}}}function R(){E.call(this,0)}function T(){E.call(this,1)}function U(s,t){for(let e of c.reg)e.call(this,s,t)}var b=class{static define(t){b.reg.push(t)}},c=b;f(c,"reg",[]);var D=["^class$","^style$","^className$","^classList$","^id$","^dataset$","^data-","^aria-"],g=["disabled"],P=s=>{let t=!0;for(let e of D){let o=new RegExp(e,"g");if(s.match(o)){t=!1,console.error(`Please remove attribute '${s}' in the observedAttributes, 
-          DOM already provided built-in props reflection for this attribute.`);break}}return t};function j(s,t){if(t===void 0||t?.name!="propReflect")return;let{type:e,value:o,serializerFn:r,deserializerFn:i}=t,l=this.constructor.observedAttributes,w=u(s),n=v(s);if(l===void 0||!l.includes(n)){console.error(`Unable to apply propReflect '${w}' for attribute '${n}', 
-        Please add '${n}' in the observedAttributes of ${this.constructor.name} component`);return}!P(n)||Object.defineProperty(this,w,{configurable:!0,set(a){if(i)return i.call(this,n,e,o,a);(e===Boolean||typeof a=="boolean"||g.includes(n))&&a===!0?this.setAttribute(n,""):(e===Boolean||g.includes(n))&&a===!1?this.removeAttribute(n):([Object,Array].includes(e)||["object","array"].includes(typeof a))&&a?this.setAttribute(n,JSON.stringify(a)):([String,Number].includes(e)||["string","number"].includes(typeof a))&&a?this.setAttribute(n,a):this.removeAttribute(n)},get(){if(r)return r.call(this,n,e,o);if(n in g||e===Boolean||typeof o=="boolean")return this.hasAttribute(n);if(([String,Array,Object].includes(e)||["number","string","array","object"].includes(typeof o))&&!this.hasAttribute(n))return o;if((e===String||typeof o=="string")&&this.hasAttribute(n))return this.getAttribute(n);if((e===Number||typeof o=="number")&&this.hasAttribute(n))return Number(this.getAttribute(n));if(([Array,Object].includes(e)||["array","object"].includes(typeof o))&&this.hasAttribute(n))return JSON.parse(this.getAttribute(n))}})}function k(s,t){return{value:s,...t,name:"propReflect"}}c.define(j);function B(s,t){if(t===void 0||t?.name!="getset")return;let{value:e,forWatch:o}=t;this[`#${s}`]=e,Object.defineProperty(this,s,{configurable:!0,set(r){this[`#${s}`]=r,o&&this.updateContents(s)&&this._onUpdated()},get(){return this[`#${s}`]}})}function M(s,t){return{value:s,...{forWatch:!0},...t,name:"getset"}}c.define(B);var N={mode:"open",delegatesFocus:!0},q=[],F=[` /* Custom elements are display: inline by default, 
-     * so setting their width or height will have no effect 
-    */
-    :host { display: block; }
-  `],H=(s,...t)=>String.raw({raw:s},...t),bt=H,A=class extends HTMLElement{constructor(){super(),this.attachShadow(N)}connectedCallback(){this._onInit(),this._onDoUpdate()}attributeChangedCallback(t,e,o){if(e===o)return;this.updateContents(t)&&this._onUpdated()}disconnectedCallback(){T.call(this)}updateContents(t){return x.call(this,t)}setEventListeners(){R.call(this)}setPropsBehavior(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t){let o=this[e];U.call(this,e,o)}}getStyles(t){let e=[],o=[],r=this.shadowRoot?.adoptedStyleSheets;for(let i of t)if(i.startsWith("<link"))e.push(i);else if(i.startsWith("@import")||!r){let l=document.createElement("style");l.innerHTML=i,e.push(l.outerHTML)}else{let l=new CSSStyleSheet;l.replaceSync(i),o.push(l)}return this.shadowRoot&&o.length>0&&(this.shadowRoot.adoptedStyleSheets=[...this.shadowRoot.adoptedStyleSheets,...o]),e.join("")}_onInit(){this.setPropsBehavior(),this.shadowRoot&&(this.shadowRoot.innerHTML=`
-      ${this.getStyles(q)} 
-      ${this.getStyles(F)} 
-      ${this.getStyles(this.styles)} 
-      ${this.render()}
-      `),this.onInit()}_onDoUpdate(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t)this.updateContents(e)&&this._onUpdated();this.setEventListeners(),this.onDoUpdate()}_onUpdated(){this.setEventListeners(),this.onUpdated()}onInit(){}onDoUpdate(){}onUpdated(){}styles=[];render(){return""}};export{A as RedGin,N as attachShadow,bt as css,h as customDirectives,c as customPropsBehavior,F as defaultStyles,I as emit,C as event,M as getset,H as html,q as injectStyles,k as propReflect,L as watch};
+var U=Object.defineProperty;var k=(n,t,e)=>t in n?U(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var g=(n,t,e)=>(k(n,typeof t!="symbol"?t+"":t,e),e);function d(){return"id-"+Math.random().toString(16).slice(2)+"-"+Date.now()}var S=n=>n.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),u=n=>n.replace(/-./g,t=>t[1].toUpperCase());function T(n){let t=[];for(let e of p.reg)t.push(e.call(this,n));return t.filter(e=>e===!0).length>0}var m=class{static define(t){m.reg.push(t)}},p=m;g(p,"reg",[]);var q=(n,t)=>{let e=d(),s=window.__redgin_current_instance;if(s){for(let r=0;r<n.length;r++){let a=n[r],c=s._watchRegistry.get(a);c||(c=new Map,s._watchRegistry.set(a,c)),c.set(e,t)}s._idToProps.set(e,n)}return`<in-watch data-watch="${e}"></in-watch>`},y=class extends HTMLElement{disconnectedCallback(){let t=this.dataset.watch,s=this.getRootNode()?.host;t&&s&&s._cleanupWatch(t)}};customElements.get("in-watch")||customElements.define("in-watch",y);var A=n=>Array.isArray(n)?n.map(A).join(""):n===void 0?"":String(n);p.define(function(t){let e=u(t),s=this._watchRegistry.get(e);if(!s)return!1;let r=!1;for(let[a,c]of s){let i=this._watchElements.get(a);if((!i||!i.isConnected)&&(i=this.shadowRoot.querySelector(`[data-watch="${a}"]`),i&&this._watchElements.set(a,i)),i){let o=c?c.call(this):this[e],l=A(o);i.innerHTML!==String(l)&&(i.innerHTML=l,r=!0)}}return r});var I=n=>{let t=d(),e=window.__redgin_current_instance;if(e){let s=n.toString(),r=/this\.([a-zA-Z_$][\w$]*)/g,a,c=new Set;for(;(a=r.exec(s))!==null;){let i=a[1];e._reactiveCache?.includes(i)&&c.add(i)}for(let i of c){let o=e._watchRegistry.get(i);o||(o=new Map,e._watchRegistry.set(i,o)),o.set(t,n)}e._idToProps.set(t,Array.from(c))}return`<in-watch data-watch="${t}"></in-watch>`};var W=(n,t)=>{let e=d(),s=window.__redgin_current_instance;if(s){let r=t.toString(),a=/this\.([a-zA-Z_$][\w$]*)/g,c,i=new Set;for(;(c=a.exec(r))!==null;){let o=c[1];s._reactiveCache&&s._reactiveCache.includes(o)&&i.add(o)}for(let o of i){s._attrRegistry||(s._attrRegistry=new Map);let l=s._attrRegistry.get(o);l||(l=new Map,s._attrRegistry.set(o,l)),l.set(e,{attrName:n,exp:t})}}return`data-attr_${n}="${e}"`};p.define(function(t){let e=u(t),s=this._attrRegistry?.get(e);if(!s)return!1;let r=!1;for(let[a,c]of s){let i=this._attrElements.get(a);if((!i||!i.isConnected)&&(i=this.shadowRoot.querySelector(`[data-attr_${c.attrName}="${a}"]`),i&&this._attrElements.set(a,i)),i){let o=c.exp?c.exp.call(this):this[e],l=c.attrName;if(o===!1||o===null||o===void 0)i.hasAttribute(l)&&(i.removeAttribute(l),r=!0);else{let _=o===!0?"":String(o);i.getAttribute(l)!==_&&(i.setAttribute(l,_),r=!0)}}}return r});var $=(n,t)=>{let e=d(),s=window.__redgin_current_instance;return s&&(s._eventRegistry||(s._eventRegistry=new Map),s._eventRegistry.set(e,[n,t])),`data-evt__="${e}"`},L=$;function O(n,t,e){let s={detail:t,composed:!0},r=new CustomEvent(n,{...s,...e});this.shadowRoot&&this.shadowRoot.dispatchEvent(r)}function w(){if(!(!this._eventElements||!this._eventRegistry))for(let[n,t]of this._eventElements){let e=this._eventRegistry.get(n);if(!e)continue;let[s,r]=e;t.addEventListener(s,r)}}function C(){if(!(!this._eventElements||!this._eventRegistry))for(let[n,t]of this._eventElements){let e=this._eventRegistry.get(n);if(!e)continue;let[s,r]=e;t.removeEventListener(s,r)}}function P(n,t){for(let e of f.reg)e.call(this,n,t)}var b=class{static define(t){b.reg.push(t)}},f=b;g(f,"reg",[]);var D=["^class$","^style$","^className$","^classList$","^id$","^dataset$","^data-","^aria-","^hidden$","^tabindex$","^slot$","^title$","^contenteditable$","^draggable$","^spellcheck$"],F=D.map(n=>new RegExp(n)),j=new Set(["disabled","hidden","checked","selected","readonly","multiple"]),H=n=>{for(let t of F)if(t.test(n))return console.error(`Please remove attribute '${n}' from observedAttributes; browser already provides built-in reflection.`),!1;return!0};function z(n,t){if(!t||t.name!=="propReflect")return;let{type:e,value:s,serializerFn:r,deserializerFn:a}=t,c=this.constructor.observedAttributes,i=u(n),o=S(n);if(!c?.includes(o)){console.error(`propReflect '${i}' cannot map to '${o}'. Add '${o}' to observedAttributes of ${this.constructor.name}.`);return}if(!H(o))return;let l=e===Boolean||j.has(o)||typeof s=="boolean",_=e===Object||e===Array||["object","array"].includes(typeof s),R=e===String||e===Number||["string","number"].includes(typeof s);Object.defineProperty(this,i,{configurable:!0,set(h){if(a)return a.call(this,o,e,s,h);l?h?this.setAttribute(o,""):this.removeAttribute(o):_&&h!=null?this.setAttribute(o,JSON.stringify(h)):R&&h!=null?this.setAttribute(o,h):this.removeAttribute(o)},get(){if(r)return r.call(this,o,e,s);if(l)return this.hasAttribute(o);if(!this.hasAttribute(o))return s;if(_)try{return JSON.parse(this.getAttribute(o))}catch{return s}if(R){let h=this.getAttribute(o);return e===Number?Number(h):h}return this.getAttribute(o)}})}function B(n,t){return{value:n,...t,name:"propReflect"}}f.define(z);function G(n,t){if(t===void 0||t?.name!="getset")return;let{value:e,forWatch:s}=t,r=`#${n}`;this[r]=e,Object.defineProperty(this,n,{configurable:!0,set(a){this[r]!==a&&(this[r]=a,s&&this.requestUpdate(n))},get(){return this[r]}})}function K(n,t){return{value:n,...{forWatch:!0},...t,name:"getset"}}f.define(G);var M=new Map,E=[],Z=":host{display:block}";function v(n,t){let e=Array.isArray(n)?n:[n],s=[];if(!t)return e.join("");for(let r of e){if(r.startsWith("<link")){let a=r.match(/href="([^"]+)"/)?.[1];if(a&&!t.querySelector(`link[href="${a}"]`)){let c=document.createElement("div");c.innerHTML=r;let i=c.firstElementChild;i&&t.appendChild(i)}continue}if("adoptedStyleSheets"in t){let a=M.get(r);a||(a=new CSSStyleSheet,a.replaceSync(r),M.set(r,a)),t.adoptedStyleSheets=[...t.adoptedStyleSheets,a];continue}s.push(`<style>${r}</style>`)}return s.join("")}function Mt(n){E.includes(n)||E.push(n)}var x=n=>Array.isArray(n)?n.map(x).join(""):n===void 0?"":String(n),J=(n,...t)=>n.reduce((e,s,r)=>e+s+x(t[r]),""),V={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&apos;"},Nt=n=>x(n).replace(/[&<>"']/g,e=>V[e]),Ut=J,N=class extends HTMLElement{_pending=!1;_changed=new Set;_connected=!1;_reactiveCache=[];_watchRegistry=new Map;_idToProps=new Map;_watchElements=new Map;_attrRegistry=new Map;_attrElements=new Map;_eventElements=new Map;styles=[];constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this._connected||(this._connected=!0,this._init())}disconnectedCallback(){C.call(this)}attributeChangedCallback(t,e,s){e!==s&&this.requestUpdate(t)}requestUpdate(t){this._changed.add(t),!this._pending&&(this._pending=!0,queueMicrotask(()=>this._flush()))}_flush(){if(this._pending=!1,!this._changed.size)return;let t=Array.from(this._changed);this._changed.clear();let e=!1;window.__redgin_current_instance=this;for(let s of t)this._update(s)&&(e=!0);window.__redgin_current_instance=null,e?this._afterUpdate():this._afterUpdateNoDomChange()}_init(){this._setupProps(),window.__redgin_current_instance=this,this.shadowRoot&&(v(E,this.shadowRoot),v(Z,this.shadowRoot),v(this.styles,this.shadowRoot),this.shadowRoot.innerHTML+=this.render()),this._collectElements(),this.onInit(),this._sync(),window.__redgin_current_instance=null}_collectElements(t="all"){if(!this.shadowRoot)return;t==="all"&&(this._watchElements.clear(),this._attrElements.clear()),this._eventElements.clear();let e=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_ELEMENT,null),s;for(;s=e.nextNode();){let r=s.attributes;for(let a=0;a<r.length;a++){let{name:c,value:i}=r[a];c==="data-evt__"?this._eventElements.set(i,s):t==="all"&&(c==="data-watch"?this._watchElements.set(i,s):c.startsWith("data-attr__")&&this._attrElements.set(i,s))}}}_cleanupWatch(t){let e=this._idToProps.get(t);if(e){for(let s of e){let r=this._watchRegistry.get(s);r&&(r.delete(t),r.size||this._watchRegistry.delete(s))}this._idToProps.delete(t),this._watchElements.delete(t)}}_sync(){for(let t of this._reactiveProps())this._update(t);this._collectElements(),w.call(this),this.onDoUpdate()}_update(t){return T.call(this,t)}_afterUpdate(){this._collectElements("events"),w.call(this),this.onUpdated()}_afterUpdateNoDomChange(){this.onUpdated()}_setupProps(){if(!this._reactiveCache.length){let t=new Set(["styles","_pending","_changed","_connected"]);this._reactiveCache=Object.getOwnPropertyNames(this).filter(e=>!t.has(e))}for(let t of this._reactiveCache)P.call(this,t,this[t])}_reactiveProps(){return this._reactiveCache}onInit(){}onDoUpdate(){}onUpdated(){}render(){return""}};export{N as RedGin,v as _applyStyle,x as _f,W as attr,Ut as css,p as customDirectives,f as customPropsBehavior,Z as defaultStyle,O as emit,$ as event,K as getset,J as html,L as on,B as propReflect,I as s,Nt as safe,Mt as shareStyle,E as shared,q as watch};
 //# sourceMappingURL=redgin.min.js.map

package/dist/utils.d.ts

@@ -1,3 +1,3 @@
-export declare const getUniqID: () => string;
+export declare function getUniqID(): string;
 export declare const camelToKebab: (str: string) => string;
 export declare const kebabToCamel: (str: string) => string;

package/index.d.ts

@@ -0,0 +1,19 @@
+import './samples/sample-styles';
+import './samples/sample-binding';
+import './samples/sampleIf';
+import './samples/sample-nested';
+import './samples/sample-allevents';
+import './samples/ecommerce-app';
+import './samples/todo-catalog';
+import './samples/smart-list';
+import './samples/smart-update-list';
+import './samples/smart-pagination-list';
+import './samples/smart-sort-list';
+import './samples/xss-sandbox';
+import './samples/parentChild/parentChild';
+import './samples/childParent/cart-manager';
+import './samples/modal-app';
+import './samples/master-binding';
+import './samples/smart-grid';
+import './samples/crm-app';
+import './samples/check-search-list';

package/package.json

@@ -1,11 +1,39 @@
 {
   "name": "redgin",
-  "version": "0.1.18",
-  "description": "~5.3kb Simplified library for building Web Components, works on Vanilla JS / all JS framework",
+  "version": "0.2.1",
+   "description": "A lightweight (~5.3kb) library for building Web Components with surgical updates and fine-grained reactivity",
   "keywords": [
-    "redgin",
     "web components",
-    "custom elements"
+    "custom elements",
+    "reactive",
+    "lightweight",
+    "tiny",
+    "reactive web components",
+    "custom elements library",
+    "web components framework",
+    "shadow dom",
+    "vanilla js",
+    "no dependencies",
+    "reactive programming",
+    "fine-grained reactivity",
+    "surgical updates",
+    "template literals",
+    "UI library",
+    "component library",
+    "frontend",
+    "browser",
+    "javascript",
+    "typescript",
+    "reactive state",
+    "state management",
+    "reactive properties",
+    "attribute reflection",
+    "custom events",
+    "lifecycle hooks",
+    "SPA",
+    "single page application",
+    "micro frontend",
+    "framework agnostic"
   ],
   "main": "dist/redgin.min.js",
   "types": "dist/redgin.d.ts",
@@ -19,7 +47,7 @@
     "build": "npm run clean &&  tsc -w",
     "bundle": "npx esbuild --bundle src/redgin.js --minify --sourcemap --format=esm --outfile=dist/redgin.min.js --target=es2022 && npm run copy",
     "copy": "cp -rvf src/*.d.ts dist/. && cp -rfv src/directives/*.d.ts dist/directives/. && cp -rfv src/props/*.d.ts dist/props/.",
-    "dev": "node node_modules/vite/bin/vite.js"
+    "dev": "node node_modules/vite/bin/vite.js --host 0.0.0.0"
   },
   "repository": {
     "type": "git",
@@ -32,10 +60,10 @@
   },
   "homepage": "https://github.com/josnin/redgin#readme",
   "devDependencies": {
-    "@types/node": "^18.11.14",
+    "@types/node": "^25.2.3",
     "esbuild": "^0.16.4",
     "rimraf": "^4.1.2",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "vite": "^7.3.1"
   }
 }

package/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    allowedHosts: ['myfedora.local'] // . prefix allows subdomains
+  }
+}

package/dist/props/directives.d.ts

@@ -1,5 +0,0 @@
-export declare function applyDirectives(this: any, prop: string): boolean;
-export declare class customDirectives {
-    static reg: any;
-    static define(d: any): void;
-}

package/dist/props/events.d.ts

@@ -1,4 +0,0 @@
-export declare const event: (type: string, fn: any) => string;
-export declare function emit(this: any, customEvent: string, value: any, options?: CustomEvent): void;
-export declare function applyEventListeners(this: any): void;
-export declare function removeEventListeners(this: any): void;

package/dist/props/watch.d.ts

@@ -1,2 +0,0 @@
-export declare const watch: (ref: string[], exp: any) => string;
-export declare function watchFn(this: any, _prop: string): boolean;