@marp-team/marpit - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

CHANGELOG.md

@@ -5,4 +5,11 @@ # Change Log
 
+## v0.0.1 - 2018-03-28
+
+* Optional inline SVG workaround ([#1](https://github.com/marp-team/marpit/pull/1))
+* Split the injection of markdown-it plugins and provide interface of markdown-it plugin ([#2](https://github.com/marp-team/marpit/pull/2))
+* Split rendering style into Marpit#renderStyle ([#3](https://github.com/marp-team/marpit/pull/3))
+* Add JSDoc about `Marpit` class
+
 ## v0.0.0 - 2018-03-24
 
 * Initial release. It does not cover integration test and document fully.

lib/marpit.js

@@ -74,4 +74,5 @@ 'use strict';
    *     wrapping each slide sections.
-   * @param {boolean} [opts.inlineSVG=false] Wrap each sections by inline SVG.
-   *     _(Experimental)_
+   * @param {boolean|'workaround'} [opts.inlineSVG=false] Wrap each sections by
+   *     inline SVG. If you set `workaround`, a few basic styling in theme CSS
+   *     will disable to avoid a rendering bug of Chromium. _(Experimental)_
    */
@@ -94,11 +95,69 @@ constructor(opts = {}) {
      */
-    this.markdown = new _markdownIt2.default(...(0, _wrap_array2.default)(this.options.markdown)).use(_comment2.default).use(_slide2.default).use(_parse2.default, this).use(_apply2.default).use(_slide_container2.default, this.slideContainers).use(_container2.default, this.containers);
+    this.markdown = new _markdownIt2.default(...(0, _wrap_array2.default)(this.options.markdown));
+    this.applyMarkdownItPlugins();
+  }
 
-    if (this.options.inlineSVG) this.markdown.use(_inline_svg2.default, this);
+  /**
+   * The plugin interface of markdown-it for current Marpit instance.
+   *
+   * This is useful to integrate Marpit with the other markdown-it based parser.
+   *
+   * @type {Function}
+   * @readonly
+   */
+  get markdownItPlugins() {
+    return this.applyMarkdownItPlugins.bind(this);
   }
 
+  /** @private */
+  applyMarkdownItPlugins(md = this.markdown) {
+    md.use(_comment2.default).use(_slide2.default).use(_parse2.default, this).use(_apply2.default).use(_slide_container2.default, this.slideContainers).use(_container2.default, this.containers);
+
+    if (this.options.inlineSVG) md.use(_inline_svg2.default, this);
+  }
+
+  /**
+   * @typedef {Object} Marpit~RenderResult
+   * @property {string} html Rendered HTML.
+   * @property {string} css Rendered CSS.
+   */
+
+  /**
+   * Render Markdown into HTML and CSS string.
+   *
+   * @param {string} markdown A Markdown string.
+   * @returns {Marpit~RenderResult} An object of rendering result.
+   */
   render(markdown) {
-    const html = this.renderMarkdown(markdown);
+    return {
+      html: this.renderMarkdown(markdown),
+      css: this.renderStyle(this.lastGlobalDirectives.theme)
+    };
+  }
 
-    const css = this.themeSet.pack(this.lastGlobalDirectives.theme, {
+  /**
+   * Render Markdown by using `markdownIt#render`.
+   *
+   * This method is for internal. You can override this method if you have to
+   * render with customized way.
+   *
+   * @private
+   * @param {string} markdown A Markdown string.
+   * @returns {string} The result string of rendering Markdown.
+   */
+  renderMarkdown(markdown) {
+    return this.markdown.render(markdown);
+  }
+
+  /**
+   * Render style by using `themeSet#pack`.
+   *
+   * This method is for internal.
+   *
+   * @private
+   * @param {string|undefined} theme Theme name.
+   * @returns {string} The result string of rendering style.
+   */
+  renderStyle(theme) {
+    return this.themeSet.pack(theme, {
       containers: [...this.containers, ...this.slideContainers],
@@ -108,9 +167,3 @@ inlineSVG: this.options.inlineSVG,
     });
-
-    return { html, css };
   }
-
-  renderMarkdown(markdown) {
-    return this.markdown.render(markdown);
-  }
 }
@@ -117,0 +170,0 @@

lib/theme_set.js

@@ -59,3 +59,2 @@ 'use strict';
   /**
-   * @alias ThemeSet#size
    * @type {number}
@@ -138,3 +137,3 @@ * @readonly
    * @param {Element[]} [opts.containers]
-   * @param {boolean} [opts.inlineSVG]
+   * @param {boolean|'workaround'} [opts.inlineSVG]
    * @param {boolean} [opts.printable]
@@ -152,3 +151,3 @@ * @return {string}
       height: this.getThemeProp(theme, 'height')
-    }), theme !== _scaffold2.default && (css => css.first.before(_scaffold2.default.css)), _prepend2.default, (0, _replace2.default)(opts.containers, slideElements), opts.inlineSVG && _inline_svg_workaround2.default].filter(p => p));
+    }), theme !== _scaffold2.default && (css => css.first.before(_scaffold2.default.css)), _prepend2.default, (0, _replace2.default)(opts.containers, slideElements), opts.inlineSVG === 'workaround' && _inline_svg_workaround2.default].filter(p => p));
 
@@ -155,0 +154,0 @@ return packer.process(theme.css).css;

package.json

 {
   "name": "@marp-team/marpit",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "The skinny framework for creating slide deck from Markdown",
@@ -79,3 +79,6 @@ "license": "MIT",
     "postcss": "^6.0.20"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

README.md

@@ -8,2 +8,10 @@ <div align="center">
   </p>
+  <p>
+
+[![Travis CI](https://img.shields.io/travis/marp-team/marpit.svg?style=flat-square)](https://travis-ci.org/marp-team/marpit)
+[![Coveralls](https://img.shields.io/coveralls/marp-team/marpit/master.svg?style=flat-square)](https://coveralls.io/github/marp-team/marpit?branch=master)
+[![npm](https://img.shields.io/npm/v/@marp-team/marpit.svg?style=flat-square)](https://www.npmjs.com/package/@marp-team/marpit)
+[![LICENSE](https://img.shields.io/github/license/marp-team/marpit.svg?style=flat-square)](./LICENSE)
+
+  </p>
 </div>
@@ -19,3 +27,3 @@
 * **[Clear markup](#markup)** - Marpit theme CSS has no own class, so you can focus on _your_ markup.
-* **[Inline SVG slide](#inline-svg-slide)** _(Experimental)_ - Support slide auto-scaling without extra JavaScript.
+* **[Inline SVG slide](#inline-svg-slide-experimental)** _(Experimental)_ - Support slide auto-scaling without extra JavaScript.
 
@@ -78,3 +86,3 @@ Marpit will become a core of _the next version of **[Marp](https://github.com/yhatt/marp/)**_.
 
-> :information_source: Marpit provides only [the minimum style for scaffolding presentation](src/theme/scaffold.js), and does not provide default theme. <!-- You can use the `marp` package if you want (under construction). -->
+> :information_source: Marpit provides only [the minimum style for scaffolding presentation](src/theme/scaffold.js), and does not provide default theme. You can use the [`@marp-team/marp`](https://github.com/marp-team/marp/tree/master/packages/marp) package if you want (UNDER CONSTRUCTION).
 
@@ -113,3 +121,3 @@ In theme CSS, you need not think about the hierarchy of Marpit. All that you have to know is just that a `<section>` element becomes a slide.
 
-> :warning: _This feature is experimental_ because of [a Chromium issue](https://bugs.chromium.org/p/chromium/issues/detail?id=771852). We are enabling a workaround, but it will disable a few basic styling defined in theme CSS. It includes `position`, `transform` and `overflow` with scrolling (`auto` and `scroll`).
+> :warning: _This feature is experimental_ because of [a Chromium issue](https://bugs.chromium.org/p/chromium/issues/detail?id=771852). A workaround to style can enable by `inlineSVG: 'workaround'`, but it will disable a few basic styling defined in theme CSS. It includes `position`, `transform` and `overflow` with scrolling (`auto` and `scroll`).
 
@@ -116,0 +124,0 @@ When you set `inlineSVG: true` in Marpit constructor option, the each `<section>` are wrapped by inline SVG.

No alert changes

Improved metrics

Total package byte prevSize

50131

increased by5.25%

Lines of code

1128

increased by4.54%

Number of lines in readme file

157

increased by5.37%

No dependency changes