effector-vue/ssr deprecated

beta/src/content/docs/en/api/effector-vue/EffectorScopePlugin.md

@@ -0,0 +1,24 @@
+---
+title: EffectorScopePlugin
+---
+
+The Plugin provides a general scope which needs for read and update effector's stores, call effector's events. Required for SSR.
+
+### Arguments {#EffectorScopePlugin-arguments}
+
+1. `scope` [Scope](/en/api/effector/Scope)
+2. `scopeName?` custom scopeName (default: `root`)
+
+```js
+import {createSSRApp} from "vue"
+import {EffectorScopePlugin} from "effector-vue
+import {fork} from "effector"
+
+const app = createSSRApp(AppComponent)
+const scope = fork()
+
+app.use(EffectorScopePlugin({
+  scope,
+  scopeName: "app-scope-name"
+}))
+```

beta/src/content/docs/en/api/effector-vue/VueSSRPlugin.md

@@ -5,6 +5,10 @@ redirectFrom:
   - /docs/api/effector-vue/VueSSRPlugin
 ---
 
+:::warning{title="Deprecated"}
+Since [effector 23.0.0](https://changelog.effector.dev/#effector-23-0-0) `VueSSRPlugin` is deprecated. Use [`EffectorScopePlugin`](./EffectorScopePlugin) instead.
+:::
+
 The Plugin provides a general scope which needs for read and update effector's stores, call effector's events. Required for SSR.
 
 ### Arguments {#VueSSRPlugin-arguments}

beta/src/content/docs/en/api/effector-vue/index.md

@@ -11,6 +11,7 @@ Effector binginds for Vue.
 
 - [VueEffector(Vue, options?)](/en/api/effector-vue/VueEffector)
 - [createComponent(ComponentOptions, store?)](/en/api/effector-vue/createComponent)
+- [EffectorScopePlugin({scope, scopeName?})](/en/api/effector-vue/EffectorScopePlugin)
 
 ### ComponentOptions API
 
@@ -29,3 +30,10 @@ Effector binginds for Vue.
 - [Gate](/en/api/effector-vue/Gate)
 - [createGate()](/en/api/effector-vue/createGate)
 - [useGate(GateComponent, props)](/en/api/effector-vue/useGate)
+
+## Import map
+
+Package `effector-vue` provides couple different entry points for different purposes:
+
+- [effector-vue/composition](/en/api/effector-vue/module/composition)
+- [effector-vue/ssr](/en/api/effector-vue/module/ssr)

beta/src/content/docs/en/api/effector-vue/module/composition.md

@@ -0,0 +1,13 @@
+---
+title: effector-vue/composition
+description: Separate module of effector-vue that provides additional API for composition API
+---
+
+Provides additional API for [effector-vue](/en/api/effector-vue) that allows to use [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)
+
+## APIs
+
+- [useUnit(shape)](/en/api/effector-vue/useUnit)
+- [useStore(store)](/en/api/effector-vue/useStore)
+- [useStoreMap({store, keys, fn})](/en/api/effector-vue/useStoreMap)
+- [useVModel(store)](/en/api/effector-vue/useVModel)

beta/src/content/docs/en/api/effector-vue/module/ssr.md

@@ -0,0 +1,15 @@
+---
+title: effector-vue/ssr
+description: Deprecated separate module of effector-vue that enforces library to use Scope
+---
+
+:::warning{title="Deprecated"}
+Since [effector 23.0.0](https://changelog.effector.dev/#effector-23-0-0) the core team recommends using main module of `effector-vue` of `effector-vue/composition` instead.
+:::
+
+Provides additional API for [effector-vue](/en/api/effector-vue) that enforces library to use [Scope](/en/api/effector/scope)
+
+## APIs
+
+- [`useEvent`](../useEvent)
+- [`VueSSRPlugin`](../VueSSRPlugin)

beta/src/content/docs/en/api/effector-vue/useEvent.md

@@ -5,6 +5,10 @@ redirectFrom:
   - /docs/api/effector-vue/useEvent
 ---
 
+:::warning{title="Deprecated"}
+Since [effector 23.0.0](https://changelog.effector.dev/#effector-23-0-0) `useEvent` is deprecated. Use [`useUnit`](./useUnit) instead.
+:::
+
 Bind event to current fork instance to use in dom event handlers. Used **only** with ssr, in application without forks `useEvent` will do nothing
 
 ## `useEvent(unit)` {#useEvent-unit}

beta/src/navigation.ts

@@ -338,6 +338,10 @@ const effectorVue = [
         text: { en: "VueEffector" },
         link: "/api/effector-vue/VueEffector",
       },
+      {
+        text: { en: "EffectorScopePlugin" },
+        link: "/api/effector-vue/EffectorScopePlugin",
+      },
       {
         text: { en: "createComponent" },
         link: "/api/effector-vue/createComponent",
@@ -350,11 +354,7 @@ const effectorVue = [
       {
         text: { en: "ComponentOptions" },
         link: "/api/effector-vue/ComponentOptions",
-      },
-      {
-        text: { en: "Vue" },
-        link: "/api/effector-vue/Vue",
-      },
+      }
     ],
   },
   {
@@ -401,9 +401,26 @@ const effectorVue = [
       {
         text: { en: "useEvent" },
         link: "/api/effector-vue/useEvent",
+      },
+      {
+        text: { en: "VueSSRPlugin" },
+        link: "/api/effector-vue/VueSSRPlugin",
       }
     ],
   },
+  {
+    text: { en: "Import map" },
+    items: [
+      {
+        text: { en: "effector-vue/composition" },
+        link: "/api/effector-vue/module/composition",
+      },
+      {
+        text: { en: "effector-vue/ssr" },
+        link: "/api/effector-vue/module/ssr",
+      },
+    ],
+  },
 ];
 
 const effector = [

packages/effector-vue/index.d.ts

@@ -1,22 +1,35 @@
-import Vue, {ComponentOptions, WatchOptions, VueConstructor} from 'vue'
+import Vue, {WatchOptions, VueConstructor} from 'vue'
 import {
   ThisTypedComponentOptionsWithArrayProps,
   ThisTypedComponentOptionsWithRecordProps,
 } from 'vue/types/options'
 import {ExtendedVue} from 'vue/types/vue'
-import {Store, Unit} from 'effector'
+import {Scope, Store, Unit} from 'effector'
 
 type Inference<EffectorState> = EffectorState extends Store<infer State>
   ? State
   : EffectorState extends {[storeName: string]: Store<any>}
-  ? {[K in keyof EffectorState]: EffectorState[K] extends Store<infer U> ? U : never}
+  ? {
+      [K in keyof EffectorState]: EffectorState[K] extends Store<infer U>
+        ? U
+        : never
+    }
   : EffectorState extends Unit<infer State>
   ? number
-  : never;
+  : never
 
-type EffectorType = Store<any> | {[key: string]: Store<any> | Unit<any>} | (() => Store<any> | Unit<any>)
+type EffectorType =
+  | Store<any>
+  | {[key: string]: Store<any> | Unit<any>}
+  | (() => Store<any> | Unit<any>)
 
-type ExpandType<V extends Vue, EffectorState extends EffectorType> = EffectorState extends ((this: V) => Store<infer State> | Unit<infer State>) | Store<infer State> | Unit<infer State>
+type ExpandType<
+  V extends Vue,
+  EffectorState extends EffectorType,
+> = EffectorState extends
+  | ((this: V) => Store<infer State> | Unit<infer State>)
+  | Store<infer State>
+  | Unit<infer State>
   ? {state: State}
   : EffectorState extends {[storeName: string]: Store<any> | Unit<any>}
   ? {[Key in keyof EffectorState]: Inference<EffectorState[Key]>}
@@ -29,24 +42,46 @@ declare module 'vue/types/vue' {
   }
 
   interface VueConstructor<V extends Vue> {
-    extend<EffectorState extends EffectorType, Data, Methods, Computed, PropNames extends string = never>(
-      options?: {effector?: EffectorState} & ThisTypedComponentOptionsWithArrayProps<
+    extend<
+      EffectorState extends EffectorType,
+      Data,
+      Methods,
+      Computed,
+      PropNames extends string = never,
+    >(
+      options?: {
+        effector?: EffectorState
+      } & ThisTypedComponentOptionsWithArrayProps<
         ExpandType<V, EffectorState> & V,
         Data,
         Methods,
         Computed,
         PropNames
       >,
-    ): ExtendedVue<ExpandType<V, EffectorState> & V, Data, Methods, Computed, Record<PropNames, any>>
+    ): ExtendedVue<
+      ExpandType<V, EffectorState> & V,
+      Data,
+      Methods,
+      Computed,
+      Record<PropNames, any>
+    >
     extend<EffectorState extends EffectorType, Data, Methods, Computed, Props>(
-      options?: {effector?: EffectorState} & ThisTypedComponentOptionsWithRecordProps<
+      options?: {
+        effector?: EffectorState
+      } & ThisTypedComponentOptionsWithRecordProps<
         ExpandType<V, EffectorState> & V,
         Data,
         Methods,
         Computed,
         Props
       >,
-    ): ExtendedVue<ExpandType<V, EffectorState> & V, Data, Methods, Computed, Props>
+    ): ExtendedVue<
+      ExpandType<V, EffectorState> & V,
+      Data,
+      Methods,
+      Computed,
+      Props
+    >
   }
 }
 
