frontend-hamroun 1.2.82 → 1.2.84

package/templates/ssr-template/tsconfig.json

@@ -1,19 +1,23 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "strict": true,
-    "esModuleInterop": true,
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "types": ["node"]
+    "jsx": "preserve",
+    "jsxImportSource": "frontend-hamroun"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src",
+    "server.ts"
+  ]
 }

package/templates/ssr-template/vite.config.ts

@@ -2,29 +2,31 @@ import { defineConfig } from 'vite';
 import path from 'path';
 
 export default defineConfig({
-  resolve: {
-    alias: {
-      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
-    }
+  esbuild: {
+    jsx: 'transform',
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+    jsxImportSource: 'frontend-hamroun',
+  },
+  ssr: {
+    noExternal: ['frontend-hamroun']
+  },
+  optimizeDeps: {
+    include: ['frontend-hamroun'],
+    exclude: []
   },
   build: {
-    outDir: 'dist',
-    ssr: 'src/server.ts',
+    target: 'esnext',
     rollupOptions: {
-      input: {
-        client: './src/client.tsx',
-        server: './src/server.ts'
-      },
       output: {
-        entryFileNames: '[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
+        format: 'es'
       }
     }
   },
-  esbuild: {
-    jsxFactory: '_jsx',
-    jsxFragment: '_Fragment',
-    jsxInject: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun'`
+  resolve: {
+    alias: {
+      'frontend-hamroun/jsx-dev-runtime': 'frontend-hamroun',
+      'frontend-hamroun/jsx-runtime': 'frontend-hamroun'
+    }
   }
 });

package/templates/wasm/dist/assets/index-BNqTDBdE.js

@@ -0,0 +1,295 @@
+(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))s(n);new MutationObserver(n=>{for(const l of n)if(l.type==="childList")for(const o of l.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function a(n){const l={};return n.integrity&&(l.integrity=n.integrity),n.referrerPolicy&&(l.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?l.credentials="include":n.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function s(n){if(n.ep)return;n.ep=!0;const l=a(n);fetch(n.href,l)}})();let y=!1;const w=[];function R(t){if(y){w.push(t);return}y=!0;try{for(t();w.length>0;){const i=w.shift();i?.()}}finally{y=!1}}let m=0;const z=new Map,T=typeof window>"u",H=new Map;function L(){return m++,z.set(m,0),m}function _(){T&&H.delete(m),m=0}function q(t,i){console.log("JSX Transform:",{type:t,props:i});const a={...i};return arguments.length>2&&(a.children=Array.prototype.slice.call(arguments,2)),{type:t,props:a}}async function h(t){var i;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 a=document.createDocumentFragment();for(const s of t){const n=await h(s);a.appendChild(n)}return a}if("type"in t&&t.props!==void 0){const{type:a,props:s}=t;if(typeof a=="function")try{const o=await a(s||{}),u=await h(o);return u instanceof Element&&u.setAttribute("data-component-id",a.name||a.toString()),u}catch(o){return console.error("Error rendering component:",o),document.createTextNode("")}const n=document.createElement(a);for(const[o,u]of Object.entries(s||{}))if(o!=="children")if(o.startsWith("on")&&typeof u=="function"){const c=o.toLowerCase().slice(2),f=(i=n.__events)==null?void 0:i[c];f&&n.removeEventListener(c,f),n.addEventListener(c,u),n.__events||(n.__events={}),n.__events[c]=u}else o==="style"&&typeof u=="object"?Object.assign(n.style,u):o==="className"?n.setAttribute("class",String(u)):o!=="key"&&o!=="ref"&&n.setAttribute(o,String(u));const l=s?.children;if(l!=null){const o=Array.isArray(l)?l.flat():[l];for(const u of o){const c=await h(u);n.appendChild(c)}}return n}return document.createTextNode(String(t))}let O=!1;async function N(t,i){console.log("Rendering to:",i.id),R(async()=>{const a=L();try{const s=await h(t);O||(i.innerHTML=""),i.appendChild(s)}finally{_()}})}function d(t){throw new Error("useState must be called within a render")}function G(t,i){throw new Error("useEffect must be called within a render")}function e(t,i){console.log("JSX Transform:",{type:t,props:i});const a={...i};return arguments.length>2&&(a.children=Array.prototype.slice.call(arguments,2)),{type:t,props:a}}function j(t,...i){if(typeof window>"u")throw new Error("callWasmFunction() is for browser use only.");const a=window[t];if(typeof a!="function")throw new Error(`Function ${t} not found. Make sure the WASM module is loaded.`);return a(...i)}console.log("Baraqex - Browser version loaded");function J(){const[t,i]=d(),[a,s]=d(),[n,l]=d(),[o,u]=d(),[c,f]=d(),[g,A]=d(),[x,S]=d(),[b,C]=d();G();const p=(r,...I)=>{try{return j(r,...I)}catch(v){const B=v instanceof Error?v.message:"Function call failed";return s(B),null}},F=()=>{const r=p("goHello",b);r!==null&&(l({type:"hello",value:r,input:b}),s(null))},M=()=>{const r=p("goAdd",o,c);r!==null&&(l({type:"addition",value:r,inputs:[o,c]}),s(null))},E=()=>{const r=p("goMultiply",o,c);r!==null&&(l({type:"multiplication",value:r,inputs:[o,c]}),s(null))},P=()=>{if(g>40){s("Fibonacci input too large (max 40)");return}const r=p("goFibonacci",g);r!==null&&(l({type:"fibonacci",value:r,input:g}),s(null))},W=()=>{const r=p("goIsPrime",x);r!==null&&(l({type:"prime",value:r,input:x}),s(null))};return!t&&!a?e("div",{className:"app loading"},e("div",{className:"spinner"}),e("h2",null,"Loading Go WASM Module..."),e("p",null,"Initializing WebAssembly runtime...")):a?e("div",{className:"app error"},e("h2",null,"WASM Error"),e("p",null,a),e("button",{onClick:()=>window.location.reload()},"Reload Page"),e("details",{style:{marginTop:"20px",textAlign:"left"}},e("summary",null,"Troubleshooting"),e("ul",null,e("li",null,"Make sure the WASM file is built: ",e("code",null,"npm run build:wasm")),e("li",null,"Check if ",e("code",null,"example.wasm")," exists in the public folder"),e("li",null,"Verify ",e("code",null,"wasm_exec.js")," is loaded in the HTML"),e("li",null,"Check browser console for additional errors")))):e("div",{className:"app"},e("header",null,e("h1",null,"Frontend Hamroun + Go WASM (Baraqex)"),e("p",null,"High-performance computing with WebAssembly via Baraqex API"),e("div",{className:"status"},e("span",{className:"status-indicator ready"}),"WASM Ready via Baraqex")),e("main",null,e("section",{className:"demo-grid"},e("div",{className:"demo-card"},e("h3",null,"🌍 Hello Function"),e("div",{className:"input-group"},e("input",{type:"text",value:b,onChange:r=>C(r.target.value),placeholder:"Enter your name"}),e("button",{onClick:F},"Say Hello")),e("small",null,"callWasmFunction('goHello', '",b,"')")),e("div",{className:"demo-card"},e("h3",null,"🧮 Math Operations"),e("div",{className:"input-group"},e("input",{type:"number",value:o,onChange:r=>u(Number(r.target.value)),placeholder:"First number"}),e("input",{type:"number",value:c,onChange:r=>f(Number(r.target.value)),placeholder:"Second number"})),e("div",{className:"button-group"},e("button",{onClick:M},"Add"),e("button",{onClick:E},"Multiply")),e("small",null,"callWasmFunction('goAdd', ",o,", ",c,")")),e("div",{className:"demo-card"},e("h3",null,"🔢 Fibonacci Sequence"),e("div",{className:"input-group"},e("input",{type:"number",value:g,onChange:r=>A(Number(r.target.value)),placeholder:"Fibonacci number",min:"0",max:"40"}),e("button",{onClick:P},"Calculate")),e("small",null,"Maximum value: 40")),e("div",{className:"demo-card"},e("h3",null,"🔍 Prime Number Check"),e("div",{className:"input-group"},e("input",{type:"number",value:x,onChange:r=>S(Number(r.target.value)),placeholder:"Number to check",min:"1"}),e("button",{onClick:W},"Check Prime")))),n&&e("section",{className:"results"},e("h2",null,"📊 Baraqex WASM Result"),e("div",{className:"result-card"},n.type==="hello"&&e("p",null,e("strong",null,"Greeting:")," ",e("span",{className:"result-value"},n.value)),n.type==="addition"&&e("p",null,e("strong",null,"Addition:")," ",n.inputs[0]," + ",n.inputs[1]," = ",e("span",{className:"result-value"},n.value)),n.type==="multiplication"&&e("p",null,e("strong",null,"Multiplication:")," ",n.inputs[0]," × ",n.inputs[1]," = ",e("span",{className:"result-value"},n.value)),n.type==="fibonacci"&&e("p",null,e("strong",null,"Fibonacci:")," F(",n.input,") = ",e("span",{className:"result-value"},n.value)),n.type==="prime"&&e("p",null,e("strong",null,"Prime Check:")," ",n.input," is ",e("span",{className:"result-value"},n.value?"prime":"not prime")))),e("section",{className:"info-section"},e("h2",null,"⚡ Baraqex WASM Benefits"),e("div",{className:"benefits-grid"},e("div",{className:"benefit"},e("h4",null,"🚀 Simple API"),e("p",null,"Easy-to-use loadGoWasm() and callWasmFunction() API")),e("div",{className:"benefit"},e("h4",null,"🔄 Cross-Platform"),e("p",null,"Works in browser and Node.js with same API")),e("div",{className:"benefit"},e("h4",null,"🛠️ Go Integration"),e("p",null,"Seamless Go + JavaScript interoperability")),e("div",{className:"benefit"},e("h4",null,"📊 Debug Support"),e("p",null,"Built-in debugging and function discovery"))))),e("style",null,`
+        .app {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 20px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          line-height: 1.6;
+        }
+        
+        .app.loading, .app.error {
+          text-align: center;
+          padding: 60px 20px;
+        }
+        
+        .spinner {
+          width: 50px;
+          height: 50px;
+          border: 4px solid #f3f3f3;
+          border-top: 4px solid #007acc;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          margin: 0 auto 20px;
+        }
+        
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        
+        header {
+          text-align: center;
+          margin-bottom: 40px;
+          padding: 30px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          border-radius: 16px;
+          position: relative;
+        }
+        
+        header h1 {
+          margin: 0 0 10px 0;
+          font-size: 2.5rem;
+          font-weight: 700;
+        }
+        
+        header p {
+          margin: 0 0 20px 0;
+          opacity: 0.9;
+          font-size: 1.1rem;
+        }
+        
+        .status {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          background: rgba(255, 255, 255, 0.2);
+          padding: 8px 16px;
+          border-radius: 20px;
+          font-size: 0.9rem;
+        }
+        
+        .status-indicator {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #4ade80;
+          animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        
+        .demo-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 20px;
+          margin-bottom: 30px;
+        }
+        
+        .demo-card {
+          background: white;
+          padding: 24px;
+          border-radius: 12px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          border: 1px solid #e5e7eb;
+          transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .demo-card:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+        
+        .demo-card h3 {
+          margin-top: 0;
+          margin-bottom: 16px;
+          color: #374151;
+          font-size: 1.2rem;
+        }
+        
+        .input-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 12px;
+          flex-wrap: wrap;
+        }
+        
+        .button-group {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
+        
+        input {
+          flex: 1;
+          min-width: 120px;
+          padding: 10px 12px;
+          border: 2px solid #e5e7eb;
+          border-radius: 8px;
+          font-size: 14px;
+          transition: border-color 0.2s;
+        }
+        
+        input:focus {
+          outline: none;
+          border-color: #007acc;
+        }
+        
+        button {
+          background: #007acc;
+          color: white;
+          border: none;
+          padding: 10px 16px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 600;
+          transition: all 0.2s;
+          white-space: nowrap;
+        }
+        
+        button:hover {
+          background: #0056a3;
+          transform: translateY(-1px);
+        }
+        
+        button:active {
+          transform: translateY(0);
+        }
+        
+        small {
+          color: #6b7280;
+          font-size: 0.8rem;
+        }
+        
+        .results {
+          background: #f0f9ff;
+          padding: 24px;
+          border-radius: 12px;
+          border: 2px solid #bae6fd;
+          margin: 30px 0;
+        }
+        
+        .results h2 {
+          margin-top: 0;
+          color: #0369a1;
+        }
+        
+        .result-card {
+          background: white;
+          padding: 16px;
+          border-radius: 8px;
+          border: 1px solid #bae6fd;
+        }
+        
+        .result-value {
+          font-weight: bold;
+          color: #007acc;
+          background: #e0f2fe;
+          padding: 2px 6px;
+          border-radius: 4px;
+        }
+        
+        .info-section {
+          margin-top: 40px;
+        }
+        
+        .info-section h2 {
+          text-align: center;
+          margin-bottom: 30px;
+          color: #374151;
+        }
+        
+        .benefits-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 20px;
+        }
+        
+        .benefit {
+          background: #f9fafb;
+          padding: 20px;
+          border-radius: 12px;
+          border: 1px solid #e5e7eb;
+          text-align: center;
+        }
+        
+        .benefit h4 {
+          margin: 0 0 8px 0;
+          color: #374151;
+          font-size: 1.1rem;
+        }
+        
+        .benefit p {
+          margin: 0;
+          color: #6b7280;
+          font-size: 0.9rem;
+        }
+        
+        .error {
+          color: #dc2626;
+        }
+        
+        .error button {
+          background: #dc2626;
+          margin-top: 20px;
+        }
+        
+        .error button:hover {
+          background: #b91c1c;
+        }
+        
+        details {
+          background: #fef2f2;
+          padding: 16px;
+          border-radius: 8px;
+          border: 1px solid #fecaca;
+        }
+        
+        summary {
+          cursor: pointer;
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+        
+        code {
+          background: #f3f4f6;
+          padding: 2px 4px;
+          border-radius: 4px;
+          font-family: monospace;
+          font-size: 0.9em;
+        }
+        
+        @media (max-width: 768px) {
+          .app {
+            padding: 10px;
+          }
+          
+          header {
+            padding: 20px;
+          }
+          
+          header h1 {
+            font-size: 2rem;
+          }
+          
+          .demo-grid {
+            grid-template-columns: 1fr;
+          }
+          
+          .input-group {
+            flex-direction: column;
+          }
+          
+          input {
+            min-width: auto;
+          }
+        }
+      `))}function k(){return new Promise(t=>{window.Go?t():setTimeout(()=>k().then(t),50)})}async function Y(){try{await k();const t=q(J,{});N(t,document.getElementById("app"))}catch(t){console.error("Failed to start app:",t),document.getElementById("app").innerHTML=`
+          <div class="loading-fallback">
+            <h2 style="color: #dc2626;">Application Error</h2>
+            <p>Failed to initialize the application. Check the console for more details.</p>
+            <button onclick="window.location.reload()" style="
+              background: #007acc; 
+              color: white; 
+              border: none; 
+              padding: 10px 20px; 
+              border-radius: 5px; 
+              cursor: pointer;
+              margin-top: 10px;
+            ">Reload Page</button>
+          </div>
+        `}}Y();

package/templates/wasm/dist/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun + Go WASM</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    
+    .loading-fallback {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      flex-direction: column;
+      background: #f7f7f7;
+    }
+    
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #007acc;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20px;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+  <script type="module" crossorigin src="/assets/index-BNqTDBdE.js"></script>
+</head>
+<body>
+  <div id="app">
+    <div class="loading-fallback">
+      <div class="loading-spinner"></div>
+      <h2>Loading Frontend Hamroun + WASM...</h2>
+      <p>Initializing application and WebAssembly runtime...</p>
+    </div>
+  </div>
+  
+  <!-- Go WASM Runtime -->
+  <script src="/wasm_exec.js"></script>
+  
+  <!-- Application -->
+</body>
+</html>