round-core 0.0.3 → 0.0.4

package/package.json

@@ -1,20 +1,28 @@
 {
     "name": "round-core",
-    "version": "0.0.3",
+    "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/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/dom.js

@@ -1,5 +1,5 @@
 import { effect, untrack } from './signals.js';
-import { runInContext as runInLifecycle, 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';
@@ -76,14 +76,13 @@ export function createElement(tag, props = {}, ...children) {
 
     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)) {
+
+        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} />`);
         }
     }
@@ -273,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);

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/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 '';
+                }
+            }
+        },
+    },
+});