@octanejs/motion 0.1.0 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # @octanejs/motion
 
-[Framer Motion](https://motion.dev) for the [octane](https://github.com/octanejs/octane) renderer.
+[Framer Motion](https://motion.dev) for the [octane](https://github.com/octanejs/octane) UI framework.
 
 Motion separates a framework-agnostic animation engine (`animate`) and gesture
 primitives (`hover`, `press`) from its React components (`motion.div`,
@@ -86,3 +86,9 @@ FLIPs). Also drag momentum/elastic physics, reduced-motion enforcement, and
 Stagger specifics: `when: 'beforeChildren' | 'afterChildren'` parent/child sequencing
 is not implemented, and a child's stagger index is fixed at registration order (a
 keyed reorder does not re-stagger).
+
+## Status
+
+Current scope, known divergences, and verification status are tracked in the
+generated [bindings status table](../../docs/bindings-status.md), sourced from
+this package's [`status.json`](./status.json).

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@octanejs/motion",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "license": "MIT",
   "type": "module",
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
   "description": "Framer Motion bindings for the octane renderer — reuses motion-dom's animation engine, swaps the React components for octane host components.",
   "author": {
     "name": "Dominic Gannaway",
@@ -28,7 +35,7 @@
   },
   "dependencies": {
     "motion": "^12.0.0",
-    "octane": "0.1.1"
+    "octane": "0.1.4"
   },
   "devDependencies": {
     "vitest": "^4.1.9"

package/src/index.ts

@@ -171,7 +171,8 @@ function createMotionComponent(tag: string) {
 		});
 		provideContext(scope, StaggerContext, orch);
 
-		const node = hostComponent(scope, '_m', tag, domProps(props), props.children) as HTMLElement;
+		// Slot 0 of this component's own block (one hostComponent per motion instance).
+		const node = hostComponent(scope, 0, tag, domProps(props), props.children) as HTMLElement;
 
 		// Resolve a gesture/exit target to its values + its own (per-variant) transition,
 		// so a variant target carrying a `transition` key honors it (like `animate` does).

package/src/useAnimate.ts

@@ -5,8 +5,17 @@
 import { createScopedAnimate } from 'motion';
 import { useState, useEffect } from 'octane';
 
+// Memoized — runs per hook call per render; the cache returns the identical
+// Symbol.for-interned value without the concat + registry lookup.
+const subCache = new Map<symbol, Map<string, symbol>>();
 function sub(slot: symbol | undefined, tag: string): symbol | undefined {
-	return slot !== undefined ? Symbol.for((slot.description ?? '') + ':ua:' + tag) : undefined;
+	if (slot === undefined) return undefined;
+	let byTag = subCache.get(slot);
+	if (byTag === undefined) subCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined)
+		byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':ua:' + tag)));
+	return sym;
 }
 
 export function useAnimate(...args: any[]): [any, any] {

package/src/useMotionValue.ts

@@ -5,13 +5,21 @@
 import { motionValue } from 'motion';
 import { useState } from 'octane';
 
+// Memoized tagless sub-slot (single entry per caller slot) — same interned
+// Symbol.for value, minus the per-render concat + registry lookup.
+const mvSlotCache = new Map<symbol, symbol>();
+function mvSlot(slot: symbol | undefined): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let sym = mvSlotCache.get(slot);
+	if (sym === undefined)
+		mvSlotCache.set(slot, (sym = Symbol.for((slot.description ?? '') + ':mv')));
+	return sym;
+}
+
 export function useMotionValue<T>(initial: T, ...args: any[]): any {
 	const tail = args[args.length - 1];
 	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
-	const [mv] = useState(
-		() => motionValue(initial),
-		slot !== undefined ? Symbol.for((slot.description ?? '') + ':mv') : undefined,
-	);
+	const [mv] = useState(() => motionValue(initial), mvSlot(slot));
 	return mv;
 }
 

package/src/useMotionValueEvent.ts

@@ -5,8 +5,17 @@
 // which returns the unsubscribe fn (and, for 'change', stops idle animations).
 import { useInsertionEffect } from 'octane';
 
+// Memoized — runs per hook call per render; the cache returns the identical
+// Symbol.for-interned value without the concat + registry lookup.
+const subCache = new Map<symbol, Map<string, symbol>>();
 function sub(slot: symbol | undefined, tag: string): symbol | undefined {
-	return slot !== undefined ? Symbol.for((slot.description ?? '') + ':umve:' + tag) : undefined;
+	if (slot === undefined) return undefined;
+	let byTag = subCache.get(slot);
+	if (byTag === undefined) subCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined)
+		byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':umve:' + tag)));
+	return sym;
 }
 
 export function useMotionValueEvent(...args: any[]): void {

package/src/useScroll.ts

@@ -5,8 +5,17 @@
 import { motionValue, scroll } from 'motion';
 import { useState, useEffect } from 'octane';
 
+// Memoized — runs per hook call per render; the cache returns the identical
+// Symbol.for-interned value without the concat + registry lookup.
+const subCache = new Map<symbol, Map<string, symbol>>();
 function sub(slot: symbol | undefined, tag: string): symbol | undefined {
-	return slot !== undefined ? Symbol.for((slot.description ?? '') + ':us:' + tag) : undefined;
+	if (slot === undefined) return undefined;
+	let byTag = subCache.get(slot);
+	if (byTag === undefined) subCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined)
+		byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':us:' + tag)));
+	return sym;
 }
 
 export interface ScrollOptions {

package/src/useSpring.ts

@@ -9,8 +9,17 @@ import { motionValue, attachFollow } from 'motion';
 import { useState, useInsertionEffect } from 'octane';
 import { isMotionValue } from './useMotionValue';
 
+// Memoized — runs per hook call per render; the cache returns the identical
+// Symbol.for-interned value without the concat + registry lookup.
+const subCache = new Map<symbol, Map<string, symbol>>();
 function sub(slot: symbol | undefined, tag: string): symbol | undefined {
-	return slot !== undefined ? Symbol.for((slot.description ?? '') + ':usp:' + tag) : undefined;
+	if (slot === undefined) return undefined;
+	let byTag = subCache.get(slot);
+	if (byTag === undefined) subCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined)
+		byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':usp:' + tag)));
+	return sym;
 }
 
 export interface SpringOptions {

package/src/useTransform.ts

@@ -9,8 +9,17 @@
 import { transformValue, mapValue } from 'motion';
 import { useState, useEffect } from 'octane';
 
+// Memoized — runs per hook call per render; the cache returns the identical
+// Symbol.for-interned value without the concat + registry lookup.
+const subCache = new Map<symbol, Map<string, symbol>>();
 function sub(slot: symbol | undefined, tag: string): symbol | undefined {
-	return slot !== undefined ? Symbol.for((slot.description ?? '') + ':ut:' + tag) : undefined;
+	if (slot === undefined) return undefined;
+	let byTag = subCache.get(slot);
+	if (byTag === undefined) subCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined)
+		byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':ut:' + tag)));
+	return sym;
 }
 
 export function useTransform(...args: any[]): any {