@@ -84,7 +119,7 @@ declare function createComponent<
   Data,
   Methods,
   Computed,
-  PropNames extends string
+  PropNames extends string,
 >(
   options: ThisTypedComponentOptionsWithArrayProps<
     V,
@@ -101,7 +136,7 @@ declare function createComponent<
   Data,
   Methods,
   Computed,
-  Props
+  Props,
 >(
   options: ThisTypedComponentOptionsWithRecordProps<
     Inference<S> & V,
@@ -118,7 +153,7 @@ declare function createComponent<
   Data,
   Methods,
   Computed,
-  PropNames extends string
+  PropNames extends string,
 >(
   options: ThisTypedComponentOptionsWithArrayProps<
     Inference<S> & V,
@@ -129,3 +164,8 @@ declare function createComponent<
   >,
   store?: S,
 ): ExtendedVue<Inference<S> & V, Data, Methods, Computed, PropNames>
+
+export function EffectorScopePlugin(config: {
+  scope: Scope
+  scopeName?: string
+}): Plugin

packages/effector-vue/ssr.d.ts

@@ -1,5 +1,8 @@
-import {Plugin} from 'vue';
-import {Scope, Event} from 'effector';
+import {Plugin} from 'vue'
+import {Scope, Event} from 'effector'
 
+/** @deprecated since v23.0.0 */
 export function VueSSRPlugin(config: {scope: Scope; scopeName?: string}): Plugin
+
+/** @deprecated since v23.0.0 */
 export function useEvent<T>(event: Event<T>): (payload: T) => void

src/vue/EffectorScopePlugin.ts

@@ -0,0 +1,16 @@
+import {Scope} from 'effector'
+import {Plugin} from 'vue-next'
+
+export function EffectorScopePlugin(options: {
+  scope: Scope
+  scopeName?: string
+}): Plugin {
+  return {
+    install(app) {
+      let scopeName = options.scopeName ?? 'root'
+
+      app.config.globalProperties.scopeName = scopeName
+      app.provide(app.config.globalProperties.scopeName, options.scope)
+    },
+  }
+}

src/vue/index.ts

@@ -109,3 +109,5 @@ export function createComponent<S>(options: any, store?: S) {
     ),
   )
 }
