@octanejs/motion 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/motion",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "type": "module",
   "description": "Framer Motion bindings for the octane renderer — reuses motion-dom's animation engine, swaps the React components for octane host components.",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "motion": "^12.0.0",
-    "octane": "0.1.1"
+    "octane": "0.1.3"
   },
   "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 {