@fugood/bricks-project 2.24.0-beta.9 → 2.24.1-beta.0

package/tools/preview-main.mjs

@@ -2,6 +2,7 @@
 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'
 
@@ -14,6 +15,7 @@ const { values } = parseArgs({
     'test-id': { type: 'string' },
     'test-title-like': { type: 'string' },
     'no-keep-open': { type: 'boolean' },
+    'cdp-port': { type: 'string' },
   },
   strict: true,
   allowPositionals: true,
@@ -70,6 +72,133 @@ const previewUrlMap = {
 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 (CTOR 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
@@ -124,12 +253,16 @@ app.on('ready', () => {
         })
       `)
     }
+    // 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', (_, __, message) => {
-      if (message.startsWith('[TEST_RESULT]')) {
+    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()

package/tools/preview.ts

@@ -1,11 +1,14 @@
-import { $ } from 'bun'
-import { watch } from 'fs'
+import { spawn } from 'node:child_process'
+import { readFile, writeFile } from 'node:fs/promises'
+import { watch, unlinkSync } from 'fs'
 import type { FSWatcher } from 'fs'
+import { createInterface } from 'node:readline'
 import { parseArgs } from 'util'
 import debounce from 'lodash/debounce'
+import { sh } from './_shell'
 
 const { values } = parseArgs({
-  args: Bun.argv,
+  args: process.argv,
   options: {
     'skip-typecheck': { type: 'boolean' },
     'clear-cache': { type: 'boolean' },
@@ -19,6 +22,8 @@ const { values } = parseArgs({
     '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,
@@ -26,7 +31,7 @@ const { values } = parseArgs({
 
 const cwd = process.cwd()
 
-const app = await Bun.file(`${cwd}/application.json`).json()
+const app = JSON.parse(await readFile(`${cwd}/application.json`, 'utf8'))
 
 const args: string[] = []
 if (values['clear-cache']) args.push('--clear-cache')
@@ -62,11 +67,16 @@ 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`
+  if (useTypecheck) await sh`bun typecheck`
+  await sh`bun compile.ts`
 }
 
 await compile()
@@ -80,36 +90,61 @@ if (needWatcher) {
   })
 }
 
-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 devtoolsInfoPath = `${cwd}/.bricks/devtools.json`
 
-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) {
-          console.log(line)
-        }
-      })
+const cleanupDevtoolsInfo = () => {
+  try {
+    unlinkSync(devtoolsInfoPath)
+  } catch {}
+}
+
+// Kill existing preview process if devtools.json contains a stale pid
+try {
+  const devtoolsInfo = JSON.parse(await readFile(devtoolsInfoPath, 'utf8'))
+  if (devtoolsInfo.pid) {
+    try {
+      process.kill(devtoolsInfo.pid)
+    } catch {}
+    cleanupDevtoolsInfo()
+  }
+} catch {}
+
+const proc = spawn(
+  'bunx',
+  ['--bun', 'electron', `${import.meta.dirname}/preview-main.mjs`, ...args],
+  {
+    env: { ...process.env, BRICKS_STAGE: app.stage || 'production' },
+    stdio: ['inherit', 'pipe', 'inherit'],
+  },
+)
+
+const rl = createInterface({ input: proc.stdout! })
+
+rl.on('line', (line) => {
+  if (line.startsWith('[TEST_RESULT_TOON]')) {
+    const toonData = line.replace('[TEST_RESULT_TOON]', '')
+    console.log(toonData)
+    return
+  }
+  if (!line) return
+  // 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 || 'Unnamed'} (CTOR Preview)`,
+      startedAt: new Date().toISOString(),
     }
+    writeFile(devtoolsInfoPath, JSON.stringify(info, null, 2))
   }
-}
+  console.log(line)
+})
 
-await processOutput()
-await proc.exited
+await new Promise<void>((resolve) => {
+  proc.on('close', () => resolve())
+})
 
