refactor: migrate to ES modules and update webpack config for markmap and yaml support

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

Author: Yukaii

babel.config.js

@@ -5,7 +5,8 @@ module.exports = {
         node: '14'
       },
       useBuiltIns: 'usage',
-      corejs: 3
+      corejs: 3,
+      modules: 'auto'
     }]
   ],
   plugins: [

public/js/render.js

@@ -1,7 +1,7 @@
 /* eslint-env browser, jquery */
 // allow some attributes
 
-var filterXSS = require('xss')
+import filterXSS from 'xss'
 
 var whiteListAttr = ['id', 'class', 'style']
 window.whiteListAttr = whiteListAttr
@@ -72,7 +72,5 @@ function preventXSS (html) {
 }
 window.preventXSS = preventXSS
 
-module.exports = {
-  preventXSS: preventXSS,
-  escapeAttrValue: filterXSS.escapeAttrValue
-}
+export { preventXSS }
+export const escapeAttrValue = filterXSS.escapeAttrValue

public/js/reveal-markdown.js

@@ -16,7 +16,7 @@ import { md } from './extra'
     root.RevealMarkdown = factory()
     root.RevealMarkdown.initialize()
   }
-}(this, function () {
+}(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : this, function () {
   var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$'
   var DEFAULT_NOTES_SEPARATOR = '^note:'
   var DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\.element\\s*?(.+?)$'

webpack.common.js

@@ -422,7 +422,7 @@ module.exports = {
 
   resolve: {
     modules: ['node_modules'],
-    extensions: ['.js'],
+    extensions: ['.js', '.mjs'],
     alias: {
       codemirror: path.join(__dirname, 'node_modules/@hackmd/codemirror/codemirror.min.js'),
       inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@@ -464,17 +464,39 @@ module.exports = {
       type: 'javascript/auto',
       include: /node_modules/
     }, {
-      test: /node_modules\/markmap-[^/]+\/.*\.mjs$/,
-      use: [{ loader: 'babel-loader' }]
+      test: /node_modules\/markmap.*\/.*\.mjs$/,
+      use: [{ loader: 'babel-loader' }],
+      type: 'javascript/auto'
     }, {
-      test: /node_modules\/markmap-[^/]+\/.*\.js$/,
-      use: [{ loader: 'babel-loader' }]
+      test: /node_modules\/markmap.*\/.*\.js$/,
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', {
+              modules: 'cjs'
+            }]
+          ]
+        }
+      }]
     }, {
       test: /node_modules\/yaml\/browser\/dist\/.*\.js$/,
       use: [{ loader: 'babel-loader' }]
     }, {
       test: /node_modules\/@vscode\/markdown-it-katex\/.*\.js$/,
-      use: [{ loader: 'babel-loader' }]
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', {
+              modules: 'cjs'
+            }]
+          ],
+          plugins: [
+            '@babel/plugin-transform-optional-chaining'
+          ]
+        }
+      }]
     }, {
       test: /\.js$/,
       use: [{ loader: 'babel-loader' }],