baraqex 2.0.2 → 2.0.4

package/templates/fullstack-app/README.md

@@ -1,37 +1,62 @@
-# Frontend Hamroun Fullstack Template
-
-A dynamic, customizable fullstack template with automatic routing.
-
-## Getting Started
-
-1. Install dependencies:
-   ```
-   npm install
-   ```
-
-2. Run the development server:
-   ```
-   npm run dev
-   ```
-
-3. Build for production:
-   ```
-   npm run build
-   ```
-
-4. Run in production mode:
-   ```
-   npm start
-   ```
-
-## Customizing Without Touching Core Files
-
-This template is designed to be customized without modifying the core server or app files:
-
-1. **Configuration**: Edit `src/config.ts` to change app settings
-2. **Pages**: Add new pages in `src/pages` - they become routes automatically
-3. **Components**: Create reusable components in `src/components`
-4. **API Endpoints**: Add new API endpoints in `src/data/api.ts`
-
-## File Structure
-
+# Baraqex Full-Stack Template
+
+A complete starter that brings together the full Baraqex stack in one project:
+
+- **Frontend** — JSX components with hooks in `src/`
+- **Backend** — Express REST API in `server.ts` under `/api/*`
+- **SSR** — the same `<App/>` is server-rendered with Baraqex and hydrated on the client
+- **WebAssembly (Go)** — `go/main.go` compiles to WASM and runs in the browser
+- **Live reload** — esbuild rebuild + Socket.IO reload in dev mode
+
+## Prerequisites
+
+- Node.js >= 18
+- Go >= 1.21 (only needed for the WASM demo)
+
+## Quick start
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Compile the Go WASM module (produces public/wasm/example.wasm + wasm_exec.js)
+npm run build:wasm
+
+# 3. Run in development (esbuild bundles src/, live reload over Socket.IO)
+npm run dev
+```
+
+Open `http://localhost:3000`.
+
+## Production build
+
+```bash
+npm run build:wasm   # compile Go -> WASM
+npm run build        # bundle client + server to dist/
+npm run start        # node dist/server.js
+```
+
+## What's where
+
+| Path              | Purpose                                    |
+| ----------------- | ------------------------------------------ |
+| `src/App.tsx`     | Shared app component (SSR + client)        |
+| `src/pages/*`     | Home, About, and WASM demo pages           |
+| `src/main.tsx`    | Client entry — hydrates the SSR markup     |
+| `server.ts`       | Express server: API, static, SSR           |
+| `go/main.go`      | Go source compiled to WebAssembly          |
+| `build-wasm.js`   | Compiles `go/` to `public/wasm/`           |
+| `build.mjs`       | esbuild bundle for client + server         |
+
+## The WASM demo
+
+The **WASM (Go)** page loads `public/wasm/example.wasm` through Baraqex's `loadGoWasm`
+and exposes these Go functions in the browser:
+
+- `goAdd(a, b)`
+- `goMultiply(a, b)`
+- `goFibonacci(n)`
+- `goProcessArray([...])`
+
+If the page shows a load error, run `npm run build:wasm` and confirm
+`/wasm/example.wasm` is served.

package/templates/fullstack-app/build-wasm.js

@@ -0,0 +1,80 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, copyFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const goDir = path.join(__dirname, 'go');
+const outputDir = path.join(__dirname, 'public', 'wasm');
+const wasmFile = path.join(outputDir, 'example.wasm');
+
+function checkGo() {
+  try {
+    execSync('go version', { stdio: 'pipe' });
+  } catch {
+    console.error(
+      '❌ Go is not installed or not on PATH.\n' +
+      'Install Go from https://go.dev/dl/ then re-run `npm run build:wasm`.'
+    );
+    process.exit(1);
+  }
+}
+
+function goRoot() {
+  return execSync('go env GOROOT', { encoding: 'utf8' }).trim();
+}
+
+function buildWasm() {
+  if (!existsSync(goDir)) {
+    console.error(`❌ Go source directory not found: ${goDir}`);
+    process.exit(1);
+  }
+
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  console.log('🔥 Compiling Go WASM module...');
+  const isWindows = process.platform === 'win32';
+  const goMod = path.join(goDir, 'go.mod');
+  if (!existsSync(goMod)) {
+    execSync('go mod init wasm-example', { cwd: goDir, stdio: 'inherit' });
+  }
+
+  // Compile with the js/wasm target
+  execSync(
+    `go build -o "${wasmFile}" main.go`,
+    {
+      cwd: goDir,
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        GOOS: 'js',
+        GOARCH: 'wasm',
+        CGO_ENABLED: '0'
+      },
+      shell: isWindows
+    }
+  );
+  console.log(`✅ WASM compiled: ${wasmFile}`);
+}
+
+function copyRuntime() {
+  const root = goRoot();
+  const wasmExec = path.join(root, 'lib', 'wasm', 'wasm_exec.js');
+  const dest = path.join(outputDir, 'wasm_exec.js');
+
+  if (!existsSync(wasmExec)) {
+    console.warn(`⚠️  wasm_exec.js not found at ${wasmExec}. You must copy it manually.`);
+    return;
+  }
+
+  copyFileSync(wasmExec, dest);
+  console.log(`✅ Runtime copied: ${dest}`);
+}
+
+buildWasm();
+copyRuntime();
+console.log('🎉 Go WASM build complete. Serve /wasm/example.wasm + /wasm/wasm_exec.js.');

