round-core 0.0.2 → 0.0.4

package/logo.svg

@@ -1,73 +1,10 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Gradiente verde para el núcleo -->
-    <radialGradient id="nucleusGradient" cx="50%" cy="50%" fx="30%" fy="30%" r="70%">
-      <stop offset="0%" stop-color="#00ffaa"/>
-      <stop offset="50%" stop-color="#00d8a7"/>
-      <stop offset="100%" stop-color="#00b894"/>
-    </radialGradient>
-    
-    <!-- Efecto de sombra para las órbitas -->
-    <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000000" flood-opacity="0.2"/>
-    </filter>
-    
-    <!-- Gradiente con brillo para azul -->
-    <linearGradient id="blueGlow" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#1a4fd8"/>
-      <stop offset="30%" stop-color="#4a7dff"/>
-      <stop offset="70%" stop-color="#2962FF"/>
-      <stop offset="100%" stop-color="#1a4fd8"/>
-    </linearGradient>
-    
-    <!-- Gradiente con brillo para verde -->
-    <linearGradient id="greenGlow" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#00b894"/>
-      <stop offset="30%" stop-color="#00ffc3"/>
-      <stop offset="70%" stop-color="#00D8A7"/>
-      <stop offset="100%" stop-color="#00b894"/>
-    </linearGradient>
-  </defs>
-  
-  <!-- Fondo sutil circular -->
-  <circle cx="100" cy="100" r="90" fill="url(#blueGlow)" opacity="0.05"/>
-  
-  <!-- Órbita exterior con efecto de neón -->
-  <path d="M40,100 Q100,30 160,100 Q100,170 40,100" 
-        fill="none" 
-        stroke="url(#blueGlow)" 
-        stroke-width="10"
-        stroke-linecap="round"
-        filter="url(#dropShadow)"
-        style="mix-blend-mode: screen"/>
-  
-  <!-- Órbita media con efecto brillante -->
-  <path d="M60,100 Q100,50 140,100 Q100,150 60,100" 
-        fill="none" 
-        stroke="url(#greenGlow)" 
-        stroke-width="10"
-        stroke-linecap="round"
-        filter="url(#dropShadow)"
-        style="mix-blend-mode: screen"/>
-  
-  <!-- Núcleo con efecto 3D marcado -->
-  <circle cx="100" cy="100" r="22" fill="url(#nucleusGradient)">
-    <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#00ffaa" flood-opacity="0.4"/>
-  </circle>
-  
-  <!-- Reflejo superior en el núcleo -->
-  <ellipse cx="95" cy="90" rx="8" ry="5" fill="#ffffff" opacity="0.4"/>
-  
-  <!-- Puntos de energía sutilmente distribuidos -->
-  <g opacity="0.6">
-    <circle cx="170" cy="100" r="3" fill="#4a7dff"/>
-    <circle cx="100" cy="170" r="3" fill="#4a7dff"/>
-    <circle cx="30" cy="100" r="3" fill="#4a7dff"/>
-    <circle cx="100" cy="30" r="3" fill="#4a7dff"/>
-    
-    <circle cx="140" cy="140" r="2.5" fill="#00ffc3"/>
-    <circle cx="60" cy="140" r="2.5" fill="#00ffc3"/>
-    <circle cx="140" cy="60" r="2.5" fill="#00ffc3"/>
-    <circle cx="60" cy="60" r="2.5" fill="#00ffc3"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6d28d9"/>
+      <stop offset="1" stop-color="#16a34a"/>
+    </linearGradient>
+  </defs>
+  <rect x="1" y="1" width="14" height="14" rx="4" fill="#ffffff" stroke="url(#g)" stroke-width="1.25"/>
+  <path d="M5.2 11.3V4.7h2.65c.9 0 1.62.2 2.16.62.55.41.82 1.02.82 1.82 0 .56-.14 1.02-.43 1.37-.28.35-.68.6-1.18.73l1.6 2.06H9.58L8.15 9.45H6.45v1.85H5.2zm1.25-2.9h1.3c.55 0 .96-.1 1.22-.32.26-.22.4-.55.4-.99 0-.44-.13-.76-.39-.96-.26-.2-.67-.3-1.23-.3H6.45v2.57z" fill="#111827"/>
 </svg>

package/package.json

