vue也支援聲明式UI了，向行動裝置kotlin，swift看齊，拋棄html，pug升級版，進來看看新語法吧

vue也支持聲明式UI了，向移動端kotlin，swift看齊，拋棄html，pug升級版，進來看看新語法吧

龜所周知，新生代的UI框架（如：kotlin，swift，flutter，鴻蒙）都已經拋棄了XML這類的結構化數據標記語言改為使用聲明式UI

只有web端還沒有支持此類UI語法，此次我開發的ovsjs為前端也帶來了此類聲明式UI語法的支持，語法如下

項目地址
github.com/alamhubb/ov…

語法插件地址：
marketplace.visualstudio.com/items?itemN…

新語法如下：

我認為更強的地方是我的新設計除了為前端帶來了聲明式UI，還支持了 #{ } 不渲染代碼塊的設計，支持在聲明式UI中編寫代碼，這樣UI和邏輯之間的距離更近，維護更方便，抽象組件也更容易

對比kotlin，swift，flutter，鴻蒙語法如下：

kotlin的語法

import kotlinx.browser.*
import kotlinx.html.*
import kotlinx.html.dom.*

fun main() {
    document.body!!.append.div {
        h1 {
            +"Welcome to Kotlin/JS!"
        }
        p {
            +"Fancy joining this year's "
            a("https://kotlinconf.com/") {
                +"KotlinConf"
            }
            +"?"
        }
    }
}

swiftUI的語法

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("Hello SwiftUI")
                .font(.largeTitle)
                .fontWeight(.bold)

            Text("Welcome to SwiftUI world")

            Button("Click Me") {
                print("Button clicked")
            }
        }
        .padding()
    }
}

flutter的語法

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                "Hello Flutter",
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 12),
              const Text("Welcome to Flutter world"),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  print("Button clicked");
                },
                child: const Text("Click Me"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

鴻蒙 arkts

@Entry
@Component
struct Index {
  @State message: string = 'Hello ArkUI'

  build() {
    Column() {
      Text(this.message)
        .fontSize(28)
        .fontWeight(FontWeight.Bold)

      Text('Welcome to HarmonyOS')
        .margin({ top: 12 })

      Button('Click Me')
        .margin({ top: 16 })
        .onClick(() => {
          console.log('Button clicked')
        })
    }
    .padding(20)
  }
}

原理實現

簡述一下實現原理，就是通過parser支持了新語法，然後將新語法轉義為iife包裹的vue的h函數

為什麼要iife包裹
因為要支持不渲染代碼塊

ovs圖中的代碼對應的編譯後的代碼是這樣的

import {defineOvsComponent} from "/@fs/D:/project/qkyproject/test-volar/ovs/ovs-runtime/src/index.ts";
import {$OvsHtmlTag} from "/@fs/D:/project/qkyproject/test-volar/ovs/ovs-runtime/src/index.ts";
import {ref} from "/node_modules/.vite/deps/vue.js?v=76ca4127";
export default defineOvsComponent(props => {
  const msg = "You did it!";
  let count = ref(0);
  const timer = setInterval(() => {
    count.value = count.value + 1;
  }, 1000);
  return $OvsHtmlTag.div({class:'greetings',onClick(){
    count.value = 0;
  }},[
    $OvsHtmlTag.h1({class:'green'},[msg]),
    count,
    $OvsHtmlTag.h3({},[
      "You've successfully created a project with ",
      $OvsHtmlTag.a({href:'https://vite.dev/',target:'_blank',rel:'noopener'},['Vite']),
      ' + ',
      $OvsHtmlTag.a({href:'https://vuejs.org/',target:'_blank',rel:'noopener'},['Vue 3']),
      ' + ',
      $OvsHtmlTag.a({href:'https://github.com/alamhubb/ovsjs',target:'_blank',rel:'noopener'},['OVS']),
      '.'
    ])
  ]);
});

parser是我自己寫的，抄了chevortain的設計，寫了個subhuti，支持定義peg語法
github.com/alamhubb/ov…

slimeparser，支持es2025語法的parser，基於subhuti，聲明es2025語法就行
github.com/alamhubb/ov…

然後就是ovs繼承slimeparser，添加了ovs的語法支持，並且在ast生成的時候將代碼轉為vue的渲染函數，運行時就是運行的vue的渲染函數的代碼，所以完美支持vue的生態

感興趣的可以試試，入門教程
github.com/alamhubb/ov…