Zelpis 是一个基于 DSL（领域特定语言）驱动的前端渲染框架，支持 React 和 Vue 两种主流前端框架，提供灵活的构建和渲染功能。
- DSL 驱动：通过 DSL 定义来驱动渲染过程，简化前端开发
- 框架无关：支持 React 和 Vue 两种前端框架
- 模块化设计：清晰的包结构，职责分明
- 插件机制：提供构建和渲染插件，增强扩展性
- CSR 为主：客户端渲染已支持；SSR 相关能力仍在演进，浏览器侧入口会以 CSR 方式运行
- HTML 自定义：灵活的 HTML 配置和校验功能
MIT
在项目依赖中安装核心包（包名为作用域包 @zelpis/core）：
pnpm add @zelpis/core在在 vite.config.ts 中配置 zelpis，其他配置参考 vite 配置。
import viteReact from '@vitejs/plugin-react'
import { zelpisPlugin } from '@zelpis/core/plugins'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
viteReact(),
zelpisPlugin({
render: { baseDir: './' },
}),
],
zelpis: {
entrys: [
{
basePath: '/',
entryPath: './entry.ts',
dslPath: './model',
},
],
},
})在 model 目录下创建 DSL 文件：
// model/index.ts
import { defineDsl } from '@zelpis/core'
export default defineDsl({
title: 'Home Page',
description: 'Welcome to ZElpis',
keywords: 'zelpis, dsl, frontend',
route: '/',
component: './components/Home',
data: {
message: 'Hello ZElpis!'
}
})创建 entry.ts 文件：
// entry.ts
import { boot } from '@zelpis/core'
import App from './App'
boot({
framework: 'react', // 或 'vue'
Component: App,
})入口里可传入 type?: 'csr' | 'ssr'。在常见浏览器开发/构建产物中，非 CSR 会收到控制台提示并仍按 CSR 处理；SSR 场景请结合构建与服务端集成查阅示例与文档。
// App.tsx
import React from 'react'
function App(props: any) {
return (
<div>
<h1>{props.title || 'ZElpis App'}</h1>
<p>{props.message || 'Welcome!'}</p>
</div>
)
}
export default App<!-- App.vue -->
<template>
<div>
<h1>{{ title || 'ZElpis App' }}</h1>
<p>{{ message || 'Welcome!' }}</p>
</div>
</template>
<script setup lang="ts">
defineProps<{
title?: string
message?: string
}>()
</script>核心包，导出渲染功能和 DSL 定义工具。
处理 React 和 Vue 的渲染逻辑；以 CSR 为主，SSR 相关逻辑仍在演进。
提供构建相关功能和插件，支持多入口配置和 HTML 自定义。
提供通用工具和配置，被其他包依赖。
Zelpis 的 DSL 通过 defineDsl 描述页面或模块配置。核心包里的 DSL 类型当前为可扩展的空接口，你可以在业务侧约定字段（例如 title、route、data 等），或与内部模块生成的类型对齐。
import { defineDsl } from '@zelpis/core'
export default defineDsl({
name: 'Home Page',
// ...more fields
})pnpm installpnpm buildpnpm devpnpm testpnpm typecheck