[Breaking] Support multiple entrypoints (#19)

* [BREAKING] Support multiple entrypoints / bundles

Requires breaking change in plugin API.

* Deduplicate transpiled source files

Author: andywer

README.md

@@ -40,7 +40,7 @@ The script can basically be any JavaScript or TypeScript file. It will be bundle
 To run Mocha tests:
 
 ```sh
-npx puppet-run plugin:mocha [...mocha options] ./path/to/*.test.js
+npx puppet-run --plugin=mocha [...mocha options] ./path/to/*.test.js
 ```
 
 Print some help on how to use the tool:
@@ -52,7 +52,7 @@ npx puppet-run --help
 Print help text how to use this plugin:
 
 ```sh
-npx puppet-run plugin:mocha --help
+npx puppet-run --plugin=mocha --help
 ```
 
 
@@ -106,15 +106,15 @@ Here is how to use the mocha plugin:
 
 ```sh
 npm install puppet-run-plugin-mocha
-npx puppet-run plugin:mocha ./*.test.js [--reporter "spec"]
+npx puppet-run --plugin=mocha ./*.test.js [--reporter "spec"]
 ```
 
 This way you can just pass an arbitrary usual mocha test file without having to care about `puppet.exit()` or any boilerplate code.
 
 You can also get help how to use a plugin:
 
 ```sh
-npx puppet-run plugin:mocha --help
+npx puppet-run --plugin=mocha --help
 ```
 
 

package-lock.json

@@ -37,6 +37,7 @@
     "meow": "^5.0.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
+    "nanoid": "^2.0.3",
     "ora": "^3.0.0",
     "puppeteer-core": "^1.10.0",
     "rimraf": "^2.6.2",
@@ -52,6 +53,7 @@
     "@types/get-port": "^4.0.0",
     "@types/meow": "^5.0.0",
     "@types/mkdirp": "^0.5.2",
+    "@types/nanoid": "^2.0.0",
     "@types/node": "^10.9.4",
     "@types/ora": "^1.3.4",
     "@types/puppeteer-core": "^1.9.0",

package.json

@@ -3,18 +3,24 @@ import * as path from "path"
 import babelify from "babelify"
 import browserify from "browserify"
 import envify from "envify"
+import mkdirp from "mkdirp"
+import nanoid from "nanoid"
 import { TemporaryFileCache } from "./temporary"
+import { Entrypoint } from "./types"
 
-export async function createBundle (entryPaths: string[], cache: TemporaryFileCache) {
+export async function createBundle (entry: Entrypoint, cache: TemporaryFileCache): Promise<Entrypoint> {
   // TODO: Use persistent cache
 
-  const bundleFilePath = path.join(cache, "main.js")
+  const servePath = (entry.servePath || `${path.basename(entry.sourcePath)}-${nanoid(6)}`).replace(/\.(jsx?|tsx?)/i, ".js")
+  const bundleFilePath = path.join(cache, servePath)
   const extensions = ["", ".js", ".jsx", ".ts", ".tsx", ".json"]
 
+  mkdirp.sync(path.dirname(bundleFilePath))
+
   await new Promise(resolve => {
     const stream = browserify({
       debug: true,    // enables inline sourcemaps
-      entries: entryPaths,
+      entries: [entry.sourcePath],
       extensions
     })
     .transform(babelify.configure({
@@ -34,5 +40,8 @@ export async function createBundle (entryPaths: string[], cache: TemporaryFileCa
     stream.on("finish", resolve)
   })
 
-  return "main.js"
+  return {
+    servePath,
+    sourcePath: bundleFilePath
+  }
 }

src/bundle.ts

@@ -5,29 +5,32 @@ import meow from "meow"
 import minimist from "minimist"
 import ora from "ora"
 import path from "path"
-import * as Stream from "stream"
 import { createBundle } from "./bundle"
-import { copyFiles } from "./fs"
-import { isPluginArgument, loadPlugin, printPluginHelp } from "./plugins"
+import { copyFiles, dedupeSourceFiles, resolveDirectoryEntrypoints } from "./fs"
+import { loadPlugin, printPluginHelp, resolveEntrypoints } from "./plugins"
 import { spawnPuppet } from "./puppeteer"
 import { serveDirectory } from "./server"
 import { clearTemporaryFileCache, createTemporaryFileCache, writeBlankHtmlPage } from "./temporary"
+import { Entrypoint } from "./types"
 
 const cli = meow(`
   Usage
-    $ puppet-run <./path/to/index.js> [...script arguments]
-    $ puppet-run plugin:<plugin> <...plugin arguments>
+    $ puppet-run <./entrypoint> [...more entrypoints] [-- <...script arguments>]
+    $ puppet-run <./entrypoint>:</serve/here> [...more entrypoints] [-- <...script args>]
+    $ puppet-run --plugin=<plugin> [<...entrypoints>] [-- <...script arguments>]
 
   Options
     --help                            Show this help.
     --inspect                         Run in actual Chrome window and keep it open.
+    --bundle <./file>[:</serve/here>] Bundle and serve additional files, but don't inject them.
     --p <port>, --port <port>         Serve on this port. Defaults to random port.
+    --plugin <plugin>                 Load and apply plugin <plugin>.
     --serve <./file>[:</serve/here>]  Serve additional files next to bundle.
 
   Example
     $ puppet-run ./sample/cowsays.js
     $ puppet-run ./sample/greet.ts newbie
-    $ puppet-run plugin:mocha ./sample/mocha-test.ts
+    $ puppet-run --plugin=mocha ./sample/mocha-test.ts
 `, {
   autoHelp: false
 })
@@ -42,6 +45,14 @@ function ensureArray (arg: string | string[] | undefined): string[] {
   }
 }
 
+function parseEntrypointArg (arg: string): Entrypoint {
+  const [sourcePath, servePath] = arg.split(":")
+  return {
+    servePath,
+    sourcePath
+  }
+}
+
 async function withSpinner<T>(promise: Promise<T>): Promise<T> {
   const spinner = ora("Bundling code").start()
 
@@ -55,55 +66,63 @@ async function withSpinner<T>(promise: Promise<T>): Promise<T> {
   }
 }
 
-const isParameterizedOption = (arg: string) => ["-p", "--port", "--serve"].indexOf(arg) > -1
-const firstArgumentIndex = process.argv.findIndex(
-  (arg, index) => index >= 2 && !arg.startsWith("-") && !isParameterizedOption(process.argv[index - 1])
-)
-
-const runnerOptionArgs = firstArgumentIndex > -1 ? process.argv.slice(2, firstArgumentIndex) : process.argv.slice(2)
-const scriptArgs = firstArgumentIndex > -1 ? process.argv.slice(firstArgumentIndex + 1) : []
+const argsSeparatorIndex = process.argv.indexOf("--")
+const runnerOptionArgs = argsSeparatorIndex > -1 ? process.argv.slice(2, argsSeparatorIndex) : process.argv.slice(2)
+const scriptArgs = argsSeparatorIndex > -1 ? process.argv.slice(argsSeparatorIndex + 1) : []
 
 const runnerOptions = minimist(runnerOptionArgs)
 
-const additionalFilesToServe = ensureArray(runnerOptions.serve).map(arg => {
-  const [sourcePath, servingPath] = arg.split(":")
-  return { sourcePath, servingPath: servingPath || path.basename(arg) }
-})
+const pluginNames = Array.isArray(runnerOptions.plugin || [])
+  ? runnerOptions.plugin || []
+  : [runnerOptions.plugin]
+
+const plugins = pluginNames.map(loadPlugin)
 
-if (firstArgumentIndex === -1 || runnerOptionArgs.indexOf("--help") > -1) {
+if (runnerOptionArgs.indexOf("--help") > -1 && plugins.length > 0) {
+  printPluginHelp(plugins[0], scriptArgs)
+  process.exit(0)
+} else if (process.argv.length === 2 || runnerOptionArgs.indexOf("--help") > -1) {
   cli.showHelp()
   process.exit(0)
 }
 
-async function run () {
+async function run() {
   let exitCode = 0
-  const entrypoint = process.argv[firstArgumentIndex]
 
   const headless = runnerOptionArgs.indexOf("--inspect") > -1 ? false : true
   const port = runnerOptions.p || runnerOptions.port
     ? parseInt(runnerOptions.p || runnerOptions.port, 10)
     : await getPort()
 
-  const plugin = isPluginArgument(entrypoint) ? loadPlugin(entrypoint) : null
-  const temporaryCache = createTemporaryFileCache()
+  const additionalBundleEntries = await resolveDirectoryEntrypoints(
+    ensureArray(runnerOptions.bundle).map(parseEntrypointArg),
+    filenames => dedupeSourceFiles(filenames, true)
+  )
+  const additionalFilesToServe = await resolveDirectoryEntrypoints(ensureArray(runnerOptions.serve).map(parseEntrypointArg))
 
-  if (plugin && scriptArgs.indexOf("--help") > -1) {
-    return printPluginHelp(plugin, scriptArgs)
-  }
+  const entrypointArgs = runnerOptionArgs.filter(arg => arg.charAt(0) !== "-")
+  const entrypoints = await resolveEntrypoints(plugins, entrypointArgs.map(parseEntrypointArg), scriptArgs)
 
-  const scriptPaths = plugin && plugin.resolveBundleEntrypoints
-    ? await plugin.resolveBundleEntrypoints(scriptArgs)
-    : [ entrypoint ]
+  const temporaryCache = createTemporaryFileCache()
 
   try {
     const serverURL = `http://localhost:${port}/`
     writeBlankHtmlPage(path.join(temporaryCache, "index.html"))
 
-    const bundle = await withSpinner(createBundle(scriptPaths, temporaryCache))
-    await copyFiles(additionalFilesToServe, temporaryCache)
+    const allBundles = await withSpinner(
+      Promise.all([...entrypoints, ...additionalBundleEntries].map(entrypoint => {
+        return createBundle(entrypoint, temporaryCache)
+      }))
+    )
+
+    const startupBundles = allBundles.slice(0, entrypoints.length)
+    const lazyBundles = allBundles.slice(entrypoints.length)
+
+    await copyFiles([...additionalFilesToServe, ...lazyBundles], temporaryCache)
+
     const closeServer = await serveDirectory(temporaryCache, port)
-    const puppet = await spawnPuppet(bundle, serverURL, { headless })
-    await puppet.run(scriptArgs, plugin)
+    const puppet = await spawnPuppet(startupBundles.map(entry => entry.servePath!), serverURL, { headless })
+    await puppet.run(scriptArgs, plugins)
 
     exitCode = await puppet.waitForExit()
     await puppet.close()

src/cli.ts

@@ -1,13 +1,24 @@
 import * as fs from "fs"
 import * as path from "path"
 import mkdirp from "mkdirp"
+import * as util from "util"
+import { Entrypoint } from "./types"
 
-interface FileToServe {
-  servingPath: string,
-  sourcePath: string
+const passthrough = <T>(thing: T) => thing
+
+const readdir = util.promisify(fs.readdir)
+const stat = util.promisify(fs.stat)
+
+function flatten<T>(nested: T[][]): T[] {
+  return nested.reduce<T[]>(
+    (flattened, subarray) => [...flattened, ...subarray],
+    []
+  )
 }
 
 export function copyFile (from: string, to: string) {
+  if (path.resolve(from) === path.resolve(to)) return
+
   return new Promise(resolve => {
     const input = fs.createReadStream(from)
     const output = fs.createWriteStream(to)
@@ -17,28 +28,69 @@ export function copyFile (from: string, to: string) {
   })
 }
 
-export async function copyFiles (filesToServe: FileToServe[], destinationDirectory: string) {
+export async function copyFiles(filesToServe: Entrypoint[], destinationDirectory: string) {
   return Promise.all(filesToServe.map(
-    async ({ servingPath, sourcePath }) => {
+    async ({ servePath, sourcePath }) => {
+      const servingPath = servePath || path.basename(sourcePath)
       const destinationFilePath = path.resolve(destinationDirectory, servingPath.replace(/^\//, ""))
+
       if (destinationFilePath.substr(0, destinationDirectory.length) !== destinationDirectory) {
         throw new Error(`File would be served outside of destination directory: ${sourcePath} => ${servingPath}`)
       }
 
       mkdirp.sync(path.dirname(destinationFilePath))
+      await copyFile(sourcePath, destinationFilePath)
+    }
+  ))
+}
+
+export function dedupeSourceFiles(basenames: string[], dropNonSourceFiles?: boolean): string[] {
+  // We don't want to include a source file and its already transpiled version as input
+
+  const sourceExtensionsRegex = /\.(jsx?|tsx?)$/i
+  const sourceFileNames = basenames.filter(basename => basename.match(sourceExtensionsRegex))
+  const nonSourceFileNames = basenames.filter(basename => sourceFileNames.indexOf(basename) === -1)
 
-      if (fs.statSync(sourcePath).isDirectory()) {
-        const directoryFiles = fs.readdirSync(sourcePath)
-        await copyFiles(
-          directoryFiles.map(file => ({
-            servingPath: path.join(servingPath, file),
-            sourcePath: path.join(sourcePath, file)
-          })),
-          destinationDirectory
-        )
+  const collidingSourceFileNames = sourceFileNames.reduce<{ [name: string]: string[] }>(
+    (destructured, filename) => {
+      const ext = path.extname(filename)
+      const name = filename.substr(0, filename.length - ext.length)
+      return {
+        ...destructured,
+        [name]: (destructured[name] || []).concat([ext])
+      }
+    },
+    {}
+  )
+
+  const dedupedSourceFileNames = Object.keys(collidingSourceFileNames).map(name => {
+    const ext = collidingSourceFileNames[name].sort()[0]
+    return `${name}${ext}`
+  })
+
+  return [
+    ...(dropNonSourceFiles ? [] : nonSourceFileNames),
+    ...dedupedSourceFileNames
+  ]
+}
+
+export async function resolveDirectoryEntrypoints(
+  entrypoints: Entrypoint[],
+  filterFiles: (basenames: string[]) => string[] = passthrough
+): Promise<Entrypoint[]> {
+  const nested = await Promise.all(
+    entrypoints.map(async entry => {
+      if ((await stat(entry.sourcePath)).isDirectory()) {
+        const files = filterFiles(await readdir(entry.sourcePath))
+        const subentries = files.map(filename => ({
+          servePath: entry.servePath ? path.join(entry.servePath, filename) : undefined,
+          sourcePath: path.join(entry.sourcePath, filename)
+        }))
+        return resolveDirectoryEntrypoints(subentries)
       } else {
-        await copyFile(sourcePath, destinationFilePath)
+        return [entry]
       }
-    }
-  ))
+    })
+  )
+  return flatten(nested)
 }