frontend-hamroun 1.1.90 → 1.2.0

package/dist/jsx-runtime/index.d.ts

@@ -0,0 +1,9 @@
+import { jsx, jsxs, createElement, Fragment } from './jsx-runtime';
+export { jsx, jsxs, createElement, Fragment };
+declare const _default: {
+    jsx: typeof jsx;
+    jsxs: typeof jsxs;
+    createElement: typeof createElement;
+    Fragment: symbol;
+};
+export default _default;

package/dist/jsx-runtime/index.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs, createElement, Fragment } from './jsx-runtime';
+export { jsx, jsxs, createElement, Fragment };
+// For global access in browsers
+if (typeof window !== 'undefined') {
+    // TypeScript safe way to add properties to window
+    window.jsx = jsx;
+    window.jsxs = jsxs;
+    window.Fragment = Fragment;
+}
+// Default export for module usage
+export default {
+    jsx,
+    jsxs,
+    createElement,
+    Fragment
+};

package/dist/jsx-runtime/jsx-dev-runtime.js

@@ -0,0 +1 @@
+"use strict";

package/dist/jsx-runtime/jsx-runtime.js

@@ -0,0 +1,91 @@
+// Create a safe global object reference that works in both browser and Node
+const globalObj = typeof window !== 'undefined' ? window :
+    typeof global !== 'undefined' ? global : {};
+export function jsx(type, props, key) {
+    return {
+        type,
+        props: props || {},
+        key
+    };
+}
+export function jsxs(type, props, key) {
+    return jsx(type, props, key);
+}
+export function createElement(vnode) {
+    if (typeof vnode === 'string' || typeof vnode === 'number') {
+        return document.createTextNode(String(vnode));
+    }
+    if (typeof vnode.type === 'function') {
+        const result = vnode.type(vnode.props);
+        return createElement(result);
+    }
+    const element = document.createElement(vnode.type);
+    Object.entries(vnode.props || {}).forEach(([name, value]) => {
+        if (name === 'children') {
+            const children = Array.isArray(value) ? value : [value];
+            children.forEach((child) => {
+                if (child != null) {
+                    const childElement = createElement(child);
+                    // Generate stats for testing
+                    if (process.env.NODE_ENV === 'test' && typeof window !== 'undefined') {
+                        // Create stats tracking
+                        if (!globalObj.__renderStats) {
+                            globalObj.__renderStats = {
+                                elementsCreated: 0,
+                                textNodesCreated: 0,
+                                eventsAttached: 0,
+                                renderTime: 0
+                            };
+                            // Write stats to file when tests complete
+                            if (typeof afterAll === 'function') {
+                                afterAll(() => {
+                                    try {
+                                        const fs = require('fs');
+                                        const path = require('path');
+                                        const statsPath = path.resolve(process.cwd(), 'jsx-runtime-stats.json');
+                                        fs.writeFileSync(statsPath, JSON.stringify(globalObj.__renderStats, null, 2));
+                                        console.log(`JSX runtime stats written to ${statsPath}`);
+                                    }
+                                    catch (error) {
+                                        console.error('Failed to write stats file:', error);
+                                    }
+                                });
+                            }
+                        }
+                        // Increment stats based on element type
+                        if (childElement instanceof Text) {
+                            globalObj.__renderStats.textNodesCreated++;
+                        }
+                        else {
+                            globalObj.__renderStats.elementsCreated++;
+                        }
+                    }
+                    element.appendChild(childElement);
+                }
+            });
+        }
+        else if (name.startsWith('on')) {
+            const eventName = name.toLowerCase().substring(2);
+            element.addEventListener(eventName, value);
+            // Track event attachment in stats
+            if (process.env.NODE_ENV === 'test' && typeof window !== 'undefined' && globalObj.__renderStats) {
+                globalObj.__renderStats.eventsAttached++;
+            }
+        }
+        else if (name === 'className') {
+            // Handle className specially by setting it as the class attribute
+            element.setAttribute('class', value);
+        }
+        else if (name === 'style' && typeof value === 'object') {
+            // Handle style objects by merging them into element.style
+            Object.entries(value).forEach(([styleProp, styleValue]) => {
+                element.style[styleProp] = String(styleValue);
+            });
+        }
+        else {
+            element.setAttribute(name, value);
+        }
+    });
+    return element;
+}
+export const Fragment = Symbol('Fragment');

