feat: 新增数据源

packages/data-source/src/DataSourceManager.ts

@@ -0,0 +1,115 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import EventEmitter from 'events';
+
+import { DataSourceSchema } from '@tmagic/schema';
+
+import { DataSource, HttpDataSource } from './data-sources';
+import type { DataSourceManagerData, DataSourceManagerOptions, HttpDataSourceSchema, RequestFunction } from './types';
+
+class DataSourceManager extends EventEmitter {
+  public static dataSourceClassMap = new Map<string, typeof DataSource>();
+  public static registe(type: string, dataSource: typeof DataSource) {
+    DataSourceManager.dataSourceClassMap.set(type, dataSource);
+  }
+
+  public dataSourceMap = new Map<string, DataSource>();
+
+  public data: DataSourceManagerData = {};
+
+  private request?: RequestFunction;
+
+  constructor(options: DataSourceManagerOptions) {
+    super();
+
+    if (options.httpDataSourceOptions?.request) {
+      this.request = options.httpDataSourceOptions.request;
+    }
+
+    options.dataSourceConfigs.forEach((config) => {
+      this.addDataSource(config);
+    });
+  }
+
+  public get(id: string) {
+    return this.dataSourceMap.get(id);
+  }
+
+  public addDataSource(config?: DataSourceSchema) {
+    if (!config) return;
+
+    let ds: DataSource;
+    if (config.type === 'http') {
+      ds = new HttpDataSource({
+        schema: config as HttpDataSourceSchema,
+        request: this.request,
+      });
+    } else {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const DataSourceClass = DataSourceManager.dataSourceClassMap.get(config.type) || DataSource;
+
+      ds = new DataSourceClass({
+        schema: config,
+      });
+    }
+
+    this.dataSourceMap.set(config.id, ds);
+
+    this.data[ds.id] = ds.data;
+
+    ds.init().then(() => {
+      this.data[ds.id] = ds.data;
+    });
+
+    ds.on('change', () => {
+      Object.assign(this.data[ds.id], ds.data);
+
+      this.emit('change', ds.id);
+    });
+  }
+
+  public removeDataSource(id: string) {
+    this.get(id)?.destroy();
+    delete this.data[id];
+    this.dataSourceMap.delete(id);
+  }
+
+  public updateSchema(schemas: DataSourceSchema[]) {
+    schemas.forEach((schema) => {
+      const ds = this.dataSourceMap.get(schema.id);
+      if (!ds) {
+        return;
+      }
+      ds.setFields(schema.fields);
+      ds.updateDefaultData();
+      this.data[ds.id] = ds.data;
+    });
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.data = {};
+    this.dataSourceMap.forEach((ds) => {
+      ds.destroy();
+    });
+    this.dataSourceMap = new Map();
+  }
+}
+
+export default DataSourceManager;

packages/data-source/src/createDataSourceManager.ts

@@ -0,0 +1,55 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { MApp, MNode } from '@tmagic/schema';
+import { getDepNodeIds, getNodes, replaceChildNode } from '@tmagic/utils';
+
+import DataSourceManager from './DataSourceManager';
+import type { DataSourceManagerData, HttpDataSourceOptions } from './types';
+
+/**
+ * 创建数据源管理器
+ * @param dsl DSL
+ * @param httpDataSourceOptions http 数据源配置
+ * @returns DataSourceManager
+ */
+export const createDataSourceManager = (
+  dsl: MApp,
+  compiledNode = (node: MNode, _content: DataSourceManagerData) => node,
+  httpDataSourceOptions?: Partial<HttpDataSourceOptions>,
+) => {
+  if (!dsl?.dataSources) return;
+
+  const dataSourceManager = new DataSourceManager({
+    dataSourceConfigs: dsl.dataSources,
+    httpDataSourceOptions,
+  });
+
+  if (dsl.dataSources && dsl.dataSourceDeps) {
+    getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items).forEach((node) => {
+      replaceChildNode(compiledNode(node, dataSourceManager.data), dsl!.items);
+    });
+  }
+
+  dataSourceManager.on('change', (sourceId: string) => {
+    const dep = dsl.dataSourceDeps?.[sourceId];
+    if (!dep) return;
+    dataSourceManager.emit('update-data', getNodes(Object.keys(dep), dsl.items), sourceId);
+  });
+
+  return dataSourceManager;
+};

