neutronium 2.9.91 → 3.0.2

package/README.md

@@ -1,4 +1,4 @@
-# ⚛️ Neutronium
+# ⚛️ Neutronium v3.0
 
 **Ultra-dense JavaScript framework – maximum performance, minimal overhead**
 
@@ -8,7 +8,14 @@
 
 ---
 
-## 🚀 About
+## 🎉 What's new?
+- ⚡ Faster compilation for complex projects
+- ✨ useState, and useEffect
+- ⚛️ React like syntax for easier switching
+
+---
+
+## ℹ️ About
 
 **Neutronium** is a lightweight, efficient JavaScript framework designed for building modern web applications with **React-like simplicity** but **minimal overhead**.
 
@@ -33,12 +40,16 @@
 npm i neutronium@latest -g
 ```
 
+---
+
 ## 🛠️ Setup
 
 ```
 neu-cli create-app my-app
 ```
 
+---
+
 ## Usage Example
 ```jsx
 // App.js
@@ -63,7 +74,12 @@ createApp(App).mount('body');
 ## Result:
 ![Results](https://raw.githubusercontent.com/PFMCODES/neutronium/main/results.png)
 
-## Other helpful packages you might need
+---
+
+## NPM Packages using Neutronium
 ### [@neuhq/alert](https://www.npmjs.com/package/@neuhq/alert)
-## ⚒️ In dev
-### [@neuhq/router](https://www.npmjs.com/package/@neuhq/router) 
+
+---
+
+## Found a bug or a problem?
+### Report [here.](https://github.com/PFMCODES/neutronium/issues/new)

package/cli/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { default: inquirer } = require('inquirer');
 const fs = require('fs');

package/compiler/compiler.js

@@ -12,14 +12,19 @@ const { execSync } = require('child_process');
 
 async function compileProject(projectDir = process.cwd()) {
   const distDir = path.join(projectDir, 'dist');
-  const neutroniumPath = '../node_modules/neutronium/src/index.js';
+  const neutroniumPath = path.join(projectDir, 'node_modules', 'neutronium', 'src', 'index.js');
   const packageJson = JSON.parse(fs.readFileSync(path.join(projectDir, 'package.json')));
   const entry = packageJson.main || 'App.js';
 
   try {
     log('📁 Scanning project files...');
     const allFiles = fs.readdirSync(projectDir);
-    const jsFiles = allFiles.filter(f => f.endsWith('.js') && f !== 'compiler.js' && !f.startsWith('.'));
+    const jsFiles = allFiles.filter(f =>
+      f.endsWith('.js') &&
+      f !== 'compiler.js' &&
+      !f.startsWith('.') &&
+      !f.startsWith('dist')
+    );
 
     if (fs.existsSync(path.join(projectDir, 'tsconfig.json'))) {
       try {
@@ -63,11 +68,11 @@ async function compileProject(projectDir = process.cwd()) {
 
       // Ensure _neutronium is imported
       if (!source.includes('_neutronium')) {
-        code = `import * as _neutronium from '${neutroniumPath}';\n\n${code}`;
+        code = `import * as _neutronium from '${neutroniumPath.replace(/\\/g, '/')}';\n\n${code}`;
       }
 
-      // Replace imports to local neutronium
-      code = code.replace(/from\s+['"]neutronium['"]/g, `from '${neutroniumPath}'`);
+      // Replace imports to "neutronium" with local path
+      code = code.replace(/from\s+['"]neutronium['"]/g, `from '${neutroniumPath.replace(/\\/g, '/')}'`);
 
       writeFile(outputPath, code);
     }
@@ -87,33 +92,71 @@ async function compileProject(projectDir = process.cwd()) {
   }
 }
 
+async function compileAndReturnOutput(code) {
+  try {
+    log('📁 Scanning project files...');
+      log(`⚙️ Babel transforming`);
+
+      code = babel.transformSync(code, {
+        babelrc: false,
+        configFile: false,
+        presets: [],
+        plugins: [[
+          '@babel/plugin-transform-react-jsx',
+          {
+            pragma: '_neutronium.h',
+            pragmaFrag: '_neutronium.Fragment',
+            runtime: 'classic',
+          }
+        ]]
+      });
+      code = code.code
+      // Ensure _neutronium is imported
+      if (!code.includes('_neutronium')) {
+        code = `import * as _neutronium from 'https://esm.sh/neutronium@3.0.2/es2022/neutronium.mjs`;
+      }
+
+      // Replace imports to "neutronium" with local path
+      code = code.replace(/from\s+['"]neutronium['"]/g, `from '${neutroniumPath.replace(/\\/g, '/')}'`);
+
+    console.log('🛠️ Generating index.html...');
+    const htmlContent = baseHtml(code);
+      
+
+    log('✅ Compilation complete!');
+    return htmlContent;
+  } catch (e) {
+    console.error('❌ Compilation failed:', e.message);
+    return false;
+  }
+}
+
 function compileProjectWatch(projectDir = process.cwd(), port = 3000) {
-  // Start server first
   const server = serveProject(projectDir, port);
-  
-  // Do initial compilation
   compileProject(projectDir);
 
   log('👀 Watching project for changes...');
   log('✋ Press Ctrl+C to stop the development server');
-  
+
   let timeout;
 
-  // Watch files more specifically
-  const watcher = chokidar.watch(projectDir, {
+  const watcher = chokidar.watch([
+    path.join(projectDir, '**/*.js'),
+    path.join(projectDir, '**/*.ts'),
+    path.join(projectDir, '**/*.tsx'),
+  ], {
     ignoreInitial: true,
     ignored: [
       '**/node_modules/**',
       '**/dist/**',
       '**/.git/**',
-      '**/*',
       'compiler.js'
     ],
     persistent: true,
     followSymlinks: false,
-    depth: 2,
+    depth: 5,
     awaitWriteFinish: {
-      stabilityThreshold: 100,
+      stabilityThreshold: 300,
       pollInterval: 100
     }
   });
@@ -123,58 +166,45 @@ function compileProjectWatch(projectDir = process.cwd(), port = 3000) {
   });
 
   watcher.on('change', filePath => {
-    // Only watch js, ts, tsx files
-    if (!/\.(js|ts|tsx)$/.test(filePath)) {
-      return;
-    }
+    if (!/\.(js|ts|tsx)$/.test(filePath)) return;
 
     log(`🔍 Detected change in: ${path.relative(projectDir, filePath)}`);
-    
+
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       log('🔨 Rebuilding project...');
-
       try {
         const success = compileProject(projectDir);
-        if (success) {
-          log('✅ Rebuild successful!');
-          // Trigger browser reload
-          if (server && server.broadcastReload) {
-            server.broadcastReload();
-            log('🔄 Browser reload triggered');
-          }
+        if (success && server.broadcastReload) {
+          server.broadcastReload();
+          log('🔄 Browser reload triggered');
         }
       } catch (err) {
         console.error('❌ Rebuild failed:', err.stack || err.message);
       }
-    }, 300); // Slightly longer debounce
+    }, 300);
   });
 
   watcher.on('add', filePath => {
-    if (!/\.(js|ts|tsx)$/.test(filePath)) {
-      return;
+    if (/\.(js|ts|tsx)$/.test(filePath)) {
+      log(`📝 New file added: ${path.relative(projectDir, filePath)}`);
     }
-    log(`📝 New file added: ${path.relative(projectDir, filePath)}`);
   });
 
   watcher.on('unlink', filePath => {
-    if (!/\.(js|ts|tsx)$/.test(filePath)) {
-      return;
+    if (/\.(js|ts|tsx)$/.test(filePath)) {
+      log(`🗑️ File removed: ${path.relative(projectDir, filePath)}`);
     }
-    log(`🗑️ File removed: ${path.relative(projectDir, filePath)}`);
   });
 
   watcher.on('error', error => {
     console.error('❌ Watcher error:', error);
   });
 
-  // Cleanup function
   const cleanup = () => {
     log('🧹 Cleaning up...');
     watcher.close();
-    if (server) {
-      server.close();
-    }
+    if (server) server.close();
     process.exit(0);
   };
 
@@ -187,26 +217,23 @@ function compileProjectWatch(projectDir = process.cwd(), port = 3000) {
 function serveProject(projectDir = process.cwd(), port = 3000) {
   const server = http.createServer((req, res) => {
     let reqPath = req.url;
-    
-    // Handle root and index requests
+
     if (reqPath === '/' || reqPath === '/index.html') {
       reqPath = '/dist/index.html';
     }
-    
-    // Handle favicon requests
+
     if (reqPath === '/favicon.ico') {
       res.writeHead(204);
       return res.end();
     }
 
     const filePath = path.join(projectDir, reqPath);
-    
-    // Security check - ensure file is within project directory
+
     if (!filePath.startsWith(projectDir)) {
       res.writeHead(403);
       return res.end('403 Forbidden');
     }
-    
+
     if (!fs.existsSync(filePath)) {
       res.writeHead(404);
       return res.end('404 Not Found');
@@ -215,8 +242,8 @@ function serveProject(projectDir = process.cwd(), port = 3000) {
     try {
       const content = fs.readFileSync(filePath);
       const mimeType = Mime.getType(filePath) || 'application/octet-stream';
-      
-      res.writeHead(200, { 
+
+      res.writeHead(200, {
         'Content-Type': mimeType,
         'Cache-Control': 'no-cache, no-store, must-revalidate',
         'Pragma': 'no-cache',
@@ -231,14 +258,10 @@ function serveProject(projectDir = process.cwd(), port = 3000) {
   });
 
   const wss = new WebSocket.Server({ server });
-  
-  // Add WebSocket connection handling
+
   wss.on('connection', (ws) => {
     log('🔌 WebSocket client connected');
-    
-    ws.on('close', () => {
-      log('🔌 WebSocket client disconnected');
-    });
+    ws.on('close', () => log('🔌 WebSocket client disconnected'));
   });
 
   server.broadcastReload = () => {
@@ -252,12 +275,14 @@ function serveProject(projectDir = process.cwd(), port = 3000) {
   server.listen(port, () => {
     log(`🚀 Server running at http://localhost:${port}`);
     log(`🌐 Open your browser and navigate to: http://localhost:${port}`);
-    
-    // Remove the open() call completely for now to avoid hanging
-    // User can manually open browser
   });
 
   return server;
 }
 
-module.exports = { compileProject, compileProjectWatch, serveProject };
+module.exports = {
+  compileProject,
+  compileProjectWatch,
+  serveProject,
+  compileAndReturnOutput
+};

package/compiler/template.js

@@ -1,4 +1,4 @@
-function baseHtml(appHtml, scriptName) {
+function baseHtml(script) {
   return `
 <!DOCTYPE html>
 <html>
@@ -7,8 +7,7 @@ function baseHtml(appHtml, scriptName) {
   <title>Neutronium App</title>
 </head>
 <body>
-  ${appHtml}
-  <script type="module" src="./${scriptName}"></script>
+  ${script}
   <script>
     const ws = new WebSocket('ws://' + location.host);
     ws.onmessage = (msg) => {

package/compiler/watcher.js

@@ -0,0 +1,17 @@
+import chokidar from 'chokidar';
+import path from 'path';
+
+const projectDir = process.cwd(); // or absolute path
+
+const watcher = chokidar.watch(path.join(projectDir, '**/*.js'), {
+  ignoreInitial: true,
+  ignored: ['**/node_modules/**'],
+  awaitWriteFinish: {
+    stabilityThreshold: 300,
+    pollInterval: 100
+  }
+});
+
+watcher.on('all', (event, filePath) => {
+  console.log(`[${event}] ${filePath}`);
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "neutronium",
-  "version": "2.9.91",
-  "description": "A dense, efficient JavaScript framework for building modern web applications",
+  "version": "3.0.2",
+  "description": "Ultra-dense JavaScript framework – maximum performance, minimal overhead",
   "main": "src/index.js",
   "type": "commonjs",
   "types": "./ts-neutronium/index.d.ts",
@@ -10,7 +10,7 @@
     ".": "./src/index.js"
   },
   "bin": {
-    "neu-cli": "./cli/index.js"
+    "neu-cli": "cli/index.js"
   },
   "keywords": [
     "framework",

package/src/index.js

@@ -3,42 +3,60 @@
 let globalState = [];
 let stateIndex = 0;
 
-// This will be called before rendering begins
-export function resetStateIndex() {
+function resetStateIndex() {
   stateIndex = 0;
 }
 
-// Custom useState implementation
+let currentEffect = null;
+
+function useEffect(fn) {
+  currentEffect = fn;
+  fn(); // run once to collect dependencies
+  currentEffect = null;
+}
+
 function useState(initialValue) {
   const index = stateIndex;
 
-  if (globalState[index] === undefined) {
-    globalState[index] = initialValue;
-  }
+  if (!globalState[index]) {
+    let value = initialValue;
+    const subs = new Set();
 
-  function setState(newValue) {
-    globalState[index] = newValue;
+    function get() {
+      if (currentEffect) subs.add(currentEffect);
+      return value;
+    }
 
-    if (typeof window.__NEUTRONIUM_RENDER_FN__ === 'function') {
-      window.__NEUTRONIUM_RENDER_FN__(); // triggers re-render
+    function set(newVal) {
+      if (value !== newVal) {
+        value = newVal;
+        subs.forEach(fn => fn()); // re-run effects
+        if (typeof window.__NEUTRONIUM_RENDER_FN__ === 'function') {
+          window.__NEUTRONIUM_RENDER_FN__();
+        }
+      }
     }
+
+    globalState[index] = [get, set];
   }
 
+  const result = globalState[index];
   stateIndex++;
-  return [globalState[index], setState];
+  return result;
 }
 
 function h(type, props = {}, ...children) {
+  props = props || {};
+  props.children = (props.children || []).concat(children).flat();
+
   if (typeof type === 'function') {
-    // 🔧 Add children to props
-    props = props || {};
-    props.children = children.flat(); // ✅ critical fix
     return type(props);
   }
 
   const el = document.createElement(type);
 
   for (const [key, value] of Object.entries(props || {})) {
+    if (key === 'children') continue; // skip
     if (key.startsWith('on') && typeof value === 'function') {
       el.addEventListener(key.slice(2).toLowerCase(), value);
     } else if (key === 'ref' && typeof value === 'function') {
@@ -48,7 +66,7 @@ function h(type, props = {}, ...children) {
     }
   }
 
-  children.flat().forEach(child => {
+  props.children.forEach(child => {
     if (typeof child === 'string' || typeof child === 'number') {
       el.appendChild(document.createTextNode(child));
     } else if (child instanceof Node) {
@@ -71,14 +89,14 @@ function createApp(component) {
       window.__NEUTRONIUM_ROOT__ = root;
 
       function render() {
-        resetStateIndex(); // ✅ this is enough
+        resetStateIndex();
         const vnode = component();
         root.innerHTML = '';
         root.appendChild(vnode);
       }
 
-      window.__NEUTRONIUM_RENDER_FN__ = render; // save render function
-      render(); // initial render
+      window.__NEUTRONIUM_RENDER_FN__ = render;
+      render();
 
       return root;
     }
@@ -100,4 +118,4 @@ function Fragment(props = {}) {
   return frag;
 }
 
-export { h, createApp, Fragment, useState };  
+export { h, createApp, Fragment, useState,useEffect, resetStateIndex };

package/ts-neutronium/index.d.ts

@@ -1,58 +1,71 @@
-// @types/netronium/index.d.ts
+// src/index.ts
 
-type StateUpdater<T> = (newValue: T) => void;
-type Component<T = any> = (props?: T) => HTMLElement | DocumentFragment;
+type EffectFn = () => void;
+type Setter<T> = (value: T) => void;
+type Getter<T> = () => T;
+type StateTuple<T> = [Getter<T>, Setter<T>];
 
-let globalState: any[] = [];
+let globalState: Array<StateTuple<any>> = [];
 let stateIndex = 0;
 
-// Reset index before each render
-export function resetStateIndex(): void {
+function resetStateIndex(): void {
   stateIndex = 0;
 }
 
-// Custom useState
-export function useState<T>(initialValue: T): [T, StateUpdater<T>] {
-  const currentIndex = stateIndex;
+let currentEffect: EffectFn | null = null;
 
-  if (globalState[currentIndex] === undefined) {
-    globalState[currentIndex] = initialValue;
-  }
-
-  function setState(newValue: T): void {
-    globalState[currentIndex] = newValue;
+function useEffect(fn: EffectFn): void {
+  currentEffect = fn;
+  fn(); // run once to collect dependencies
+  currentEffect = null;
+}
 
-    // Re-render
-    const root = window.__NEUTRONIUM_ROOT__ as HTMLElement | null;
-    const renderFn = window.__NEUTRONIUM_RENDER_FN__ as (() => Node) | null;
+function useState<T>(initialValue: T): StateTuple<T> {
+  const index = stateIndex;
+
+  if (!globalState[index]) {
+    let value = initialValue;
+    const subs = new Set<EffectFn>();
+
+    const get: Getter<T> = () => {
+      if (currentEffect) subs.add(currentEffect);
+      return value;
+    };
+
+    const set: Setter<T> = (newVal: T) => {
+      if (value !== newVal) {
+        value = newVal;
+        subs.forEach(fn => fn()); // re-run effects
+        if (typeof (window as any).__NEUTRONIUM_RENDER_FN__ === 'function') {
+          (window as any).__NEUTRONIUM_RENDER_FN__();
+        }
+      }
+    };
 
-    if (root && typeof renderFn === 'function') {
-      root.innerHTML = '';
-      resetStateIndex();
-      const newVNode = renderFn();
-      root.appendChild(newVNode);
-    }
+    globalState[index] = [get, set];
   }
 
+  const result = globalState[index] as StateTuple<T>;
   stateIndex++;
-  return [globalState[currentIndex], setState];
+  return result;
 }
 
-// JSX-compatible hyperscript function
-export function h(
-  type: string | Component,
-  props: { [key: string]: any } = {},
-  ...children: any[]
-): HTMLElement | DocumentFragment {
+type Props = {
+  [key: string]: any;
+  children?: any;
+};
+
+function h(type: string | ((props: Props) => Node), props: Props = {}, ...children: any[]): Node {
+  props.children = (props.children || []).concat(children).flat();
+
   if (typeof type === 'function') {
-    props = props || {};
-    props.children = children.flat();
     return type(props);
   }
 
   const el = document.createElement(type);
 
   for (const [key, value] of Object.entries(props)) {
+    if (key === 'children') continue;
     if (key.startsWith('on') && typeof value === 'function') {
       el.addEventListener(key.slice(2).toLowerCase(), value);
     } else if (key === 'ref' && typeof value === 'function') {
@@ -62,56 +75,68 @@ export function h(
     }
   }
 
-  children.flat().forEach(child => {
+  for (const child of props.children) {
     if (typeof child === 'string' || typeof child === 'number') {
-      el.appendChild(document.createTextNode(child));
+      el.appendChild(document.createTextNode(String(child)));
     } else if (child instanceof Node) {
       el.appendChild(child);
     }
-  });
+  }
 
   return el;
 }
 
-// Mount app to DOM
-export function createApp(component: () => Node) {
+function createApp(component: () => Node) {
   return {
-    mount(selector: string | HTMLElement): Node | null {
-      const root =
-        typeof selector === 'string'
-          ? document.querySelector(selector)
-          : selector;
+    mount(selector: string | Element): Element | null {
+      const root = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
 
       if (!root) {
         console.error(`❌ Root element '${selector}' not found`);
         return null;
       }
 
-      window.__NEUTRONIUM_ROOT__ = root;
-      window.__NEUTRONIUM_RENDER_FN__ = component;
+      (window as any).__NEUTRONIUM_ROOT__ = root;
+
+      function render() {
+        resetStateIndex();
+        const vnode = component();
+        root.innerHTML = '';
+        root.appendChild(vnode);
+      }
 
-      resetStateIndex();
-      const vnode = component();
-      root.innerHTML = '';
-      root.appendChild(vnode);
+      (window as any).__NEUTRONIUM_RENDER_FN__ = render;
+      render();
 
-      return vnode;
+      return root;
     }
   };
 }
 
-// Fragment support
-export function Fragment(props: { children?: any[] }): DocumentFragment {
+function Fragment(props: Props = {}): DocumentFragment {
   const frag = document.createDocumentFragment();
-  const children = props.children ?? [];
+  const children = props.children || [];
+
+  const childArray = Array.isArray(children) ? children : [children];
 
-  (Array.isArray(children) ? children : [children]).forEach(child => {
+  for (const child of childArray) {
     if (typeof child === 'string' || typeof child === 'number') {
-      frag.appendChild(document.createTextNode(child));
+      frag.appendChild(document.createTextNode(String(child)));
     } else if (child instanceof Node) {
       frag.appendChild(child);
     }
-  });
+  }
 
   return frag;
-}
+}
+
+export {
+  h,
+  createApp,
+  Fragment,
+  useState,
+  useEffect,
+  resetStateIndex
+};