round-core 0.0.1 → 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/bun.lock

@@ -4,19 +4,19 @@
     "": {
       "name": "round-core",
       "dependencies": {
-        "marked": "^12.0.2"
+        "marked": "^12.0.2",
+        "vite": "^5.0.0",
+        "vitest": "^1.6.0",
       },
       "devDependencies": {
         "@types/node": "latest",
         "bun-types": "latest",
         "jsdom": "^24.0.0",
-        "vite": "^5.0.0",
-        "vitest": "^1.6.0"
       },
       "peerDependencies": {
-        "bun": ">=1.0.0"
-      }
-    }
+        "bun": ">=1.0.0",
+      },
+    },
   },
   "packages": {
     "@asamuzakjp/css-color": ["@asamuzakjp/css-color@3.2.0", "", { "dependencies": { "@csstools/css-calc": "^2.1.3", "@csstools/css-color-parser": "^3.0.9", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "lru-cache": "^10.4.3" } }, "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw=="],
@@ -175,7 +175,7 @@
 
     "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
 
-    "bun": ["bun@1.3.4", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.4", "@oven/bun-darwin-x64": "1.3.4", "@oven/bun-darwin-x64-baseline": "1.3.4", "@oven/bun-linux-aarch64": "1.3.4", "@oven/bun-linux-aarch64-musl": "1.3.4", "@oven/bun-linux-x64": "1.3.4", "@oven/bun-linux-x64-baseline": "1.3.4", "@oven/bun-linux-x64-musl": "1.3.4", "@oven/bun-linux-x64-musl-baseline": "1.3.4", "@oven/bun-windows-x64": "1.3.4", "@oven/bun-windows-x64-baseline": "1.3.4" }, "os": [ "linux", "win32", "darwin" ], "cpu": [ "x64", "arm64" ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-xV6KgD5ImquuKsoghzbWmYzeCXmmSgN6yJGz444hri2W+NGKNRFUNrEhy9+/rRXbvNA2qF0K0jAwqFNy1/GhBg=="],
+    "bun": ["bun@1.3.4", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.4", "@oven/bun-darwin-x64": "1.3.4", "@oven/bun-darwin-x64-baseline": "1.3.4", "@oven/bun-linux-aarch64": "1.3.4", "@oven/bun-linux-aarch64-musl": "1.3.4", "@oven/bun-linux-x64": "1.3.4", "@oven/bun-linux-x64-baseline": "1.3.4", "@oven/bun-linux-x64-musl": "1.3.4", "@oven/bun-linux-x64-musl-baseline": "1.3.4", "@oven/bun-windows-x64": "1.3.4", "@oven/bun-windows-x64-baseline": "1.3.4" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-xV6KgD5ImquuKsoghzbWmYzeCXmmSgN6yJGz444hri2W+NGKNRFUNrEhy9+/rRXbvNA2qF0K0jAwqFNy1/GhBg=="],
 
     "bun-types": ["bun-types@1.3.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-5ua817+BZPZOlNaRgGBpZJOSAQ9RQ17pkwPD0yR7CfJg+r8DgIILByFifDTa+IPDDxzf5VNhtNlcKqFzDgJvlQ=="],
 
@@ -409,6 +409,6 @@
 
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
-    "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="]
+    "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
   }
 }

package/logo.svg

@@ -0,0 +1,10 @@
+<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.1",
+    "version": "0.0.3",
     "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
     "main": "src/index.js",
     "type": "module",
@@ -25,11 +25,11 @@
     "author": "Round Framework Team",
     "license": "MIT",
     "dependencies": {
-        "marked": "^12.0.2"
+        "marked": "^12.0.2",
+        "vite": "^5.0.0",
+        "vitest": "^1.6.0"
     },
     "devDependencies": {
-        "vite": "^5.0.0",
-        "vitest": "^1.6.0",
         "jsdom": "^24.0.0",
         "bun-types": "latest",
         "@types/node": "latest"

package/src/compiler/transformer.js

@@ -5,13 +5,6 @@
 
 export function transform(code) {
     // Process "if" blocks first, then "for" blocks (or vice versa, order matters if nested)
-    // Actually, simple sequential processing might miss nested ones if we replace outside-in vs inside-out.
-    // Let's do a loop that finds the *first* occurrence, replaces it, and repeats until none found.
-    // This handles nesting naturally if we restart search? No, replacing outer first might break inner logic if we simple-replace string.
-    // But if we construct valid JS, inner logic is just string content initially?
-    // Wait, if we replace `if(x){ if(y){} }` -> `x ? ( if(y){} ) : null`.
-    // Then next pass sees `if(y){}` and replaces it. `x ? ( y ? ... : null ) : null`.
-    // Valid.
 
     // Helper to find balanced block starting at index
     function parseBlock(str, startIndex) {
@@ -19,15 +12,70 @@ export function transform(code) {
         let startBlockIndex = -1;
         let endBlockIndex = -1;
 
-        // Find the opening { of the block
-        // The regex gives us the start of "if/for (...) {"
-        // We need to verify we found the brace.
+        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

@@ -311,7 +311,6 @@ export default function RoundPlugin(pluginOptions = {}) {
                     jsxFactory: 'createElement',
                     jsxFragment: 'Fragment'
                     // NOTE: Inject the runtime import in transform() to avoid
-                    // double-inject issues and because jsxInject isn't always applied to custom extensions.
                 },
                 // Ensure .round files are treated as JS/JSX
                 resolve: {

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;