frontend-hamroun 1.1.54 → 1.1.56

package/README.md

@@ -1,420 +1,240 @@
-# Frontend Hamroun
+# Your Package Name
 
-A lightweight, modern frontend framework with hooks, virtual DOM, and server-side rendering capabilities.
+A lightweight Virtual DOM and hooks implementation with JSX support.
 
-## Features
+## Installation
 
-- 🚀 Fast Virtual DOM implementation
-- 🎯 Hooks-based state management
-- 🌐 Server-side rendering
-- 📱 Router with dynamic routes
-- 🔄 Context API
-- 🛠️ TypeScript support
-- 📦 Small bundle size (~12KB gzipped)
-- ⚡ Code splitting support
+```bash
+npm install your-package-name
+```
 
-## Installation
+## Quick Start
+
+Create a new project using:
 
 ```bash
-npm install frontend-hamroun
+npx create-frontend-app my-app
 # or
-yarn add frontend-hamroun
+npm create frontend-app@latest my-app
 ```
+Then:
 
-## Quick Start
+```bash
+cd my-app
+npm install
+npm run dev
+```
 
-```tsx
-import { render, useState } from 'frontend-hamroun';
+## Usage
+
+```jsx
+import { render, useState } from 'your-package-name';
 
-function Counter() {
+function App() {
   const [count, setCount] = useState(0);
-  
   return (
-    <button onClick={() => setCount(count + 1)}>
-      Count: {count}
-    </button>
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
   );
 }
 
-render(<Counter />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));
 ```
 
-## Core Features
+## Features
 
-### Hooks
+- Virtual DOM with efficient diffing
+- Hooks (useState, useEffect, useMemo, useRef)
+- Context API
+- Batch updates
+- Hydration support
+
+## Hooks
+
+### useState
+Manages component state.
 
 ```tsx
-import { useState, useEffect, useMemo, useContext } from 'frontend-hamroun';
+const [state, setState] = useState(initialValue);
+```
 
-// State Management
-const [state, setState] = useState(initialState);
+### useEffect
+Handles side effects in components.
 
-// Side Effects
+```tsx
 useEffect(() => {
   // Effect code
   return () => {
     // Cleanup code
   };
 }, [dependencies]);
-
-// Memoization
-const memoizedValue = useMemo(() => computeExpensiveValue(deps), [deps]);
 ```
 
-### Routing
+### useMemo
+Memoizes expensive computations.
 
 ```tsx
-import { Link, useRouter } from 'frontend-hamroun';
-
-function App() {
-  const router = useRouter();
-  
-  return (
-    <div>
-      <nav>
-        <Link href="/">Home</Link>
-        <Link href="/about">About</Link>
-      </nav>
-      {router.pathname === '/' && <Home />}
-      {router.pathname === '/about' && <About />}
-    </div>
-  );
-}
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-### Context API
+### useRef
+Creates a mutable reference.
 
 ```tsx
-import { createContext, useContext } from 'frontend-hamroun';
-
-const ThemeContext = createContext('light');
-
-function ThemedButton() {
-  const theme = useContext(ThemeContext);
-  return <button className={theme}>Click me</button>;
-}
+const ref = useRef(initialValue);
 ```
 
-## Server-Side Rendering
+### useErrorBoundary
+Handles component errors.
 
-### Quick Start
 ```tsx
-// server.ts
-import { renderToString } from 'frontend-hamroun';
-
-const html = await renderToString(<App />, {
-  title: 'My SSR App',
-  description: 'A server-rendered application',
-  scripts: ['/client.js'],
-  initialState: {
-    user: { id: 1, name: 'John' }
-  }
-});
+const [error, resetError] = useErrorBoundary();
 ```
 
-### Complete SSR Setup
-
-1. Server Setup:
-```typescript
-// server.ts
-import express from 'express';
-import { renderToString } from 'frontend-hamroun';
-
-const app = express();
-
-app.get('*', async (req, res) => {
-  try {
-    const html = await renderToString(<App />, {
-      title: 'My App',
-      description: 'Server-rendered app',
-      scripts: ['/client.js'],
-      styles: ['/styles.css'],
-      meta: {
-        'og:title': 'My App',
-        'theme-color': '#ffffff'
-      },
-      initialState: {
-        url: req.url,
-        user: req.user
-      },
-      bodyAttrs: { class: 'app-root' },
-      htmlAttrs: { lang: 'en' }
-    });
-    
-    res.send(html);
-  } catch (error) {
-    res.status(500).send('Server Error');
-  }
-});
-```
+## Context API
 
