AST‑Based Visual Programming for Vue SFC: Design, Implementation, and Demo

Background

When working on large, highly componentized projects, the traditional development workflow of preview‑and‑manual code editing becomes inefficient, especially for newcomers who must locate code from the UI. The proposed solution maps UI directly to code components by binding the source AST to the UI, allowing developers to modify properties through the UI and automatically synchronize changes back to source files, achieving an intuitive visual programming experience.

Problems with Traditional Low‑Code Solutions

Conventional low‑code platforms rely on private protocols and JSON schemas to generate pages. This leads to limited component functionality, difficulty in handling complex custom requirements, and challenging debugging because the protocol is proprietary.

Public Protocols and AST

AST (Abstract Syntax Tree) is a public, language‑agnostic protocol for parsing JavaScript (and other languages) into structured data. It provides a standardized way to understand and manipulate source code, enabling bidirectional conversion between code and protocol representations.

Vue AST Transform Overview

AST generation consists of lexical analysis (tokenizing the source) and syntax analysis (building the tree). The transformation pipeline typically includes:

Parsing : Convert source code to an AST.

Transformation : Traverse and modify the AST.

Generation : Convert the modified AST back to source code.

Keyword Explanation

Common AST node types include VariableDeclaration, Expression (MemberExpression, CallExpression, etc.), Statement, and many others. Interactive exploration can be done at astexplorer.net .

Parsing Vue Files

Using @vue/compiler-sfc yields a descriptor containing template , script / scriptSetup , and styles fields. However, the package is designed to compile Vue to render functions and does not provide AST transformation capabilities.

Solution Architecture

The project adopts a divide‑and‑conquer strategy:

Template block → parsed with node-html-parser , which offers an HTMLElement API similar to DOM manipulation.

Script block → parsed and transformed with Babel ( @babel/parser , @babel/traverse , @babel/generator , @babel/types , @babel/template ).

Style block → processed with existing loaders such as css-loader or postcss-loader .

Each block’s content field is edited independently, then the pieces are recombined to produce a new Vue SFC.

Template Handling Details

node-html-parser was chosen for its convenient HTMLElement interface. A known issue with parsing modifiers requires a manual patch in the source code.

To associate UI components with their props, a unique identifier can be injected into each element’s class attribute, enabling selection via querySelector('.${id}') .

Script Handling Details

The Babel toolchain provides the following utilities:

@babel/parser – parses source to AST.

@babel/traverse – walks the AST for modifications.

@babel/generator – generates source code from AST.

@babel/types – helper functions for AST node creation.

@babel/template – creates AST nodes from string templates.

Simple cases demonstrated include retrieving ref , computed , lifecycle hooks, and modifying values or statements using replaceWith or @babel/template for safer replacements.

Style Handling

Style blocks can be processed with mature loaders such as css-loader or postcss-loader .

Generating the Final Vue‑SFC

1. Re‑generate the template code from the modified AST and format it with Prettier. 2. Re‑generate the script code from the transformed AST and format it with Prettier. 3. Combine the formatted template, script, and untouched style sections to produce the final Vue SFC.

Implementation Highlights

The implementation includes code snippets (shown in the original images) that illustrate AST traversal, node replacement, and code generation for various scenarios.

Demo & Effect

The prototype supports an edit mode (activated with ⌥Option), hover selection of components, visual modification of component props, automatic synchronization back to source code, and live view re‑rendering.

Future Outlook

Planned features include drag‑and‑drop component placement, style editing, global state management, API integration, AI assistance, Git CI/CD pipelines, and a shared component material library.