packages/data-source/src/data-sources/Base.ts

@@ -0,0 +1,75 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import EventEmitter from 'events';
+
+import type { DataSchema } from '@tmagic/schema';
+
+import type { DataSourceOptions } from '@data-source/types';
+import { getDefaultValueFromFields } from '@data-source/util';
+
+/**
+ * 静态数据源
+ */
+export default class DataSource extends EventEmitter {
+  public type = 'base';
+
+  public id: string;
+
+  public isInit = false;
+
+  public data: Record<string, any> = {};
+
+  private fields: DataSchema[] = [];
+
+  constructor(options: DataSourceOptions) {
+    super();
+
+    this.id = options.schema.id;
+    this.setFields(options.schema.fields);
+
+    this.updateDefaultData();
+  }
+
+  public setFields(fields: DataSchema[]) {
+    this.fields = fields;
+  }
+
+  public setData(data: Record<string, any>) {
+    // todo: 校验数据，看是否符合 schema
+    this.data = data;
+    this.emit('change');
+  }
+
+  public getDefaultData() {
+    return getDefaultValueFromFields(this.fields);
+  }
+
+  public updateDefaultData() {
+    this.setData(this.getDefaultData());
+  }
+
+  public async init() {
+    this.isInit = true;
+  }
+
+  public destroy() {
+    this.data = {};
+    this.fields = [];
+    this.removeAllListeners();
+  }
+}

packages/data-source/src/data-sources/Http.ts

@@ -0,0 +1,130 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getValueByKeyPath } from '@tmagic/utils';
+
+import { HttpDataSourceOptions, HttpDataSourceSchema, HttpOptions, RequestFunction } from '@data-source/types';
+
+import DataSource from './Base';
+
+/**
+ * 将json对象转换为urlencoded字符串
+ * @param data json对象
+ * @returns string
+ */
+const urlencoded = (data: Record<string, string | number | boolean | null | undefined>) =>
+  Object.entries(data).reduce((prev, [key, value]) => {
+    let v = value;
+    if (typeof value === 'object') {
+      v = JSON.stringify(value);
+    }
+    if (typeof value !== 'undefined') {
+      return `${prev}${prev ? '&' : ''}${globalThis.encodeURIComponent(key)}=${globalThis.encodeURIComponent(`${v}`)}`;
+    }
+    return prev;
+  }, '');
+
+/**
+ * 浏览器端请求
+ * 如果未有自定义的request方法，则使用浏览器的fetch方法
+ * @param options 请求参数
+ */
+const webRequest = async (options: HttpOptions) => {
+  const { url, method = 'GET', headers = {}, params = {}, data = {}, ...config } = options;
+  const query = urlencoded(params);
+  let body: string = JSON.stringify(data);
+  if (headers['Content-Type']?.includes('application/x-www-form-urlencoded')) {
+    body = urlencoded(data);
+  }
+
+  const response = await globalThis.fetch(query ? `${url}?${query}` : url, {
+    method,
+    headers,
+    body: method === 'GET' ? undefined : body,
+    ...config,
+  });
+
+  return response.json();
+};
+
+/**
+ * Http 数据源
+ * @description 通过 http 请求获取数据
+ */
+export default class HttpDataSource extends DataSource {
+  public type = 'http';
+
+  public isLoading = false;
+  public error?: Error;
+  public schema: HttpDataSourceSchema;
+  public httpOptions: HttpOptions;
+
+  private fetch?: RequestFunction;
+
+  constructor(options: HttpDataSourceOptions) {
+    const { options: httpOptions, ...dataSourceOptions } = options.schema;
+
+    super({
+      schema: dataSourceOptions,
+    });
+
+    this.schema = options.schema;
+    this.httpOptions = httpOptions;
+
+    if (typeof options.request === 'function') {
+      this.fetch = options.request;
+    } else if (typeof globalThis.fetch === 'function') {
+      this.fetch = webRequest;
+    }
+  }
+
+  public async init() {
+    if (this.schema.autoFetch) {
+      await this.request(this.httpOptions);
+    }
+
+    super.init();
+  }
+
+  public async request(options: HttpOptions) {
+    const res = await this.fetch?.({
+      ...this.httpOptions,
+      ...options,
+    });
+
+    if (this.schema.responseOptions?.dataPath) {
+      const data = getValueByKeyPath(this.schema.responseOptions.dataPath, res);
+      this.setData(data);
+    } else {
+      this.setData(res);
+    }
+  }
+
+  public get(options: Partial<HttpOptions> & { url: string }) {
+    return this.request({
+      ...options,
+      method: 'GET',
+    });
+  }
+
+  public post(options: Partial<HttpOptions> & { url: string }) {
+    return this.request({
+      ...options,
+      method: 'POST',
+    });
+  }
+}

