@thednp/tween 0.0.1 → 0.0.3

package/dist/vue/vue.d.mts

@@ -0,0 +1,61 @@
+/*!
+* @thednp/tween composables for Vue v0.0.3 (https://github.com/thednp/tween)
+* Copyright 2026 © thednp
+* Licensed under MIT (https://github.com/thednp/tween/blob/master/LICENSE)
+*/
+"use strict";
+
+import { Timeline, Tween, TweenProps } from "@thednp/tween";
+
+//#region src/vue/miniStore.d.ts
+declare function miniStore<T extends TweenProps>(init: T): T;
+//#endregion
+//#region src/vue/index.d.ts
+/**
+ * Vue composable for updating values with Tween.
+ *
+ * @param initialValues - Initial tween values
+ * @returns [store, tween] Tuple of reactive store and Tween instance
+ *
+ * @example
+ * <script setup lang="ts">
+ *    const [state, tween] = useTween({ x: 0, y: 0 })
+ *
+ *    // configuration is free-form, no re-render ever happens
+ *    tween.to({ x: 100, y: 100 })
+ *
+ *    onMounted(() => {
+ *      tween.start()
+ *    })
+ * </script>
+ * <template>
+ *  <div :style="{ translate: `${state.x}px ${state.y}px` }" />
+ * </template>
+ */
+declare function useTween<T extends TweenProps>(initialValues: T): readonly [T, Tween<T>];
+/**
+ * Vue composable for sequencing values update with Timeline.
+ *
+ * @param initialValues - Initial tween values
+ * @returns [store, timeline] Tuple of reactive store and Timeline instance
+ *
+ * @example
+ * <script setup lang="ts">
+ *    const [state, timeline] = useTimeline({ x: 0, y: 0 })
+ *
+ *    // configuration is free-form
+ *    timeline.to({ x: 100, y: 100 })
+ *
+ *    onMounted(() => {
+ *      timeline.start()
+ *    })
+ * </script>
+ *
+ * <template>
+ *  <div :style="{ translate: `${state.x}px ${state.y}px` }" />
+ * </template>
+ */
+declare function useTimeline<T extends TweenProps>(initialValues: T): readonly [T, Timeline<T>];
+//#endregion
+export { Timeline, Tween, miniStore, useTimeline, useTween };
+//# sourceMappingURL=vue.d.mts.map

package/dist/vue/vue.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.mts","names":[],"sources":["../../src/vue/miniStore.ts","../../src/vue/index.ts"],"mappings":";;;;;;;;;;iBA4HgB,SAAA,WAAoB,UAAA,CAAA,CAAY,IAAA,EAAM,CAAA,GAChB,CAAA;;;AADtC;;;;;;;;;;;;;;;;;;AC3FA;;;AD2FA,iBC3FgB,QAAA,WAAmB,UAAA,CAAA,CAAY,aAAA,EAAe,CAAA,aAAC,CAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AAqC/D;;;;;;;iBAAgB,WAAA,WAAsB,UAAA,CAAA,CAAY,aAAA,EAAe,CAAA,aAAC,CAAA,EAAA,QAAA,CAAA,CAAA"}

package/dist/vue/vue.mjs

