olova 2.0.10 → 2.0.11

package/.github/workflows/publish.yml

@@ -1,18 +1,18 @@
-name: Publish to NPM
-
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          registry-url: 'https://registry.npmjs.org'
-      - run: yarn publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+name: Publish to NPM
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          registry-url: 'https://registry.npmjs.org'
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/README.md

@@ -1,54 +1,54 @@
-# Olova JavaScript Framework
-
-Olova is a lightweight and reactive JavaScript framework that simplifies UI
-development with a clean, intuitive syntax. It provides a reactivity system and
-hooks to manage state and side effects, allowing developers to build modern web
-applications with ease.
-
-## Features
-
-- **State Management**: Use the `State` hook to manage reactive state in your
-  components.
-- **Side Effects**: Use the `Effect` hook to run side effects in response to
-  state changes.
-- **JSX-style Syntax**: Write UI components using a simple, declarative
-  JSX-style syntax.
-- **Reactivity**: Automatically re-render components when state changes.
-
-## Installation
-
-To get started with Olova, first install the core library via npm or yarn.
-
-```bash
-npm install olova
-```
-
-or
-
-```bash
-yarn add olova
-```
-
-## Example Usage
-
-Here is an example of a basic component in Olova:
-
-```js
-import Olova, { State, Effect } from "olova";
-
-export default function Home() {
-  const [count, setCount] = State(0);
-
-  Effect(() => {
-    console.log("Home is rendered");
-    console.log(count);
-  }, [count]);
-
-  return (
-    <>
-      <h1>{count}</h1>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </>
-  );
-}
-```
+# Olova JavaScript Framework
+
+Olova is a lightweight and reactive JavaScript framework that simplifies UI
+development with a clean, intuitive syntax. It provides a reactivity system and
+hooks to manage state and side effects, allowing developers to build modern web
+applications with ease.
+
+## Features
+
+- **State Management**: Use the `State` hook to manage reactive state in your
+  components.
+- **Side Effects**: Use the `Effect` hook to run side effects in response to
+  state changes.
+- **JSX-style Syntax**: Write UI components using a simple, declarative
+  JSX-style syntax.
+- **Reactivity**: Automatically re-render components when state changes.
+
+## Installation
+
+To get started with Olova, first install the core library via npm or yarn.
+
+```bash
+npm install olova
+```
+
+or
+
+```bash
+yarn add olova
+```
+
+## Example Usage
+
+Here is an example of a basic component in Olova:
+
+```js
+import Olova, { State, Effect } from "olova";
+
+export default function Home() {
+  const [count, setCount] = State(0);
+
+  Effect(() => {
+    console.log("Home is rendered");
+    console.log(count);
+  }, [count]);
+
+  return (
+    <>
+      <h1>{count}</h1>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </>
+  );
+}
+```

package/dist/hooks/createEffect.js

@@ -0,0 +1,14 @@
+import { currentEffect, setCurrentEffect } from "./createSignal";
+function createEffect(t) {
+  const e = () => {
+    f(), setCurrentEffect(e);
+    try {
+      f = t() || (() => {});
+    } finally {
+      setCurrentEffect(null);
+    }
+  };
+  let f = () => {};
+  e();
+}
+export { createEffect };

package/dist/hooks/createMemo.js

@@ -0,0 +1,21 @@
+import { $state, $effect } from "../olova.js";
+function createMemo(t, e = []) {
+  const [o, s] = $state(void 0),
+    [c, a] = $state(e),
+    [i, r] = $state(void 0);
+  return (
+    $effect(() => {
+      if (
+        void 0 === i ||
+        ((f = c),
+        (o = e).length !== f.length || o.some((t, e) => !Object.is(t, f[e])))
+      ) {
+        const o = t();
+        Object.is(o, i) || (r(o), s(o)), a(e);
+      }
+      var o, f;
+    }),
+    o
+  );
+}
+export { createMemo };

package/dist/hooks/createRef.js

@@ -0,0 +1,13 @@
+import { createSignal } from "./createSignal";
+function createRef(e = null) {
+  const [r, t] = createSignal({ current: e });
+  return {
+    get current() {
+      return r().current;
+    },
+    set current(e) {
+      t({ current: e });
+    },
+  };
+}
+export { createRef };

package/dist/hooks/createSignal.js

@@ -0,0 +1,13 @@
+let currentEffect = null;
+const setCurrentEffect = (t) => {
+  currentEffect = t;
+};
+function createSignal(t) {
+  let e = t;
+  const r = new Set();
+  return [
+    () => (currentEffect && r.add(currentEffect), e),
+    (t) => ((e = "function" == typeof t ? t(e) : t), r.forEach((t) => t()), e),
+  ];
+}
+export { createSignal, currentEffect, setCurrentEffect };

