tracked-instance 1.0.0

package/.github/workflows/tests.yaml

@@ -0,0 +1,22 @@
+name: Run tests
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run test

package/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="nodeInterpreterTextField" value="$USER_HOME$/.nvm/versions/node/v20.11.0/bin/node" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/tracked-instance.iml" filepath="$PROJECT_DIR$/.idea/tracked-instance.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/tracked-instance.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present Dmytro Rudnyk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,217 @@
+
+
+# 🚀 Features
+- 🕶 Track what changed in your form
+- 🌎 Send on backend only fields which changed
+- 📦 Build multiple requests only for items that have been changed/removed/added
+- 🦾 Type Strong: Written in TypeScript
+
+# Description
+Build large forms and send all requests in one take.
+Combination of useTrackedInstance and useCollection can manage very large form with entities which deeply related each other.
+You can control what data should be sent to the server so that only what has changed is sent.
+
+#  Install
+> npm i tracked-instance
+
+# Support
+Supports Vue 3.x only
+
+# Usage
+
+## Tracked instance
+
+Track everything what was changed
+
+```javascript
+const {data, changedData, isDirty, loadData, reset} = useTrackedInstance({
+  name: 'Jack',
+  isActive: false
+})
+```
+Do some changes and see only changed field in changedData.
+Then set previous value and see what changedData is empty.
+That guaranty what you always get real changes
+```javascript
+data.value.name = 'John'
+console.log(isDirty.value) // true
+console.log(changedData.value) // {name: 'John'}
+
+data.value.name = 'Jack'
+console.log(isDirty.value) // false
+console.log(changedData.value) // undefined
+```
+Rollback initial value:
+```javascript
+data.value.name = 'John'
+reset()
+console.log(data.value) // { name: 'Jack', isActive: false }
+console.log(isDirty.value) // false
+console.log(changedData.value) // undefined
+```
+All changes should be replaced by new loaded data.
+The data will be considered not dirty
+```javascript
+data.value.name = 'John'
+data.value.isActive = true
+loadData({
+  name: 'Joe',
+  isActive: false
+})
+console.log(isDirty.value) // false
+console.log(data.value) // { name: 'Joe', isActive: false }
+```
+
+Can accept primitive values or arrays
+```javascript
+useTrackedInstance(false)
+useTrackedInstance([1,2,3])
+```
+
+### Real-world example
+```vue
+<script setup>
+  import {useTrackedInstance} from 'tracked-instance'
+
+  const {data, changedData, isDirty, reset, loadData} = useTrackedInstance({
+    title: '',
+    year: null,
+    isPublished: false
+  })
+
+  loadData({
+    id: 1,
+    title: 'The Dark Knight',
+    year: 2008,
+    isPublished: true
+  })
+</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>
+  </form>
+</template>
+```
+
+## Collection
+
+```javascript
+const {isDirty, add, items, remove, reset, loadData} = useCollection()
+
+loadData([{name: 'Jack'}, {name: 'John'}, {name: 'Joe'}])
+```
+Should be dirty on make some changes, remove or add item
+```javascript
+items.value[0].instance.data.value.name = 'Stepan'
+console.log(isDirty.value) // true 
+```
+Add new item:
+```javascript
+const addedItem = add({name: 'Taras'})
+console.log(addedItem) // {instance: TrackedInstance<{name: 'Taras'}>, isRemoved: false, isNew: true, meta: {}}}
+```
+Add new item in specific position:
+```javascript
+add({name: 'Taras'}, 0)
+```
+
+Item should be softly removed and can be reverted by reset()
+```javascript
+remove(0)
+remove(0, true) // hard remove
+```
+
+Reset all changes including changing data on each item
+```javascript
+reset()
+```
+
+Item meta. Additional custom fields which can watch on item instance. 
+If set then should be applied to each item which was added by add() or loadData()
+```javascript
+const {add, items} = useCollection(instance => ({
+  isValidName: computed(() => instance.data.value.name.length > 0)
+}))
+
+add({name: ''})
+
+console.log(items.value[0].meta.isValidName.value) // false
+```
+
+### Real-world example
+```vue
+<script setup>
+import {ref} from 'vue'
+import {useCollection} from 'tracked-instance'
+
+const {isDirty, add, items, remove, reset, loadData} = useCollection()
+
+loadData([{name: 'Jack'}, {name: 'John'}, {name: 'Joe'}])
+
+const newUserName = ref('')
+</script>
+
+<template>
+  <div>
+    isDirty: {{isDirty}}
+  </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>
+        <button @click="remove(index)">🗑 Remove</button>
+      </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>
+  </ul>
+</template>
+```
+
+# Documentation
+## TrackedInstance
+- **data** - tracked data
+- **changeData** - includes only modified fields from data, considers nested objects and arrays
+- **isDirty** - weather instance has some changes
+- **loadData** - rewrite data and clear dirty state
+- **reset** - rollback changes at the last point when the instance was not isDirty
+
+## Collection
+- **items** - array of `CollectionItem`
+- **isDirty** - weather collection includes some changes (add/remove/change)
+- **add** - add new item
+- **remove** - soft remove item by index. Soft removed items should be deleted permanently after load data. Can be reverted by reset. If passed second param isHardRemove can be deleted permanently.
+- **loadData** - accepts array of data for each item. Rewrite each instance data and clear dirty state
+- **reset** - rollback changes at the last point when the instance was not isDirty
+
+```typescript
+interface CollectionItem {
+  instance: TrackedInstance
+  isRemoved: Ref<boolean>
+  isNew: Ref<boolean> //weather is new instance. Field can be changed manually or changed in loadData in second argument
+  meta: Record<string, any>
+}
+```

