Simplify Marpit plugins by using injected instance into markdown-it instance

.eslintrc.yml

@@ -6,6 +6,8 @@ extends:
   - airbnb-base
   - prettier
 
+parser: babel-eslint
+
 rules:
   max-len:
     - error

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Changed
 
 - Upgrade dependent packages to the latest version ([#143](https://github.com/marp-team/marpit/pull/143))
+- Simplify Marpit plugins by using injected instance into markdown-it instance ([#147](https://github.com/marp-team/marpit/pull/147))
 
 ### Deprecated
 

babel.config.js

@@ -2,5 +2,7 @@ module.exports = {
   presets: [['@babel/preset-env', { targets: { node: '6.14' } }]],
   plugins: [
     ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-private-methods',
   ],
 }

package.json

@@ -58,10 +58,13 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-proposal-private-methods": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "autoprefixer": "^9.5.0",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
     "cheerio": "^1.0.0-rc.2",
     "codecov": "^3.2.0",

src/markdown/background_image.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import advanced from './background_image/advanced'
 import apply from './background_image/apply'
 import parse from './background_image/parse'
@@ -18,14 +19,15 @@ import parse from './background_image/parse'
  *
  * @alias module:markdown/background_image
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  */
-function backgroundImage(md, marpit) {
+function backgroundImage(md) {
+  const { marpit } = md
+
   if (!marpit.options.backgroundSyntax) return
 
   parse(md)
   apply(md)
   advanced(md)
 }
 
-export default backgroundImage
+export default marpitPlugin(backgroundImage)

src/markdown/background_image/advanced.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from '../marpit_plugin'
 import InlineStyle from '../../helpers/inline_style'
 import wrapTokens from '../../helpers/wrap_tokens'
 
@@ -148,4 +149,4 @@ function advancedBackground(md) {
   )
 }
 
-export default advancedBackground
+export default marpitPlugin(advancedBackground)

src/markdown/background_image/apply.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from '../marpit_plugin'
 
 /**
  * Marpit background image apply plugin.
@@ -111,4 +112,4 @@ function backgroundImageApply(md) {
   )
 }
 
-export default backgroundImageApply
+export default marpitPlugin(backgroundImageApply)

src/markdown/background_image/parse.js

@@ -1,5 +1,6 @@
 /** @module */
 import colorString from 'color-string'
+import marpitPlugin from '../marpit_plugin'
 
 const bgSizeKeywords = {
   auto: 'auto',
@@ -59,4 +60,4 @@ function backgroundImageParse(md) {
   )
 }
 
-export default backgroundImageParse
+export default marpitPlugin(backgroundImageParse)

src/markdown/collect.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 
 /**
  * Marpit collect plugin.
@@ -10,9 +11,10 @@
  *
  * @alias module:markdown/collect
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  */
-function collect(md, marpit) {
+function collect(md) {
+  const { marpit } = md
+
   md.core.ruler.push('marpit_collect', state => {
     if (state.inlineMode) return
 
@@ -59,4 +61,4 @@ function collect(md, marpit) {
   })
 }
 
-export default collect
+export default marpitPlugin(collect)

src/markdown/comment.js

@@ -1,5 +1,6 @@
 /** @module */
 import yaml from './directives/yaml'
+import marpitPlugin from './marpit_plugin'
 
 const commentMatcher = /<!--+\s*([\s\S]*?)\s*--+>/
 const commentMatcherOpening = /^<!--/
@@ -13,12 +14,10 @@ const commentMatcherClosing = /-->/
  *
  * @alias module:markdown/comment
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Object} [opts]
- * @param {boolean} [opts.looseYAML=false] Allow loose YAML for directives.
  */
-function comment(md, opts = {}) {
+function comment(md) {
   const parse = (token, content) => {
-    const parsed = yaml(content, !!opts.looseYAML)
+    const parsed = yaml(content, !!md.marpit.options.looseYAML)
 
     token.meta = {
       ...(token.meta || {}),
@@ -105,4 +104,4 @@ function comment(md, opts = {}) {
   )
 }
 
-export default comment
+export default marpitPlugin(comment)

src/markdown/container.js

@@ -1,14 +1,16 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
+import wrapArray from '../helpers/wrap_array'
 import wrapTokens from '../helpers/wrap_tokens'
 
 /**
  * Marpit container plugin.
  *
  * @alias module:markdown/container
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Element[]} containers Array of container elements.
  */
-function container(md, containers) {
+function container(md) {
+  const containers = wrapArray(md.marpit.options.container)
   if (!containers) return
 
   const target = [...containers].reverse()
@@ -26,4 +28,4 @@ function container(md, containers) {
   })
 }
 
-export default container
+export default marpitPlugin(container)

src/markdown/directives/apply.js

@@ -1,21 +1,23 @@
 /** @module */
 import kebabCase from 'lodash.kebabcase'
 import builtInDirectives from './directives'
+import marpitPlugin from '../marpit_plugin'
 import InlineStyle from '../../helpers/inline_style'
 
 /**
  * Apply parsed Marpit directives to markdown-it tokens.
  *
  * @alias module:markdown/directives/apply
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  * @param {Object} [opts]
  * @param {boolean} [opts.dataset=true] Assigns directives as HTML data
  *     attributes of each section tag.
  * @param {boolean} [opts.css=true] Assigns directives as CSS Custom Properties
  *     of each section tag.
  */
-function apply(md, marpit, opts = {}) {
+function apply(md, opts = {}) {
+  const { marpit } = md
+
   const dataset = opts.dataset === undefined ? true : !!opts.dataset
   const css = opts.css === undefined ? true : !!opts.css
 
@@ -98,4 +100,4 @@ function apply(md, marpit, opts = {}) {
   )
 }
 
-export default apply
+export default marpitPlugin(apply)

src/markdown/directives/parse.js

@@ -2,6 +2,7 @@
 import MarkdownItFrontMatter from 'markdown-it-front-matter'
 import yaml from './yaml'
 import * as directives from './directives'
+import marpitPlugin from '../marpit_plugin'
 
 /**
  * Parse Marpit directives and store result to the slide token meta.
@@ -11,14 +12,14 @@ import * as directives from './directives'
  *
  * @alias module:markdown/directives/parse
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  * @param {Object} [opts]
  * @param {boolean} [opts.frontMatter=true] Switch feature to support YAML
  *     front-matter. If true, you can use Jekyll style directive setting to the
  *     first page.
- * @param {boolean} [opts.looseYAML=false] Allow loose YAML for directives.
  */
-function parse(md, marpit, opts = {}) {
+function parse(md, opts = {}) {
+  const { marpit } = md
+
   // Front-matter support
   const frontMatter = opts.frontMatter === undefined ? true : !!opts.frontMatter
   let frontMatterObject = {}
@@ -31,7 +32,7 @@ function parse(md, marpit, opts = {}) {
     md.use(MarkdownItFrontMatter, fm => {
       frontMatterObject.text = fm
 
-      const parsed = yaml(fm, !!opts.looseYAML)
+      const parsed = yaml(fm, !!md.marpit.options.looseYAML)
       if (parsed !== false) frontMatterObject.yaml = parsed
     })
   }
@@ -198,4 +199,4 @@ function parse(md, marpit, opts = {}) {
   })
 }
 
-export default parse
+export default marpitPlugin(parse)

src/markdown/header_and_footer.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import wrapTokens from '../helpers/wrap_tokens'
 
 /**
@@ -67,4 +68,4 @@ function headerAndFooter(md) {
   )
 }
 
-export default headerAndFooter
+export default marpitPlugin(headerAndFooter)

src/markdown/heading_divider.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import split from '../helpers/split'
 
 /**
@@ -9,9 +10,10 @@ import split from '../helpers/split'
  *
  * @alias module:markdown/heading_divider
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  */
-function headingDivider(md, marpit) {
+function headingDivider(md) {
+  const { marpit } = md
+
   md.core.ruler.before('marpit_slide', 'marpit_heading_divider', state => {
     let target = marpit.options.headingDivider
 
@@ -52,4 +54,4 @@ function headingDivider(md, marpit) {
   })
 }
 
-export default headingDivider
+export default marpitPlugin(headingDivider)

src/markdown/inline_svg.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import split from '../helpers/split'
 import wrapTokens from '../helpers/wrap_tokens'
 
@@ -7,9 +8,10 @@ import wrapTokens from '../helpers/wrap_tokens'
  *
  * @alias module:markdown/inline_svg
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Marpit} marpit Marpit instance.
  */
-function inlineSVG(md, marpit) {
+function inlineSVG(md) {
+  const { marpit } = md
+
   md.core.ruler.after('marpit_directives_parse', 'marpit_inline_svg', state => {
     if (!marpit.options.inlineSVG || state.inlineMode) return
 
@@ -54,4 +56,4 @@ function inlineSVG(md, marpit) {
   })
 }
 
-export default inlineSVG
+export default marpitPlugin(inlineSVG)

src/markdown/marpit_plugin.js

@@ -0,0 +1,21 @@
+/** @module */
+
+/**
+ * Marpit plugin wrapper.
+ *
+ * Convert passed markdown-it plugin to Marpit plugin. Marpit plugin would
+ * require that markdown-it instance has `marpit` member.
+ *
+ * @alias module:markdown/marpit_plugin
+ * @param {Function} plugin Base plugin for markdown-it.
+ * @returns {Function} markdown-it plugin for Marpit.
+ */
+function marpitPlugin(plugin) {
+  return (md, ...args) => {
+    if (md.marpit) return plugin.call(this, md, ...args)
+
+    throw new Error("Marpit's markdown-it plugin requires `marpit` member.")
+  }
+}
+
+export default marpitPlugin

src/markdown/parse_image.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import InlineStyle from '../helpers/inline_style'
 
 const escape = target =>
@@ -16,11 +17,11 @@ const escape = target =>
  *
  * @alias module:markdown/parse_image
  * @param {MarkdownIt} md markdown-it instance.
- * @param {Object} [opts]
- * @param {boolean} [opts.filters=true] Switch feature to support CSS filters.
  */
-function parseImage(md, opts = {}) {
-  const pluginOptions = { filters: true, ...opts }
+function parseImage(md) {
+  const isEnabledFilters =
+    md.marpit.options.filters !== undefined ? md.marpit.options.filters : true
+
   const optionMatchers = new Map()
 
   // The scale percentage for resize background
@@ -37,7 +38,7 @@ function parseImage(md, opts = {}) {
     matches => ({ height: matches[1] })
   )
 
-  if (pluginOptions.filters) {
+  if (isEnabledFilters) {
     // CSS filters
     optionMatchers.set(/^blur(?::(.+))?$/, (matches, meta) => ({
       filters: [...meta.filters, ['blur', escape(matches[1] || '10px')]],
@@ -153,4 +154,4 @@ function parseImage(md, opts = {}) {
   })
 }
 
-export default parseImage
+export default marpitPlugin(parseImage)

src/markdown/slide.js

@@ -1,4 +1,5 @@
 /** @module */
+import marpitPlugin from './marpit_plugin'
 import split from '../helpers/split'
 import wrapTokens from '../helpers/wrap_tokens'
 
@@ -67,4 +68,4 @@ function slide(md, opts = {}) {
   })
 }
 
-export default slide
+export default marpitPlugin(slide)