vue-create-global-state 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 +48 -0
  2. package/README.md +48 -0
  3. package/README.npm.md +48 -0
  4. package/banner.svg +48 -0
  5. package/dist/index.cjs +19 -0
  6. package/dist/index.d.cts +14 -0
  7. package/dist/index.d.mts +14 -0
  8. package/dist/index.d.ts +14 -0
  9. package/dist/index.mjs +17 -0
  10. package/logo.svg +13 -0
  11. package/package.json +52 -0
package/README.github.md ADDED
@@ -0,0 +1,48 @@
1
+ <p align="center">
2
+ <img src="banner.svg" alt="vue-create-global-state" width="100%" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-create-global-state</h1>
6
+
7
+ <p align="center"></p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/v/vue-create-global-state.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/dm/vue-create-global-state.svg" alt="npm downloads" /></a>
12
+ </p>
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install vue-create-global-state
18
+ ```
19
+
20
+ ## Usage
21
+
22
+ > **Note:** This example has been hand-crafted for clarity. Original example uses useStorage for persistence - providing memory-based alternative
23
+
24
+ ```ts
25
+ import { createGlobalState } from 'vue-create-global-state'
26
+ import { ref, computed } from 'vue'
27
+
28
+ export const useGlobalState = createGlobalState(() => {
29
+ const count = ref(0)
30
+ const doubled = computed(() => count.value * 2)
31
+ const increment = () => count.value++
32
+
33
+ return { count, doubled, increment }
34
+ })
35
+
36
+ const state = useGlobalState()
37
+ console.log(state.count.value) // 0
38
+
39
+ state.increment()
40
+ console.log(state.count.value) // 1
41
+ console.log(state.doubled.value) // 2
42
+ ```
43
+
44
+ ## License
45
+
46
+ MIT
47
+
48
+ Extracted from [VueUse](https://vueuse.org/) for standalone use.
package/README.md ADDED
@@ -0,0 +1,48 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-create-global-state" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-create-global-state</h1>
6
+
7
+ <p align="center"></p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/v/vue-create-global-state.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/dm/vue-create-global-state.svg" alt="npm downloads" /></a>
12
+ </p>
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install vue-create-global-state
18
+ ```
19
+
20
+ ## Usage
21
+
22
+ > **Note:** This example has been hand-crafted for clarity. Original example uses useStorage for persistence - providing memory-based alternative
23
+
24
+ ```ts
25
+ import { createGlobalState } from 'vue-create-global-state'
26
+ import { ref, computed } from 'vue'
27
+
28
+ export const useGlobalState = createGlobalState(() => {
29
+ const count = ref(0)
30
+ const doubled = computed(() => count.value * 2)
31
+ const increment = () => count.value++
32
+
33
+ return { count, doubled, increment }
34
+ })
35
+
36
+ const state = useGlobalState()
37
+ console.log(state.count.value) // 0
38
+
39
+ state.increment()
40
+ console.log(state.count.value) // 1
41
+ console.log(state.doubled.value) // 2
42
+ ```
43
+
44
+ ## License
45
+
46
+ MIT
47
+
48
+ Extracted from [VueUse](https://vueuse.org/) for standalone use.
package/README.npm.md ADDED
@@ -0,0 +1,48 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-create-global-state" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-create-global-state</h1>
6
+
7
+ <p align="center"></p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/v/vue-create-global-state.svg" alt="npm version" /></a>
11
+ <a href="https://www.npmjs.com/package/vue-create-global-state"><img src="https://img.shields.io/npm/dm/vue-create-global-state.svg" alt="npm downloads" /></a>
12
+ </p>
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install vue-create-global-state
18
+ ```
19
+
20
+ ## Usage
21
+
22
+ > **Note:** This example has been hand-crafted for clarity. Original example uses useStorage for persistence - providing memory-based alternative
23
+
24
+ ```ts
25
+ import { createGlobalState } from 'vue-create-global-state'
26
+ import { ref, computed } from 'vue'
27
+
28
+ export const useGlobalState = createGlobalState(() => {
29
+ const count = ref(0)
30
+ const doubled = computed(() => count.value * 2)
31
+ const increment = () => count.value++
32
+
33
+ return { count, doubled, increment }
34
+ })
35
+
36
+ const state = useGlobalState()
37
+ console.log(state.count.value) // 0
38
+
39
+ state.increment()
40
+ console.log(state.count.value) // 1
41
+ console.log(state.doubled.value) // 2
42
+ ```
43
+
44
+ ## License
45
+
46
+ MIT
47
+
48
+ Extracted from [VueUse](https://vueuse.org/) for standalone use.
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="#9b59b6" opacity="0.06"/>
14
+ <circle cx="1150" cy="500" r="100" fill="#9b59b6" opacity="0.06"/>
15
+
16
+ <!-- Top accent bar -->
17
+ <rect x="0" y="0" width="1280" height="8" fill="#9b59b6"/>
18
+
19
+ <!-- Vuefrag badge -->
20
+ <g transform="translate(80, 80)">
21
+ <rect width="140" height="50" rx="8" fill="#9b59b6"/>
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-create-global-state</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 composable utility</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="#9b59b6">vue-create-global-state</text>
36
+ </g>
37
+
38
+ <!-- Category badge -->
39
+ <g transform="translate(80, 520)">
40
+ <rect width="102" height="40" rx="20" fill="#9b59b6" opacity="0.2"/>
41
+ <text x="51" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#9b59b6">State</text>
42
+ </g>
43
+
44
+ <!-- Category icon (top right corner) -->
45
+ <g>
46
+ <rect x="980" y="100" width="200" height="100" rx="15" fill="#9b59b6"/><rect x="1000" y="120" width="160" height="15" rx="5" fill="#2c3e50" opacity="0.4"/><rect x="1000" y="150" width="120" height="15" rx="5" fill="#2c3e50" opacity="0.4"/><rect x="1000" y="180" width="140" height="15" rx="5" fill="#2c3e50" opacity="0.4"/>
47
+ </g>
48
+ </svg>
package/dist/index.cjs ADDED
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ const vue = require('vue');
4
+
5
+ // @__NO_SIDE_EFFECTS__
6
+ function createGlobalState(stateFactory) {
7
+ let initialized = false;
8
+ let state;
9
+ const scope = vue.effectScope(true);
10
+ return (...args) => {
11
+ if (!initialized) {
12
+ state = scope.run(() => stateFactory(...args));
13
+ initialized = true;
14
+ }
15
+ return state;
16
+ };
17
+ }
18
+
19
+ exports.createGlobalState = createGlobalState;
package/dist/index.d.cts ADDED
@@ -0,0 +1,14 @@
1
+ type AnyFn = (...args: any[]) => any;
2
+ type CreateGlobalStateReturn<Fn extends AnyFn = AnyFn> = Fn;
3
+ /**
4
+ * Keep states in the global scope to be reusable across Vue instances.
5
+ *
6
+ * @see https://vueuse.org/createGlobalState
7
+ * @param stateFactory A factory function to create the state
8
+ *
9
+ * @__NO_SIDE_EFFECTS__
10
+ */
11
+ declare function createGlobalState<Fn extends AnyFn>(stateFactory: Fn): CreateGlobalStateReturn<Fn>;
12
+
13
+ export { createGlobalState };
14
+ export type { CreateGlobalStateReturn };
package/dist/index.d.mts ADDED
@@ -0,0 +1,14 @@
1
+ type AnyFn = (...args: any[]) => any;
2
+ type CreateGlobalStateReturn<Fn extends AnyFn = AnyFn> = Fn;
3
+ /**
4
+ * Keep states in the global scope to be reusable across Vue instances.
5
+ *
6
+ * @see https://vueuse.org/createGlobalState
7
+ * @param stateFactory A factory function to create the state
8
+ *
9
+ * @__NO_SIDE_EFFECTS__
10
+ */
11
+ declare function createGlobalState<Fn extends AnyFn>(stateFactory: Fn): CreateGlobalStateReturn<Fn>;
12
+
13
+ export { createGlobalState };
14
+ export type { CreateGlobalStateReturn };
package/dist/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ type AnyFn = (...args: any[]) => any;
2
+ type CreateGlobalStateReturn<Fn extends AnyFn = AnyFn> = Fn;
3
+ /**
4
+ * Keep states in the global scope to be reusable across Vue instances.
5
+ *
6
+ * @see https://vueuse.org/createGlobalState
7
+ * @param stateFactory A factory function to create the state
8
+ *
9
+ * @__NO_SIDE_EFFECTS__
10
+ */
11
+ declare function createGlobalState<Fn extends AnyFn>(stateFactory: Fn): CreateGlobalStateReturn<Fn>;
12
+
13
+ export { createGlobalState };
14
+ export type { CreateGlobalStateReturn };
package/dist/index.mjs ADDED
@@ -0,0 +1,17 @@
1
+ import { effectScope } from 'vue';
2
+
3
+ // @__NO_SIDE_EFFECTS__
4
+ function createGlobalState(stateFactory) {
5
+ let initialized = false;
6
+ let state;
7
+ const scope = effectScope(true);
8
+ return (...args) => {
9
+ if (!initialized) {
10
+ state = scope.run(() => stateFactory(...args));
11
+ initialized = true;
12
+ }
13
+ return state;
14
+ };
15
+ }
16
+
17
+ export { createGlobalState };
package/logo.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
2
+ <!-- Background -->
3
+ <rect width="96" height="96" rx="16" fill="#2c3e50"/>
4
+
5
+ <!-- Primary shape -->
6
+ <circle cx="48" cy="42" r="20" fill="#9b59b6"/>
7
+
8
+ <!-- Function name -->
9
+ <text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#9b59b6" opacity="0.85">State</text>
10
+
11
+ <!-- Bottom accent line -->
12
+ <rect x="28" y="82" width="40" height="2" rx="1" fill="#9b59b6" opacity="0.5"/>
13
+ </svg>
package/package.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "vue-create-global-state",
3
+ "version": "1.0.0",
4
+ "description": "Vue 3 composable utility",
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
+ "README.md"
20
+ ],
21
+ "scripts": {
22
+ "build": "unbuild",
23
+ "prepublishOnly": "cp README.npm.md README.md && npm run build",
24
+ "postpublish": "cp README.github.md README.md"
25
+ },
26
+ "keywords": [
27
+ "global",
28
+ "state",
29
+ "shared",
30
+ "store",
31
+ "singleton",
32
+ "cross-component"
33
+ ],
34
+ "author": "VueFrag",
35
+ "license": "MIT",
36
+ "repository": {
37
+ "type": "git",
38
+ "url": "git+https://github.com/vuefrag/vue-create-global-state.git"
39
+ },
40
+ "bugs": {
41
+ "url": "https://github.com/vuefrag/vue-create-global-state/issues"
42
+ },
43
+ "homepage": "https://github.com/vuefrag/vue-create-global-state#readme",
44
+ "peerDependencies": {
45
+ "vue": ">=3.0.0"
46
+ },
47
+ "devDependencies": {
48
+ "unbuild": "^2.0.0",
49
+ "typescript": "^5.0.0",
50
+ "vue": "^3.4.0"
51
+ }
52
+ }