feat: plugins

Author: gera2ld

.eslintignore

@@ -1,2 +1,3 @@
 /*
 !/src
+!/test

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Gerald
+Copyright (c) 2020 Gerald
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,7 +8,7 @@ Visualize your Markdown as mindmaps.
 
 This project is heavily inspired by [Markmap](https://github.com/dundalek/markmap).
 
-See [online demo](https://markmap.js.org/repl).
+[Try it out](https://markmap.js.org/repl).
 
 Requires Node.js >= 10.
 
@@ -83,7 +83,7 @@ $ npm install markmap-lib
 Transform Markdown to markmap data:
 
 ```js
-import { transform } from 'markmap-lib/dist/transform.common';
+import { transform } from 'markmap-lib/dist/transform';
 
 const data = transform(markdown);
 ```
@@ -103,7 +103,7 @@ Create an SVG element with explicit width and height:
 Render a markmap to the SVG element:
 
 ```js
-import { markmap } from 'markmap-lib/dist/view.common';
+import { markmap } from 'markmap-lib/dist/view';
 
 markmap('#markmap', data);
 
@@ -132,7 +132,7 @@ window.MathJax = {
 and process Html with MathJax in `options.processHtml`:
 
 ```js
-import { markmap } from 'markmap-lib/dist/view.common';
+import { markmap } from 'markmap-lib/dist/view';
 
 markmap('#markmap', data, {
   processHtml: nodes => {

bin/cli.js

@@ -10,13 +10,15 @@ program
 .arguments('<input>')
 .option('-o, --output <output>', 'specify filename of the output HTML')
 .option('--enable-mathjax', 'enable MathJax support')
+.option('--enable-prism', 'enable PrismJS support')
 .option('--no-open', 'do not open the output file after generation')
 .action((input, cmd) => {
   return createMarkmap({
     open: cmd.open,
     input,
     output: cmd.output,
     mathJax: cmd.enableMathjax,
+    prism: cmd.enablePrism,
   });
 });
 

gulpfile.js

@@ -0,0 +1,63 @@
+const fs = require('fs');
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+const replace = require('gulp-replace');
+const log = require('fancy-log');
+const rollup = require('rollup');
+const del = require('del');
+const { defaultOptions } = require('@gera2ld/plaid');
+const rollupConfig = require('./rollup.conf');
+const pkg = require('./package.json');
+
+const DIST = defaultOptions.distDir;
+const TEMPLATE = fs.readFileSync('templates/markmap.html', 'utf8');
+
+function clean() {
+  return del([DIST, 'types']);
+}
+
+function buildCjs() {
+  return gulp.src(['src/**/*.ts', '!**/*.d.ts'])
+    .pipe(babel({
+      presets: [
+        ['@babel/preset-env', {
+          loose: true,
+        }],
+      ],
+      plugins: [
+        ['@babel/plugin-transform-runtime', {
+          version: '^7.5.0',
+        }],
+      ],
+    }))
+    .pipe(replace('process.env.VERSION', pkg.version))
+    .pipe(replace('process.env.TEMPLATE', JSON.stringify(TEMPLATE)))
+    .pipe(gulp.dest(DIST));
+}
+
+function buildRollup() {
+  return Promise.all(rollupConfig.map(async (config) => {
+    const bundle = await rollup.rollup(config);
+    await bundle.write(config.output);
+  }));
+}
+
+function wrapError(handle) {
+  const wrapped = () => handle()
+  .catch(err => {
+    log(err.toString());
+  });
+  wrapped.displayName = handle.name;
+  return wrapped;
+}
+
+function watch() {
+  gulp.watch('src/**', build);
+}
+
+const safeBuildJs = wrapError(buildRollup);
+const build = gulp.parallel(buildCjs, safeBuildJs);
+
+exports.clean = clean;
+exports.build = build;
+exports.dev = gulp.series(build, watch);

package.json

@@ -4,21 +4,21 @@
   "description": "Visualize your Markdown as mindmaps with Markmap",
   "author": "Gerald <i@gerald.top>",
   "license": "MIT",
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run lint"
+    }
+  },
   "bin": {
     "markmap": "bin/cli.js"
   },
   "engines": {
     "node": ">=10"
   },
-  "husky": {
-    "hooks": {
-      "pre-push": "npm run lint"
-    }
-  },
   "scripts": {
-    "dev": "rollup -wc rollup.conf.js",
-    "clean": "del dist types",
-    "build:js": "rollup -c rollup.conf.js",
+    "dev": "gulp dev",
+    "clean": "gulp clean",
+    "build:js": "gulp build",
     "prebuild": "npm run ci && npm run clean",
     "prepublishOnly": "npm run build",
     "ci": "npm run lint",
@@ -29,8 +29,8 @@
     "access": "public"
   },
   "main": "dist/index.js",
-  "unpkg": "dist/view.min.js",
-  "jsdelivr": "dist/view.min.js",
+  "unpkg": "dist/browser/view.min.js",
+  "jsdelivr": "dist/browser/view.min.js",
   "files": [
     "bin",
     "dist",
@@ -42,34 +42,29 @@
     "mindmap"
   ],
   "typings": "types/index.d.ts",
+  "repository": "git@github.com:gera2ld/markmap-lib.git",
   "devDependencies": {
     "@babel/preset-typescript": "^7.9.0",
-    "@gera2ld/plaid": "~1.5.0",
-    "@rollup/plugin-alias": "^3.0.1",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-json": "^4.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-replace": "^2.3.1",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "cross-env": "^7.0.2",
-    "cssnano": "^4.1.10",
-    "del-cli": "^3.0.0",
-    "eslint": "^6.8.0",
-    "husky": "^4.2.3",
-    "rollup": "^2.3.1",
-    "rollup-plugin-babel": "^4.4.0",
+    "@gera2ld/plaid": "~2.0.0",
+    "@gera2ld/plaid-rollup": "~2.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
+    "del": "^5.1.0",
+    "fancy-log": "^1.3.3",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-replace": "^1.0.0",
+    "husky": "^4.2.5",
     "rollup-plugin-terser": "^5.3.0",
     "typescript": "^3.8.3"
   },
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
+    "@babel/runtime": "^7.9.6",
     "@types/d3": "^5.7.2",
-    "commander": "^5.0.0",
-    "d3": "^5.15.0",
+    "commander": "^5.1.0",
+    "d3": "^5.16.0",
     "d3-flextree": "^2.1.1",
     "open": "^7.0.3",
     "remarkable": "^2.0.0"
-  },
-  "repository": "git@github.com:gera2ld/markmap-lib.git"
+  }
 }

rollup.conf.js

@@ -1,111 +1,52 @@
 const { terser } = require('rollup-plugin-terser');
-const { getRollupPlugins, getExternal, DIST } = require('./scripts/util');
+const { getRollupPlugins, getRollupExternal, defaultOptions } = require('@gera2ld/plaid');
 const pkg = require('./package.json');
 
+const DIST = defaultOptions.distDir;
 const BANNER = `/*! ${pkg.name} v${pkg.version} | ${pkg.license} License */`;
 
 const globalList = [
   'd3',
 ];
-const externalList = [
-  ...globalList,
-  'fs',
-  'path',
-  'open',
-  'remarkable',
-  'd3-flextree',
-  './template',
-  './util',
-];
+const external = getRollupExternal();
 const bundleOptions = {
   extend: true,
   esModule: false,
 };
 const rollupConfig = [
   {
     input: {
-      input: 'src/index.ts',
-      plugins: getRollupPlugins(),
-      external: getExternal(externalList),
-    },
-    output: {
-      format: 'cjs',
-      file: `${DIST}/index.js`,
-    },
-  },
-  {
-    input: {
-      input: 'src/template.ts',
-      plugins: getRollupPlugins(),
-      external: getExternal(externalList),
-    },
-    output: {
-      format: 'cjs',
-      file: `${DIST}/template.js`,
-    },
-  },
-  {
-    input: {
-      input: 'src/util.ts',
-      plugins: getRollupPlugins(),
-      external: getExternal(externalList),
-    },
-    output: {
-      format: 'cjs',
-      file: `${DIST}/util.js`,
-    },
-  },
-  {
-    input: {
-      input: 'src/transform.ts',
-      plugins: getRollupPlugins(),
-      external: getExternal(externalList),
-    },
-    output: {
-      format: 'cjs',
-      file: `${DIST}/transform.common.js`,
-      ...bundleOptions,
-    },
-  },
-  {
-    input: {
-      input: 'src/transform.ts',
-      plugins: getRollupPlugins(),
+      input: 'src/view.ts',
       external: globalList,
+      plugins: getRollupPlugins({
+        esm: true,
+        extensions: defaultOptions.extensions,
+      }),
     },
     output: {
       format: 'iife',
-      file: `${DIST}/transform.js`,
+      file: `${DIST}/browser/view.js`,
       name: 'markmap',
+      globals: {
+        d3: 'd3',
+      },
       ...bundleOptions,
     },
     minify: true,
   },
   {
     input: {
-      input: 'src/view.ts',
-      plugins: getRollupPlugins(),
-      external: getExternal(externalList),
-    },
-    output: {
-      format: 'cjs',
-      file: `${DIST}/view.common.js`,
-      ...bundleOptions,
-    },
-  },
-  {
-    input: {
-      input: 'src/view.ts',
-      plugins: getRollupPlugins(),
+      input: 'src/transform.ts',
       external: globalList,
+      plugins: getRollupPlugins({
+        esm: true,
+        extensions: defaultOptions.extensions,
+      }),
     },
     output: {
       format: 'iife',
-      file: `${DIST}/view.js`,
+      file: `${DIST}/browser/transform.js`,
       name: 'markmap',
-      globals: {
-        d3: 'd3',
-      },
       ...bundleOptions,
     },
     minify: true,