package/dist/olova.d.ts

@@ -1 +1 @@
-declare module "olova";
+declare module "olova";

package/dist/olova.js

@@ -1 +1 @@
-import{createStateHook}from"./hooks/state";import{createEffectHook}from"./hooks/effect";import{createMemoHook}from"./hooks/memo";import{createRefHook}from"./hooks/ref";import{createCallbackHook}from"./hooks/callback";import{createContextHook}from"./hooks/context";class ReactLite{constructor(){this.rootElement=null,this.components=new Map,this.componentStack=[],this.componentInstances=new Map,this.pendingUpdates=[],this.pendingEffects=[],this.contextSubscriptions=new WeakMap,this.isBatchingUpdates=!1,this.hasScheduledFlush=!1,this.dirtyInstances=null,this.mountedComponents=new Map,this.$state=createStateHook(this),this.$effect=createEffectHook(this),this.$memo=createMemoHook(this),this.$ref=createRefHook(this),this.$callback=createCallbackHook(this),this.$context=createContextHook(this)}createElement(e,t,...n){if(null==e)return console.error("Element type cannot be null or undefined"),null;const o=n.flat(),r=[];return o.forEach((e=>{"string"==typeof e||"number"==typeof e?r.length>0&&("string"==typeof r[r.length-1]||"number"==typeof r[r.length-1])?r[r.length-1]=String(r[r.length-1])+String(e):r.push(e):null!=e&&r.push(e)})),e===Fragment?{type:Fragment,props:{...t,children:r}}:{type:e,props:{...t,children:r}}}render(e,t){try{if(null==e)return;if("string"==typeof e||"number"==typeof e)return void t.appendChild(document.createTextNode(e));if(Array.isArray(e))return void e.forEach((e=>this.render(e,t)));if(!e.type)return void console.error("Invalid element:",e);if(e.type===Fragment)return void(e.props?.children||[]).forEach((e=>this.render(e,t)));if("function"==typeof e.type){const n=e.type,o=this.getComponentInstance(n);this.componentStack.push(o),o.currentHook=0,o.lastProps=e.props;const r=n(e.props);return o.lastResult=r,this.componentStack.pop(),void this.render(r,t)}if("string"==typeof e.type){const n=document.createElement(e.type);return this.applyProps(n,e.props),(e.props?.children||[]).forEach((e=>this.render(e,n))),void t.appendChild(n)}console.error("Unhandled element type:",e.type)}catch(t){console.error("Render error:",t),console.error("Element:",e)}}applyProps(e,t){Object.keys(t||{}).forEach((n=>{if("ref"===n&&t[n])t[n].current=e;else if(n.startsWith("on")){const o=n.toLowerCase().substring(2);e.addEventListener(o,t[n])}else"children"!==n&&("className"===n?e.setAttribute("class",t[n]):e[n]=t[n])}))}getComponentInstance(e){return this.componentInstances.has(e)||this.componentInstances.set(e,{hooks:[],currentHook:0,effects:new Map,cleanups:new Set,pendingEffects:[],contextSubscriptions:new Set,lastProps:null,lastResult:null}),this.componentInstances.get(e)}renderComponent(e,t){const n=this.getComponentInstance(e);this.componentStack.push(n),n.currentHook=0;const o=e();n.lastResult=o,this.render(o,t),this.componentStack.pop()}scheduleUpdate(){this.isBatchingUpdates||(this.isBatchingUpdates=!0,queueMicrotask((()=>{const e=new Set(this.dirtyInstances);this.dirtyInstances=new Set,e.forEach((e=>{const t=Array.from(this.components.keys()).find((t=>this.componentInstances.get(t)===e));if(t){this.componentStack.push(e),e.currentHook=0;const n=t(),o=e.lastResult;this.areNodesEqual(n,o)||(e.lastResult=n,this.rootElement&&this.updateDOM(this.rootElement,o,n)),this.componentStack.pop()}})),this.isBatchingUpdates=!1})))}updateDOM(e,t,n){if(this.areNodesEqual(t,n))return;const o=(e,t,n,r=0)=>{if("string"==typeof t||"number"==typeof t){const n=e.childNodes[r];return void(n?3===n.nodeType?n.textContent!==String(t)&&(n.textContent=String(t)):e.replaceChild(document.createTextNode(String(t)),n):e.appendChild(document.createTextNode(String(t))))}if(n&&this.areNodesEqual(n,t))return;if(!t)return void(e.childNodes[r]&&e.removeChild(e.childNodes[r]));if(!n||n.type!==t.type){const n=this.createElementFromVNode(t);return void(e.childNodes[r]?e.replaceChild(n,e.childNodes[r]):e.appendChild(n))}const s=e.childNodes[r];"string"==typeof t.type&&this.updateProps(s,n.props||{},t.props||{});const i=Array.isArray(t.props?.children)?t.props.children:[t.props?.children].filter(Boolean),c=Array.isArray(n.props?.children)?n.props.children:[n.props?.children].filter(Boolean),a=Math.max(i.length,c.length);for(let e=0;e<a;e++)o(s,i[e],c[e],e)};o(e,n,t)}updateProps(e,t,n){Object.keys(t).forEach((o=>{if("children"!==o&&!(o in n))if(o.startsWith("on")){const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])}else"className"===o?e.removeAttribute("class"):e.removeAttribute(o)})),Object.keys(n).forEach((o=>{if("children"!==o&&n[o]!==t[o])if(o.startsWith("on")){const r=o.toLowerCase().substring(2);t[o]&&e.removeEventListener(r,t[o]),e.addEventListener(r,n[o])}else"className"===o?e.setAttribute("class",n[o]):o in e?e[o]=n[o]:e.setAttribute(o,n[o])}))}flushUpdates(){for(;this.pendingUpdates.length>0;){this.pendingUpdates.shift()()}this.hasScheduledFlush=!1}mount(e,t){this.rootElement=t,this.components.set(e,e),this.mountedComponents.has(t)&&this.unmount(t),t.innerHTML="",this.mountedComponents.set(t,new Set),this.renderComponent(e,t)}unmount(e){console.log("Unmounting component...");Array.from(this.componentInstances.values()).forEach((e=>{e.cleanups&&(e.cleanups.forEach((e=>{try{console.log("Running cleanup on unmount"),e()}catch(e){console.error("Error in unmount cleanup:",e)}})),e.cleanups.clear())})),this.componentInstances.clear(),e.innerHTML=""}createElementFromVNode(e){if("string"==typeof e||"number"==typeof e)return document.createTextNode(e);if(e.type===Fragment){const t=document.createDocumentFragment();return(e.props&&e.props.children?e.props.children:[]).forEach((e=>{t.appendChild(this.createElementFromVNode(e))})),t}if("string"==typeof e.type){const t=document.createElement(e.type);if(e.props){Object.keys(e.props).forEach((n=>{if("children"!==n)if("className"===n)t.setAttribute("class",e.props[n]);else if(n.startsWith("on")){const o=n.toLowerCase().substring(2);t.addEventListener(o,e.props[n])}else t[n]=e.props[n]}));(e.props.children||[]).forEach((e=>{t.appendChild(this.createElementFromVNode(e))}))}return t}return document.createTextNode("")}createContext(e){const t={currentValue:e,defaultValue:e,subscribers:new Map,version:0,Provider:({value:e,children:n})=>{const o=this.getCurrentInstance(),r=o.currentHook++,s=o.hooks[r];return this.shallowEqual(s,e)||(t._currentValue=e,t._version++,t.subscribers.forEach((t=>{t.instance.hooks[t.hookIndex]=e,this.dirtyInstances=this.dirtyInstances||new Set,this.dirtyInstances.add(t.instance),this.scheduleUpdate()}))),o.hooks[r]=e,n},Consumer:({children:e})=>{if("function"!=typeof e)throw new Error("Context.Consumer expects a function as a child");return e(t._currentValue)}};return t}memo(e){const t=t=>{const n=this.getCurrentInstance();if(!n)return e(t);const o=n.currentHook++,r=n.hooks[o]||{props:null,result:null},s=!r.props||!this.deepEqual(t,r.props);if(!r.result||s){const r=e(t);return n.hooks[o]={props:t,result:r},r}return r.result};return t.__isMemoized=!0,t.__original=e,t}shallowEqual(e,t){if(e===t)return!0;if(!e||!t)return!1;if("object"!=typeof e||"object"!=typeof t)return e===t;const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>t.hasOwnProperty(n)&&e[n]===t[n]))}deepEqual(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if("object"!=typeof e||null===e||null===t)return!1;const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>this.deepEqual(e[n],t[n])))}areArraysEqual(e,t){return e===t||!(!e||!t)&&(e.length===t.length&&e.every(((e,n)=>e===t[n])))}areNodesEqual(e,t){return e===t||!(!e||!t)&&(typeof e==typeof t&&("string"==typeof e||"number"==typeof e?e===t:e.type===t.type&&this.areObjectsEqual(e.props,t.props)))}areObjectsEqual(e,t){if(e===t)return!0;if(!e||!t)return!1;const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>"children"===n?this.areChildrenEqual(e[n],t[n]):e[n]===t[n]))}areChildrenEqual(e,t){if(e===t)return!0;if(!e||!t)return!1;const n=Array.isArray(e)?e:[e],o=Array.isArray(t)?t:[t];return n.length===o.length&&n.every(((e,t)=>this.areNodesEqual(e,o[t])))}getCurrentInstance(){const e=this.componentStack[this.componentStack.length-1];if(!e)throw new Error("Hooks can only be called inside function components");return e}}const Olova=new ReactLite;export const h=Olova.createElement.bind(Olova);export const Fragment=Symbol("Fragment");export const $state=Olova.$state.bind(Olova);export const $effect=Olova.$effect.bind(Olova);export const $ref=Olova.$ref.bind(Olova);export const $memo=Olova.$memo.bind(Olova);export const $callback=Olova.$callback.bind(Olova);export const $context=Olova.$context.bind(Olova);export const createContext=Olova.createContext.bind(Olova);export const memo=Olova.memo.bind(Olova);export default Olova;function isFunctionComponent(e){return"function"==typeof e}function renderComponent(e,t){try{return"function"==typeof e.type?e.type(e.props):"string"==typeof e?e:Array.isArray(e)?e.map((e=>renderComponent(e,t))):null==e?"":"object"==typeof e?e:String(e)}catch(e){return console.error("Error rendering component:",e),null}}
+import{createSignal as $state}from"./hooks/createSignal";import{createEffect as $effect}from"./hooks/createEffect";import{createMemo as $memo}from"./hooks/createMemo";import{createRef as $ref}from"./hooks/createRef";function h(e,t={},...n){if(e===h.Fragment){const e=document.createDocumentFragment(),t=n.flat();for(let n=0;n<t.length;n++){const o=t[n];if("function"==typeof o){const t=document.createTextNode("");$effect((()=>{const n=o();if(Array.isArray(n)){const o=t.previousSibling;o&&o.remove();const r=document.createDocumentFragment();for(let e=0;e<n.length;e++){const t=n[e];r.appendChild(t instanceof Node?t:document.createTextNode(String(t)))}e.insertBefore(r,t)}else t.textContent=String(n)})),e.appendChild(t)}else o instanceof Node?e.appendChild(o):null!=o&&e.appendChild(document.createTextNode(String(o)))}return e}const o="function"==typeof e?e(t):document.createElement(e);if("function"!=typeof e){if(t){const e=Object.entries(t);for(let t=0;t<e.length;t++){const[n,r]=e[t];"ref"===n?queueMicrotask((()=>{r&&"object"==typeof r&&(r.current=o)})):n.startsWith("on")?o.addEventListener(n.slice(2).toLowerCase(),r):"style"===n&&"object"==typeof r?Object.assign(o.style,r):"className"===n?o.className=r:o.setAttribute(n,r)}}const e=document.createTextNode(""),r=n.flat();for(let t=0;t<r.length;t++){const n=r[t];if("function"==typeof n)$effect((()=>{const t=n();if(Array.isArray(t)){o.textContent="";const e=document.createDocumentFragment();for(let n=0;n<t.length;n++){const o=t[n];e.appendChild(o instanceof Node?o:document.createTextNode(String(o)))}o.appendChild(e)}else e.textContent=String(t),e.parentNode||o.appendChild(e)}));else if(Array.isArray(n)){const e=document.createDocumentFragment();for(let t=0;t<n.length;t++){const o=n[t];o instanceof Node?e.appendChild(o):null!=o&&e.appendChild(document.createTextNode(String(o)))}o.appendChild(e)}else n instanceof Node?o.appendChild(n):null!=n&&o.appendChild(document.createTextNode(String(n)))}}return o}h.Fragment=Symbol("Fragment");const Fragment=h.Fragment;export{h,$state,$effect,$memo,Fragment,$ref};

