@fugood/bricks-ctor 2.24.0-beta.40

package/tools/preview-main.mjs

@@ -0,0 +1,293 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { app, BrowserWindow } from 'electron'
+import { readFile, writeFile } from 'fs/promises'
+import { watchFile } from 'fs'
+import { createServer } from 'http'
+import { parseArgs } from 'util'
+import * as TOON from '@toon-format/toon'
+
+const { values } = parseArgs({
+  args: process.argv,
+  options: {
+    'clear-cache': { type: 'boolean' },
+    'take-screenshot': { type: 'string' },
+    'show-menu': { type: 'boolean' },
+    'test-id': { type: 'string' },
+    'test-title-like': { type: 'string' },
+    'no-keep-open': { type: 'boolean' },
+    'cdp-port': { type: 'string' },
+  },
+  strict: true,
+  allowPositionals: true,
+})
+
+const cwd = process.cwd()
+
+let takeScreenshotConfig = null
+try {
+  if (values['take-screenshot']) {
+    takeScreenshotConfig = JSON.parse(values['take-screenshot'])
+    if (!takeScreenshotConfig.path) takeScreenshotConfig.path = `${cwd}/screenshot.jpg`
+    if (!takeScreenshotConfig.width) takeScreenshotConfig.width = 1280
+    if (!takeScreenshotConfig.height) takeScreenshotConfig.height = 768
+    if (!takeScreenshotConfig.delay) takeScreenshotConfig.delay = 1000
+  }
+} catch (e) {
+  console.error('Invalid take-screenshot config', e)
+  // eslint-disable-next-line unicorn/no-process-exit
+  process.exit(1)
+}
+
+let config = JSON.parse(await readFile(`${cwd}/.bricks/build/application-config.json`))
+
+// Resolve testId from testTitleLike
+let testId = values['test-id'] || null
+if (!testId && values['test-title-like']) {
+  const titleLike = values['test-title-like'].toLowerCase()
+  const automationMap = config.automation_map || {}
+  for (const group of Object.values(automationMap)) {
+    const found = Object.entries(group.map || {}).find(([, test]) =>
+      test.title?.toLowerCase().includes(titleLike),
+    )
+    if (found) {
+      ;[testId] = found
+      break
+    }
+  }
+  if (!testId) {
+    throw new Error(`No automation found matching title: ${values['test-title-like']}`)
+  }
+}
+
+const noKeepOpen = values['no-keep-open'] ?? false
+
+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}`)
+
+// --- CDP WebSocket Server ---
+// Bridges external CDP clients to the preview's postMessage-based CDP bridge.
+// Usage: --cdp-port 9222
+
+const startCdpServer = async (mainWindow, port) => {
+  const { WebSocketServer } = await import('ws')
+  const clients = new Set()
+
+  // Inject a listener in the preview that forwards CDP responses/events via console
+  const injectCdpRelay = () =>
+    mainWindow.webContents.executeJavaScript(`
+      if (!window.__cdpRelayInstalled) {
+        window.__cdpRelayInstalled = true
+        window.addEventListener('message', (evt) => {
+          try {
+            const d = typeof evt.data === 'string' ? JSON.parse(evt.data) : evt.data
+            if (d && (d.type === 'cdp-response' || d.type === 'cdp-event'))
+              console.log('[CDP]' + JSON.stringify(d))
+          } catch {}
+        })
+      }
+    `)
+
+  // Capture CDP messages from the preview's console output
+  mainWindow.webContents.on('console-message', (_event, ...rest) => {
+    const message = typeof rest[0] === 'object' ? rest[0].message : rest[1]
+    if (!message?.startsWith('[CDP]')) return
+    try {
+      const data = JSON.parse(message.slice(5))
+      // Translate to standard CDP wire format (strip internal type field)
+      const wireMsg =
+        data.type === 'cdp-response'
+          ? { id: data.id, result: data.result, error: data.error }
+          : { method: data.method, params: data.params }
+      if (data.sessionId) wireMsg.sessionId = data.sessionId
+      const payload = JSON.stringify(wireMsg)
+      for (const c of clients) if (c.readyState === 1) c.send(payload)
+    } catch {}
+  })
+
+  // Find an available port before binding
+  const findPort = (p) =>
+    new Promise((resolve) => {
+      const probe = createServer()
+      probe.once('error', () => {
+        if (p < port + 100) resolve(findPort(p + 1))
+        else resolve(null)
+      })
+      probe.listen(p, () => probe.close(() => resolve(p)))
+    })
+
+  const actualPort = await findPort(port)
+  if (!actualPort) {
+    console.warn(`CDP server: no available port in range ${port}-${port + 99}`)
+    return
+  }
+
+  // HTTP discovery endpoints (chrome://inspect, Playwright, etc.)
+  const httpServer = createServer((req, res) => {
+    if (req.url === '/json/list' || req.url === '/json') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(
+        JSON.stringify([
+          {
+            description: 'BRICKS Preview',
+            id: 'bricks-preview',
+            title: 'BRICKS Preview',
+            type: 'page',
+            url: previewUrl,
+            webSocketDebuggerUrl: `ws://localhost:${actualPort}/ws`,
+          },
+        ]),
+      )
+      return
+    }
+    if (req.url === '/json/version') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ Browser: 'BRICKS Preview', 'Protocol-Version': '1.3' }))
+      return
+    }
+    // bricks-cli discovery endpoint
+    if (req.url === '/devtools/info') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(
+        JSON.stringify({
+          name: 'BRICKS Preview',
+          port: actualPort,
+          protocols: ['cdp'],
+          hasPasscode: false,
+        }),
+      )
+      return
+    }
+    res.writeHead(404)
+    res.end()
+  })
+
+  const wss = new WebSocketServer({ server: httpServer, path: '/ws' })
+  wss.on('connection', (ws) => {
+    clients.add(ws)
+    injectCdpRelay()
+
+    ws.on('message', (raw) => {
+      try {
+        const req = JSON.parse(raw.toString())
+        const cdpReq = JSON.stringify({
+          type: 'cdp-request',
+          id: req.id,
+          method: req.method,
+          params: req.params || {},
+          sessionId: req.sessionId,
+        })
+        mainWindow.webContents.executeJavaScript(`window.postMessage(${JSON.stringify(cdpReq)})`)
+      } catch {}
+    })
+
+    ws.on('close', () => clients.delete(ws))
+  })
+
+  httpServer.listen(actualPort, () => {
+    console.log(`CDP server: ws://localhost:${actualPort}/ws`)
+    console.log(
+      `Inspect:   devtools://devtools/bundled/inspector.html?ws=localhost:${actualPort}/ws`,
+    )
+  })
+}
+
+app.on('ready', () => {
+  let show = true
+  if (takeScreenshotConfig && !takeScreenshotConfig.noHeadless) show = false
+  const mainWindow = new BrowserWindow({
+    width: takeScreenshotConfig?.width || 1280,
+    height: takeScreenshotConfig?.height || 768,
+    frame: !takeScreenshotConfig,
+    show,
+  })
+  mainWindow.setBackgroundColor('#333')
+  mainWindow.loadURL(previewUrl)
+
+  const sendConfig = () => {
+    const payload = {
+      type: 'config',
+      configFile: { _originTitle: 'Test', ...config, title: Math.random().toString() },
+      workspace: { billing: { lock: {}, plan: 'free' } },
+      showMenu: values['show-menu'] || false,
+      testId,
+    }
+    mainWindow.webContents.executeJavaScript(
+      `window.postMessage(JSON.stringify(${JSON.stringify(payload)}))`,
+    )
+    if (takeScreenshotConfig) {
+      const { delay, width, height, path } = takeScreenshotConfig
+      setTimeout(() => {
+        console.log('Taking screenshot')
+        mainWindow.webContents.capturePage().then((image) => {
+          console.log('Writing screenshot to', path)
+          writeFile(path, image.resize({ width, height }).toJPEG(75))
+          if (noKeepOpen) {
+            console.log('Closing app')
+            app.quit()
+          }
+        })
+      }, delay)
+    }
+  }
+
+  mainWindow.webContents.once('dom-ready', () => {
+    sendConfig()
+    // Listen for test result messages from the preview
+    if (testId) {
+      mainWindow.webContents.executeJavaScript(`
+        window.addEventListener('message', (evt) => {
+          try {
+            const data = JSON.parse(evt.data)
+            if (data.type === 'bricks-preview-test-result') {
+              console.log('[TEST_RESULT]' + JSON.stringify(data))
+            }
+          } catch (e) {}
+        })
+      `)
+    }
+    // Start CDP WebSocket server if requested
+    const cdpPort = values['cdp-port'] ? parseInt(values['cdp-port'], 10) : null
+    if (cdpPort) startCdpServer(mainWindow, cdpPort)
+  })
+
+  // Capture console messages from the preview
+  if (testId) {
+    mainWindow.webContents.on('console-message', (_event, ...rest) => {
+      const message = typeof rest[0] === 'object' ? rest[0].message : rest[1]
+      if (message?.startsWith('[TEST_RESULT]')) {
+        const data = JSON.parse(message.replace('[TEST_RESULT]', ''))
+        console.log(`[TEST_RESULT_TOON]${TOON.encode(data.result)}`)
+        if (!takeScreenshotConfig && noKeepOpen) app.quit()
+      }
+    })
+  }
+
+  if (values['clear-cache']) {
+    console.log('Clearing cache')
+    mainWindow.webContents.session.clearCache()
+  }
+
+  mainWindow.on('close', () => app.quit())
+
+  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,143 @@
+import { $ } from 'bun'
+import { watch, unlinkSync } from 'fs'
+import type { FSWatcher } from 'fs'
+import { parseArgs } from 'util'
+import debounce from 'lodash/debounce'
+
+const { values } = parseArgs({
+  args: Bun.argv,
+  options: {
+    'skip-typecheck': { type: 'boolean' },
+    'clear-cache': { type: 'boolean' },
+    screenshot: { type: 'boolean' },
+    'screenshot-delay': { type: 'string' },
+    'screenshot-width': { type: 'string' },
+    'screenshot-height': { type: 'string' },
+    'screenshot-path': { type: 'string' },
+    'screenshot-no-headless': { type: 'boolean' },
+    'show-menu': { type: 'boolean' },
+    'test-id': { type: 'string' },
+    'test-title-like': { type: 'string' },
+    'no-keep-open': { type: 'boolean' },
+    'cdp-port': { type: 'string' },
+    'no-cdp': { type: 'boolean' },
+  },
+  strict: true,
+  allowPositionals: true,
+})
+
+const cwd = process.cwd()
+
+const app = await Bun.file(`${cwd}/application.json`).json()
+
+const args: string[] = []
+if (values['clear-cache']) args.push('--clear-cache')
+
+let needWatcher = true
+if (values['screenshot']) {
+  args.push(`--take-screenshot`)
+  args.push(
+    JSON.stringify({
+      delay: Number(values['screenshot-delay']) || 1000,
+      width: Number(values['screenshot-width']) || 600,
+      height: Number(values['screenshot-height']) || 480,
+      path: values['screenshot-path'] || `${cwd}/screenshot.jpg`,
+      noHeadless: values['screenshot-no-headless'] ?? false,
+    }),
+  )
+  needWatcher = !values['no-keep-open']
+}
+
+if (values['show-menu']) {
+  args.push('--show-menu')
+}
+
+if (values['test-id']) {
+  args.push('--test-id', values['test-id'])
+}
+
+if (values['test-title-like']) {
+  args.push('--test-title-like', values['test-title-like'])
+}
+
+if (values['no-keep-open']) {
+  args.push('--no-keep-open')
+}
+
+if (!values['no-cdp']) {
+  const cdpPort = parseInt(values['cdp-port'] || '', 10) || 19852
+  args.push('--cdp-port', String(cdpPort))
+}
+
+const useTypecheck = !values['skip-typecheck']
+
+const compile = async () => {
+  if (useTypecheck) await $`bun typecheck`
+  await $`bun compile.ts`
+}
+
+await compile()
+
+let watcher: FSWatcher | null = null
+if (needWatcher) {
+  const compileDebounced = debounce(compile, 500)
+  watcher = watch(`${cwd}/subspaces`, { recursive: true }, async (event, filename) => {
+    console.log(`Detected ${event} in ${filename}`)
+    compileDebounced()
+  })
+}
+
+const devtoolsInfoPath = `${cwd}/.bricks/devtools.json`
+
+const cleanupDevtoolsInfo = () => {
+  try {
+    unlinkSync(devtoolsInfoPath)
+  } catch {}
+}
+
+const proc = Bun.spawn(['bunx', '--bun', 'electron', `${__dirname}/preview-main.mjs`, ...args], {
+  env: { ...process.env, BRICKS_STAGE: app.stage || 'production' },
+  stdout: 'pipe',
+  stderr: 'inherit',
+})
+
+const reader = proc.stdout.getReader()
+const decoder = new TextDecoder()
+
+const processOutput = async () => {
+  let done = false
+  while (!done) {
+    // eslint-disable-next-line no-await-in-loop
+    const result = await reader.read()
+    ;({ done } = result)
+    if (!done) {
+      const text = decoder.decode(result.value)
+      text.split('\n').forEach((line) => {
+        if (line.startsWith('[TEST_RESULT_TOON]')) {
+          const toonData = line.replace('[TEST_RESULT_TOON]', '')
+          console.log(toonData)
+        } else if (line) {
+          // Detect CDP server startup from preview-main output
+          const cdpMatch = line.match(/^CDP server: ws:\/\/localhost:(\d+)/)
+          if (cdpMatch) {
+            const info = {
+              port: parseInt(cdpMatch[1], 10),
+              pid: proc.pid,
+              address: 'localhost',
+              name: app.name || 'BRICKS Preview',
+              startedAt: new Date().toISOString(),
+            }
+            Bun.write(devtoolsInfoPath, JSON.stringify(info, null, 2))
+          }
+          console.log(line)
+        }
+      })
+    }
+  }
+}
+
+await processOutput()
+await proc.exited
+
+cleanupDevtoolsInfo()
+if (watcher) watcher.close()

package/tools/pull.ts

@@ -0,0 +1,116 @@
+import { $ } from 'bun'
+import { format } from 'oxfmt'
+
+const cwd = process.cwd()
+const args = process.argv.slice(2)
+const force = args.includes('--force') || args.includes('-f')
+
+// Check git status
+const { exitCode } = await $`cd ${cwd} && git status`.nothrow()
+const isGitRepo = exitCode === 0
+
+if (isGitRepo) {
+  const unstagedChanges = await $`cd ${cwd} && git diff --name-only --diff-filter=ACMR`.text()
+  if (unstagedChanges) {
+    if (force) {
+      console.log('Force mode: committing unstaged changes before pull...')
+      await $`cd ${cwd} && git add .`
+      await $`cd ${cwd} && git commit -m ${'chore(force-pull): saved unstaged changes before pull'}`
+    } else {
+      throw new Error('Unstaged changes found, please commit or stash your changes before pulling')
+    }
+  }
+} else {
+  const confirmContinue = prompt(
+    'No git repository found, so it will not be safe to pull, continue? (y/n)',
+  )
+  if (confirmContinue !== 'y') throw new Error('Pull cancelled')
+}
+
+// Read application.json
+const app = await Bun.file(`${cwd}/application.json`).json()
+
+const isModule = app.type === 'module'
+const command = isModule ? 'module' : 'app'
+
+// Fetch project files using CLI
+console.log(`Pulling ${command} project (${app.id})...`)
+const result = await $`bricks ${command} project-pull ${app.id} --json`.quiet().nothrow()
+
+if (result.exitCode !== 0) {
+  const output = result.stderr.toString() || result.stdout.toString()
+  try {
+    const json = JSON.parse(output)
+    throw new Error(json.error || 'Pull failed')
+  } catch {
+    throw new Error(output || 'Pull failed')
+  }
+}
+
+const { files, lastCommitId } = JSON.parse(result.stdout.toString())
+
+let useMain = false
+if (isGitRepo && !force) {
+  console.log(`Checking commit ${lastCommitId}...`)
+  const found = (await $`cd ${cwd} && git rev-list -1 ${lastCommitId}`.nothrow().text())
+    .trim()
+    .match(/^[\da-f]{40}$/)
+
+  const commitId = (await $`cd ${cwd} && git rev-parse HEAD`.text()).trim()
+
+  if (commitId === lastCommitId) throw new Error('Commit not changed')
+
+  const branchName = isModule
+    ? 'BRICKS_PROJECT_try-pull-module'
+    : 'BRICKS_PROJECT_try-pull-application'
+
+  await $`cd ${cwd} && git branch -D ${branchName}`.nothrow()
+
+  if (found) {
+    await $`cd ${cwd} && git checkout -b ${branchName} ${lastCommitId}`.nothrow()
+  } else {
+    await $`cd ${cwd} && git checkout -b ${branchName}`
+    useMain = true
+  }
+}
+
+const oxfmtConfig = await Bun.file(`${cwd}/.oxfmtrc.json`)
+  .json()
+  .catch(() => ({
+    trailingComma: 'all',
+    tabWidth: 2,
+    semi: false,
+    singleQuote: true,
+    printWidth: 100,
+  }))
+
+await Promise.all(
+  files.map(async (file: { name: string; input: string; formatable?: boolean }) => {
+    let content = file.input
+    if (file.formatable) {
+      const result = await format(file.name, file.input, oxfmtConfig)
+      content = result.code
+    }
+    return Bun.write(`${cwd}/${file.name}`, content)
+  }),
+)
+
+if (isGitRepo) {
+  await $`cd ${cwd} && git add .`
+  const hasChanges = !!(await $`cd ${cwd} && git diff --cached --name-only`.text()).trim()
+  if (hasChanges) {
+    const commitMsg = force
+      ? `chore(force-pull): apply force pull-${command}`
+      : isModule
+        ? 'chore(project): apply file changes from BRICKS module'
+        : 'chore(project): apply file changes from BRICKS application'
+    await $`cd ${cwd} && git commit -m ${commitMsg}`
+  }
+  if (!force && !useMain) {
+    await $`cd ${cwd} && git merge main`
+  }
+}
+
+console.log(
+  `${isModule ? 'Module' : 'App'} project pulled: ${files.length} files${force ? ' (force)' : ''}`,
+)

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+  },
+  "exclude": ["node_modules"],
+}