@@ -0,0 +1,157 @@
+/*!
+* @thednp/tween composables for Vue v0.0.3 (https://github.com/thednp/tween)
+* Copyright 2026 © thednp
+* Licensed under MIT (https://github.com/thednp/tween/blob/master/LICENSE)
+*/
+"use strict";
+
+import { Timeline, Tween, dummyInstance, isArray, isPlainObject, isServer, objectHasProp } from "@thednp/tween";
+import { onUnmounted, ref } from "vue";
+
+//#region src/vue/miniStore.ts
+const STATE_PROXY = "_proxy";
+const proxyProps = {
+	value: 1,
+	enumerable: false,
+	configurable: false,
+	writable: false
+};
+function defineArrayProxy(index, value, target, sourceLen, notifyListeners) {
+	const itemIsLast = index === sourceLen - 1;
+	if (isArray(value)) {
+		const subArray = [];
+		const valueLen = value.length;
+		value.forEach((itm, idx) => {
+			const subItemIsLast = itemIsLast && idx === valueLen - 1;
+			let currentItem = itm;
+			Object.defineProperty(subArray, idx, {
+				get: () => currentItem,
+				set: (newValue) => {
+					currentItem = newValue;
+					if (subItemIsLast) notifyListeners();
+				},
+				enumerable: true
+			});
+		});
+		target[index] = subArray;
+	} else {
+		let currentValue = value;
+		const getter = () => currentValue;
+		const setter = (newVal) => {
+			currentValue = newVal;
+			if (itemIsLast) notifyListeners();
+		};
+		Object.defineProperties(target, { [index]: {
+			get: getter,
+			set: setter,
+			enumerable: true
+		} });
+	}
+}
+function defineStateProxy(key, value, target) {
+	const state = ref(value);
+	let getter = () => state.value;
+	let setter;
+	if (isArray(value)) {
+		const arrayProxy = [];
+		const valLength = value.length;
+		const version = ref(0);
+		for (let i = 0; i < valLength; i++) defineArrayProxy(i, value[i], arrayProxy, valLength, () => {
+			version.value = 1 - version.value;
+		});
+		getter = () => {
+			version.value;
+			return state.value;
+		};
+		state.value = arrayProxy;
+	} else setter = (newVal) => {
+		state.value = newVal;
+	};
+	Object.defineProperties(target, {
+		[STATE_PROXY]: proxyProps,
+		[key]: {
+			get: getter,
+			set: setter,
+			enumerable: true
+		}
+	});
+}
+function createMiniState(obj, parentReceiver) {
+	if (objectHasProp(obj, STATE_PROXY)) return obj;
+	for (const [key, value] of Object.entries(obj)) if (isPlainObject(value)) parentReceiver[key] = createMiniState(value, {});
+	else defineStateProxy(key, value, parentReceiver);
+	return parentReceiver;
+}
+function miniStore(init) {
+	return createMiniState(init, {});
+}
+
+//#endregion
+//#region src/vue/index.ts
+/**
+* Vue composable for updating values with Tween.
+*
+* @param initialValues - Initial tween values
+* @returns [store, tween] Tuple of reactive store and Tween instance
+*
+* @example
+* <script setup lang="ts">
+*    const [state, tween] = useTween({ x: 0, y: 0 })
+*
+*    // configuration is free-form, no re-render ever happens
+*    tween.to({ x: 100, y: 100 })
+*
+*    onMounted(() => {
+*      tween.start()
+*    })
+* <\/script>
+* <template>
+*  <div :style="{ translate: `${state.x}px ${state.y}px` }" />
+* </template>
+*/
+function useTween(initialValues) {
+	if (isServer) return [initialValues, dummyInstance];
+	const store = miniStore(initialValues);
+	const tween = new Tween(store);
+	onUnmounted(() => {
+		tween.stop();
+		tween.clear();
+	});
+	return [store, tween];
+}
+/**
+* Vue composable for sequencing values update with Timeline.
+*
+* @param initialValues - Initial tween values
+* @returns [store, timeline] Tuple of reactive store and Timeline instance
+*
+* @example
+* <script setup lang="ts">
+*    const [state, timeline] = useTimeline({ x: 0, y: 0 })
+*
+*    // configuration is free-form
+*    timeline.to({ x: 100, y: 100 })
+*
+*    onMounted(() => {
+*      timeline.start()
+*    })
+* <\/script>
+*
+* <template>
+*  <div :style="{ translate: `${state.x}px ${state.y}px` }" />
+* </template>
+*/
+function useTimeline(initialValues) {
+	if (isServer) return [initialValues, dummyInstance];
+	const store = miniStore(initialValues);
+	const timeline = new Timeline(store);
+	onUnmounted(() => {
+		timeline.stop();
+		timeline.clear();
+	});
+	return [store, timeline];
+}
+
+//#endregion
+export { Timeline, Tween, miniStore, useTimeline, useTween };
+//# sourceMappingURL=vue.mjs.map

