what-react 0.11.7 → 0.12.0

package/dom.d.ts

@@ -1,7 +1,7 @@
 // what-react/dom — react-dom compatible surface (src/dom.js).
 // Alias `react-dom` → `what-react/dom` to run React libraries that render.
 
-import type { ReactNode } from './index';
+import type { ReactNode } from './index.js';
 
 export interface Root {
   render(children: ReactNode): void;

package/jsx-dev-runtime.d.ts

@@ -1,10 +1,10 @@
 // what-react/jsx-dev-runtime — development JSX runtime type definitions.
 // Mirrors jsx-runtime.d.ts; TS uses this under "jsx": "react-jsxdev".
 
-import type { ReactElement, Key } from './index';
+import type { ReactElement, Key } from './index.js';
 
-export { Fragment } from './index';
-export { JSX } from './jsx-runtime';
+export { Fragment } from './index.js';
+export { JSX } from './jsx-runtime.js';
 
 export function jsx(type: any, props: any, key?: Key): ReactElement;
 export function jsxs(type: any, props: any, key?: Key): ReactElement;

package/jsx-runtime.d.ts

@@ -8,12 +8,15 @@
 // Common attributes are typed for autocomplete; an index signature keeps
 // arbitrary/custom attributes and web-component tags valid.
 
-import type { ReactElement, ReactNode, Ref, Key } from './index';
+import type { ReactElement, ReactNode, Ref, Key } from './index.js';
 
-export { Fragment } from './index';
+export { Fragment } from './index.js';
 
 export function jsx(type: any, props: any, key?: Key): ReactElement;
 export function jsxs(type: any, props: any, key?: Key): ReactElement;
+// The dev runtime ("jsx": "react-jsxdev") calls jsxDEV instead of jsx. Without a
+// declaration, a TypeScript project on the dev transform fails to resolve it.
+export function jsxDEV(type: any, props: any, key?: Key): ReactElement;
 
 type EventHandler<E extends Event = Event> = (
   event: E & { currentTarget: EventTarget & Element; target: Element },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-react",
-  "version": "0.11.7",
+  "version": "0.12.0",
   "description": "React compatibility layer for What Framework — real React semantics (value hooks, re-renders, context) on a dedicated compat runtime",
   "type": "module",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "compatibility"
   ],
   "peerDependencies": {
-    "what-core": "^0.11.7"
+    "what-core": "^0.12.0"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",

package/src/index.js

@@ -189,6 +189,30 @@ function flattenChildren(children, out) {
   return out;
 }
 
+// ---- React element brands ----
+// Ecosystem libraries do not duck-type elements, they check the brand:
+// MUI, emotion, styled-components, recharts and react-select all compare
+// `element.$$typeof` against `Symbol.for('react.element')` before treating a
+// value as renderable. Without it they classify every compat element as a plain
+// object and silently render nothing.
+//
+// The brand is also why React elements are XSS-safe against JSON injection: a
+// symbol cannot survive JSON.parse, so an attacker-supplied object can never
+// impersonate an element. isValidElement() below relies on that.
+//
+// React 19 renamed its internal brand to 'react.transitional.element', but
+// library code in the wild overwhelmingly still compares against
+// 'react.element', which is also what preact/compat brands with.
+//
+// Fragment is deliberately NOT branded here: it is what-core's own export, and
+// stamping a React symbol onto it would mutate a shared object for every
+// consumer of the framework, compat or not. Context is already branded where it
+// is created (hooks.js).
+const REACT_ELEMENT_TYPE = Symbol.for('react.element');
+const REACT_MEMO_TYPE = Symbol.for('react.memo');
+const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+
 export function createElement(type, props, ...children) {
   if (props == null) props = {};
 
@@ -237,6 +261,7 @@ export function createElement(type, props, ...children) {
   }
 
   return {
+    $$typeof: REACT_ELEMENT_TYPE,
     tag,
     type,
     props: finalProps,
@@ -280,6 +305,11 @@ export function memo(Component, areEqual) {
   Memoized.displayName = `Memo(${Component.displayName || Component.name || 'Anonymous'})`;
   Memoized._memoCompare = areEqual || shallowEqual;
   Memoized._memoType = Component;
+  // Libraries unwrap a memo with `type.$$typeof === REACT_MEMO_TYPE ? type.type : type`
+  // to reach the component underneath (to read its displayName, propTypes, or to
+  // decide whether it is a class). Carry both halves of that contract.
+  Memoized.$$typeof = REACT_MEMO_TYPE;
+  Memoized.type = Component;
   return Memoized;
 }
 
@@ -303,6 +333,7 @@ export function lazy(loader) {
   }
   LazyComponent.displayName = 'Lazy';
   LazyComponent._lazy = true;
+  LazyComponent.$$typeof = REACT_LAZY_TYPE;
   return LazyComponent;
 }
 
@@ -315,6 +346,7 @@ export function Suspense(props) {
   return props.children;
 }
 Suspense.displayName = 'Suspense';
+Suspense.$$typeof = REACT_SUSPENSE_TYPE;
 
 // ---- Children utilities ----