feat: 添加 motion 解析能力

.gitignore

@@ -19,3 +19,4 @@ src/resources/.umi-production
 /Resources
 .umi
 /src/resources/.umi/
+/test/html/*

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "prebuild": "webpack",
     "build": "tsc",
-    "release": "npm run build && npm publish"
+    "prepublishOnly": "npm run build && np --no-cleanup --yolo --no-publish --any-branch"
   },
   "main": "./lib/index.js",
   "repository": "https://github.com/arvinxx/html2sketch-browserless.git",
@@ -20,6 +20,7 @@
     "@types/puppeteer": "^3.0.1",
     "jest": "^24.8.0",
     "lint-staged": "^10.0.7",
+    "np": "^6.5.0",
     "prettier": "^1.18.2",
     "ts-jest": "^24.0.2",
     "tslint": "^5.18.0",
@@ -34,7 +35,7 @@
   ],
   "dependencies": {
     "express": "^4.17.1",
-    "html2sketch": "^0.1.5",
+    "html2sketch": "^0.2.2-1",
     "puppeteer": "^5.2.1"
   }
 }

src/node2SketchSymbol.ts

@@ -10,15 +10,22 @@ const port = 6783; //端口号
 
 const baseURL = `http://${hostname}:${port}`;
 
+declare global {
+  interface Window {
+    hituSelectedNodes: Element[];
+  }
+}
+
 interface Options {
   headless?: boolean;
   close?: boolean;
   noSandbox?: boolean;
+  motions?: boolean;
 }
 export const initNode2SketchSymbol = (
   filePath: string,
   url: string,
-  { headless, close, noSandbox }: Options = {
+  { headless, close, noSandbox, motions }: Options = {
     headless: true,
     close: true,
     noSandbox: true,
@@ -38,26 +45,52 @@ export const initNode2SketchSymbol = (
     console.log(`启动Express服务在 ${baseURL}`);
   });
 
-  return async (selector: (dom) => Element) => {
+  return async (selector?: (dom) => Element) => {
     const browser = await puppeteer.launch({
       headless,
       args: noSandbox
         ? ['--no-sandbox', '--disable-setuid-sandbox']
         : undefined,
     });
+    const page = await browser.newPage();
 
     try {
-      const page = await browser.newPage();
-
-      await page.goto(baseURL + url);
+      const resultURL = `${baseURL}${url}${motions ? '?capture' : ''}`;
+      console.log('访问的网址为:', resultURL);
+      await page.goto(resultURL);
 
       await page.addScriptTag({
         path: resolve(__dirname, '../dist/node2Symbol.bundle.js'),
       });
+      // 添加监听器并完成解析
+      // 同时将结果挂载在 hituSymbolData 上
+      await page.evaluate(`
+        window.addEventListener('message',  function (ev) {
+          if (ev.data.type === 'dumi:capture-element') {
+            const selector = ev.data.value; // => 会获得一个 CSS 选择器
+            console.log(selector);
+            const nodes = document.querySelector(selector);
+            console.log(nodes)
+            window.hituSymbolData = node2Symbol.run(nodes);
+          }
+        });
+      `);
+
+      if (!motions && selector) {
+        const json = await page.evaluate(
+          `node2Symbol.run(${selector}(document))`
+        );
+        if (close) {
+          await browser.close();
+        }
+
+        fs.writeFileSync(filePath + '/index.html', html);
+        return json;
+      }
+
+      await page.waitFor(2000);
 
-      const json = await page.evaluate(
-        `node2Symbol.run(${selector}(document))`
-      );
+      const json = await page.evaluate(`window.hituSymbolData`);
       if (close) {
         await browser.close();
       }

src/node2Symbol.ts

@@ -1,6 +1,6 @@
 import { nodeToSketchSymbol } from 'html2sketch';
 
-export function run(node = document.body) {
+export function run(node) {
   if (!node) {
     throw Error('没有接收到元素,请检查输入');
   }

test/node2SketchSymbol.spec.ts

@@ -3,30 +3,26 @@ import { resolve } from 'path';
 import { writeFileSync } from 'fs';
 
 describe('node2SketchSymbol', function() {
-  it('should work well', async () => {
+  test('should work well', async () => {
     const node2SketchSymbol = initNode2SketchSymbol(
-      resolve(__dirname, './html/doc'),
-      '/_embed_demos/eddb3b71'
+      resolve(__dirname, './html/motions'),
+      '/~demos/02af570d',
+      { headless: false }
     );
     const json = await node2SketchSymbol(function(doc) {
       return doc.querySelectorAll('[data-hitu-symbol]');
     });
     expect(json).toBe('1');
-  });
-  it('能显示浏览器', async () => {
+  }, 10000);
+
+  test('motions', async () => {
     const node2SketchSymbol = initNode2SketchSymbol(
-      resolve(__dirname, './html/doc'),
-      '/~demos/2f932600',
-      {
-        headless: false,
-      }
+      resolve(__dirname, './html/motions'),
+      '/~demos/02af570d',
+      { headless: false, motions: true }
     );
-    const json = await node2SketchSymbol(function(doc) {
-      console.log(doc.querySelectorAll('[data-hitu-symbol]'));
-      return doc.querySelectorAll('[data-hitu-symbol]');
-    });
-
-    writeFileSync('./x.json', JSON.stringify(json));
+    const json = await node2SketchSymbol();
+    writeFileSync(resolve(__dirname, './motions.json'), JSON.stringify(json));
     expect(json).toBe('1');
-  });
+  }, 10000);
 });