frontend-hamroun 1.2.10 → 1.2.12

package/bin/cli.mjs

@@ -34,7 +34,7 @@ function printBanner() {
 ${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
 ║                                              ║
 ║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework  ║
+║   A lightweight frontend & backend framework ║
 ║                                              ║
 ╚══════════════════════════════════════════════╝${colors.reset}
   `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "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

@@ -50,7 +50,7 @@ function printBanner() {
 \${colors.blue}\${colors.bright}╔══════════════════════════════════════════════╗
 ║                                              ║
 ║   Frontend Hamroun v\${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework  ║
+║   A lightweight frontend & backend framework ║
 ║                                              ║
 ╚══════════════════════════════════════════════╝\${colors.reset}
   \`);
@@ -732,4 +732,128 @@ export default defineConfig({
   );
   
   console.log(`✅ Created minimal basic template at ${templateDir}`);
+  
+  // Create React compatibility layer
+  createReactCompatibilityLayer(templateDir);
 }
+
+// Create React compatibility layer
+function createReactCompatibilityLayer(templateDir) {
+  // Create React compatibility directory
+  const reactDir = path.join(templateDir, 'src/react');
+  if (!fs.existsSync(reactDir)) {
+    fs.mkdirSync(reactDir, { recursive: true });
+  }
+  
+  // Create jsx-dev-runtime.ts
+  fs.writeFileSync(
+    path.join(reactDir, 'jsx-dev-runtime.ts'),
+    `import { jsx } from 'frontend-hamroun';
+
+// Export jsx as jsxDEV for React compatibility
+export const jsxDEV = jsx;
+export const Fragment = Symbol('Fragment');
+export const jsxs = jsx;
+
+// Default export
+export default {
+  jsxDEV,
+  Fragment,
+  jsxs
+};`
+  );
+  
+  // Create jsx-runtime.ts
+  fs.writeFileSync(
+    path.join(reactDir, 'jsx-runtime.ts'),
+    `import { jsx } from 'frontend-hamroun';
+
+// Export jsx functions for React compatibility
+export const jsxs = jsx;
+export const Fragment = Symbol('Fragment');
+
+// Default export
+export default {
+  jsx,
+  jsxs,
+  Fragment
+};`
+  );
+  
+  // Create index.ts
+  fs.writeFileSync(
+    path.join(reactDir, 'index.ts'),
+    `import { 
+  useState, 
+  useEffect, 
+  useRef, 
+  useMemo, 
+  useContext, 
+  createContext,
+  jsx
+} from 'frontend-hamroun';
+
+// Provide React compatibility layer
+const React = {
+  createElement: jsx,
+  Fragment: Symbol('Fragment'),
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useContext,
+  createContext
+};
+
+// Export hooks directly for named imports
+export {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useContext,
+  createContext,
+  jsx as createElement
+};
+
+// Default export
+export default React;`
+  );
+  
+  console.log(`✅ Created React compatibility layer in ${templateDir}`);
+}
+
+// Create React compatibility shims
+function createTemplateShims(templateDir) {
+  // Create src directory if it doesn't exist
+  const srcDir = path.join(templateDir, 'src');
+  if (!fs.existsSync(srcDir)) {
+    fs.mkdirSync(srcDir, { recursive: true });
+  }
+  
+  // Create shims.ts file for React JSX compatibility
+  fs.writeFileSync(
+    path.join(srcDir, 'shims.ts'),
+    `// This file provides compatibility shims for React JSX imports
+
+import { jsx } from 'frontend-hamroun';
+
+// Export the jsx function as jsxDEV for React compatibility
+export const jsxDEV = jsx;
+
+// Export a Fragment symbol
+export const Fragment = Symbol('Fragment');
+
+// Default export as React compatibility layer
+export default {
+  createElement: jsx,
+  Fragment
+};
+`
+  );
+  
+  console.log(`✅ Created React compatibility shims in ${templateDir}`);
+}
+
+// Call this function when creating templates
+// ...existing code...

package/templates/basic-app/package.json

@@ -16,5 +16,9 @@
     "typescript": "^5.3.2",
     "vite": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.21.0"
+  },
+  "overrides": {
+    "react": "npm:@empty-npm-package/react@1.0.0",
+    "react-dom": "npm:@empty-npm-package/react-dom@1.0.0"
   }
 }

package/templates/basic-app/src/react/index.ts

@@ -0,0 +1,35 @@
+import { 
+  useState, 
+  useEffect, 
+  useRef, 
+  useMemo, 
+  useContext, 
+  createContext,
+  jsx
+} from 'frontend-hamroun';
+
+// Provide React compatibility layer
+const React = {
+  createElement: jsx,
+  Fragment: Symbol('Fragment'),
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useContext,
+  createContext
+};
+
+// Export hooks directly for named imports
+export {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useContext,
+  createContext,
+  jsx as createElement
+};
+
+// Default export
+export default React;

package/templates/basic-app/src/react/jsx-dev-runtime.ts

@@ -0,0 +1,13 @@
+import { jsx } from 'frontend-hamroun';
+
+// Export jsx as jsxDEV for React compatibility
+export const jsxDEV = jsx;
+export const Fragment = Symbol('Fragment');
+export const jsxs = jsx;
+
+// Default export
+export default {
+  jsxDEV,
+  Fragment,
+  jsxs
+};

package/templates/basic-app/src/react/jsx-runtime.ts

@@ -0,0 +1,12 @@
+import { jsx } from 'frontend-hamroun';
+
+// Export jsx functions for React compatibility
+export const jsxs = jsx;
+export const Fragment = Symbol('Fragment');
+
+// Default export
+export default {
+  jsx,
+  jsxs,
+  Fragment
+};

package/templates/basic-app/src/shims.ts

@@ -0,0 +1,9 @@
+// This file provides compatibility shims for React JSX imports
+
+import { jsx } from 'frontend-hamroun';
+
+// Export the jsx function as jsxDEV for React compatibility
+export const jsxDEV = jsx;
+
+// Export a Fragment symbol
+export const Fragment = Symbol('Fragment');

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

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import path from 'path';
 
 export default defineConfig({
   build: {
@@ -34,7 +35,8 @@ export default defineConfig({
       define: {
         global: 'globalThis'
       }
-    }
+    },
+    include: ['frontend-hamroun']
   },
   plugins: [
     nodePolyfills({
@@ -47,11 +49,11 @@ export default defineConfig({
       'bcrypt': 'frontend-hamroun',
       'jsonwebtoken': 'frontend-hamroun',
       'mongoose': 'frontend-hamroun',
-      // Alias React imports to empty modules
-      'react': 'frontend-hamroun',
+      // Map React imports to our compatibility layer
+      'react': path.resolve(__dirname, 'src/react/index.ts'),
       'react-dom': 'frontend-hamroun',
-      'react/jsx-runtime': 'frontend-hamroun',
-      'react/jsx-dev-runtime': 'frontend-hamroun'
+      'react/jsx-runtime': path.resolve(__dirname, 'src/react/jsx-runtime.ts'),
+      'react/jsx-dev-runtime': path.resolve(__dirname, 'src/react/jsx-dev-runtime.ts')
     }
   }
 });

package/templates/full-stack/src/shims.ts

@@ -0,0 +1,9 @@
+// This file provides compatibility shims for React JSX imports
+
+import { jsx } from 'frontend-hamroun';
+
+// Export the jsx function as jsxDEV for React compatibility
+export const jsxDEV = jsx;
+
+// Export a Fragment symbol
+export const Fragment = Symbol('Fragment');

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

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import path from 'path';
 
 export default defineConfig({
   esbuild: {
@@ -74,7 +75,11 @@ export default defineConfig({
   resolve: {
     alias: {
       '@mswjs/interceptors/presets/node': { find: /^@mswjs\/interceptors\/presets\/node/, replacement: '{}' },
-      './util/nw-pre-gyp/index.html': { find: './util/nw-pre-gyp/index.html', replacement: '{}' }
+      './util/nw-pre-gyp/index.html': { find: './util/nw-pre-gyp/index.html', replacement: '{}' },
+      'react/jsx-runtime': path.resolve(__dirname, 'src/shims.ts'),
+      'react/jsx-dev-runtime': path.resolve(__dirname, 'src/shims.ts'),
+      'react': path.resolve(__dirname, 'src/shims.ts'),
+      'react-dom': 'frontend-hamroun'
     }
   }
 });