feat: 支持接入 G

lxfu1 · Dec 14, 2021 · 1170bdf · 1170bdf
1 parent 0941ce7
commit 1170bdf
Show file tree

Hide file tree

Showing 14 changed files with 339 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ pids
 *.pid.lock
 /web-server/server/static/*.js
 /web-server/server/static/assets
+/web-server/server/static/g-*
 /web-server/client/src/code.ts
 /web-server/*/*/env.*
 

diff --git a/src/main.ts b/src/main.ts
@@ -20,12 +20,13 @@ async function initPublic() {
     const project_name = core.getInput('project_name') || 'G2Plot';
     const project_branch = core.getInput('project_branch') || 'master';
     const dist_command = core.getInput('dist_command') || 'dist';
+    const tag = core.getInput('tag') || 'latest';
     await exec('git clone https://github.com/lxfu1/surge-preview.git');
     await exec(`mkdir -p pub/preview`);
     options.cwd = './surge-preview';
     // await exec(`npx sh start.sh ${project_name} ${project_branch}`);
     await exec(
-      `sh start.sh ${project_name} ${project_branch} ${dist_command}`,
+      `sh start.sh ${project_name} ${project_branch} ${dist_command} ${tag}`,
       [],
       options
     );

diff --git a/start.sh b/start.sh
@@ -12,6 +12,8 @@ project_branch=$2
 
 dist_command=$3
 
+tag=$4
+
 cd ..
 
 echo "\033[49;32m \n******* ${project_name} cloning *******\n \033[0m"
@@ -32,7 +34,7 @@ cd ../surge-preview/web-server/client
 
 echo "\033[49;32m \n******* set env *******\n \033[0m"
 
-node scripts/set-env.js ${project_name} ${project_branch} ${dist_command}
+node scripts/set-env.js ${project_name} ${project_branch} ${dist_command} ${tag}
 
 echo "\033[49;32m \n******* client installing *******\n \033[0m"
 

diff --git a/web-server/client/package.json b/web-server/client/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.3.12",
+    "classnames": "^2.3.1",
     "insert-css": "^2.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
@@ -57,6 +58,7 @@
     "fs-extra": "^9.0.1",
     "html-webpack-plugin": "4.5.0",
     "lodash": "^4.17.21",
+    "@types/lodash": "^4.14.178",
     "mini-css-extract-plugin": "^1.6.0",
     "npm-run-all": "^4.1.5",
     "pnp-webpack-plugin": "1.6.4",

diff --git a/web-server/client/public/index.html b/web-server/client/public/index.html
@@ -21,6 +21,7 @@
     <script src="https://gw.alipayobjects.com/os/lib/react/16.14.0/umd/react.development.js"></script>
     <script src="https://gw.alipayobjects.com/os/lib/react-dom/16.14.0/umd/react-dom.development.js"></script>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/web-server/client/scripts/copy.js b/web-server/client/scripts/copy.js
@@ -1,12 +1,40 @@
 const shell = require('shelljs');
+const fs = require('fs');
+const path = require('path');
 const { project_name } = require('./env');
 
-const lower_project_name = project_name.toLocaleLowerCase();
+// G 有多个目录，需要依次复制
+if (project_name === 'G') {
+  const fp = path.resolve('../../../G/packages');
+  const scanDir = (foldPath, dir) => {
+    try {
+      const files = fs.readdirSync(foldPath);
+      files.forEach((filename) => {
+        const director = path.join(foldPath + '/', filename);
+        const stats = fs.statSync(director);
+        if (stats.isDirectory() && !director.includes('node_modules')) {
+          scanDir(director, dir ? `${dir}.${filename}` : filename);
+        }
+        if (stats.isFile() && filename === 'index.umd.js') {
+          const directorArray = director.split('/');
+          const directorName = directorArray[directorArray.length - 3];
+          shell.exec(`mkdir ../server/static/${directorName}`);
+          shell.exec(`cp -r ${director} ../server/static/${directorName}`);
+        }
+      });
+    } catch (err) {
+      console.info(chalk.red(err));
+    }
+  };
+  scanDir(fp);
+} else {
+  const lower_project_name = project_name.toLocaleLowerCase();
+  // 复制本地 g2plot.min.js
+  shell.exec(
+    `cp -r ../../../${project_name}/dist/${lower_project_name}.min.js ../server/static`
+  );
+}
 
-// 复制本地 g2plot.min.js
-shell.exec(
-  `cp -r ../../../${project_name}/dist/${lower_project_name}.min.js ../server/static`
-);
 // 删除 server 静态文件
 shell.exec('rm -rf ../server/static/assets');
 // 复制当前打包文件

diff --git a/web-server/client/scripts/filter.js b/web-server/client/scripts/filter.js
@@ -33,7 +33,38 @@ const filterG2 = (code, index) => {
   }
 };
 
