@cuipengyu5/build-plugin-lowcode 0.0.1 → 0.0.2

package/src/templates/index.jsx

@@ -0,0 +1,273 @@
+import init, { editor, project, material, setters, config } from '@alifd/lowcode-preset-plugin';
+import mergeWith from 'lodash/mergeWith';
+{{{setterImportStr}}}
+
+const queryObject = new URLSearchParams(window.location.search);
+const fullbackMeta = '{{{fullbackMeta}}}' || '';
+let platform = queryObject.get('platform') || '';
+let metaType = queryObject.get('metaType') || platform || '';
+const metaPathMap = {{{metaPathMap}}};
+const key = metaType ? `meta.${metaType}` : 'meta';
+if (!metaPathMap[key]) {
+  console.warn(`[@alifd/build-plugin-lowcode] metaType can only in [${Object.keys(metaPathMap)}], current metaType is ${key}, fullback to ${fullbackMeta || 'default'}.`);
+  metaType = fullbackMeta === 'default' ? '' : fullbackMeta;
+}
+const isNewEngineVersion = !!material;
+const devMode = !!{{{ devMode }}};
+const baseLibrary = '{{{baseLibrary}}}';
+const basePackages = [
+  {
+    package: 'moment',
+    version: '2.24.0',
+    urls: ['https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js'],
+    library: 'moment',
+  },
+  {
+    package: "lodash",
+    library: "_",
+    urls: [
+      "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"
+    ]
+  },
+  {
+    title: 'fusion组件库',
+    package: '@alifd/next',
+    version: '1.25.23',
+    urls: [
+      'https://g.alicdn.com/code/lib/alifd__next/1.25.23/next.min.css',
+      'https://g.alicdn.com/code/lib/alifd__next/1.25.23/next-with-locales.min.js',
+    ],
+    library: 'Next',
+  },
+  {
+    package: 'antd',
+    version: '4.17.3',
+    urls: [
+      'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.js',
+      'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.css',
+    ],
+    library: 'antd',
+  },
+];
+
+if (baseLibrary === 'rax') {
+  basePackages.push({
+    title: 'meet',
+    package: '@alifd/meet',
+    version: 'meet@2.4.2-beta.6',
+    urls: [
+      'https://mc-fusion.alibaba-inc.com/unpkg/@alifd/meet@2.4.2-beta.6/umd/meet.lowcode.js',
+      'https://mc-fusion.alibaba-inc.com/unpkg/@alifd/meet@2.4.2-beta.6/umd/meet.min.css',
+    ],
+    library: 'Meet',
+  });
+}
+
+const assets = {
+  packages: []
+};
+
+let assetsName = './assets-dev.json';
+
+const setterMap = {{{setterMap}}};
+const presetConfig = {{{presetConfig}}};
+const customPlugins = {{{customPlugins}}};
+
+const type = '{{{type}}}';
+
+if (devMode && type !== 'setter') {
+  assets.packages.push({
+    "package": "{{{package}}}",
+    "version": "{{{version}}}",
+    "library": "{{{library}}}",
+    "urls": {{{ urls }}},
+    "editUrls": {{{editUrls}}},
+    "advancedUrls": {{{advancedRenderUrls}}},
+  });
+  assets.groupList = {{{groups}}};
+  assets.sort = {
+    "groupList": {{{groups}}},
+    "categoryList": {{{categories}}}
+  };
+  assets.ignoreComponents = {{{ignoreComponents}}};
+
+  assets.components = [{
+    exportName: '{{{metaExportName}}}',
+    url: metaType ? `/meta.${metaType}.js` : '/meta.js',
+  }];
+}
+
+const schema = getPageSchema() || {
+  componentName: 'Page',
+  id: 'node_dockcviv8fo1',
+  props: {
+    ref: 'outterView',
+    style: {
+      height: '100%',
+    },
+  },
+  fileName: 'lowcode',
+  dataSource: {
+    list: [],
+  },
+  state: {
+    text: 'outter',
+    isShowDialog: false,
+  },
+  css: 'body {font-size: 12px;} .botton{width:100px;color:#ff00ff}',
+  lifeCycles: {
+    componentDidMount: {
+      type: 'JSFunction',
+      value: "function() {\n    console.log('did mount');\n  }",
+    },
+    componentWillUnmount: {
+      type: 'JSFunction',
+      value: "function() {\n    console.log('will umount');\n  }",
+    },
+  },
+  methods: {
+    testFunc: {
+      type: 'JSFunction',
+      value: "function() {\n    console.log('test func');\n  }",
+    },
+    onClick: {
+      type: 'JSFunction',
+      value: 'function() {\n    this.setState({\n      isShowDialog: true\n    })\n  }',
+    },
+    closeDialog: {
+      type: 'JSFunction',
+      value: 'function() {\n    this.setState({\n      isShowDialog: false\n    })\n  }',
+    },
+  },
+  children: [],
+};
+
+const LCE_CONTAINER = document.getElementById('lce-container');
+
+init(() => {
+  return {
+    name: 'editor-init',
+    async init() {
+      if (typeof setterMap === 'object' && Object.keys(setterMap).length) {
+        setters.registerSetter(setterMap);
+      }
+      if (!devMode) {
+        const devAssets = await (await fetch(assetsName)).json();
+        const packages = devAssets.packages;
+        assets.packages = assets.packages.concat(packages);
+        assets.components = devAssets.components.map(item => {
+          if (item.advancedUrls && metaType && item.advancedUrls[metaType] && item.advancedUrls[metaType].length) {
+            item.url = item.advancedUrls[metaType][0];
+          } else if (item.urls && metaType && item.urls[metaType]) {
+            item.url = item.urls[metaType];
+          }
+          return item;
+        });
+        assets.groupList = devAssets.groupList;
+      } else {
+        const extraAssets = {{{extraAssets}}};
+        const builtinAssets = {{{builtinAssets}}};
+        extraAssets && await handleExtraAssets(assets, extraAssets);
+        builtinAssets && await handleExtraAssets(assets, builtinAssets);
+      }
+
+       // Overwrite the same library in basePackages
+      const packagesMap = new Map();
+      const sortedKeys = [...new Set(
+        [...basePackages, ...assets.packages].map((item) => {
+          const { library } = item;
+          packagesMap.set(library, item);
+          return library;
+        })
+      )];
+      assets.packages = sortedKeys.map((key) => packagesMap.get(key));
+
+      assets.packages = assets.packages.map(item => {
+        if (item.editUrls && item.editUrls.length) {
+          item.renderUrls = item.urls;
+          item.urls = item.editUrls;
+        }
+        return item;
+      })
+
+      if (baseLibrary && baseLibrary === 'rax') {
+        if (isNewEngineVersion) {
+          config.set('renderEnv', 'rax');
+          config.set('simulatorUrl', undefined);
+        } else {
+          editor.set('renderEnv', 'rax');
+          project.onRendererReady(() => {
+            editor.get('designer').currentDocument.simulator._iframe.onload = () => {
+              editor.get('designer').currentDocument.simulator.set('device', 'phone');
+            }
+          });
+        }
+      }
+
+      if (isNewEngineVersion) {
+        material.setAssets(assets);
+        project.openDocument(schema);
+      } else {
+        editor.setAssets(assets);
+        project.open(schema);
+      }
+    },
+  }
+}, customPlugins || [], LCE_CONTAINER, {
+  supportVariableGlobally: true,
+  presetConfig
+});
+
+function getPageSchema() {
+  const schema = JSON.parse(
+    window.localStorage.getItem('projectSchema') || '{}'
+  );
+
+  const pageSchema = schema?.componentsTree?.[0];
+  return pageSchema;
+};
+
+async function handleExtraAssets(assets, extraAssets) {
+  if (extraAssets && Array.isArray(extraAssets) && extraAssets.length) {
+    const baseSchemas = await Promise.all(
+      extraAssets.map(async (url) => {
+        if (typeof url === 'object') {
+          return url;
+        } else {
+          try {
+            return (await fetch(url)).json();
+          } catch (e) {
+            console.error(`get assets data from builtin assets ${url} failed: `, e);
+            return {};
+          }
+        }
+      })
+    );
+    baseSchemas.forEach((item) => {
+      const _assets = {
+        ...item,
+        packages: item.packages || [item.package],
+        components: item.components,
+        componentList: (item.componentList || []).map((comp) => {
+          if (comp.children) {
+            comp.children = comp.children.map((snippet) => {
+              if (!snippet.sort) {
+                snippet.sort = {
+                  category: comp.title,
+                  group: '原子组件',
+                };
+              }
+              return snippet;
+            });
+          }
+          return comp;
+        }),
+      };
+      mergeWith(assets, _assets, (objValue, srcValue) => {
+        if (Array.isArray(objValue) && Array.isArray(srcValue)) {
+          return srcValue.concat(objValue);
+        }
+      });
+    });
+  }
+}

