npm - frontend-hamroun - Versions diffs - 1.2.80 → 1.2.82 - Mend

frontend-hamroun 1.2.80 → 1.2.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/bin/cli.js +1 -1
package/dist/index.cjs.map +1 -1
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/templates/basic-app/src/App.jsx +16 -0
package/templates/basic-app/src/client.jsx +5 -0
package/templates/basic-app/src/components/Counter.jsx +13 -0
package/templates/basic-app/src/jsx-shim.js +3 -0
package/templates/basic-app/src/jsx-shim.ts +7 -0
package/templates/basic-app/src/main.jsx +98 -0
package/templates/basic-app/src/server.js +47 -0
package/templates/complete-app/api/hello.js +0 -0
package/templates/complete-app/lib/frontend-hamroun.js +182 -0
package/templates/complete-app/package.json +18 -0
package/templates/complete-app/pages/about.js +119 -0
package/templates/complete-app/pages/about.jsx +0 -0
package/templates/complete-app/pages/index.js +157 -0
package/templates/complete-app/pages/index.jsx +0 -0
package/templates/complete-app/pages/wasm-demo.js +290 -0
package/templates/complete-app/pages/wasm-demo.jsx +0 -0
package/templates/complete-app/public/client.js +89 -0
package/templates/complete-app/public/index.html +118 -0
package/templates/complete-app/public/styles.css +76 -0
package/templates/complete-app/server.js +226 -0
package/templates/complete-app/src/App.tsx +59 -0
package/templates/complete-app/src/client.tsx +18 -0
package/templates/complete-app/src/server.ts +218 -0
package/templates/complete-app/tsconfig.json +22 -0
package/templates/complete-app/tsconfig.server.json +19 -0
package/templates/{ssr-template → complete-app}/vite.config.js +16 -5
package/templates/complete-app/vite.config.ts +30 -0
package/templates/complete-app/wasm/build.bat +0 -0
package/templates/complete-app/wasm/build.sh +0 -0
package/templates/complete-app/wasm/example.go +0 -0
package/templates/fullstack-app/build/main.css +874 -874
package/templates/fullstack-app/build/main.css.map +7 -7
package/templates/fullstack-app/build/main.js +996 -967
package/templates/fullstack-app/build/main.js.map +7 -7
package/templates/fullstack-app/package-lock.json +6301 -0
package/templates/fullstack-app/public/styles.css +768 -768
package/templates/go/example.go +154 -99
package/templates/ssr-template/esbuild.config.js +33 -0
package/templates/ssr-template/jsx-shim.js +1 -0
package/templates/ssr-template/package.json +22 -16
package/templates/ssr-template/src/App.tsx +12 -52
package/templates/ssr-template/src/client.tsx +3 -17
package/templates/ssr-template/src/server.ts +21 -204
package/templates/ssr-template/tsconfig.json +10 -13
package/templates/ssr-template/tsconfig.server.json +6 -14
package/templates/wasm/build-wasm.js +228 -0
package/templates/wasm/esbuild.config.js +63 -0
package/templates/wasm/go/main.go +256 -0
package/templates/wasm/go/wasm_exec.js +0 -0
package/templates/wasm/index.html +97 -0
package/templates/wasm/jsx-shim.js +9 -0
package/templates/wasm/package-lock.json +5307 -0
package/templates/wasm/package.json +42 -0
package/templates/wasm/public/example.wasm +0 -0
package/templates/{go-wasm-app/public/wasm → wasm/public}/wasm_exec.js +561 -561
package/templates/wasm/src/App.tsx +564 -0
package/templates/wasm/src/client.tsx +220 -0
package/templates/wasm/src/index.tsx +21 -0
package/templates/wasm/src/server.ts +145 -0
package/templates/wasm/tsconfig.json +21 -0
package/templates/wasm/tsconfig.node.json +13 -0
package/templates/wasm/tsconfig.server.json +23 -0
package/templates/wasm/vite.config.ts +56 -0
package/templates/wasm/wasm-loader.js +103 -0
package/templates/basic-app/bun.lock +0 -196
package/templates/basic-app/docs/rapport_pfe.aux +0 -27
package/templates/basic-app/docs/rapport_pfe.out +0 -10
package/templates/basic-app/docs/rapport_pfe.pdf +0 -0
package/templates/basic-app/docs/rapport_pfe.tex +0 -68
package/templates/basic-app/docs/rapport_pfe.toc +0 -14
package/templates/basic-app/package-lock.json +0 -4185
package/templates/go-wasm-app/README.md +0 -38
package/templates/go-wasm-app/babel.config.js +0 -15
package/templates/go-wasm-app/build-client.js +0 -49
package/templates/go-wasm-app/build-wasm.js +0 -237
package/templates/go-wasm-app/package.json +0 -23
package/templates/go-wasm-app/public/index.html +0 -128
package/templates/go-wasm-app/public/styles.css +0 -197
package/templates/go-wasm-app/public/wasm/example.wasm +0 -0
package/templates/go-wasm-app/public/wasm/wasm_exec_node.js +0 -39
package/templates/go-wasm-app/server.js +0 -521
package/templates/go-wasm-app/src/App.jsx +0 -38
package/templates/go-wasm-app/src/app.js +0 -153
package/templates/go-wasm-app/src/client.js +0 -57
package/templates/go-wasm-app/src/components/Footer.jsx +0 -13
package/templates/go-wasm-app/src/components/Header.jsx +0 -19
package/templates/go-wasm-app/src/components/WasmDemo.jsx +0 -120
package/templates/go-wasm-app/src/main.jsx +0 -12
package/templates/go-wasm-app/src/wasm/example.go +0 -75
package/templates/go-wasm-app/tsconfig.server.json +0 -18
package/templates/go-wasm-app/vite.config.js +0 -34
package/templates/ssr-template/package-lock.json +0 -2478
package/templates/ssr-template/public/index.html +0 -47
package/templates/ssr-template/server.js +0 -369
/package/templates/{ssr-template → complete-app}/client.js +0 -0
/package/templates/{ssr-template → complete-app}/readme.md +0 -0
/package/templates/{ssr-template → complete-app}/server.ts +0 -0
/package/templates/{ssr-template → complete-app}/src/client.ts +0 -0
/package/templates/{ssr-template → complete-app}/src/pages/index.tsx +0 -0

