@pyreon/preact-compat 0.18.0 → 0.20.0

package/lib/analysis/hooks.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"hooks.js","children":[{"name":"src","children":[{"uid":"3bf7c0f6-1","name":"jsx-runtime.ts"},{"uid":"3bf7c0f6-3","name":"hooks.ts"}]}]}],"isRoot":true},"nodeParts":{"3bf7c0f6-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"3bf7c0f6-0"},"3bf7c0f6-3":{"renderedLength":7168,"gzipLength":2046,"brotliLength":0,"metaUid":"3bf7c0f6-2"}},"nodeMetas":{"3bf7c0f6-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"hooks.js":"3bf7c0f6-1"},"imported":[{"uid":"3bf7c0f6-4"},{"uid":"3bf7c0f6-5"}],"importedBy":[{"uid":"3bf7c0f6-2"}]},"3bf7c0f6-2":{"id":"/src/hooks.ts","moduleParts":{"hooks.js":"3bf7c0f6-3"},"imported":[{"uid":"3bf7c0f6-4"},{"uid":"3bf7c0f6-0"}],"importedBy":[],"isEntry":true},"3bf7c0f6-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"3bf7c0f6-2"},{"uid":"3bf7c0f6-0"}]},"3bf7c0f6-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"3bf7c0f6-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"hooks.js","children":[{"name":"src","children":[{"uid":"55308b2d-1","name":"jsx-runtime.ts"},{"uid":"55308b2d-3","name":"hooks.ts"}]}]}],"isRoot":true},"nodeParts":{"55308b2d-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"55308b2d-0"},"55308b2d-3":{"renderedLength":6949,"gzipLength":1987,"brotliLength":0,"metaUid":"55308b2d-2"}},"nodeMetas":{"55308b2d-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"hooks.js":"55308b2d-1"},"imported":[{"uid":"55308b2d-4"},{"uid":"55308b2d-5"}],"importedBy":[{"uid":"55308b2d-2"}]},"55308b2d-2":{"id":"/src/hooks.ts","moduleParts":{"hooks.js":"55308b2d-3"},"imported":[{"uid":"55308b2d-4"},{"uid":"55308b2d-0"}],"importedBy":[],"isEntry":true},"55308b2d-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"55308b2d-2"},{"uid":"55308b2d-0"}]},"55308b2d-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"55308b2d-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/jsx-runtime.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"86b5580e-1","name":"jsx-runtime.ts"},{"uid":"86b5580e-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"86b5580e-1":{"renderedLength":5335,"gzipLength":1477,"brotliLength":0,"metaUid":"86b5580e-0"},"86b5580e-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"86b5580e-2"}},"nodeMetas":{"86b5580e-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"86b5580e-1"},"imported":[{"uid":"86b5580e-4"},{"uid":"86b5580e-5"}],"importedBy":[{"uid":"86b5580e-2"}]},"86b5580e-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"86b5580e-3"},"imported":[{"uid":"86b5580e-0"}],"importedBy":[],"isEntry":true},"86b5580e-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"86b5580e-0"}]},"86b5580e-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"86b5580e-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"b3ca1a27-1","name":"jsx-runtime.ts"},{"uid":"b3ca1a27-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"b3ca1a27-1":{"renderedLength":4264,"gzipLength":1270,"brotliLength":0,"metaUid":"b3ca1a27-0"},"b3ca1a27-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"b3ca1a27-2"}},"nodeMetas":{"b3ca1a27-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"b3ca1a27-1"},"imported":[{"uid":"b3ca1a27-4"},{"uid":"b3ca1a27-5"}],"importedBy":[{"uid":"b3ca1a27-2"}]},"b3ca1a27-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"b3ca1a27-3"},"imported":[{"uid":"b3ca1a27-0"}],"importedBy":[],"isEntry":true},"b3ca1a27-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"b3ca1a27-0"}]},"b3ca1a27-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"b3ca1a27-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/hooks.js

@@ -1,4 +1,4 @@
-import { onErrorCaptured, useContext } from "@pyreon/core";
+import { onErrorCaptured, shallowEqualProps, useContext } from "@pyreon/core";
 
 //#region src/jsx-runtime.ts
 let _currentCtx = null;
@@ -23,13 +23,6 @@ function depsChanged(a, b) {
 	for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return true;
 	return false;
 }
