npm - frontend-hamroun - Versions diffs - 1.2.7 → 1.2.9 - Mend

frontend-hamroun 1.2.7 → 1.2.9

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 (9) hide show

package/package.json +1 -1
package/scripts/build-cli.js +242 -0
package/templates/basic/tsconfig.node.json +10 -0
package/templates/basic-app/src/App.tsx +126 -100
package/templates/basic-app/src/main.tsx +2 -10
package/templates/basic-app/tsconfig.json +0 -3
package/templates/basic-app/tsconfig.node.json +10 -0
package/templates/basic-app/vite.config.ts +4 -16
package/templates/full-stack/tsconfig.node.json +10 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "A lightweight frontend and backend framework for building modern web applications",
   "type": "module",
   "main": "dist/frontend-hamroun.umd.js",

package/scripts/build-cli.js CHANGED Viewed

@@ -491,3 +491,245 @@ fs.chmodSync(path.join(binDir, 'cli.cjs'), '755');
 console.log('✅ Created CJS wrapper: bin/cli.cjs');
 console.log('✅ CLI build process completed');
+// Create a minimal basic template (update existing code)
+function createBasicTemplate(templateDir) {
+  console.log(`📝 Creating minimal basic template at ${templateDir}`);
+  // Create package.json
+  const packageJson = {
+    "name": "frontend-hamroun-app",
+    "private": true,
+    "version": "0.1.0",
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc && vite build",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+      "frontend-hamroun": "latest"
+    },
+    "devDependencies": {
+      "@types/node": "^20.10.0",
+      "typescript": "^5.3.2",
+      "vite": "^5.0.0",
+      "vite-plugin-node-polyfills": "^0.21.0"
+    }
+  };
+  fs.writeFileSync(
+    path.join(templateDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+  // Create index.html
+  fs.writeFileSync(
+    path.join(templateDir, 'index.html'),
+    `<!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>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>`
+  );
+  // Create src directory
+  const srcDir = path.join(templateDir, 'src');
+  fs.mkdirSync(srcDir, { recursive: true });
+  // Create main.ts
+  fs.writeFileSync(
+    path.join(srcDir, 'main.ts'),
+    `import { render } from 'frontend-hamroun';
+import { App } from './App';
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    render(App({}), rootElement);
+    console.log('App rendered successfully');
+  }
+});`
+  );
+  // Create App.ts (not App.tsx)
+  fs.writeFileSync(
+    path.join(srcDir, 'App.ts'),
+    `import { useState, useRef } from 'frontend-hamroun';
+export function App(props) {
+  const [count, setCount] = useState(0);
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return {
+    type: 'div',
+    props: {
+      style: {
+        fontFamily: 'Arial, sans-serif',
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: '2rem'
+      },
+      children: [
+        {
+          type: 'h1',
+          props: {
+            style: { textAlign: 'center' },
+            children: 'Frontend Hamroun App'
+          }
+        },
+        {
+          type: 'p',
+          props: {
+            style: { textAlign: 'center' },
+            children: \`Render count: \${renderCount.current}\`
+          }
+        },
+        {
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              padding: '1rem',
+              border: '1px solid #ccc',
+              borderRadius: '8px'
+            },
+            children: [
+              {
+                type: 'h2',
+                props: {
+                  children: 'Counter Example'
+                }
+              },
+              {
+                type: 'p',
+                props: {
+                  children: \`Count: \${count}\`
+                }
+              },
+              {
+                type: 'div',
+                props: {
+                  style: {
+                    display: 'flex',
+                    gap: '8px'
+                  },
+                  children: [
+                    {
+                      type: 'button',
+                      props: {
+                        onClick: () => setCount(count - 1),
+                        style: {
+                          padding: '8px 16px',
+                          backgroundColor: '#ff4d4d',
+                          color: 'white',
+                          border: 'none',
+                          borderRadius: '4px',
+                          cursor: 'pointer'
+                        },
+                        children: 'Decrement'
+                      }
+                    },
+                    {
+                      type: 'button',
+                      props: {
+                        onClick: () => setCount(count + 1),
+                        style: {
+                          padding: '8px 16px',
+                          backgroundColor: '#4d79ff',
+                          color: 'white',
+                          border: 'none',
+                          borderRadius: '4px',
+                          cursor: 'pointer'
+                        },
+                        children: 'Increment'
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
+}`
+  );
+  // Create vite.config.ts
+  fs.writeFileSync(
+    path.join(templateDir, 'vite.config.ts'),
+    `import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  },
+  server: {
+    port: 3000,
+    open: true
+  },
+  plugins: [
+    nodePolyfills({
+      protocolImports: true,
+    }),
+  ]
+});`
+  );
+  // Create tsconfig.json
+  fs.writeFileSync(
+    path.join(templateDir, 'tsconfig.json'),
+    `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}`
+  );
+  // Create tsconfig.node.json
+  fs.writeFileSync(
+    path.join(templateDir, 'tsconfig.node.json'),
+    `{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}`
+  );
+  console.log(`✅ Created minimal basic template at ${templateDir}`);
+}

package/templates/basic/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/basic-app/src/App.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'frontend-hamroun';
+import { useState, useEffect, useContext, useRef } from 'frontend-hamroun';
 import { Header } from './components/Header';
 import { Counter } from './components/Counter';
 import { ApiClient } from './api.js';
@@ -9,109 +9,135 @@ interface AppProps {
   api: ApiClient;
 }
-export function App({ api }: AppProps) {
-  const [todos, setTodos] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+// Use function declaration style instead of JSX component syntax
+export function App(props: any) {
   const [count, setCount] = useState(0);
-  const { theme } = useContext(AppContext);
-  useEffect(() => {
-    // Fetch data when component mounts
-    async function fetchData() {
-      try {
-        setIsLoading(true);
-        const data = await api.getTodos();
-        setTodos(data);
-        setError(null);
-      } catch (err) {
-        setError('Failed to fetch todos');
-        console.error(err);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-    fetchData();
-  }, [api]);
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <Header title="My Front Package App" />
-      <main className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold text-center mb-8">
-          Welcome to your Front Package app!
-        </h1>
-        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-8">
-          <div className="p-8">
-            <Counter />
-          </div>
-        </div>
-        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
-          <div className="p-8">
-            <h2 className="text-xl font-bold mb-4">Todo List</h2>
-            {isLoading ? (
-              <div className="text-center py-4">Loading...</div>
-            ) : error ? (
-              <div className="text-red-500 py-4">{error}</div>
-            ) : (
-              <TodoList todos={todos} api={api} setTodos={setTodos} />
-            )}
-          </div>
-        </div>
-        <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '2rem' }}>
-          <h1 style={{ color: '#333', textAlign: 'center' }}>Frontend Hamroun App</h1>
-          <p style={{ textAlign: 'center' }}>
-            Current theme: <strong>{theme}</strong>
-          </p>
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            marginTop: '2rem',
-            padding: '1rem',
-            border: '1px solid #ccc',
-            borderRadius: '8px',
-            backgroundColor: theme === 'dark' ? '#333' : '#fff',
-            color: theme === 'dark' ? '#fff' : '#333'
-          }}>
-            <h2>Counter Example</h2>
-            <p>Count: {count}</p>
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <button
-                onClick={() => setCount(count - 1)}
-                style={{
+  const [theme, setTheme] = useState('light');
+  const renderCount = useRef(0);
+  renderCount.current++;
+  // Return a standard object structure rather than JSX
+  return {
+    type: 'div',
+    props: {
+      style: {
+        fontFamily: 'Arial, sans-serif',
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: '2rem',
+        backgroundColor: theme === 'dark' ? '#222' : '#fff',
+        color: theme === 'dark' ? '#fff' : '#222'
+      },
+      children: [
+        {
+          type: 'h1',
+          props: {
+            style: { textAlign: 'center' },
+            children: 'Frontend Hamroun App'
+          }
+        },
+        {
+          type: 'p',
+          props: {
+            style: { textAlign: 'center' },
+            children: `This component has rendered ${renderCount.current} times`
+          }
+        },
+        {
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: '1rem'
+            },
+            children: {
+              type: 'button',
+              props: {
+                onClick: () => setTheme(theme === 'light' ? 'dark' : 'light'),
+                style: {
                   padding: '8px 16px',
-                  background: '#ff4d4d',
+                  backgroundColor: '#4b5563',
                   color: 'white',
                   border: 'none',
                   borderRadius: '4px',
                   cursor: 'pointer'
-                }}
-              >
-                Decrement
-              </button>
-              <button
-                onClick={() => setCount(count + 1)}
-                style={{
-                  padding: '8px 16px',
-                  background: '#4d79ff',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer'
-                }}
-              >
-                Increment
-              </button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+                },
+                children: `Switch to ${theme === 'light' ? 'dark' : 'light'} mode`
+              }
+            }
+          }
+        },
+        {
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              padding: '1rem',
+              border: '1px solid #ccc',
+              borderRadius: '8px'
+            },
+            children: [
+              {
+                type: 'h2',
+                props: {
+                  children: 'Counter Example'
+                }
+              },
+              {
+                type: 'p',
+                props: {
+                  children: `Count: ${count}`
+                }
+              },
+              {
+                type: 'div',
+                props: {
+                  style: {
+                    display: 'flex',
+                    gap: '8px'
+                  },
+                  children: [
+                    {
+                      type: 'button',
+                      props: {
+                        onClick: () => setCount(count - 1),
+                        style: {
+                          padding: '8px 16px',
+                          backgroundColor: '#ff4d4d',
+                          color: 'white',
+                          border: 'none',
+                          borderRadius: '4px',
+                          cursor: 'pointer'
+                        },
+                        children: 'Decrement'
+                      }
+                    },
+                    {
+                      type: 'button',
+                      props: {
+                        onClick: () => setCount(count + 1),
+                        style: {
+                          padding: '8px 16px',
+                          backgroundColor: '#4d79ff',
+                          color: 'white',
+                          border: 'none',
+                          borderRadius: '4px',
+                          cursor: 'pointer'
+                        },
+                        children: 'Increment'
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
 }

package/templates/basic-app/src/main.tsx CHANGED Viewed

@@ -141,21 +141,13 @@ function ContextConsumer() {
   );
 }
-import { render, createContext } from 'frontend-hamroun';
+import { render } from 'frontend-hamroun';
 import { App } from './App';
-// Create an example context
-export const AppContext = createContext({ theme: 'light' });
 document.addEventListener('DOMContentLoaded', () => {
   const rootElement = document.getElementById('app');
   if (rootElement) {
-    render(
-      <AppContext.Provider value={{ theme: 'light' }}>
-        <App />
-      </AppContext.Provider>,
-      rootElement
-    );
+    render(App({}), rootElement);
     console.log('App rendered successfully');
   }
 });

package/templates/basic-app/tsconfig.json CHANGED Viewed

@@ -10,9 +10,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "Fragment",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

package/templates/basic-app/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/basic-app/vite.config.ts CHANGED Viewed

@@ -2,31 +2,19 @@ import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 export default defineConfig({
-  esbuild: {
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment',
-    jsxInject: `import { jsx, Fragment } from 'frontend-hamroun'`
-  },
   build: {
     outDir: 'dist',
     emptyOutDir: true,
     rollupOptions: {
-      // Mark server dependencies as external
+      // Mark server-side dependencies as external
       external: [
-        'mock-aws-s3',
-        'aws-sdk',
-        'nock',
-        'jest',
-        'jest-mock',
-        '@testing-library/react',
-        '@testing-library/jest-dom',
-        'bcrypt',
-        'jsonwebtoken',
-        'mongoose',
         'express',
         'compression',
         'helmet',
         'morgan',
+        'bcrypt',
+        'jsonwebtoken',
+        'mongoose',
         /node:.*/
       ]
     }

package/templates/full-stack/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}