frontend-hamroun 1.2.75 → 1.2.77

package/templates/go-wasm-app/src/app.js

@@ -0,0 +1,173 @@
+// Support both ESM and CommonJS importing styles
+const frontendHamroun = 
+  typeof require !== 'undefined' 
+    ? require('frontend-hamroun') 
+    : await import('frontend-hamroun');
+
+// Destructure the imports from either ESM or CJS modules
+const { 
+  useState, 
+  useEffect, 
+  jsx, 
+  Fragment, 
+  loadGoWasm, 
+  createTypedWasmFunction, 
+  goValues 
+} = frontendHamroun;
+
+export function GoWasmDemo() {
+  // Track loading state
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [wasm, setWasm] = useState(null);
+  
+  // Track calculation values
+  const [num1, setNum1] = useState(5);
+  const [num2, setNum2] = useState(7);
+  const [result, setResult] = useState(null);
+  
+  // Track JSON example
+  const [jsonInput, setJsonInput] = useState('{"name": "Frontend Hamroun", "version": "1.0"}');
+  const [jsonResult, setJsonResult] = useState(null);
+
+  // Load the WASM module when component mounts
+  useEffect(() => {
+    async function loadWasmModule() {
+      try {
+        setLoading(true);
+        console.log('Loading WASM module...');
+        
+        // Load WASM module using frontend-hamroun's loadGoWasm
+        const wasmInstance = await loadGoWasm('/wasm/example.wasm', {
+          debug: true, // Enable debug logging
+          goWasmPath: '/wasm/wasm_exec.js' // Path to Go's wasm_exec.js
+        });
+        
+        console.log('WASM module loaded successfully!', wasmInstance);
+        setWasm(wasmInstance);
+        
+        // Demonstrate calling a function right away
+        if (wasmInstance.functions.goAdd) {
+          const sum = wasmInstance.functions.goAdd(5, 7);
+          console.log('5 + 7 =', sum);
+          setResult(sum);
+        }
+        
+        setLoading(false);
+      } catch (err) {
+        console.error('Failed to load WASM module:', err);
+        setError(err.toString());
+        setLoading(false);
+      }
+    }
+    
+    loadWasmModule();
+    
+    // Cleanup function
+    return () => {
+      console.log('Cleaning up WASM resources...');
+      // Any cleanup needed for WASM resources
+    };
+  }, []); // Empty dependency array means this runs once on mount
+
+  // Function to calculate using WASM
+  const calculateResult = () => {
+    if (!wasm || !wasm.functions.goAdd) {
+      setError('WASM module not loaded or function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const sum = wasm.functions.goAdd(parseInt(num1), parseInt(num2));
+      setResult(sum);
+      setError(null);
+    } catch (err) {
+      console.error('Error calling WASM function:', err);
+      setError('Error calling WASM function: ' + err);
+    }
+  };
+  
+  // Function to parse JSON using WASM
+  const parseJsonWithWasm = () => {
+    if (!wasm || !wasm.functions.goParseJSON) {
+      setError('WASM module not loaded or JSON parsing function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const parsed = wasm.functions.goParseJSON(jsonInput);
+      setJsonResult(JSON.stringify(parsed, null, 2));
+      setError(null);
+    } catch (err) {
+      console.error('Error parsing JSON with WASM:', err);
+      setError('Error parsing JSON with WASM: ' + err);
+    }
+  };
+
+  // Render the component
+  return (
+    <div className="wasm-demo">
+      <h1>Go WebAssembly Demo</h1>
+      
+      {loading && <p>Loading WASM module...</p>}
+      
+      {error && (
+        <div className="error">
+          <h3>Error:</h3>
+          <pre>{error}</pre>
+        </div>
+      )}
+      
+      {wasm && !loading && (
+        <div className="demo-section">
+          <h2>WASM Addition</h2>
+          <div className="calculator">
+            <input 
+              type="number" 
+              value={num1} 
+              onChange={(e) => setNum1(e.target.value)} 
+            />
+            <span> + </span>
+            <input 
+              type="number" 
+              value={num2} 
+              onChange={(e) => setNum2(e.target.value)} 
+            />
+            <button onClick={calculateResult}>Calculate</button>
+            <span className="result">Result: {result}</span>
+          </div>
+          
+          <h2>WASM JSON Parsing</h2>
+          <div className="json-parser">
+            <textarea
+              rows="5"
+              value={jsonInput}
+              onChange={(e) => setJsonInput(e.target.value)}
+            />
+            <button onClick={parseJsonWithWasm}>Parse JSON</button>
+            {jsonResult && (
+              <pre className="json-result">{jsonResult}</pre>
+            )}
+          </div>
+          
+          <h2>Available WASM Functions</h2>
+          <ul>
+            {wasm && Object.keys(wasm.functions).map(funcName => (
+              <li key={funcName}>{funcName}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Support both CommonJS and ESM exports
+export default GoWasmDemo;
+
+// Add CommonJS compatibility
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { GoWasmDemo };
+}

package/templates/go-wasm-app/vite.config.js

@@ -17,11 +17,22 @@ export default defineConfig({
       input: {
         client: resolve(__dirname, 'src/client.js')
       },
-      output: {
-        entryFileNames: 'assets/[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
-      }
+      output: [
+        {
+          // ESM output
+          entryFileNames: 'assets/[name].mjs',
+          chunkFileNames: 'assets/[name]-[hash].mjs',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'es',
+        },
+        {
+          // CommonJS output
+          entryFileNames: 'assets/[name].js',
+          chunkFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'cjs',
+        }
+      ]
     }
   },
 

package/templates/ssr-template/client.js

@@ -1,30 +1,58 @@
-import { hydrate } from 'frontend-hamroun';
+import { hydrate, jsx } from 'frontend-hamroun';
 
-// Dynamically import the page component that matches the current URL
-async function hydratePage() {
-  try {
-    // Get the current path
-    const path = window.location.pathname;
-    
-    // Import the corresponding page component
-    const pagePath = `/src/pages${path === '/' ? '/index' : path}.jsx`;
-    
-    try {
-      const { default: PageComponent } = await import(pagePath);
-      
-      // Find the root element to hydrate
-      const rootElement = document.getElementById('app');
-      if (rootElement) {
-        // Hydrate the server-rendered HTML with the client component
-        hydrate(<PageComponent />, rootElement);
+// Create a sample virtual DOM matching what was rendered on the server
+const app = {
+  type: 'div',
+  props: {
+    id: 'app',
+    children: [
+      {
+        type: 'h1',
+        props: {
+          children: 'Hello from Server-Side Rendering!'
+        }
+      },
+      {
+        type: 'p',
+        props: {
+          children: `This page was rendered at ${new Date().toISOString()}`
+        }
+      },
+      {
+        type: 'button',
+        props: {
+          id: 'counter-btn',
+          className: 'btn',
+          onClick: () => {
+            let count = 1; // Start at 1 since we're updating
+            const btn = document.getElementById('counter-btn');
+            if (btn) {
+              btn.textContent = `Click me (${count})`;
+              btn.addEventListener('click', () => {
+                count++;
+                btn.textContent = `Click me (${count})`;
+              });
+            }
+          },
+          children: 'Click me (0)'
+        }
       }
-    } catch (error) {
-      console.error(`Error importing page component for path ${path}:`, error);
-    }
-  } catch (error) {
-    console.error('Error during hydration:', error);
+    ]
   }
-}
+};
 
-// Start hydration when the DOM is ready
-document.addEventListener('DOMContentLoaded', hydratePage);
+// Wait for DOM to be fully loaded before hydrating
+window.addEventListener('DOMContentLoaded', () => {
+  console.log('Hydrating client-side content...');
+  
+  // Get the container element
+  const container = document.getElementById('app');
+  if (!container) {
+    console.error('Could not find app container for hydration');
+    return;
+  }
+  
+  // Hydrate the app
+  hydrate(app, container);
+  console.log('Hydration complete!');
+});

package/templates/ssr-template/server.js

@@ -3,6 +3,8 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import fetch from 'node-fetch';
 import dotenv from 'dotenv';
+import fs from 'fs';
+import { renderToString } from 'frontend-hamroun/ssr';
 
 // Load environment variables
 dotenv.config();
@@ -211,9 +213,6 @@ async function generateMetaTagsWithGemini(pageContent) {
 app.get('/', async (req, res) => {
   console.log('Handling root route for SSR');
   try {
-    // Import the renderToString function
-    const frontendLib = await import('frontend-hamroun');
-    
     // Create a simple virtual DOM tree
     const vnode = {
       type: 'div',
@@ -248,33 +247,11 @@ app.get('/', async (req, res) => {
     const contentForMetaTags = 'Server-side rendered page using Frontend Hamroun framework. ' +
       'This demonstrates SSR capabilities with dynamic content generation and client-side hydration.';
     
-    console.log('Fetching meta tags for the page using Gemini 2.0 Flash...');
+    console.log('Fetching meta tags for the page...');
     const metaTags = await generateMetaTags(contentForMetaTags);
     
-    // The renderToString function exists and works properly
-    console.log('renderToString type:', typeof frontendLib.renderToString);
-    
-    // Generate HTML from our virtual node
-    let content;
-    if (typeof frontendLib.renderToString === 'function') {
-      // Call the function
-      const renderResult = frontendLib.renderToString(vnode);
-      
-      // If it returns a promise, await it
-      if (renderResult instanceof Promise) {
-        console.log('renderToString returned a Promise, awaiting it');
-        content = await renderResult;
-      } else {
-        console.log('renderToString returned directly:', typeof renderResult);
-        content = renderResult;
-      }
-    } else {
-      throw new Error('renderToString is not a function');
-    }
-    
-    // Log the content to verify it's not empty or still a Promise
-    console.log('Final content type:', typeof content);
-    console.log('Content preview:', content ? content.substring(0, 100) : 'empty');
+    // Generate HTML from our virtual node directly using imported renderToString
+    const content = renderToString(vnode);
     
     // Send complete HTML document with explicit content type
     res.setHeader('Content-Type', 'text/html');

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

@@ -17,14 +17,30 @@ export default defineConfig({
       input: {
         client: resolve(__dirname, 'src/client.ts')
       },
-      output: {
-        entryFileNames: 'assets/[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
-      }
+      output: [
+        {
+          // ESM output
+          entryFileNames: 'assets/[name].mjs',
+          chunkFileNames: 'assets/[name]-[hash].mjs',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'es',
+        },
+        {
+          // CommonJS output
+          entryFileNames: 'assets/[name].js',
+          chunkFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'cjs',
+        }
+      ]
     }
   },
 
+  // Add optimizations for frontend-hamroun
+  optimizeDeps: {
+    include: ['frontend-hamroun']
+  },
+
   // Resolve aliases for better imports
   resolve: {
     alias: {

package/dist/server/wasm.d.ts

@@ -1,7 +0,0 @@
-import { GoWasmInstance, GoWasmOptions } from '../wasm.js';
-
-export declare function initNodeWasm(): Promise<void>;
-export declare function loadGoWasmFromFile(
-  wasmFilePath: string,
-  options?: GoWasmOptions
-): Promise<GoWasmInstance>;

package/dist/wasm.d.ts

@@ -1,37 +0,0 @@
-export interface GoWasmInstance {
-  instance: WebAssembly.Instance;
-  module: WebAssembly.Module;
-  exports: any;
-  functions: Record<string, Function>;
-}
-
-export interface GoWasmOptions {
-  goWasmPath?: string;
-  importObject?: WebAssembly.Imports;
-  loadGo?: boolean;
-  onLoad?: (instance: GoWasmInstance) => void;
-  debug?: boolean;
-}
-
-export declare function loadGoWasm(
-  wasmUrl: string, 
-  options?: GoWasmOptions
-): Promise<GoWasmInstance>;
-
-export declare function createTypedWasmFunction<T extends (...args: any[]) => any>(
-  instance: GoWasmInstance,
-  functionName: string
-): T;
-
-export declare const goValues: {
-  stringToGo: (instance: GoWasmInstance, str: string) => number;
-  stringFromGo: (instance: GoWasmInstance, ptr: number) => string;
-  objectToGo: (instance: GoWasmInstance, obj: any) => number;
-  objectFromGo: (instance: GoWasmInstance, ptr: number) => any;
-};
-
-export declare const wasm: {
-  loadGoWasm: typeof loadGoWasm;
-  createTypedWasmFunction: typeof createTypedWasmFunction;
-  goValues: typeof goValues;
-};