fix: 修复渲染器无法调用 project 内定义的 api

apps/designer/src/views/extension.ts

@@ -0,0 +1,81 @@
+import * as Vue from 'vue';
+import * as core from '@vtj/core';
+import * as VtjUtils from '@vtj/utils';
+import * as VtjUI from '@vtj/ui';
+import * as designer from '@vtj/designer';
+import * as renderer from '@vtj/renderer';
+import * as VtjIcons from '@vtj/icons';
+import * as ElementPlus from 'element-plus';
+import type { ExtensionConfig } from '@vtj/core';
+import type { EngineOptions } from '@vtj/designer';
+
+export type ExtensionOptions = ExtensionConfig;
+export type ExtensionFactory = (
+  config: ExtensionConfig
+) => Partial<EngineOptions> | void;
+
+export interface ExtensionOutput {
+  options: Partial<EngineOptions>;
+  adapters: Record<string, any>;
+}
+
+export class Extension {
+  private urls: string[] = [];
+  private library: string = '';
+  private params: any[] = [];
+  private __BASE_PATH__: string = '/';
+  private __adapters__: Record<string, any> = {};
+  constructor(private options: ExtensionOptions) {
+    const __VTJ_PRO__ = {
+      ...core,
+      ...designer,
+      ...renderer
+    };
+
+    (window as any).Vue = Vue;
+    (window as any).__VTJ_PRO__ = __VTJ_PRO__;
+    (window as any).VtjUtils = VtjUtils;
+    (window as any).VtjIcons = VtjIcons;
+    (window as any).VtjUI = VtjUI;
+    (window as any).ElementPlus = ElementPlus;
+    const {
+      urls = [],
+      library,
+      params = [],
+      __BASE_PATH__ = '/',
+      __adapters__ = {}
+    } = options || {};
+    this.urls = urls;
+    this.library = library;
+    this.params = params;
+    this.__BASE_PATH__ = __BASE_PATH__;
+    this.__adapters__ = __adapters__;
+  }
+  async load(): Promise<ExtensionOutput> {
+    let options: Partial<EngineOptions> = {};
+    if (this.library) {
+      const base = this.__BASE_PATH__;
+      const css = this.urls
+        .filter((n) => renderer.isCSSUrl(n))
+        .map((n) => `${base}${n}`);
+      const scripts: string[] = this.urls
+        .filter((n) => renderer.isJSUrl(n))
+        .map((n) => `${base}${n}`);
+      renderer.loadCssUrl(css);
+      if (scripts.length) {
+        const output = await renderer
+          .loadScriptUrl(scripts, this.library)
+          .catch(() => null);
+        if (output && typeof output === 'function') {
+          options = output.call(output, this.options, this.params);
+        } else {
+          options = output || {};
+        }
+      }
+    }
+    return {
+      options,
+      adapters: this.__adapters__
+    };
+  }
+}

apps/designer/src/views/index.ts

@@ -0,0 +1,10 @@
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import 'element-plus/theme-chalk/index.css';
+// import 'vxe-table/es/style.min.css';
+import '@vtj/ui/dist/style.css';
+import '@vtj/icons/dist/style.css';
+
+export * from '@vtj/core';
+export * from '@vtj/designer';
+export * from '@vtj/renderer';
+export * from './extension';

apps/designer/src/views/index.vue

@@ -6,9 +6,7 @@
 import { ref } from 'vue';
 import {
   Engine,
-  widgetManager,
-  LocalService,
-  MemoryService
+  widgetManager
   // type ProjectModel
 } from '@vtj/pro';
 
@@ -16,7 +14,6 @@ import { StorageService } from '@/service';
 
 const container = ref();
 const service = new StorageService();
-// const service = new StorageService();
 
 const engine = new Engine({
   container,
@@ -30,7 +27,6 @@ const engine = new Engine({
 widgetManager.set('Previewer', {
   props: {
     path: (block: any) => {
-      console.log('block', block);
       const pathname = location.pathname;
       return `${pathname}#/preview/${block.id}`;
     }

apps/designer/src/views/preview.vue

@@ -1,36 +1,33 @@
-<script setup lang="ts">
-import { createRenderer } from '@vtj/renderer';
+<template>
+  <component v-if="renderer" :is="renderer"></component>
+</template>
+<script lang="ts" setup>
+import { ref, getCurrentInstance } from 'vue';
 import { useRoute } from 'vue-router';
+import { createProvider, ContextMode } from '@vtj/pro';
 import { StorageService } from '@/service';
-import { getCurrentInstance } from 'vue';
-
-const route = useRoute();
-
 const service = new StorageService();
-
+const { provider, onReady } = createProvider({
+  mode: ContextMode.Runtime,
+  service,
+  project: {
+    id: 'test',
+    name: '测试'
+  },
+  dependencies: {
+    Vue: () => import('vue'),
+    VueRouter: () => import('vue-router'),
+    ElementPlus: () => import('element-plus')
+  }
+});
+const route = useRoute();
+const renderer = ref();
 const instance = getCurrentInstance();
 
-const app = instance?.appContext.app;
-
-const file = await service.getFile(route.params.id.toString());
-
-console.log('file', file);
-
-Object.assign(route.meta, file.meta);
-const el = app?._container;
-if (file?.type === 'page') {
-  el.classList.add('is-page');
-}
-const isPure = file?.pure;
-if (isPure) {
-  el.classList.add('is-pure');
-}
-
-const { renderer } = createRenderer({
-  dsl: file
+onReady(async () => {
+  instance?.appContext.app.use(provider);
+  renderer.value = await provider.getRenderComponent(
+    route.params.id.toString()
+  );
 });
 </script>
-
-<template>
-  <component :is="renderer" />
-</template>