-2. Client Hydration:
-```typescript
-// client.tsx
-import { hydrate } from 'frontend-hamroun';
-
-// Type-safe state access
-declare global {
-  interface Window {
-    __INITIAL_STATE__: {
-      url: string;
-      user?: { id: number; name: string };
-    }
-  }
-}
-
-const { url, user } = window.__INITIAL_STATE__;
+Create and use shared state across components.
 
-hydrate(<App url={url} user={user} />, document.getElementById('root')!);
-```
+```tsx
+const ThemeContext = createContext('light');
 
-3. Template Customization:
-```typescript
-// Custom template options
-interface TemplateOptions {
-  title: string;
-  description?: string;
-  scripts?: string[];
-  styles?: string[];
-  meta?: Record<string, string>;
-  initialState?: any;
-  bodyAttrs?: Record<string, string>;
-  htmlAttrs?: Record<string, string>;
+function App() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Child />
+    </ThemeContext.Provider>
+  );
 }
-```
 
-### SSR Features
-
-- ✨ Full HTML document generation
-- 🔄 Automatic state hydration
-- 🎨 Customizable templates
-- 📱 Meta tags for SEO
-- 🛡️ XSS protection
-- 🚀 Streaming support
-- 📦 Asset optimization
-- 🔍 Error handling
-
-### Best Practices
-
-1. State Management:
-```typescript
-// Shared types between server and client
-interface AppState {
-  url: string;
-  user?: UserData;
-  settings: AppSettings;
+function Child() {
+  const theme = useContext(ThemeContext);
+  // Or use selector for performance
+  const isDark = ThemeContext.useSelector(theme => theme === 'dark');
 }
-
-// Server
-const state: AppState = {
-  url: req.url,
-  user: await getUser(req),
-  settings: await getSettings()
-};
-
-// Client
-const { url, user, settings } = window.__INITIAL_STATE__ as AppState;
 ```
 
-2. Error Handling:
-```typescript
-// Server-side error boundary
-try {
-  const html = await renderToString(<App />, options);
-  res.send(html);
-} catch (error) {
-  const errorHtml = await renderToString(
-    <ErrorPage error={error} />,
-    { title: 'Error' }
-  );
-  res.status(500).send(errorHtml);
-}
-```
+## Performance Optimization
 
-3. Performance Optimization:
-```typescript
-// Caching
-const cached = await cache.get(cacheKey);
-if (cached) return cached;
-
-const html = await renderToString(<App />, {
-  ...options,
-  scripts: [
-    { src: '/client.js', async: true, defer: true }
-  ]
-});
+### Batch Updates
+Group multiple state updates together.
 
-await cache.set(cacheKey, html, '1h');
-```
+```tsx
+import { batchUpdates } from 'your-package-name';
 
-### Basic SSR Setup
-
-```typescript
-// Server-side rendering with customization
-const html = await renderToString(<App />, {
-  title: 'My App',
-  description: 'Server-rendered application',
-  scripts: ['/assets/client.js'],
-  styles: ['/assets/styles.css'],
-  meta: {
-    'theme-color': '#ffffff',
-    'og:title': 'My App',
-    'og:description': 'My awesome app'
-  },
-  initialState: {
-    user: { name: 'John' }
-  },
-  bodyAttrs: { class: 'dark-mode' },
-  htmlAttrs: { lang: 'en', dir: 'ltr' }
+batchUpdates(() => {
+  setValue1(newValue1);
+  setValue2(newValue2);
 });
 ```
 
-### Express Server Integration
-
-```typescript
-import express from 'express';
-import { renderToString } from 'frontend-hamroun';
-
-const app = express();
-
-app.get('*', async (req, res) => {
-  const initialState = {
-    url: req.url,
-    user: req.user // From your auth middleware
-  };
-
-  const html = await renderToString(<App />, {
-    title: 'My App',
-    scripts: ['/client.js'],
-    initialState
-  });
+### Component Memoization
+Prevent unnecessary re-renders.
 
-  res.send(html);
-});
+```tsx
+const MemoizedComponent = useMemo(() => (
+  <ExpensiveComponent prop={value} />
+), [value]);
 ```
 
-### Client-Side Hydration
-
-```typescript
-import { hydrate } from 'frontend-hamroun';
-
-// Access the server-provided state
-declare global {
-  interface Window {
-    __INITIAL_STATE__: any;
-  }
-}
+## Server-Side Rendering
 
-const initialState = window.__INITIAL_STATE__;
+```tsx
+import { hydrate } from 'your-package-name';
 
-hydrate(
-  <App initialState={initialState} />, 
-  document.getElementById('root')!
-);
+// On the client
+hydrate(<App />, document.getElementById('root'));
 ```
 
-## CLI Tools
-
-Create a new project:
+## Event Handling
 
-```bash
-npx create-frontend-app my-app
+```tsx
+function Button() {
+  return (
+    <button 
+      onClick={(e) => handleClick(e)}
+      onMouseOver={(e) => handleHover(e)}
+    >
+      Click me
+    </button>
+  );
+}
 ```
 
-## Performance
-
-- Initial bundle: 12KB gzipped
-- Dynamic imports for code splitting
-- Automatic batching for state updates
-- Efficient virtual DOM diffing
-
-## Security
-
-- XSS protection
-- Content Security Policy support
-- Type-safe props
-- Secure by default
+## Styling
 
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## Development Tools
-
-- TypeScript support
-- Hot Module Replacement
-- Developer tools extension
-- Error boundaries
-- Performance monitoring
-
-## Advanced Features
-
-### Template Customization
-```typescript
-interface TemplateOptions {
-  title: string;
-  description?: string;
-  scripts?: string[];
-  styles?: string[];
-  meta?: Record<string, string>;
-  initialState?: any;
-  bodyAttrs?: Record<string, string>;
-  htmlAttrs?: Record<string, string>;
+```tsx
+function StyledComponent() {
+  return (
+    <div style={{ 
+      color: 'blue',
+      padding: '20px'
+    }}>
+      Styled content
+    </div>
+  );
 }
-
-// Usage with custom template
-const html = await renderToString(<App />, {
-  title: 'Custom Template',
-  styles: ['/styles.css'],
-  bodyAttrs: { 'data-theme': 'dark' }
-});
 ```
 
-### Error Handling
-```typescript
-// Error boundary component
-function ErrorBoundary({ children }) {
+## Error Handling
+
+```tsx
+function ErrorBoundary() {
   const [error, resetError] = useErrorBoundary();
 
   if (error) {
     return (
-      <div role="alert">
-        <h2>Something went wrong</h2>
-        <pre>{error.message}</pre>
+      <div>
+        <h1>Something went wrong!</h1>
         <button onClick={resetError}>Try again</button>
       </div>
     );
   }
 
-  return children;
+  return <ComponentThatMightError />;
 }
 ```
 
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+## Best Practices
 
-## License
+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
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+## API Reference
 
-## Support
+### Core
+- `render(element, container)`
+- `hydrate(element, container)`
+- `createElement(vnode)`
 
-- Documentation: [Link to docs]
-- Issues: [GitHub Issues]
-- Discussions: [GitHub Discussions]
+### 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)`
 
-## Team
+## License
 
-- Hamroun - Lead Developer
+MIT License - feel free to use in any project.
 
-## Acknowledgments
+## Contributing
 
-Special thanks to the open-source community and all contributors.
+Contributions are welcome! Please read our contributing guidelines and submit pull requests.
+`````

package/dist/hooks.d.ts

@@ -6,13 +6,3 @@ export declare function useEffect(callback: () => (() => void) | void, deps?: an
 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];
-export declare function useRouter(): {
-    push: () => void;
-    replace: () => void;
-    back: () => void;
-    forward: () => void;
-    pathname: string;
-    search: string;
-    hash: string;
-    params: Record<string, string>;
-} | undefined;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export { useState, useEffect, useMemo, useRef, useErrorBoundary } from './hooks';
-export { createElement } from './jsx-runtime';
 export { createContext, useContext } from './context';
 export { batchUpdates } from './batch';
 export { jsx, jsxs, Fragment } from './jsx-runtime';

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let e=!1;const t=[];function n(n){if(e)t.push(n);else{e=!0;try{for(n();t.length>0;){const e=t.shift();null==e||e()}}finally{e=!1}}}let r=0;const o=new Map,s=new Map,i=new Map,a=new Map,c=new Map;let l=null,p=null,u=null;const d="undefined"==typeof window,f=new Map;function h(t){if(!r)throw new Error("useState must be called within a render");if(d){f.has(r)||f.set(r,new Map);const e=f.get(r),n=s.get(r)||0;e.has(n)||e.set(n,t);const o=e.get(n),i=e=>{};return s.set(r,n+1),[o,i]}o.has(r)||o.set(r,[]);const i=o.get(r),a=s.get(r);a>=i.length&&i.push(t);const c=i[a];return s.set(r,a+1),[c,t=>{const o="function"==typeof t?t(i[a]):t;i[a]!==o&&(i[a]=o,e?n((()=>w(r))):w(r))}]}function y(e,t){if(!r)throw new Error("useEffect must be called within a render");if(d){const e=s.get(r);return void s.set(r,e+1)}const n=s.get(r);i.has(r)||i.set(r,[]);const o=i.get(r),a=o[n];a&&t&&a.deps&&!t.some(((e,t)=>e!==a.deps[t]))||((null==a?void 0:a.cleanup)&&a.cleanup(),queueMicrotask((()=>{const r=e()||void 0;o[n]={cleanup:r,deps:t}}))),s.set(r,n+1)}async function w(e){try{const t=i.get(e);t&&(t.forEach((e=>{e.cleanup&&e.cleanup()})),i.set(e,[])),l&&p&&u&&await l(u,p)}catch(t){console.error("Error during rerender:",t)}}function m(e,t){console.log("JSX Transform:",{type:e,props:t});const n={...t};return arguments.length>2&&(n.children=Array.prototype.slice.call(arguments,2)),{type:e,props:n}}async function g(e){var t;if(console.log("Creating element from:",e),null==e)return document.createTextNode("");if("boolean"==typeof e)return document.createTextNode("");if("number"==typeof e||"string"==typeof e)return document.createTextNode(String(e));if(Array.isArray(e)){const t=document.createDocumentFragment();for(const n of e){const e=await g(n);t.appendChild(e)}return t}if("type"in e&&void 0!==e.props){const{type:r,props:o}=e;if("function"==typeof r)try{const e=await r(o||{}),t=await g(e);return t instanceof Element&&t.setAttribute("data-component-id",r.name||r.toString()),t}catch(n){return console.error("Error rendering component:",n),document.createTextNode("")}const s=document.createElement(r);for(const[e,n]of Object.entries(o||{}))if("children"!==e)if(e.startsWith("on")&&"function"==typeof n){const r=e.toLowerCase().slice(2),o=null==(t=s.__events)?void 0:t[r];o&&s.removeEventListener(r,o),s.addEventListener(r,n),s.__events||(s.__events={}),s.__events[r]=n}else"style"===e&&"object"==typeof n?Object.assign(s.style,n):"className"===e?s.setAttribute("class",String(n)):"key"!==e&&"ref"!==e&&s.setAttribute(e,String(n));const i=null==o?void 0:o.children;if(null!=i){const e=Array.isArray(i)?i.flat():[i];for(const t of e){const e=await g(t);s.appendChild(e)}}return s}return document.createTextNode(String(e))}let b=!1;async function v(e,t){console.log("Rendering to:",t.id),n((async()=>{r++,s.set(r,0);try{!function(e,t,n){l=e,p=n,u=t}(v,e,t);const n=await g(e);b||(t.innerHTML=""),t.appendChild(n)}finally{d&&f.delete(r),r=0}}))}async function $(e){var t;if(null==e||"boolean"==typeof e)return"";if(e&&"object"==typeof e&&"function"==typeof e.render)try{return $(await e.render())}catch(n){return console.error("Error rendering component instance:",n),""}if("number"==typeof e||"string"==typeof e)return S(String(e));if(Array.isArray(e)){return(await Promise.all(e.map((e=>$(e))))).join("")}if("function"==typeof e){e.name;try{return $(await e({}))}finally{}}if(e.type){if("function"==typeof e.type){e.type.name,e.props;try{return $(await e.type(e.props||{}))}finally{}}let n=`<${e.type}`;e.props&&(n+=function(e){let t="";for(const[n,r]of Object.entries(e))"children"!==n&&"key"!==n&&"ref"!==n&&("className"!==n?"style"!==n||"object"!=typeof r||null===r?n.startsWith("on")||("boolean"!=typeof r?null!=r&&(t+=` ${n}="${S(String(r))}"`):r&&(t+=` ${n}`)):t+=` style="${x(r)}"`:r&&(t+=` class="${S(String(r))}"`));return t}(e.props));if(new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]).has(e.type))return n+"/>";if(n+=">",null==(t=e.props)?void 0:t.children){const t=Array.isArray(e.props.children)?e.props.children:[e.props.children];for(const e of t)n+=await $(e)}return n+`</${e.type}>`}return""}function S(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function x(e){return Object.entries(e).map((([e,t])=>{return`${n=e,n.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}: ${t}`;var n})).join("; ")}let E={pathname:"undefined"!=typeof window?window.location.pathname:"/",search:"undefined"!=typeof window?window.location.search:"",hash:"undefined"!=typeof window?window.location.hash:"",params:{}};const j=new Set;function A(e,t={}){"undefined"!=typeof window&&function(e,t={}){const n=new URL(e,window.location.origin),r={pathname:n.pathname,search:n.search,hash:n.hash,params:{}};t.replace?window.history.replaceState(r,"",n.toString()):window.history.pushState(r,"",n.toString()),E=r,j.forEach((e=>e(r))),t.scroll&&window.scrollTo(0,0)}(e,t)}exports.Fragment=({children:e})=>e,exports.Link=function({href:e,children:t,replace:n=!1,className:r,style:o,...s}){return{type:"a",props:{href:e,onClick:t=>{t.preventDefault(),A(e,{replace:n})},className:r,style:o,...s,children:t}}},exports.batchUpdates=n,exports.createContext=function(e){return{Provider:({value:e,children:t})=>t,Consumer:({children:t})=>t(e),_id:Symbol(),useSelector:t=>t(e)}},exports.createElement=g,exports.hydrate=async function(e,t){b=!0;try{await v(e,t)}finally{b=!1}},exports.jsx=m,exports.jsxs=m,exports.render=v,exports.renderToString=async function(e,t={}){var n;try{let r;if("function"==typeof e){const t=await e({});r=await $(t)}else r=await $(e);const o=null==(n=t.scripts)?void 0:n.map((e=>"string"==typeof e?{src:e,defer:!0}:{...e,defer:e.defer??!0}));return function(e,t){const{title:n,description:r="",scripts:o=[],styles:s=[],initialState:i={},meta:a={},bodyAttrs:c={},htmlAttrs:l={lang:"en"}}=t,p=Object.entries(l).map((([e,t])=>`${e}="${t}"`)).join(" "),u=Object.entries(c).map((([e,t])=>`${e}="${t}"`)).join(" "),d=Object.entries(a).map((([e,t])=>`    <meta name="${e}" content="${t}">`)).join("\n"),f=o.map((e=>{if("string"==typeof e)return`    <script src="${e}" defer><\/script>`;const{src:t,defer:n=!0,async:r=!1,type:o}=e;return`    <script src="${t}"${n?" defer":""}${r?" async":""}${o?` type="${o}"`:""}><\/script>`})).join("\n");return`<!DOCTYPE html>\n<html ${p}>\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    ${r?`<meta name="description" content="${r}">\n`:""}${d}\n    <title>${n}</title>\n${s.map((e=>`    <link rel="stylesheet" href="${e}">`)).join("\n")}\n    <script>\n      window.__INITIAL_STATE__ = ${JSON.stringify(i)};\n    <\/script>\n  </head>\n  <body ${u}>\n    <div id="root">${e}</div>\n${f}\n  </body>\n</html>`}(r,{title:"Frontend Hamroun App",...t,scripts:o})}catch(r){if(console.error("Server rendering error:",r),"development"===process.env.NODE_ENV){return`\n        <!DOCTYPE html>\n        <html>\n          <head><title>Rendering Error</title></head>\n          <body>\n            <h1>Server Rendering Error</h1>\n            <pre>${S(r instanceof Error?r.stack||r.message:String(r))}</pre>\n          </body>\n        </html>\n      `}return""}},exports.useContext=function(e){return e},exports.useEffect=y,exports.useErrorBoundary=function(){const[e,t]=h(null);return[e,()=>t(null)]},exports.useMemo=function(e,t){if(!r)throw new Error("useMemo must be called within a render");const n=s.get(r);a.has(r)||a.set(r,[]);const o=a.get(r),i=o[n];if(!i||t&&t.some(((e,t)=>!Object.is(e,i.deps[t])))){const i=e();return o[n]={value:i,deps:t},s.set(r,n+1),i}return s.set(r,n+1),i.value},exports.useRef=function(e){if(!r)throw new Error("useRef must be called within a render");const t=s.get(r);c.has(r)||c.set(r,[]);const n=c.get(r);if(t>=n.length){const o={current:e};return n.push(o),s.set(r,t+1),o}const o=n[t];return s.set(r,t+1),o},exports.useRouter=function(){const[e,t]=h(E);return y((()=>{const e=e=>{t(e)},n=()=>{E={pathname:window.location.pathname,search:window.location.search,hash:window.location.hash,params:{}},t(E)};return j.add(e),window.addEventListener("popstate",n),()=>{j.delete(e),window.removeEventListener("popstate",n)}}),[]),{...e,push:(e,t)=>A(e,t),replace:(e,t)=>A(e,{...t,replace:!0}),back:()=>window.history.back(),forward:()=>window.history.forward()}},exports.useState=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let e=!1;const t=[];function n(n){if(e)t.push(n);else{e=!0;try{for(n();t.length>0;){const e=t.shift();null==e||e()}}finally{e=!1}}}let r=0;const o=new Map,s=new Map,a=new Map,i=new Map,c=new Map;let l=null,u=null,p=null;const d="undefined"==typeof window,f=new Map;function h(e,t,n){l=e,u=n,p=t}function w(){return r++,s.set(r,0),r}function y(){d&&f.delete(r),r=0}function m(t){if(!r)throw new Error("useState must be called within a render");if(d){f.has(r)||f.set(r,new Map);const e=f.get(r),n=s.get(r)||0;e.has(n)||e.set(n,t);const o=e.get(n),a=e=>{};return s.set(r,n+1),[o,a]}o.has(r)||o.set(r,[]);const a=o.get(r),i=s.get(r);i>=a.length&&a.push(t);const c=a[i];return s.set(r,i+1),[c,t=>{const o="function"==typeof t?t(a[i]):t;a[i]!==o&&(a[i]=o,e?n((()=>b(r))):b(r))}]}function g(e,t){if(!r)throw new Error("useEffect must be called within a render");const n=s.get(r);a.has(r)||a.set(r,[]);const o=a.get(r),i=o[n];i&&t&&i.deps&&!t.some(((e,t)=>e!==i.deps[t]))||((null==i?void 0:i.cleanup)&&i.cleanup(),queueMicrotask((()=>{const r=e()||void 0;o[n]={cleanup:r,deps:t}}))),s.set(r,n+1)}async function b(e){try{const t=a.get(e);t&&(t.forEach((e=>{e.cleanup&&e.cleanup()})),a.set(e,[])),l&&u&&p&&await l(p,u)}catch(t){console.error("Error during rerender:",t)}}function v(e,t){console.log("JSX Transform:",{type:e,props:t});const n={...t};return arguments.length>2&&(n.children=Array.prototype.slice.call(arguments,2)),{type:e,props:n}}async function x(e){var t;if(console.log("Creating element from:",e),null==e)return document.createTextNode("");if("boolean"==typeof e)return document.createTextNode("");if("number"==typeof e||"string"==typeof e)return document.createTextNode(String(e));if(Array.isArray(e)){const t=document.createDocumentFragment();for(const n of e){const e=await x(n);t.appendChild(e)}return t}if("type"in e&&void 0!==e.props){const{type:r,props:o}=e;if("function"==typeof r)try{const e=await r(o||{}),t=await x(e);return t instanceof Element&&t.setAttribute("data-component-id",r.name||r.toString()),t}catch(n){return console.error("Error rendering component:",n),document.createTextNode("")}const s=document.createElement(r);for(const[e,n]of Object.entries(o||{}))if("children"!==e)if(e.startsWith("on")&&"function"==typeof n){const r=e.toLowerCase().slice(2),o=null==(t=s.__events)?void 0:t[r];o&&s.removeEventListener(r,o),s.addEventListener(r,n),s.__events||(s.__events={}),s.__events[r]=n}else"style"===e&&"object"==typeof n?Object.assign(s.style,n):"className"===e?s.setAttribute("class",String(n)):"key"!==e&&"ref"!==e&&s.setAttribute(e,String(n));const a=null==o?void 0:o.children;if(null!=a){const e=Array.isArray(a)?a.flat():[a];for(const t of e){const e=await x(t);s.appendChild(e)}}return s}return document.createTextNode(String(e))}let S=!1;async function E(e,t){console.log("Rendering to:",t.id),n((async()=>{w();try{h(E,e,t);const n=await x(e);S||(t.innerHTML=""),t.appendChild(n)}finally{y()}}))}function j(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}let A={pathname:"undefined"!=typeof window?window.location.pathname:"/",search:"undefined"!=typeof window?window.location.search:"",hash:"undefined"!=typeof window?window.location.hash:"",params:{}};const M=new Set;function C(e,t={}){"undefined"!=typeof window&&function(e,t={}){const n=new URL(e,window.location.origin),r={pathname:n.pathname,search:n.search,hash:n.hash,params:{}};t.replace?window.history.replaceState(r,"",n.toString()):window.history.pushState(r,"",n.toString()),A=r,M.forEach((e=>e(r))),t.scroll&&window.scrollTo(0,0)}(e,t)}exports.Fragment=({children:e})=>e,exports.Link=function({href:e,children:t,replace:n=!1,className:r,style:o,...s}){return{type:"a",props:{href:e,onClick:t=>{t.preventDefault(),C(e,{replace:n})},className:r,style:o,...s,children:t}}},exports.batchUpdates=n,exports.createContext=function(e){return{Provider:({value:e,children:t})=>t,Consumer:({children:t})=>t(e),_id:Symbol(),useSelector:t=>t(e)}},exports.hydrate=async function(e,t){S=!0;try{await E(e,t)}finally{S=!1}},exports.jsx=v,exports.jsxs=v,exports.render=E,exports.renderToString=async function e(t){w(),h((()=>{}),t,null);try{if(null==t)return"";if("boolean"==typeof t)return"";if("number"==typeof t||"string"==typeof t)return j(String(t));if(Array.isArray(t)){return(await Promise.all(t.map(e))).join("")}if("type"in t&&void 0!==t.props){const{type:o,props:s}=t;if("function"==typeof o)try{w();const t=await o(s||{}),n=await e(t);return y(),n}catch(r){return console.error("Error rendering component:",r),""}let a=`<${o}`;for(const[e,t]of Object.entries(s||{}))"children"!==e&&("className"===e?a+=` class="${j(String(t))}"`:"style"===e&&"object"==typeof t?a+=` style="${n=t||{},Object.entries(n).map((([e,t])=>{return`${n=e,n.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}:${t}`;var n})).join(";")}"`:e.startsWith("on")||(a+=` ${e}="${j(String(t))}"`));if(new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]).has(o))return a+"/>";if(a+=">",null==s?void 0:s.children){const t=Array.isArray(s.children)?s.children:[s.children];a+=(await Promise.all(t.map(e))).join("")}return a+`</${o}>`}return j(String(t))}finally{y()}var n},exports.useContext=function(e){return e},exports.useEffect=g,exports.useErrorBoundary=function(){const[e,t]=m(null);return[e,()=>t(null)]},exports.useMemo=function(e,t){if(!r)throw new Error("useMemo must be called within a render");const n=s.get(r);i.has(r)||i.set(r,[]);const o=i.get(r),a=o[n];if(!a||t&&t.some(((e,t)=>!Object.is(e,a.deps[t])))){const a=e();return o[n]={value:a,deps:t},s.set(r,n+1),a}return s.set(r,n+1),a.value},exports.useRef=function(e){if(!r)throw new Error("useRef must be called within a render");const t=s.get(r);c.has(r)||c.set(r,[]);const n=c.get(r);if(t>=n.length){const o={current:e};return n.push(o),s.set(r,t+1),o}const o=n[t];return s.set(r,t+1),o},exports.useRouter=function(){const[e,t]=m(A);return g((()=>{const e=e=>{t(e)},n=()=>{A={pathname:window.location.pathname,search:window.location.search,hash:window.location.hash,params:{}},t(A)};return M.add(e),window.addEventListener("popstate",n),()=>{M.delete(e),window.removeEventListener("popstate",n)}}),[]),{...e,push:(e,t)=>C(e,t),replace:(e,t)=>C(e,{...t,replace:!0}),back:()=>window.history.back(),forward:()=>window.history.forward()}},exports.useState=m;
 //# sourceMappingURL=index.js.map