package/dist/vue/vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.mjs","names":[],"sources":["../../src/vue/miniStore.ts","../../src/vue/index.ts"],"sourcesContent":["import { ref } from \"vue\";\nimport {\n  type ArrayVal,\n  isArray,\n  isPlainObject,\n  objectHasProp,\n  type TweenProps,\n} from \"@thednp/tween\";\n\nconst STATE_PROXY = \"_proxy\";\nconst proxyProps = {\n  value: 1,\n  enumerable: false,\n  configurable: false,\n  writable: false,\n};\n\nfunction defineArrayProxy<T extends ArrayVal>(\n  index: number,\n  value: T[number] | ArrayVal,\n  target: T | ArrayVal | ArrayVal[],\n  sourceLen: number,\n  notifyListeners: () => void,\n) {\n  const itemIsLast = index === sourceLen - 1;\n\n  if (isArray(value)) {\n    const subArray: typeof value = [];\n    const valueLen = value.length;\n\n    value.forEach((itm, idx) => {\n      const subItemIsLast = itemIsLast && idx === valueLen - 1;\n\n      let currentItem = itm;\n      Object.defineProperty(subArray, idx, {\n        get: () => currentItem,\n        set: (newValue: typeof itm) => {\n          currentItem = newValue;\n\n          // Only notify on last element to batch updates\n          if (subItemIsLast) {\n            notifyListeners();\n          }\n        },\n        enumerable: true,\n      });\n    });\n    target[index] = subArray;\n  } else {\n    let currentValue = value;\n    const getter = () => currentValue;\n    const setter = (newVal: typeof value) => {\n      currentValue = newVal;\n      if (itemIsLast) {\n        notifyListeners();\n      }\n    };\n    Object.defineProperties(target, {\n      [index]: {\n        get: getter,\n        set: setter,\n        enumerable: true,\n      },\n    });\n  }\n}\n\nfunction defineStateProxy<T extends Omit<TweenProps, \"_proxy\">>(\n  key: number | keyof T,\n  value: T[keyof T] | ArrayVal,\n  target: T | ArrayVal,\n) {\n  const state = ref(value);\n  let getter = () => state.value;\n  let setter;\n\n  if (isArray(value)) {\n    const arrayProxy: typeof value = [];\n    const valLength = value.length;\n    const version = ref(0);\n    for (let i = 0; i < valLength; i++) {\n      defineArrayProxy(i, (value as ArrayVal)[i], arrayProxy, valLength, () => {\n        version.value = 1 - version.value;\n      });\n    }\n    getter = () => {\n      version.value;\n      return state.value;\n    };\n\n    state.value = arrayProxy;\n  } else {\n    setter = (newVal: typeof value) => {\n      state.value = newVal;\n    };\n  }\n\n  Object.defineProperties(target, {\n    [STATE_PROXY]: proxyProps,\n    [key]: {\n      get: getter,\n      set: setter,\n      enumerable: true,\n    },\n  });\n}\n\nfunction createMiniState<T extends TweenProps>(\n  obj: T,\n  parentReceiver: TweenProps | number[] | [string, ...number[]][],\n) {\n  if (objectHasProp(obj, STATE_PROXY)) return obj;\n\n  for (const [key, value] of Object.entries(obj)) {\n    if (isPlainObject(value)) {\n      (parentReceiver as TweenProps)[key] = createMiniState(value, {});\n    } else {\n      defineStateProxy(key, value, parentReceiver);\n    }\n  }\n\n  return parentReceiver as T;\n}\n\nexport function miniStore<T extends TweenProps>(init: T) {\n  return createMiniState(init, {}) as T;\n}\n","import {\n  dummyInstance,\n  isServer,\n  Timeline,\n  Tween,\n  type TweenProps,\n} from \"@thednp/tween\";\nimport { onUnmounted } from \"vue\";\nimport { miniStore } from \"./miniStore.ts\";\n\nexport { miniStore, Timeline, Tween };\n\n/**\n * Vue composable for updating values with Tween.\n *\n * @param initialValues - Initial tween values\n * @returns [store, tween] Tuple of reactive store and Tween instance\n *\n * @example\n * <script setup lang=\"ts\">\n *    const [state, tween] = useTween({ x: 0, y: 0 })\n *\n *    // configuration is free-form, no re-render ever happens\n *    tween.to({ x: 100, y: 100 })\n *\n *    onMounted(() => {\n *      tween.start()\n *    })\n * </script>\n * <template>\n *  <div :style=\"{ translate: `${state.x}px ${state.y}px` }\" />\n * </template>\n */\nexport function useTween<T extends TweenProps>(initialValues: T) {\n  if (isServer) {\n    return [initialValues, dummyInstance as unknown as Tween<T>] as const;\n  }\n  const store = miniStore(initialValues);\n  const tween = new Tween(store);\n\n  onUnmounted(() => {\n    tween.stop();\n    tween.clear();\n  });\n\n  return [store, tween] as [T, Tween<T>];\n}\n\n/**\n * Vue composable for sequencing values update with Timeline.\n *\n * @param initialValues - Initial tween values\n * @returns [store, timeline] Tuple of reactive store and Timeline instance\n *\n * @example\n * <script setup lang=\"ts\">\n *    const [state, timeline] = useTimeline({ x: 0, y: 0 })\n *\n *    // configuration is free-form\n *    timeline.to({ x: 100, y: 100 })\n *\n *    onMounted(() => {\n *      timeline.start()\n *    })\n * </script>\n *\n * <template>\n *  <div :style=\"{ translate: `${state.x}px ${state.y}px` }\" />\n * </template>\n */\nexport function useTimeline<T extends TweenProps>(initialValues: T) {\n  if (isServer) {\n    return [initialValues, dummyInstance as unknown as Timeline<T>] as const;\n  }\n  const store = miniStore(initialValues);\n  const timeline = new Timeline(store);\n\n  onUnmounted(() => {\n    timeline.stop();\n    timeline.clear();\n  });\n\n  return [store, timeline] as [T, Timeline<T>];\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,aAAa;CACjB,OAAO;CACP,YAAY;CACZ,cAAc;CACd,UAAU;CACX;AAED,SAAS,iBACP,OACA,OACA,QACA,WACA,iBACA;CACA,MAAM,aAAa,UAAU,YAAY;AAEzC,KAAI,QAAQ,MAAM,EAAE;EAClB,MAAM,WAAyB,EAAE;EACjC,MAAM,WAAW,MAAM;AAEvB,QAAM,SAAS,KAAK,QAAQ;GAC1B,MAAM,gBAAgB,cAAc,QAAQ,WAAW;GAEvD,IAAI,cAAc;AAClB,UAAO,eAAe,UAAU,KAAK;IACnC,WAAW;IACX,MAAM,aAAyB;AAC7B,mBAAc;AAGd,SAAI,cACF,kBAAiB;;IAGrB,YAAY;IACb,CAAC;IACF;AACF,SAAO,SAAS;QACX;EACL,IAAI,eAAe;EACnB,MAAM,eAAe;EACrB,MAAM,UAAU,WAAyB;AACvC,kBAAe;AACf,OAAI,WACF,kBAAiB;;AAGrB,SAAO,iBAAiB,QAAQ,GAC7B,QAAQ;GACP,KAAK;GACL,KAAK;GACL,YAAY;GACb,EACF,CAAC;;;AAIN,SAAS,iBACP,KACA,OACA,QACA;CACA,MAAM,QAAQ,IAAI,MAAM;CACxB,IAAI,eAAe,MAAM;CACzB,IAAI;AAEJ,KAAI,QAAQ,MAAM,EAAE;EAClB,MAAM,aAA2B,EAAE;EACnC,MAAM,YAAY,MAAM;EACxB,MAAM,UAAU,IAAI,EAAE;AACtB,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,IAC7B,kBAAiB,GAAI,MAAmB,IAAI,YAAY,iBAAiB;AACvE,WAAQ,QAAQ,IAAI,QAAQ;IAC5B;AAEJ,iBAAe;AACb,WAAQ;AACR,UAAO,MAAM;;AAGf,QAAM,QAAQ;OAEd,WAAU,WAAyB;AACjC,QAAM,QAAQ;;AAIlB,QAAO,iBAAiB,QAAQ;GAC7B,cAAc;GACd,MAAM;GACL,KAAK;GACL,KAAK;GACL,YAAY;GACb;EACF,CAAC;;AAGJ,SAAS,gBACP,KACA,gBACA;AACA,KAAI,cAAc,KAAK,YAAY,CAAE,QAAO;AAE5C,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,CAC5C,KAAI,cAAc,MAAM,CACtB,CAAC,eAA8B,OAAO,gBAAgB,OAAO,EAAE,CAAC;KAEhE,kBAAiB,KAAK,OAAO,eAAe;AAIhD,QAAO;;AAGT,SAAgB,UAAgC,MAAS;AACvD,QAAO,gBAAgB,MAAM,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AC5FlC,SAAgB,SAA+B,eAAkB;AAC/D,KAAI,SACF,QAAO,CAAC,eAAe,cAAqC;CAE9D,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,QAAQ,IAAI,MAAM,MAAM;AAE9B,mBAAkB;AAChB,QAAM,MAAM;AACZ,QAAM,OAAO;GACb;AAEF,QAAO,CAAC,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAyBvB,SAAgB,YAAkC,eAAkB;AAClE,KAAI,SACF,QAAO,CAAC,eAAe,cAAwC;CAEjE,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,WAAW,IAAI,SAAS,MAAM;AAEpC,mBAAkB;AAChB,WAAS,MAAM;AACf,WAAS,OAAO;GAChB;AAEF,QAAO,CAAC,OAAO,SAAS"}