package/types/animation.ts

@@ -0,0 +1,100 @@
+export type Easing =
+  | ''
+  | 'easeInSine'
+  | 'easeOutSine'
+  | 'easeInOutSine'
+  | 'easeInQuad'
+  | 'easeOutQuad'
+  | 'easeInOutQuad'
+  | 'easeInCubic'
+  | 'easeOutCubic'
+  | 'easeInOutCubic'
+  | 'easeInQuart'
+  | 'easeOutQuart'
+  | 'easeInOutQuart'
+  | 'easeInQuint'
+  | 'easeOutQuint'
+  | 'easeInOutQuint'
+  | 'easeInExpo'
+  | 'easeOutExpo'
+  | 'easeInOutExpo'
+  | 'easeInCirc'
+  | 'easeOutCirc'
+  | 'easeInOutCirc'
+  | 'easeInBack'
+  | 'easeOutBack'
+  | 'easeInOutBack'
+  | 'easeInElastic'
+  | 'easeOutElastic'
+  | 'easeInOutElastic'
+  | 'easeInBounce'
+  | 'easeOutBounce'
+  | 'easeInOutBounce'
+  | string // Support format like 'cubic-bezier(x1, y1, x2, y2)'
+
+export interface AnimationTimingConfig {
+  __type: 'AnimationTimingConfig'
+  toValue: number // BRICKS Grid unit
+  duration: number // ms
+  easing: Easing
+  delay: number // ms
+  isInteraction: boolean
+}
+
+export interface AnimationSpringConfig {
+  __type: 'AnimationSpringConfig'
+  toValue: number // BRICKS Grid unit
+  friction: number
+  tension: number
+  speed: number
+  bounciness: number
+}
+
+export interface AnimationDecayConfig {
+  __type: 'AnimationDecayConfig'
+  toValue: number // BRICKS Grid unit
+  velocity: number
+  deceleration: number
+  isInteraction: boolean
+}
+
+export interface AnimationDef {
+  __typename: 'Animation'
+  id: string
+  alias?: string
+  title: string
+  description?: string
+  hideShortRef?: boolean
+  runType?: 'once' | 'loop'
+  property:
+    | 'transform.translateX'
+    | 'transform.translateY'
+    | 'transform.scale'
+    | 'transform.scaleX'
+    | 'transform.scaleY'
+    | 'transform.rotate'
+    | 'transform.rotateX'
+    | 'transform.rotateY'
+    | 'opacity'
+  config: AnimationTimingConfig | AnimationSpringConfig | AnimationDecayConfig
+}
+
+export interface AnimationComposeDef {
+  __typename: 'AnimationCompose'
+  id: string
+  alias?: string
+  title: string
+  description?: string
+  hideShortRef?: boolean
+  runType?: 'once' | 'loop'
+  composeType: 'parallel' | 'sequence'
+  items: Array<() => Animation>
+}
+
+export type Animation = AnimationDef | AnimationComposeDef
+
+export interface AnimationBasicEvents {
+  showStart?: Animation
+  standby?: Animation
+  breatheStart?: Animation
+}