web: support schema.rb for rendering ER diagrams

.changeset/nervous-eyes-check.md

@@ -0,0 +1,5 @@
+---
+"@liam-hq/db-structure": patch
+---
+
+:sparkles: prism's wasm URL can now be overridden

frontend/apps/erd-web/.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+prism.wasm

frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx

@@ -1,4 +1,6 @@
-import { parse } from '@liam-hq/db-structure/parser'
+// biome-ignore lint/correctness/noNodejsModules: Required for the server component to read the wasm file
+import path from 'node:path'
+import { parse, setPrismWasmUrl } from '@liam-hq/db-structure/parser'
 import { cookies } from 'next/headers'
 import { notFound } from 'next/navigation'
 import ERDViewer from './erdViewer'
@@ -23,8 +25,10 @@ export default async function Page({
 
   const input = await res.text()
 
-  // Currently supports Postgres only
-  const { value: dbStructure, errors } = await parse(input, 'postgres')
+  setPrismWasmUrl(path.resolve(process.cwd(), 'prism.wasm'))
+
+  // Currently supports schema.rb only
+  const { value: dbStructure, errors } = await parse(input, 'schemarb')
   if (errors.length > 0) {
     for (const error of errors) {
       console.error(error)

frontend/apps/erd-web/next.config.ts

@@ -6,6 +6,9 @@ const gitCommitHash = execSync('git rev-parse --short HEAD').toString().trim()
 const releaseDate = new Date().toISOString().split('T')[0]
 
 const nextConfig: NextConfig = {
+  outputFileTracingIncludes: {
+    '/erd/p/\\[\\.\\.\\.slug\\]': ['./prism.wasm'],
+  },
   env: {
     NEXT_PUBLIC_GIT_HASH: gitCommitHash,
     NEXT_PUBLIC_RELEASE_DATE: releaseDate,

frontend/apps/erd-web/package.json

@@ -24,6 +24,7 @@
     "fmt:biome": "biome check --write --unsafe .",
     "lint": "pnpm run '/^lint:.*/'",
     "lint:biome": "biome check .",
+    "postinstall": "cp ../../packages/db-structure/src/parser/schemarb/prism.wasm prism.wasm",
     "start": "next start"
   }
 }

frontend/packages/db-structure/src/parser.ts

@@ -2,4 +2,5 @@ export {
   parse,
   type SupportedFormat,
   supportedFormatSchema,
+  setPrismWasmUrl,
 } from './parser/index.js'

frontend/packages/db-structure/src/parser/index.ts

@@ -3,6 +3,8 @@ import { processor as schemarbProcessor } from './schemarb/index.js'
 import { processor as postgresqlProcessor } from './sql/index.js'
 import type { ProcessResult } from './types.js'
 
+export { setPrismWasmUrl } from './schemarb/index.js'
+
 export const supportedFormatSchema = v.union([
   v.literal('schemarb'),
   v.literal('postgres'),

frontend/packages/db-structure/src/parser/schemarb/index.ts

@@ -2,3 +2,4 @@ export {
   processor,
   UnsupportedTokenError,
 } from './parser.js'
+export { setPrismWasmUrl } from './loadPrism.js'

frontend/packages/db-structure/src/parser/schemarb/loadPrism.ts

@@ -21,8 +21,15 @@ import { WASI } from 'node:wasi'
 import type { ParseResult } from '@ruby/prism/src/deserialize.js'
 import { parsePrism } from '@ruby/prism/src/parsePrism.js'
 
+let overrideWasmUrl: string | undefined = undefined
+
+export const setPrismWasmUrl = (url: string): void => {
+  overrideWasmUrl = url
+}
+
 export async function loadPrism(): Promise<(source: string) => ParseResult> {
-  const path = fileURLToPath(new URL('prism.wasm', import.meta.url))
+  const path =
+    overrideWasmUrl ?? fileURLToPath(new URL('prism.wasm', import.meta.url))
   const wasm = await WebAssembly.compile(await readFile(path))
 
   const wasi = new WASI({ version: 'preview1' })

turbo.json

@@ -14,6 +14,11 @@
       "cache": false,
       "persistent": true
     },
+    "@liam-hq/erd-web#dev": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
     "gen": {
       "dependsOn": ["^gen"]
     },