@fugood/bricks-project 2.21.0-beta.14.test0 → 2.21.0-beta.14.test10

package/compile/index.ts

@@ -1,9 +1,13 @@
 import _ from 'lodash'
-import { parse as parseAST, ExportNamedDeclaration, FunctionDeclaration } from 'acorn'
+import { parse as parseAST } from 'acorn'
+import type { ExportNamedDeclaration, FunctionDeclaration } from 'acorn'
 import escodegen from 'escodegen'
-import {
+import { generateCalulationMap } from './util'
+import { templateActionNameMap } from './action-name-map'
+import type {
   Application,
   Data,
+  Animation,
   AnimationDef,
   AnimationComposeDef,
   EventAction,
@@ -19,14 +23,16 @@ import {
   DataCommand,
   Brick,
   Generator,
+  Canvas,
+  Subspace,
 } from '../types'
-import { generateCalulationMap } from './util'
 
 const compileProperty = (property, result = {}) => {
   if (Array.isArray(property)) {
     return property.map((p) => compileProperty(p, result))
   }
-  if (property?.__typename === 'DataLink' && property.data?.()) return `PROPERTY_BANK#${property.data().id}`
+  if (property?.__typename === 'DataLink' && property.data?.())
+    return `PROPERTY_BANK#${property.data().id}`
   if (typeof property === 'function') return property()?.id // defined type instance getter
   if (typeof property === 'object') {
     return Object.entries(property).reduce((acc, [key, value]) => {
@@ -54,14 +60,17 @@ const convertEventKey = (templateKey: string, key: string) => {
 
 const basicAnimationEvents = ['show', 'standby', 'breatheStart']
 
-const compileAnimations = (templateKey: string, animations: { [key: string]: () => Animation }) => {
+const compileAnimations = (templateKey: string, animations: { [key: string]: Animation }) => {
   return Object.entries(animations).reduce((acc, [key, animation]) => {
     acc[convertEventKey(basicAnimationEvents.includes(key) ? 'BRICK' : templateKey, key)] =
-      `ANIMATION#${animation().id}`
+      `ANIMATION#${animation.id}`
     return acc
   }, {})
 }
 
+const compileActionParam = (templateKey: string, actionName: string, paramName: string) =>
+  templateActionNameMap[templateKey]?.[actionName]?.[paramName] || paramName
+
 const compileEvents = (
   templateKey: string,
   eventMap: { [key: string]: Array<EventAction> },
@@ -72,35 +81,46 @@ const compileEvents = (
     acc[convertEventKey(templateKey, key)] = events.map((event) => {
       const { handler, action } = event
 
+      let handlerKey
+      let handlerTemplateKey
+      if (handler === 'system' || typeof handler === 'string') {
+        if (handler.startsWith('SUBSPACE_')) handlerKey = handler
+        else handlerKey = handler.toUpperCase()
+        if (handlerKey === 'SYSTEM') handlerTemplateKey = 'SYSTEM'
+      } else if (typeof handler === 'function') {
+        const instance = handler() as Brick | Generator
+        handlerKey = instance?.id
+        handlerTemplateKey = instance?.templateKey
+      }
+      if (!handlerKey) throw new Error(`Invalid handler: ${handler}`)
+
       const parameterList: Array<object> = []
       if (Object.hasOwn(action, 'params')) {
         const actionDef = action as ActionWithParams
         ;(actionDef.params || []).forEach(({ input, value, mapping }) => {
-          parameterList.push({
-            [camelCase ? 'inputToReceiver' : 'input_to_receiver']: input,
-            [camelCase ? 'resultFromSender' : 'result_from_sender']: compileProperty(value),
-            [camelCase ? 'resultDataMapping' : 'result_data_mapping']: mapping,
-          })
+          const param = {
+            [camelCase ? 'inputToReceiver' : 'input_to_receiver']: handlerTemplateKey
+              ? compileActionParam(handlerTemplateKey, action.__actionName, input)
+              : input,
+            [camelCase ? 'resultFromSender' : 'result_from_sender']:
+              mapping || compileProperty(value),
+          }
+          if (mapping) param[camelCase ? 'resultDataMapping' : 'result_data_mapping'] = true
+          parameterList.push(param)
         })
       } else if (Object.hasOwn(action, 'dataParams')) {
         const actionDef = action as ActionWithDataParams
         ;(actionDef.dataParams || []).forEach(({ input, value, mapping }) => {
           if (!input) return
-          parameterList.push({
+          const param = {
             [camelCase ? 'inputToReceiver' : 'input_to_receiver']: input().id,
-            [camelCase ? 'resultFromSender' : 'result_from_sender']: compileProperty(value),
-            [camelCase ? 'resultDataMapping' : 'result_data_mapping']: mapping,
-          })
+            [camelCase ? 'resultFromSender' : 'result_from_sender']:
+              mapping || compileProperty(value),
+          }
+          if (mapping) param[camelCase ? 'resultDataMapping' : 'result_data_mapping'] = true
+          parameterList.push(param)
         })
       }
-      let handlerKey
-      if (handler === 'system' || typeof handler === 'string') {
-        if (handler.startsWith('SUBSPACE_')) handlerKey = handler
-        else handlerKey = handler.toUpperCase()
-      } else if (typeof handler === 'function') {
-        handlerKey = (handler() as Brick | Generator)?.id
-      }
-      if (!handlerKey) throw new Error(`Invalid handler: ${handler}`)
       return {
         handler: handlerKey,
         action: action.__actionName,
@@ -115,22 +135,23 @@ const compileEvents = (
 const compileSwitchConds = (templateKey, conds) =>
   (conds || []).map((item: any) => {
     const result: any = { method: item.method }
-    if (item.__typename === 'SwitchCondData') {
-      const cond = item as SwitchCondData
+    if (item.cond.__typename === 'SwitchCondData') {
+      const cond = item.cond as SwitchCondData
       result.type = 'property_bank'
       result.key = cond.data().id
       result.value = cond.value
-    } else if (item.__typename === 'SwitchCondPropertyBankByItemKey') {
-      const cond = item as SwitchCondPropertyBankByItemKey
+    } else if (item.cond.__typename === 'SwitchCondPropertyBankByItemKey') {
+      const cond = item.cond as SwitchCondPropertyBankByItemKey
       result.type = 'property_bank_by_item_key'
       result.key = cond.data().id
       result.value = cond.value
-    } else if (item.__typename === 'SwitchCondInnerStateOutlet') {
+    } else if (item.cond.__typename === 'SwitchCondInnerStateOutlet') {
+      const cond = item.cond
       result.type = 'inner_state'
-      result.key = convertOutletKey(templateKey, item.outlet)
-      result.value = item.value
-    } else if (item.__typename === 'SwitchCondInnerStateCurrentCanvas') {
-      const cond = item as SwitchCondInnerStateCurrentCanvas
+      result.key = convertOutletKey(templateKey, cond.outlet)
+      result.value = cond.value
+    } else if (item.cond.__typename === 'SwitchCondInnerStateCurrentCanvas') {
+      const cond = item.cond as SwitchCondInnerStateCurrentCanvas
       result.type = 'inner_state'
       result.key = 'current_canvas'
       result.value = cond.value().id
@@ -167,6 +188,62 @@ const animationTypeMap = {
   AnimationDecayConfig: 'decay',
 }
 
+const compileFrame = (frame: Canvas['items'][number]['frame']) => ({
+  x: frame.x,
+  y: frame.y,
+  width: frame.width,
+  height: frame.height,
+  standby_mode: frame.standbyMode,
+  standby_frame: frame.standbyFrame,
+  standby_opacity: frame.standbyOpacity,
+  standby_delay: frame.standbyDelay,
+  standby_delay_random: frame.standbyDelayRandom,
+  standby_easing: frame.standbyEasing,
+  showing_delay: frame.showingDelay,
+  render_out_of_viewport: frame.renderOutOfViewport,
+})
+
+const compileKind = (kind: Data['kind']) => {
+  const { type, ...rest } = kind || {}
+  if (!type) return {}
+  return { kind: type, ...rest }
+}
+
+const compileRemoteUpdate = (remoteUpdate: Data['remoteUpdate']) => {
+  if (!remoteUpdate) return {}
+  if (remoteUpdate.type === 'auto') return { enable_remote_update: true }
+  return {
+    enable_remote_update: true,
+    ...(remoteUpdate.type === 'device-specific' ? { use_remote_id_prefix: true } : {}),
+    ...(remoteUpdate.type === 'global-data' ? { global_remote_update_prop: remoteUpdate.id } : {}),
+  }
+}
+
+const compileModule = (subspace: Subspace) => {
+  if (!subspace.module) return {}
+  return {
+    module: {
+      link: true,
+      id: subspace.module.id,
+      version: subspace.module.version,
+    },
+    selected_requirements: subspace.module.selectedRequirements?.reduce((acc, requirement) => {
+      acc[requirement.subspace] = {
+        id: requirement.id,
+        version: requirement.version,
+      }
+      return acc
+    }, {}),
+    requirements: subspace.module.requirements?.reduce((acc, requirement) => {
+      acc[requirement.subspace] = {
+        id: requirement.id,
+        version: requirement.version,
+      }
+      return acc
+    }, {}),
+  }
+}
+
 export const compile = (app: Application) => {
   const config = {
     title: app.name,
@@ -179,6 +256,11 @@ export const compile = (app: Application) => {
           height: subspace.layout?.height,
           resize_mode: subspace.layout?.resizeMode,
         },
+        local_sync: subspace.localSyncChangeCanvas
+          ? {
+              change_canvas: subspace.localSyncChangeCanvas,
+            }
+          : undefined,
         animation_map: subspace.animations.reduce((map, animation) => {
           if (animation.__typename === 'Animation') {
             const animationDef = animation as AnimationDef
@@ -212,22 +294,29 @@ export const compile = (app: Application) => {
               brickIdPrefix: itemBrick.brickIdPrefix,
               templateKey: itemBrick.templateKey,
               property: compileProperty(itemBrick.property),
+              propertyMapping: itemBrick.propertyMapping,
               animation: compileAnimations(itemBrick.templateKey, itemBrick.animation || {}),
               outlet: compileOutlets(itemBrick.templateKey, itemBrick.outlets || {}),
               eventMap: compileEvents(itemBrick.templateKey, itemBrick.eventMap || {}, {
                 camelCase: true,
               }),
-              stateGroup: itemBrick.stateGroup.map((stateGroup) => ({
-                ...stateGroup,
-                animation: compileAnimations(itemBrick.templateKey, stateGroup.animation || {}),
-                commented: stateGroup.disabled,
-                conds: compileSwitchConds(itemBrick.templateKey, stateGroup.conds || []),
-                property: compileProperty(stateGroup.property),
-                outlet: compileOutlets(itemBrick.templateKey, stateGroup.outlets || {}),
-                eventMap: compileEvents(itemBrick.templateKey, stateGroup.eventMap || {}, {
-                  camelCase: true,
-                }),
-              })),
+              stateGroup: itemBrick.stateGroup.reduce((acc, stateGroup) => {
+                acc[stateGroup.id] = {
+                  title: stateGroup.title,
+                  description: stateGroup.description,
+                  override: stateGroup.override,
+                  break: stateGroup.break,
+                  commented: stateGroup.disabled,
+                  conds: compileSwitchConds(itemBrick.templateKey, stateGroup.conds || []),
+                  property: compileProperty(stateGroup.property),
+                  animation: compileAnimations(itemBrick.templateKey, stateGroup.animation || {}),
+                  outlet: compileOutlets(itemBrick.templateKey, stateGroup.outlets || {}),
+                  eventMap: compileEvents(itemBrick.templateKey, stateGroup.eventMap || {}, {
+                    camelCase: true,
+                  }),
+                }
+                return acc
+              }, {}),
             })
             if (Array.isArray(brickItems.brickList)) {
               const brickList = (brickItems.brickList || []).map(buildList)
@@ -252,7 +341,7 @@ export const compile = (app: Application) => {
             animation: compileAnimations(brick.templateKey, brick.animation || {}),
             event_map: compileEvents(brick.templateKey, brick.events || {}),
             outlet: compileOutlets(brick.templateKey, brick.outlets || {}),
-            state_group: brick.switches.reduce((acc, switchCase) => {
+            state_group: brick.switches?.reduce((acc, switchCase) => {
               acc[switchCase.id] = {
                 title: switchCase.title,
                 description: switchCase.description,
@@ -277,7 +366,7 @@ export const compile = (app: Application) => {
             description: canvas.description,
             property: compileProperty(canvas.property),
             event_map: compileEvents('CANVAS', canvas.events || {}),
-            state_group: canvas.switches.reduce((acc, switchCase) => {
+            state_group: canvas.switches?.reduce((acc, switchCase) => {
               acc[switchCase.id] = {
                 title: switchCase.title,
                 description: switchCase.description,
@@ -291,7 +380,13 @@ export const compile = (app: Application) => {
               }
               return acc
             }, {}),
-            item_list: [], // TODO
+            item_list: canvas.items.map((item) => ({
+              type: typeof item.item === 'function' ? 'brick' : 'subspace',
+              ...(typeof item.item === 'function'
+                ? { brick_id: (item.item as () => Brick)()?.id }
+                : { subspace_id: item.item }),
+              frame: compileFrame(item.frame),
+            })),
           }
           return map
         }, {}),
@@ -300,10 +395,15 @@ export const compile = (app: Application) => {
             template_key: generator.templateKey,
             title: generator.title,
             description: generator.description,
+            local_sync: generator.localSyncRunMode
+              ? {
+                  run_mode: generator.localSyncRunMode,
+                }
+              : undefined,
             property: compileProperty(generator.property || {}),
             event_map: compileEvents(generator.templateKey, generator.events || {}),
             outlet: compileOutlets(generator.templateKey, generator.outlets || {}),
-            state_group: generator.switches.reduce((acc, switchCase) => {
+            state_group: generator.switches?.reduce((acc, switchCase) => {
               acc[switchCase.id] = {
                 title: switchCase.title,
                 description: switchCase.description,
@@ -325,10 +425,19 @@ export const compile = (app: Application) => {
           map[data.id] = {
             title: data.title,
             description: data.description,
+            linked: data.metadata?.linked,
+            linkedFrom: data.metadata?.linkedFrom,
+            local_sync: data.localSyncUpdateMode
+              ? {
+                  update_mode: data.localSyncUpdateMode,
+                }
+              : undefined,
             persist_data: data.persistData,
+            ...compileRemoteUpdate(data.remoteUpdate),
             routing: data.routing,
             schema: data.schema,
             type: data.type,
+            ...compileKind(data.kind),
             value: data.value,
             event_map: compileEvents('PROPERTY_BANK', data.events || {}),
           }
@@ -343,36 +452,49 @@ export const compile = (app: Application) => {
             calc.type = 'general'
             const mapCalc = dataCalc as DataCalculationMap
 
-            const generateInputPorts = (inputs, outputs) =>
+            const generateInputPorts = (inputs) =>
               inputs.reduce((acc, port) => {
-                if (!port.source().id) return acc
+                if (!acc[port.key]) acc[port.key] = null
 
-                const firstOutput = outputs[0]
-                let disableTriggerCommandIn = firstOutput?.target().id
+                let sourceId
+                let sourceNode = port.source()
+                if (sourceNode?.__typename === 'DataCalculationData')
+                  sourceId = (sourceNode as DataCalculationData).data().id
+                if (sourceNode?.__typename === 'DataCommand') sourceId = sourceNode.id
 
+                if (!sourceId) return acc
                 if (!acc[port.key]) acc[port.key] = []
+
                 acc[port.key].push({
-                  id: port.source().id,
+                  id: sourceId,
                   port: port.sourceKey,
-                  disable_trigger_command_in: disableTriggerCommandIn,
+                  disable_trigger_command: !port.trigger ? true : undefined,
                 })
                 return acc
               }, {})
 
             const generateOutputPorts = (outputs) =>
               outputs.reduce((acc, port) => {
-                if (!port.target().id) return acc
+                if (!acc[port.key]) acc[port.key] = null
 
+                let targetId
+                let targetNode = port.target()
+                if (targetNode?.__typename === 'DataCalculationData')
+                  targetId = (targetNode as DataCalculationData).data().id
+                if (targetNode?.__typename === 'DataCommand') targetId = targetNode.id
+
+                if (!targetId) return acc
                 if (!acc[port.key]) acc[port.key] = []
+
                 acc[port.key].push({
-                  id: port.target().id,
+                  id: targetId,
                   port: port.targetKey,
                 })
                 return acc
               }, {})
 
             const getNodeId = (node) => {
-              if (node.__typename === 'DataCalculationData') return node.data.id
+              if (node.__typename === 'DataCalculationData') return node.data().id
               if (node.__typename === 'DataCommand') return node.id
               throw new Error(`Invalid node: ${JSON.stringify(node)}`)
             }
@@ -385,7 +507,7 @@ export const compile = (app: Application) => {
                   description: dataNode.description,
                   type: 'data-node',
                   properties: {},
-                  in: generateInputPorts(dataNode.inputs, dataNode.outputs),
+                  in: generateInputPorts(dataNode.inputs),
                   out: generateOutputPorts(dataNode.outputs),
                 }
               } else if (node.__typename === 'DataCommand') {
@@ -396,8 +518,8 @@ export const compile = (app: Application) => {
                 const args = commandNode.inputs.filter(
                   (input) =>
                     typeof input.source !== 'function' ||
-                    input.source()?.__typename !== 'DataCalculationData' &&
-                    input.source()?.__typename !== 'DataCommand',
+                    (input.source()?.__typename !== 'DataCalculationData' &&
+                      input.source()?.__typename !== 'DataCommand'),
                 )
                 const inputs = commandNode.inputs.filter(
                   (input) =>
@@ -416,7 +538,7 @@ export const compile = (app: Application) => {
                       return acc
                     }, {}),
                   },
-                  in: generateInputPorts(inputs, commandNode.outputs),
+                  in: generateInputPorts(inputs),
                   out: generateOutputPorts(commandNode.outputs),
                 }
               }
@@ -439,14 +561,20 @@ export const compile = (app: Application) => {
             const scriptCalc = dataCalc as DataCalculationScript
             calc.type = 'script'
 
-            const program = parseAST(scriptCalc.code, { sourceType: 'module', ecmaVersion: 2020 })
-            // export function main() { ... }
-            const declarationBody = (
-              (program.body[0] as ExportNamedDeclaration).declaration as FunctionDeclaration
-            )?.body
-
+            let code: string
+            try {
+              const program = parseAST(scriptCalc.code, { sourceType: 'module', ecmaVersion: 2020 })
+              // export function main() { ... }
+              const declarationBody = (
+                (program.body[0] as ExportNamedDeclaration).declaration as FunctionDeclaration
+              )?.body
+              code = escodegen.generate(declarationBody)
+            } catch (e) {
+              code = scriptCalc.code || ''
+            }
             calc.script_config = {
-              code: escodegen.generate(declarationBody),
+              note: scriptCalc.note,
+              code,
               enable_async: scriptCalc.enableAsync,
               inputs: scriptCalc.inputs.reduce((acc, input) => {
                 acc[input.data().id] = input.key
@@ -465,21 +593,30 @@ export const compile = (app: Application) => {
               error: scriptCalc.error?.().id,
             }
 
-            Object.assign(calc, generateCalulationMap(calc.script_config, {
-              snapshotMode: process.env.BRICKS_SNAPSHOT_MODE === '1',
-            }))
+            Object.assign(
+              calc,
+              generateCalulationMap(calc.script_config, {
+                snapshotMode: process.env.BRICKS_SNAPSHOT_MODE === '1',
+              }),
+            )
           }
           map[dataCalc.id] = calc
           return map
         }, {}),
-        action_map: subspace.actions || {},
+        action_map: subspace.actions || undefined,
         event_map: compileEvents('', subspace.events || {}),
+        routing: subspace.dataRouting.reduce((acc, data) => {
+          acc[data.id] = { enabled_routing: true }
+          return acc
+        }, {}),
+        ...compileModule(subspace),
       }
       return subspaceMap
     }, {}),
     root_subspace_id: app.rootSubspace.id,
     fonts: app.fonts,
     ...compileApplicationSettings(app.settings),
+    test_map: app.metadata?.TEMP_test_map || {},
   }
   return config
 }

package/compile/util.ts

@@ -1,4 +1,4 @@
-import { makeId } from '../uuid'
+import { makeId } from '../utils/id'
 
 type ScriptConfig = {
   inputs: Record<string, string>
@@ -87,7 +87,7 @@ export const generateCalulationMap = (config: ScriptConfig, opts?: { snapshotMod
             {
               id: key,
               port: 'value',
-              disable_trigger_command_in: config.disabled_triggers?.[key] ? sandboxId : undefined,
+              disable_trigger_command: config.disabled_triggers?.[key] ? true : undefined,
             },
           ],
         },

package/index.ts

@@ -1,10 +1,5 @@
-export * from './types'
+export type * from './types'
 
-import { DataLink, Data } from './types'
-
-export { makeId } from './uuid'
-
-export const linkData: ((dataGetter: () => Data) => DataLink) = (dataGetter) => ({
-  __typename: 'DataLink',
-  data: dataGetter,
-})
+export { makeId } from './utils/id'
+export { generateDataCalculationMapEditorInfo } from './utils/calc'
+export { linkData, useSystemData } from './utils/data'

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@fugood/bricks-project",
-  "version": "2.21.0-beta.14.test0",
+  "version": "2.21.0-beta.14.test10",
   "main": "index.ts",
   "scripts": {
     "build": "node scripts/build.js"
   },
   "dependencies": {
+    "@types/escodegen": "^0.0.10",
+    "@types/lodash": "^4.17.12",
     "acorn": "^8.13.0",
     "escodegen": "^2.1.0",
     "lodash": "^4.17.4",

package/tools/deploy.ts

@@ -0,0 +1,24 @@
+import { $ } from 'bun'
+import { deployApp, deployModule } from '../api'
+
+const cwd = process.cwd()
+
+const unstagedChanges = await $`cd ${cwd} && git diff --name-only --diff-filter=ACMR`.text()
+if (unstagedChanges) throw new Error('Unstaged changes found, please commit or stash your changes before deploying')
+
+const commitId = (await $`cd ${cwd} && git rev-parse HEAD`.text()).trim()
+const app = await Bun.file(`${cwd}/application.json`).json()
+const stage = app.stage || 'production'
+const config = await Bun.file(`${cwd}/.bricks/build/application-config.json`).json()
+
+// ask for confirmation
+const confirm = prompt('Are you sure you want to deploy? (y/n)')
+if (confirm !== 'y') throw new Error('Deployment cancelled')
+
+if (!app.type || app.type === 'application') {
+  await deployApp(stage, app.id, config, commitId)
+  console.log('App deployed')
+} else if (app.type === 'module') {
+  await deployModule(stage, app.id, config, commitId)
+  console.log('Module deployed')
+}

package/tools/postinstall.ts

@@ -0,0 +1,12 @@
+import { $ } from 'bun'
+
+const cwd = process.cwd()
+
+const libFiles = ['types', 'utils', 'index.ts']
+
+await $`mkdir -p ${cwd}/project`
+for (const file of libFiles) {
+  await $`cp -r ${__dirname}/../${file} ${cwd}/project`
+}
+
+console.log('Copied files to project/')

package/tools/preview-main.mjs

@@ -0,0 +1,51 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { app, BrowserWindow } from 'electron'
+import { readFile } from 'fs/promises'
+import { watchFile } from 'fs'
+
+const cwd = process.cwd()
+
+let config = JSON.parse(await readFile(`${cwd}/.bricks/build/application-config.json`))
+
+const stage = process.env.BRICKS_STAGE || 'production'
+
+const previewUrlMap = {
+  production: 'https://control.bricks.tools/applicationPreview.html',
+  beta: 'https://control-beta.bricks.tools/applicationPreview.html',
+  development: 'http://localhost:3006/dev-applicationPreview.html',
+}
+
+const previewUrl = previewUrlMap[stage]
+if (!previewUrl) throw new Error(`Invalid BRICKS_STAGE: ${stage}`)
+
+app.on('ready', () => {
+  const mainWindow = new BrowserWindow({ width: 1280, height: 768 })
+  mainWindow.loadURL(previewUrl)
+
+  const sendConfig = () => {
+    const payload = {
+      type: 'config',
+      configFile: { _originTitle: 'Test', ...config, title: Math.random().toString() },
+      workspace: { billing: { lock: {}, plan: 'free' } },
+    }
+    mainWindow.webContents.executeJavaScript(
+      `window.postMessage(JSON.stringify(${JSON.stringify(payload)}))`,
+    )
+  }
+
+  mainWindow.webContents.once('dom-ready', sendConfig)
+
+  watchFile(
+    `${cwd}/.bricks/build/application-config.json`,
+    {
+      bigint: false,
+      persistent: true,
+      interval: 1000,
+    },
+    async () => {
+      console.log('Detected config changed')
+      config = JSON.parse(await readFile(`${cwd}/.bricks/build/application-config.json`))
+      sendConfig()
+    },
+  )
+})

package/tools/preview.ts

@@ -0,0 +1,37 @@
+import { $ } from 'bun'
+import { watch } from 'fs'
+import { parseArgs } from 'util'
+import { debounce } from 'lodash'
+
+const { values } = parseArgs({
+  args: Bun.argv,
+  options: {
+    'skip-typecheck': {
+      type: 'boolean',
+    },
+  },
+  strict: true,
+  allowPositionals: true,
+})
+
+const useTypecheck = !values['skip-typecheck']
+
+const compile = async () => {
+  if (useTypecheck) await $`bun typecheck`
+  await $`bun compile`
+}
+
+await compile()
+
+const compileDebounced = debounce(compile, 500)
+
+const cwd = process.cwd()
+
+watch(`${cwd}/subspaces`, { recursive: true }, async (event, filename) => {
+  console.log(`Detected ${event} in ${filename}`)
+  compileDebounced()
+})
+
+const app = await Bun.file(`${cwd}/application.json`).json()
+
+await $`BRICKS_STAGE=${app.stage || 'production'} bunx electron ${__dirname}/preview-main.mjs`