package/package.json

@@ -0,0 +1,41 @@
+{
+  "version": "1.0.0",
+  "name": "tracked-instance",
+  "description": "Build large forms and track all changes",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run"
+  },
+  "main": "./dist/index.js",
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "typescript": "^5.2.2",
+    "vitest": "^1.3.0",
+    "vue": "^3.4.19"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rudnik275/tracked-instance"
+  },
+  "author": "Dmytro Rudnyk",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue 3",
+    "vue3",
+    "vue next",
+    "tracked form",
+    "track",
+    "collection",
+    "useTrackedInstance",
+    "useCollection"
+  ]
+}

package/src/collection.ts

@@ -0,0 +1,82 @@
+import {computed, shallowRef, triggerRef, ShallowRef, ComputedRef, ref, Ref} from 'vue'
+import {TrackedInstance, useTrackedInstance} from './tracked-instance'
+
+export interface CollectionItem<Item extends Record<string, any>, Meta = Record<string, any>> {
+  instance: TrackedInstance<Item>
+  meta: Meta
+  isRemoved: Ref<boolean>
+  isNew: Ref<boolean>
+}
+
+export interface Collection<Item extends Record<string, any>, Meta = Record<string, any>> {
+  items: ShallowRef<CollectionItem<Item, Meta>[]>
+  isDirty: ComputedRef<boolean>
+  add: (item: Partial<Item>, afterIndex?: number) => CollectionItem<Item, Meta>
+  remove: (index: number, isHardRemove?: boolean) => void
+  loadData: (items: Item[]) => void
+  reset: () => void
+}
+
+export const useCollection = <Item extends Record<string, any>, Meta = Record<string, any>>(
+  createItemMeta: (instance: TrackedInstance<Item>) => Meta = () => ({}) as Meta
+): Collection<Item, Meta> => {
+  const items = shallowRef<CollectionItem<Item, Meta>[]>([])
+
+  const isDirty = computed(() =>
+    items.value.some(({instance, isRemoved, isNew}) => instance.isDirty.value || isNew.value || isRemoved.value)
+  )
+
+  const add = (item: Partial<Item>, index: number = items.value.length) => {
+    const instance = useTrackedInstance<Item>(item)
+    const newItem = {
+      isRemoved: ref(false),
+      isNew: ref(true),
+      instance,
+      meta: createItemMeta(instance)
+    } as CollectionItem<Item, Meta>
+    items.value.splice(index, 0, newItem)
+    triggerRef(items)
+    return newItem
+  }
+
+  const remove = (index: number, isHardRemove = false) => {
+    const item = items.value[index]
+    if (item.isNew.value || isHardRemove) {
+      items.value.splice(index, 1)
+      triggerRef(items)
+    } else {
+      items.value[index].isRemoved.value = true
+    }
+  }
+
+  const loadData = (loadedItems: Item[]) => {
+    items.value = loadedItems.map((item) => {
+      const instance = useTrackedInstance<Item>(item)
+      return {
+        isNew: ref(false),
+        isRemoved: ref(false),
+        instance,
+        meta: createItemMeta(instance)
+      } as CollectionItem<Item, Meta>
+    })
+    triggerRef(items)
+  }
+
+  const reset = () => {
+    items.value = items.value.filter(({isNew}) => !isNew.value)
+    for (const item of items.value) {
+      item.isRemoved.value = false
+      item.instance.reset()
+    }
+    triggerRef(items)
+  }
+
+  return {
+    items,
+    isDirty,
+    add,
+    remove,
+    loadData,
+    reset
+  }
+}

