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

pages/example/@id/+Page.tsx

@@ -1,15 +1,21 @@
 import { useUnit } from "effector-react";
+import { clientOnly } from "vike-react/clientOnly";
 import { Link } from "~/shared/routing";
 
 import { $id } from "./model";
 
+const Component = clientOnly(() => import("./ClientComponent"));
+
 export function Page() {
   const id = useUnit($id);
 
   return (
     <div>
       <h1>Example</h1>
       <p>Read parameter from route: {id}</p>
+      <p>
+        Client id: <Component fallback="loading..." />
+      </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/ClientComponent.tsx

@@ -0,0 +1,12 @@
+import { useUnit } from "effector-react";
+
+import { $clientId } from "./model";
+
+// Since $clientId changes during client rendering to avoid hydration error we need to make consumer components only client
+const ClientComponent = () => {
+  const clientId = useUnit($clientId);
+
+  return <>{clientId}</>;
+};
+
+export default ClientComponent;

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,6 +14,9 @@ export default {
     pageStarted: {
       env: { client: true, server: true },
     },
+    pageClientStarted: {
+      env: { client: true, server: false },
+    },
     // https://effector.dev/en/api/effector/scope/
     scope: {
       env: { client: true, server: true },

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,16 @@
-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) {
+    await allSettled(pageClientStarted, { scope });
   }
+
+  pageContext.scopeValues = serialize(scope);
 }

renderer/types.ts

@@ -6,10 +6,8 @@ declare global {
     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>;
     }
   }