棱镜 UI 引擎

解构界面，重构体验 Prism UI Engine 是一个为现代Web应用而生的、下一代声明式UI渲染引擎。它并非又一个模板工具，而是一个将数据（白光）通过精巧的内部结构（棱镜），折射成丰富、动态、高性能用户界面（七彩光谱）的渲染核心。我们致力于为大型、复杂的企业级前端架构，提供前所未有的灵活性与扩展性。

核心理念

我们相信，优秀的UI架构应具备物理世界般的确定性与优雅。棱镜引擎的设计遵循三大哲学：

• 声明式至上: 你只需描述UI“应该是什么样子”，引擎将负责高效地“如何实现”。将开发者从繁琐的DOM操作中解放出来，专注于业务逻辑与用户体验。
• 渲染与逻辑分离: 布局与组件是纯粹的UI描述，业务逻辑通过事件或数据流与之交互。这种极致的解耦，让UI成为真正可独立测试、复用和维护的单元。
• 无限嵌套，有限复杂: 我们坚信，复杂的UI应由简单的、可组合的单元构成。棱镜引擎通过其独特的渲染栈管理，实现了真正的无限分级渲染能力，同时将复杂度控制在开发者可理解的范围内。

✨ 核心特性

🚀 高性能渲染管线

引擎内部构建了一条从模板解析到最终视图输出的完整渲染管线。通过对模板进行静态分析生成抽象语法树（AST），结合高效的Diff算法与局部更新策略，确保即使在数据频繁变更的场景下，依然能保持丝滑流畅的用户体验。

🎨 动态布局注入

布局不再是静态的配置文件，而是可动态编排的“第一等公民”。你可以从服务端、本地存储或任何数据源实时获取布局结构，并将其无缝注入到渲染流程中。这为构建高度可配置的仪表盘、可视化搭建平台以及A/B测试系统提供了无限可能。

♾️ 无限递归渲染

基于精心设计的渲染上下文栈，棱镜引擎能够安全、高效地处理任意深度的组件嵌套。无论你的UI层级有多深，引擎都能精准地管理每个节点的状态与生命周期，确保渲染路径的清晰与性能的稳定。

⚙️ 插件化架构

核心引擎保持极致轻量，所有高级能力（如动画、路由、状态管理）均通过插件形式扩展。这种设计赋予了架构师极高的自由度，可以按需裁剪，或构建专属的业务生态。

🌐 同构渲染一体

无论是客户端渲染（CSR）还是服务端渲染（SSR），棱镜引擎提供统一的API，可以轻松实现首屏直出，兼顾SEO与加载性能，为用户提供无缝的浏览体验。

🏗️ 架构概览

棱镜引擎的分层设计确保了各司其职，清晰明了。

+-----------------------------------------------------+
|                  Application Layer                  |
|              (Your Business Logic)                 |
+-----------------------------------------------------+
                          |
                          v
+-----------------------------------------------------+
|                 Declarative Templates              |
|              (JSON / JSX-like Schema)               |
+-----------------------------------------------------+
                          |
                          v
+-----------------------------------------------------+
|              Prism Engine Core                      |
|  +-----------------+  +-------------------------+  |
|  |   Parser (AST)   |->|    Renderer (Diff/Patch) |  |
|  +-----------------+  +-------------------------+  |
|           |                     |                   |
|           v                     v                   |
|  +-----------------+  +-------------------------+  |
|  |  Layout Manager |<-|  Context Stack (Nesting) |  |
|  +-----------------+  +-------------------------+  |
+-----------------------------------------------------+
                          |
                          v
+-----------------------------------------------------+
|                 Target Platform                     |
|          (Browser DOM / Native Views / etc.)        |
+-----------------------------------------------------+

🚀 快速开始

作为 npm 包使用

安装

npm install prizm-ui-engine

全局应用配置

import { createApp } from 'vue'
import PrizmUIEngine from 'prizm-ui-engine'
import App from './App.vue'

const app = createApp(App)
app.use(PrizmUIEngine)
app.mount('#app')

组件中使用

<script setup>
import { reactive, onErrorCaptured } from "vue";
import { RegionRenderer } from "prizm-ui-engine"; // 从 npm 包导入
import themeClass from "@/assets/style.module.css";  // 分离的样式文件
const regionConfig = reactive({
  name: "Prizm UI Engine",
  version: "1.0.0",
  main: {
    class: "portal-view",
    region: [
      {
        index: 1, // 排序
        class: "header", // 样式
        type: "component", // 模板
        component: "header", // 注入的组件名称
      },
      {
        index: 2,
        class: "content-layout",
        type: "layout",
        region: [
          {
            index: 1,
            class: "box",
            type: "component",
            component: "box",
          },
          {
            index: 2,
            class: "box",
            type: "component",
            component: "box",
          },
          {
            index: 3,
            class: "box",
            type: "component",
            component: "box",
          },
        ],
      },
      {
        index: 3,
        class: "footer",
        type: "component",
        component: "footer",
      },
    ],
  },
});


onErrorCaptured((err, instance, info) => {
  console.error("异步组件加载失败:", err);
  return false;
});
</script>

<template>
  <RegionRenderer :region="regionConfig" />
</template>

动态加载组件

动态注入组件，对于不存在的组件，上面onErrorCaptured会进行捕获，返回false，阻止错误继续向上传播。

import { getAsyncComponent } from "prizm-ui-engine";

const componentCache = new Map();

const loadComponent = (componentName) => {
  if (componentCache.has(componentName)) {
    return componentCache.get(componentName);
  }

  const asyncComponent = getAsyncComponent(componentName);

  componentCache.set(componentName, asyncComponent);
  return asyncComponent;
};

🤝 贡献

棱镜引擎是一个面向未来的开源项目，我们欢迎所有有志于探索前端边界、挑战架构极限的开发者与架构师们一同贡献智慧、代码与思想。 棱镜，不止于渲染，更是构建未来Web应用的基石。