package/src/templates/meta.js

@@ -0,0 +1,168 @@
+{{{ componentsImportStr }}}
+
+const componentCategorySort = {};
+{{{categories}}}
+  .reverse()
+  .forEach((item, index) => {
+    componentCategorySort[item] = ++index;
+  });
+
+function generateComponentList(components) {
+  const componentList = [
+    {
+      title: '常用',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '容器',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '导航',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '内容',
+      icon: '',
+      children: [],
+    },
+    {
+      title: 'Feedback 反馈',
+      icon: '',
+      children: [],
+    },
+  ];
+
+  const groupMap = {
+    原子组件: true,
+  };
+  const compGroup = {};
+
+  components.forEach((comp) => {
+    const category = comp.category || '其他';
+    if (comp.group && !compGroup[comp.componentName]) {
+      compGroup[comp.componentName] = comp.group;
+    }
+    if (comp.group && !groupMap[comp.group]) {
+      groupMap[comp.group] = true;
+    }
+    let target = componentList.find((item) => item.title === category);
+    if (!target) {
+      target = {
+        title: category,
+        icon: '',
+        children: [],
+      };
+
+      componentList.push(target);
+    }
+
+    if (comp.snippets && comp.snippets.length) {
+      target.children.push({
+        componentName: comp.componentName,
+        title: comp.title || comp.componentName,
+        sort: {
+          category: target.title,
+          group: compGroup[comp.componentName] || '原子组件',
+          priority: componentCategorySort[target.title] || 0,
+        },
+        icon: '',
+        package: comp.npm.pkg,
+        snippets: comp.snippets || [],
+      });
+    }
+  });
+  return componentList;
+}
+
+function fillRealVersion(meta, packageName = '{{{packageName}}}', version = '{{{version}}}', basicLibraryVersion={{{basicLibraryVersion}}}) {
+  if (!meta || !version) {
+    return meta;
+  }
+  const { npm } = meta;
+  if (!npm) {
+    return meta;
+  }
+  if (typeof basicLibraryVersion === 'object' && basicLibraryVersion[npm.package]) {
+    meta.npm = {
+      ...npm,
+      version: basicLibraryVersion[npm.package]
+    };
+  } else if (npm.package === packageName) {
+    meta.npm = {
+      ...npm,
+      version
+    };
+  }
+  return meta;
+}
+
+const componentMetas = [{{{ components }}}];
+const components = [];
+const npmInfo = {{{ npmInfo }}};
+componentMetas.forEach(meta => {
+  if (Array.isArray(meta)) {
+    components.push(
+      ...meta.map((item) => {
+        if (!item.npm) {
+          const { componentName } = item;
+          const names = componentName.split('.');
+          const [exportName, subName] = names;
+          item.npm = {
+            exportName: exportName,
+            main: '',
+            destructuring: true,
+            subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
+          };
+        }
+        item.npm = { ...npmInfo, ...(item.npm || {}) };
+        return fillRealVersion(item);
+      }),
+    );
+  } else if (meta.components) {
+    components.push(
+      ...meta.components.map((item) => {
+        if (!item.npm) {
+          const { componentName } = item;
+          const names = componentName.split('.');
+          const [exportName, subName] = names;
+          item.npm = {
+            exportName: exportName,
+            main: '',
+            destructuring: true,
+            subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
+          };
+        }
+        item.npm = { ...npmInfo, ...(item.npm || {}) };
+        return fillRealVersion(item);
+      }),
+    );
+  } else {
+    if (!meta.npm) {
+      const { componentName } = meta;
+      const names = componentName.split('.');
+      const [exportName, subName] = names;
+      meta.npm = {
+        exportName: exportName,
+        main: '',
+        destructuring: true,
+        subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
+      };
+    }
+    meta.npm = { ...npmInfo, ...(meta.npm || {}) };
+    components.push(fillRealVersion(meta));
+  }
+});
+
+const componentList = generateComponentList(components);
+
+export { components, componentList };
+
+const execCompile = !!{{{ execCompile }}};
+
+if (!execCompile) {
+  window.{{{metaExportName}}} = { components, componentList };
+}

