@nitronjs/framework 0.2.10 → 0.2.12

package/lib/Build/jsxRuntime.js

@@ -1,10 +1,31 @@
+/**
+ * Custom JSX Runtime for NitronJS
+ * 
+ * Handles React 19's strict key prop requirements and provides
+ * island architecture support for client components.
+ */
 const JSX_RUNTIME = `
 import * as React from 'react';
 import * as OriginalJsx from '__react_jsx_original__';
 
 const CTX = Symbol.for('__nitron_view_context__');
 const MARK = Symbol.for('__nitron_client_component__');
-const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype', 'key', 'ref']);
+
+// Filter React 19 key warnings from third-party libraries
+if (typeof console !== 'undefined' && console.error) {
+    const originalError = console.error;
+    console.error = function(...args) {
+        const msg = args[0];
+        if (typeof msg === 'string' && (
+            msg.includes('A props object containing a "key" prop is being spread into JSX') ||
+            msg.includes('\`key\` is not a prop')
+        )) {
+            return;
+        }
+        return originalError.apply(console, args);
+    };
+}
 
 function getContext() {
     return globalThis[CTX]?.getStore?.();
@@ -20,6 +41,7 @@ globalThis.request = () => {
 const DepthContext = React.createContext(false);
 const componentCache = new WeakMap();
 
+// Sanitizes props for client-side hydration (removes functions, symbols, circular refs)
 function sanitizeProps(obj, seen = new WeakSet()) {
     if (obj == null) return obj;
 
@@ -62,6 +84,7 @@ function wrapWithDepth(children) {
     return OriginalJsx.jsx(DepthContext.Provider, { value: true, children });
 }
 
+// Creates an island wrapper for client components (hydrated independently)
 function createIsland(Component, name) {
     function IslandBoundary(props) {
         if (React.useContext(DepthContext)) {
@@ -96,12 +119,23 @@ function getWrappedComponent(Component) {
     return componentCache.get(Component);
 }
 
+// Extracts key from props without triggering React 19's getter warning
 function extractKey(props, key) {
-    if (props == null || !('key' in props)) {
-        return [props, key];
+    if (props == null) return [props, key];
+    if (!Object.prototype.hasOwnProperty.call(props, 'key')) return [props, key];
+
+    const cleanProps = {};
+    let extractedKey = key;
+
+    for (const k of Object.keys(props)) {
+        if (k === 'key') {
+            if (extractedKey == null) extractedKey = props[k];
+        } else {
+            cleanProps[k] = props[k];
+        }
     }
-    const { key: propKey, ...rest } = props;
-    return [rest, key ?? propKey];
+
+    return [cleanProps, extractedKey];
 }
 
 export function jsx(type, props, key) {

package/lib/Console/Stubs/vendor-dev.tsx

@@ -1,14 +1,63 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
-import * as ReactJSXRuntime from 'react/jsx-runtime';
+import * as OriginalJsx from 'react/jsx-runtime';
 import RefreshRuntime from 'react-refresh/runtime';
 
+// Filter React 19 key warnings from third-party libraries
+const originalError = console.error;
+console.error = function(...args: any[]) {
+    const msg = args[0];
+    if (typeof msg === 'string' && (
+        msg.includes('A props object containing a "key" prop is being spread into JSX') ||
+        msg.includes('`key` is not a prop')
+    )) {
+        return;
+    }
+    return originalError.apply(console, args);
+};
+
+// Extracts key from props without triggering React 19's getter warning
+function extractKey(props: any, key: any): [any, any] {
+    if (props == null) return [props, key];
+    if (!Object.prototype.hasOwnProperty.call(props, 'key')) return [props, key];
+
+    const cleanProps: any = {};
+    let extractedKey = key;
+
+    for (const k of Object.keys(props)) {
+        if (k === 'key') {
+            if (extractedKey == null) extractedKey = props[k];
+        }
+        else {
+            cleanProps[k] = props[k];
+        }
+    }
+
+    return [cleanProps, extractedKey];
+}
+
+function jsx(type: any, props: any, key?: any) {
+    const [cleanProps, finalKey] = extractKey(props, key);
+    return OriginalJsx.jsx(type, cleanProps, finalKey);
+}
+
+function jsxs(type: any, props: any, key?: any) {
+    const [cleanProps, finalKey] = extractKey(props, key);
+    return OriginalJsx.jsxs(type, cleanProps, finalKey);
+}
+
+const NitronJSXRuntime = {
+    jsx,
+    jsxs,
+    Fragment: OriginalJsx.Fragment
+};
+
 Object.assign(window, {
     __NITRON_REACT__: React,
     __NITRON_REACT_DOM__: ReactDOM,
     __NITRON_REACT_DOM_CLIENT__: ReactDOMClient,
-    __NITRON_JSX_RUNTIME__: ReactJSXRuntime
+    __NITRON_JSX_RUNTIME__: NitronJSXRuntime
 });
 
 RefreshRuntime.injectIntoGlobalHook(window);

package/lib/Console/Stubs/vendor.tsx

@@ -1,11 +1,46 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
-import * as ReactJSXRuntime from 'react/jsx-runtime';
+import * as OriginalJsx from 'react/jsx-runtime';
+
+// Extracts key from props without triggering React 19's getter warning
+function extractKey(props: any, key: any): [any, any] {
+    if (props == null) return [props, key];
+    if (!Object.prototype.hasOwnProperty.call(props, 'key')) return [props, key];
+
+    const cleanProps: any = {};
+    let extractedKey = key;
+
+    for (const k of Object.keys(props)) {
+        if (k === 'key') {
+            if (extractedKey == null) extractedKey = props[k];
+        } else {
+            cleanProps[k] = props[k];
+        }
+    }
+
+    return [cleanProps, extractedKey];
+}
+
+function jsx(type: any, props: any, key?: any) {
+    const [cleanProps, finalKey] = extractKey(props, key);
+    return OriginalJsx.jsx(type, cleanProps, finalKey);
+}
+
+function jsxs(type: any, props: any, key?: any) {
+    const [cleanProps, finalKey] = extractKey(props, key);
+    return OriginalJsx.jsxs(type, cleanProps, finalKey);
+}
+
+const NitronJSXRuntime = {
+    jsx,
+    jsxs,
+    Fragment: OriginalJsx.Fragment
+};
 
 Object.assign(window, {
     __NITRON_REACT__: React,
     __NITRON_REACT_DOM__: ReactDOM,
     __NITRON_REACT_DOM_CLIENT__: ReactDOMClient,
-    __NITRON_JSX_RUNTIME__: ReactJSXRuntime
+    __NITRON_JSX_RUNTIME__: NitronJSXRuntime
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.2.10",
+	"version": "0.2.12",
 	"description": "NitronJS is a modern and extensible Node.js MVC framework built on Fastify. It focuses on clean architecture, modular structure, and developer productivity, offering built-in routing, middleware, configuration management, CLI tooling, and native React integration for scalable full-stack applications.",
 	"bin": {
 		"njs": "./cli/njs.js"