tracked-instance 1.0.11 → 1.0.13

package/README.md

@@ -71,6 +71,7 @@ useTrackedInstance([1,2,3])
 ```
 
 ### Real-world example
+[Try on playground](https://play.vuejs.org/#eNqNVc1u00AQfpXBl7RSapfCAVlJVGh7KEiloj36srEn8TbrtbU/aaMoz4DEjROvgYTEw/AC8AjM7tqpaarSm+d/vplv1uvobdPES4tRGo10rnhjQKOxzSSTvGpqZWBtNV4rli+wOJfaMJnjBmaqrmBggvqAt/pBJjOZ1yTBumCGDSEvmZxjceoFrk+5MqshKKQaQxA185YNjGG3yN46kwCGG4EpDAZDJ62QqRSkFcKLXF/aqeC6xCKFGRMavbpAw7jQKfgMAEkCuqytKGCKYBvqDOlzta3vvDaZ3Oy79sk5uACX3HAmwCGBW24ohYGKLRBmtaqgcFgy2SUJ7XJq5KVvomv8ukQ4ZWoBHySfl6aP4+jw8M0uDqPs4zCoIOampsBWASBZ5WqclIprUzclKrioBZMDh9l3qRHbJWgCBBK1A79kwqIOWQh5D37YnmZLPGmjxrC3D+NJKLpF64YS+zQURtGjJLCHeEOCwaoRNEOSAEYFX07a3VPv644HsNmMEmfzTqWCJHxNrTG1hONc8HwxziLPliya/Pr64/f3z/DJiaMkePlyFOOxHms7rbiJG4VLlIZCezgoQcA74rKxppvg8qCqCxTk6xH5rWVRZzWrBslk8I4aaMn0VJpY2mqKqsvm1ryTLLg8K12Xp8ePnXR5ifliWt/1Ez4jZUuuuCNV7Kj0X+Bt4jD7B75h+Pcp0oJrNhVYkO1Fu/LO2oIG+PPty0+4oi11JG0r3K/XCW673abLo0nYaOEPMx0lpPEWWvuE2NV7cjzDnNrxs8fJaBiFx+2gYk18o2tJz5/nd9YaiC7bM6MxPHjnnDGLSmManSaJlc1iHud1lez6dbdFFY2m25rx+YN6FNdwgepjYzjd3j91mRD17Xuv274KPsbt/BH9jSYauNYu3c2oJTWwtRmm5u6MnPns6sIvdmskaljH+yeMdHa1sK7H4PbOyoLa7vn5bs/9+LicX+uzO4NSd6Bco34a3j+L6J9z8gT0+3Zfxa+3U9z8BYQrOQM=)
 ```vue
 <script setup>
   import {useTrackedInstance} from 'tracked-instance'
@@ -78,28 +79,66 @@ useTrackedInstance([1,2,3])
   const {data, changedData, isDirty, reset, loadData} = useTrackedInstance({
     title: '',
     year: null,
-    isPublished: false
+    isPublished: false,
+    details: {
+      // should be updated by loadData
+    }
   })
 
+  // update initial data without make form dirty
   loadData({
     id: 1,
     title: 'The Dark Knight',
     year: 2008,
-    isPublished: true
+    isPublished: true,
+    details: {
+      director: {
+        name: 'Christopher Nolan' // form see changes in nested values
+      }
+    }
   })
+
+  const saveChanges = () => {
+    loadData(data.value)
+  }
 </script>
 
 <template>
-  <button @click="reset">reset</button>
-
-  <form @submit.prevent="console.log(changedData.value)">
-    <input v-model="data.title" type="text">
-    <input v-model.number="data.year" type="text">
-    <input v-model="data.isPublished" type="checkbox">
-
-    <button type="submit" :disabled="!isDirty">Show changed data</button>
+  <div>isDirty: {{ isDirty }}</div>
+  <hr />
+  <button @click="reset">♻️ Reset</button>
+
+  <form @submit.prevent="saveChanges">
+    <input
+      v-model="data.title"
+      type="text"
+    />
+    <input
+      v-model.number="data.year"
+      type="number"
+    />
+    <input
+      v-model="data.isPublished"
+      type="checkbox"
+    />
+
+    <input
+      v-model="data.details.director.name"
+      type="text"
+    />
+
+    <button
+      type="submit"
+      :disabled="!isDirty"
+    >
+      💾 Save changes
+    </button>
   </form>
+
+  <h2>Changed data:</h2>
+  <pre>{{ changedData }}</pre>
 </template>
+
 ```
 
 ## Collection
@@ -148,46 +187,72 @@ console.log(items.value[0].meta.isValidName.value) // false
 ```
 
 ### Real-world example
