neutronium 1.9.5 → 2.0.1

package/README.md

@@ -6,84 +6,16 @@ Neutronium is a lightweight, efficient JavaScript framework designed for buildin
 
 ## Features
 
-- 🚀 **Ultra-fast** - Optimized for performance
-- 📦 **Minimal bundle size** - Dense with features, light on complexity
-- 🎯 **Simple API** - Easy to learn and use
-- 🔧 **Flexible** - Adaptable to your project needs
-- 🌟 **Modern** - Built with current JavaScript standards
+* 🚀 **Ultra-fast** - Optimized for performance
+* 📦 **Minimal bundle size** - Dense with features, light on complexity
+* 🎯 **Simple API** - Easy to learn and use
+* 🔧 **Flexible** - Adaptable to your project needs
+* 🌟 **Modern** - Built with current JavaScript standards
 
-## Installation
+## Installation and Setup
 
 ```bash
-npm install neutronium
-```
-
-## Quick Start
-
-```javascript
-import { createComponent, render } from 'neutronium';
-
-// Create a simple component
-const HelloWorld = createComponent({
-  template: '<h1>Hello, {{name}}!</h1>',
-  props: { name: 'World' }
-});
-
-// Render to DOM
-render(HelloWorld, document.getElementById('app'));
-```
-
-## API Reference
-
-### `createComponent(options)`
-
-Creates a new component with the specified options.
-
-**Parameters:**
-- `options` (Object): Component configuration
-  - `template` (String): HTML template
-  - `props` (Object): Component properties
-  - `methods` (Object): Component methods
-
-**Returns:** Component instance
-
-### `render(component, target)`
-
-Renders a component to the specified DOM element.
-
-**Parameters:**
-- `component`: Component instance
-- `target`: DOM element to render into
-
-## Examples
-
-### Basic Component
-
-```javascript
-import { createComponent, render } from 'neutronium';
-
-const Counter = createComponent({
-  template: `
-    <div>
-      <h2>Count: {{count}}</h2>
-      <button onclick="increment()">+</button>
-      <button onclick="decrement()">-</button>
-    </div>
-  `,
-  props: {
-    count: 0
-  },
-  methods: {
-    increment() {
-      this.props.count++;
-    },
-    decrement() {
-      this.props.count--;
-    }
-  }
-});
-
-render(Counter, document.getElementById('app'));
+npm i neutronium -g && npm i neutronium && neu-cli create-app && neu-cli start --watch
 ```
 
 ### Component with State
@@ -122,10 +54,10 @@ render(TodoList, document.getElementById('app'));
 
 ## Browser Support
 
-- Chrome 60+
-- Firefox 60+
-- Safari 12+
-- Edge 79+
+* Chrome 60+
+* Firefox 60+
+* Safari 12+
+* Edge 79+
 
 ## Development
 
@@ -145,7 +77,7 @@ npm run build
 
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+We welcome contributions!
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
@@ -157,21 +89,12 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Roadmap
-
-- [ ] Server-side rendering support
-- [ ] TypeScript definitions
-- [ ] Developer tools integration
-- [ ] Plugin system
-- [ ] Performance optimizations
-- [ ] Advanced component lifecycle methods
-
 ## Why Neutronium?
 
 Just like neutronium is the densest stable matter in the universe, Neutronium framework packs maximum functionality into minimal code. It's designed for developers who want powerful features without the bloat.
 
 ---
 
-**Built with ⚛️ by [Your Name]**
+**Built with ※ by PFMCODES Org.**
 
-*"Dense with features, light on complexity"*
+*"Dense with features, light on complexity"*

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');
 const path = require('path');

package/compiler/compiler.js

@@ -22,14 +22,19 @@ function compileProject(projectDir = process.cwd()) {
 
     log('⚙️ Compiling JSX with Babel...');
     let { code: transpiled } = babel.transformSync(sourceCode, {
-      filename: 'App.js',
-      presets: [],
-      plugins: [
-        ['@babel/plugin-transform-react-jsx', { pragma: '_neutronium.h' }]
-      ],
-      babelrc: false,
-      configFile: false,
-    });
+  filename: 'App.js', // or use path.basename(appJsPath)
+  babelrc: false,
+  configFile: false,
+  presets: [],
+  plugins: [
+  ['@babel/plugin-transform-react-jsx', {
+    pragma: '_neutronium.h',
+    pragmaFrag: '_neutronium.Fragment',
+    runtime: 'classic',
+    useBuiltIns: false // <- IMPORTANT
+  }]
+]
+});
 
     // Remove CommonJS require if present
     transpiled = transpiled.replace(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neutronium",
-  "version": "1.9.5",
+  "version": "2.0.1",
   "description": "A dense, efficient JavaScript framework for building modern web applications",
   "main": "src/index.js",
   "type": "commonjs",

package/src/index.js

@@ -1,14 +1,17 @@
 // src/index.js
 
-function h(type, props = {}, ...children) {
+export function h(type, props = {}, ...children) {
+  if (typeof type === 'function') {
+    return type(props || {});
+  }
+
   const el = document.createElement(type);
 
   for (const [key, value] of Object.entries(props || {})) {
-    if (key === 'ref' && typeof value === 'function') {
-      // Delay to ensure element is mounted
-      setTimeout(() => value(el), 0);
-    } else if (key.startsWith('on') && typeof value === 'function') {
+    if (key.startsWith('on') && typeof value === 'function') {
       el.addEventListener(key.slice(2).toLowerCase(), value);
+    } else if (key === 'ref' && typeof value === 'function') {
+      value(el);
     } else {
       el.setAttribute(key, value);
     }
@@ -25,6 +28,34 @@ function h(type, props = {}, ...children) {
   return el;
 }
 
+export function Fragment(_, ...children) {
+  const frag = document.createDocumentFragment();
+  children.flat().forEach(child => {
+    if (typeof child === 'string') {
+      frag.appendChild(document.createTextNode(child));
+    } else {
+      frag.appendChild(child);
+    }
+  });
+  return frag;
+}
+
+export function createApp(component) {
+  return {
+    mount(selector) {
+      const root = typeof selector === 'string' ? document.querySelector(selector) : selector;
+      if (!root) {
+        console.error(`❌ Root element '${selector}' not found`);
+        return;
+      }
+
+      const vnode = component();
+      root.innerHTML = '';
+      root.appendChild(vnode);
+    }
+  };
+}
+
 function createApp(component) {
   return {
     mount(selector) {
@@ -41,4 +72,16 @@ function createApp(component) {
   };
 }
 
-export { h, createApp };
+export function Fragment(_, ...children) {
+  const frag = document.createDocumentFragment();
+  children.flat().forEach(child => {
+    if (typeof child === 'string') {
+      frag.appendChild(document.createTextNode(child));
+    } else if (child instanceof Node) {
+      frag.appendChild(child);
+    }
+  });
+  return frag;
+}
+
+export { h, createApp, Fragment };