package/src/templates/preview.jsx

@@ -0,0 +1,93 @@
+{{#if isRax}}
+const loadingStyle = {
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontWeight: 300,
+  fontSize: '24px',
+  lineHeight: '36px',
+};
+import { useState, render } from "rax";
+import Renderer from "@ali/lowcode-rax-renderer";
+import UniversalDriver from 'driver-universal';
+const Loading = () => <div style={loadingStyle} className="lowcode-plugin-sample-preview-loading"> <h1>Loading...</h1> </div>;
+{{else}}
+import ReactDOM from 'react-dom';
+import React, { useState } from 'react';
+import { Loading } from '@alifd/next';
+import Renderer from '@alilc/lowcode-react-renderer';
+{{/if}}
+
+import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
+
+const queryObject = new URLSearchParams(window.location.search);
+const platform = queryObject.get('platform') || 'default';
+
+const SamplePreview = () => {
+  const [data, setData] = useState({});
+
+  async function init() {
+    const packages = JSON.parse(window.localStorage.getItem('packages'));
+    const projectSchema = JSON.parse(window.localStorage.getItem('projectSchema'));
+    const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
+    const componentsMap = {};
+    componentsMapArray.forEach((component) => {
+      componentsMap[component.componentName] = component;
+    });
+    const schema = componentsTree[0];
+
+    const libraryMap = {};
+    const libraryAsset = [];
+    packages.forEach(({ package: _package, library, urls, renderUrls, advancedUrls }) => {
+      libraryMap[_package] = library;
+      if (advancedUrls && advancedUrls[platform]) {
+        libraryAsset.push(advancedUrls[platform]);
+      } else if (renderUrls) {
+        libraryAsset.push(renderUrls);
+      } else if (urls) {
+        libraryAsset.push(urls);
+      }
+    });
+
+    const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
+
+    // TODO asset may cause pollution
+    const assetLoader = new AssetLoader();
+    try{
+      await assetLoader.load(libraryAsset);
+    } catch (e) {
+      console.warn('[LowcodePreview] load resources failed: ', e);
+    }
+    const components = buildComponents(libraryMap, componentsMap);
+
+    setData({
+      schema,
+      components,
+    });
+  }
+
+  const { schema, components } = data;
+
+  if (!schema || !components) {
+    init();
+    return <Loading fullScreen />;
+  }
+
+  return (
+    <div className="lowcode-plugin-sample-preview">
+      <Renderer
+        className="lowcode-plugin-sample-preview-content"
+        schema={schema}
+        components={components}
+      />
+    </div>
+  );
+};
+
+{{#if isRax}}
+render(<SamplePreview />, document.getElementById('ice-container'), { driver: UniversalDriver });
+{{else}}
+ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));
+{{/if}}

package/src/templates/view.js

@@ -0,0 +1,24 @@
+import * as componentInstances from '{{{entryPath}}}';
+
+{{{ componentViewsImportStr }}}
+
+{{{scssImport}}}
+
+{{{ componentViewsExportStr }}}
+
+export * from '{{{entryPath}}}';
+
+const coveredComponents = {{{componentViews}}};
+
+const library = '{{{ library }}}';
+const execCompile = !!{{{ execCompile }}};
+
+if (!execCompile) {
+  window[library] = Object.assign({__esModule: true}, componentInstances || {}, coveredComponents || {});
+}
+
+function getRealComponent(component, componentName) {
+  if (component.default) return component.default;
+  if (component[componentName]) return component[componentName];
+  return component;
+}

package/src/utils/getDemoDir.js

@@ -0,0 +1,16 @@
+const { existsSync } = require('fs');
+const { join } = require('path');
+
+module.exports = function getDemoPath(projectDir) {
+  let demoDir;
+  // compatible with directory docs
+  const searchDirs = ['demo', 'docs'];
+  for (let i = 0; i < searchDirs.length; i++) {
+    const searchPath = join(projectDir, searchDirs[i]);
+    if (existsSync(searchPath)) {
+      demoDir = searchDirs[i];
+      break;
+    }
+  }
+  return demoDir;
+};