chore: tweaks

wevm · Mar 13, 2024 · cb2a420 · cb2a420
1 parent 925b634
commit cb2a420
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 21 deletions.
diff --git a/.scripts/postbuild.ts b/.scripts/postbuild.ts
@@ -1,13 +1,12 @@
 import { resolve } from 'node:path'
 import glob from 'fast-glob'
-import { copy, rename, remove } from 'fs-extra'
+import { copy, rename } from 'fs-extra'
 
 await copyDist()
 await rewriteHonoJsx()
 await prepareTemplates()
 
 async function copyDist() {
-  await remove('./src/ui/index.html')
   await copy('./src/ui', './src/_lib/ui')
 }
 

diff --git a/src/dev/devtools.tsx b/src/dev/devtools.tsx
@@ -16,7 +16,7 @@ export type DevtoolsOptions = Pretty<
   Pretty<ApiRoutesOptions> & {
     assetsPath?: string
     /**
-     * The base path for the devtools instance.
+     * The base path for the devtools instance off the Frog instances `basePath`.
      *
      * @default '/dev'
      */
@@ -44,7 +44,7 @@ export function devtools<
   basePath extends string,
   ///
   state = env['State'],
->(frog: FrogBase<env, schema, basePath, state>, options: DevtoolsOptions) {
+>(frog: FrogBase<env, schema, basePath, state>, options: DevtoolsOptions = {}) {
   const {
     appFid,
     appMnemonic,
@@ -60,12 +60,6 @@ export function devtools<
   else if (serveStatic) publicPath = `.${basePath}`
   else publicPath = frog.assetsPath === '/' ? '' : frog.assetsPath
 
-  // TODO:
-  // - vercel-build output to public dir (works with `publicPath`)
-  // - rewrite `@hono/vite-dev-server` (`@vite/client` to frames, `frog-client` to devtools)
-  // - route to /:path/dev
-  // - middleware?
-
   app
     .get('/', (c) => {
       return c.html(
@@ -83,16 +77,19 @@ export function devtools<
               <script type="module">
                 {html`globalThis.__FROG_BASE_URL__ = '${c.req.url}'`}
               </script>
+              <script type="module">
+                {html`globalThis.__FROG_CLIENT__ = false`}
+              </script>
 
               <script
                 type="module"
                 crossorigin=""
-                src={`${publicPath}/index.js`}
+                src={`${publicPath}/main.js`}
               />
               <link
                 rel="stylesheet"
                 crossorigin=""
-                href={`${publicPath}/assets/index.css`}
+                href={`${publicPath}/assets/main.css`}
               />
             </head>
             <body>

diff --git a/src/node/index.ts b/src/node/index.ts
@@ -0,0 +1 @@
+export { serveStatic } from '@hono/node-server/serve-static'
diff --git a/src/node/package.json b/src/node/package.json
@@ -0,0 +1,5 @@
+{
+  "type": "module",
+  "types": "../_lib/node/index.d.ts",
+  "module": "../_lib/node/index.js"
+}
diff --git a/src/package.json b/src/package.json
@@ -51,6 +51,10 @@
       "types": "./_lib/next/index.d.ts",
       "default": "./_lib/next/index.js"
     },
+    "./node": {
+      "types": "./_lib/node/index.d.ts",
+      "default": "./_lib/node/index.js"
+    },
     "./vercel": {
       "types": "./_lib/vercel/index.d.ts",
       "default": "./_lib/vercel/index.js"

diff --git a/ui/src/lib/frog-client.ts b/ui/src/lib/frog-client.ts
@@ -5,17 +5,30 @@ import { HMRPayload } from 'vite/types/hmrPayload.js'
 import { client } from './api'
 import { store } from './store'
 
-console.debug('[frog] connecting...')
+declare const __FROG_CLIENT__: string | undefined
 
-const importMetaUrl = new URL(import.meta.url)
+export function initFrogClient() {
+  const enabled = (() => {
+    try {
+      return typeof __FROG_CLIENT__ === 'boolean' && __FROG_CLIENT__ === true
+    } catch {
+      return false
+    }
+  })()
+  if (!enabled) return
+
+  console.debug('[frog] connecting...')
 
-const socketProtocol = importMetaUrl.protocol === 'https:' ? 'wss' : 'ws'
-const socketHost = `${importMetaUrl.hostname}:${importMetaUrl.port}/`
+  const importMetaUrl = new URL(import.meta.url)
 
-try {
-  setupWebSocket(socketProtocol, socketHost)
-} catch (error) {
-  console.error(`[frog] failed to connect to websocket (${error}). `)
+  const socketProtocol = importMetaUrl.protocol === 'https:' ? 'wss' : 'ws'
+  const socketHost = `${importMetaUrl.hostname}:${importMetaUrl.port}/`
+
+  try {
+    setupWebSocket(socketProtocol, socketHost)
+  } catch (error) {
+    console.error(`[frog] failed to connect to websocket (${error}). `)
+  }
 }
 
 function setupWebSocket(

diff --git a/ui/src/main.tsx b/ui/src/main.tsx
@@ -2,12 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import { App } from './App.tsx'
+import { initFrogClient } from './lib/frog-client.ts'
 
-import './lib/frog-client.ts'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
 )
+
+initFrogClient()
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
@@ -8,6 +8,7 @@ export default defineConfig({
     copyPublicDir: false,
     emptyOutDir: true,
     rollupOptions: {
+      input: ['src/main.tsx'],
       output: {
         assetFileNames: 'assets/[name].[ext]',
         chunkFileNames: 'assets/[name].js',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { serveStatic } from '@hono/node-server/serve-static'