+const filterG = (code, index) => {
+  try {
+    return code
+      .replace(/container\:\s+'\w+',/g, `container: 'container-${index}',`)
+      .replace(
+        /.getElementById\('container'\);/g,
+        `.getElementById('container-${index}');`
+      )
+      .replace(/`/g, '(**)')
+      .replace(/\_gCanvas\./g, 'G.Canvas2D.')
+      .replace(/\_gWebgl\./g, 'G.WebGL.')
+      .replace(/\_gSvg\./g, 'G.SVG.')
+      .replace(/\_gPlugin3d\./g, `G['3D'].`)
+      .replace(/\_gPluginCssSelect\./g, 'G.CSSSelect.')
+      .replace(/\_gPluginControl\./g, 'G.Control.')
+      .replace(/\_gComponents\./g, 'G.Components.')
+      .replace(/\_stats\.default/g, 'Stats')
+      .replace(/\_hammerjs\.default/g, 'Hammer')
+      .replace(/\_interactjs\.default/g, 'interact')
+      .replace(/\_g\./g, 'G.')
+      .replace(/\\n/g, '(_*_)')
+      .replace(/\\/g, '(_**_)')
+      .replace(/\$\{(\S*|\S*\/S*)\}/g, function (_, sign) {
+        return `s1${sign}s1`;
+      });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 module.exports = {
   filterG2Plot,
   filterG2,
+  filterG,
 };
diff --git a/web-server/client/scripts/scan.js b/web-server/client/scripts/scan.js
@@ -2,9 +2,15 @@ const fs = require('fs');
 const path = require('path');
 const { transform } = require('@babel/standalone');
 const { project_name } = require('./env');
-const { filterG2Plot, filterG2 } = require('./filter');
+const { filterG2Plot, filterG2, filterG } = require('./filter');
 const basePath = '../../../';
-const fp = path.resolve(basePath, `${project_name}/examples`);
+const specialProject = ['G'];
+const fp = path.resolve(
+  basePath,
+  specialProject.includes(project_name)
+    ? `${project_name}/packages/site/examples`
+    : `${project_name}/examples`
+);
 const codePath = path.resolve('./src');
 
 const codes = [];
@@ -20,7 +26,9 @@ const setCodesLength = () => {
   //  用于计算浏览器高度
   fs.writeFileSync(
     path.resolve(__dirname, '../../server/static/code-info.js'),
-    `module.exports = {chartLength: ${index + 1}};`,
+    `module.exports = {chartLength: ${
+      index + 1
+    }, project_name: ${project_name}};`,
     'utf8'
   );
 };
@@ -33,11 +41,14 @@ const filterCode = (code) => {
   if (project_name === 'G2') {
     return filterG2(code, index);
   }
+  if (project_name === 'G') {
+    return filterG(code, index);
+  }
   return code;
 };
 
 // 特殊文件不做处理
-const specialFile = [];
+const specialFile = ['arrow.js'];
 
 const scanFiles = (foldPath, dir) => {
   try {
@@ -48,11 +59,17 @@ const scanFiles = (foldPath, dir) => {
       if (stats.isDirectory()) {
         scanFiles(director, dir ? `${dir}.${fileName}` : fileName);
       }
-      if (stats.isFile() && fileName.endsWith('.ts')) {
+      if (
+        stats.isFile() &&
+        (fileName.endsWith('.ts') || fileName.endsWith('.js')) &&
+        !fileName.includes('.d.ts')
+      ) {
         const filePath = path.resolve(
           __dirname,
           basePath,
-          `../${project_name}/examples`,
+          specialProject.includes(project_name)
+            ? `../${project_name}/packages/site/examples`
+            : `../${project_name}/examples`,
           dir.split('.').join('/'),
           fileName
         );

diff --git a/web-server/client/scripts/set-env.js b/web-server/client/scripts/set-env.js
@@ -3,14 +3,15 @@ const path = require('path');
 
 const arg = process.argv.splice(2);
 
-const [project_name, project_branch, build_command] = arg;
+const [project_name, project_branch, build_command, tag = 'latest'] = arg;
 
 fs.writeFileSync(
   path.resolve(__dirname, './env.js'),
   `const projcet_info = {
   project_name: '${project_name}',
   project_branch: '${project_branch}',
   build_command: '${build_command}',
+  tag: '${tag}',
 };\nmodule.exports = projcet_info;`
 );
 
@@ -20,5 +21,6 @@ fs.writeFileSync(
   project_name: '${project_name}',
   project_branch: '${project_branch}',
   build_command: '${build_command}',
+  tag: '${tag}',
 };`
 );
diff --git a/web-server/client/src/App.css b/web-server/client/src/App.css
@@ -11,6 +11,11 @@
   height: 200px;
   margin-bottom: 24px;
 }
+.g-container > div > div {
+  width: 600px;
+  height: 500px;
+  margin-bottom: 24px;
+}
 
 .loading {
   width: 100vw;
@@ -65,3 +70,7 @@
 .diff-box > img:last-child {
   border-right: none;
 }
+/** 隐藏 dat.gui */
+.dg {
+  display: none;
+}