Add unpack and unpackInverseDeps scripts

packages/scripts/@types/browser-unpack.d.ts

@@ -0,0 +1,9 @@
+declare module 'browser-unpack' {
+  function Unpack(filename: string): Module[]
+  export interface Module {
+    id: number | string
+    source: string
+    deps: Record<string, string | number>
+  }
+  export = Unpack
+}

packages/scripts/src/scripts/build.ts

@@ -99,15 +99,15 @@ function findTsConfig(file: string): string {
   return ''
 }
 
-async function browserify(path = '.') {
+async function browserify(path = '.', ...extraArgs: string[]) {
   // mkdirSync(join(path, 'build'), {recursive: true})
   await run('browserify', [
     join(path, 'esm', 'index.js'),
-    '--full-paths', // TODO this might be unneccessary
     '-g', '[', 'loose-envify', 'purge', '--NODE_ENV', 'production', ']',
     '-p', '[', 'esmify', ']',
     '-p', '[', 'common-shakeify', '-v', ']',
     '-v', '-o', join(path, 'build', 'client.prod.js'),
+    ...extraArgs,
   ])
 }
 
@@ -140,7 +140,7 @@ async function buildJs(path: string) {
   await uglify(path)
 }
 
-async function watchJs(path: string) {
+async function watchJs(path: string, ...extraArgs: string[]) {
   await run('watchify', [
     join(path, 'esm', 'index.js'),
     // '-p', '[', 'tsify', '--project', path, ']',
@@ -149,6 +149,7 @@ async function watchJs(path: string) {
     '--debug',
     '-o',
     join(path, 'build', 'client.js'),
+    ...extraArgs,
   ])
 }
 
@@ -194,14 +195,19 @@ async function watchCss(path = '.') {
 export async function frontend(...argv: string[]) {
   const args = argparse({
     path: arg('string', {positional: true, default: '.'}),
+    'full-paths': arg('boolean'),
     help: arg('boolean', {alias: 'h'}),
   })
   .parse(argv)
   const {path} = args
+  const watchArgs = []
+  if (args['full-paths']) {
+    watchArgs.push('--full-paths')
+  }
   await build(...['-p', path, '--esm'])
   const promises = [
     build(...['-p', path, '--watch', '--esm']),
-    watchJs(path),
+    watchJs(path, ...watchArgs),
     watchCss(path),
   ]
   await Promise.all(promises)

packages/scripts/src/scripts/index.ts

@@ -6,3 +6,4 @@ export * from './imports'
 export * from './intergen'
 export * from './syncEsmConfig'
 export * from './update'
+export * from './unpack'

packages/scripts/src/scripts/unpack.ts

@@ -0,0 +1,92 @@
+import * as fs from 'fs'
+import _unpack from 'browser-unpack'
+import * as path from 'path'
+import { argparse, arg } from '@rondo.dev/argparse'
+
+export async function unpack(...argv: string[]) {
+  const args = argparse({
+    filename: arg('string', {positional: true, required: true}),
+    help: arg('boolean'),
+  }).parse(argv)
+
+  const file = fs.readFileSync(args.filename, 'utf8')
+  const result = _unpack(file)
+
+  const sizes = result.map(item => {
+    const size = new Buffer(item.source).byteLength
+    const sizeKb = (size / 1024).toFixed(3) + ' kb'
+    return {
+      id: path.relative(process.cwd(), item.id.toString()),
+      size,
+      sizeKb,
+      deps: item.deps,
+    }
+  })
+  .sort((a, b) => a.size - b.size)
+
+  const maxNameLength = sizes
+  .reduce((m, i) => m < i.id.length ? i.id.length : m, 0)
+  const maxSizeLength = sizes
+  .reduce((m, i) => m < i.sizeKb.length ? i.sizeKb.length : m, 0)
+
+  const totalSize = sizes.reduce((s, i) => i.size + s, 0)
+
+  function padRight(text: string, size: number) {
+    while (text.length < size) {
+      text += ' '
+    }
+    return text
+  }
+
+  function padLeft(text: string, size: number) {
+    while (text.length < size) {
+      text = ' ' + text
+    }
+    return text
+  }
+
+  sizes
+  .forEach(item => {
+    console.log(
+      padRight(item.id, maxNameLength),
+      padLeft(item.sizeKb, maxSizeLength),
+    )
+  })
+  console.log()
+  console.log(
+    padRight('Total size:', maxNameLength),
+    padLeft((totalSize / 1024).toFixed(3) + ' kb', maxSizeLength),
+  )
+}
+
+export async function unpackInverseDeps(...argv: string[]) {
+  const args = argparse({
+    filename: arg('string', {positional: true, required: true}),
+    help: arg('boolean'),
+  }).parse(argv)
+
+  const file = fs.readFileSync(args.filename, 'utf8')
+  const result = _unpack(file)
+
+  const cwd = process.cwd()
+  const depsById = result.reduce((obj, item) => {
+    const id = path.relative(cwd, item.id.toString())
+    Object.keys(item.deps).forEach(dep => {
+      const depId = path.relative(cwd, item.deps[dep].toString())
+      obj[depId] = obj[depId] || []
+      obj[depId].push(id)
+    })
+    return obj
+  }, {} as Record<string, string[]>)
+
+  Object.keys(depsById).forEach(dep => {
+    console.log(dep)
+    const deps = depsById[dep]
+    if (deps) {
+      deps.forEach(value => {
+        console.log('  -', value)
+      })
+    }
+    console.log('')
+  })
+}