frontend-hamroun 1.2.6 → 1.2.8

package/package.json

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

package/templates/basic/tsconfig.json

@@ -1,13 +1,23 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "jsx": "preserve",
+    "skipLibCheck": true,
     "moduleResolution": "bundler",
-    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxFactory": "jsx",
+    "jsxFragmentFactory": "Fragment",
     "strict": true,
-    "skipLibCheck": true
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

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

@@ -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

@@ -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

@@ -1,13 +1,20 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "jsx": "preserve",
+    "skipLibCheck": true,
     "moduleResolution": "bundler",
-    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "strict": true,
-    "skipLibCheck": true
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

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

@@ -2,30 +2,19 @@ import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 export default defineConfig({
-  esbuild: {
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
-  },
   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.json

@@ -1,22 +1,23 @@
 {
   "compilerOptions": {
-    "target": "ES2018",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment",
-    "strict": true,
-    "esModuleInterop": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "noEmit": true,
-    "isolatedModules": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "outDir": "dist"
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxFactory": "jsx",
+    "jsxFragmentFactory": "Fragment",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/client/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/templates/full-stack/vite.config.ts

@@ -4,7 +4,8 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 export default defineConfig({
   esbuild: {
     jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
+    jsxFragment: 'Fragment',
+    jsxInject: `import { jsx, Fragment } from 'frontend-hamroun'`
   },
   build: {
     outDir: 'dist',