Feat/block remix (#191)

* feat(block): remix

* feat(core): createTable API

* feat(core): uploadFile API

* fix(block): code update

* feat(block): standalone block window

* chore: simplify environment variable management

* build(desktop): support different build configs for dev and prod

* feat(block): bindings

* fix: correct Blob size property in file streaming response

* fix: update script & file api

* fix: support nested file paths

* fix: improve remix prompt

* feat(block): open block standalone

* refactor(extension): better UX for update settings

* feat(block): toggle preview

* feat(extension): code editor supports switcing theme

* fix: make remix feature desktop-only

* Update to version 0.10.0

apps/desktop/[database]/layout.tsx

@@ -1,19 +1,7 @@
-import { Suspense, lazy, useEffect } from "react"
 import { useLocalStorageState } from "ahooks"
-import { Outlet, useNavigate } from "react-router-dom"
+import { Suspense, lazy, useEffect } from "react"
+import { Outlet, useLocation, useNavigate } from "react-router-dom"
 
-import { EidosDataEventChannelName } from "@/lib/const"
-import { useAppStore } from "@/lib/store/app-store"
-import { useAppRuntimeStore } from "@/lib/store/runtime-store"
-import { cn } from "@/lib/utils"
-import { useActivation } from "@/hooks/use-activation"
-import { useEidosFileSystemManager } from "@/hooks/use-fs"
-import { useSqlite } from "@/hooks/use-sqlite"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
 import { BlockApp } from "@/components/block-renderer/block-app"
 import { DocExtBlockLoader } from "@/components/doc-ext-block-loader"
 import { KeyboardShortCuts } from "@/components/keyboard-shortcuts"
@@ -22,6 +10,17 @@ import { Nav } from "@/components/nav"
 import { RightPanelNav } from "@/components/nav/right-panel-nav"
 import { ScriptContainer } from "@/components/script-container"
 import { SideBar } from "@/components/sidebar"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { useActivation } from "@/hooks/use-activation"
+import { useEidosFileSystemManager } from "@/hooks/use-fs"
+import { useSqlite } from "@/hooks/use-sqlite"
+import { EidosDataEventChannelName } from "@/lib/const"
+import { useAppRuntimeStore } from "@/lib/store/runtime-store"
+import { cn, isStandaloneBlocksPath } from "@/lib/utils"
 
 import { useLayoutInit } from "../../web-app/[database]/hook"
 import { useAppsStore, useSpaceAppStore } from "../../web-app/[database]/store"
@@ -38,6 +37,7 @@ export function DesktopSpaceLayout() {
   const currentApp = apps[currentAppIndex]
   const navigate = useNavigate()
   const { isActivated } = useActivation()
+  const isBlocksPath = isStandaloneBlocksPath(useLocation().pathname)
 
   useLayoutInit()
   const { efsManager } = useEidosFileSystemManager()
@@ -75,6 +75,20 @@ export function DesktopSpaceLayout() {
       </div>
     )
   }
+  if (isBlocksPath) {
+    return (
+      <>
+        <ScriptContainer />
+
+        <div
+          id="main-content"
+          className="z-[1] flex w-screen h-screen grow overflow-hidden min-w-0"
+        >
+          <Outlet />
+        </div>
+      </>
+    )
+  }
 
   return (
     <>

apps/desktop/[database]/standalone-blocks/page.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react"
+import { useParams, useSearchParams } from "react-router-dom"
+
+import { useMblock } from "@/hooks/use-mblock"
+import { BlockApp } from "@/components/block-renderer/block-app"
+
+export default function BlockPage() {
+  const { id, database } = useParams()
+  const [searchParams] = useSearchParams()
+
+  const block = useMblock(id)
+  useEffect(() => {
+    if (block) {
+      // set title
+      document.title = `Eidos - ${block.name}`
+    }
+  }, [block])
+  return (
+    <>
+      <BlockApp url={`block://${id}@${database}?${searchParams.toString()}`} />
+    </>
+  )
+}

apps/desktop/hooks.ts

@@ -1,3 +1,4 @@
+import { isDesktopMode } from "@/lib/env"
 import { useEffect, useState } from "react"
 
 export const useDataFolderCheck = () => {
@@ -14,3 +15,38 @@ export const useDataFolderCheck = () => {
 
     return isDataFolderSet
 }
+
+interface PlaygroundFile {
+    name: string;
+    content: string;
+}
+
+interface PlaygroundOptions {
+    onChange: (filename: string, content: string, space: string, blockId: string) => void
+}
+export const usePlayground = ({ onChange }: PlaygroundOptions) => {
+
+    const initializePlayground = async (space: string, blockId: string, files: PlaygroundFile[]) => {
+        if (!isDesktopMode) {
+            return
+        }
+        return await window.eidos.initializePlayground(space, blockId, files)
+    }
+
+    useEffect(() => {
+        if (!isDesktopMode) {
+            return
+        }
+        const handlePlaygroundFileChanged = (event: any, data: { filename: string, content: string, space: string, blockId: string }) => {
+            onChange(data.filename, data.content, data.space, data.blockId)
+        }
+        window.eidos.on('playground-file-changed', handlePlaygroundFileChanged)
+        return () => {
+            window.eidos.off('playground-file-changed', handlePlaygroundFileChanged)
+        }
+    }, [])
+
+    return {
+        initializePlayground
+    }
+}

apps/desktop/index.tsx

@@ -2,13 +2,13 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import { RouterProvider, createBrowserRouter, redirect } from "react-router-dom"
 
-import "@/locales/i18n"
-import { DownloadPage } from "@/components/landing/download"
 import SettingsStoragePage from "@/apps/desktop/settings/storage/page"
 import NodePage from "@/apps/web-app/[database]/[node]/page"
 import EverydayPage from "@/apps/web-app/[database]/everyday/[day]/page"
 import EverydayHomePage from "@/apps/web-app/[database]/everyday/page"
 import { FileManager } from "@/apps/web-app/[database]/files/page"
+import { DownloadPage } from "@/components/landing/download"
+import "@/locales/i18n"
 // space
 import SpaceHomePage from "@/apps/web-app/[database]/page"
 import { LandingPage } from "@/apps/web-app/page"
@@ -36,6 +36,7 @@ import { ErrorBoundary } from "../web-app/error"
 import { LabPage } from "../web-app/lab"
 import { LicenseManagePage } from "../web-app/license-manage/page"
 import { DevtoolsPage } from "../web-app/settings/dev/page"
+import BlockPage from "./[database]/standalone-blocks/page"
 import { DesktopSpaceLayout } from "./[database]/layout"
 // extensions
 import RootLayout from "./layout"
@@ -129,6 +130,15 @@ const router = createBrowserRouter([
             index: true,
             element: <SpaceHomePage />,
           },
+          {
+            path: "standalone-blocks",
+            children: [
+              {
+                path: ":id",
+                element: <BlockPage />,
+              },
+            ],
+          },
           {
             path: "settings",
             element: <SpaceSetting />,

apps/web-app/[database]/[node]/node-cover.tsx

@@ -88,6 +88,7 @@ export const NodeCover = (props: { node: ITreeNode }) => {
             code={block?.ts_code ?? ""}
             compiledCode={block?.code ?? ""}
             env={block?.env_map}
+            bindings={block?.bindings}
             width={size?.width}
             height={size?.height}
           />