package/src/index.ts

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

package/src/tracked-instance.ts

@@ -0,0 +1,339 @@
+import {get, has, set, unset} from 'lodash-es'
+import {computed, customRef, Ref} from 'vue'
+
+type DeepPartial<T> = T extends object
+  ? {
+    [P in keyof T]?: DeepPartial<T[P]>
+  }
+  : T
+
+export interface TrackedInstance<Data extends Record<string, any>> {
+  data: Ref<Data>
+  isDirty: Ref<boolean>
+  changedData: Ref<DeepPartial<Data>>
+  loadData: (newData: DeepPartial<Data>) => void
+  reset: () => void
+}
+
+interface NestedProxyPathItem {
+  target: Record<string, any>
+  property: string
+  receiver?: Record<string, any>
+}
+
+const isObject = (value: unknown) =>
+  typeof value === 'object' &&
+  value !== null &&
+  !Array.isArray(value) &&
+  !(value instanceof Date) &&
+  !(value instanceof File) &&
+  !(value instanceof Map) &&
+  !(value instanceof Set)
+
+const isEmpty = (value: object) => Object.keys(value).length === 0
+
+const iterateObject = function* (
+  source: Record<string, any>,
+  params: {
+    // define condition when need to go deep
+    goDeepCondition?: (path: string[], value: any) => boolean
+    // include parent into separate step when we go deep
+    includeParent?: boolean
+  } = {}
+) {
+  const {goDeepCondition = (_, value) => isObject(value), includeParent = false} = params
+  const iterateObjectDeep = function* (path: string[], obj: Record<string, any>): Generator<[string[], any]> {
+    for (const [key, value] of Object.entries(obj)) {
+      const currentPath = path.concat(key)
+      if (goDeepCondition(currentPath, value)) {
+        if (includeParent) {
+          yield [currentPath, value]
+        }
+        yield* iterateObjectDeep(currentPath, value)
+      } else {
+        yield [currentPath, value]
+      }
+    }
+  }
+
+  yield* iterateObjectDeep([], source)
+}
+
+const createNestedRef = <Source extends Record<string, any>>(
+  source: Source,
+  handler: (path: NestedProxyPathItem[]) => ProxyHandler<Source>
+) =>
+  customRef<Source>((track, trigger) => {
+    // make nested objects and arrays is reactive
+    const createProxy = <InnerSource extends Record<string, any>>(
+      source: InnerSource,
+      path: NestedProxyPathItem[] = []
+    ): InnerSource => {
+      const currentProxyHandler = handler(path) as unknown as ProxyHandler<InnerSource>
+      return new Proxy(source, {
+        ...currentProxyHandler,
+        get(target, property: string, receiver) {
+          track()
+          const result = currentProxyHandler.get
+            ? currentProxyHandler.get(target, property, receiver)
+            : Reflect.get(target, property, receiver)
+
+          if (isObject(result) || Array.isArray(result)) {
+            return createProxy(result, path.concat({target, property, receiver}))
+          }
+          return result
+        },
+        set(target, property, value, receiver) {
+          const result = currentProxyHandler.set
+            ? currentProxyHandler.set(target, property, value, receiver)
+            : Reflect.set(target, property, value, receiver)
+          trigger()
+          return result
+        },
+        deleteProperty(target, property) {
+          const result = currentProxyHandler.deleteProperty
+            ? currentProxyHandler.deleteProperty(target, property)
+            : Reflect.deleteProperty(target, property)
+          trigger()
+          return result
+        }
+      } as ProxyHandler<InnerSource>)
+    }
+
+    let value = createProxy(source)
+
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue: Source) {
+        value = createProxy(newValue)
+        trigger()
+      }
+    }
+  })
+
+// array values in originalData should store in default object to avoid removing items on change length
+class ArrayInOriginalData {
+  length: number
+
+  constructor(length: number) {
+    this.length = length
+    // length should not include in iterations
+    Object.defineProperty(this, 'length', {
+      enumerable: false,
+      value: length
+    })
+  }
+}
+
+const setOriginalDataValue = (originalData: Record<string, any>, path: Omit<NestedProxyPathItem, 'receiver'>[]) => {
+  let originalDataTarget = originalData
+  for (const {target: oldValueParent, property} of path.slice(0, -1)) {
+    if (property in originalDataTarget) {
+      if (isObject(originalDataTarget[property]) || originalDataTarget[property] instanceof ArrayInOriginalData) {
+        originalDataTarget = originalDataTarget[property]
+      } else {
+        // cancel set originalData value because in this case we try to replace primitive value by object or array value
+        return
+      }
+    } else {
+      if (Array.isArray(oldValueParent[property])) {
+        originalDataTarget = originalDataTarget[property] = new ArrayInOriginalData(oldValueParent[property].length)
+      } else if (isObject(oldValueParent[property])) {
+        originalDataTarget = originalDataTarget[property] = {}
+      }
+    }
+  }
+
+  const lastItem = path.at(-1)!
+  originalDataTarget[lastItem.property] = lastItem.target[lastItem.property]
+}
+
+const snapshotValueToOriginalData = (
+  originalData: Record<string, any>,
+  path: Omit<NestedProxyPathItem, 'receiver'>[],
+  value: any
+) => {
+  const pathAsString = path.map((i) => i.property)
+  const valueInOriginalData = get(originalData, pathAsString)
+
+  const markRemovedFieldsAsUndefined = (valueInOriginalData?: Record<string, any>, oldValue?: Record<string, any>) => {
+    const keysSet = new Set<string>()
+    if (valueInOriginalData) {
+      for (const key of Object.keys(valueInOriginalData)) {
+        keysSet.add(key)
+      }
+    }
+    if (oldValue) {
+      for (const key of Object.keys(oldValue)) {
+        keysSet.add(key)
+      }
+    }
+    const keys = Array.from(keysSet).filter((key) => !Object.keys(value).includes(key))
+    for (const key of keys) {
+      snapshotValueToOriginalData(
+        originalData,
+        path.concat({target: oldValue || value, property: key} as Omit<NestedProxyPathItem, 'receiver'>),
+        undefined
+      )
+    }
+  }
+
+  const lastPathItem = path.at(-1)!
+  const oldValue = lastPathItem.target[lastPathItem.property]
+  if (isObject(value) && (isObject(valueInOriginalData) || isObject(oldValue))) {
+    // if value includes in oldValue or originalData need mark removed fields as undefined and recursively run nested objects
+    markRemovedFieldsAsUndefined(valueInOriginalData, oldValue)
+    for (const key of Object.keys(value)) {
+      snapshotValueToOriginalData(originalData, path.concat({target: oldValue || value, property: key}), value[key])
+    }
+  } else if (Array.isArray(value) && (valueInOriginalData instanceof ArrayInOriginalData || Array.isArray(oldValue))) {
+    // do same for arrays
+    markRemovedFieldsAsUndefined(valueInOriginalData, oldValue)
+    for (const key of value.keys()) {
+      snapshotValueToOriginalData(
+        originalData,
+        path.concat({target: oldValue || value, property: key.toString()}),
+        value[key]
+      )
+    }
+  } else {
+    // in case value is plain then store it into originalData
+    if (!has(originalData, pathAsString)) {
+      if (oldValue !== value) {
+        setOriginalDataValue(originalData, path)
+      }
+    } else if (valueInOriginalData === value) {
+      unset(originalData, pathAsString)
+    }
+  }
+}
+
+export const useTrackedInstance = <Data extends Record<string, any>>(
+  initialData: Partial<Data>
+): TrackedInstance<Data> => {
+  type InternalData = {root: Data}
+  const _originalData = createNestedRef<DeepPartial<InternalData>>({}, (path) => ({
+    deleteProperty(target, property) {
+      const result = Reflect.deleteProperty(target, property)
+      if (path.length) {
+        const parent = path.at(-1)!
+        if (isEmpty(target)) {
+          delete parent.receiver![parent.property]
+        }
+      }
+      return result
+    }
+  }))
+
+  const _data = createNestedRef<InternalData>({root: initialData} as InternalData, (parentThree) => ({
+    set(target, property: string, value, receiver) {
+      const path = parentThree.concat({target, property, receiver})
+      const oldValue = target[property as keyof typeof target]
+
+      const triggerChangingArrayItems = () => {
+        // in case length in array has changed then emit changing of value by index
+        const originalDataValue = get(
+          _originalData.value,
+          path.map((i) => i.property)
+        ) as ArrayInOriginalData | undefined
+
+        const {length: originalDataLength} = originalDataValue || oldValue
+
+        if (value < originalDataLength) {
+          // when removed new value
+          for (let i = value; i < originalDataLength; i++) {
+            delete receiver[i]
+          }
+        } else if (originalDataLength < value) {
+          // store all removed values as "undefined" when this array values was in data before do some change
+          for (let i = originalDataLength; i < value; i++) {
+            receiver[i] = undefined
+          }
+        }
+      }
+
+      if (Array.isArray(target) && property === 'length') {
+        if (value !== oldValue) {
+          triggerChangingArrayItems()
+        }
+      } else {
+        snapshotValueToOriginalData(_originalData.value, path, value)
+      }
+
+      return Reflect.set(target, property, value, receiver)
+    },
+    deleteProperty(target, property: keyof typeof target) {
+      setOriginalDataValue(_originalData.value, parentThree.concat({target, property} as NestedProxyPathItem))
+      return Reflect.deleteProperty(target, property)
+    }
+  }))
+
+  const data = computed<Data>({
+    get: () => _data.value.root,
+    set: (value) => (_data.value.root = value)
+  })
+
+  const isDirty = computed<boolean>(() => Object.keys(_originalData.value).length > 0)
+
+  const _changedData = computed<DeepPartial<InternalData>>(() => {
+    const changedData = {} as DeepPartial<InternalData>
+    const originalDataIterator = iterateObject(_originalData.value, {
+      goDeepCondition: (path, value) => {
+        /*
+         * iterate over originalData
+         * but avoid going deep in case
+         * when value in data have different data type
+         * of same value in originalData
+         */
+        const valueInData = get(_data.value, path)
+        const isBothValuesAsArray = value instanceof ArrayInOriginalData && Array.isArray(valueInData)
+        const isBothValuesAsObject = isObject(value) && isObject(valueInData)
+        return isBothValuesAsObject || isBothValuesAsArray
+      }
+    })
+    for (const [path] of originalDataIterator) {
+      const valueInData = get(_data.value, path)
+      set(changedData, path, valueInData)
+    }
+    return changedData
+  })
+
+  const changedData = computed(() => _changedData.value.root as DeepPartial<Data>)
+
+  const loadData = (newData: DeepPartial<Data>) => {
+    _data.value = {root: newData} as InternalData
+    _originalData.value = {}
+  }
+
+  const reset = () => {
+    const updatedData = JSON.parse(JSON.stringify(_data.value))
+
+    // iterate over originalData including objects to check array values
+    for (const [path, value] of iterateObject(_originalData.value, {includeParent: true})) {
+      if (value instanceof ArrayInOriginalData) {
+        // reset array length in data to remove new items
+        set(updatedData, path.concat('length'), value.length)
+      } else if (!isObject(value)) {
+        if (value === undefined) {
+          unset(updatedData, path)
+        } else {
+          set(updatedData, path, value)
+        }
+      }
+    }
+
+    _data.value = updatedData
+    _originalData.value = {}
+  }
+
+  return {
+    data,
+    changedData,
+    isDirty,
+    loadData,
+    reset
+  }
+}

