frontend-hamroun 1.2.80 → 1.2.83

package/dist/server-renderer-C1WXH-zV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-renderer-C1WXH-zV.js","sources":["../src/batch.ts","../src/hooks.ts","../src/server-renderer.ts"],"sourcesContent":["export let isBatching = false;\r\nconst queue: Function[] = [];\r\n\r\nexport function batchUpdates(fn: Function) {\r\n  if (isBatching) {\r\n    queue.push(fn);\r\n    return;\r\n  }\r\n\r\n  isBatching = true;\r\n  try {\r\n    fn();\r\n    while (queue.length > 0) {\r\n      const nextFn = queue.shift();\r\n      nextFn?.();\r\n    }\r\n  } finally {\r\n    isBatching = false;\r\n  }\r\n}\r\n\r\nexport function getIsBatching() {\r\n  return isBatching;\r\n}\r\n","import { createElement } from './jsx-runtime.js';\r\nimport { batchUpdates, isBatching } from './batch.js';\r\nimport { diff } from './vdom.js';\r\nimport { createContext, useContext } from './context.js';\r\n\r\n// Current render ID counter\r\nlet currentRender = 0;\r\nlet isServerRender = false;\r\n\r\n// State storage\r\nconst states = new Map<number, any[]>();\r\nconst stateIndices = new Map<number, number>();\r\nconst effects = new Map<number, any[]>();\r\nconst memos = new Map<number, any[]>();\r\nconst refs = new Map<number, any[]>();\r\n\r\n// Server-side rendering detection\r\nconst isServer = typeof window === 'undefined';\r\nconst serverStates = new Map<number, Map<number, any>>();\r\n\r\n// Rendering callbacks\r\nlet globalRenderCallback: any = null;\r\nlet globalContainer: any = null;\r\nlet currentElement: any = null;\r\n\r\nexport function setRenderCallback(callback: any, element: any, container: any): void {\r\n  globalRenderCallback = callback;\r\n  globalContainer = container;\r\n  currentElement = element;\r\n}\r\n\r\nexport function prepareRender(isSSR: boolean = false): number {\r\n  currentRender++;\r\n  isServerRender = isSSR;\r\n  stateIndices.set(currentRender, 0);\r\n  return currentRender;\r\n}\r\n\r\nexport function finishRender(): void {\r\n  if (isServer || isServerRender) {\r\n    serverStates.delete(currentRender);\r\n  }\r\n  isServerRender = false;\r\n  currentRender = 0;\r\n}\r\n\r\nexport function useState<T>(initial: T): [T, (newValue: T | ((prev: T) => T)) => void] {\r\n  if (!currentRender && !isServerRender) {\r\n    throw new Error(\"useState must be called within a render\");\r\n  }\r\n\r\n  // Handle server-side rendering separately\r\n  if (isServer || isServerRender) {\r\n    if (!serverStates.has(currentRender)) {\r\n      serverStates.set(currentRender, new Map());\r\n    }\r\n    const componentState = serverStates.get(currentRender)!;\r\n    const index = stateIndices.get(currentRender) || 0;\r\n    \r\n    if (!componentState.has(index)) {\r\n      componentState.set(index, initial);\r\n    }\r\n    \r\n    const state = componentState.get(index);\r\n    // In SSR, setState is a no-op\r\n    const setState = (_newValue: T | ((prev: T) => T)) => {};\r\n    \r\n    stateIndices.set(currentRender, index + 1);\r\n    return [state, setState];\r\n  }\r\n\r\n  // Client-side implementation\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) || 0;\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  \r\n  const setState = (newValue: T | ((prev: T) => T)) => {\r\n    const nextValue = typeof newValue === 'function'\r\n      ? (newValue as ((prev: T) => T))(componentStates[index])\r\n      : newValue;\r\n      \r\n    if (componentStates[index] === nextValue) return;\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[]): void {\r\n  if (!currentRender && !isServerRender) throw new Error(\"useEffect must be called within a render\");\r\n\r\n  // Skip effects on server\r\n  if (isServer || isServerRender) {\r\n    const effectIndex = stateIndices.get(currentRender) || 0;\r\n    stateIndices.set(currentRender, effectIndex + 1);\r\n    return;\r\n  }\r\n\r\n  const effectIndex = stateIndices.get(currentRender) || 0;\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  if (!prevEffect || !deps || !prevEffect.deps || deps.some((dep, i) => dep !== prevEffect.deps[i])) {\r\n    if (prevEffect?.cleanup) {\r\n      prevEffect.cleanup();\r\n    }\r\n    \r\n    // Schedule effect execution after render is complete\r\n    queueMicrotask(() => {\r\n      const cleanup = callback() || undefined;\r\n      componentEffects[effectIndex] = { cleanup, deps: 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 && !isServerRender) throw new Error(\"useMemo must be called within a render\");\r\n  \r\n  const memoIndex = stateIndices.get(currentRender) || 0;\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: 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): { current: T } {\r\n  if (!currentRender && !isServerRender) throw new Error(\"useRef must be called within a render\");\r\n  \r\n  const refIndex = stateIndices.get(currentRender) || 0;\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  \r\n  if (refIndex >= componentRefs.length) {\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\nasync function rerender(rendererId: number): Promise<void> {\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    // Trigger re-render\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\nexport function useErrorBoundary() {\r\n  const [error, setError] = useState(null);\r\n  return [error, () => setError(null)];\r\n}\r\n\r\n// Re-export from context to match index.js\r\nexport { createContext, useContext };\r\n","import { VNode } from './types.js';\r\nimport { prepareRender, finishRender } from './hooks.js';\r\n\r\nexport async function renderToString(element: any): Promise<string> {\r\n  const renderId = prepareRender(true); // Mark as SSR\r\n  \r\n  try {\r\n    const html = await renderNodeToString(element);\r\n    return html;\r\n  } finally {\r\n    finishRender();\r\n  }\r\n}\r\n\r\nasync function renderNodeToString(node: any): Promise<string> {\r\n  // Handle null, undefined, boolean\r\n  if (node == null || typeof node === 'boolean') {\r\n    return '';\r\n  }\r\n\r\n  // Handle primitives\r\n  if (typeof node === 'string' || typeof node === 'number') {\r\n    return escapeHtml(String(node));\r\n  }\r\n\r\n  // Handle arrays\r\n  if (Array.isArray(node)) {\r\n    const results = await Promise.all(node.map(child => renderNodeToString(child)));\r\n    return results.join('');\r\n  }\r\n\r\n  // Handle objects with type and props (React-like elements)\r\n  if (node && typeof node === 'object' && 'type' in node) {\r\n    const { type, props = {} } = node;\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        return await renderNodeToString(result);\r\n      } catch (error:any) {\r\n        console.error('Error rendering component:', error);\r\n        return `<!-- Error rendering component: ${error.message} -->`;\r\n      }\r\n    }\r\n\r\n    // Handle DOM elements\r\n    if (typeof type === 'string') {\r\n      return await renderDOMElement(type, props);\r\n    }\r\n  }\r\n\r\n  // Fallback for other objects\r\n  if (typeof node === 'object') {\r\n    return escapeHtml(JSON.stringify(node));\r\n  }\r\n\r\n  return escapeHtml(String(node));\r\n}\r\n\r\nasync function renderDOMElement(tagName: string, props: any): Promise<string> {\r\n  const { children, ...attrs } = props;\r\n  \r\n  // Self-closing tags\r\n  const voidElements = new Set([\r\n    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',\r\n    'link', 'meta', 'param', 'source', 'track', 'wbr'\r\n  ]);\r\n\r\n  // Build attributes string\r\n  const attributeString = Object.entries(attrs)\r\n    .filter(([key, value]) => {\r\n      // Filter out React-specific props and event handlers\r\n      if (key.startsWith('on') || key === 'key' || key === 'ref') return false;\r\n      if (value == null || value === false) return false;\r\n      return true;\r\n    })\r\n    .map(([key, value]) => {\r\n      // Handle className -> class\r\n      if (key === 'className') key = 'class';\r\n      \r\n      // Handle boolean attributes\r\n      if (value === true) return key;\r\n      \r\n      // Handle style objects\r\n      if (key === 'style' && typeof value === 'object' && value !== null) {\r\n        const styleString = Object.entries(value)\r\n          .map(([prop, val]) => `${kebabCase(prop)}:${val}`)\r\n          .join(';');\r\n        return `style=\"${escapeHtml(styleString)}\"`;\r\n      }\r\n      \r\n      return `${key}=\"${escapeHtml(String(value))}\"`;\r\n    })\r\n    .join(' ');\r\n\r\n  const openTag = `<${tagName}${attributeString ? ' ' + attributeString : ''}>`;\r\n  \r\n  // Self-closing elements\r\n  if (voidElements.has(tagName)) {\r\n    return openTag.slice(0, -1) + '/>';\r\n  }\r\n\r\n  // Elements with children\r\n  const closeTag = `</${tagName}>`;\r\n  \r\n  if (children != null) {\r\n    const childrenString = await renderNodeToString(children);\r\n    return openTag + childrenString + closeTag;\r\n  }\r\n  \r\n  return openTag + closeTag;\r\n}\r\n\r\nfunction escapeHtml(text: string): string {\r\n  const htmlEscapes: Record<string, string> = {\r\n    '&': '&amp;',\r\n    '<': '&lt;',\r\n    '>': '&gt;',\r\n    '\"': '&quot;',\r\n    \"'\": '&#x27;',\r\n    '/': '&#x2F;'\r\n  };\r\n  \r\n  return text.replace(/[&<>\"'/]/g, (match) => htmlEscapes[match]);\r\n}\r\n\r\nfunction kebabCase(str: string): string {\r\n  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\r\n}\r\n"],"names":["index","state","setState","effectIndex","ref"],"mappings":"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"}

