removed scope from config; added pageClientStarted

.gitignore

@@ -193,3 +193,5 @@ dist
 # End of https://www.toptal.com/developers/gitignore/api/node,linux,macos
 
 dist
+
+.idea

package.json

@@ -32,6 +32,7 @@
     "node": ">=18.6.0"
   },
   "dependencies": {
+    "@effector/next": "^0.7.0",
     "@effector/reflect": "^9.2.0",
     "@fastify/accepts": "^4.3.0",
     "@fastify/compress": "^7.0.3",

pages/+Wrapper.tsx

@@ -1,11 +1,36 @@
 import type React from "react";
+import { useEffect, useRef } from "react";
 
-import { fork } from "effector";
-import { Provider } from "effector-react";
+import { EffectorNext } from "@effector/next";
+import { createEvent } from "effector";
+import { useUnit } from "effector-react";
 import { usePageContext } from "vike-react/usePageContext";
 
+const noop = createEvent();
+
+const Inner = () => {
+  const { config } = usePageContext();
+  const clientStartedRef = useRef(false);
+  const onClientStarted = useUnit(config.pageClientStarted ?? noop);
+
+  useEffect(() => {
+    if (!clientStartedRef.current && "pageClientStarted" in config) {
+      onClientStarted();
+      clientStartedRef.current = true;
+    }
+  }, []);
+
+  return <></>;
+};
+
 export default function WrapperEffector({ children }: { children: React.ReactNode }) {
-  const { scopeValues } = usePageContext();
+  const pageContext = usePageContext();
+  const { scopeValues } = pageContext;
 
-  return <Provider value={fork({ values: scopeValues })}>{children}</Provider>;
+  return (
+    <EffectorNext values={scopeValues}>
+      <Inner />
+      {children}
+    </EffectorNext>
+  );
 }

pages/example/@id/+Page.tsx

@@ -1,15 +1,22 @@
 import { useUnit } from "effector-react";
 import { Link } from "~/shared/routing";
 
-import { $id } from "./model";
+import { $random } from "../../index/model";
+import { $clientId, $id } from "./model";
 
 export function Page() {
   const id = useUnit($id);
+  const clientId = useUnit($clientId);
+  const random = useUnit($random);
 
   return (
     <div>
       <h1>Example</h1>
       <p>Read parameter from route: {id}</p>
+      <p>
+        Client id: {clientId}
+        random: {random}
+      </p>
       <Link href="/">Go home</Link>
     </div>
   );

pages/example/@id/+pageClientStarted.ts

@@ -0,0 +1,3 @@
+import { createEvent } from "effector";
+
+export const pageClientStarted = createEvent();

pages/example/@id/model.ts

@@ -1,9 +1,11 @@
 import { createStore, sample } from "effector";
 import { redirectTo } from "~/shared/routing";
 
+import { pageClientStarted } from "./+pageClientStarted";
 import { pageStarted } from "./+pageStarted";
 
 export const $id = createStore("");
+export const $clientId = createStore(0);
 
 const dataInitialized = sample({
   clock: pageStarted,
@@ -21,3 +23,9 @@ sample({
   fn: ({ sampleData: { id } }) => id,
   target: $id,
 });
+
+sample({
+  clock: pageClientStarted,
+  fn: () => 1,
+  target: $clientId,
+});

renderer/+config.ts

@@ -14,9 +14,8 @@ export default {
     pageStarted: {
       env: { client: true, server: true },
     },
-    // https://effector.dev/en/api/effector/scope/
-    scope: {
-      env: { client: true, server: true },
+    pageClientStarted: {
+      env: { client: true, server: false },
     },
   },
 

renderer/+onBeforeRender.ts

@@ -28,7 +28,6 @@ export const onBeforeRender: OnBeforeRenderAsync = async (pageContext) => {
 
   return {
     pageContext: {
-      scope,
       // https://effector.dev/en/api/effector/serialize
       scopeValues: serialize(scope),
     },

renderer/+onBeforeRenderClient.ts

@@ -1,14 +1,15 @@
-import { fork } from "effector";
+import { allSettled, fork, serialize } from "effector";
 
 // https://vike.dev/onBeforeRenderClient
-export function onBeforeRenderClient(pageContext: Vike.PageContext) {
+export async function onBeforeRenderClient(pageContext: Vike.PageContext) {
   // https://vike.dev/pageContext
-  if (!("scope" in pageContext)) {
-    return {
-      pageContext: {
-        // https://effector.dev/en/api/effector/fork/
-        scope: fork({ values: pageContext.scopeValues }),
-      },
-    };
+
+  const scope = fork({ values: pageContext.scopeValues });
+
+  const pageClientStarted = pageContext.config.pageClientStarted;
+
+  if (pageClientStarted && !pageContext.isHydration) {
+    await allSettled(pageClientStarted, { scope });
+    pageContext.scopeValues = serialize(scope);
   }
 }

renderer/types.ts

@@ -1,15 +1,13 @@
-import type { EventCallable, Scope } from "effector";
+import type { EventCallable } from "effector";
 
 // https://vike.dev/pageContext#typescript
 declare global {
   namespace Vike {
     interface PageContext {
       config: {
         pageStarted?: EventCallable<{ params: Record<string, string>; data: unknown }>;
+        pageClientStarted?: EventCallable<void>;
       };
-
-      // https://effector.dev/en/api/effector/scope/
-      scope?: Scope;
       scopeValues?: Record<string, unknown>;
     }
   }