package/tests/collection.spec.ts

@@ -0,0 +1,99 @@
+import {useCollection} from '../src'
+import {describe, expect, it} from 'vitest'
+
+interface Person {
+  name: string
+}
+
+describe('Collection', () => {
+  describe('Create', () => {
+    it('Should add new item at index in data', () => {
+      const collection = useCollection<Person>()
+      collection.loadData([{name: 'admin'}, {name: 'user'}])
+      collection.add({name: 'new user'}, 1)
+      expect(collection.items.value.map((item) => item.instance.data.value)).to.deep.equal([
+        {name: 'admin'},
+        {name: 'new user'},
+        {name: 'user'}
+      ])
+    })
+  })
+
+  describe('isDirty', () => {
+    it('Should make collection dirty when some item is "isDirty"', () => {
+      const collection = useCollection<Person>()
+      collection.loadData([{name: 'admin'}, {name: 'user'}])
+      collection.items.value[0].instance.data.value.name = 'changed name'
+      expect(collection.isDirty.value).equal(true)
+    })
+    it('Should make collection dirty when some item is removed', () => {
+      const collection = useCollection<Person>()
+      collection.loadData([{name: 'admin'}, {name: 'user'}])
+      collection.remove(0)
+      expect(collection.isDirty.value).equal(true)
+    })
+    it('Should make collection dirty when some item is "isNew"', () => {
+      const collection = useCollection<Person>()
+      collection.loadData([{name: 'admin'}, {name: 'user'}])
+      collection.add({name: 'new user'})
+      expect(collection.isDirty.value).equal(true)
+    })
+  })
+
+  describe('reset', () => {
+    const collection = useCollection<Person>()
+    collection.loadData([{name: 'admin'}, {name: 'user'}])
+    collection.items.value[0].instance.data.value.name = 'admin2'
+    collection.add({name: 'new user'})
+    collection.remove(0)
+    collection.reset()
+
+    it(`Collection shouldn't dirty`, () => {
+      expect(collection.isDirty.value).equal(false)
+    })
+    it('Should clean deleted items', () => {
+      expect(collection.items.value.some((item) => item.isRemoved.value)).equal(false)
+    })
+    it('Should reset each item in data', () => {
+      expect(collection.items.value.some((item) => item.instance.isDirty.value)).equal(false)
+    })
+    it('should revert deleted items', async () => {
+      expect(collection.items.value.map((item) => item.instance.data.value)).deep.eq([{name: 'admin'}, {name: 'user'}])
+    })
+  })
+
+  describe('delete', () => {
+    const collection = useCollection<Person>()
+    collection.loadData([{name: 'admin'}, {name: 'user'}])
+    collection.add({name: 'new user'})
+    collection.remove(2)
+    collection.remove(1)
+
+    it('Should delete new items when removing it', () => {
+      expect(collection.items.value[0].instance.data.value.name).equal('admin')
+      expect(collection.items.value[1].instance.data.value.name).equal('user')
+      expect(collection.items.value[1].isRemoved.value).equal(true)
+      expect(collection.items.value[2]).undefined
+    })
+  })
+
+  describe('loadData', () => {
+    const collection = useCollection<Person>()
+    collection.loadData([{name: 'admin'}, {name: 'user'}])
+    it('Should load correct data', () => {
+      expect(collection.items.value.map((item) => item.instance.data.value)).to.deep.equal([
+        {name: 'admin'},
+        {name: 'user'}
+      ])
+    })
+    it(`Loaded items shouldn't equals "isNew"`, () => {
+      expect(collection.items.value.some((item) => item.instance.isDirty.value)).equal(false)
+    })
+    it('Should clean revert removed items', () => {
+      collection.remove(1)
+      collection.remove(0)
+      collection.loadData([{name: 'admin'}, {name: 'user'}])
+      expect(collection.items.value.some((item) => item.isRemoved.value)).equal(false)
+    })
+  })
+})