@@ -1,20 +1,28 @@
 {
     "name": "round-core",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
-    "main": "src/index.js",
+    "main": "./dist/index.js",
+    "exports": {
+        ".": "./dist/index.js",
+        "./vite-plugin": "./dist/vite-plugin.js"
+    },
     "type": "module",
     "icon": "round.png",
     "repository": {
         "url": "https://github.com/ZtaMDev/RoundJS.git"
     },
     "bin": {
-        "round": "./src/cli.js"
+        "round": "./dist/cli.js"
     },
     "scripts": {
-        "dev": "node ./cli.js dev --config ./test/main/round.config.json",
-        "build": "node ./cli.js build --config ./test/main/round.config.json",
-        "test": "vitest run"
+        "dev": "node ./src/cli.js dev --config ./test/main/round.config.json",
+        "build": "node ./src/cli.js build --config ./test/main/round.config.json",
+        "build:core": "vite build -c vite.config.build.js",
+        "test": "vitest run",
+        "bench": "bun run --cwd benchmarks bench",
+        "bench:build": "bun run --cwd benchmarks bench:build",
+        "bench:runtime": "bun run --cwd benchmarks bench:runtime"
     },
     "keywords": [
         "framework",

package/src/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+
 import path from 'node:path';
 import fs from 'node:fs';
 import process from 'node:process';
@@ -6,6 +6,13 @@ import { fileURLToPath } from 'node:url';
 import { createServer, build as viteBuild, preview as vitePreview } from 'vite';
 import RoundPlugin from './compiler/vite-plugin.js';
 
+// Handle graceful shutdown
+function onSignal() {
+    process.exit(0);
+}
+process.on('SIGINT', onSignal);
+process.on('SIGTERM', onSignal);
+
 function normalizePath(p) {
     return p.replaceAll('\\', '/');
 }
@@ -239,7 +246,7 @@ async function runInit({ name }) {
             preview: 'round preview'
         },
         dependencies: {
-            'round-core': '^0.0.1'
+            'round-core': '^0.0.4'
         },
         devDependencies: {
             vite: '^5.0.0'
@@ -272,7 +279,7 @@ async function runInit({ name }) {
 
     writeFileIfMissing(viteConfigPath, [
         "import { defineConfig } from 'vite';",
-        "import RoundPlugin from 'round-core/src/compiler/vite-plugin.js';",
+        "import RoundPlugin from 'round-core/vite-plugin';",
         '',
         'export default defineConfig({',
         "    plugins: [RoundPlugin({ configPath: './round.config.json' })],",

package/src/compiler/transformer.js

@@ -12,11 +12,70 @@ export function transform(code) {
         let startBlockIndex = -1;
         let endBlockIndex = -1;
 
+        let inSingle = false;
+        let inDouble = false;
+        let inTemplate = false;
+        let inCommentLine = false;
+        let inCommentMulti = false;
+
         for (let i = startIndex; i < str.length; i++) {
-            if (str[i] === '{') {
+            const ch = str[i];
+            const prev = i > 0 ? str[i - 1] : '';
+            const next = i < str.length - 1 ? str[i + 1] : '';
+
+            // Handle strings and comments
+            if (inCommentLine) {
+                if (ch === '\n' || ch === '\r') inCommentLine = false;
+                continue;
+            }
+            if (inCommentMulti) {
+                if (ch === '*' && next === '/') {
+                    inCommentMulti = false;
+                    i++;
+                }
+                continue;
+            }
+            if (inTemplate) {
+                if (ch === '`' && prev !== '\\') inTemplate = false;
+                continue;
+            }
+            if (inSingle) {
+                if (ch === '\'' && prev !== '\\') inSingle = false;
+                continue;
+            }
+            if (inDouble) {
+                if (ch === '"' && prev !== '\\') inDouble = false;
+                continue;
+            }
+
+            // Check for start of strings/comments
+            if (ch === '/' && next === '/') {
+                inCommentLine = true;
+                i++;
+                continue;
+            }
+            if (ch === '/' && next === '*') {
+                inCommentMulti = true;
+                i++;
+                continue;
+            }
+            if (ch === '`') {
+                inTemplate = true;
+                continue;
+            }
+            if (ch === '\'') {
+                inSingle = true;
+                continue;
+            }
+            if (ch === '"') {
+                inDouble = true;
+                continue;
+            }
+
+            if (ch === '{') {
                 if (open === 0) startBlockIndex = i;
                 open++;
-            } else if (str[i] === '}') {
+            } else if (ch === '}') {
                 open--;
                 if (open === 0) {
                     endBlockIndex = i;

package/src/compiler/vite-plugin.js

@@ -131,6 +131,9 @@ export default function RoundPlugin(pluginOptions = {}) {
         const trailingSlash = config?.routing?.trailingSlash;
         state.routingTrailingSlash = trailingSlash !== undefined ? Boolean(trailingSlash) : true;
 
+        const customTags = config?.htmlTags;
+        state.customTags = Array.isArray(customTags) ? customTags : [];
+
         const entryRel = config?.entry;
         state.entryAbs = entryRel ? resolveMaybeRelative(configDir, entryRel) : null;
 
@@ -303,7 +306,8 @@ export default function RoundPlugin(pluginOptions = {}) {
 
             return {
                 define: {
-                    __ROUND_ROUTING_TRAILING_SLASH__: JSON.stringify(state.routingTrailingSlash)
+                    __ROUND_ROUTING_TRAILING_SLASH__: JSON.stringify(state.routingTrailingSlash),
+                    __ROUND_CUSTOM_TAGS__: JSON.stringify(state.customTags ?? [])
                 },
                 esbuild: {
                     include: /\.(round|js|jsx|ts|tsx)$/,

package/src/runtime/context.js

@@ -11,7 +11,7 @@ function popContext() {
     contextStack.pop();
 }
 
-function readContext(ctx) {
+export function readContext(ctx) {
     for (let i = contextStack.length - 1; i >= 0; i--) {
         const layer = contextStack[i];
         if (layer && Object.prototype.hasOwnProperty.call(layer, ctx.id)) {
@@ -60,3 +60,19 @@ export function bindContext(ctx) {
         return provided;
     };
 }
+
+export function captureContext() {
+    return contextStack.slice();
+}
+
+export function runInContext(snapshot, fn) {
+    const prev = contextStack.slice();
+    contextStack.length = 0;
+    contextStack.push(...snapshot);
+    try {
+        return fn();
+    } finally {
+        contextStack.length = 0;
+        contextStack.push(...prev);
+    }
+}

package/src/runtime/dom.js

@@ -1,6 +1,9 @@
 import { effect, untrack } from './signals.js';
-import { runInContext, createComponentInstance, mountComponent, initLifecycleRoot } from './lifecycle.js';
+import { runInLifecycle, createComponentInstance, mountComponent, initLifecycleRoot } from './lifecycle.js';
 import { reportErrorSafe } from './error-reporter.js';
+import { captureContext, runInContext, readContext } from './context.js';
+import { SuspenseContext } from './suspense.js';
+
 
 let isObserverInitialized = false;
 
@@ -32,14 +35,20 @@ export function createElement(tag, props = {}, ...children) {
         const componentName = tag?.name ?? 'Anonymous';
         componentInstance.name = componentName;
 
-        let node = runInContext(componentInstance, () => {
+        let node = runInLifecycle(componentInstance, () => {
             const componentProps = { ...props, children };
             try {
                 const res = untrack(() => tag(componentProps));
                 if (isPromiseLike(res)) throw res;
                 return res;
             } catch (e) {
-                if (isPromiseLike(e)) throw e;
+                if (isPromiseLike(e)) {
+                    const suspense = readContext(SuspenseContext);
+                    if (!suspense) {
+                        throw new Error("cannot instance a lazy component outside a suspense");
+                    }
+                    throw e;
+                }
                 reportErrorSafe(e, { phase: 'component.render', component: componentName });
                 return createElement('div', { style: { padding: '16px' } }, `Error in ${componentName}`);
             }
@@ -65,6 +74,19 @@ export function createElement(tag, props = {}, ...children) {
         return node;
     }
 
+    if (typeof tag === 'string') {
+        const isCustomElement = tag.includes('-');
+
+        const isStandard = /^(a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|search|section|select|slot|small|source|span|strong|style|sub|summary|sup|svg|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr|menu|animate|animateMotion|animateTransform|circle|clipPath|defs|desc|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|foreignObject|g|image|line|linearGradient|marker|mask|metadata|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|stop|switch|symbol|text|textPath|tspan|use|view)$/.test(tag);
+
+        // __ROUND_CUSTOM_TAGS__ is injected by the vite plugin from round.config.json
+        const isCustomConfigured = typeof __ROUND_CUSTOM_TAGS__ !== 'undefined' && __ROUND_CUSTOM_TAGS__.includes(tag);
+
+        if (!isCustomElement && !isStandard && !isCustomConfigured && /^[a-z]/.test(tag)) {
+            throw new Error(`Component names must start with an uppercase letter: <${tag} />`);
+        }
+    }
+
     const element = document.createElement(tag);
 
     if (props) {
@@ -250,6 +272,21 @@ export function createElement(tag, props = {}, ...children) {
                 return;
             }
 
+            if (key === 'classList') {
+                if (value && typeof value === 'object') {
+                    Object.entries(value).forEach(([className, condition]) => {
+                        if (typeof condition === 'function') {
+                            effect(() => {
+                                element.classList.toggle(className, !!condition());
+                            }, { onLoad: false });
+                        } else {
+                            element.classList.toggle(className, !!condition);
+                        }
+                    });
+                }
+                return;
+            }
+
             if (key === 'className') element.className = value;
             else if (key === 'value') element.value = value;
             else if (key === 'checked') element.checked = Boolean(value);
@@ -282,54 +319,65 @@ function appendChild(parent, child) {
 
         let currentNode = placeholder;
 
-        effect(() => {
-            let val;
-            try {
-                val = child();
-                if (isPromiseLike(val)) throw val;
-            } catch (e) {
-                if (isPromiseLike(e)) throw e;
-                reportErrorSafe(e, { phase: 'child.dynamic' });
-                val = createElement('div', { style: { padding: '16px' } }, 'Error');
-            }
+        const ctxSnapshot = captureContext();
 
-            if (Array.isArray(val)) {
-                if (!(currentNode instanceof Element) || !currentNode._roundArrayWrapper) {
-                    const wrapper = document.createElement('span');
-                    wrapper.style.display = 'contents';
-                    wrapper._roundArrayWrapper = true;
-                    if (currentNode.parentNode) {
-                        currentNode.parentNode.replaceChild(wrapper, currentNode);
-                        currentNode = wrapper;
+        effect(() => {
+            runInContext(ctxSnapshot, () => {
+                let val;
+                try {
+                    val = child();
+                    if (isPromiseLike(val)) throw val;
+                } catch (e) {
+                    if (isPromiseLike(e)) {
+                        const suspense = readContext(SuspenseContext);
+                        if (suspense && typeof suspense.register === 'function') {
+                            suspense.register(e);
+                            return;
+                        }
+                        throw new Error("cannot instance a lazy component outside a suspense");
                     }
+                    reportErrorSafe(e, { phase: 'child.dynamic' });
+                    val = createElement('div', { style: { padding: '16px' } }, 'Error');
                 }
 
-                while (currentNode.firstChild) currentNode.removeChild(currentNode.firstChild);
-                val.forEach(v => appendChild(currentNode, v));
-                return;
-            }
+                if (Array.isArray(val)) {
+                    if (!(currentNode instanceof Element) || !currentNode._roundArrayWrapper) {
+                        const wrapper = document.createElement('span');
+                        wrapper.style.display = 'contents';
+                        wrapper._roundArrayWrapper = true;
+                        if (currentNode.parentNode) {
+                            currentNode.parentNode.replaceChild(wrapper, currentNode);
+                            currentNode = wrapper;
+                        }
+                    }
+
+                    while (currentNode.firstChild) currentNode.removeChild(currentNode.firstChild);
+                    val.forEach(v => appendChild(currentNode, v));
+                    return;
+                }
 
-            if (val instanceof Node) {
-                if (currentNode !== val) {
-                    if (currentNode.parentNode) {
-                        currentNode.parentNode.replaceChild(val, currentNode);
-                        currentNode = val;
+                if (val instanceof Node) {
+                    if (currentNode !== val) {
+                        if (currentNode.parentNode) {
+                            currentNode.parentNode.replaceChild(val, currentNode);
+                            currentNode = val;
+                        }
                     }
                 }
-            }
-            else {
-                const textContent = (val === null || val === undefined) ? '' : val;
-
-                if (currentNode instanceof Element) {
-                    const newText = document.createTextNode(textContent);
-                    if (currentNode.parentNode) {
-                        currentNode.parentNode.replaceChild(newText, currentNode);
-                        currentNode = newText;
+                else {
+                    const textContent = (val === null || val === undefined) ? '' : val;
+
+                    if (currentNode instanceof Element) {
+                        const newText = document.createTextNode(textContent);
+                        if (currentNode.parentNode) {
+                            currentNode.parentNode.replaceChild(newText, currentNode);
+                            currentNode = newText;
+                        }
+                    } else {
+                        currentNode.textContent = textContent;
                     }
-                } else {
-                    currentNode.textContent = textContent;
                 }
-            }
+            });
         }, { onLoad: false });
         return;
     }

package/src/runtime/lifecycle.js

@@ -6,7 +6,7 @@ export function getCurrentComponent() {
     return componentStack[componentStack.length - 1];
 }
 
-export function runInContext(componentInstance, fn) {
+export function runInLifecycle(componentInstance, fn) {
     componentStack.push(componentInstance);
     try {
         return fn();

package/src/runtime/suspense.js

@@ -1,10 +1,14 @@
 import { signal } from './signals.js';
 import { createElement, Fragment } from './dom.js';
+import { createContext } from './context.js';
 
 function isPromiseLike(v) {
     return v && (typeof v === 'object' || typeof v === 'function') && typeof v.then === 'function';
 }
 
+const SuspenseContext = createContext(null);
+export { SuspenseContext };
+
 export function lazy(loader) {
     if (typeof loader !== 'function') {
         throw new Error('lazy(loader) expects a function that returns a Promise');
@@ -67,37 +71,55 @@ export function lazy(loader) {
 
 export function Suspense(props = {}) {
     const tick = signal(0);
-    let lastPromise = null;
+    const pending = new Set();
+
+    // Track promises we are currently waiting for to avoid re-adding them or flickering
+    const waiting = new Set();
 
     const child = Array.isArray(props.children) ? props.children[0] : props.children;
     const childFn = typeof child === 'function' ? child : () => child;
 
-    return createElement('span', { style: { display: 'contents' } }, () => {
+    const register = (promise) => {
+        if (!waiting.has(promise)) {
+            waiting.add(promise);
+            pending.add(promise);
+            promise.then(
+                () => {
+                    waiting.delete(promise);
+                    pending.delete(promise);
+                    tick(tick.peek() + 1);
+                },
+                () => {
+                    waiting.delete(promise);
+                    pending.delete(promise);
+                    tick(tick.peek() + 1);
+                }
+            );
+        }
+    };
+
+    return createElement(SuspenseContext.Provider, {
+        value: { register }
+    }, () => {
+        // Read tick to re-render when promises resolve
         tick();
 
+        // If pending promises, show fallback depending on strategy.
+
+        if (pending.size > 0) {
+            return props.fallback ?? null;
+        }
+
         try {
             const res = childFn();
             if (isPromiseLike(res)) {
-                if (lastPromise !== res) {
-                    lastPromise = res;
-                    res.then(
-                        () => tick(tick.peek() + 1),
-                        () => tick(tick.peek() + 1)
-                    );
-                }
+                register(res);
                 return props.fallback ?? null;
             }
-            lastPromise = null;
             return res ?? null;
         } catch (e) {
             if (isPromiseLike(e)) {
-                if (lastPromise !== e) {
-                    lastPromise = e;
-                    e.then(
-                        () => tick(tick.peek() + 1),
-                        () => tick(tick.peek() + 1)
-                    );
-                }
+                register(e);
                 return props.fallback ?? null;
             }
             throw e;

package/vite.config.build.js

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite';
+import path from 'node:path';
+import fs from 'node:fs';
+
+// Custom plugin to move .d.ts files or raw assets if needed, 
+// for now we just handle JS bundling.
+
+// Custom plugin to move .d.ts files or raw assets if needed, 
+// for now we just handle JS bundling.
+
+export default defineConfig({
+    build: {
+        // Target modern environments
+        target: 'es2022',
+        outDir: 'dist',
+        emptyOutDir: true,
+        minify: false, // User can enable if they want extreme minification, but for a lib readable code is nice. 
+        // Wait, user asked for "extremo rapido y liviano" (extremely fast and light). 
+        // So I SHOULD minify.
+        lib: {
+            entry: {
+                index: path.resolve(__dirname, 'src/index.js'),
+                cli: path.resolve(__dirname, 'src/cli.js'),
+                // We expose the plugin separately so users can import it in their vite.config.js
+                'vite-plugin': path.resolve(__dirname, 'src/compiler/vite-plugin.js')
+            },
+            formats: ['es'] // ESM only is fine for modern "type": "module" package
+        },
+        rollupOptions: {
+            // Externalize dependencies so they aren't bundled into the library
+            external: [
+                'vite',
+                'marked',
+                'node:fs', 'node:path', 'node:process', 'node:url', 'node:vm', 'node:util',
+                'fs', 'path', 'process', 'url', 'vm', 'util'
+            ],
+            output: {
+                banner: (chunk) => {
+                    if (chunk.name === 'cli' || chunk.fileName === 'cli.js') {
+                        return '#!/usr/bin/env node';
+                    }
+                    return '';
+                }
+            }
+        },
+    },
+});