From 0746debe955407ec1f59519536b7873d9c0e8aab Mon Sep 17 00:00:00 2001
From: Dmitriy Rudnik <dmitriyrudnik@gmail.com>
Date: Sun, 25 Feb 2024 12:32:37 +0200
Subject: [PATCH] update readme and generating type declarations

---
 README.md     | 121 +++++++++++++++++++++++++++++++++++++-------------
 package.json  |   2 +-
 tsconfig.json |   2 +-
 3 files changed, 93 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 37648af..f1fb0ed 100644
--- a/README.md
+++ b/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,68 @@ console.log(items.value[0].meta.isValidName.value) // false
 ```
 
 ### Real-world example
+[Try on playground](https://play.vuejs.org/#eNp9VcFu1DAQ/ZUhl81K2+QAp9W2orQ90ENBLZwIBzfx7rrrOJHtbLda5RsQSAhxob+BhMTH8AP0ExjbSdZJu+xlbc945s2b58k2OC7LaF3RYBrMVCpZqUFRXZVHiWB5WUgNW0nnNcxlkcMIHUc7Q6XoScE5TTUrROuiJUlXNDtgQmkiUuOfiLTAHWyZOmVS302AZNkEmKa5moCkebGm5h8TT4AXJDslmtRwCL0E4dhEas3hh60gOZ3C6BzzjeoJdPtiKfp7Oqo/2ssOhqC37xWVF2jGHFhdOBp5ZkXW9GRJxIIqNIdjODyCbSKgQxZa4NGa8IpGOSlDe2D9zCJqK48ydHZuY4xfJ2IWO4qRXNygb8mJprgDmF1XWhd4DPibZkyRa06zwyR41pCWBM72MuUsXaHBw+lsNg7Aw/2X33CFRkgbqwkfu/h+rl0oS30SHP35/uvvz09wabb9G0sJsUWN64ytjxpQU9huoVlDXc9iY/PcHKLjLDOkm3bKqTuaMVFW2q0B1gd5kVGOSLzetAUD6LuSok3TDYJ0hwaMjTMsBZUVNp33YtVjU92PrxaKgdGvzodd8TZ02x+ENy8kxrZ9Rt2KjG7G+OcUjJFboDPO0JnNbdusFNSlVXfmZOC5Dino07BPR5GpbEfMHnJ8gp4kyT250BWCoB7uv33GrpvDHjG9632kvSIv6G1boO/V5euXY9WGr9nz9bIB+Cr0UDwGZhM7CQ5woBa7nsSctR2N+08utr02y6ZLrqFWop4ObFOdAoy9a3w0Z1xTic/fvf1htw2zLYoO456e+oCH3XpKSTiZ5oQro6iWLhyU1zgKBzx15TfV9jgIJoGb5Qc4xqIbVQj8DNhZh1mtAdWNBLtQKLLBbDfGJFhqXappHFeiXC2itMjjx34mAlZYY0atcM7O2WKQD++VjFP5pjTDvp+XcF7cntszLSs6ac/TJU1XT5zfqI2D9tZoTa4RQGfTRC7MsDPms6sL+2w6I76/ijdl7TGiLAteGYzO7VUlMoTt+Vm0ry19TCzeqbONpkK1RRmglg3rnwT4ST35T+k7uM+jFx2L9T/LBo48)
 ```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.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})">➕ 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>
diff --git a/package.json b/package.json
index efd2fdb..52fe431 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "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",
diff --git a/tsconfig.json b/tsconfig.json
index 6a0be6f..dbb4996 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,7 @@
     "sourceMap": true,
     "declaration": true,
     "declarationDir": "./dist/types",
-    "outDir": "./dist/build",
+    "emitDeclarationOnly": true,
     "lib": ["ESNext", "DOM"],
     "useDefineForClassFields": true,
     "skipLibCheck": true,