package/tests/tracked-instance.spec.ts

@@ -0,0 +1,313 @@
+import {useTrackedInstance} from '../src'
+import {describe, expect, it} from 'vitest'
+
+describe('useTrackedInstance', async () => {
+  it('should change data', async () => {
+    const instance = useTrackedInstance({
+      name: 'John',
+      age: 22
+    })
+    expect(instance.isDirty.value).eq(false)
+    expect(instance.changedData.value).undefined
+
+    instance.data.value.name = 'test'
+
+    expect(instance.isDirty.value).eq(true)
+    expect(instance.changedData.value).deep.eq({
+      name: 'test'
+    })
+
+    instance.data.value.name = 'John'
+    expect(instance.isDirty.value).eq(false)
+  })
+
+  it('should accept primitive value as root', async () => {
+    const instance = useTrackedInstance('John')
+    instance.data.value = 'Jane'
+
+    expect(instance.isDirty.value).eq(true)
+
+    instance.reset()
+
+    expect(instance.isDirty.value).eq(false)
+    expect(instance.data.value).eq('John')
+
+    instance.data.value = 'Tom'
+    instance.loadData('Jack')
+
+    expect(instance.isDirty.value).eq(false)
+    expect(instance.data.value).eq('Jack')
+  })
+
+  it('should change array of string', async () => {
+    const instance = useTrackedInstance({
+      name: 'John',
+      hobbies: ['drift']
+    })
+    instance.data.value.hobbies.push('films')
+
+    expect(instance.isDirty.value).eq(true)
+    expect(instance.changedData.value).deep.eq({
+      hobbies: [undefined, 'films']
+    })
+  })
+
+  it('should change nested value in object', async () => {
+    const instance = useTrackedInstance({
+      name: 'John',
+      info: {
+        contact: {
+          phone: '1234567',
+          address: 'Earth'
+        }
+      }
+    })
+
+    instance.data.value.info.contact.phone = 'none'
+    expect(instance.changedData.value).deep.eq({
+      info: {
+        contact: {
+          phone: 'none'
+        }
+      }
+    })
+  })
+
+  it('should clean "changedData" after "loadData" ', async () => {
+    const instance = useTrackedInstance({
+      name: 'John',
+      age: 22
+    })
+    instance.data.value.name = 'none'
+    instance.data.value.age = 0
+    instance.loadData({
+      name: 'Test',
+      age: 100
+    })
+
+    expect(instance.data.value).deep.eq({
+      name: 'Test',
+      age: 100
+    })
+    expect(instance.isDirty.value).eq(false)
+    expect(instance.changedData.value).undefined
+  })
+
+  it('should reset data after do some change', async () => {
+    const instance = useTrackedInstance({
+      name: 'John',
+      info: {
+        contact: {
+          phone: '1234567',
+          address: 'Earth'
+        }
+      },
+      hobbies: ['drift', 'films']
+    })
+    instance.data.value.name = 'changed'
+    instance.data.value.info.contact.phone = 'none'
+    instance.data.value.hobbies.splice(0, 1, 'test', 'test2')
+    instance.reset()
+
+    expect(instance.data.value).deep.eq({
+      name: 'John',
+      info: {
+        contact: {
+          phone: '1234567',
+          address: 'Earth'
+        }
+      },
+      hobbies: ['drift', 'films']
+    })
+    expect(instance.isDirty.value).eq(false)
+    expect(instance.changedData.value).undefined
+  })
+
+  it('should display correct changedData after replace some value as object', async () => {
+    const instance = useTrackedInstance<{
+      contact: null | {
+        phone: string
+        galaxy: string
+        address?: string
+      }
+      user: null | {
+        name: string
+      }
+    }>({
+      contact: {
+        phone: '123',
+        galaxy: 'Milky way',
+        address: 'Earth'
+      },
+      user: null
+    })
+
+    instance.data.value.contact = null
+
+    instance.data.value.contact = {
+      phone: '1',
+      galaxy: 'Milky way'
+    }
+    expect(instance.changedData.value).deep.eq({
+      contact: {
+        phone: '1',
+        address: undefined
+      }
+    })
+
+    instance.data.value.contact = {
+      phone: '123',
+      galaxy: 'Milky way',
+      address: 'Earth'
+    }
+    expect(instance.isDirty.value).eq(false)
+
+    instance.data.value.user = {
+      name: 'Jack'
+    }
+    instance.data.value.user.name = 'John'
+    expect(instance.changedData.value).deep.eq({
+      user: {
+        name: 'John'
+      }
+    })
+  })
+
+  it('should make whole object prop undefined', async () => {
+    const instance = useTrackedInstance<{
+      name?: string
+      info?: Record<string, string>
+    }>({
+      name: 'John',
+      info: {
+        phone: '1234567',
+        address: 'Earth'
+      }
+    })
+    instance.data.value.name = undefined
+    instance.data.value.info = undefined
+
+    expect(instance.changedData.value).deep.eq({
+      name: undefined,
+      info: undefined
+    })
+  })
+
+  it('should replace primitive value as new object', async () => {
+    const instance = useTrackedInstance<{
+      user: string | {name: string}
+    }>({
+      user: 'John'
+    })
+    instance.data.value.user = 'Jack'
+
+    expect(instance.changedData.value).deep.eq({
+      user: 'Jack'
+    })
+
+    instance.data.value.user = {
+      name: 'Peter'
+    }
+
+    expect(instance.changedData.value).deep.eq({
+      user: {name: 'Peter'}
+    })
+
+    instance.reset()
+    expect(instance.data.value).deep.eq({
+      user: 'John'
+    })
+    expect(instance.isDirty.value).eq(false)
+  })
+
+  it('should replace object value as new object', async () => {
+    const instance = useTrackedInstance<{
+      info: {
+        address: string
+        phone?: string
+        passport: {
+          id: number
+          country?: string
+          year?: number
+          owner?: string
+        }
+      }
+    }>({
+      info: {
+        address: 'Earth',
+        phone: '1234567',
+        passport: {
+          id: 1,
+          year: 2000
+        }
+      }
+    })
+    instance.data.value.info.address = 'Mars'
+
+    expect(instance.changedData.value).deep.eq({
+      info: {
+        address: 'Mars'
+      }
+    })
+
+    instance.data.value.info = {
+      address: 'Earth',
+      passport: {
+        id: 2,
+        country: 'Ukraine',
+        owner: 'Jack'
+      }
+    }
+
+    instance.data.value.info = {
+      address: 'Earth',
+      passport: {
+        id: 2,
+        country: 'Ukraine'
+      }
+    }
+
+    expect(instance.changedData.value).deep.eq({
+      info: {
+        phone: undefined,
+        passport: {
+          id: 2,
+          year: undefined,
+          country: 'Ukraine'
+        }
+      }
+    })
+
+    instance.reset()
+
+    expect(instance.changedData.value).undefined
+    expect(instance.data.value).deep.eq({
+      info: {
+        address: 'Earth',
+        phone: '1234567',
+        passport: {
+          id: 1,
+          year: 2000
+        }
+      }
+    })
+  })
+
+  it('should display correct changedData when change nested value in array of objects', async () => {
+    const instance = useTrackedInstance<{id: number; name: string}[]>([
+      {
+        id: 1,
+        name: 'John'
+      },
+      {
+        id: 2,
+        name: 'Jack'
+      }
+    ])
+
+    instance.data.value[1].name = 'Joe'
+    const expectedData = []
+    expectedData[1] = {name: 'Joe'}
+    expect(instance.changedData.value).deep.eq(expectedData)
+  })
+})

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "lib": ["ESNext", "DOM"],
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+}