+[Try on playground](https://play.vuejs.org/#eNp9VcFy0zAQ/ZWtL3ZnUvsAp5BmKG0P9FCYFk6Yg2sriRpZ9khymk7G38DADMNwob/BDDN8DD9AP4GVZDuym3BJLO1q973dp9XGOynLcFURb+xNZCpoqUASVZXTmNO8LISCjSCzGmaiyMFHR39rqCQ5LRgjqaIFb12USNIlyY4olyrhqfaPeVrgCjZUnlGh7keQZNkIqCK5HIEgebEi+h8Tj4AVSXaWqKSGY+glCA51pNYcfNjwJCdj8C8wn1+PoFsXC95fE7/+aA5bGJzcvZdEXKIZcyC7wPcds0xW5HSR8DmRaA4O4XgKm5hDhyzQC7Dww1XCKmI3AMIZZYqIQJv0sQP9EVJ5ZShm1hlTNd55UgbG1+Swvk3VwgwTOf74U8d8EtkWYXNwgf4lSxTBFcDkplKqwG0deZxRmdwwkh3H3kFT9Niztpcpo+kSDQ5PazNxAB4fvvyGazRC2lh1+MjGd3NtQ5nWxd70z/dff39+giu97J9YCIgMavzO6GragBrDZgPNN9T1JNI2x80iOsky3TQtBzG2WxPKy0q1lVwd5UVGGCJxetsSBlD3JUGbImsEaTc1GBNnSAWVGTTKcWLVhy8GsvF9zffHVwNOA+vzdYlUrE3WdgwBzwqB2Uz38SbwjKwP8c+KCiO30CeMojOdmUbuEJPjOixKvzD71BVqrttS7SmXW7KdZbOXOLBEENTjw7fPqAO92StM73gfaY/kJblrCbpeXb4+HaM/nA+Or5MNwNWlg+IpMJPYinKAA9XZ9SRitO1o1L+Ekem1/my6ZBtqROvowDTVKsCMirbx7fwIqJ0IT0fHtt0dxj09dQEPu7VLSajpWcKkVlRbLhy9NzhcB3Xq6DdsezXwRp59HY5wuIW3suD4sJjpiVmNAdWNBbahUGSD10IbY2+hVCnHUVTxcjkP0yKPnvrpCMiwxoxK4uSe0fkgH54rKSPiTamfj37ehLHi7sLsKVGRUbufLki63LF/K9cW2lutNbFCAJ1NJWKux582n19fmmvTGfH+VayhtceIsixYpTFat1cVzxC242fQvjblo3z+Tp6vFeGyJaWBmmoY/9jDR/r0P9S3cJ+Fz7sq1v8AiAKmmg==)
 ```vue
 <script setup>
-import {ref} from 'vue'
-import {useCollection} from 'tracked-instance'
+  import {ref} from 'vue'
+  import {useCollection} from 'tracked-instance'
 
-const {isDirty, add, items, remove, reset, loadData} = useCollection()
+  const {isDirty, add, items, remove, reset, loadData} = useCollection()
 
-loadData([{name: 'Jack'}, {name: 'John'}, {name: 'Joe'}])
+  loadData([{name: 'Jack'}, {name: 'John'}, {name: 'Joe'}])
+
+  const newUserName = ref('')
 
-const newUserName = ref('')
+  const saveChanges = () => {
+    loadData(
+      items.value
+        .filter(item => !item.isRemoved.value)
+        .map((item) => item.instance.data.value)
+    )
+  }
 </script>
 
 <template>
+  <button
+    :disabled="!isDirty"
+    @click="saveChanges"
+  >
+    💾 Save changes
+  </button>
+  <button @click="reset">♻️ Reset</button>
+  <hr />
+
+  <div>isDirty: {{ isDirty }}</div>
+
   <div>
-    isDirty: {{isDirty}}
+    Add new user:
+    <input
+      v-model="newUserName"
+      type="text"
+    />
+    <button @click="add({name: newUserName}); newUserName = ''">➕ Add user</button>
   </div>
 
-  <button @click="reset">Reset</button>
-  
- <div>
-   Add new user:
-   <input v-model="newUserName" type="text">
-   <button @click="add({name: newUserName})">➕ Add user</button>
- </div>
-
   <ul>
     <template v-for="(item, index) in items">
-      <li v-if="!item.isRemoved">
-        <input v-model="item.instance.data.value.name" type="text">
-        <button @click="remove(index)">♻️ Rollback</button>
+      <li v-if="!item.isRemoved.value">
+        <input
+          v-model="item.instance.data.value.name"
+          type="text"
+        />
         <button @click="remove(index)">🗑 Remove</button>
+        <button
+          v-if="!item.isNew.value"
+          @click="item.instance.reset()"
+        >
+          ♻️ Reset
+        </button>
+        isNew: {{ item.isNew.value }}
       </li>
     </template>
   </ul>
 
   Removed items:
   <ul>
-    <li v-for="item in items.filter()">
-      {{item.instance.data.name}}
-      <button @click="item.isRemoved = false">♻️ Rollback</button>
+    <li v-for="item in items.filter((i) => i.isRemoved.value)">
+      {{ item.instance.data.value.name }}
+      <button @click="item.isRemoved.value = false">♻️ Rollback</button>
     </li>
   </ul>
 </template>

package/dist/index.mjs

@@ -708,7 +708,10 @@ function unset(object, path) {
 var unset_default = unset;
 
 // src/tracked-instance.ts
-import { computed, customRef } from "vue";
+import { computed } from "vue";
+
+// src/utils.ts
+import { customRef } from "vue";
 var isObject2 = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date) && !(value instanceof File) && !(value instanceof Map) && !(value instanceof Set);
 var isEmpty = (value) => Object.keys(value).length === 0;
 var iterateObject = function* (source, params = {}) {
@@ -765,6 +768,8 @@ var createNestedRef = (source, handler) => customRef((track, trigger) => {
     }
   };
 });
+
+// src/tracked-instance.ts
 var ArrayInOriginalData = class {
   length;
   constructor(length) {
@@ -845,7 +850,7 @@ var snapshotValueToOriginalData = (originalData, path, value) => {
     }
   }
 };
-var useTrackedInstance = (initialData) => {
+function useTrackedInstance(initialData) {
   const _originalData = createNestedRef({}, (path) => ({
     deleteProperty(target, property) {
       const result = Reflect.deleteProperty(target, property);
@@ -941,11 +946,11 @@ var useTrackedInstance = (initialData) => {
     loadData,
     reset
   };
-};
+}
 
 // src/collection.ts
-import { computed as computed2, shallowRef, triggerRef, ref } from "vue";
-var useCollection = (createItemMeta = () => ({})) => {
+import { computed as computed2, ref, shallowRef, triggerRef } from "vue";
+var useCollection = (createItemMeta = () => void 0) => {
   const items = shallowRef([]);
   const isDirty = computed2(
     () => items.value.some(({ instance, isRemoved, isNew }) => instance.isDirty.value || isNew.value || isRemoved.value)

package/dist/types/collection.d.ts

@@ -0,0 +1,17 @@
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { TrackedInstance } from './tracked-instance';
+export interface CollectionItem<Item, Meta> {
+    instance: TrackedInstance<Item>;
+    meta: Meta;
+    isRemoved: Ref<boolean>;
+    isNew: Ref<boolean>;
+}
+export interface Collection<Item, Meta> {
+    items: ShallowRef<CollectionItem<Item, Meta>[]>;
+    isDirty: ComputedRef<boolean>;
+    add: (item: Item, afterIndex?: number) => CollectionItem<Item, Meta>;
+    remove: (index: number, isHardRemove?: boolean) => void;
+    loadData: (items: Item[]) => void;
+    reset: () => void;
+}
+export declare const useCollection: <Item = any, Meta = any>(createItemMeta?: (instance: TrackedInstance<Item>) => Meta) => Collection<Item, Meta>;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { TrackedInstance } from './tracked-instance';
+export type { Collection, CollectionItem } from './collection';
+export { useTrackedInstance } from './tracked-instance';
+export { useCollection } from './collection';

package/dist/types/tracked-instance.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+import { DeepPartial } from './utils';
+export interface TrackedInstance<Data> {
+    data: Ref<Data>;
+    isDirty: Ref<boolean>;
+    changedData: Ref<DeepPartial<Data>>;
+    loadData: (newData: Data) => void;
+    reset: () => void;
+}
+export declare function useTrackedInstance<Data = any>(): TrackedInstance<Data | undefined>;
+export declare function useTrackedInstance<Data>(value: Data): TrackedInstance<Data>;

package/dist/types/utils.d.ts

@@ -0,0 +1,15 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export interface NestedProxyPathItem {
+    target: Record<string, any>;
+    property: string;
+    receiver?: Record<string, any>;
+}
+export declare const isObject: (value: unknown) => boolean;
+export declare const isEmpty: (value: object) => boolean;
+export declare const iterateObject: (source: Record<string, any>, params?: {
+    goDeepCondition?: ((path: string[], value: any) => boolean) | undefined;
+    includeParent?: boolean | undefined;
+}) => Generator<[string[], any], void, unknown>;
+export declare const createNestedRef: <Source extends Record<string, any>>(source: Source, handler: <InnerSource extends Record<string, any>>(path: NestedProxyPathItem[]) => ProxyHandler<InnerSource>) => import("vue").Ref<Source>;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "tracked-instance",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Build large forms and track all changes",
   "type": "module",
   "scripts": {
-    "build": "esbuild ./src/index.ts --bundle --external:vue --outfile=./dist/index.mjs --format=esm",
+    "build": "tsc && esbuild ./src/index.ts --bundle --external:vue --outfile=./dist/index.mjs --format=esm",
     "test": "vitest run"
   },
   "main": "./dist/index.mjs",