frontend-hamroun 1.2.75 → 1.2.77

package/templates/fullstack-app/src/pages/index.tsx

@@ -1,33 +1,110 @@
-import { jsx } from 'frontend-hamroun';
-import Layout from '../components/Layout';
+import { jsx, useState, useEffect, batchUpdates } from 'frontend-hamroun';
 import UserList from '../components/UserList';
+import StateDemo from '../components/StateDemo';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 import { UserApi } from '../data/api';
 
-const HomePage = ({ initialState }) => (
-  <Layout title="Home">
+// Home Page Component with Server Side Props
+export default function HomePage({ users, posts, initialState }) {
+  const [state, setState] = useState(initialState || {});
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  
+  // Fetch data when refresh is triggered
+  useEffect(() => {
+    if (refreshTrigger === 0) return; // Skip initial render
+    
+    async function fetchData() {
+      try {
+        const [users, posts] = await Promise.all([
+          UserApi.getAll(),
+          UserApi.getPosts()
+        ]);
+        
+        // Use batch updates for efficiency
+        batchUpdates(() => {
+          setState(prev => ({
+            ...prev,
+            data: {
+              ...prev.data,
+              users,
+              posts
+            },
+            lastUpdate: new Date().toISOString()
+          }));
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+    
+    fetchData();
+  }, [refreshTrigger]);
+  
+  const handleRefresh = () => {
+    setRefreshTrigger(t => t + 1);
+  };
+
+  return (
     <div className="max-w-4xl mx-auto py-8">
-      <h1 className="text-3xl font-bold text-blue-600 mb-6">Welcome to your Frontend Hamroun application!</h1>
+      <h1 className="text-3xl font-bold text-blue-600 mb-6">
+        Welcome to your Next-style Frontend Hamroun application!
+      </h1>
       
-      <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">User List</h2>
-        <UserList users={initialState.data?.users || []} />
+      <div className="mb-8">
+        <button 
+          className="mb-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          onClick={handleRefresh}
+        >
+          Refresh Data
+        </button>
+        
+        <div className="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
+          <p className="text-blue-700">
+            Last updated: {state.lastUpdate || 'Never'} 
+          </p>
+        </div>
       </div>
       
-      <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
+      <ErrorBoundary>
+        <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">User List</h2>
+          <UserList users={users || state.data?.users || []} />
+        </div>
+      </ErrorBoundary>
+      
+      <ErrorBoundary>
+        <StateDemo />
+      </ErrorBoundary>
+      
+      <div className="bg-gray-50 rounded-lg p-6 border border-gray-200 mt-8">
         <h3 className="text-lg font-medium text-gray-700 mb-3">Application State</h3>
         <pre className="overflow-auto p-4 bg-gray-100 rounded-md text-sm text-gray-800">
-          {JSON.stringify(initialState, null, 2)}
+          {JSON.stringify({ users, posts, ...state }, null, 2)}
         </pre>
       </div>
     </div>
-  </Layout>
-);
-
-// Static method to fetch initial data for this page
-HomePage.getInitialData = async () => {
-  return {
-    users: await UserApi.getAll()
-  };
-};
+  );
+}
 
-export default HomePage;
+// Server-side data fetching (Next.js style)
+export async function getServerSideProps() {
+  try {
+    const users = await UserApi.getAll();
+    const posts = await UserApi.getPosts();
+    
+    return {
+      props: {
+        users,
+        posts
+      }
+    };
+  } catch (error) {
+    console.error('Error fetching initial data:', error);
+    return {
+      props: {
+        users: [],
+        posts: []
+      }
+    };
+  }
+}

package/templates/fullstack-app/src/pages/users/[id].tsx

@@ -0,0 +1,153 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+import { UserApi } from '../../data/api';
+
+export default function UserDetail({ user, posts, initialState }) {
+  // State for client-side data fetching when needed
+  const [userData, setUserData] = useState(user);
+  const [userPosts, setUserPosts] = useState(posts || []);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  
+  // Get user ID from route params
+  const { id } = initialState?.params || {};
+  
+  // Fetch user data if not provided from server
+  useEffect(() => {
+    if (!userData && id) {
+      setLoading(true);
+      
+      Promise.all([
+        UserApi.getById(id),
+        UserApi.getPosts(id)
+      ])
+        .then(([userData, postsData]) => {
+          setUserData(userData);
+          setUserPosts(postsData);
+          setLoading(false);
+        })
+        .catch(err => {
+          console.error('Error fetching user data:', err);
+          setError(err.message || 'Failed to load user data');
+          setLoading(false);
+        });
+    }
+  }, [userData, id]);
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="animate-pulse rounded-md bg-gray-100 p-8">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
+          <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
+          <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
+          <div className="h-40 bg-gray-200 rounded mb-4"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="rounded-md bg-red-50 p-4 border border-red-200">
+          <h2 className="text-lg font-bold text-red-700">Error Loading User</h2>
+          <p className="text-red-600">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!userData) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="rounded-md bg-yellow-50 p-4 border border-yellow-200">
+          <h2 className="text-lg font-bold text-yellow-700">User Not Found</h2>
+          <p className="text-yellow-600">Could not find user with ID: {id}</p>
+          <a href="/users" className="text-blue-600 hover:underline mt-2 block">
+            Back to Users List
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <div className="bg-white shadow-lg rounded-lg p-6 mb-6">
+        <h1 className="text-2xl font-bold text-gray-800 mb-4">{userData.name}</h1>
+        <div className="user-info mb-6">
+          <p className="text-gray-600">
+            <span className="font-bold">ID:</span> {userData.id}
+          </p>
+          <p className="text-gray-600">
+            <span className="font-bold">Email:</span> {userData.email}
+          </p>
+        </div>
+        
+        <a href="/users" className="text-blue-600 hover:underline">
+          Back to Users List
+        </a>
+      </div>
+      
+      {userPosts && userPosts.length > 0 ? (
+        <div className="bg-white shadow-lg rounded-lg p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
+          <div className="space-y-4">
+            {userPosts.map(post => (
+              <div key={post.id} className="border-b pb-4">
+                <h3 className="text-lg font-semibold">{post.title}</h3>
+                <p className="text-gray-600">{post.content}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white shadow-lg rounded-lg p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
+          <p className="text-gray-500 italic">No posts found for this user.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Next.js style server-side data fetching
+export async function getServerSideProps({ params }) {
+  try {
+    const userId = params.id;
+    
+    // Parallel data fetching
+    const [user, posts] = await Promise.all([
+      UserApi.getById(parseInt(userId)),
+      UserApi.getPosts(parseInt(userId))
+    ]);
+    
+    // Handle user not found
+    if (!user) {
+      return {
+        notFound: true
+      };
+    }
+    
+    return {
+      props: {
+        user,
+        posts
+      }
+    };
+  } catch (error) {
+    console.error(`Error fetching user ${params.id}:`, error);
+    
+    // Pass the error for client-side handling
+    return {
+      props: {
+        error: {
+          message: error.message,
+          status: error.status || 500
+        },
+        user: null,
+        posts: []
+      }
+    };
+  }
+}

package/templates/fullstack-app/src/pages/wasm-demo.tsx

@@ -0,0 +1 @@
+// This file will be removed as it contains WASM functionality

package/templates/go/example.go

@@ -9,10 +9,10 @@ import (
 	"syscall/js"
 )
 
-// Example Go function to be called from JavaScript
+// Basic arithmetic functions
 func add(this js.Value, args []js.Value) interface{} {
 	if len(args) != 2 {
-		return js.ValueOf("Error: Expected two arguments")
+		return js.ValueOf("Error: add requires 2 arguments")
 	}
 
 	a := args[0].Int()
@@ -20,118 +20,131 @@ func add(this js.Value, args []js.Value) interface{} {
 	return js.ValueOf(a + b)
 }
 
-// Helper to convert Go string to JS string
-func stringToJS(s string) js.Value {
-	return js.ValueOf(s)
-}
+func subtract(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.ValueOf("Error: subtract requires 2 arguments")
+	}
 
-// Helper to convert JS string to Go string
-func stringFromJS(jsStr js.Value) string {
-	return jsStr.String()
+	a := args[0].Int()
+	b := args[1].Int()
+	return js.ValueOf(a - b)
 }
 
-// Helper to convert Go object to JS object (via JSON)
-func objectToJS(obj interface{}) js.Value {
-	data, err := json.Marshal(obj)
-	if err != nil {
-		return js.ValueOf("Error: Failed to marshal JSON")
+func multiply(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.ValueOf("Error: multiply requires 2 arguments")
 	}
-	return stringToJS(string(data))
-}
 
-// Helper to convert JS object to Go object (via JSON)
-func objectFromJS(jsObj js.Value) (interface{}, error) {
-	jsonStr := jsObj.String()
-	var result interface{}
-	err := json.Unmarshal([]byte(jsonStr), &result)
-	return result, err
+	a := args[0].Int()
+	b := args[1].Int()
+	return js.ValueOf(a * b)
 }
 
-// Complex example: process data in Go
-func processData(this js.Value, args []js.Value) interface{} {
-	if len(args) == 0 {
-		return js.ValueOf("Error: Expected at least one argument")
+// String operations
+func concat(this js.Value, args []js.Value) interface{} {
+	if len(args) < 1 {
+		return js.ValueOf("")
 	}
 
-	// Get input data
-	data := args[0]
-	if data.Type() != js.TypeObject {
-		return js.ValueOf("Error: Expected JSON object")
-	}
-
-	// Convert JS object to Go map
-	jsonStr := js.Global().Get("JSON").Call("stringify", data).String()
-	var inputMap map[string]interface{}
-	if err := json.Unmarshal([]byte(jsonStr), &inputMap); err != nil {
-		return js.ValueOf(fmt.Sprintf("Error parsing JSON: %s", err.Error()))
+	result := ""
+	for _, arg := range args {
+		result += arg.String()
 	}
+	return js.ValueOf(result)
+}
 
-	// Add new fields
-	inputMap["processed"] = true
-	inputMap["processor"] = "Go WASM"
-
-	// Add some computed fields
-	if values, ok := inputMap["values"].([]interface{}); ok {
-		sum := 0.0
-		for _, v := range values {
-			if num, ok := v.(float64); ok {
-				sum += num
-			}
-		}
-		inputMap["sum"] = sum
+// JSON operations
+func parseJSON(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.ValueOf("Error: parseJSON requires 1 argument")
 	}
 
-	// Convert back to JS
-	resultJSON, err := json.Marshal(inputMap)
+	jsonStr := args[0].String()
+	var result interface{}
+	err := json.Unmarshal([]byte(jsonStr), &result)
 	if err != nil {
-		return js.ValueOf(fmt.Sprintf("Error generating JSON: %s", err.Error()))
+		return js.ValueOf("Error parsing JSON: " + err.Error())
 	}
 
-	return js.ValueOf(string(resultJSON))
+	// Convert result to JS value
+	return mapToJSValue(result)
 }
 
-// Helper functions exposed to JavaScript
-func registerHelperFunctions() {
-	js.Global().Set("__stringToGo", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-		if len(args) != 1 {
-			return nil
+// Helper functions for JSON conversion
+func mapToJSValue(value interface{}) js.Value {
+	switch v := value.(type) {
+	case map[string]interface{}:
+		result := js.Global().Get("Object").New()
+		for key, val := range v {
+			result.Set(key, mapToJSValue(val))
 		}
-		return stringToJS(stringFromJS(args[0]))
-	}))
-
-	js.Global().Set("__stringFromGo", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-		if len(args) != 1 {
-			return nil
+		return result
+	case []interface{}:
+		result := js.Global().Get("Array").New(len(v))
+		for i, val := range v {
+			result.SetIndex(i, mapToJSValue(val))
 		}
-		return stringToJS(stringFromJS(args[0]))
-	}))
+		return result
+	case string:
+		return js.ValueOf(v)
+	case float64:
+		return js.ValueOf(v)
+	case bool:
+		return js.ValueOf(v)
+	case nil:
+		return js.ValueOf(nil)
+	default:
+		return js.ValueOf(fmt.Sprint(v))
+	}
+}
 
-	js.Global().Set("__objectToGo", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-		if len(args) != 1 {
-			return nil
-		}
-		obj, _ := objectFromJS(args[0])
-		return objectToJS(obj)
-	}))
+// Special utility functions for string handling between Go and JS
+func __stringToGo(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.ValueOf(-1)
+	}
+	return args[0] // Pass through
+}
 
-	js.Global().Set("__objectFromGo", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-		if len(args) != 1 {
-			return nil
-		}
-		return stringToJS(stringFromJS(args[0]))
-	}))
+func __stringFromGo(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.ValueOf("")
+	}
+	return args[0] // Pass through
+}
+
+func __objectToGo(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.ValueOf(-1)
+	}
+	return args[0] // Pass through
+}
+
+func __objectFromGo(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.ValueOf("")
+	}
+	return args[0] // Pass through
 }
 
 func main() {
-	fmt.Println("Go WASM Module initialized")
+	fmt.Println("Go WebAssembly module initialized")
 
-	// Register functions to be callable from JavaScript
+	// Register functions to make available to JavaScript
 	js.Global().Set("goAdd", js.FuncOf(add))
-	js.Global().Set("goProcessData", js.FuncOf(processData))
+	js.Global().Set("goSubtract", js.FuncOf(subtract))
+	js.Global().Set("goMultiply", js.FuncOf(multiply))
+	js.Global().Set("goConcat", js.FuncOf(concat))
+	js.Global().Set("goParseJSON", js.FuncOf(parseJSON))
 
-	// Register helper functions
-	registerHelperFunctions()
+	// Register special utility functions for frontend-hamroun integration
+	js.Global().Set("__stringToGo", js.FuncOf(__stringToGo))
+	js.Global().Set("__stringFromGo", js.FuncOf(__stringFromGo))
+	js.Global().Set("__objectToGo", js.FuncOf(__objectToGo))
+	js.Global().Set("__objectFromGo", js.FuncOf(__objectFromGo))
 
 	// Keep the program running
-	<-make(chan bool)
+	c := make(chan struct{}, 0)
+	fmt.Println("Go WebAssembly module ready")
+	<-c
 }

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

@@ -1,9 +1,11 @@
-export default {
+const config = {
   presets: [
     ['@babel/preset-env', {
       targets: {
         node: 'current'
-      }
+      },
+      // Enable dynamic imports for both ESM and CommonJS
+      modules: false
     }]
   ],
   plugins: [
@@ -13,3 +15,7 @@ export default {
     }]
   ]
 };
+
+// Support both ESM and CommonJS
+export default config;
+module.exports = config;

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

@@ -0,0 +1,62 @@
+// CommonJS/ESM compatible build configuration
+const buildConfig = {
+  /**
+   * Determines if we should build for dual module support
+   */
+  dualModuleSupport: true,
+  
+  /**
+   * Entry points for both client and server
+   */
+  entryPoints: {
+    client: 'src/client.js',
+    server: 'src/server.js'
+  },
+  
+  /**
+   * Output formats to generate
+   */
+  outputFormats: ['esm', 'cjs'],
+  
+  /**
+   * Output directory configuration
+   */
+  output: {
+    dir: 'dist',
+    client: {
+      esm: 'assets/[name].mjs',
+      cjs: 'assets/[name].js'
+    },
+    server: {
+      esm: 'server/[name].mjs',
+      cjs: 'server/[name].js'
+    }
+  },
+  
+  /**
+   * WebAssembly configuration
+   */
+  wasm: {
+    enabled: true,
+    goBinaryPath: 'go',
+    sourceDir: 'src/wasm',
+    outputDir: 'public/wasm',
+    copyGoRuntime: true
+  },
+  
+  /**
+   * Additional build options
+   */
+  options: {
+    minify: process.env.NODE_ENV === 'production',
+    sourcemap: true,
+    target: 'es2020'
+  }
+};
+
+// Make it work in both ESM and CommonJS environments
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = buildConfig;
+}
+
+export default buildConfig;