package/dist/{src/jsx-runtime.d.ts → jsx-runtime.d.ts}

@@ -2,7 +2,7 @@ interface VNode {
     type: string | Function;
     props: Record<string, any>;
 }
-declare function jsx(type: string | Function, props: any): VNode;
+declare function jsx(type: string | Function, props: any, p0: string): VNode;
 declare const Fragment: ({ children }: {
     children: any;
 }) => any;

package/dist/jsx-runtime.js

@@ -0,0 +1,192 @@
+function jsx(type, props, p0) {
+    console.log('JSX Transform:', { type, props });
+    const processedProps = { ...props };
+    // Handle children properly
+    if (arguments.length > 2) {
+        processedProps.children = Array.prototype.slice.call(arguments, 2);
+    }
+    return { type, props: processedProps };
+}
+const Fragment = ({ children }) => children;
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+async function createElement(vnode) {
+    console.log('Creating element from:', vnode);
+    // Create mock DOM elements when in Node environment
+    if (!isBrowser) {
+        // Return mock node objects in Node.js environment
+        if (vnode == null) {
+            return { nodeType: 3, textContent: '' };
+        }
+        if (typeof vnode === 'boolean') {
+            return { nodeType: 3, textContent: '' };
+        }
+        if (typeof vnode === 'number' || typeof vnode === 'string') {
+            return { nodeType: 3, textContent: String(vnode) };
+        }
+        // Handle arrays
+        if (Array.isArray(vnode)) {
+            const fragment = { nodeType: 11, childNodes: [] };
+            for (const child of vnode) {
+                const node = await createElement(child);
+                fragment.childNodes.push(node);
+            }
+            return fragment;
+        }
+        // Handle VNode
+        if ('type' in vnode && vnode.props !== undefined) {
+            const { type, props } = vnode;
+            // Handle function components
+            if (typeof type === 'function') {
+                try {
+                    const result = await type(props || {});
+                    const node = await createElement(result);
+                    return node;
+                }
+                catch (error) {
+                    console.error('Error rendering component:', error);
+                    return { nodeType: 3, textContent: '' };
+                }
+            }
+            // Mock element creation
+            const element = {
+                nodeType: 1,
+                tagName: type,
+                attributes: {},
+                style: {},
+                childNodes: [],
+                setAttribute: function (key, value) {
+                    this.attributes[key] = value;
+                },
+                appendChild: function (child) {
+                    this.childNodes.push(child);
+                }
+            };
+            // Handle props
+            for (const [key, value] of Object.entries(props || {})) {
+                if (key === 'children')
+                    continue;
+                if (key.startsWith('on') && typeof value === 'function') {
+                    // Mock event handlers
+                    const eventName = key.toLowerCase().slice(2);
+                    if (!element.__events) {
+                        element.__events = {};
+                    }
+                    element.__events[eventName] = value;
+                }
+                else if (key === 'style' && typeof value === 'object') {
+                    Object.assign(element.style, value);
+                }
+                else if (key === 'className') {
+                    element.setAttribute('class', String(value));
+                }
+                else if (key !== 'key' && key !== 'ref') {
+                    element.setAttribute(key, String(value));
+                }
+            }
+            // Handle children
+            const children = props?.children;
+            if (children != null) {
+                const childArray = Array.isArray(children) ? children.flat() : [children];
+                for (const child of childArray) {
+                    const childNode = await createElement(child);
+                    element.appendChild(childNode);
+                }
+            }
+            return element;
+        }
+        // Handle other objects by converting to string
+        return { nodeType: 3, textContent: String(vnode) };
+    }
+    // Browser environment implementation
+    if (vnode == null) {
+        return document.createTextNode('');
+    }
+    if (typeof vnode === 'boolean') {
+        return document.createTextNode('');
+    }
+    if (typeof vnode === 'number' || typeof vnode === 'string') {
+        return document.createTextNode(String(vnode));
+    }
+    // Handle arrays
+    if (Array.isArray(vnode)) {
+        const fragment = document.createDocumentFragment();
+        for (const child of vnode) {
+            const node = await createElement(child);
+            fragment.appendChild(node);
+        }
+        return fragment;
+    }
+    // Handle VNode
+    if ('type' in vnode && vnode.props !== undefined) {
+        const { type, props } = vnode;
+        // Handle function components
+        if (typeof type === 'function') {
+            try {
+                const result = await type(props || {});
+                const node = await createElement(result);
+                if (node instanceof Element) {
+                    node.setAttribute('data-component-id', type.name || type.toString());
+                }
+                return node;
+            }
+            catch (error) {
+                console.error('Error rendering component:', error);
+                return document.createTextNode('');
+            }
+        }
+        // Create DOM element
+        const element = document.createElement(type);
+        // Handle props
+        for (const [key, value] of Object.entries(props || {})) {
+            if (key === 'children')
+                continue;
+            if (key.startsWith('on') && typeof value === 'function') {
+                const eventName = key.toLowerCase().slice(2);
+                // Remove existing event listener if any
+                const existingHandler = element.__events?.[eventName];
+                if (existingHandler) {
+                    element.removeEventListener(eventName, existingHandler);
+                }
+                // Add new event listener
+                element.addEventListener(eventName, value);
+                if (!element.__events) {
+                    element.__events = {};
+                }
+                element.__events[eventName] = value;
+            }
+            else if (key === 'style' && typeof value === 'object') {
+                Object.assign(element.style, value);
+            }
+            else if (key === 'className') {
+                element.setAttribute('class', String(value));
+            }
+            else if (key !== 'key' && key !== 'ref') {
+                element.setAttribute(key, String(value));
+            }
+        }
+        // Handle children
+        const children = props?.children;
+        if (children != null) {
+            const childArray = Array.isArray(children) ? children.flat() : [children];
+            for (const child of childArray) {
+                const childNode = await createElement(child);
+                element.appendChild(childNode);
+            }
+        }
+        return element;
+    }
+    // Handle other objects by converting to string
+    return document.createTextNode(String(vnode));
+}
+// Export named functions and aliases without duplicates
+export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment, createElement };
+// Named exports object
+const jsxRuntime = {
+    jsx,
+    jsxs: jsx,
+    jsxDEV: jsx,
+    Fragment,
+    createElement
+};
+export default jsxRuntime;

