@marp-team/marpit - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log
 
+## v0.5.0 - 2018-12-28
+
+### Added
+
+- Support setting background color by Markdown image syntax ([#92](https://github.com/marp-team/marpit/issues/92), [#113](https://github.com/marp-team/marpit/pull/113))
+- Add `data-marpit-svg` attribute to SVG element outputted by inline SVG mode ([#115](https://github.com/marp-team/marpit/pull/115))
+
+### Fixed
+
+- Fix remaining orphan break by sweeping hidden inline token forcibly ([#114](https://github.com/marp-team/marpit/pull/114))
+
+### Changed
+
+- Upgrade Node and dependent packages to latest version ([#116](https://github.com/marp-team/marpit/pull/116))
+
 ## v0.4.1 - 2018-12-18
@@ -11,3 +26,3 @@
 - Prevent leaking header and footer when printing by added normalization of HTML background ([#108](https://github.com/marp-team/marpit/pull/108), [#109](https://github.com/marp-team/marpit/pull/109))
-- Fix the version badge in docs sidebar ([#110](https://github.com/marp-team/marpit/pull/108))
+- Fix the version badge in docs sidebar ([#110](https://github.com/marp-team/marpit/pull/110))
 
@@ -14,0 +29,0 @@ ### Changed

lib/markdown/background_image.js

@@ -8,194 +8,32 @@ "use strict";
 
-var _inline_style = _interopRequireDefault(require("../helpers/inline_style"));
+var _advanced = _interopRequireDefault(require("./background_image/advanced"));
 
-var _wrap_tokens = _interopRequireDefault(require("../helpers/wrap_tokens"));
+var _apply = _interopRequireDefault(require("./background_image/apply"));
 
+var _parse = _interopRequireDefault(require("./background_image/parse"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+/** @module */
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const bgSizeKeywords = {
-  auto: 'auto',
-  contain: 'contain',
-  cover: 'cover',
-  fit: 'contain'
-  /**
-   * Marpit background image plugin.
-   *
-   * Convert image token to backgrounds when the alternate text includes `bg`.
-   *
-   * When Marpit `inlineSVG` option is `false`, the image will convert to
-   * `backgroundImage` and `backgroundSize` spot directive. It supports only
-   * single background and resizing by using CSS.
-   *
-   * When `inlineSVG` option is true, the plugin enables advanced background mode.
-   * In addition to the basic background implementation, it supports multiple
-   * background images, filters, and split background.
-   *
-   * @alias module:markdown/background_image
-   * @param {MarkdownIt} md markdown-it instance.
-   */
-
-};
-
+/**
+ * Marpit background image plugin.
+ *
+ * Convert image token to backgrounds when the alternate text includes `bg`.
+ *
+ * When Marpit `inlineSVG` option is `false`, the image will convert to
+ * `backgroundImage` and `backgroundSize` spot directive. It supports only
+ * single background and resizing by using CSS.
+ *
+ * When `inlineSVG` option is true, the plugin enables advanced background mode.
+ * In addition to the basic background implementation, it supports multiple
+ * background images, filters, and split background.
+ *
+ * @alias module:markdown/background_image
+ * @param {MarkdownIt} md markdown-it instance.
+ */
 function backgroundImage(md) {
-  md.inline.ruler2.after('marpit_parse_image', 'marpit_background_image', ({
-    tokens
-  }) => {
-    for (const t of tokens) {
-      if (t.type === 'image' && t.meta.marpitImage.options.includes('bg')) {
-        t.meta.marpitImage.background = true;
-        t.hidden = true;
-
-        for (const opt of t.meta.marpitImage.options) {
-          if (bgSizeKeywords[opt]) t.meta.marpitImage.backgroundSize = bgSizeKeywords[opt];
-          if (opt === 'left' || opt === 'right') t.meta.marpitImage.backgroundSplit = opt;
-        }
-      }
-    }
-  });
-  md.core.ruler.after('marpit_inline_svg', 'marpit_apply_background_image', ({
-    inlineMode,
-    tokens
-  }) => {
-    if (inlineMode) return;
-    let current = {};
-
-    for (const tb of tokens) {
-      if (tb.type === 'marpit_slide_open') current.open = tb;
-      if (tb.type === 'marpit_inline_svg_content_open') current.svgContent = tb;
-
-      if (tb.type === 'marpit_slide_close') {
-        if (current.images && current.images.length > 0) {
-          if (current.svgContent) {
-            // SVG advanced background
-            current.svgContent.meta = _objectSpread({}, current.svgContent.meta || {}, {
-              marpitBackground: {
-                height: current.svgContent.attrGet('height'),
-                images: current.images,
-                open: current.open,
-                split: current.split,
-                width: current.svgContent.attrGet('width')
-              }
-            });
-          } else {
-            // Simple CSS background
-            const img = current.images[current.images.length - 1];
-            current.open.meta.marpitDirectives = _objectSpread({}, current.open.meta.marpitDirectives || {}, {
-              backgroundImage: `url("${img.url}")`
-            });
-            if (img.size) current.open.meta.marpitDirectives.backgroundSize = img.size;
-          }
-        }
-
-        current = {};
-      }
-
-      if (current.open && tb.type === 'inline') for (const t of tb.children) {
-        if (t.type === 'image') {
-          const {
-            background,
-            backgroundSize,
-            backgroundSplit,
-            filter,
-            height,
-            size,
-            url,
-            width
-          } = t.meta.marpitImage;
-
-          if (background && !url.match(/^\s*$/)) {
-            current.images = [...(current.images || []), {
-              filter,
-              height,
-              size: (() => {
-                const s = size || backgroundSize || undefined;
-                return !['contain', 'cover'].includes(s) && (width || height) ? `${width || s || 'auto'} ${height || s || 'auto'}` : s;
-              })(),
-              url,
-              width
-            }];
-          }
-
-          if (backgroundSplit) current.split = backgroundSplit;
-        }
-      }
-    }
-  });
-  md.core.ruler.after('marpit_directives_apply', 'marpit_advanced_background', state => {
-    let current;
-    const newTokens = [];
-
-    for (const t of state.tokens) {
-      if (t.type === 'marpit_inline_svg_content_open' && t.meta && t.meta.marpitBackground) {
-        current = t;
-        const {
-          height,
-          images,
-          open,
-          width
-        } = t.meta.marpitBackground;
-        open.attrSet('data-marpit-advanced-background', 'content');
-        const splitSide = t.meta.marpitBackground.split;
-
-        if (splitSide) {
-          open.attrSet('data-marpit-advanced-background-split', splitSide);
-          t.attrSet('width', '50%');
-          if (splitSide === 'left') t.attrSet('x', '50%');
-        }
-
-        newTokens.push(...(0, _wrap_tokens.default)('marpit_advanced_background_foreign_object', {
-          tag: 'foreignObject',
-          width,
-          height
-        }, (0, _wrap_tokens.default)('marpit_advanced_background_section', _objectSpread({}, open.attrs.reduce((o, [k, v]) => _objectSpread({}, o, {
-          [k]: v
-        }), {}), {
-          tag: 'section',
-          id: undefined,
-          'data-marpit-advanced-background': 'background'
-        }), (0, _wrap_tokens.default)('marpit_advanced_background_image_container', {
-          tag: 'div',
-          'data-marpit-advanced-background-container': true
-        }, (() => {
-          const imageTokens = [];
-
-          for (const img of images) imageTokens.push(...(0, _wrap_tokens.default)('marpit_advanced_background_image', {
-            tag: 'figure',
-            style: [`background-image:url("${img.url}");`, img.size && `background-size:${img.size};`, img.filter && `filter:${img.filter};`].filter(s => s).join('')
-          }));
-
-          return imageTokens;
-        })()))), t);
-      } else if (current && t.type === 'marpit_inline_svg_content_close') {
-        const {
-          open,
-          height,
-          width
-        } = current.meta.marpitBackground; // Apply styles
-
-        const style = new _inline_style.default();
-        if (open.meta && open.meta.marpitDirectives && open.meta.marpitDirectives.color) style.set('color', open.meta.marpitDirectives.color);
-        newTokens.push(t, ...(0, _wrap_tokens.default)('marpit_advanced_background_foreign_object', {
-          tag: 'foreignObject',
-          width,
-          height,
-          'data-marpit-advanced-background': 'pseudo'
-        }, (0, _wrap_tokens.default)('marpit_advanced_pseudo_section', {
-          tag: 'section',
-          class: open.attrGet('class'),
-          style: style.toString(),
-          'data-marpit-advanced-background': 'pseudo',
-          'data-marpit-pagination': open.attrGet('data-marpit-pagination')
-        })));
-        current = undefined;
-      } else {
-        newTokens.push(t);
-      }
-    }
-
-    state.tokens = newTokens;
-  });
+  (0, _parse.default)(md);
+  (0, _apply.default)(md);
+  (0, _advanced.default)(md);
 }
@@ -202,0 +40,0 @@

lib/markdown/inline_svg.js

@@ -40,2 +40,3 @@ "use strict";
           tag: 'svg',
+          'data-marpit-svg': '',
           viewBox: `0 0 ${w} ${h}`,
@@ -42,0 +43,0 @@ open: {

lib/markdown/sweep.js

@@ -17,2 +17,5 @@ "use strict";
  *
+ * It also sweep the inline token marked as hidden forcely. Please notice that
+ * plugins executed after this cannot handle hidden inline tokens.
+ *
  * @alias module:markdown/sweep
@@ -37,3 +40,7 @@ * @param {MarkdownIt} md markdown-it instance.
     for (const token of state.tokens) {
-      if (token.type === 'paragraph_open') {
+      if (token.type === 'inline' && token.hidden) {
+        // markdown-it's "inline" type is not following a `hidden` flag. Marpit
+        // changes the token type to unique name to hide token forcely.
+        token.type = 'marpit_hidden_inline';
+      } else if (token.type === 'paragraph_open') {
         current.open.push(token);
@@ -40,0 +47,0 @@ current.tokens[token] = [];

lib/postcss/advanced_background.js

@@ -66,3 +66,3 @@ "use strict";
 section[data-marpit-advanced-background="pseudo"],
-:marpit-container > svg > foreignObject[data-marpit-advanced-background="pseudo"] {
+:marpit-container > svg[data-marpit-svg] > foreignObject[data-marpit-advanced-background="pseudo"] {
   pointer-events: none !important;
@@ -69,0 +69,0 @@ }

lib/postcss/printable.js

@@ -51,3 +51,3 @@ "use strict";
 
-  :marpit-container > svg {
+  :marpit-container > svg[data-marpit-svg] {
     display: block;
@@ -54,0 +54,0 @@ height: 100vh;

package.json

 {
   "name": "@marp-team/marpit",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "The skinny framework for creating slide deck from Markdown",
@@ -59,6 +59,6 @@ "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
+    "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
     "autoprefixer": "^9.4.3",
@@ -70,7 +70,7 @@ "babel-core": "^7.0.0-bridge.0",
     "cross-env": "^5.2.0",
-    "cssnano": "^4.1.7",
+    "cssnano": "^4.1.8",
     "dedent": "^0.7.0",
     "docsify-cli": "^4.3.0",
     "docsify-themeable": "^0.6.0",
-    "eslint": "^5.10.0",
+    "eslint": "^5.11.1",
     "eslint-config-airbnb-base": "13.1.0",
@@ -92,5 +92,6 @@ "eslint-config-prettier": "^3.3.0",
     "stylelint-config-standard": "^18.2.0",
-    "stylelint-scss": "^3.4.1"
+    "stylelint-scss": "^3.4.4"
   },
   "dependencies": {
+    "color-string": "^1.5.3",
     "js-yaml": "^3.12.0",
@@ -97,0 +98,0 @@ "lodash.kebabcase": "^4.1.1",

No alert changes

Improved metrics

Total package byte prevSize

126195

increased by4.35%

Number of package files

46

increased by6.98%

Lines of code

2757

increased by3.88%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedcolor-string@^1.5.3

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)