feat(editor-standalone): load project from query

Author: Picalines

apps/editor-standalone/package.json

@@ -14,7 +14,8 @@
         "test:screen:update": "pnpm run test:screen --update-snapshots"
     },
     "imports": {
-        "#screens/*": "./src/screens/*/index.ts"
+        "#screens/*": "./src/screens/*/index.ts",
+        "#shared/lib/*": "./src/shared/lib/*/index.ts"
     },
     "dependencies": {
         "@effector/next": "catalog:",
@@ -24,6 +25,7 @@
         "effector": "catalog:",
         "effector-react": "catalog:",
         "effector-storage": "catalog:",
+        "nanoid": "catalog:",
         "next": "catalog:",
         "patronum": "catalog:",
         "react": "catalog:",

apps/editor-standalone/src/screens/editor/model/gate.ts

@@ -0,0 +1,22 @@
+import { createFactory } from '@withease/factories'
+import { sample } from 'effector'
+import { createGate } from 'effector-react'
+import { not, readonly } from 'patronum'
+
+export type EditorGate = ReturnType<typeof createEditorGate>
+
+export const createEditorGate = createFactory(() => {
+  const Gate = createGate<{}>()
+
+  const $isOpened = Gate.status
+
+  const opened = sample({ clock: $isOpened, filter: $isOpened })
+  const closed = sample({ clock: $isOpened, filter: not($isOpened) })
+
+  return {
+    $isOpened: readonly($isOpened),
+    Gate,
+    closed,
+    opened,
+  }
+})

apps/editor-standalone/src/screens/editor/model/index.ts

@@ -1 +1 @@
-export { defaultProject } from './default-project'
+export * as model from './screen'

apps/editor-standalone/src/screens/editor/model/project-serializer.ts

@@ -0,0 +1,47 @@
+import type { Project } from '@repo/editor'
+import { createFactory } from '@withease/factories'
+import { createEvent, createStore, sample } from 'effector'
+import { persist as persistInQuery } from 'effector-storage/query'
+import { once, readonly } from 'patronum'
+import { base64Url } from '#shared/lib/base64-url'
+import { defaultProject } from './default-project'
+import type { EditorGate } from './gate'
+
+export type ProjectSerializerStore = ReturnType<typeof createProjectSerializer>
+
+type Params = {
+  gate: EditorGate
+}
+
+export const createProjectSerializer = createFactory((params: Params) => {
+  const { gate } = params
+
+  const $loadedProject = createStore<Project>(defaultProject)
+
+  const userChangedProject = createEvent<Project>()
+  const storageUpdated = createEvent<Project | null>()
+
+  persistInQuery({
+    key: 'project',
+    source: userChangedProject,
+    pickup: sample({
+      clock: gate.opened,
+      // TODO: maybe find another way to fix this
+      filter: () => !process.env.STORYBOOK,
+    }),
+    target: storageUpdated,
+    serialize: obj => base64Url.encode(JSON.stringify(obj)),
+    deserialize: query => JSON.parse(base64Url.decode(query)) as Project,
+  })
+
+  sample({
+    clock: once(storageUpdated),
+    filter: project => project !== null,
+    target: $loadedProject,
+  })
+
+  return {
+    $loadedProject: readonly($loadedProject),
+    userChangedProject,
+  }
+})

apps/editor-standalone/src/screens/editor/model/screen.ts

@@ -0,0 +1,11 @@
+import { invoke } from '@withease/factories'
+import { createEditorGate } from './gate'
+import { createProjectSerializer } from './project-serializer'
+
+const gate = invoke(createEditorGate)
+const serializer = invoke(createProjectSerializer, { gate })
+
+const { Gate } = gate
+const { $loadedProject, userChangedProject } = serializer
+
+export { $loadedProject, Gate, userChangedProject }

apps/editor-standalone/src/screens/editor/ui/editor-screen.tsx

@@ -1,15 +1,26 @@
 'use client'
 
 import { Editor } from '@repo/editor'
-import type { FC } from 'react'
-import { defaultProject } from '../model'
+import { useUnit } from 'effector-react'
+import { nanoid } from 'nanoid'
+import { type FC, useMemo } from 'react'
+import { model } from '../model'
 import { EditorHeader } from './editor-header'
 
 export const EditorScreen: FC = () => {
+  const { loadedProject, onSerialized } = useUnit({
+    loadedProject: model.$loadedProject,
+    onSerialized: model.userChangedProject,
+  })
+
+  // remount Editor when a new project is loaded
+  const editorKey = useMemo(() => loadedProject && nanoid(), [loadedProject])
+
   return (
     <div className="flex h-screen w-screen flex-col">
+      <model.Gate />
       <EditorHeader />
-      <Editor initialProject={defaultProject} />
+      <Editor key={editorKey} initialProject={loadedProject} onSerialized={onSerialized} />
     </div>
   )
 }

apps/editor-standalone/src/shared/lib/base64-url/base64-url.ts

@@ -0,0 +1,12 @@
+export const encode = (str: string) => {
+  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(Number(`0x${p1}`))))
+}
+
+export const decode = (str: string) => {
+  return decodeURIComponent(
+    atob(str)
+      .split('')
+      .map(c => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`)
+      .join(''),
+  )
+}

apps/editor-standalone/src/shared/lib/base64-url/index.ts

@@ -0,0 +1 @@
+export * as base64Url from './base64-url'