package/dist/renderer.js

@@ -0,0 +1,51 @@
+import { createElement } from './jsx-runtime';
+import { prepareRender, finishRender, setRenderCallback } from './hooks';
+import { batchUpdates } from './batch';
+// Track hydration state
+let isHydrating = false;
+/**
+ * Hydrates a server-rendered component
+ * @param element The element to hydrate
+ * @param container The container element that contains server-rendered HTML
+ */
+export async function hydrate(element, container) {
+    isHydrating = true;
+    try {
+        await render(element, container);
+    }
+    finally {
+        isHydrating = false;
+    }
+}
+/**
+ * Renders a component to the DOM
+ * @param element The element to render
+ * @param container The container to render into
+ */
+export async function render(element, container) {
+    console.log('Rendering to:', container.id || 'unnamed-container');
+    batchUpdates(async () => {
+        const rendererId = prepareRender();
+        try {
+            setRenderCallback(render, element, container);
+            const domNode = await createElement(element);
+            // Don't clear container if we're hydrating
+            if (!isHydrating) {
+                container.innerHTML = '';
+            }
+            // When hydrating, we should match and update existing nodes
+            // rather than appending new ones
+            if (isHydrating && container.firstChild) {
+                // During hydration, we assume the structure matches
+                // and just attach event handlers without replacing DOM
+                console.log('Hydrating existing DOM');
+            }
+            else {
+                container.appendChild(domNode);
+            }
+        }
+        finally {
+            finishRender();
+        }
+    });
+}