package/templates/complete-app/public/index.html ADDED Viewed

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Static Fallback - Frontend Hamroun</title>
+  <link href="/styles.css" rel="stylesheet" type="text/css">
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background-color: #f8f9fa;
+      color: #212529;
+      line-height: 1.5;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .alert {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+      border-radius: 4px;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .warning {
+      background-color: #fff3cd;
+      color: #856404;
+      border: 1px solid #ffeeba;
+      border-radius: 4px;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .steps {
+      background-color: #e9ecef;
+      border-radius: 4px;
+      padding: 1.5rem;
+    }
+    h1 {
+      margin-top: 0;
+      color: #0066cc;
+    }
+    footer {
+      text-align: center;
+      padding: 1rem;
+      background-color: #f1f1f1;
+      font-size: 0.875rem;
+      color: #6c757d;
+    }
+    code {
+      background-color: #f1f1f1;
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+    }
+    .logo {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+      color: #0066cc;
+      font-weight: bold;
+      text-align: center;
+    }
+    ul {
+      margin-bottom: 0;
+    }
+    li {
+      margin-bottom: 0.5rem;
+    }
+    li:last-child {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="logo">Frontend Hamroun</div>
+    <div class="alert">
+      <h1>STATIC INDEX.HTML FILE</h1>
+      <p><strong>You should NOT be seeing this page if the server is running correctly.</strong></p>
+      <p>This is a static file that should only be used as a fallback when the server is not running.</p>
+    </div>
+    <div class="warning">
+      <p>If you're seeing this while running <code>npm run dev</code>, there's likely an issue with the Express route handling.</p>
+      <p>Try clearing your browser cache and refreshing the page.</p>
+    </div>
+    <div class="steps">
+      <h2>Troubleshooting Steps:</h2>
+      <ul>
+        <li>Check your terminal for any error messages</li>
+        <li>Verify that you've installed all dependencies with <code>npm install</code></li>
+        <li>Check that the server port (default: 3000) is not already in use</li>
+        <li>Make sure your Express routes are configured correctly</li>
+        <li>Try restarting the server with <code>npm run dev</code></li>
+        <li>Check that all required environment variables are set</li>
+      </ul>
+    </div>
+  </div>
+  <footer class="footer">
+    <div class="container">
+      <p>&copy; 2025 Frontend Hamroun - A lightweight full-stack JavaScript framework</p>
+    </div>
+  </footer>
+</body>
+</html>

package/templates/complete-app/public/styles.css ADDED Viewed

@@ -0,0 +1,76 @@
+/* Color scheme */
+:root {
+  --primary-color: #0066cc;
+  --primary-hover: #004c99;
+  --secondary-color: #6c757d;
+  --light-bg: #f8f9fa;
+  --light-border: #dee2e6;
+  --dark-text: #212529;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: var(--light-bg);
+  color: var(--dark-text);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+.container {
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+.logo {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--primary-color);
+  margin-bottom: 1.5rem;
+}
+h1, h2, h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+ul {
+  padding-left: 1.5rem;
+}
+li {
+  margin-bottom: 0.5rem;
+}
+.button, button {
+  display: inline-block;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color 0.15s ease-in-out;
+}
+.button:hover, button:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  text-decoration: none;
+}
+.footer {
+  padding: 1.5rem 0;
+  margin-top: 3rem;
+  background-color: #f1f1f1;
+  color: var(--secondary-color);
+  text-align: center;
+  font-size: 0.875rem;
+}

package/templates/complete-app/server.js ADDED Viewed

@@ -0,0 +1,226 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+// Fix imports by using only the exports that exist
+import {
+  renderToString,
+  jsx,
+  requestLogger,
+  errorHandler,
+  notFoundHandler,
+  rateLimit
+} from './lib/frontend-hamroun.js';
+import dotenv from 'dotenv';
+import compression from 'compression';
+import cors from 'cors';
+// Load environment variables
+dotenv.config();
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Create Express app
+const app = express();
+const PORT = process.env.PORT || 3000;
+// Middleware
+app.use(compression()); // Compress responses
+app.use(express.json()); // Parse JSON requests
+app.use(express.urlencoded({ extended: true })); // Parse URL-encoded requests
+app.use(cors()); // Enable CORS
+app.use(requestLogger); // Log all requests
+// Add rate limiting to prevent abuse
+app.use(rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100 // limit each IP to 100 requests per windowMs
+}));
+// Serve static files from the public directory
+// Important: This middleware should be defined BEFORE your catch-all route
+app.use(express.static(path.join(__dirname, 'public')));
+// Add correct MIME type for client.js module
+app.get('/client.js', (req, res) => {
+  res.type('application/javascript').sendFile(path.join(__dirname, 'public', 'client.js'));
+});
+// Serve WebAssembly files with correct MIME type
+app.get('*.wasm', (req, res, next) => {
+  res.type('application/wasm');
+  next();
+});
+// Add API routes example
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: 'Hello from the API!',
+    serverTime: new Date().toISOString()
+  });
+});
+// Find the pages directory
+const getPagesDirectory = () => {
+  return path.join(__dirname, 'pages');
+};
+// Helper to check if a file exists
+const fileExists = async (filePath) => {
+  try {
+    await fs.promises.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+};
+// Map URL path to component path
+const getComponentPath = async (urlPath) => {
+  const pagesDir = getPagesDirectory();
+  // Handle root path
+  if (urlPath === '/') {
+    const indexPath = path.join(pagesDir, 'index.js');
+    if (await fileExists(indexPath)) {
+      return {
+        componentPath: indexPath,
+        params: {}
+      };
+    }
+  }
+  // Try direct match (e.g., /about -> /pages/about.js)
+  const possibleExtensions = ['.js'];
+  for (const ext of possibleExtensions) {
+    const directPath = path.join(pagesDir, `${urlPath.slice(1)}${ext}`);
+    if (await fileExists(directPath)) {
+      return {
+        componentPath: directPath,
+        params: {}
+      };
+    }
+  }
+  // Try directory index (e.g., /about -> /pages/about/index.js)
+  for (const ext of possibleExtensions) {
+    const dirIndexPath = path.join(pagesDir, urlPath.slice(1), `index${ext}`);
+    if (await fileExists(dirIndexPath)) {
+      return {
+        componentPath: dirIndexPath,
+        params: {}
+      };
+    }
+  }
+  // No match found
+  return null;
+};
+// Handle all GET routes with SSR - explicitly exclude /public/ paths
+app.get('*', async (req, res, next) => {
+  try {
+    // Skip API routes
+    if (req.path.startsWith('/api/')) {
+      return next();
+    }
+    // Skip static assets - check file extensions that should be handled as static
+    if (req.path.match(/\.(js|css|ico|png|jpg|jpeg|gif|svg|wasm|txt|pdf|json|map)$/)) {
+      return next();
+    }
+    // Try to find the matching component
+    const routeResult = await getComponentPath(req.path);
+    if (!routeResult) {
+      return res.status(404).send(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <title>404 - Page Not Found</title>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <link href="/styles.css" rel="stylesheet" type="text/css">
+          </head>
+          <body>
+            <div id="app">
+              <div class="container">
+                <h1>404 - Page Not Found</h1>
+                <p>The page you requested could not be found.</p>
+                <a href="/" class="button">Go to Home</a>
+              </div>
+            </div>
+            <script id="__APP_DATA__" type="application/json">${JSON.stringify({
+              path: req.path,
+              error: 'not_found'
+            })}</script>
+            <script type="module" src="/client.js"></script>
+          </body>
+        </html>
+      `);
+    }
+    // Import the component
+    try {
+      const componentUrl = `file://${routeResult.componentPath}`;
+      const moduleImport = await import(componentUrl);
+      const PageComponent = moduleImport.default || moduleImport;
+      if (!PageComponent || typeof PageComponent !== 'function') {
+        throw new Error(`Invalid component in ${routeResult.componentPath}`);
+      }
+      // Create props with route data
+      const initialProps = {
+        params: routeResult.params,
+        path: req.path,
+        query: req.query,
+        api: {
+          serverTime: new Date().toISOString()
+        }
+      };
+      // Render the component
+      const result = PageComponent(initialProps);
+      let html = renderToString(result);
+      // Send complete HTML with hydration data
+      res.send(`
+        <!DOCTYPE html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Frontend Hamroun App</title>
+            <link href="/styles.css" rel="stylesheet" type="text/css">
+          </head>
+          <body>
+            <div id="app">${html}</div>
+            <script id="__APP_DATA__" type="application/json">${JSON.stringify(initialProps)}</script>
+            <script type="module" src="/client.js"></script>
+          </body>
+        </html>
+      `);
+    } catch (error) {
+      console.error('Error rendering component:', error);
+      next(error);
+    }
+  } catch (error) {
+    next(error);
+  }
+});
+// Add error handler middleware
+app.use(errorHandler);
+// Add 404 handler for API routes
+app.use(notFoundHandler);
+// Start the server
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+  console.log(`Mode: ${process.env.NODE_ENV || 'development'}`);
+});

