AI + 低代码技术揭秘（四）：引擎、提供程序和服务

// Engine initialization
const engine = new Engine({
  container: containerElement, // UI container
  service: localService, // Backend service
  materialPath: '/', // Material assets path
  adapter: adapterInstance, // Runtime adapter
  remote: 'https://lcdp.vtj.pro' // Remote server URL
});

emitter.on(EVENT_PROJECT_CHANGE, (e) => this.saveProject(e));
emitter.on(EVENT_BLOCK_CHANGE, (e) => this.changeFile(e));
emitter.on(EVENT_NODE_CHANGE, () => this.changeCurrentFile());
emitter.on(EVENT_PROJECT_PUBLISH, () => this.publish());
emitter.on(EVENT_PROJECT_FILE_PUBLISH, () => this.publishCurrent());

// Provider initialization
const { provider, onReady } = createProvider({
  mode: ContextMode.Runtime, // Operating mode
  service: localService, // Backend service
  materialPath: '/materials', // Material assets path
  dependencies: {
    // Frontend dependencies
    Vue: () => import('vue'),
    VueRouter: () => import('vue-router')
  }
});

// Get a render component for a file ID
const component = await provider.getRenderComponent('pageId');
// Create a renderer for a DSL schema
const { renderer, context } = provider.createDslRenderer(dslSchema);

// LocalService request flow
LocalService.init(project)
  -> this.api('init', project)
  -> POST /__vtj__/api/:type.json
  -> controller.init(req, opts)
  -> service.init(body, opts)
  -> JsonRepository.get(projectId)

// Create a provider for runtime mode
const { provider, onReady } = createProvider({
  mode: ContextMode.Runtime,
  service: new LocalService(createServiceRequest(notify)),
  adapter: createAdapter({
    loading,
    notify,
    useTitle,
    alert
  }),
  dependencies: {
    Vue: () => import('vue'),
    VueRouter: () => import('vue-router')
  }
});
// When provider is ready, render a component
onReady(async () => {
  app.use(provider);
  renderer.value = await provider.getRenderComponent(
    route.params.id.toString(),
    (file) => {
      setupPageSetting(app, route, file);
    }
  );
});

// Create an engine for design mode
const engine = new Engine({
  container,
  service,
  materialPath: __BASE_PATH__,
  pageBasePath: base === '/' ? '' : base,
  adapter,
  access: __ACCESS__,
  remote,
  auth,
  checkVersion
});
// When engine is ready, open a file
engine.ready(() => {
  engine.openFile(route.query.id as string);
});