package/dist/{src/server-renderer.d.ts → server-renderer.d.ts}

@@ -1 +1,4 @@
+/**
+ * Renders a component to a string
+ */
 export declare function renderToString(element: any): Promise<string>;

package/dist/server-renderer.js

@@ -0,0 +1,102 @@
+import { prepareRender, finishRender, setRenderCallback } from './hooks';
+/**
+ * Renders a component to a string
+ */
+export async function renderToString(element) {
+    // Setup render context
+    const rendererId = prepareRender();
+    setRenderCallback(() => { }, element, null);
+    try {
+        if (element == null)
+            return '';
+        if (typeof element === 'boolean')
+            return '';
+        if (typeof element === 'number' || typeof element === 'string') {
+            return escapeHtml(String(element));
+        }
+        if (Array.isArray(element)) {
+            const children = await Promise.all(element.map(renderToString));
+            return children.join('');
+        }
+        if ('type' in element && element.props !== undefined) {
+            const { type, props } = element;
+            // Handle function components
+            if (typeof type === 'function') {
+                try {
+                    // Prepare new render context for the component
+                    prepareRender();
+                    const result = await type(props || {});
+                    const html = await renderToString(result);
+                    finishRender();
+                    return html;
+                }
+                catch (error) {
+                    console.error('Error rendering component:', error);
+                    return '';
+                }
+            }
+            // Handle Fragment special case
+            if (type === Symbol.for('react.fragment') || type.name === 'Fragment') {
+                if (props.children) {
+                    const children = Array.isArray(props.children) ? props.children : [props.children];
+                    const renderedChildren = await Promise.all(children.map(renderToString));
+                    return renderedChildren.join('');
+                }
+                return '';
+            }
+            // Handle regular elements
+            let html = `<${type}`;
+            // Add attributes, skipping internal ones like 'key'
+            for (const [key, value] of Object.entries(props || {})) {
+                if (key === 'children' || key === 'key')
+                    continue;
+                if (key === 'className') {
+                    html += ` class="${escapeHtml(String(value))}"`;
+                }
+                else if (key === 'style' && typeof value === 'object') {
+                    html += ` style="${stringifyStyle(value || {})}"`;
+                }
+                else if (!key.startsWith('on')) {
+                    html += ` ${key}="${escapeHtml(String(value))}"`;
+                }
+            }
+            // Handle self-closing tags
+            const voidElements = new Set([
+                'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+                'link', 'meta', 'param', 'source', 'track', 'wbr'
+            ]);
+            if (voidElements.has(type)) {
+                return html + '/>';
+            }
+            html += '>';
+            // Add children
+            if (props?.children) {
+                const children = Array.isArray(props.children) ? props.children : [props.children];
+                for (const child of children) {
+                    html += await renderToString(child);
+                }
+            }
+            return html + `</${type}>`;
+        }
+        return escapeHtml(String(element));
+    }
+    finally {
+        finishRender();
+    }
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function stringifyStyle(style) {
+    return Object.entries(style)
+        .map(([key, value]) => `${hyphenate(key)}:${value}`)
+        .join(';');
+}
+function hyphenate(str) {
+    return str.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+}

package/dist/vdom.js

@@ -0,0 +1,27 @@
+function arePropsEqual(oldProps, newProps) {
+    // Handle null/undefined props
+    oldProps = oldProps || {};
+    newProps = newProps || {};
+    const oldKeys = Object.keys(oldProps).filter(k => k !== 'children');
+    const newKeys = Object.keys(newProps).filter(k => k !== 'children');
+    if (oldKeys.length !== newKeys.length)
+        return false;
+    return oldKeys.every(key => oldProps[key] === newProps[key]);
+}
+export function diff(oldNode, newNode) {
+    if (oldNode == null || newNode == null)
+        return oldNode !== newNode;
+    if (typeof oldNode !== typeof newNode)
+        return true;
+    if (typeof newNode === 'string' || typeof newNode === 'number')
+        return oldNode !== newNode;
+    // Handle primitive values that are not objects
+    if (!oldNode.type || !newNode.type)
+        return oldNode !== newNode;
+    if (newNode.type !== oldNode.type)
+        return true;
+    return !arePropsEqual(oldNode.props, newNode.props);
+}
+export function shouldComponentUpdate(oldProps, newProps) {
+    return !arePropsEqual(oldProps, newProps);
+}

package/package.json

@@ -1,93 +1,79 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.1.90",
-  "description": "A lightweight frontend framework with hooks and virtual DOM",
+  "version": "1.2.0",
+  "description": "A lightweight frontend and backend framework for building modern web applications",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "dist/frontend-hamroun.umd.js",
+  "module": "dist/frontend-hamroun.es.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md",
+    "src",
+    "templates",
+    "scripts",
     "LICENSE",
-    "bin",
-    "templates"
+    "README.md"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/frontend-hamroun.es.js",
+      "require": "./dist/frontend-hamroun.umd.js"
     }
   },
   "bin": {
-    "frontend-hamroun": "bin/cli.js",
-    "create-frontend-app": "bin/cli.js",
     "hamroun": "src/cli/index.js"
   },
   "scripts": {
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "clean": "node -e \"if(require('fs').existsSync('dist')) require('fs').rmSync('dist',{recursive:true})\"",
-    "prepublishOnly": "npm run clean && npm run build",
     "dev": "vite",
+    "build": "vite build && tsc",
     "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "generate-test-report": "node --loader ts-node/esm tests/generate-report.ts"
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "generate": "node scripts/generate.js"
   },
   "keywords": [
     "frontend",
     "framework",
+    "react-like",
     "jsx",
-    "hooks",
-    "virtual-dom"
+    "ssr",
+    "server-side-rendering",
+    "backend",
+    "api",
+    "express"
   ],
   "author": "Hamroun",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "your-repo-url"