+cleanupDevtoolsInfo()
 if (watcher) watcher.close()

package/tools/pull.ts

@@ -1,16 +1,30 @@
-import { $ } from 'bun'
-import { format } from 'prettier'
+import { readFile, writeFile } from 'node:fs/promises'
+import { format } from 'oxfmt'
+import { sh } from './_shell'
+import { buildCommitArgs } from './_git-author'
 
 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 { exitCode } = await sh`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)
-    throw new Error('Unstaged changes found, please commit or stash your changes before pulling')
+  const unstagedChanges = await sh`cd ${cwd} && git diff --name-only --diff-filter=ACMR`.text()
+  if (unstagedChanges) {
+    if (force) {
+      console.log('Force mode: committing unstaged changes before pull...')
+      await sh`cd ${cwd} && git add .`
+      const preCommitArgs = await buildCommitArgs(cwd, [
+        'chore(force-pull): saved unstaged changes before pull',
+      ])
+      await sh`cd ${cwd} && git ${preCommitArgs}`
+    } 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)',
@@ -19,13 +33,14 @@ if (isGitRepo) {
 }
 
 // Read application.json
-const app = await Bun.file(`${cwd}/application.json`).json()
+const app = JSON.parse(await readFile(`${cwd}/application.json`, 'utf8'))
 
 const isModule = app.type === 'module'
 const command = isModule ? 'module' : 'app'
 
 // Fetch project files using CLI
-const result = await $`bricks ${command} project-pull ${app.id} --json`.quiet().nothrow()
+console.log(`Pulling ${command} project (${app.id})...`)
+const result = await sh`bricks ${command} project-pull ${app.id} --json`.quiet().nothrow()
 
 if (result.exitCode !== 0) {
   const output = result.stderr.toString() || result.stdout.toString()
@@ -40,12 +55,13 @@ if (result.exitCode !== 0) {
 const { files, lastCommitId } = JSON.parse(result.stdout.toString())
 
 let useMain = false
-if (isGitRepo) {
-  const found = (await $`cd ${cwd} && git rev-list -1 ${lastCommitId}`.nothrow().text())
+if (isGitRepo && !force) {
+  console.log(`Checking commit ${lastCommitId}...`)
+  const found = (await sh`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()
+  const commitId = (await sh`cd ${cwd} && git rev-parse HEAD`.text()).trim()
 
   if (commitId === lastCommitId) throw new Error('Commit not changed')
 
@@ -53,18 +69,18 @@ if (isGitRepo) {
     ? 'BRICKS_PROJECT_try-pull-module'
     : 'BRICKS_PROJECT_try-pull-application'
 
-  await $`cd ${cwd} && git branch -D ${branchName}`.nothrow()
+  await sh`cd ${cwd} && git branch -D ${branchName}`.nothrow()
 
   if (found) {
-    await $`cd ${cwd} && git checkout -b ${branchName} ${lastCommitId}`.nothrow()
+    await sh`cd ${cwd} && git checkout -b ${branchName} ${lastCommitId}`.nothrow()
   } else {
-    await $`cd ${cwd} && git checkout -b ${branchName}`
+    await sh`cd ${cwd} && git checkout -b ${branchName}`
     useMain = true
   }
 }
 
