frontend-hamroun 1.0.0

package/README.md

@@ -0,0 +1,228 @@
+# Lightweight Frontend Framework
+
+A modern, lightweight framework for building user interfaces with hooks, context, and efficient rendering.
+
+## Features
+- 🎯 Hooks-based Components
+- 🔄 Virtual DOM Diffing
+- 📦 Batch Updates
+- 🌍 Context API
+- 💾 Memoization
+- ⚡ Async Rendering
+- 🛡️ Error Boundaries
+- 🎨 Style Management
+- 🔌 Event Handling
+
+## Installation
+
+```bash
+npm install lightweight-frontend
+```
+
+## Basic Usage
+
+```tsx
+import { render, useState } from 'lightweight-frontend';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+render(<Counter />, document.getElementById('root'));
+```
+
+## Hooks
+
+### useState
+Manages component state.
+
+```tsx
+const [state, setState] = useState(initialValue);
+```
+
+### useEffect
+Handles side effects in components.
+
+```tsx
+useEffect(() => {
+  // Effect code
+  return () => {
+    // Cleanup code
+  };
+}, [dependencies]);
+```
+
+### useMemo
+Memoizes expensive computations.
+
+```tsx
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+```
+
+### useRef
+Creates a mutable reference.
+
+```tsx
+const ref = useRef(initialValue);
+```
+
+### useErrorBoundary
+Handles component errors.
+
+```tsx
+const [error, resetError] = useErrorBoundary();
+```
+
+## Context API
+
+Create and use shared state across components.
+
+```tsx
+const ThemeContext = createContext('light');
+
+function App() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Child />
+    </ThemeContext.Provider>
+  );
+}
+
+function Child() {
+  const theme = useContext(ThemeContext);
+  // Or use selector for performance
+  const isDark = ThemeContext.useSelector(theme => theme === 'dark');
+}
+```
+
+## Performance Optimization
+
+### Batch Updates
+Group multiple state updates together.
+
+```tsx
+import { batchUpdates } from 'lightweight-frontend';
+
+batchUpdates(() => {
+  setValue1(newValue1);
+  setValue2(newValue2);
+});
+```
+
+### Component Memoization
+Prevent unnecessary re-renders.
+
+```tsx
+const MemoizedComponent = useMemo(() => (
+  <ExpensiveComponent prop={value} />
+), [value]);
+```
+
+## Server-Side Rendering
+
+```tsx
+import { hydrate } from 'lightweight-frontend';
+
+// On the client
+hydrate(<App />, document.getElementById('root'));
+```
+
+## Event Handling
+
+```tsx
+function Button() {
+  return (
+    <button 
+      onClick={(e) => handleClick(e)}
+      onMouseOver={(e) => handleHover(e)}
+    >
+      Click me
+    </button>
+  );
+}
+```
+
+## Styling
+
+```tsx
+function StyledComponent() {
+  return (
+    <div style={{ 
+      color: 'blue',
+      padding: '20px'
+    }}>
+      Styled content
+    </div>
+  );
+}
+```
+
+## Error Handling
+
+```tsx
+function ErrorBoundary() {
+  const [error, resetError] = useErrorBoundary();
+
+  if (error) {
+    return (
+      <div>
+        <h1>Something went wrong!</h1>
+        <button onClick={resetError}>Try again</button>
+      </div>
+    );
+  }
+
+  return <ComponentThatMightError />;
+}
+```
+
+## Best Practices
+
+1. Use batch updates for multiple state changes
+2. Implement error boundaries for error handling
+3. Use context selectors for better performance
+4. Memoize expensive computations
+5. Clean up effects when components unmount
+6. Keep components small and focused
+7. Use proper TypeScript types for better development experience
+
+## API Reference
+
+### Core
+- `render(element, container)`
+- `hydrate(element, container)`
+- `createElement(vnode)`
+
+### Hooks
+- `useState<T>(initial: T)`
+- `useEffect(callback, deps?)`
+- `useMemo(factory, deps)`
+- `useRef(initial)`
+- `useErrorBoundary()`
+
+### Context
+- `createContext(defaultValue)`
+- `useContext(Context)`
+- `Context.Provider`
+- `Context.Consumer`
+- `Context.useSelector`
+
+### Performance
+- `batchUpdates(callback)`
+
+## License
+
+MIT License - feel free to use in any project.
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines and submit pull requests.

