Add bespoke load plugin

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Vanished auto-fitting elements when exporting to PDF, PPTX, and images ([#153](https://github.com/marp-team/marp-cli/issues/153), [#154](https://github.com/marp-team/marp-cli/pull/154))
+
 ## v0.14.0 - 2019-09-12
 
 ### Fixed

src/templates/bespoke/bespoke.scss

@@ -145,12 +145,10 @@ $progressHeight: 5px;
       z-index: 0;
     }
 
-    @at-root {
-      body.loaded & {
-        display: none;
-      }
+    &[data-bespoke-marp-load='hideable'] {
+      display: none;
 
-      body.loaded &.bespoke-marp-active {
+      &.bespoke-marp-active {
         display: block;
       }
     }

src/templates/bespoke/bespoke.ts

@@ -2,6 +2,7 @@ import bespoke from 'bespoke'
 import bespokeForms from 'bespoke-forms'
 import bespokeClasses from './classes'
 import bespokeInactive from './inactive'
+import bespokeLoad from './load'
 import bespokeFragments from './fragments'
 import bespokeFullscreen from './fullscreen'
 import bespokeNavigation from './navigation'
@@ -13,12 +14,11 @@ import bespokeTouch from './touch'
 import { readQuery } from './utils'
 
 export default function(target = document.getElementById('p')!) {
-  window.addEventListener('load', () => document.body.classList.add('loaded'))
-
   const deck = bespoke.from(target, [
     bespokeForms(),
     bespokeClasses,
     bespokeInactive(),
+    bespokeLoad,
     bespokeState({ history: false }),
     bespokeNavigation(),
     bespokeFullscreen,
@@ -30,6 +30,5 @@ export default function(target = document.getElementById('p')!) {
   ])
 
   window.addEventListener('unload', () => deck.destroy())
-
   return deck
 }

src/templates/bespoke/load.ts

@@ -0,0 +1,11 @@
+export default function bespokeLoad(deck) {
+  window.addEventListener('load', () => {
+    for (const slide of deck.slides) {
+      // Slides contained Marp Core's fitting elements must not hide via `display: none;`.
+      // https://github.com/marp-team/marp-cli/issues/153
+      const type = slide.querySelector('[data-marp-fitting]') ? '' : 'hideable'
+
+      slide.setAttribute('data-bespoke-marp-load', type)
+    }
+  })
+}

test/templates/bespoke.ts

@@ -265,6 +265,19 @@ describe("Bespoke template's browser context", () => {
     })
   })
 
+  describe('Load', () => {
+    it('adds data attribute to each slides after loaded', () => {
+      render('# Regular\n\n---\n\n```\nnot-hideable\n```')
+      const deck = bespoke()
+
+      window.dispatchEvent(new Event('load'))
+
+      const [first, second] = deck.slides
+      expect(first.getAttribute('data-bespoke-marp-load')).toBe('hideable')
+      expect(second.getAttribute('data-bespoke-marp-load')).toBe('')
+    })
+  })
+
   describe('Navigation', () => {
     let parent: HTMLElement
     let deck