vue-to-reactive 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+<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>
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## 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'
+```
+
+## License
+
+MIT

package/banner.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
+  <defs>
+    <linearGradient id="banner-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#35495e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <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"/>
+
+  <!-- Top accent bar -->
+  <rect x="0" y="0" width="1280" height="8" fill="#42b883"/>
+
+  <!-- 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>
+  </g>
+
+  <!-- Package name -->
+  <text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-to-reactive</text>
+
+  <!-- Description -->
+  <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 utility converting ref to reactive proxy object</text>
+
+  <!-- Install command -->
+  <g transform="translate(80, 420)">
+    <rect width="500" 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>
+
+  <!-- Category badge -->
+  <g transform="translate(80, 520)">
+    <rect width="172" height="40" rx="20" fill="#42b883" opacity="0.2"/>
+    <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"/>
+  </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/dist/index.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const vue = require('vue');
+
+function toReactive(objectRef) {
+  if (!vue.isRef(objectRef))
+    return vue.reactive(objectRef);
+  const proxy = new Proxy({}, {
+    get(_, p, receiver) {
+      return vue.unref(Reflect.get(objectRef.value, p, receiver));
+    },
+    set(_, p, value) {
+      if (vue.isRef(objectRef.value[p]) && !vue.isRef(value))
+        objectRef.value[p].value = value;
+      else
+        objectRef.value[p] = value;
+      return true;
+    },
+    deleteProperty(_, p) {
+      return Reflect.deleteProperty(objectRef.value, p);
+    },
+    has(_, p) {
+      return Reflect.has(objectRef.value, p);
+    },
+    ownKeys() {
+      return Object.keys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+  return vue.reactive(proxy);
+}
+
+exports.toReactive = toReactive;

package/dist/index.d.cts

@@ -0,0 +1,11 @@
+import { MaybeRef, UnwrapNestedRefs } from 'vue';
+
+/**
+ * Converts ref to reactive.
+ *
+ * @see https://vueuse.org/toReactive
+ * @param objectRef A ref of object
+ */
+declare function toReactive<T extends object>(objectRef: MaybeRef<T>): UnwrapNestedRefs<T>;
+
+export { toReactive };

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { MaybeRef, UnwrapNestedRefs } from 'vue';
+
+/**
+ * Converts ref to reactive.
+ *
+ * @see https://vueuse.org/toReactive
+ * @param objectRef A ref of object
+ */
+declare function toReactive<T extends object>(objectRef: MaybeRef<T>): UnwrapNestedRefs<T>;
+
+export { toReactive };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { MaybeRef, UnwrapNestedRefs } from 'vue';
+
+/**
+ * Converts ref to reactive.
+ *
+ * @see https://vueuse.org/toReactive
+ * @param objectRef A ref of object
+ */
+declare function toReactive<T extends object>(objectRef: MaybeRef<T>): UnwrapNestedRefs<T>;
+
+export { toReactive };

package/dist/index.mjs

@@ -0,0 +1,36 @@
+import { isRef, reactive, unref } from 'vue';
+
+function toReactive(objectRef) {
+  if (!isRef(objectRef))
+    return reactive(objectRef);
+  const proxy = new Proxy({}, {
+    get(_, p, receiver) {
+      return unref(Reflect.get(objectRef.value, p, receiver));
+    },
+    set(_, p, value) {
+      if (isRef(objectRef.value[p]) && !isRef(value))
+        objectRef.value[p].value = value;
+      else
+        objectRef.value[p] = value;
+      return true;
+    },
+    deleteProperty(_, p) {
+      return Reflect.deleteProperty(objectRef.value, p);
+    },
+    has(_, p) {
+      return Reflect.has(objectRef.value, p);
+    },
+    ownKeys() {
+      return Object.keys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+  return reactive(proxy);
+}
+
+export { toReactive };

package/logo.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="256" height="256">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#35495e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="96" height="96" rx="16" fill="url(#bg-grad)"/>
+
+  <!-- Decorative corner accent -->
+  <path d="M96 0v20c0-11.046-8.954-20-20-20H96z" fill="#42b883" opacity="0.12"/>
+
+  <!-- Vue badge -->
+  <g transform="translate(8, 8)">
+    <rect width="18" height="9" rx="2" fill="#42b883"/>
+    <text x="9" y="6.8" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="4.5" font-weight="700" fill="white">VUE</text>
+  </g>
+
+  <!-- Category icon -->
+  <g>
+    <circle cx="48" cy="28" r="12" fill="none" stroke="#42b883" stroke-width="3"/><circle cx="48" cy="28" r="5" fill="#42b883"/><path d="M36 28h-4M60 28h4M48 16v-4M48 40v4" stroke="#42b883" stroke-width="2" stroke-linecap="round"/>
+  </g>
+
+  <!-- Function name - textLength ensures it fits within bounds -->
+  <text x="48" y="57" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="white" textLength="66" lengthAdjust="spacingAndGlyphs">To Reactive</text>
+
+  <!-- Category label -->
+  <text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#42b883" opacity="0.85">Reactivity</text>
+
+  <!-- Bottom accent line -->
+  <rect x="28" y="82" width="40" height="2" rx="1" fill="#42b883" opacity="0.5"/>
+</svg>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "vue-to-reactive",
+  "version": "1.0.0",
+  "description": "Vue 3 utility converting ref to reactive proxy object",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "logo.svg",
+    "banner.svg"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vue-3",
+    "composable",
+    "composition-api",
+    "vueuse",
+    "reactive",
+    "reactivity",
+    "computed",
+    "ref",
+    "state",
+    "convert",
+    "unwrap",
+    "proxy",
+    "object",
+    "no-value",
+    "toReactive"
+  ],
+  "author": "VueFrag",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuefrag/vue-to-reactive.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuefrag/vue-to-reactive/issues"
+  },
+  "homepage": "https://github.com/vuefrag/vue-to-reactive#readme",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}