package/dist/batch.d.ts

@@ -0,0 +1,4 @@
+type BatchCallback = () => void;
+export declare function batchUpdates(callback: BatchCallback): void;
+export declare function isBatching(): boolean;
+export {};

package/dist/component.d.ts

@@ -0,0 +1,14 @@
+export declare class Component {
+    state: any;
+    props: any;
+    element: HTMLElement | null;
+    private _mounted;
+    constructor(props?: any);
+    componentDidMount(): void;
+    setState(newState: any): Promise<void>;
+    private _replayEvents;
+    private _deepCloneWithEvents;
+    update(): Promise<Text | HTMLElement>;
+    private _updateElement;
+    render(): any;
+}

package/dist/context.d.ts

@@ -0,0 +1,13 @@
+export interface Context<T> {
+    Provider: (props: {
+        value: T;
+        children?: any;
+    }) => any;
+    Consumer: (props: {
+        children: (value: T) => any;
+    }) => any;
+    _id: symbol;
+    useSelector: <S>(selector: (state: T) => S) => S;
+}
+export declare function createContext<T>(defaultValue: T): Context<T>;
+export declare function useContext<T>(context: Context<T>): T;

package/dist/frontend-hamroun.js

@@ -0,0 +1,192 @@
+async function m(t) {
+  var e;
+  if (console.log("Creating element from:", t), t == null || typeof t == "boolean")
+    return document.createTextNode("");
+  if (typeof t == "number" || typeof t == "string")
+    return document.createTextNode(String(t));
+  if (Array.isArray(t)) {
+    const r = document.createDocumentFragment();
+    for (const s of t) {
+      const n = await m(s);
+      r.appendChild(n);
+    }
+    return r;
+  }
+  if ("type" in t && t.props !== void 0) {
+    const { type: r, props: s } = t;
+    if (typeof r == "function")
+      try {
+        const c = await r(s || {}), a = await m(c);
+        return a instanceof Element && a.setAttribute("data-component-id", r.name || r.toString()), a;
+      } catch (c) {
+        return console.error("Error rendering component:", c), document.createTextNode("");
+      }
+    const n = document.createElement(r);
+    for (const [c, a] of Object.entries(s || {}))
+      if (c !== "children")
+        if (c.startsWith("on") && typeof a == "function") {
+          const f = c.toLowerCase().slice(2), S = (e = n.__events) == null ? void 0 : e[f];
+          S && n.removeEventListener(f, S), n.addEventListener(f, a), n.__events || (n.__events = {}), n.__events[f] = a;
+        } else
+          c === "style" && typeof a == "object" ? Object.assign(n.style, a) : c === "className" ? n.setAttribute("class", String(a)) : c !== "key" && c !== "ref" && n.setAttribute(c, String(a));
+    const i = s == null ? void 0 : s.children;
+    if (i != null) {
+      const c = Array.isArray(i) ? i.flat() : [i];
+      for (const a of c) {
+        const f = await m(a);
+        n.appendChild(f);
+      }
+    }
+    return n;
+  }
+  return document.createTextNode(String(t));
+}
+let h = [], p = !1;
+function _(t) {
+  if (p) {
+    h.push(t);
+    return;
+  }
+  p = !0;
+  try {
+    for (t(); h.length > 0; ) {
+      const e = h.shift();
+      e == null || e();
+    }
+  } finally {
+    p = !1;
+  }
+}
+function R() {
+  return p;
+}
+let o = 0;
+const g = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map();
+let b = null, E = null, x = null;
+function A(t, e, r) {
+  b = t, E = r, x = e;
+}
+function T() {
+  return o++, u.set(o, 0), o;
+}
+function j() {
+  o = 0;
+}
+function v(t) {
+  if (!o)
+    throw new Error("useState must be called within a render");
+  g.has(o) || g.set(o, []);
+  const e = g.get(o), r = u.get(o);
+  r >= e.length && e.push(t);
+  const s = e[r], n = (i) => {
+    const c = typeof i == "function" ? i(e[r]) : i;
+    e[r] !== c && (e[r] = c, R() ? _(() => C(o)) : C(o));
+  };
+  return u.set(o, r + 1), [s, n];
+}
+function L(t, e) {
+  if (!o)
+    throw new Error("useEffect must be called within a render");
+  const r = u.get(o);
+  d.has(o) || d.set(o, []);
+  const s = d.get(o), n = s[r];
+  (!n || !e || !n.deps || e.some((i, c) => i !== n.deps[c])) && (n != null && n.cleanup && n.cleanup(), queueMicrotask(() => {
+    const i = t() || void 0;
+    s[r] = { cleanup: i, deps: e };
+  })), u.set(o, r + 1);
+}
+function I(t, e) {
+  if (!o)
+    throw new Error("useMemo must be called within a render");
+  const r = u.get(o);
+  y.has(o) || y.set(o, []);
+  const s = y.get(o), n = s[r];
+  if (!n || e && e.some((i, c) => !Object.is(i, n.deps[c]))) {
+    const i = t();
+    return s[r] = { value: i, deps: e }, u.set(o, r + 1), i;
+  }
+  return u.set(o, r + 1), n.value;
+}
+function O(t) {
+  if (!o)
+    throw new Error("useRef must be called within a render");
+  const e = u.get(o);
+  w.has(o) || w.set(o, []);
+  const r = w.get(o);
+  if (e >= r.length) {
+    const n = { current: t };
+    return r.push(n), u.set(o, e + 1), n;
+  }
+  const s = r[e];
+  return u.set(o, e + 1), s;
+}
+async function C(t) {
+  try {
+    const e = d.get(t);
+    e && (e.forEach((r) => {
+      r.cleanup && r.cleanup();
+    }), d.set(t, [])), b && E && x && await b(x, E);
+  } catch (e) {
+    console.error("Error during rerender:", e);
+  }
+}
+function k() {
+  const [t, e] = v(null);
+  return [t, () => e(null)];
+}
+const l = /* @__PURE__ */ new Map();
+function B(t) {
+  const e = Symbol();
+  return l.set(e, t), {
+    Provider: ({ value: s, children: n }) => {
+      const i = l.get(e);
+      return Object.is(i, s) || l.set(e, s), n;
+    },
+    Consumer: ({ children: s }) => {
+      const n = l.get(e);
+      return s(n);
+    },
+    useSelector: (s) => {
+      const n = l.get(e);
+      return I(() => s(n), [n]);
+    },
+    _id: e
+  };
+}
+function H(t) {
+  return l.get(t._id);
+}
+let M = !1;
+async function U(t, e) {
+  M = !0;
+  try {
+    await N(t, e);
+  } finally {
+    M = !1;
+  }
+}
+async function N(t, e) {
+  console.log("Rendering to:", e.id), _(async () => {
+    const r = T();
+    try {
+      A(N, t, e);
+      const s = await m(t);
+      M || (e.innerHTML = ""), e.appendChild(s);
+    } finally {
+      j();
+    }
+  });
+}
+export {
+  _ as batchUpdates,
+  B as createContext,
+  U as hydrate,
+  N as render,
+  H as useContext,
+  L as useEffect,
+  k as useErrorBoundary,
+  I as useMemo,
+  O as useRef,
+  v as useState
+};
+//# sourceMappingURL=frontend-hamroun.js.map