package/templates/complete-app/src/App.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { useState, useEffect, useMemo, useRef, createContext } from 'frontend-hamroun';
+// Create a theme context
+const ThemeContext = createContext('light');
+export function App() {
+  // Initialize with a default state that works on both server and client
+  const [count, setCount] = useState(0);
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const renderCount = useRef(0);
+  // Client-side only effect
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      renderCount.current += 1;
+      console.log('Component rendered', renderCount.current, 'times');
+    }
+    return () => console.log('Component unmounting');
+  }, [count]);
+  // Memoized value
+  const doubled = useMemo(() => count * 2, [count]);
+  return (
+    <ThemeContext.Provider value={theme}>
+      <div style={{
+        padding: '20px',
+        backgroundColor: theme === 'dark' ? '#333' : '#fff',
+        color: theme === 'dark' ? '#fff' : '#333'
+      }}>
+        <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>
+        <p>Doubled value: {doubled}</p>
+        {typeof window !== 'undefined' && (
+          <p>Render count: {renderCount.current}</p>
+        )}
+        <button
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          style={{ marginTop: '10px' }}
+        >
+          Toggle Theme ({theme})
+        </button>
+        <script dangerouslySetInnerHTML={{
+          __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
+        }} />
+      </div>
+    </ThemeContext.Provider>
+  );
+}

package/templates/complete-app/src/client.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { hydrate, createElement } from 'frontend-hamroun';
+// For simplicity in this example, we just hydrate the root component
+// In a more complex app, you might use a router
+import HomePage from './pages/index';
+// When the DOM is ready, hydrate the server-rendered HTML
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    // Hydrate the app with the same component that was rendered on the server
+    hydrate(<HomePage />, rootElement);
+    console.log('Hydration complete');
+  } else {
+    console.error('Could not find root element with id "app"');
+  }
+});