package/package.json

@@ -1,15 +1,15 @@
-{
-  "name": "olova",
-  "version": "2.0.10",
-  "description": "A lightweight JavaScript framework for building reactive applications.",
-  "main": "dist/olova.js",
-  "keywords": [
-    "javascript",
-    "framework",
-    "reactive",
-    "olova",
-    "olovajs"
-  ],
-  "author": "Nazmul Hossain",
-  "license": "MIT"
-}
+{
+  "name": "olova",
+  "version": "2.0.11",
+  "description": "A lightweight JavaScript framework for building reactive applications.",
+  "main": "dist/olova.js",
+  "keywords": [
+    "javascript",
+    "framework",
+    "reactive",
+    "olova",
+    "olovajs"
+  ],
+  "author": "Nazmul Hossain",
+  "license": "MIT"
+}

package/dist/hooks/callback.js

@@ -1,6 +0,0 @@
-import { createMemoHook } from "./memo.js";
-export function createCallbackHook(o) {
-  return function (e, r) {
-    return o.$memo(() => e, r);
-  };
-}

package/dist/hooks/context.js

@@ -1,25 +0,0 @@
-export function createContextHook(e) {
-  return function (n) {
-    const s = e.getCurrentInstance(),
-      t = s.currentHook++;
-    if (!s.hooks[t]) {
-      s.hooks[t] = n._currentValue;
-      const e = { instance: s, hookIndex: t, version: n._version };
-      n.subscribers.set(s, e),
-        s.contextSubscriptions.add(() => {
-          n.subscribers.delete(s);
-        });
-    }
-    const r = n.subscribers.get(s);
-    return (
-      r &&
-        r.version !== n._version &&
-        ((s.hooks[t] = n._currentValue),
-        (r.version = n._version),
-        (e.dirtyInstances = e.dirtyInstances || new Set()),
-        e.dirtyInstances.add(s),
-        e.scheduleUpdate()),
-      n._currentValue
-    );
-  };
-}