package/package.json

@@ -1,34 +1,27 @@
 {
   "name": "@thednp/tween",
-  "version": "0.0.1",
-  "description": "✨ A Typescript sourced tweening engine with Tween and Timeline",
+  "version": "0.0.3",
+  "description": "🌸 A Typescript sourced tweening engine with Tween and Timeline",
   "homepage": "https://github.com/thednp/tween",
   "author": "thednp",
   "license": "MIT",
   "type": "module",
-  "browser": "./dist/index.iife.js",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "sideEffects": false,
+  "browser": "./dist/tween.min.js",
+  "types": "./dist/tween/index.d.mts",
   "files": [
-    "wiki",
     "dist",
     "package.json",
     "README.md",
     "LICENSE"
   ],
   "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
-    },
-    "./react": {
-      "require": "./dist/react.cjs",
-      "import": "./dist/react.mjs"
-    },
-    "./solid": {
-      "require": "./dist/solid.cjs",
-      "import": "./dist/solid.mjs"
-    },
+    ".": "./dist/tween/index.mjs",
+    "./preact": "./dist/preact/preact.mjs",
+    "./react": "./dist/react/react.mjs",
+    "./solid": "./dist/solid/solid.mjs",
+    "./svelte": "./dist/svelte/tween.svelte.js",
+    "./vue": "./dist/vue/vue.mjs",
     "./package.json": "./package.json"
   },
   "bugs": {
@@ -45,6 +38,11 @@
   "keywords": [
     "tween",
     "timeline",
+    "react",
+    "solid-js",
+    "svelte",
+    "preact",
+    "vue",
     "cubic-bezier",
     "cubic-tween",
     "easing",
@@ -53,44 +51,55 @@
     "animation engine",
     "animation",
     "animations",
+    "SSR",
+    "server-side rendering",
     "typescript"
   ],
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.1",
-    "@types/node": "^25.0.6",
-    "@vitest/coverage-istanbul": "^4.0.17",
-    "@vitest/ui": "^4.0.17",
-    "happy-dom": "^20.1.0",
-    "tsdown": "0.20.0-beta.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-istanbul": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "happy-dom": "^20.6.1",
+    "react-dom": "^19.2.4",
+    "rollup-plugin-svelte": "^7.2.3",
+    "svelte-preprocess": "^6.0.3",
+    "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-strip-comments": "^0.0.6",
-    "vitest": "^4.0.17"
+    "vite-plugin-strip-comments": "^0.0.9",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "@thednp/dommatrix": "^3.0.2",
+    "preact": "^10.28.3",
+    "react": "^19.2.4",
+    "solid-js": "^1.9.11",
+    "svelte": "^5.51.2",
+    "vue": "^3.5.28"
   },
   "packageManager": "pnpm@8.6.12",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.6.0"
   },
