round-core 0.0.2 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ZtaMDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,6 +1,6 @@
 {
     "name": "round-core",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
     "main": "src/index.js",
     "type": "module",

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/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 { runInContext as 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,20 @@ export function createElement(tag, props = {}, ...children) {
         return node;
     }
 
+    if (typeof tag === 'string') {
+        const isCustomElement = tag.includes('-');
+        // Simple check: if it looks like a component (no hyphen, lowercase start)
+        // and it's not a standard tag, it's likely an error.
+        // We use a small heuristic list or regex.
+        // Actually, user requested: "custom components when they start with lowercase... should give error".
+        // Using a whitelist of standard tags is robust.
+        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|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|path|circle|rect|line|g|defs|linearGradient|stop|radialGradient|text|tspan)$/.test(tag);
+
+        if (!isCustomElement && !isStandard && /^[a-z]/.test(tag)) {
+            throw new Error(`Component names must start with an uppercase letter: <${tag} />`);
+        }
+    }
+
     const element = document.createElement(tag);
 
     if (props) {
@@ -282,54 +305,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;
+                        }
+                    }
 
-            if (val instanceof Node) {
-                if (currentNode !== val) {
-                    if (currentNode.parentNode) {
-                        currentNode.parentNode.replaceChild(val, currentNode);
-                        currentNode = val;
+                    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;
+                        }
                     }
                 }
-            }
-            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/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;