-function shallowEqual(a, b) {
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-	if (keysA.length !== keysB.length) return false;
-	for (const k of keysA) if (!Object.is(a[k], b[k])) return false;
-	return true;
-}
 /**
 * Preact-compatible `useState` — returns `[value, setter]`.
 * Triggers a component re-render when the setter is called.
@@ -190,7 +183,7 @@ function useId() {
 * so two `<MemoComp />` usages don't share memoization state.
 */
 function memo(component, areEqual) {
-	const compare = areEqual ?? shallowEqual;
+	const compare = areEqual ?? shallowEqualProps;
 	let _fallbackPrevProps = null;
 	let _fallbackPrevResult = null;
 	const memoized = (props) => {

package/lib/jsx-runtime.js

@@ -1,4 +1,4 @@
-import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
+import { Fragment, h, isNativeCompat, mapCompatDomProps, onUnmount } from "@pyreon/core";
 import { signal } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
@@ -141,35 +141,7 @@ function jsx(type, props, key) {
 		return h(wrapCompatComponent(type), componentProps);
 	}
 	const childArray = children === void 0 ? [] : Array.isArray(children) ? children : [children];
-	if (typeof type === "string") {
-		if (propsWithKey.className !== void 0) {
-			propsWithKey.class = propsWithKey.className;
-			delete propsWithKey.className;
-		}
-		if (propsWithKey.htmlFor !== void 0) {
-			propsWithKey.for = propsWithKey.htmlFor;
-			delete propsWithKey.htmlFor;
-		}
-		if ((type === "input" || type === "textarea" || type === "select") && propsWithKey.onChange !== void 0) {
-			if (propsWithKey.onInput === void 0) propsWithKey.onInput = propsWithKey.onChange;
-			delete propsWithKey.onChange;
-		}
-		if (propsWithKey.autoFocus !== void 0) {
-			propsWithKey.autofocus = propsWithKey.autoFocus;
-			delete propsWithKey.autoFocus;
-		}
-		if (type === "input" || type === "textarea") {
-			if (propsWithKey.defaultValue !== void 0 && propsWithKey.value === void 0) {
-				propsWithKey.value = propsWithKey.defaultValue;
-				delete propsWithKey.defaultValue;
-			}
-			if (propsWithKey.defaultChecked !== void 0 && propsWithKey.checked === void 0) {
-				propsWithKey.checked = propsWithKey.defaultChecked;
-				delete propsWithKey.defaultChecked;
-			}
-		}
-		delete propsWithKey.suppressHydrationWarning;
-	}
+	mapCompatDomProps(propsWithKey, type);
 	return h(type, propsWithKey, ...childArray);
 }
 const jsxs = jsx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/preact-compat",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Preact-compatible API shim for Pyreon — write Preact-style code that runs on Pyreon's reactive engine",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/preact-compat#readme",
   "bugs": {
@@ -64,13 +64,13 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.18.0",
-    "@pyreon/reactivity": "^0.18.0",
-    "@pyreon/runtime-dom": "^0.18.0"
+    "@pyreon/core": "^0.20.0",
+    "@pyreon/reactivity": "^0.20.0",
+    "@pyreon/runtime-dom": "^0.20.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/test-utils": "^0.13.5",
+    "@pyreon/test-utils": "^0.13.7",
     "@vitest/browser-playwright": "^4.1.4",
     "happy-dom": "^20.8.3"
   }

package/src/hooks.ts

@@ -9,7 +9,7 @@
  */
 
 import type { VNodeChild } from '@pyreon/core'
-import { onErrorCaptured, useContext } from '@pyreon/core'
+import { onErrorCaptured, shallowEqualProps as shallowEqual, useContext } from '@pyreon/core'
 import type { EffectEntry } from './jsx-runtime'
 import { getCurrentCtx, getHookIndex } from './jsx-runtime'
 
@@ -32,15 +32,7 @@ function depsChanged(a: unknown[] | undefined, b: unknown[] | undefined): boolea
   return false
 }
 
-function shallowEqual<P extends Record<string, unknown>>(a: P, b: P): boolean {
-  const keysA = Object.keys(a)
-  const keysB = Object.keys(b)
-  if (keysA.length !== keysB.length) return false
-  for (const k of keysA) {
-    if (!Object.is(a[k], b[k])) return false
-  }
-  return true
-}
+// `shallowEqual` lives in @pyreon/core (shared with @pyreon/react-compat).
 
 // ─── useState ────────────────────────────────────────────────────────────────
 

package/src/jsx-runtime.ts

@@ -10,7 +10,7 @@
  */
 
 import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
-import { Fragment, h, isNativeCompat, onUnmount } from '@pyreon/core'
+import { Fragment, h, isNativeCompat, mapCompatDomProps, onUnmount } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import type { Component } from './index'
 
@@ -251,49 +251,9 @@ export function jsx(
   // DOM element or symbol (Fragment): children go in vnode.children
   const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
 
-  // Map Preact-style attributes to standard HTML attributes
-  if (typeof type === 'string') {
-    if (propsWithKey.className !== undefined) {
-      propsWithKey.class = propsWithKey.className
-      delete propsWithKey.className
-    }
-    if (propsWithKey.htmlFor !== undefined) {
-      propsWithKey.for = propsWithKey.htmlFor
-      delete propsWithKey.htmlFor
-    }
-
-    // Preact's onChange fires on every keystroke for form elements (like onInput)
-    if (
-      (type === 'input' || type === 'textarea' || type === 'select') &&
-      propsWithKey.onChange !== undefined
-    ) {
-      if (propsWithKey.onInput === undefined) {
-        propsWithKey.onInput = propsWithKey.onChange
-      }
-      delete propsWithKey.onChange
-    }
-
-    // autoFocus → autofocus
-    if (propsWithKey.autoFocus !== undefined) {
-      propsWithKey.autofocus = propsWithKey.autoFocus
-      delete propsWithKey.autoFocus
-    }
-
-    // defaultValue / defaultChecked → value / checked when no controlled value
-    if (type === 'input' || type === 'textarea') {
-      if (propsWithKey.defaultValue !== undefined && propsWithKey.value === undefined) {
-        propsWithKey.value = propsWithKey.defaultValue
-        delete propsWithKey.defaultValue
-      }
-      if (propsWithKey.defaultChecked !== undefined && propsWithKey.checked === undefined) {
-        propsWithKey.checked = propsWithKey.defaultChecked
-        delete propsWithKey.defaultChecked
-      }
-    }
-
-    // Strip Preact-only props that have no DOM equivalent
-    delete propsWithKey.suppressHydrationWarning
-  }
+  // Map Preact-style attributes to standard HTML attributes.
+  // Shared with @pyreon/react-compat — see @pyreon/core/compat-shared.
+  mapCompatDomProps(propsWithKey, type)
 
   return h(type, propsWithKey, ...(childArray as VNodeChild[]))
 }