package/templates/fullstack-app/build.mjs

@@ -0,0 +1,133 @@
+import * as esbuild from 'esbuild';
+import path from 'path';
+import fs from 'fs/promises';
+import { existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const clientEntry = path.join(__dirname, 'src', 'main.tsx');
+const serverEntry = path.join(__dirname, 'server.ts');
+const outdir = path.join(__dirname, 'dist');
+const buildDir = path.join(outdir, 'build');
+
+async function ensureDir(dir) {
+  if (!existsSync(dir)) {
+    await fs.mkdir(dir, { recursive: true });
+  }
+}
+
+// Tailwind + Autoprefixer postcss plugin for esbuild
+const cssPlugin = {
+  name: 'css-processor',
+  setup(build) {
+    build.onLoad({ filter: /\.css$/ }, async (args) => {
+      const css = await fs.readFile(args.path, 'utf8');
+      if (!args.path.includes('styles')) {
+        return { contents: css, loader: 'css' };
+      }
+      try {
+        const result = await postcss([tailwindcss, autoprefixer]).process(css, {
+          from: args.path
+        });
+        return { contents: result.css, loader: 'css' };
+      } catch (error) {
+        console.error('Error processing CSS:', error);
+        return { errors: [{ text: 'CSS processing error: ' + error.message }], loader: 'css' };
+      }
+    });
+  }
+};
+
+async function copyPublicFiles() {
+  const publicDir = path.join(__dirname, 'public');
+  if (!existsSync(publicDir)) return;
+  const dest = path.join(outdir, 'public');
+  await ensureDir(dest);
+  await fs.cp(publicDir, dest, { recursive: true });
+  console.log('✅ Public assets copied to dist/public');
+}
+
+async function buildClient() {
+  console.log('🚀 Building client...');
+  await ensureDir(buildDir);
+  await esbuild.build({
+    entryPoints: [clientEntry],
+    bundle: true,
+    minify: process.env.NODE_ENV === 'production',
+    format: 'esm',
+    outfile: path.join(buildDir, 'main.js'),
+    jsx: 'transform',
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+    loader: { '.tsx': 'tsx', '.ts': 'ts', '.jsx': 'jsx', '.js': 'js', '.css': 'css', '.json': 'json' },
+    plugins: [
+      {
+        name: 'baraqex-jsx',
+        setup(build) {
+          build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
+            const source = await fs.readFile(args.path, 'utf8');
+            const content = `import { jsx, Fragment } from 'baraqex';\n${source}`;
+            return { contents: content, loader: args.path.endsWith('tsx') ? 'tsx' : 'jsx' };
+          });
+        }
+      }
+    ],
+    define: { 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') },
+    sourcemap: true,
+    target: ['es2020']
+  });
+
+  // Build the Tailwind styles as a separate CSS file for SSR initial paint
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, 'src', 'styles.css')],
+    bundle: true,
+    outfile: path.join(buildDir, 'styles.css'),
+    plugins: [cssPlugin],
+    define: { 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') },
+    minify: process.env.NODE_ENV === 'production'
+  });
+
+  console.log('✅ Client build complete');
+}
+
+async function buildServer() {
+  console.log('🚀 Building server...');
+  await esbuild.build({
+    entryPoints: [serverEntry],
+    bundle: true,
+    platform: 'node',
+    target: ['node18'],
+    format: 'esm',
+    outfile: path.join(outdir, 'server.js'),
+    external: ['express', 'cors', 'compression', 'socket.io', 'dotenv'],
+    plugins: [
+      {
+        name: 'external-all',
+        setup(build) {
+          build.onResolve({ filter: /^baraqex/ }, () => ({ external: true }));
+        }
+      }
+    ],
+    define: { 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') },
+    sourcemap: false
+  });
+  console.log('✅ Server build complete');
+}
+
+async function build() {
+  console.log('🔨 Starting fullstack build...');
+  await ensureDir(outdir);
+  await Promise.all([copyPublicFiles(), buildClient(), buildServer()]);
+  await fs.copyFile(path.join(__dirname, 'index.html'), path.join(outdir, 'index.html'));
+  console.log('🎉 Build complete! Run `npm run start` to launch.');
+}
+
+build().catch((err) => {
+  console.error('Build failed:', err);
+  process.exit(1);
+});

package/templates/fullstack-app/go/main.go

@@ -0,0 +1,53 @@
+package main
+
+import (
+	"syscall/js"
+)
+
+// goAdd returns the sum of two numbers.
+func goAdd(this js.Value, args []js.Value) interface{} {
+	a := args[0].Float()
+	b := args[1].Float()
+	return a + b
+}
+
+// goMultiply returns the product of two numbers.
+func goMultiply(this js.Value, args []js.Value) interface{} {
+	a := args[0].Float()
+	b := args[1].Float()
+	return a * b
+}
+
+// goFibonacci returns the nth Fibonacci number (0-indexed).
+func goFibonacci(this js.Value, args []js.Value) interface{} {
+	n := args[0].Int()
+	if n <= 1 {
+		return n
+	}
+	a, b := 0, 1
+	for i := 2; i <= n; i++ {
+		a, b = b, a+b
+	}
+	return b
+}
+
+// goProcessArray doubles each element of a JS array.
+func goProcessArray(this js.Value, args []js.Value) interface{} {
+	src := args[0]
+	length := src.Length()
+	result := make([]interface{}, length)
+	for i := 0; i < length; i++ {
+		val := src.Index(i).Float()
+		result[i] = val * 2
+	}
+	return result
+}
+
+func main() {
+	c := make(chan struct{}, 0)
+	js.Global().Set("goAdd", js.FuncOf(goAdd))
+	js.Global().Set("goMultiply", js.FuncOf(goMultiply))
+	js.Global().Set("goFibonacci", js.FuncOf(goFibonacci))
+	js.Global().Set("goProcessArray", js.FuncOf(goProcessArray))
+	<-c
+}

package/templates/fullstack-app/index.html

@@ -1,36 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun SSR App</title>
-  <!-- Include the processed Tailwind CSS file -->
-  <link rel="stylesheet" href="/styles.css">
-  <!-- Fallback styles if Tailwind isn't loaded correctly -->
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      line-height: 1.6;
-      color: #333;
-    }
-    a {
-      color: #0066cc;
-      text-decoration: none;
-    }
-    a:hover {
-      text-decoration: underline;
-    }
-    pre {
-      background: #f5f5f5;
-      padding: 10px;
-      border-radius: 4px;
-      overflow: auto;
-    }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script src="/build/main.js" type="module"></script>
-  <script src="/socket.io/socket.io.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Baraqex Full-Stack App</title>
+  <link rel="stylesheet" href="/build/styles.css">
+  <script>window.__INITIAL_STATE__ = {};</script>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/wasm/wasm_exec.js"></script>
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="/build/main.js" type="module"></script>
+</body>
+</html>

