vue-make-destructurable 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.github.md +54 -0
  2. package/README.md +54 -0
  3. package/README.npm.md +54 -0
  4. package/banner.svg +48 -0
  5. package/dist/index.cjs +25 -0
  6. package/dist/index.d.cts +3 -0
  7. package/dist/index.d.mts +3 -0
  8. package/dist/index.d.ts +3 -0
  9. package/dist/index.mjs +23 -0
  10. package/logo.svg +31 -0
  11. package/package.json +64 -0
package/README.github.md ADDED
@@ -0,0 +1,54 @@
1
+ <p align="center">
2
+ <img src="banner.svg" alt="vue-make-destructurable" width="100%" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-make-destructurable</h1>
6
+
7
+ <p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/dm/vue-make-destructurable.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-make-destructurable/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-make-destructurable.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-make-destructurable
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { makeDestructurable } from 'vue-make-destructurable';
25
+ ```
26
+
27
+ Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
28
+
29
+ TypeScript Example:
30
+
31
+ ```ts
32
+ import { makeDestructurable } from 'vue-make-destructurable'
33
+
34
+ const foo = { name: 'foo' }
35
+ const bar = 1024
36
+
37
+ const obj = makeDestructurable(
38
+ { foo, bar } as const,
39
+ [foo, bar] as const,
40
+ )
41
+ ```
42
+
43
+ Usage:
44
+
45
+ ```ts
46
+ let { foo, bar } = obj
47
+ let [foo, bar] = obj
48
+ ```
49
+
50
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
51
+
52
+ ## License
53
+
54
+ MIT
package/README.md ADDED
@@ -0,0 +1,54 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-make-destructurable" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-make-destructurable</h1>
6
+
7
+ <p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/dm/vue-make-destructurable.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-make-destructurable/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-make-destructurable.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-make-destructurable
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { makeDestructurable } from 'vue-make-destructurable';
25
+ ```
26
+
27
+ Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
28
+
29
+ TypeScript Example:
30
+
31
+ ```ts
32
+ import { makeDestructurable } from 'vue-make-destructurable'
33
+
34
+ const foo = { name: 'foo' }
35
+ const bar = 1024
36
+
37
+ const obj = makeDestructurable(
38
+ { foo, bar } as const,
39
+ [foo, bar] as const,
40
+ )
41
+ ```
42
+
43
+ Usage:
44
+
45
+ ```ts
46
+ let { foo, bar } = obj
47
+ let [foo, bar] = obj
48
+ ```
49
+
50
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
51
+
52
+ ## License
53
+
54
+ MIT
package/README.npm.md ADDED
@@ -0,0 +1,54 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-make-destructurable" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-make-destructurable</h1>
6
+
7
+ <p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/dm/vue-make-destructurable.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-make-destructurable/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-make-destructurable.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-make-destructurable
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { makeDestructurable } from 'vue-make-destructurable';
25
+ ```
26
+
27
+ Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
28
+
29
+ TypeScript Example:
30
+
31
+ ```ts
32
+ import { makeDestructurable } from 'vue-make-destructurable'
33
+
34
+ const foo = { name: 'foo' }
35
+ const bar = 1024
36
+
37
+ const obj = makeDestructurable(
38
+ { foo, bar } as const,
39
+ [foo, bar] as const,
40
+ )
41
+ ```
42
+
43
+ Usage:
44
+
45
+ ```ts
46
+ let { foo, bar } = obj
47
+ let [foo, bar] = obj
48
+ ```
49
+
50
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
51
+
52
+ ## License
53
+
54
+ MIT
package/banner.svg ADDED
@@ -0,0 +1,48 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
2
+ <defs>
3
+ <linearGradient id="banner-bg" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
5
+ <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
6
+ </linearGradient>
7
+ </defs>
8
+
9
+ <!-- Background -->
10
+ <rect width="1280" height="640" fill="url(#banner-bg)"/>
11
+
12
+ <!-- Decorative elements -->
13
+ <circle cx="200" cy="150" r="120" fill="#3498db" opacity="0.06"/>
14
+ <circle cx="1150" cy="500" r="100" fill="#3498db" opacity="0.06"/>
15
+
16
+ <!-- Top accent bar -->
17
+ <rect x="0" y="0" width="1280" height="8" fill="#3498db"/>
18
+
19
+ <!-- Vuefrag badge -->
20
+ <g transform="translate(80, 80)">
21
+ <rect width="140" height="50" rx="8" fill="#3498db"/>
22
+ <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>
23
+ </g>
24
+
25
+ <!-- Package name -->
26
+ <text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-make-destructurable</text>
27
+
28
+ <!-- Description -->
29
+ <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 utility enabling both object and array destructuring</text>
30
+
31
+ <!-- Install command -->
32
+ <g transform="translate(80, 420)">
33
+ <rect width="571.2" height="60" rx="8" fill="#0f172a"/>
34
+ <text x="20" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#94a3b8">npm install</text>
35
+ <text x="200" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#3498db">vue-make-destructurable</text>
36
+ </g>
37
+
38
+ <!-- Category badge -->
39
+ <g transform="translate(80, 520)">
40
+ <rect width="158" height="40" rx="20" fill="#3498db" opacity="0.2"/>
41
+ <text x="79" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#3498db">Utilities</text>
42
+ </g>
43
+
44
+ <!-- Category icon (top right corner) -->
45
+ <g>
46
+ <path d="M1040 120l-40 40 40 40" fill="none" stroke="#3498db" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><path d="M1120 120l40 40-40 40" fill="none" stroke="#3498db" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><line x1="1105" y1="110" x2="1055" y2="190" stroke="#3498db" stroke-width="10" stroke-linecap="round"/>
47
+ </g>
48
+ </svg>
package/dist/index.cjs ADDED
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ // @__NO_SIDE_EFFECTS__
4
+ function makeDestructurable(obj, arr) {
5
+ if (typeof Symbol !== "undefined") {
6
+ const clone = { ...obj };
7
+ Object.defineProperty(clone, Symbol.iterator, {
8
+ enumerable: false,
9
+ value() {
10
+ let index = 0;
11
+ return {
12
+ next: () => ({
13
+ value: arr[index++],
14
+ done: index > arr.length
15
+ })
16
+ };
17
+ }
18
+ });
19
+ return clone;
20
+ } else {
21
+ return Object.assign([...arr], obj);
22
+ }
23
+ }
24
+
25
+ exports.makeDestructurable = makeDestructurable;
package/dist/index.d.cts ADDED
@@ -0,0 +1,3 @@
1
+ declare function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(obj: T, arr: A): T & A;
2
+
3
+ export { makeDestructurable };
package/dist/index.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ declare function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(obj: T, arr: A): T & A;
2
+
3
+ export { makeDestructurable };
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(obj: T, arr: A): T & A;
2
+
3
+ export { makeDestructurable };
package/dist/index.mjs ADDED
@@ -0,0 +1,23 @@
1
+ // @__NO_SIDE_EFFECTS__
2
+ function makeDestructurable(obj, arr) {
3
+ if (typeof Symbol !== "undefined") {
4
+ const clone = { ...obj };
5
+ Object.defineProperty(clone, Symbol.iterator, {
6
+ enumerable: false,
7
+ value() {
8
+ let index = 0;
9
+ return {
10
+ next: () => ({
11
+ value: arr[index++],
12
+ done: index > arr.length
13
+ })
14
+ };
15
+ }
16
+ });
17
+ return clone;
18
+ } else {
19
+ return Object.assign([...arr], obj);
20
+ }
21
+ }
22
+
23
+ export { makeDestructurable };
package/logo.svg ADDED
@@ -0,0 +1,31 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="256" height="256">
2
+ <defs>
3
+ <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
5
+ <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
6
+ </linearGradient>
7
+ </defs>
8
+
9
+ <!-- Background -->
10
+ <rect width="96" height="96" rx="16" fill="url(#bg-grad)"/>
11
+
12
+ <!-- Vue badge -->
13
+ <g transform="translate(8, 8)">
14
+ <rect width="18" height="9" rx="2" fill="#3498db"/>
15
+ <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>
16
+ </g>
17
+
18
+ <!-- Category icon -->
19
+ <g>
20
+ <path d="M42 20l-8 8 8 8" fill="none" stroke="#3498db" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M54 20l8 8-8 8" fill="none" stroke="#3498db" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><line x1="51" y1="18" x2="45" y2="38" stroke="#3498db" stroke-width="2" stroke-linecap="round"/>
21
+ </g>
22
+
23
+ <!-- Function name - textLength ensures it fits within bounds -->
24
+ <text x="48" y="60" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" font-weight="600" fill="white" textLength="79.8" lengthAdjust="spacingAndGlyphs">Make Destructurable</text>
25
+
26
+ <!-- Category label -->
27
+ <text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#3498db" opacity="0.85">Utilities</text>
28
+
29
+ <!-- Bottom accent line -->
30
+ <rect x="28" y="82" width="40" height="2" rx="1" fill="#3498db" opacity="0.5"/>
31
+ </svg>
package/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "vue-make-destructurable",
3
+ "version": "1.0.0",
4
+ "description": "Vue 3 utility enabling both object and array destructuring",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/index.mjs",
11
+ "require": "./dist/index.cjs",
12
+ "types": "./dist/index.d.ts"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist",
17
+ "logo.svg",
18
+ "banner.svg"
19
+ ],
20
+ "scripts": {
21
+ "build": "unbuild",
22
+ "prepublishOnly": "cp README.npm.md README.md && npm run build",
23
+ "postpublish": "cp README.github.md README.md"
24
+ },
25
+ "keywords": [
26
+ "vue",
27
+ "vue3",
28
+ "vue-3",
29
+ "composable",
30
+ "composition-api",
31
+ "vueuse",
32
+ "utility",
33
+ "helper",
34
+ "utils",
35
+ "make",
36
+ "destructurable",
37
+ "destructure",
38
+ "array",
39
+ "object",
40
+ "isomorphic",
41
+ "dual",
42
+ "flexible",
43
+ "spread",
44
+ "makeDestructurable"
45
+ ],
46
+ "author": "VueFrag",
47
+ "license": "MIT",
48
+ "repository": {
49
+ "type": "git",
50
+ "url": "git+https://github.com/vuefrag/vue-make-destructurable.git"
51
+ },
52
+ "bugs": {
53
+ "url": "https://github.com/vuefrag/vue-make-destructurable/issues"
54
+ },
55
+ "homepage": "https://github.com/vuefrag/vue-make-destructurable#readme",
56
+ "peerDependencies": {
57
+ "vue": ">=3.0.0"
58
+ },
59
+ "devDependencies": {
60
+ "unbuild": "^2.0.0",
61
+ "typescript": "^5.0.0",
62
+ "vue": "^3.4.0"
63
+ }
64
+ }