packages/data-source/src/data-sources/index.ts

@@ -0,0 +1,2 @@
+export { default as DataSource } from './Base';
+export { default as HttpDataSource } from './Http';

packages/data-source/src/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as DataSourceManager } from './DataSourceManager';
+export * from './data-sources';
+export * from './createDataSourceManager';
+export * from './util';
+export * from './types';

packages/data-source/src/types.ts

@@ -0,0 +1,40 @@
+import { DataSourceSchema } from '@tmagic/schema';
+
+export interface DataSourceOptions {
+  schema: DataSourceSchema;
+}
+
+export type Method = 'get' | 'GET' | 'delete' | 'DELETE' | 'post' | 'POST' | 'put' | 'PUT';
+
+export type RequestFunction = (options: HttpOptions) => Promise<any>;
+
+export interface HttpOptions {
+  url: string;
+  params?: Record<string, string>;
+  data?: Record<string, any>;
+  headers?: Record<string, string>;
+  method?: Method;
+}
+
+export interface HttpDataSourceSchema extends DataSourceSchema {
+  type: 'http';
+  options: HttpOptions;
+  responseOptions?: {
+    dataPath?: string;
+  };
+  autoFetch?: boolean;
+}
+
+export interface HttpDataSourceOptions {
+  schema: HttpDataSourceSchema;
+  request?: RequestFunction;
+}
+
+export interface DataSourceManagerOptions {
+  dataSourceConfigs: DataSourceSchema[];
+  httpDataSourceOptions?: Partial<HttpDataSourceOptions>;
+}
+
+export interface DataSourceManagerData {
+  [key: string]: Record<string, any>;
+}

packages/data-source/src/util.ts

@@ -0,0 +1,46 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DataSchema } from '@tmagic/schema';
+
+export const getDefaultValueFromFields = (fields: DataSchema[]) => {
+  const data: Record<string, any> = {};
+
+  const defaultValue: Record<string, any> = {
+    string: '',
+    object: {},
+    array: [],
+    boolean: false,
+    number: 0,
+    null: null,
+    any: undefined,
+  };
+
+  fields.forEach((field) => {
+    if (typeof field.defaultValue !== 'undefined') {
+      data[field.name] = field.defaultValue;
+    } else if (field.type === 'object') {
+      data[field.name] = field.fields ? getDefaultValueFromFields(field.fields) : {};
+    } else if (field.type) {
+      data[field.name] = defaultValue[field.type];
+    } else {
+      data[field.name] = undefined;
+    }
+  });
+  return data;
+};