Export DesktopInterface from desktop and add PlatformContext

Author: Brendonovich

packages/desktop/index.html

@@ -23,6 +23,6 @@
     </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src="/src/index.tsx" type="module"></script>
+    <script src="/src/entry.tsx" type="module"></script>
   </body>
 </html>

packages/desktop/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "type": "module",
   "exports": {
-    ".": "./src/index.tsx",
+    ".": "./src/index.ts",
     "./vite": "./vite.js"
   },
   "scripts": {

packages/desktop/src/index.tsx packages/desktop/src/DesktopInterface.tsxpackages/desktop/src/index.tsx renamed to packages/desktop/src/DesktopInterface.tsx

@@ -1,6 +1,4 @@
-/* @refresh reload */
 import "@/index.css"
-import { render } from "solid-js/web"
 import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
@@ -27,15 +25,8 @@ const url =
     ? `http://${host}:${port}`
     : "/")
 
-const root = document.getElementById("root")
-if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
-    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
-  )
-}
-
-render(
-  () => (
+export function DesktopInterface() {
+  return (
     <MarkedProvider>
       <DiffComponentProvider component={Diff}>
         <GlobalSDKProvider url={url}>
@@ -72,6 +63,5 @@ render(
         </GlobalSDKProvider>
       </DiffComponentProvider>
     </MarkedProvider>
-  ),
-  root!,
-)
+  )
+}

packages/desktop/src/PlatformContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from "solid-js"
+import { useContext } from "solid-js"
+
+export interface Platform {}
+
+const PlatformContext = createContext<Platform>()
+
+export const PlatformProvider = PlatformContext.Provider
+
+export function usePlatform() {
+  const ctx = useContext(PlatformContext)
+  if (!ctx) throw new Error("usePlatform must be used within a PlatformProvider")
+  return ctx
+}

packages/desktop/src/entry.tsx

@@ -0,0 +1,22 @@
+// @refresh reload
+import { render } from "solid-js/web"
+import { DesktopInterface } from "@/DesktopInterface"
+import { Platform, PlatformProvider } from "@/PlatformContext"
+
+const root = document.getElementById("root")
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error(
+    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
+  )
+}
+
+const platform: Platform = {}
+
+render(
+  () => (
+    <PlatformProvider value={platform}>
+      <DesktopInterface />
+    </PlatformProvider>
+  ),
+  root!,
+)

packages/desktop/src/index.ts

@@ -0,0 +1,2 @@
+export { PlatformProvider, type Platform } from "./PlatformContext"
+export { DesktopInterface } from "./DesktopInterface"

packages/tauri/index.html

@@ -23,6 +23,6 @@
     </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src="/src/index.ts" type="module"></script>
+    <script src="/src/index.tsx" type="module"></script>
   </body>
 </html>

packages/tauri/src-tauri/src/lib.rs

@@ -4,7 +4,7 @@ use std::{
     sync::{Arc, Mutex},
     time::{Duration, Instant},
 };
-use tauri::{App, AppHandle, Manager, RunEvent, WebviewUrl, WebviewWindow};
+use tauri::{AppHandle, Manager, RunEvent, WebviewUrl, WebviewWindow};
 use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogResult};
 use tauri_plugin_shell::process::{CommandChild, CommandEvent};
 use tauri_plugin_shell::ShellExt;

packages/tauri/src/index.ts

@@ -0,0 +1,21 @@
+// @refresh reload
+import { render } from "solid-js/web"
+import { DesktopInterface, PlatformProvider, Platform } from "@opencode-ai/desktop"
+
+const root = document.getElementById("root")
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error(
+    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
+  )
+}
+
+const platform: Platform = {}
+
+render(
+  () => (
+    <PlatformProvider value={platform}>
+      <DesktopInterface />
+    </PlatformProvider>
+  ),
+  root!,
+)