olova 2.0.9 → 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 stateHook from"./hooks/state.js";import effectHook from"./hooks/effect.js";import memoHook from"./hooks/memo.js";import callbackHook from"./hooks/callback.js";import reducerHook from"./hooks/reducer.js";import refHook from"./hooks/ref.js";import contextHook from"./hooks/context.js";class Olovav2{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}createElement(e,t,...n){return null==e?(console.error("Element type cannot be null or undefined"),null):"function"==typeof e||"string"==typeof e?{type:e,props:{...t,children:n.flat()}}:(console.error("Invalid element type:",e),null)}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("function"==typeof e.type){const n=e.type,o=this.getComponentInstance(n);if(n.__isMemoized){const n=o.lastProps;if(n&&this.deepEqual(n,e.props)&&o.lastResult)return void this.render(o.lastResult,t)}this.componentStack.push(o),o.currentHook=0,o.lastProps=e.props;const s=n(e.props);return o.lastResult=s,this.componentStack.pop(),void this.render(s,t)}if("string"!=typeof e.type)return void console.error("Invalid element type:",e.type);const n=document.createElement(e.type);this.applyProps(n,e.props),(e.props.children||[]).forEach((e=>this.render(e,n))),t.appendChild(n)}catch(e){console.error("Render error:",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:[],cleanups:new Map,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;if(!n.lastResult||this.shouldComponentUpdate(n,e)){const o=e();n.lastResult=o,this.render(o,t),n.pendingEffects.length>0&&(this.pendingEffects.push(...n.pendingEffects),n.pendingEffects=[])}else this.render(n.lastResult,t);this.componentStack.pop()}shouldComponentUpdate(e,t){return!t.__isMemoized||!e.lastProps||!this.deepEqual(e.lastProps,t.props)}getCurrentInstance(){return this.componentStack[this.componentStack.length-1]}createContext(e){const t={_currentValue:e,_defaultValue:e,_subscribers:new Set,_version:0,Provider:({value:e,children:n})=>{const o=this.getCurrentInstance(),s=o.currentHook++,r=o.hooks[s];return this.shallowEqual(r,e)||(t._currentValue=e,t._version++,t._subscribers.forEach((t=>{t.instance.hooks[t.hookIndex]=e,this.scheduleUpdate()}))),o.hooks[s]=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}scheduleUpdate(){this.isBatchingUpdates||(this.isBatchingUpdates=!0,this.pendingUpdates.push((()=>{if(this.rootElement){const e=this.dirtyInstances||new Set;for(this.components.forEach(((t,n)=>{const o=this.getComponentInstance(t);e.has(o)&&(n.innerHTML="",this.renderComponent(t,n))})),this.dirtyInstances=new Set;this.pendingEffects.length>0;){this.pendingEffects.shift()()}}})),this.hasScheduledFlush||(this.hasScheduledFlush=!0,queueMicrotask((()=>{this.flushUpdates(),this.isBatchingUpdates=!1}))))}flushUpdates(){for(;this.pendingUpdates.length>0;){this.pendingUpdates.shift()()}this.hasScheduledFlush=!1}mount(e,t){for(this.rootElement=t,this.components.set(t,e),this.renderComponent(e,t);this.pendingEffects.length>0;){this.pendingEffects.shift()()}}unmount(e){const t=this.components.get(e);if(t){const n=this.componentInstances.get(t);n&&(n.contextSubscriptions.forEach((e=>e())),n.contextSubscriptions.clear(),n.cleanups.forEach((e=>e())),n.cleanups.clear(),this.componentInstances.delete(t)),this.components.delete(e)}e.innerHTML=""}memo(e){const t=t=>{const n=this.getCurrentInstance();if(!n)return e(t);const o=n.currentHook++,s=n.hooks[o]||{props:null,result:null},r=!s.props||!this.deepEqual(t,s.props);if(!s.result||r){const s=e(t);return n.hooks[o]={props:t,result:s},s}return s.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(!e||!t)return!1;if(typeof e!=typeof t)return!1;if("object"!=typeof e)return e===t;if(Array.isArray(e))return!(!Array.isArray(t)||e.length!==t.length)&&e.every(((e,n)=>this.deepEqual(e,t[n])));const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&n.every((n=>t.hasOwnProperty(n)&&this.deepEqual(e[n],t[n])))}}const Olova=new Olovav2;export const h=Olova.createElement.bind(Olova);export const Fragment=e=>e?e.children:null;export const $state=e=>stateHook(Olova,e);export const $effect=(e,t)=>effectHook(Olova,e,t);export const $memo=(e,t)=>memoHook(Olova,e,t);export const $callback=(e,t)=>callbackHook(Olova,e,t);export const $reducer=(e,t)=>reducerHook(Olova,e,t);export const $ref=e=>refHook(Olova,e);export const $context=e=>contextHook(Olova,e);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.9",
-  "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,4 +0,0 @@
-import o from "./memo.js";
-export default function r(r, t, e) {
-  return o(r, () => t, e);
-}

package/dist/hooks/context.js

@@ -1,21 +0,0 @@
-export default function e(e, r) {
-  const n = e.getCurrentInstance(),
-    o = n.currentHook++;
-  if (!n.hooks[o]) {
-    n.hooks[o] = r._currentValue;
-    const e = { instance: n, hookIndex: o, version: r._version };
-    r._subscribers.add(e),
-      n.contextSubscriptions.add(() => {
-        r._subscribers.delete(e);
-      });
-  }
-  const s = Array.from(r._subscribers).find(
-    (e) => e.instance === n && e.hookIndex === o
-  );
-  return (
-    s &&
-      s.version !== r._version &&
-      ((n.hooks[o] = r._currentValue), (s.version = r._version)),
-    r._currentValue
-  );
-}

package/dist/hooks/effect.js

@@ -1,11 +0,0 @@
-export default function e(e, n, t) {
-  const o = e.getCurrentInstance(),
-    s = o.currentHook++,
-    c = o.hooks[s];
-  (!c || !t || t.length !== c.length || t.some((e, n) => e !== c[n])) &&
-    o.pendingEffects.push(() => {
-      o.cleanups.has(s) && o.cleanups.get(s)();
-      const e = n();
-      (o.hooks[s] = t), "function" == typeof e && o.cleanups.set(s, e);
-    });
-}

package/dist/hooks/memo.js

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

package/dist/hooks/reducer.js

@@ -1,11 +0,0 @@
-export default function o(o, e, t) {
-  const n = o.getCurrentInstance(),
-    s = n.currentHook++;
-  n.hooks[s] = n.hooks[s] || t;
-  return [
-    n.hooks[s],
-    (t) => {
-      (n.hooks[s] = e(n.hooks[s], t)), o.scheduleUpdate();
-    },
-  ];
-}

package/dist/hooks/ref.js

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

package/dist/hooks/state.js

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