package/dist/server-renderer-Chs-nmJm.cjs

@@ -0,0 +1,2 @@
+"use strict";exports.isBatching=!1;const e=[];function t(t){if(exports.isBatching)e.push(t);else{exports.isBatching=!0;try{for(t();e.length>0;){const t=e.shift();t?.()}}finally{exports.isBatching=!1}}}let n=0,r=!1;const s=new Map,o=new Map,i=new Map,c=new Map,a=new Map,u="undefined"==typeof window,p=new Map;let l=null,f=null,g=null;function h(e=!1){return n++,r=e,o.set(n,0),n}function d(){(u||r)&&p.delete(n),r=!1,n=0}function w(e){if(!n&&!r)throw new Error("useState must be called within a render");if(u||r){p.has(n)||p.set(n,new Map);const t=p.get(n),r=o.get(n)||0;t.has(r)||t.set(r,e);const s=t.get(r),i=e=>{};return o.set(n,r+1),[s,i]}s.has(n)||s.set(n,[]);const i=s.get(n),c=o.get(n)||0;c>=i.length&&i.push(e);const a=i[c];return o.set(n,c+1),[a,e=>{const r="function"==typeof e?e(i[c]):e;i[c]!==r&&(i[c]=r,exports.isBatching?t((()=>y(n))):y(n))}]}async function y(e){try{const t=i.get(e);t&&(t.forEach((e=>{e.cleanup&&e.cleanup()})),i.set(e,[])),l&&f&&g&&await l(g,f)}catch(t){console.error("Error during rerender:",t)}}async function m(e){if(null==e||"boolean"==typeof e)return"";if("string"==typeof e||"number"==typeof e)return x(String(e));if(Array.isArray(e)){return(await Promise.all(e.map((e=>m(e))))).join("")}if(e&&"object"==typeof e&&"type"in e){const{type:n,props:r={}}=e;if("function"==typeof n)try{const e=await n(r);return await m(e)}catch(t){return console.error("Error rendering component:",t),`\x3c!-- Error rendering component: ${t.message} --\x3e`}if("string"==typeof n)return await async function(e,t){const{children:n,...r}=t,s=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),o=Object.entries(r).filter((([e,t])=>!e.startsWith("on")&&"key"!==e&&"ref"!==e&&(null!=t&&!1!==t))).map((([e,t])=>{if("className"===e&&(e="class"),!0===t)return e;if("style"===e&&"object"==typeof t&&null!==t){return`style="${x(Object.entries(t).map((([e,t])=>{return`${n=e,n.replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`))}:${t}`;var n})).join(";"))}"`}return`${e}="${x(String(t))}"`})).join(" "),i=`<${e}${o?" "+o:""}>`;if(s.has(e))return i.slice(0,-1)+"/>";const c=`</${e}>`;if(null!=n){return i+await m(n)+c}return i+c}(n,r)}return x("object"==typeof e?JSON.stringify(e):String(e))}function x(e){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","/":"&#x2F;"};return e.replace(/[&<>"'/]/g,(e=>t[e]))}exports.batchUpdates=t,exports.finishRender=d,exports.getIsBatching=function(){return exports.isBatching},exports.prepareRender=h,exports.renderToString=async function(e){h(!0);try{return await m(e)}finally{d()}},exports.setRenderCallback=function(e,t,n){l=e,f=n,g=t},exports.useEffect=function(e,t){if(!n&&!r)throw new Error("useEffect must be called within a render");if(u||r){const e=o.get(n)||0;return void o.set(n,e+1)}const s=o.get(n)||0;i.has(n)||i.set(n,[]);const c=i.get(n),a=c[s];a&&t&&a.deps&&!t.some(((e,t)=>e!==a.deps[t]))||(a?.cleanup&&a.cleanup(),queueMicrotask((()=>{const n=e()||void 0;c[s]={cleanup:n,deps:t||[]}}))),o.set(n,s+1)},exports.useErrorBoundary=function(){const[e,t]=w(null);return[e,()=>t(null)]},exports.useMemo=function(e,t){if(!n&&!r)throw new Error("useMemo must be called within a render");const s=o.get(n)||0;c.has(n)||c.set(n,[]);const i=c.get(n),a=i[s];if(!a||t&&t.some(((e,t)=>!Object.is(e,a.deps[t])))){const r=e();return i[s]={value:r,deps:t||[]},o.set(n,s+1),r}return o.set(n,s+1),a.value},exports.useRef=function(e){if(!n&&!r)throw new Error("useRef must be called within a render");const t=o.get(n)||0;a.has(n)||a.set(n,[]);const s=a.get(n);if(t>=s.length){const r={current:e};return s.push(r),o.set(n,t+1),r}const i=s[t];return o.set(n,t+1),i},exports.useState=w;
+//# sourceMappingURL=server-renderer-Chs-nmJm.cjs.map

package/dist/server-renderer-Chs-nmJm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-renderer-Chs-nmJm.cjs","sources":["../src/batch.ts","../src/hooks.ts","../src/server-renderer.ts"],"sourcesContent":["export let isBatching = false;\r\nconst queue: Function[] = [];\r\n\r\nexport function batchUpdates(fn: Function) {\r\n  if (isBatching) {\r\n    queue.push(fn);\r\n    return;\r\n  }\r\n\r\n  isBatching = true;\r\n  try {\r\n    fn();\r\n    while (queue.length > 0) {\r\n      const nextFn = queue.shift();\r\n      nextFn?.();\r\n    }\r\n  } finally {\r\n    isBatching = false;\r\n  }\r\n}\r\n\r\nexport function getIsBatching() {\r\n  return isBatching;\r\n}\r\n","import { createElement } from './jsx-runtime.js';\r\nimport { batchUpdates, isBatching } from './batch.js';\r\nimport { diff } from './vdom.js';\r\nimport { createContext, useContext } from './context.js';\r\n\r\n// Current render ID counter\r\nlet currentRender = 0;\r\nlet isServerRender = false;\r\n\r\n// State storage\r\nconst states = new Map<number, any[]>();\r\nconst stateIndices = new Map<number, number>();\r\nconst effects = new Map<number, any[]>();\r\nconst memos = new Map<number, any[]>();\r\nconst refs = new Map<number, any[]>();\r\n\r\n// Server-side rendering detection\r\nconst isServer = typeof window === 'undefined';\r\nconst serverStates = new Map<number, Map<number, any>>();\r\n\r\n// Rendering callbacks\r\nlet globalRenderCallback: any = null;\r\nlet globalContainer: any = null;\r\nlet currentElement: any = null;\r\n\r\nexport function setRenderCallback(callback: any, element: any, container: any): void {\r\n  globalRenderCallback = callback;\r\n  globalContainer = container;\r\n  currentElement = element;\r\n}\r\n\r\nexport function prepareRender(isSSR: boolean = false): number {\r\n  currentRender++;\r\n  isServerRender = isSSR;\r\n  stateIndices.set(currentRender, 0);\r\n  return currentRender;\r\n}\r\n\r\nexport function finishRender(): void {\r\n  if (isServer || isServerRender) {\r\n    serverStates.delete(currentRender);\r\n  }\r\n  isServerRender = false;\r\n  currentRender = 0;\r\n}\r\n\r\nexport function useState<T>(initial: T): [T, (newValue: T | ((prev: T) => T)) => void] {\r\n  if (!currentRender && !isServerRender) {\r\n    throw new Error(\"useState must be called within a render\");\r\n  }\r\n\r\n  // Handle server-side rendering separately\r\n  if (isServer || isServerRender) {\r\n    if (!serverStates.has(currentRender)) {\r\n      serverStates.set(currentRender, new Map());\r\n    }\r\n    const componentState = serverStates.get(currentRender)!;\r\n    const index = stateIndices.get(currentRender) || 0;\r\n    \r\n    if (!componentState.has(index)) {\r\n      componentState.set(index, initial);\r\n    }\r\n    \r\n    const state = componentState.get(index);\r\n    // In SSR, setState is a no-op\r\n    const setState = (_newValue: T | ((prev: T) => T)) => {};\r\n    \r\n    stateIndices.set(currentRender, index + 1);\r\n    return [state, setState];\r\n  }\r\n\r\n  // Client-side implementation\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) || 0;\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  \r\n  const setState = (newValue: T | ((prev: T) => T)) => {\r\n    const nextValue = typeof newValue === 'function'\r\n      ? (newValue as ((prev: T) => T))(componentStates[index])\r\n      : newValue;\r\n      \r\n    if (componentStates[index] === nextValue) return;\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[]): void {\r\n  if (!currentRender && !isServerRender) throw new Error(\"useEffect must be called within a render\");\r\n\r\n  // Skip effects on server\r\n  if (isServer || isServerRender) {\r\n    const effectIndex = stateIndices.get(currentRender) || 0;\r\n    stateIndices.set(currentRender, effectIndex + 1);\r\n    return;\r\n  }\r\n\r\n  const effectIndex = stateIndices.get(currentRender) || 0;\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  if (!prevEffect || !deps || !prevEffect.deps || deps.some((dep, i) => dep !== prevEffect.deps[i])) {\r\n    if (prevEffect?.cleanup) {\r\n      prevEffect.cleanup();\r\n    }\r\n    \r\n    // Schedule effect execution after render is complete\r\n    queueMicrotask(() => {\r\n      const cleanup = callback() || undefined;\r\n      componentEffects[effectIndex] = { cleanup, deps: 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 && !isServerRender) throw new Error(\"useMemo must be called within a render\");\r\n  \r\n  const memoIndex = stateIndices.get(currentRender) || 0;\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: 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): { current: T } {\r\n  if (!currentRender && !isServerRender) throw new Error(\"useRef must be called within a render\");\r\n  \r\n  const refIndex = stateIndices.get(currentRender) || 0;\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  \r\n  if (refIndex >= componentRefs.length) {\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\nasync function rerender(rendererId: number): Promise<void> {\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    // Trigger re-render\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\nexport function useErrorBoundary() {\r\n  const [error, setError] = useState(null);\r\n  return [error, () => setError(null)];\r\n}\r\n\r\n// Re-export from context to match index.js\r\nexport { createContext, useContext };\r\n","import { VNode } from './types.js';\r\nimport { prepareRender, finishRender } from './hooks.js';\r\n\r\nexport async function renderToString(element: any): Promise<string> {\r\n  const renderId = prepareRender(true); // Mark as SSR\r\n  \r\n  try {\r\n    const html = await renderNodeToString(element);\r\n    return html;\r\n  } finally {\r\n    finishRender();\r\n  }\r\n}\r\n\r\nasync function renderNodeToString(node: any): Promise<string> {\r\n  // Handle null, undefined, boolean\r\n  if (node == null || typeof node === 'boolean') {\r\n    return '';\r\n  }\r\n\r\n  // Handle primitives\r\n  if (typeof node === 'string' || typeof node === 'number') {\r\n    return escapeHtml(String(node));\r\n  }\r\n\r\n  // Handle arrays\r\n  if (Array.isArray(node)) {\r\n    const results = await Promise.all(node.map(child => renderNodeToString(child)));\r\n    return results.join('');\r\n  }\r\n\r\n  // Handle objects with type and props (React-like elements)\r\n  if (node && typeof node === 'object' && 'type' in node) {\r\n    const { type, props = {} } = node;\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        return await renderNodeToString(result);\r\n      } catch (error:any) {\r\n        console.error('Error rendering component:', error);\r\n        return `<!-- Error rendering component: ${error.message} -->`;\r\n      }\r\n    }\r\n\r\n    // Handle DOM elements\r\n    if (typeof type === 'string') {\r\n      return await renderDOMElement(type, props);\r\n    }\r\n  }\r\n\r\n  // Fallback for other objects\r\n  if (typeof node === 'object') {\r\n    return escapeHtml(JSON.stringify(node));\r\n  }\r\n\r\n  return escapeHtml(String(node));\r\n}\r\n\r\nasync function renderDOMElement(tagName: string, props: any): Promise<string> {\r\n  const { children, ...attrs } = props;\r\n  \r\n  // Self-closing tags\r\n  const voidElements = new Set([\r\n    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',\r\n    'link', 'meta', 'param', 'source', 'track', 'wbr'\r\n  ]);\r\n\r\n  // Build attributes string\r\n  const attributeString = Object.entries(attrs)\r\n    .filter(([key, value]) => {\r\n      // Filter out React-specific props and event handlers\r\n      if (key.startsWith('on') || key === 'key' || key === 'ref') return false;\r\n      if (value == null || value === false) return false;\r\n      return true;\r\n    })\r\n    .map(([key, value]) => {\r\n      // Handle className -> class\r\n      if (key === 'className') key = 'class';\r\n      \r\n      // Handle boolean attributes\r\n      if (value === true) return key;\r\n      \r\n      // Handle style objects\r\n      if (key === 'style' && typeof value === 'object' && value !== null) {\r\n        const styleString = Object.entries(value)\r\n          .map(([prop, val]) => `${kebabCase(prop)}:${val}`)\r\n          .join(';');\r\n        return `style=\"${escapeHtml(styleString)}\"`;\r\n      }\r\n      \r\n      return `${key}=\"${escapeHtml(String(value))}\"`;\r\n    })\r\n    .join(' ');\r\n\r\n  const openTag = `<${tagName}${attributeString ? ' ' + attributeString : ''}>`;\r\n  \r\n  // Self-closing elements\r\n  if (voidElements.has(tagName)) {\r\n    return openTag.slice(0, -1) + '/>';\r\n  }\r\n\r\n  // Elements with children\r\n  const closeTag = `</${tagName}>`;\r\n  \r\n  if (children != null) {\r\n    const childrenString = await renderNodeToString(children);\r\n    return openTag + childrenString + closeTag;\r\n  }\r\n  \r\n  return openTag + closeTag;\r\n}\r\n\r\nfunction escapeHtml(text: string): string {\r\n  const htmlEscapes: Record<string, string> = {\r\n    '&': '&amp;',\r\n    '<': '&lt;',\r\n    '>': '&gt;',\r\n    '\"': '&quot;',\r\n    \"'\": '&#x27;',\r\n    '/': '&#x2F;'\r\n  };\r\n  \r\n  return text.replace(/[&<>\"'/]/g, (match) => htmlEscapes[match]);\r\n}\r\n\r\nfunction kebabCase(str: string): string {\r\n  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\r\n}\r\n"],"names":["isBatching","queue","batchUpdates","fn","push","length","nextFn","shift","currentRender","isServerRender","states","Map","stateIndices","effects","memos","refs","isServer","window","serverStates","globalRenderCallback","globalContainer","currentElement","prepareRender","isSSR","set","finishRender","delete","useState","initial","Error","has","componentState","get","index","state","setState","_newValue","componentStates","newValue","nextValue","rerender","async","rendererId","componentEffects","forEach","effect","cleanup","error","console","renderNodeToString","node","escapeHtml","String","Array","isArray","Promise","all","map","child","join","type","props","result","message","tagName","children","attrs","voidElements","Set","attributeString","Object","entries","filter","key","value","startsWith","prop","val","str","replace","match","toLowerCase","openTag","slice","closeTag","renderDOMElement","JSON","stringify","text","htmlEscapes","element","callback","container","deps","effectIndex","prevEffect","some","dep","i","queueMicrotask","setError","factory","memoIndex","componentMemos","prevMemo","is","refIndex","componentRefs","ref","current"],"mappings":"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"}

package/dist/server-renderer.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./server-renderer-CqIpQ-od.cjs");exports.renderToString=e.renderToString;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./server-renderer-Chs-nmJm.cjs");exports.renderToString=e.renderToString;
 //# sourceMappingURL=server-renderer.cjs.map

package/dist/server-renderer.js

@@ -1,4 +1,4 @@
-import { r } from "./server-renderer-QHt45Ip2.js";
+import { r } from "./server-renderer-C1WXH-zV.js";
 export {
   r as renderToString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.80",
+  "version": "1.2.83",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "dist/index.cjs",

package/templates/basic-app/src/App.jsx

@@ -0,0 +1,16 @@
+import { useState } from 'frontend-hamroun';
+export function App() {
+    // Initialize with a default state that works on both server and client
+    const [count, setCount] = useState(0);
+    return (<div>
+      <h1>Server-Side Rendered App</h1>
+      <div>
+        <button onClick={() => setCount(count - 1)} data-action="decrement">-</button>
+        <span style={{ margin: '0 10px' }}>{count}</span>
+        <button onClick={() => setCount(count + 1)} data-action="increment">+</button>
+      </div>
+      <script dangerouslySetInnerHTML={{
+            __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
+        }}/>
+    </div>);
+}

package/templates/basic-app/src/client.jsx

@@ -0,0 +1,5 @@
+import { hydrate } from 'frontend-hamroun';
+import { App } from './App';
+document.addEventListener('DOMContentLoaded', () => {
+    hydrate(<App />, document.getElementById('root'));
+});

package/templates/basic-app/src/components/Counter.jsx

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'frontend-hamroun';
+export function Counter({ initial = 0 }) {
+    const [count, setCount] = useState(initial);
+    useEffect(() => {
+        document.title = `Count: ${count}`;
+    }, [count]);
+    return (<div>
+      <h2>Counter Component</h2>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span style={{ margin: '0 10px' }}>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>);
+}

package/templates/basic-app/src/jsx-shim.js

@@ -0,0 +1,3 @@
+import { jsx as createElement, Fragment } from 'frontend-hamroun';
+window.createElement = createElement;
+window.Fragment = Fragment;

package/templates/basic-app/src/jsx-shim.ts

@@ -1,4 +1,11 @@
 import { jsx as createElement, Fragment } from 'frontend-hamroun';
 
+declare global {
+  interface Window {
+    createElement: typeof createElement;
+    Fragment: typeof Fragment;
+  }
+}
+
 window.createElement = createElement;
 window.Fragment = Fragment;

package/templates/basic-app/src/main.jsx

@@ -0,0 +1,98 @@
+import { render, useState, useEffect, useMemo, useRef, useErrorBoundary, createContext, useContext } from 'frontend-hamroun';
+import './main.css';
+// Create a theme context
+const ThemeContext = createContext('light');
+// Create a component that will throw an error when clicked
+function BuggyComponent() {
+    const [shouldError, setShouldError] = useState(false);
+    if (shouldError) {
+        throw new Error("Test error from BuggyComponent");
+    }
+    return (<button onClick={() => setShouldError(true)} className="bg-red-600 text-white px-4 py-2 rounded mt-4 hover:bg-red-700">
+      Trigger Error
+    </button>);
+}
+function App() {
+    const [count, setCount] = useState(0);
+    const [theme, setTheme] = useState('light');
+    const renderCount = useRef(0);
+    const [error, resetError] = useErrorBoundary();
+    // Demonstrate useEffect
+    useEffect(() => {
+        document.title = `Count: ${count}`;
+        renderCount.current += 1;
+        return () => {
+            console.log('Cleanup effect');
+        };
+    }, [count]);
+    // Demonstrate useMemo
+    const doubled = useMemo(() => count * 2, [count]);
+    if (error) {
+        return (<div className="p-8 max-w-md mx-auto bg-red-50 rounded-lg shadow-lg">
+        <h1 className="text-2xl font-bold text-red-600 mb-4">Something went wrong!</h1>
+        <button onClick={resetError} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+          Try again
+        </button>
+      </div>);
+    }
+    return (<ThemeContext.Provider value={theme}>
+      <div className={`p-8 max-w-4xl mx-auto rounded-lg shadow-lg transition-colors ${theme === 'dark'
+            ? 'bg-gray-800 text-white'
+            : 'bg-white text-gray-900'}`}>
+        <h1 className="text-3xl font-bold mb-6">Welcome to Frontend Hamroun</h1>
+        
+        <div className="mb-6">
+          <button onClick={() => setCount(count - 1)} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">-</button>
+          <span className="mx-4 text-xl">{count}</span>
+          <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">+</button>
+        </div>
+        
+        <p className="mb-2 text-lg">Doubled value: <span className="font-semibold">{doubled}</span></p>
+        <p className="mb-4 text-lg">Render count: <span className="font-semibold">{renderCount.current}</span></p>
+        
+        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} className={`px-4 py-2 rounded mb-8 ${theme === 'dark'
+            ? 'bg-yellow-400 text-gray-900 hover:bg-yellow-300'
+            : 'bg-gray-800 text-white hover:bg-gray-700'}`}>
+          Toggle Theme ({theme})
+        </button>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Error Boundary</h2>
+          <BuggyComponent />
+        </div>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Context</h2>
+          <ContextConsumer />
+        </div>
+      </div>
+    </ThemeContext.Provider>);
+}
+// Component to test context
+function ContextConsumer() {
+    // Get the full context object for debugging
+    const themeContext = useContext(ThemeContext);
+    console.log('Theme context object:', themeContext);
+    // Access the current theme from the parent component instead
+    // This is a workaround until context is properly implemented
+    return (<div className={`mt-4 p-4 rounded-md border ${themeContext === 'dark' ? 'border-gray-600' : 'border-gray-300'}`}>
+      <p className="mb-2"><strong>Note:</strong> Context API needs a fix in the framework.</p>
+      <p className="mb-1">Context object type: {typeof themeContext}</p>
+      <p className="mb-4">Context object keys: {Object.keys(themeContext).join(', ') || 'none'}</p>
+      
+      <button onClick={() => {
+            // Since we can't get the value directly from context,
+            // Let's add a button to demonstrate we can still use the Provider
+            const newTheme = document.body.style.backgroundColor === 'rgb(51, 51, 51)'
+                ? 'light' : 'dark';
+            console.log('Manually changing theme to:', newTheme);
+            // This won't work yet, but demonstrates the intent
+            if (ThemeContext) {
+                console.log('Provider exists, would set value to:', newTheme);
+            }
+        }} className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">
+        Check Context Implementation
+      </button>
+    </div>);
+}
+render(<App />, document.getElementById('root'));

package/templates/basic-app/src/server.js

@@ -0,0 +1,47 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { renderToString, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
+import fs from 'fs';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const app = express();
+const port = 3000;
+// Find the client entry file
+function getClientEntry() {
+    const assetsDir = path.join(__dirname, './');
+    const files = fs.readdirSync(assetsDir);
+    const entry = files.find(file => file.startsWith("client") && file.endsWith('.js'));
+    if (!entry) {
+        throw new Error('Client entry file not found');
+    }
+    return entry;
+}
+// Static file serving
+app.use('/assets', express.static(path.join(__dirname, './')));
+app.use(express.static(path.join(__dirname, 'dist')));
+// Main route handler
+app.get('/', async (_req, res) => {
+    try {
+        const clientEntry = getClientEntry();
+        const html = await renderToString({
+            element: jsx(App, null),
+            title: 'SSR App',
+            scripts: [`/assets/${clientEntry}`],
+            initialState: {
+            // Add any initial state here
+            },
+            meta: {
+                'viewport': 'width=device-width, initial-scale=1.0',
+            }
+        });
+        res.send(html);
+    }
+    catch (error) {
+        console.error('Rendering error:', error);
+        res.status(500).send('Server Error');
+    }
+});
+app.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+});

package/templates/complete-app/lib/frontend-hamroun.js

@@ -0,0 +1,182 @@
+/**
+ * Simple JSX implementation for server-side rendering
+ */
+
+// Render a virtual DOM node to HTML string
+export function renderToString(vnode) {
+  // Handle null or undefined
+  if (vnode == null) return '';
+  
+  // Handle primitive values
+  if (typeof vnode === 'string' || typeof vnode === 'number') 
+    return escapeHtml(String(vnode));
+  
+  // Handle arrays (like fragments)
+  if (Array.isArray(vnode)) 
+    return vnode.map(renderToString).join('');
+  
+  // Handle functional components
+  if (typeof vnode.type === 'function') {
+    try {
+      const result = vnode.type(vnode.props || {});
+      return renderToString(result);
+    } catch (err) {
+      console.error('Error rendering component:', err);
+      return `<div class="error">Error: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+  
+  // Handle Fragment
+  if (vnode.type === Symbol.for('react.fragment')) {
+    return renderToString(vnode.props.children);
+  }
+  
+  // Handle regular DOM elements
+  if (typeof vnode.type === 'string') {
+    let props = vnode.props || {};
+    let children = props.children || [];
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    
+    // Build opening tag with attributes
+    let html = `<${vnode.type}`;
+    
+    for (const [key, value] of Object.entries(props)) {
+      if (key === 'children' || key === 'dangerouslySetInnerHTML') continue;
+      
+      // Handle event handlers (they should be ignored in SSR)
+      if (key.startsWith('on')) continue;
+      
+      // Handle className -> class
+      if (key === 'className') {
+        html += ` class="${escapeHtml(value)}"`;
+        continue;
+      }
+      
+      // Handle style objects
+      if (key === 'style' && typeof value === 'object') {
+        const styleStr = Object.entries(value)
+          .map(([k, v]) => `${kebabCase(k)}:${v}`)
+          .join(';');
+        html += ` style="${escapeHtml(styleStr)}"`;
+        continue;
+      }
+      
+      // Handle boolean attributes
+      if (value === true) {
+        html += ` ${key}`;
+        continue;
+      }
+      
+      // Skip false boolean attributes
+      if (value === false) continue;
+      
+      // Regular attributes
+      if (value != null) {
+        html += ` ${key}="${escapeHtml(value)}"`;
+      }
+    }
+    
+    // Handle self-closing tags
+    const selfClosing = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr'];
+    if (selfClosing.includes(vnode.type)) {
+      return `${html} />`;
+    }
+    
+    // Add closing bracket for opening tag
+    html += '>';
+    
+    // Handle dangerouslySetInnerHTML
+    if (props.dangerouslySetInnerHTML) {
+      html += props.dangerouslySetInnerHTML.__html || '';
+    } else {
+      // Add children
+      for (const child of children) {
+        html += renderToString(child);
+      }
+    }
+    
+    // Add closing tag
+    html += `</${vnode.type}>`;
+    
+    return html;
+  }
+  
+  // Unknown node type
+  console.warn('Unknown vnode type:', vnode.type);
+  return '';
+}
+
+// Create a JSX element
+export function jsx(type, props, ...children) {
+  props = props || {};
+  if (children.length) {
+    props.children = children.length === 1 ? children[0] : children;
+  }
+  return { type, props };
+}
+
+// Helper for escaping HTML
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+// Helper to convert camelCase to kebab-case for CSS properties
+function kebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+// Create a basic requestLogger middleware
+export function requestLogger(req, res, next) {
+  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+  next();
+}
+
+// Create a basic error handler middleware
+export function errorHandler(err, req, res, next) {
+  console.error('Server error:', err);
+  res.status(500).send('Server Error');
+}
+
+// Create a basic 404 handler middleware
+export function notFoundHandler(req, res) {
+  res.status(404).send('Not Found');
+}
+
+// Create a basic rate limiter middleware
+export function rateLimit(options = { windowMs: 60000, max: 100 }) {
+  const requests = new Map();
+  
+  return (req, res, next) => {
+    const ip = req.ip || 'unknown';
+    const now = Date.now();
+    
+    if (!requests.has(ip)) {
+      requests.set(ip, []);
+    }
+    
+    const reqs = requests.get(ip);
+    const validReqs = reqs.filter(time => now - time < options.windowMs);
+    
+    validReqs.push(now);
+    requests.set(ip, validReqs);
+    
+    if (validReqs.length > options.max) {
+      return res.status(429).send('Too Many Requests');
+    }
+    
+    next();
+  };
+}
+
+// Export other necessary functions
+export const Fragment = Symbol.for('react.fragment');
+export function loadGoWasmFromFile() {
+  throw new Error('WASM not supported in this environment');
+}

package/templates/complete-app/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "ssr-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server.js",
+    "start": "node server.js",
+    "build": "echo 'No build step required for this template'"
+  },
+  "dependencies": {
+    "compression": "^1.8.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "frontend-hamroun": "^1.2.79",
+    "node-fetch": "^3.3.1"
+  }
+}

package/templates/complete-app/pages/about.js

@@ -0,0 +1,119 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+
+// Simple animation component to demonstrate useEffect
+function FadeIn({ children, delay = 0 }) {
+  const [opacity, setOpacity] = useState(0);
+  
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setOpacity(1);
+    }, delay);
+    
+    return () => clearTimeout(timer);
+  }, [delay]);
+  
+  return jsx('div', { 
+    style: `opacity: ${opacity}; transition: opacity 0.5s ease-in-out;` 
+  }, children);
+}
+
+// Main about page component
+export default function AboutPage(props) {
+  const [activeSection, setActiveSection] = useState('overview');
+  
+  return jsx('div', { className: 'container' }, [
+    jsx('header', { className: 'header' }, [
+      jsx('h1', {}, 'About Frontend Hamroun'),
+      jsx('a', { href: '/', className: 'back-link' }, '← Back to Home')
+    ]),
+    
+    jsx('main', {}, [
+      jsx('div', { className: 'about-nav' }, [
+        jsx('button', { 
+          className: activeSection === 'overview' ? 'active' : '',
+          onClick: () => setActiveSection('overview')
+        }, 'Overview'),
+        jsx('button', { 
+          className: activeSection === 'features' ? 'active' : '',
+          onClick: () => setActiveSection('features')
+        }, 'Features'),
+        jsx('button', { 
+          className: activeSection === 'team' ? 'active' : '',
+          onClick: () => setActiveSection('team')
+        }, 'Team')
+      ]),
+      
+      // Overview section
+      activeSection === 'overview' && jsx(FadeIn, {}, [
+        jsx('section', { className: 'about-section' }, [
+          jsx('h2', {}, 'Framework Overview'),
+          jsx('p', {}, 'Frontend Hamroun is a lightweight JavaScript framework for building modern web applications with server-side rendering and client-side hydration.'),
+          jsx('p', {}, 'Inspired by React and other modern frameworks, it provides a simple yet powerful component model with hooks for state management and side effects.'),
+          jsx('p', {}, `This page was rendered on the server at ${props.api?.serverTime} and then hydrated on the client to provide interactivity.`)
+        ])
+      ]),
+      
+      // Features section
+      activeSection === 'features' && jsx(FadeIn, {}, [
+        jsx('section', { className: 'about-section' }, [
+          jsx('h2', {}, 'Key Features'),
+          jsx('ul', { className: 'feature-list expanded' }, [
+            jsx('li', {}, [
+              jsx('strong', {}, 'Server-Side Rendering (SSR):'),
+              jsx('p', {}, 'Render pages on the server for faster initial load and improved SEO.')
+            ]),
+            jsx('li', {}, [
+              jsx('strong', {}, 'Client-Side Hydration:'),
+              jsx('p', {}, 'Add interactivity to server-rendered HTML without rebuilding the DOM.')
+            ]),
+            jsx('li', {}, [
+              jsx('strong', {}, 'React-like Hooks:'),
+              jsx('p', {}, 'Use useState, useEffect, useMemo, and useRef for managing component state and lifecycle.')
+            ]),
+            jsx('li', {}, [
+              jsx('strong', {}, 'Context API:'),
+              jsx('p', {}, 'Share state between components without prop drilling using createContext and useContext.')
+            ]),
+            jsx('li', {}, [
+              jsx('strong', {}, 'WebAssembly Integration:'),
+              jsx('p', {}, 'Leverage high-performance Go code compiled to WebAssembly for computationally intensive tasks.')
+            ]),
+            jsx('li', {}, [
+              jsx('strong', {}, 'Automatic Route Handling:'),
+              jsx('p', {}, 'File-based routing system similar to Next.js for intuitive page organization.')
+            ])
+          ])
+        ])
+      ]),
+      
+      // Team section
+      activeSection === 'team' && jsx(FadeIn, {}, [
+        jsx('section', { className: 'about-section' }, [
+          jsx('h2', {}, 'The Team'),
+          jsx('div', { className: 'team-grid' }, [
+            jsx('div', { className: 'team-member' }, [
+              jsx('div', { className: 'avatar' }, 'MH'),
+              jsx('h3', {}, 'Mohamed Hamroun'),
+              jsx('p', { className: 'title' }, 'Lead Framework Developer'),
+              jsx('p', { className: 'bio' }, 'Creator of Frontend Hamroun and full-stack JavaScript enthusiast.')
+            ]),
+            jsx('div', { className: 'team-member' }, [
+              jsx('div', { className: 'avatar' }, 'AI'),
+              jsx('h3', {}, 'AI Assistant'),
+              jsx('p', { className: 'title' }, 'Documentation & Support'),
+              jsx('p', { className: 'bio' }, 'Helps with documentation, examples, and framework support.')
+            ])
+          ])
+        ])
+      ])
+    ]),
+    
+    jsx('footer', {}, [
+      jsx('p', {}, '© 2025 Frontend Hamroun Framework')
+    ])
+  ]);
+}
+
+// Static metadata for SEO
+AboutPage.getTitle = () => 'About - Frontend Hamroun Framework';
+AboutPage.getDescription = () => 'Learn about the Frontend Hamroun framework, its features, and the team behind it.';