-  "dependencies": {
-    "@types/react": "^19.2.8",
-    "react": "^19.2.3",
-    "solid-js": "^1.9.10"
-  },
-  "types": "./dist/index.d.cts",
   "scripts": {
     "pre-test": "pnpm clean-coverage",
     "clean-coverage": "rm -rf coverage .nyc_output",
-    "test": "pnpm pre-test && vitest",
-    "test-ui": "pnpm pre-test && vitest --ui",
-    "badges": "npx -p dependency-version-badge update-badge typescript vitest vite",
+    "test": "vitest",
+    "test-ui": "vitest --ui",
     "format": "deno fmt src",
-    "lint": "pnpm lint:ts && pnpm lint:types",
+    "lint": "pnpm lint:ts",
     "lint:ts": "deno lint src",
     "lint:types": "tsc --noEmit",
     "fix:ts": "deno lint src --fix",
-    "build_": "vite build",
-    "build": "tsdown && vite build"
+    "build_": "tsdown && vite build",
+    "build": "tsdown",
+    "clean:playground": "rm -rf playground/**/node_modules playground/**/package-lock.json playground/**/pnpm-lock.yaml playground/**/bun.lockb playground/**/deno.lock",
+    "clean:test": "rm -rf test/node_modules test/package-lock.json test/pnpm-lock.yaml test/bun.lockb test/deno.lock",
+    "clean": "rm -rf node_modules && pnpm clean:playground && pnpm clean:test",
+    "update-r": "pnpm clean && pnpm update -r --latest",
+    "update-deps": "pnpm clean && pnpm update --latest"
   }
 }