+    "url": "https://github.com/hamroun/frontend-hamroun.git"
   },
   "devDependencies": {
-    "@types/bcryptjs": "^2.4.2",
+    "@types/bcrypt": "^5.0.2",
     "@types/compression": "^1.7.5",
-    "@types/express": "^4.17.17",
-    "@types/jest": "^29.5.0",
+    "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.11",
+    "@types/jsonwebtoken": "^9.0.5",
     "@types/morgan": "^1.9.9",
-    "@types/react": "^19.0.8",
-    "@types/supertest": "^2.0.12",
-    "@vitejs/plugin-react": "^4.0.4",
-    "aws-sdk": "^2.1692.0",
+    "@types/node": "^20.10.5",
     "jest": "^29.7.0",
-    "mock-aws-s3": "^4.0.2",
-    "nanospinner": "^1.1.0",
-    "nock": "^14.0.3",
-    "supertest": "^6.3.3",
-    "terser": "^5.38.1",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^0.34.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "rimraf": "^5.0.5",
+    "terser": "^5.25.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4"
   },
   "dependencies": {
     "bcrypt": "^5.1.1",
-    "chalk": "^5.3.0",
-    "commander": "^11.0.0",
-    "compression": "^1.8.0",
-    "express": "^5.1.0",
-    "fs-extra": "^11.1.1",
-    "helmet": "^8.1.0",
-    "inquirer": "^9.2.10",
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "helmet": "^7.1.0",
     "jsonwebtoken": "^9.0.2",
-    "mongoose": "^8.13.2",
+    "mongoose": "^8.0.3",
     "morgan": "^1.10.0",
-    "nanospinner": "^1.1.0",
     "ts-node": "^10.9.2"
   }
 }