vue-to-reactive 1.0.2 → 1.0.3

package/README.github.md

@@ -0,0 +1,53 @@
+<p align="center">
+  <img src="banner.svg" alt="vue-to-reactive" width="100%" />
+</p>
+
+<h1 align="center">vue-to-reactive</h1>
+
+<p align="center">A Vue 3 composition API utility that converts a ref into a reactive proxy object, enabling direct property access without .value while maintaining full reactivity.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vue-to-reactive"><img src="https://img.shields.io/npm/v/vue-to-reactive.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/vue-to-reactive"><img src="https://img.shields.io/npm/dm/vue-to-reactive.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/vuefrag/vue-to-reactive/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-to-reactive.svg" alt="license" /></a>
+</p>
+
+
+## Installation
+
+```bash
+npm install vue-to-reactive
+```
+
+## Usage
+
+```ts
+import { toReactive } from 'vue-to-reactive';
+```
+
+Converts ref to reactive. Also made possible to create a "swapable" reactive object.
+
+```ts
+import { toReactive } from 'vue-to-reactive'
+import { ref } from 'vue'
+
+const refState = ref({ foo: 'bar' })
+
+console.log(refState.value.foo) // => 'bar'
+
+const state = toReactive(refState) // <--
+
+console.log(state.foo) // => 'bar'
+
+refState.value = { bar: 'foo' }
+
+console.log(state.foo) // => undefined
+console.log(state.bar) // => 'foo'
+```
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+
+## License
+
+MIT

package/README.npm.md

@@ -0,0 +1,53 @@
+<p align="center">
+  <img src="logo.svg" alt="vue-to-reactive" width="180" />
+</p>
+
+<h1 align="center">vue-to-reactive</h1>
+
+<p align="center">A Vue 3 composition API utility that converts a ref into a reactive proxy object, enabling direct property access without .value while maintaining full reactivity.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vue-to-reactive"><img src="https://img.shields.io/npm/v/vue-to-reactive.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/vue-to-reactive"><img src="https://img.shields.io/npm/dm/vue-to-reactive.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/vuefrag/vue-to-reactive/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-to-reactive.svg" alt="license" /></a>
+</p>
+
+
+## Installation
+
+```bash
+npm install vue-to-reactive
+```
+
+## Usage
+
+```ts
+import { toReactive } from 'vue-to-reactive';
+```
+
+Converts ref to reactive. Also made possible to create a "swapable" reactive object.
+
+```ts
+import { toReactive } from 'vue-to-reactive'
+import { ref } from 'vue'
+
+const refState = ref({ foo: 'bar' })
+
+console.log(refState.value.foo) // => 'bar'
+
+const state = toReactive(refState) // <--
+
+console.log(state.foo) // => 'bar'
+
+refState.value = { bar: 'foo' }
+
+console.log(state.foo) // => undefined
+console.log(state.bar) // => 'foo'
+```
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+
+## License
+
+MIT

package/banner.svg

@@ -10,16 +10,16 @@
   <rect width="1280" height="640" fill="url(#banner-bg)"/>
 
   <!-- Decorative elements -->
-  <circle cx="1200" cy="100" r="300" fill="#42b883" opacity="0.05"/>
-  <circle cx="80" cy="540" r="200" fill="#42b883" opacity="0.05"/>
+  <circle cx="200" cy="150" r="120" fill="#42b883" opacity="0.06"/>
+  <circle cx="1150" cy="500" r="100" fill="#42b883" opacity="0.06"/>
 
   <!-- Top accent bar -->
   <rect x="0" y="0" width="1280" height="8" fill="#42b883"/>
 
-  <!-- VueFrag badge -->
+  <!-- Vuefrag badge -->
   <g transform="translate(80, 80)">
     <rect width="140" height="50" rx="8" fill="#42b883"/>
-    <text x="70" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="white">VueFrag</text>
+    <text x="70" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="white">Vuefrag</text>
   </g>
 
   <!-- Package name -->
@@ -30,7 +30,7 @@
 
   <!-- Install command -->
   <g transform="translate(80, 420)">
-    <rect width="500" height="60" rx="8" fill="#0f172a"/>
+    <rect width="456" height="60" rx="8" fill="#0f172a"/>
     <text x="20" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#94a3b8">npm install</text>
     <text x="200" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#42b883">vue-to-reactive</text>
   </g>
@@ -41,12 +41,8 @@
     <text x="86" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#42b883">Reactivity</text>
   </g>
 
-  <!-- Vue logo hint -->
-  <g transform="translate(1080, 480)">
-    <polygon points="100,20 140,100 60,100" fill="#42b883" opacity="0.3"/>
-    <polygon points="100,40 125,90 75,90" fill="#42b883" opacity="0.5"/>
+  <!-- Category icon (top right corner) -->
+  <g>
+    <circle cx="1080" cy="150" r="60" fill="none" stroke="#42b883" stroke-width="15"/><circle cx="1080" cy="150" r="25" fill="#42b883"/><path d="M1000 150h-20M1160 150h20M1080 70v-20M1080 230v20" stroke="#42b883" stroke-width="10" stroke-linecap="round"/>
   </g>
-
-  <!-- Bottom text -->
-  <text x="1200" y="600" text-anchor="end" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#64748b">Standalone VueUse function</text>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-to-reactive",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Vue 3 utility converting ref to reactive proxy object",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -19,7 +19,8 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "cp README.npm.md README.md && npm run build",
+    "postpublish": "cp README.github.md README.md"
   },
   "keywords": [
     "vue",
@@ -58,4 +59,4 @@
     "typescript": "^5.0.0",
     "vue": "^3.4.0"
   }
-}
+}