package/dist/hooks/effect.js

@@ -1,20 +0,0 @@
-export function createEffectHook(n) {
-  return function (e, t) {
-    const o = n.getCurrentInstance(),
-      u = o.currentHook++;
-    o.hooks[u] ||
-      (o.hooks[u] = { deps: null, cleanup: null, effect: e, lastRun: 0 });
-    const c = o.hooks[u];
-    (t
-      ? c.deps &&
-        n.areArraysEqual(
-          t.map((n) => ("function" == typeof n ? n() : n)),
-          c.deps
-        )
-      : 0 !== c.lastRun) ||
-      ("function" == typeof c.cleanup && c.cleanup(),
-      (c.cleanup = e()),
-      (c.deps = t?.map((n) => ("function" == typeof n ? n() : n))),
-      (c.lastRun = Date.now()));
-  };
-}

package/dist/hooks/memo.js

@@ -1,17 +0,0 @@
-export function createMemoHook(o) {
-  return function (n, t) {
-    const e = o.getCurrentInstance(),
-      r = e.currentHook++,
-      [u, c] = e.hooks[r] || [void 0, void 0];
-    if (
-      !c ||
-      !t ||
-      t.length !== c.length ||
-      t.some((n, t) => !o.shallowEqual(n, c[t]))
-    ) {
-      const o = n();
-      return (e.hooks[r] = [o, t]), o;
-    }
-    return u;
-  };
-}