package/dist/frontend-hamroun.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontend-hamroun.js","sources":["../src/jsx-runtime.ts","../src/batch.ts","../src/hooks.ts","../src/context.ts","../src/index.ts"],"sourcesContent":["import type { Component } from './component';\r\n\r\ninterface VNode {\r\n  type: string | Function;\r\n  props: Record<string, any>;\r\n}\r\n\r\nexport function jsx(type: string | Function, props: any): VNode {\r\n  console.log('JSX Transform:', { type, props });\r\n  const processedProps = { ...props };\r\n  \r\n  // Handle children properly\r\n  if (arguments.length > 2) {\r\n    processedProps.children = Array.prototype.slice.call(arguments, 2);\r\n  }\r\n  \r\n  return { type, props: processedProps };\r\n}\r\n\r\nexport { jsx as jsxs, jsx as jsxDEV };\r\nexport const Fragment = ({ children }: { children: any }) => children;\r\n\r\nexport async function createElement(vnode: VNode | any): Promise<Node> {\r\n  console.log('Creating element from:', vnode);\r\n\r\n  // Handle primitives and null\r\n  if (vnode == null) {\r\n    return document.createTextNode('');\r\n  }\r\n  \r\n  if (typeof vnode === 'boolean') {\r\n    return document.createTextNode('');\r\n  }\r\n\r\n  if (typeof vnode === 'number' || typeof vnode === 'string') {\r\n    return document.createTextNode(String(vnode));\r\n  }\r\n\r\n  // Handle arrays\r\n  if (Array.isArray(vnode)) {\r\n    const fragment = document.createDocumentFragment();\r\n    for (const child of vnode) {\r\n      const node = await createElement(child);\r\n      fragment.appendChild(node);\r\n    }\r\n    return fragment;\r\n  }\r\n\r\n  // Handle VNode\r\n  if ('type' in vnode && vnode.props !== undefined) {\r\n    const { type, props } = vnode;\r\n    \r\n    // Handle function components\r\n    if (typeof type === 'function') {\r\n      try {\r\n        const result = await type(props || {});\r\n        const node = await createElement(result);\r\n        if (node instanceof Element) {\r\n          node.setAttribute('data-component-id', type.name || type.toString());\r\n        }\r\n        return node;\r\n      } catch (error) {\r\n        console.error('Error rendering component:', error);\r\n        return document.createTextNode('');\r\n      }\r\n    }\r\n\r\n    // Create DOM element\r\n    const element = document.createElement(type as string);\r\n    \r\n    // Handle props\r\n    for (const [key, value] of Object.entries(props || {})) {\r\n      if (key === 'children') continue;\r\n      if (key.startsWith('on') && typeof value === 'function') {\r\n        const eventName = key.toLowerCase().slice(2);\r\n        // Remove existing event listener if any\r\n        const existingHandler = (element as any).__events?.[eventName];\r\n        if (existingHandler) {\r\n          element.removeEventListener(eventName, existingHandler);\r\n        }\r\n        \r\n        // Add new event listener\r\n        element.addEventListener(eventName, value as EventListener);\r\n        if (!(element as any).__events) {\r\n          (element as any).__events = {};\r\n        }\r\n        (element as any).__events[eventName] = value;\r\n      } else if (key === 'style' && typeof value === 'object') {\r\n        Object.assign(element.style, value);\r\n      } else if (key === 'className') {\r\n        element.setAttribute('class', String(value));\r\n      } else if (key !== 'key' && key !== 'ref') {\r\n        element.setAttribute(key, String(value));\r\n      }\r\n    }\r\n\r\n    // Handle children\r\n    const children = props?.children;\r\n    if (children != null) {\r\n      const childArray = Array.isArray(children) ? children.flat() : [children];\r\n      for (const child of childArray) {\r\n        const childNode = await createElement(child);\r\n        element.appendChild(childNode);\r\n      }\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  // Handle other objects by converting to string\r\n  return document.createTextNode(String(vnode));\r\n}\r\n","type BatchCallback = () => void;\r\nlet batchQueue: BatchCallback[] = [];\r\nlet isBatchingUpdates = false;\r\n\r\nexport function batchUpdates(callback: BatchCallback) {\r\n  if (isBatchingUpdates) {\r\n    batchQueue.push(callback);\r\n    return;\r\n  }\r\n\r\n  isBatchingUpdates = true;\r\n  try {\r\n    callback();\r\n    while (batchQueue.length > 0) {\r\n      const queuedCallback = batchQueue.shift();\r\n      queuedCallback?.();\r\n    }\r\n  } finally {\r\n    isBatchingUpdates = false;\r\n  }\r\n}\r\n\r\nexport function isBatching() {\r\n  return isBatchingUpdates;\r\n}\r\n","import { createElement } from './jsx-runtime';\r\nimport { batchUpdates, isBatching } from './batch';\r\nimport { diff } from './vdom';\r\n\r\nlet currentRender: number = 0;\r\nconst states = new Map<number, any[]>();\r\nconst stateIndices = new Map<number, number>();\r\nconst effects = new Map<number, Effect[]>();\r\nconst memos = new Map<number, { value: any; deps: any[] }[]>();\r\nconst refs = new Map<number, any[]>();\r\n\r\ninterface Effect {\r\n  cleanup?: () => void;\r\n  deps?: any[];\r\n}\r\n\r\n// Add at the top with other declarations\r\nlet globalRenderCallback: ((element: any, container: HTMLElement) => void) | null = null;\r\nlet globalContainer: HTMLElement | null = null;\r\nlet currentElement: any = null;\r\n\r\nexport function setRenderCallback(\r\n  callback: (element: any, container: HTMLElement) => void,\r\n  element: any,\r\n  container: HTMLElement\r\n) {\r\n  globalRenderCallback = callback;\r\n  globalContainer = container;\r\n  currentElement = element;\r\n}\r\n\r\nexport function prepareRender() {\r\n  currentRender++;\r\n  stateIndices.set(currentRender, 0);\r\n  return currentRender;\r\n}\r\n\r\nexport function finishRender() {\r\n  currentRender = 0;\r\n}\r\n\r\nexport function useState<T>(initial: T): [T, (value: T | ((prev: T) => T)) => void] {\r\n  if (!currentRender) {\r\n    throw new Error('useState must be called within a render');\r\n  }\r\n\r\n  if (!states.has(currentRender)) {\r\n    states.set(currentRender, []);\r\n  }\r\n\r\n  const componentStates = states.get(currentRender)!;\r\n  const index = stateIndices.get(currentRender)!;\r\n  \r\n  if (index >= componentStates.length) {\r\n    componentStates.push(initial);\r\n  }\r\n\r\n  const state = componentStates[index];\r\n  const setState = (newValue: T | ((prev: T) => T)) => {\r\n    const nextValue = typeof newValue === 'function' \r\n      ? (newValue as Function)(componentStates[index])\r\n      : newValue;\r\n\r\n    if (componentStates[index] === nextValue) return; // Skip if value hasn't changed\r\n    \r\n    componentStates[index] = nextValue;\r\n    \r\n    if (isBatching()) {\r\n      batchUpdates(() => rerender(currentRender));\r\n    } else {\r\n      rerender(currentRender);\r\n    }\r\n  };\r\n\r\n  stateIndices.set(currentRender, index + 1);\r\n  return [state, setState];\r\n}\r\n\r\nexport function useEffect(callback: () => (() => void) | void, deps?: any[]) {\r\n  if (!currentRender) throw new Error('useEffect must be called within a render');\r\n  \r\n  const effectIndex = stateIndices.get(currentRender)!;\r\n  \r\n  if (!effects.has(currentRender)) {\r\n    effects.set(currentRender, []);\r\n  }\r\n\r\n  const componentEffects = effects.get(currentRender)!;\r\n  const prevEffect = componentEffects[effectIndex];\r\n  \r\n  // Run effect if deps changed\r\n  if (!prevEffect || !deps || !prevEffect.deps || \r\n      deps.some((dep, i) => dep !== prevEffect.deps![i])) {\r\n    \r\n    // Cleanup previous effect\r\n    if (prevEffect?.cleanup) {\r\n      prevEffect.cleanup();\r\n    }\r\n\r\n    // Schedule new effect\r\n    queueMicrotask(() => {\r\n      const cleanup = callback() || undefined;\r\n      componentEffects[effectIndex] = { cleanup: cleanup, deps };\r\n    });\r\n  }\r\n  \r\n  stateIndices.set(currentRender, effectIndex + 1);\r\n}\r\n\r\nexport function useMemo<T>(factory: () => T, deps: any[]): T {\r\n  if (!currentRender) throw new Error('useMemo must be called within a render');\r\n  \r\n  const memoIndex = stateIndices.get(currentRender)!;\r\n  \r\n  if (!memos.has(currentRender)) {\r\n    memos.set(currentRender, []);\r\n  }\r\n\r\n  const componentMemos = memos.get(currentRender)!;\r\n  const prevMemo = componentMemos[memoIndex];\r\n  \r\n  if (!prevMemo || (deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i])))) {\r\n    const value = factory();\r\n    componentMemos[memoIndex] = { value, deps };\r\n    stateIndices.set(currentRender, memoIndex + 1);\r\n    return value;\r\n  }\r\n\r\n  stateIndices.set(currentRender, memoIndex + 1);\r\n  return prevMemo.value;\r\n}\r\n\r\nexport function useRef<T>(initial: T) {\r\n  if (!currentRender) throw new Error('useRef must be called within a render');\r\n  \r\n  const refIndex = stateIndices.get(currentRender)!;\r\n  \r\n  if (!refs.has(currentRender)) {\r\n    refs.set(currentRender, []);\r\n  }\r\n\r\n  const componentRefs = refs.get(currentRender)!;\r\n  if (refIndex >= componentRefs.length) {\r\n    // Initialize with an object that has a current property\r\n    const ref = { current: initial };\r\n    componentRefs.push(ref);\r\n    stateIndices.set(currentRender, refIndex + 1);\r\n    return ref;\r\n  }\r\n\r\n  const ref = componentRefs[refIndex];\r\n  stateIndices.set(currentRender, refIndex + 1);\r\n  return ref;\r\n}\r\n\r\n// Add a map to track component DOM nodes\r\nconst componentNodes = new Map<Function, Node>();\r\n\r\nasync function rerender(rendererId: number) {\r\n  try {\r\n    // Clean up effects\r\n    const componentEffects = effects.get(rendererId);\r\n    if (componentEffects) {\r\n      componentEffects.forEach(effect => {\r\n        if (effect.cleanup) effect.cleanup();\r\n      });\r\n      effects.set(rendererId, []);\r\n    }\r\n\r\n    if (globalRenderCallback && globalContainer && currentElement) {\r\n      await globalRenderCallback(currentElement, globalContainer);\r\n    }\r\n  } catch (error) {\r\n    console.error('Error during rerender:', error);\r\n  }\r\n}\r\n\r\n// Add new hook for error boundaries\r\nexport function useErrorBoundary(): [Error | null, () => void] {\r\n  const [error, setError] = useState<Error | null>(null);\r\n  return [error, () => setError(null)];\r\n}\r\n\r\n// Remove withHooks export\r\n","import { useMemo } from \"./hooks\";\r\n\r\nconst contexts = new Map<symbol, any>();\r\nlet currentRender: Function | null = null;\r\n\r\nexport interface Context<T> {\r\n  Provider: (props: { value: T; children?: any }) => any;\r\n  Consumer: (props: { children: (value: T) => any }) => any;\r\n  _id: symbol;\r\n  useSelector: <S>(selector: (state: T) => S) => S;\r\n}\r\n\r\nexport function createContext<T>(defaultValue: T): Context<T> {\r\n  const id = Symbol();\r\n  contexts.set(id, defaultValue);\r\n  \r\n  const useSelector = <S>(selector: (state: T) => S): S => {\r\n    const value = contexts.get(id);\r\n    return useMemo(() => selector(value), [value]);\r\n  };\r\n\r\n  return {\r\n    Provider: ({ value, children }) => {\r\n      const prevValue = contexts.get(id);\r\n      if (!Object.is(prevValue, value)) {\r\n        contexts.set(id, value);\r\n      }\r\n      return children;\r\n    },\r\n    Consumer: ({ children }) => {\r\n      const value = contexts.get(id);\r\n      return children(value);\r\n    },\r\n    useSelector,\r\n    _id: id\r\n  };\r\n}\r\n\r\nexport function useContext<T>(context: Context<T>): T {\r\n  return contexts.get(context._id);\r\n}\r\n","import { createElement } from './jsx-runtime';\r\nimport { prepareRender, finishRender, setRenderCallback } from './hooks';\r\nimport { batchUpdates } from './batch';\r\n\r\nexport { \r\n  useState, \r\n  useEffect, \r\n  useMemo, \r\n  useRef,\r\n  useErrorBoundary \r\n} from './hooks';\r\n\r\nexport { createContext, useContext } from './context';\r\nexport { batchUpdates } from './batch';\r\n\r\nlet isHydrating = false;\r\n\r\nexport async function hydrate(element: any, container: HTMLElement) {\r\n  isHydrating = true;\r\n  try {\r\n    await render(element, container);\r\n  } finally {\r\n    isHydrating = false;\r\n  }\r\n}\r\n\r\nexport async function render(element: any, container: HTMLElement) {\r\n  console.log('Rendering to:', container.id);\r\n  \r\n  batchUpdates(async () => {\r\n    const rendererId = prepareRender();\r\n    try {\r\n      setRenderCallback(render, element, container);\r\n      const domNode = await createElement(element);\r\n      \r\n      if (!isHydrating) {\r\n        container.innerHTML = '';\r\n      }\r\n      container.appendChild(domNode);\r\n      \r\n    } finally {\r\n      finishRender();\r\n    }\r\n  });\r\n}\r\n\r\n"],"names":["createElement","vnode","_a","fragment","child","node","type","props","result","error","element","key","value","eventName","existingHandler","children","childArray","childNode","batchQueue","isBatchingUpdates","batchUpdates","callback","queuedCallback","isBatching","currentRender","states","stateIndices","effects","memos","refs","globalRenderCallback","globalContainer","currentElement","setRenderCallback","container","prepareRender","finishRender","useState","initial","componentStates","index","state","setState","newValue","nextValue","rerender","useEffect","deps","effectIndex","componentEffects","prevEffect","dep","i","cleanup","useMemo","factory","memoIndex","componentMemos","prevMemo","useRef","refIndex","componentRefs","ref","rendererId","effect","useErrorBoundary","setError","contexts","createContext","defaultValue","id","prevValue","selector","useContext","context","isHydrating","hydrate","render","domNode"],"mappings":"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"}

package/dist/hooks.d.ts

@@ -0,0 +1,8 @@
+export declare function setRenderCallback(callback: (element: any, container: HTMLElement) => void, element: any, container: HTMLElement): void;
+export declare function prepareRender(): number;
+export declare function finishRender(): void;
+export declare function useState<T>(initial: T): [T, (value: T | ((prev: T) => T)) => void];
+export declare function useEffect(callback: () => (() => void) | void, deps?: any[]): void;
+export declare function useMemo<T>(factory: () => T, deps: any[]): T;
+export declare function useRef<T>(initial: T): any;
+export declare function useErrorBoundary(): [Error | null, () => void];

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { useState, useEffect, useMemo, useRef, useErrorBoundary } from './hooks';
+export { createContext, useContext } from './context';
+export { batchUpdates } from './batch';
+export declare function hydrate(element: any, container: HTMLElement): Promise<void>;
+export declare function render(element: any, container: HTMLElement): Promise<void>;

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,10 @@
+interface VNode {
+    type: string | Function;
+    props: Record<string, any>;
+}
+export declare function jsx(type: string | Function, props: any): VNode;
+export { jsx as jsxs, jsx as jsxDEV };
+export declare const Fragment: ({ children }: {
+    children: any;
+}) => any;
+export declare function createElement(vnode: VNode | any): Promise<Node>;

package/dist/test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vdom.d.ts

@@ -0,0 +1,8 @@
+interface VNode {
+    type: string | Function;
+    props: Record<string, any>;
+    key?: string | number;
+}
+export declare function diff(oldNode: VNode | any, newNode: VNode | any): boolean;
+export declare function shouldComponentUpdate(oldProps: any, newProps: any): boolean;
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "frontend-hamroun",
+  "version": "1.0.0",
+  "description": "A lightweight frontend framework with hooks and virtual DOM",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "clean": "node -e \"if(require('fs').existsSync('dist')) require('fs').rmSync('dist',{recursive:true})\"",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "frontend",
+    "framework",
+    "jsx",
+    "hooks",
+    "virtual-dom"
+  ],
+  "author": "Hamroun",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "your-repo-url"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@vitejs/plugin-react": "^4.0.4",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}