package/templates/fullstack-app/package.json

@@ -1,35 +1,41 @@
-{
-  "name": "fullstack-app",
-  "version": "1.0.0",
-  "description": "Frontend Hamroun Fullstack App with esbuild",
-  "type": "module",
-  "scripts": {
-    "start": "node server.js",
-    "dev": "node process-tailwind.js && cross-env NODE_ENV=development tsx server.ts",
-    "build": "node process-tailwind.js && cross-env NODE_ENV=production tsx build.ts",
-    "serve": "cross-env NODE_ENV=production node dist/server.js",
-    "tailwind": "node process-tailwind.js"
-  },
-  "dependencies": {
-    "compression": "^1.7.4",
-    "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
-    "frontend-hamroun": "latest",
-    "socket.io": "^4.7.2"
-  },
-  "devDependencies": {
-    "@types/compression": "^1.7.3",
-    "@types/cors": "^2.8.14",
-    "@types/express": "^4.17.18",
-    "@types/node": "^20.8.2",
-    "autoprefixer": "^10.4.14",
-    "chokidar": "^3.5.3",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.19.5",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
-    "tsx": "^3.13.0",
-    "typescript": "^5.2.2"
-  }
-}
+{
+  "name": "fullstack-app",
+  "version": "1.0.0",
+  "description": "Baraqex full-stack template: frontend + backend + SSR + WebAssembly (Go)",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node dist/server.js",
+    "prod": "npm run build && npm run start",
+    "dev": "tsx server.ts",
+    "build": "node build.mjs",
+    "build:wasm": "node build-wasm.js",
+    "build:all": "node build-wasm.js && node build.mjs"
+  },
+  "dependencies": {
+    "baraqex": "latest",
+    "compression": "^1.7.4",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "socket.io": "^4.7.2"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.7.3",
+    "@types/cors": "^2.8.14",
+    "@types/express": "^4.17.18",
+    "@types/node": "^20.8.2",
+    "autoprefixer": "^10.4.14",
+    "chokidar": "^3.5.3",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.19.5",
+    "postcss": "^8.4.27",
+    "rimraf": "^5.0.0",
+    "tailwindcss": "^3.3.3",
+    "tsx": "^3.13.0",
+    "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/fullstack-app/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/templates/fullstack-app/public/wasm/.gitkeep

@@ -0,0 +1 @@
+