frontend-hamroun 1.2.5 → 1.2.7

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

@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'frontend-hamroun';
+import { useState, useEffect, useContext } from 'frontend-hamroun';
 import { Header } from './components/Header';
 import { Counter } from './components/Counter';
 import { ApiClient } from './api.js';
 import { TodoList } from './components/TodoList.js';
+import { AppContext } from './main';
 
 interface AppProps {
   api: ApiClient;
@@ -12,6 +13,8 @@ export function App({ api }: AppProps) {
   const [todos, setTodos] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [count, setCount] = useState(0);
+  const { theme } = useContext(AppContext);
 
   useEffect(() => {
     // Fetch data when component mounts
@@ -59,6 +62,55 @@ export function App({ api }: AppProps) {
             )}
           </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={{
+                  padding: '8px 16px',
+                  background: '#ff4d4d',
+                  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>
   );

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

@@ -141,4 +141,21 @@ function ContextConsumer() {
   );
 }
 
-render(<App />, document.getElementById('root')!);
+import { render, createContext } 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
+    );
+    console.log('App rendered successfully');
+  }
+});

package/templates/basic-app/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/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',

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',