package/dist/hooks/reducer.js

@@ -1,21 +0,0 @@
-export function createReducerHook(t) {
-  return function (s, e, o) {
-    const n = t.getCurrentInstance(),
-      c = n.currentHook++;
-    if (!n.hooks[c]) {
-      const a = o ? o(e) : e;
-      n.hooks[c] = {
-        state: a,
-        dispatch: (e) => {
-          const o = s(n.hooks[c].state, e);
-          o !== n.hooks[c].state &&
-            ((n.hooks[c].state = o),
-            t.dirtyInstances || (t.dirtyInstances = new Set()),
-            t.dirtyInstances.add(n),
-            t.scheduleUpdate());
-        },
-      };
-    }
-    return [n.hooks[c].state, n.hooks[c].dispatch];
-  };
-}

package/dist/hooks/ref.js

@@ -1,7 +0,0 @@
-export function createRefHook(o) {
-  return function (n) {
-    const r = o.getCurrentInstance(),
-      t = r.currentHook++;
-    return r.hooks[t] || (r.hooks[t] = { current: n }), r.hooks[t];
-  };
-}

package/dist/hooks/state.js

@@ -1,21 +0,0 @@
-export function createStateHook(e) {
-  return function (t) {
-    const o = e.getCurrentInstance(),
-      n = o.currentHook++;
-    return (
-      o.hooks[n] ||
-        (o.hooks[n] = {
-          value: t,
-          setValue: (t) => {
-            const s = "function" == typeof t ? t(o.hooks[n].value) : t;
-            s !== o.hooks[n].value &&
-              ((o.hooks[n].value = s),
-              e.dirtyInstances || (e.dirtyInstances = new Set()),
-              e.dirtyInstances.add(o),
-              e.scheduleUpdate());
-          },
-        }),
-      [() => o.hooks[n].value, o.hooks[n].setValue]
-    );
-  };
-}