chore: deprecated @webview-bridge/vue (#69)

README.md

@@ -7,7 +7,6 @@
 [![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Freact-native/latest?label=%40webview-bridge%2Freact-native)](https://www.npmjs.com/package/@webview-bridge/react-native)
 [![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Fweb/latest?label=%40webview-bridge%2Fweb)](https://www.npmjs.com/package/@webview-bridge/web)
 [![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Freact/latest?label=%40webview-bridge%2Freact)](https://www.npmjs.com/package/@webview-bridge/react)
-[![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Fvue/latest?label=%40webview-bridge%2Fvue)](https://www.npmjs.com/package/@webview-bridge/vue)
 
 **Fully Type-Safe Integration for React Native WebView and Web**
 

docs/shared-state/vue.md

@@ -7,15 +7,15 @@ This guide integrates the state declared in [Shared State in React Native](./rea
 ::: code-group
 
 ```sh [npm]
-$ npm add @webview-bridge/vue @webview-bridge/web
+$ npm add @webview-bridge/web
 ```
 
 ```sh [pnpm]
-$ pnpm add @webview-bridge/vue @webview-bridge/web
+$ pnpm add @webview-bridge/web
 ```
 
 ```sh [yarn]
-$ yarn add @webview-bridge/vue @webview-bridge/web
+$ yarn add @webview-bridge/web
 ```
 
 :::
@@ -51,19 +51,42 @@ export type AppBridge = typeof appBridge;
 ### Web Part
 ```tsx
 // This file is src/bridge.ts
+import type { Bridge, BridgeStore } from "@webview-bridge/web";
+import { getCurrentInstance, onScopeDispose, ref } from "vue";
+
 import { linkBridge } from "@webview-bridge/web";
-import { ref } from "vue";
+import type { AppBridge } from "";
 
 export const isReady = ref(false);
 
 export const bridge = linkBridge<AppBridge>({
   throwOnError: true,
   onReady: () => {
-    console.log("bridge is ready");
     isReady.value = true;
+    console.log("bridge is ready");
   },
 });
 
+export const bridgeStore = bridge.store;
+
+export function useBridge<T extends Bridge>(
+  store: Omit<BridgeStore<T>, "setState">,
+) {
+  const state = ref(store.getState());
+
+  const unsubscribe = store.subscribe((newState) => {
+    state.value = newState;
+  });
+
+  if (getCurrentInstance()) {
+    onScopeDispose(() => {
+      unsubscribe?.();
+    });
+  }
+
+  return state;
+}
+
 ```
 
 ## useBridge
@@ -73,8 +96,7 @@ Insert the previously `bridge.store` as the first argument.
 
 ```vue
 <script setup lang="ts">
-import { bridge, isReady } from "./bridge";
-import { useBridge } from "@webview-bridge/vue";
+import { bridge, isReady, useBridge } from "./bridge";
 
 const bridgeStore = useBridge(bridge.store);
 </script>

example/shared-state-integration-vue/vue/package.json

@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@webview-bridge/vue": "workspace:^",
     "@webview-bridge/web": "workspace:^",
     "vue": "^3.5.12"
   },

example/shared-state-integration-vue/vue/src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { bridge, isReady } from "./bridge";
-import { useBridge } from "@webview-bridge/vue";
+import { bridge, isReady, useBridge } from "./bridge";
 
 const handleOpenInAppBrowser = () => {
   if (bridge.isNativeMethodAvailable("openInAppBrowser") === true) {

example/shared-state-integration-vue/vue/src/bridge.ts

@@ -1,6 +1,8 @@
+import type { Bridge, BridgeStore } from "@webview-bridge/web";
+import { getCurrentInstance, onScopeDispose, ref } from "vue";
+
 import { linkBridge } from "@webview-bridge/web";
 import type { AppBridge } from "@webview-bridge-example-shared-state-integration-vue/react-native/types";
-import { ref } from "vue";
 
 export const isReady = ref(false);
 
@@ -13,3 +15,21 @@ export const bridge = linkBridge<AppBridge>({
 });
 
 export const bridgeStore = bridge.store;
+
+export function useBridge<T extends Bridge>(
+  store: Omit<BridgeStore<T>, "setState">,
+) {
+  const state = ref(store.getState());
+
+  const unsubscribe = store.subscribe((newState) => {
+    state.value = newState;
+  });
+
+  if (getCurrentInstance()) {
+    onScopeDispose(() => {
+      unsubscribe?.();
+    });
+  }
+
+  return state;
+}