Merge pull request #375 from marp-team/refactor-to-reduce-dependent-p…

…ackages Reduce dependencies
marp-team · Aug 15, 2021 · e4504d8 · e4504d8
2 parents 572260f + ec94c71
commit e4504d8
Show file tree

Hide file tree

Showing 24 changed files with 433 additions and 142 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Reduce dependencies ([#375](https://github.com/marp-team/marp-cli/pull/375))
+
 ## v1.3.1 - 2021-08-12
 
 ### Fixed

diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@rollup/plugin-url": "^6.1.0",
+    "@tsconfig/node12": "^1.0.9",
     "@types/cheerio": "^0.22.30",
     "@types/express": "^4.17.13",
     "@types/jest": "^27.0.0",
@@ -87,16 +88,17 @@
     "builtin-modules": "^3.2.0",
     "chalk": "^4.1.2",
     "cheerio": "^1.0.0-rc.10",
+    "chrome-launcher": "^0.14.0",
     "codecov": "^3.8.3",
     "cssnano": "^5.0.7",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jest": "^24.4.0",
+    "express": "^4.17.1",
     "get-stdin": "^9.0.0",
     "globby": "^12.0.0",
     "image-size": "^1.0.0",
-    "is-wsl": "^2.2.0",
     "jest": "^27.0.6",
     "jest-junit": "^12.2.0",
     "nanoid": "^3.1.23",
@@ -108,6 +110,7 @@
     "portfinder": "^1.0.28",
     "postcss": "^8.3.6",
     "postcss-url": "^10.1.3",
+    "pptxgenjs": "^3.7.1",
     "prettier": "^2.3.2",
     "pug": "^3.0.2",
     "rimraf": "^3.0.2",
@@ -117,7 +120,6 @@
     "rollup-plugin-pug": "^1.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.37.5",
-    "screenfull": "^5.1.0",
     "strip-ansi": "^7.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
@@ -128,6 +130,7 @@
     "ts-jest": "^27.0.4",
     "ts-key-enum": "^2.0.7",
     "tslib": "^2.3.0",
+    "typed-emitter": "^1.3.1",
     "typescript": "^4.3.5",
     "vhtml": "^2.2.0",
     "wrap-ansi": "^8.0.0",
@@ -138,16 +141,14 @@
     "@marp-team/marp-core": "^2.1.0",
     "@marp-team/marpit": "^2.1.0",
     "chokidar": "^3.5.2",
-    "chrome-launcher": "^0.14.0",
     "cosmiconfig": "^7.0.0",
-    "express": "^4.17.1",
     "import-from": "^4.0.0",
-    "pptxgenjs": "^3.7.1",
+    "is-wsl": "^2.2.0",
     "puppeteer-core": "10.2.0",
     "serve-index": "^1.9.1",
     "tmp": "^0.2.1",
     "v8-compile-cache": "^2.3.0",
-    "ws": "^8.0.0",
+    "ws": "^8.1.0",
     "yargs": "^17.1.0"
   },
   "resolutions": {

diff --git a/rollup.config.js b/rollup.config.js
@@ -23,6 +23,12 @@ const external = (deps) => (id) =>
 
 const plugins = (opts = {}) => [
   json({ preferConst: true }),
+  alias({
+    entries: [
+      { find: /^node:(.+)$/, replacement: '$1' },
+      { find: 'jszip', replacement: 'jszip/dist/jszip.min.js' },
+    ],
+  }),
   nodeResolve({
     browser: !!opts.browser,
     mainFields: ['module', 'jsnext:main', 'main'],
@@ -33,9 +39,6 @@ const plugins = (opts = {}) => [
   }),
   commonjs(),
   typescript({ noEmitOnError: false }),
-  alias({
-    entries: [{ find: /^node:(.+)$/, replacement: '$1' }],
-  }),
   postcss({
     inject: false,
     plugins: [

diff --git a/src/preview.ts b/src/preview.ts
@@ -2,6 +2,7 @@
 import { EventEmitter } from 'events'
 import { nanoid } from 'nanoid'
 import puppeteer from 'puppeteer-core'
+import TypedEmitter from 'typed-emitter'
 import favicon from './assets/favicon.png'
 import { ConvertType, mimeTypes } from './converter'
 import { error } from './error'
@@ -11,7 +12,6 @@ import {
   generatePuppeteerLaunchArgs,
   launchPuppeteer,
 } from './utils/puppeteer'
-import TypedEventEmitter from './utils/typed-event-emitter'
 import { isChromeInWSLHost } from './utils/wsl'
 
 export namespace Preview {
@@ -29,7 +29,7 @@ export namespace Preview {
   }
 }
 
-export class Preview extends TypedEventEmitter<Preview.Events> {
+export class Preview extends (EventEmitter as new () => TypedEmitter<Preview.Events>) {
   readonly options: Preview.Options
 
   private puppeteerInternal: puppeteer.Browser | undefined

diff --git a/src/server.ts b/src/server.ts
@@ -1,12 +1,14 @@
 /* eslint-disable import/export, @typescript-eslint/no-namespace */
+import EventEmitter from 'events'
 import fs from 'fs'
 import { Server as HttpServer } from 'http'
 import path from 'path'
 import querystring from 'querystring'
 import url from 'url'
 import { promisify } from 'util'
-import express, { Express } from 'express'
+import type { Express, Request, Response } from 'express'
 import serveIndex from 'serve-index'
+import TypedEmitter from 'typed-emitter'
 import favicon from './assets/favicon.png'
 import {
   Converter,
@@ -18,9 +20,8 @@ import { CLIError, CLIErrorCode, error } from './error'
 import { File, markdownExtensions } from './file'
 import serverIndex from './server/index.pug'
 import style from './server/index.scss'
-import TypedEventEmitter from './utils/typed-event-emitter'
 
-export class Server extends TypedEventEmitter<Server.Events> {
+export class Server extends (EventEmitter as new () => TypedEmitter<Server.Events>) {
   readonly converter: Converter
   readonly inputDir: string
   readonly options: Server.Options
@@ -46,7 +47,7 @@ export class Server extends TypedEventEmitter<Server.Events> {
   }
 
   async start() {
-    this.setup()
+    await this.setup()
 
     return new Promise<void>((res, rej) => {
       this.httpServer = this.server!.listen(this.port) // eslint-disable-line @typescript-eslint/no-non-null-assertion
@@ -120,7 +121,7 @@ export class Server extends TypedEventEmitter<Server.Events> {
     return Server.script
   }
 
-  private async preprocess(req: express.Request, res: express.Response) {
+  private async preprocess(req: Request, res: Response) {
     const { pathname, query } = url.parse(req.url)
     if (!pathname) return
 
@@ -166,8 +167,10 @@ export class Server extends TypedEventEmitter<Server.Events> {
     }
   }
 
-  private setup() {
-    this.server = express()
+  private async setup() {
+    const express = await import('express')
+
+    this.server = express.default()
     this.server
       .get('*', (req, res, next) =>
         this.preprocess(req, res).then(() => {

diff --git a/src/templates/bespoke/classes.ts b/src/templates/bespoke/classes.ts
@@ -1,27 +1,31 @@
 // Based on https://github.com/bespokejs/bespoke-classes
 
+const prefix = 'bespoke-marp-' as const
+
 export default function bespokeClasses(deck) {
-  deck.parent.classList.add('bespoke-marp-parent')
-  deck.slides.forEach((el: HTMLElement) =>
-    el.classList.add('bespoke-marp-slide')
-  )
+  deck.parent.classList.add(`${prefix}parent`)
+  deck.slides.forEach((el: HTMLElement) => el.classList.add(`${prefix}slide`))
 
   deck.on('activate', (e) => {
+    const activeClass = `${prefix}active` as const
+
     const slide: HTMLElement = e.slide
-    const shouldResetAnim = !slide.classList.contains('bespoke-marp-active')
+    const shouldResetAnim = !slide.classList.contains(activeClass)
 
     deck.slides.forEach((el: HTMLElement) => {
-      el.classList.remove('bespoke-marp-active')
+      el.classList.remove(activeClass)
       el.setAttribute('aria-hidden', 'true')
     })
 
-    slide.classList.add('bespoke-marp-active')
+    slide.classList.add(activeClass)
     slide.removeAttribute('aria-hidden')
 
     if (shouldResetAnim) {
-      slide.classList.add('bespoke-marp-active-ready')
+      const activeReadyClass = `${activeClass}-ready` as const
+
+      slide.classList.add(activeReadyClass)
       void document.body.clientHeight
-      slide.classList.remove('bespoke-marp-active-ready')
+      slide.classList.remove(activeReadyClass)
     }
   })
 }
diff --git a/src/templates/bespoke/fragments.ts b/src/templates/bespoke/fragments.ts
@@ -5,6 +5,8 @@ export interface FragmentEvent {
   fragmentIndex: number
 }
 
+const dataAttrPrefix = 'data-bespoke-marp-' as const
+
 // Based on https://github.com/bespokejs/bespoke-bullets
 export default function bespokeFragments(deck) {
   let activeSlideIdx = 0
@@ -35,20 +37,19 @@ export default function bespokeFragments(deck) {
             (slideCurrentIdx === slideIdx && fragmentCurrentIdx <= fragmentIdx)
 
           fragment.setAttribute(
-            'data-bespoke-marp-fragment',
+            `${dataAttrPrefix}fragment`,
             active ? 'active' : 'inactive'
           )
 
+          const dataAttrCurrentFragment = `${dataAttrPrefix}current-fragment`
+
           if (
             slideCurrentIdx === slideIdx &&
             fragmentCurrentIdx === fragmentIdx
           ) {
-            fragment.setAttribute(
-              'data-bespoke-marp-current-fragment',
-              'current'
-            )
+            fragment.setAttribute(dataAttrCurrentFragment, 'current')
           } else {
-            fragment.removeAttribute('data-bespoke-marp-current-fragment')
+            fragment.removeAttribute(dataAttrCurrentFragment)
           }
         })
       }

diff --git a/src/templates/bespoke/fullscreen.ts b/src/templates/bespoke/fullscreen.ts
@@ -1,8 +1,8 @@
-import { default as screenfull } from 'screenfull'
+import { fullscreen } from './utils'
 
 export default function bespokeFullscreen(deck) {
   deck.fullscreen = () => {
-    if (screenfull.isEnabled) screenfull.toggle(document.body)
+    if (fullscreen.isEnabled()) fullscreen.toggle()
   }
 
   document.addEventListener('keydown', (e) => {
@@ -12,7 +12,7 @@ export default function bespokeFullscreen(deck) {
       !e.altKey &&
       !e.ctrlKey &&
       !e.metaKey &&
-      screenfull.isEnabled
+      fullscreen.isEnabled()
     ) {
       deck.fullscreen()
       e.preventDefault()

diff --git a/src/templates/bespoke/inactive.ts b/src/templates/bespoke/inactive.ts
@@ -1,3 +1,5 @@
+const inactiveClass = 'bespoke-marp-inactive' as const
+
 export default function bespokeInactive(timeout = 2000) {
   return (deck) => {
     let activeTimer
@@ -6,12 +8,12 @@ export default function bespokeInactive(timeout = 2000) {
       if (activeTimer) clearTimeout(activeTimer)
 
       activeTimer = setTimeout(() => {
-        deck.parent.classList.add('bespoke-marp-inactive')
+        deck.parent.classList.add(inactiveClass)
         deck.fire('marp-inactive')
       }, timeout)
 
-      if (deck.parent.classList.contains('bespoke-marp-inactive')) {
-        deck.parent.classList.remove('bespoke-marp-inactive')
+      if (deck.parent.classList.contains(inactiveClass)) {
+        deck.parent.classList.remove(inactiveClass)
         deck.fire('marp-active')
       }
     }

diff --git a/src/templates/bespoke/osc.ts b/src/templates/bespoke/osc.ts
@@ -1,5 +1,4 @@
-import { default as screenfull } from 'screenfull'
-import { storage } from './utils'
+import { fullscreen, storage } from './utils'
 
 export default function bespokeOSC(selector = '.bespoke-marp-osc') {
   const osc = document.querySelector<HTMLElement>(selector)
@@ -15,7 +14,7 @@ export default function bespokeOSC(selector = '.bespoke-marp-osc') {
   }
 
   // Hide fullscreen button in not-supported browser (e.g. phone device)
-  if (!screenfull.isEnabled)
+  if (!fullscreen.isEnabled())
     oscElements('fullscreen', (btn) => (btn.style.display = 'none'))
 
   // Disable presenter button if using localStorage is restricted
@@ -40,8 +39,7 @@ export default function bespokeOSC(selector = '.bespoke-marp-osc') {
             deck.prev({ fragment: !e.shiftKey })
             break
           case 'fullscreen':
-            if (typeof deck.fullscreen === 'function' && screenfull.isEnabled)
-              deck.fullscreen()
+            if (typeof deck.fullscreen === 'function') deck.fullscreen()
             break
           case 'presenter':
             deck.openPresenterView()
@@ -77,12 +75,12 @@ export default function bespokeOSC(selector = '.bespoke-marp-osc') {
     deck.on('marp-active', () => osc.removeAttribute('aria-hidden'))
     deck.on('marp-inactive', () => osc.setAttribute('aria-hidden', 'true'))
 
-    if (screenfull.isEnabled) {
-      screenfull.onchange(() =>
+    if (fullscreen.isEnabled()) {
+      fullscreen.onChange(() =>
         oscElements('fullscreen', (fs) =>
           fs.classList.toggle(
             'exit',
-            screenfull.isEnabled && screenfull.isFullscreen
+            fullscreen.isEnabled() && fullscreen.isFullscreen()
           )
         )
       )

diff --git a/src/templates/bespoke/presenter/normal-view.ts b/src/templates/bespoke/presenter/normal-view.ts
@@ -1,4 +1,5 @@
 import { generateURLfromParams, storage } from '../utils'
+import { presenterPrefix } from './presenter-view'
 
 type BespokeForPresenter = { syncKey: string; [key: string]: any }
 
@@ -34,7 +35,7 @@ function openPresenterView(this: BespokeForPresenter) {
 
   return window.open(
     this.presenterUrl,
-    `bespoke-marp-presenter-${this.syncKey}`,
+    presenterPrefix + this.syncKey,
     `width=${w},height=${h},menubar=no,toolbar=no`
   )
 }