webpack.config.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const babelLoader = require('@skpm/builder/lib/utils/babelLoader').default({})

const PRODUCTION = process.env.NODE_ENV !== 'development'

const OUTPUT_PATH = path.resolve(__dirname, './build')

const ENTRIES = [
  { entry: './Source/index.js', output: 'SketchAPI.js' },
  { entry: './Source/async/index.js', output: 'SketchAPI_async.js' },
  {
    entry: './Source/data-supplier/index.js',
    output: 'SketchAPI_data-supplier.js',
  },
  { entry: './Source/dom/index.js', output: 'SketchAPI_dom.js' },
  { entry: './Source/settings/index.js', output: 'SketchAPI_settings.js' },
  { entry: './Source/ui/index.js', output: 'SketchAPI_ui.js' },
]

const CORE_MODULES = Object.keys(
  require('./core-modules/package.json').dependencies
).map((k) => k.replace('@skpm/', ''))

babelLoader.test = /\.(ts|js)$/

// This plugin generates the input .xcfilelist for the "Build SketchAPI" Run Script phase of the
// SketchAPI Xcode project so Xcode can rebuild the JS code only when relevant source files change.
class MSGenerateXCFileListPlugin {
  constructor() {
    this.inputFiles = new Set()
    this.compilerCount = 0
    this.shutdownCount = 0
  }
  apply(compiler) {
    this.compilerCount++
    compiler.hooks.done.tap(this.constructor.name, (stats) => {
      const projectDir = compiler.context
      for (const module of stats.compilation.modules) {
        if (module.resource) {
          this.inputFiles.add(module.resource.replace(projectDir, '$(SRCROOT)'))
        }
      }
    })
    compiler.hooks.shutdown.tap(this.constructor.name, () => {
      this.shutdownCount++
      if (this.shutdownCount < this.compilerCount) {
        // Wait until all compilers have finished before writing the final .xcfilelist files
        return
      }
      const header =
        [
          `# This file is auto-generated by ${this.constructor.name} in webpack.config.js`,
          `# for the "Build SketchAPI" Run Script phase of the SketchAPI.xcodeproj.`,
          `# Do not edit this file directly.`,
        ].join('\n') + '\n\n'

      const sortedInputs = [...this.inputFiles].sort()
      this.writeIfChanged(
        path.resolve(__dirname, 'sketchapi-inputs.xcfilelist'),
        header + sortedInputs.join('\n') + '\n'
      )
    })
  }

  writeIfChanged(filePath, content) {
    const name = path.basename(filePath)
    try {
      const existing = fs.readFileSync(filePath, 'utf8')
      if (existing === content) {
        console.log(`[${this.constructor.name}] ${name} is up to date`)
        return
      }
    } catch (e) {
      // File doesn't exist yet, write it
    }
    fs.writeFileSync(filePath, content)
    console.log(`[${this.constructor.name}] Updated ${name}`)
  }
}

const xcfilelistplugin = new MSGenerateXCFileListPlugin()

const config = {
  mode: PRODUCTION ? 'production' : 'development',
  resolve: { extensions: ['.js', '.json'] },
  module: {
    rules: [babelLoader],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(PRODUCTION ? 'production' : 'development'),
        API_VERSION: JSON.stringify(process.env.npm_package_version),
      },
    }),
    xcfilelistplugin,
  ],
  externals: [
    (context, request, callback) => {
      // core modules shipped in Sketch
      if (CORE_MODULES.indexOf(request) !== -1) {
        return callback(null, `commonjs ${request}`)
      }
      return callback()
    },
  ],
}

module.exports = ENTRIES.map(({ entry, output }) => ({
  ...config,
  ...{
    entry,
    output: {
      filename: output,
      libraryTarget: 'commonjs2',
      path: OUTPUT_PATH,
    },
  },
}))

module.exports.config = config
module.exports.CORE_MODULES = CORE_MODULES