+
+export {EffectorScopePlugin} from './EffectorScopePlugin'

src/vue/ssr/VueSSRPlugin.ts

@@ -1,13 +1,21 @@
-import {Scope} from "effector"
-import {Plugin} from "vue-next"
+import {Scope} from 'effector'
+import {Plugin} from 'vue-next'
+
+/** @deprecated since v23.0.0 */
+export function VueSSRPlugin(options: {
+  scope: Scope
+  scopeName?: string
+}): Plugin {
+  console.error(
+    'VueSSRPlugin from effector-vue/ssr is deprecated, use EffectorScopePlugin from effector-vue instead',
+  )
 
-export function VueSSRPlugin(options: {scope: Scope; scopeName?: string}): Plugin {
   return {
     install(app) {
-      let scopeName = options.scopeName ?? "root"
+      let scopeName = options.scopeName ?? 'root'
 
       app.config.globalProperties.scopeName = scopeName
       app.provide(app.config.globalProperties.scopeName, options.scope)
-    }
+    },
   }
 }

src/vue/ssr/useEvent.ts

@@ -1,13 +1,18 @@
-import {Event, scopeBind} from "effector"
+import {Event, scopeBind} from 'effector'
 
-import {getScope} from "../lib/get-scope"
+import {getScope} from '../lib/get-scope'
 
+/** @deprecated since v23.0.0 */
 export function useEvent<T>(event: Event<T>) {
+  console.error(
+    'useEvent from effector-vue/ssr is deprecated, use useUnit from effector-vue/composition instead',
+  )
+
   let {scope} = getScope()
 
   if (scope) {
     return scopeBind(event, {
-      scope
+      scope,
     })
   }