How Ant Cube Tool Boosts Mobile Card Development with Node CLI and VSCode

Technology Selection

Cube cards use a JavaScript bridge with DSL written in HTML + JS + CSS, similar to Vue single‑file components. Because Node‑based CLI tools are lightweight, flexible, and cross‑platform, the foundational production tool for Cube cards is built on a Node CLI stack.

IDE vs CLI

While CLI satisfies basic development and debugging, it lacks the interactive shortcuts, menus, and feedback mechanisms of a traditional IDE. Building a full‑featured IDE would require substantial effort, so a VSCode plugin is used to supplement the CLI, providing convenient interactions and balancing development investment with developer experience.

Framework Design

ACT is the core auxiliary tool for Cube cards, handling compilation, preview, and debugging. It uses a client‑server (CS) data communication model, exposing REST APIs and WebSocket connections from a local server so that desktop editors, devices, and web debuggers can interact with the card lifecycle.

In CS mode, ACT enables multiple devices of different platforms to preview and debug cards simultaneously, facilitating cross‑platform consistency checks and remote collaboration without geographic constraints.

Core Functions

ACT compiles card DSL (template, style, script) into runtime‑consumable DOM data, CSS, and JS bundles, then delivers the results to the engine. It also provides a Playground module for real‑device preview and a Devtool for element, style, and JS breakpoint debugging.

Project Structure

The card project consists of an .act.config.json file (project config), a manifest.json (card config), and a main.vue file (template, style, script).

➜ Card tree -a
.
├── .act.config.json
├── main.vue
└── manifest.json

Compilation

During compilation, ACT transforms the <template>, <style>, and <script> sections of the DSL into binary metadata using an intermediate CardAST structure, supporting ES import syntax and on‑demand CSS/JS bundling.

Preview

ACT runs a local KOA server exposing REST APIs and WebSocket connections. Compiled assets are packaged, served over LAN, and downloaded by client devices where the Playground module simulates download, unpacking, and rendering for verification.

Two sub‑commands combine compilation and preview, and a file‑system watcher provides an "Alive" real‑time preview mode for rapid iteration.

Debugging

ACT offers template node debugging via the Chrome DevTools Protocol (CDP) and JS breakpoint debugging. The CDP integration displays element and style information, supports overlay highlighting, and logs. JS breakpoint debugging bridges the card engine’s JS runtime with a NodeVM environment, intercepting runtime commands, allowing step‑through debugging, and then forwarding execution back to the native environment.

Feature Evolution

ACT has progressed to version 3.x, guided by three questions: meeting core card development needs, writing more reliable templates, and simplifying template authoring.

Runtime Phase

Early ACT 1.x focused on compilation, preview, and debugging to ensure cards run reliably on client devices.

Compile‑time Phase

ACT 2.x introduced a Lint system called CardLint, extending ESLint to cover template, CSS, JSON, and JS formats, providing over 200 AST‑based rules for template attributes, style properties, JS APIs, and configuration validation, helping developers avoid common pitfalls.

17:55:23 ACT INFO 执行 LINT 检查
17:55:23 ACT WARN LINT 错误 [19,17] /test/card/tpl/main.vue
  函数 selectorQuery 在版本 [*, 10.2.52] 存在问题: JSAPI dom 模块 selectorQuery 方法查询节点信息，当节点不存在时，闪退，请调整卡片 card 相应的处理逻辑

17:55:23 ACT WARN LINT 警告 [20,23] /test/card/tpl/main.vue
  函数 loadKeyframes 在卡片 card 将投递的运行时端版本 * 存在已知问题: JSAPI animation 模块多次调用 loadKeyframe 会导致闪退，请确认是否符合预期。

17:55:23 ACT WARN LINT 错误 [33,6] /test/card/tpl/main.vue
  卡片仅支持单选择器声明，不允许进行选择器分组或组合

17:55:23 ACT WARN LINT 错误 [33,11] /test/card/tpl/main.vue
  卡片不支持伪类选择器

17:55:23 ACT WARN LINT 错误 [37,10] /test/card/tpl/main.vue
  不支持 !important

17:55:23 ACT ERROR 编译失败
  ACTLintError: ACT Lint 检测到 4 个错误，1 个警告

Coding‑time Phase

ACT 3.x adds a VSCode plugin that integrates CardLint feedback, metadata documentation, and code completion via the Language Server Protocol, delivering the CardCode module to assist developers directly within the editor.

Next Steps

Future ACT work will enhance CardLint rules, enrich CardCode documentation, and expand into runtime performance monitoring, automated inspections, and coverage statistics to further improve the quality of Alipay Cube card development.