-const prettierConfig = await Bun.file(`${cwd}/.prettierrc`)
-  .json()
+const oxfmtConfig = await readFile(`${cwd}/.oxfmtrc.json`, 'utf8')
+  .then(JSON.parse)
   .catch(() => ({
     trailingComma: 'all',
     tabWidth: 2,
@@ -74,25 +90,33 @@ const prettierConfig = await Bun.file(`${cwd}/.prettierrc`)
   }))
 
 await Promise.all(
-  files.map(async (file: { name: string; input: string; formatable?: boolean }) =>
-    Bun.write(
-      `${cwd}/${file.name}`,
-      file.formatable
-        ? await format(file.input, { parser: 'typescript', ...prettierConfig })
-        : file.input,
-    ),
-  ),
+  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 writeFile(`${cwd}/${file.name}`, content)
+  }),
 )
 
 if (isGitRepo) {
-  await $`cd ${cwd} && git add .`
-  const commitMsg = 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 (!useMain) {
-    await $`cd ${cwd} && git merge main`
+  await sh`cd ${cwd} && git add .`
+  const hasChanges = !!(await sh`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'
+    const commitArgs = await buildCommitArgs(cwd, [commitMsg])
+    await sh`cd ${cwd} && git ${commitArgs}`
+  }
+  if (!force && !useMain) {
+    await sh`cd ${cwd} && git merge main`
   }
 }
 
-console.log(`${isModule ? 'Module' : 'App'} project pulled: ${files.length} files`)
+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

@@ -61,8 +61,10 @@ export interface AnimationDecayConfig {
 export interface AnimationDef {
   __typename: 'Animation'
   id: string
+  alias?: string
   title: string
   description?: string
+  hideShortRef?: boolean
   runType?: 'once' | 'loop'
   property:
     | 'transform.translateX'
@@ -80,8 +82,10 @@ export interface AnimationDef {
 export interface AnimationComposeDef {
   __typename: 'AnimationCompose'
   id: string
+  alias?: string
   title: string
   description?: string
+  hideShortRef?: boolean
   runType?: 'once' | 'loop'
   composeType: 'parallel' | 'sequence'
   items: Array<() => Animation>

package/types/automation.ts

@@ -45,7 +45,7 @@ export interface TestCaseJumpCondition {
   operator?: JumpConditionOperator
   value?: any
   // The test case to jump to (getter function for dynamic IDs or string for static IDs)
-  jump_to: string | (() => TestCase)
+  jump_to?: string | (() => TestCase)
 }
 
 /**
@@ -182,6 +182,7 @@ export interface TestCase {
   __typename: 'TestCase'
   id: string
   name: string
+  hideShortRef?: boolean
   run: TestMethodRun
   exit_on_failed: boolean
   commented: boolean
@@ -203,6 +204,7 @@ export interface AutomationTest {
   __typename: 'AutomationTest'
   id: string
   title: string
+  hideShortRef?: boolean
   timeout: number
   trigger_type?: TestTriggerType
   cron?: string // Cron expression when trigger_type is 'cron'
@@ -220,6 +222,7 @@ export interface AutomationTestMap {
   __typename: 'AutomationTestMap'
   id: string
   title: string
+  hideShortRef?: boolean
   createdAt: number
   tests: AutomationTest[]
 }

package/types/brick-base.ts

@@ -59,7 +59,7 @@ export interface BrickBasicProperty {
   shadowOffsetWidth?: number | DataLink
   /* The brick shadow offset height */
   shadowOffsetHeight?: number | DataLink
-  /* Brick pressable.  
+  /* Brick pressable.
  Disabled: Disabled even if event or animation is set.  
  Bypass: Disable and bypass the touch event on the brick. */
   pressable?: 'enabled' | 'disabled' | 'bypass' | DataLink

package/types/bricks/Camera.ts

@@ -1,4 +1,7 @@
-/* Auto generated by build script */
+/* Auto generated by build script
+ *
+ * Camera view with photo capture and barcode scanning capabilities
+ */
 import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
 import type { Data, DataLink } from '../data'
 import type { Animation, AnimationBasicEvents } from '../animation'
@@ -12,6 +15,7 @@ import type {
   EventProperty,
 } from '../common'
 import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+import type { TemplateEventPropsMap } from '../../utils/event-props'
 
 /* Take picture on the Camera */
 export type BrickCameraActionTakePicture = ActionWithParams & {
@@ -151,31 +155,62 @@ Default property:
   }
   events?: BrickBasicEvents & {
     /* Event of the Camera state change */
-    stateChange?: Array<EventAction>
+    stateChange?: Array<EventAction<string & keyof TemplateEventPropsMap['Camera']['stateChange']>>
     /* Event of the Camera record start */
     recordStart?: Array<EventAction>
     /* Event of the Camera record end */
     recordEnd?: Array<EventAction>
     /* Event of the Camera barcode read */
-    barcodeRead?: Array<EventAction>
+    barcodeRead?: Array<EventAction<string & keyof TemplateEventPropsMap['Camera']['barcodeRead']>>
     /* Event of the Camera picture taken */
-    pictureTaken?: Array<EventAction>
+    pictureTaken?: Array<
+      EventAction<string & keyof TemplateEventPropsMap['Camera']['pictureTaken']>
+    >
     /* Event of the Camera record finished */
-    recordFinish?: Array<EventAction>
+    recordFinish?: Array<
+      EventAction<string & keyof TemplateEventPropsMap['Camera']['recordFinish']>
+    >
     /* Event of the Camera mount error */
-    mountError?: Array<EventAction>
+    mountError?: Array<EventAction<string & keyof TemplateEventPropsMap['Camera']['mountError']>>
   }
   outlets?: {
     /* Camera device and format information */
-    info?: () => Data
+    info?: () => Data<{ [key: string]: any }>
     /* Picture taken result */
-    pictureTaken?: () => Data
+    pictureTaken?: () => Data<{
+      width?: number
+      height?: number
+      uri?: string
+      base64?: string
+      [key: string]: any
+    }>
     /* Record video result */
-    recordVideo?: () => Data
+    recordVideo?: () => Data<{
+      uri?: string
+      [key: string]: any
+    }>
     /* Barcode read result */
-    barcodeRead?: () => Data
+    barcodeRead?: () => Data<{
+      type?: string
+      data?: string
+      rawData?: string
+      bounds?: {
+        origin?: {
+          x?: number
+          y?: number
+          [key: string]: any
+        }
+        size?: {
+          width?: number
+          height?: number
+          [key: string]: any
+        }
+        [key: string]: any
+      }
+      [key: string]: any
+    }>
     /* Faces detected result */
-    faceDetected?: () => Data
+    faceDetected?: () => Data<Array<{ [key: string]: any }>>
   }
   animation?: AnimationBasicEvents & {
     stateChange?: Animation
@@ -188,7 +223,7 @@ Default property:
   }
 }
 
-/* Camera view brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378589-camera)) */
+/* Camera view with photo capture and barcode scanning capabilities */
 export type BrickCamera = Brick &
   BrickCameraDef & {
     templateKey: 'BRICK_CAMERA'

package/types/bricks/Chart.ts

@@ -1,4 +1,7 @@
-/* Auto generated by build script */
+/* Auto generated by build script
+ *
+ * Chart brick, based on [Apache ECharts](https://echarts.apache.org/en/index.html).
+ */
 import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
 import type { Data, DataLink } from '../data'
 import type { Animation, AnimationBasicEvents } from '../animation'
@@ -12,6 +15,7 @@ import type {
   EventProperty,
 } from '../common'
 import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+import type { TemplateEventPropsMap } from '../../utils/event-props'
 
 /* Data highlight */
 export type BrickChartActionDataHighlight = ActionWithParams & {
@@ -332,9 +336,11 @@ Default property:
     /* Event of chart render */
     onRender?: Array<EventAction>
     /* Event of data point on press */
-    onPress?: Array<EventAction>
+    onPress?: Array<EventAction<string & keyof TemplateEventPropsMap['Chart']['onPress']>>
     /* Event of legend select changed */
-    onLegendSelectChanged?: Array<EventAction>
+    onLegendSelectChanged?: Array<
+      EventAction<string & keyof TemplateEventPropsMap['Chart']['onLegendSelectChanged']>
+    >
   }
   animation?: AnimationBasicEvents & {
     onRender?: Animation