@nitronjs/framework 0.2.11 → 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

@@ -4,12 +4,37 @@ import * as ReactDOMClient from 'react-dom/client';
 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 || !('key' in props)) {
-        return [props, key];
+    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];
+        }
     }
-    const { key: propKey, ...rest } = props;
-    return [rest, key ?? propKey];
+
+    return [cleanProps, extractedKey];
 }
 
 function jsx(type: any, props: any, key?: any) {

package/lib/Console/Stubs/vendor.tsx

@@ -3,12 +3,23 @@ import * as ReactDOM from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
 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 || !('key' in props)) {
-        return [props, key];
+    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];
+        }
     }
-    const { key: propKey, ...rest } = props;
-    return [rest, key ?? propKey];
+
+    return [cleanProps, extractedKey];
 }
 
 function jsx(type: any, props: any, key?: any) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.2.11",
+	"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"