Change API for overriding the build config

Author: yuanqing

packages/build/src/build-async.ts

@@ -1,5 +1,4 @@
 import { log } from '@create-figma-plugin/common'
-import fs from 'fs-extra'
 
 import { BuildOptions } from './types/build.js'
 import { buildBundlesAsync } from './utilities/build-bundles-async/build-bundles-async.js'
@@ -11,26 +10,8 @@ import { typeCheckAsync } from './utilities/type-check-async/type-check-async.js
 export async function buildAsync(
   options: BuildOptions & { clearPreviousLine: boolean }
 ): Promise<void> {
-  const {
-    minify,
-    typecheck,
-    mainConfigFilePath,
-    uiConfigFilePath,
-    clearPreviousLine
-  } = options
+  const { minify, typecheck, clearPreviousLine } = options
   try {
-    if (
-      mainConfigFilePath !== null &&
-      (await fs.pathExists(mainConfigFilePath)) === false
-    ) {
-      throw new Error(`Main config file does not exist: ${mainConfigFilePath}`)
-    }
-    if (
-      uiConfigFilePath !== null &&
-      (await fs.pathExists(uiConfigFilePath)) === false
-    ) {
-      throw new Error(`UI config file does not exist: ${uiConfigFilePath}`)
-    }
     if (typecheck === true) {
       const getTypeCheckElapsedTime = trackElapsedTime()
       await buildCssModulesTypingsAsync() // This must occur before `typeCheckAsync`
@@ -42,18 +23,15 @@ export async function buildAsync(
       })
       log.info('Building...')
       const getBuildElapsedTime = trackElapsedTime()
-      await Promise.all([
-        buildBundlesAsync({ mainConfigFilePath, minify, uiConfigFilePath }),
-        buildManifestAsync(minify)
-      ])
+      await Promise.all([buildBundlesAsync(minify), buildManifestAsync(minify)])
       const buildElapsedTime = getBuildElapsedTime()
       log.success(`Built in ${buildElapsedTime}`, { clearPreviousLine })
     } else {
       log.info('Building...')
       const getBuildElapsedTime = trackElapsedTime()
       await Promise.all([
         buildCssModulesTypingsAsync(),
-        buildBundlesAsync({ mainConfigFilePath, minify, uiConfigFilePath }),
+        buildBundlesAsync(minify),
         buildManifestAsync(minify)
       ])
       const buildElapsedTime = getBuildElapsedTime()

packages/build/src/cli.ts

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 import { log } from '@create-figma-plugin/common'
-import { resolve } from 'path'
 import sade from 'sade'
 
 import { buildAsync } from './build-async.js'
@@ -10,32 +9,16 @@ import { watchAsync } from './watch-async/watch-async.js'
 sade('build-figma-plugin', true)
   .describe('Build a Figma plugin')
   .option('-m, --minify', 'Minify the plugin bundle', false)
-  .option(
-    '--main-config',
-    'Path to a JavaScript file for customizing the esbuild config for generating the plugin’s main bundle',
-    ''
-  )
   .option('-t, --typecheck', 'Type check the plugin code before build', false)
-  .option(
-    '--ui-config',
-    'Path to a JavaScript file for customizing the esbuild config for generating the plugin’s UI bundle',
-    ''
-  )
   .option('-w, --watch', 'Rebuild the plugin on code changes', false)
   .action(async function (options: {
     minify: boolean
     typecheck: boolean
     watch: boolean
-    ['main-config']: string
-    ['ui-config']: string
   }): Promise<void> {
     const buildOptions: BuildOptions = {
-      mainConfigFilePath:
-        options['main-config'] === '' ? null : resolve(options['main-config']),
       minify: options.minify,
-      typecheck: options.typecheck,
-      uiConfigFilePath:
-        options['ui-config'] === '' ? null : resolve(options['ui-config'])
+      typecheck: options.typecheck
     }
     if (options.watch === true) {
       log.clearViewport()

packages/build/src/types/build.ts

@@ -1,6 +1,4 @@
 export type BuildOptions = {
-  readonly mainConfigFilePath: null | string
   readonly minify: boolean
   readonly typecheck: boolean
-  readonly uiConfigFilePath: null | string
 }

packages/build/src/utilities/build-bundles-async/build-bundles-async.ts

@@ -8,53 +8,47 @@ import {
   readConfigAsync
 } from '@create-figma-plugin/common'
 import { build, BuildOptions } from 'esbuild'
+import fs from 'fs-extra'
 import indentString from 'indent-string'
-import { join } from 'path'
+import { join, resolve } from 'path'
 
 import { esbuildCssModulesPlugin } from './esbuild-css-modules-plugin.js'
 
 interface EntryFile extends ConfigFile {
   readonly commandId: string
 }
 
-export async function buildBundlesAsync(options: {
-  minify: boolean
-  mainConfigFilePath: null | string
-  uiConfigFilePath: null | string
-}): Promise<void> {
-  const { minify, uiConfigFilePath, mainConfigFilePath } = options
+export async function buildBundlesAsync(minify: boolean): Promise<void> {
   const config = await readConfigAsync()
   await Promise.all([
     buildMainBundleAsync({
       config,
-      esbuildConfigFilePath: mainConfigFilePath,
       minify
     }),
     buildUiBundleAsync({
       config,
-      esbuildConfigFilePath: uiConfigFilePath,
       minify
     })
   ])
 }
 
 async function createEsbuildConfig(
   buildOptions: BuildOptions,
-  esbuildConfigFilePath: null | string
+  esbuildConfigFilePath: string
 ): Promise<BuildOptions> {
-  if (esbuildConfigFilePath === null) {
+  const absolutePath = resolve(esbuildConfigFilePath)
+  if ((await fs.pathExists(absolutePath)) === false) {
     return buildOptions
   }
-  const { default: overrideEsbuildConfig } = await import(esbuildConfigFilePath)
+  const { default: overrideEsbuildConfig } = await import(absolutePath)
   return overrideEsbuildConfig(buildOptions)
 }
 
 async function buildMainBundleAsync(options: {
   config: Config
   minify: boolean
-  esbuildConfigFilePath: null | string
 }): Promise<void> {
-  const { config, minify, esbuildConfigFilePath } = options
+  const { config, minify } = options
   const js = createMainEntryFile(config)
   try {
     const esbuildConfig: BuildOptions = {
@@ -71,7 +65,12 @@ async function buildMainBundleAsync(options: {
       // See https://esbuild.github.io/content-types/#javascript
       target: 'es2017'
     }
-    await build(await createEsbuildConfig(esbuildConfig, esbuildConfigFilePath))
+    await build(
+      await createEsbuildConfig(
+        esbuildConfig,
+        constants.build.mainConfigFilePath
+      )
+    )
   } catch (error) {
     throw new Error(formatEsbuildErrorMessage(error.message))
   }
@@ -99,9 +98,8 @@ function createMainEntryFile(config: Config): string {
 async function buildUiBundleAsync(options: {
   config: Config
   minify: boolean
-  esbuildConfigFilePath: null | string
 }): Promise<void> {
-  const { config, minify, esbuildConfigFilePath } = options
+  const { config, minify } = options
   const js = createUiEntryFile(config)
   if (js === null) {
     return
@@ -121,7 +119,9 @@ async function buildUiBundleAsync(options: {
       },
       target: 'chrome58'
     }
-    await build(await createEsbuildConfig(esbuildConfig, esbuildConfigFilePath))
+    await build(
+      await createEsbuildConfig(esbuildConfig, constants.build.uiConfigFilePath)
+    )
   } catch (error) {
     throw new Error(formatEsbuildErrorMessage(error.message))
   }

packages/build/src/watch-async/watch-async.ts

@@ -14,7 +14,7 @@ const cssRegex = /\.css$/
 const packageJsonRegex = /^package\.json$/
 
 export async function watchAsync(options: BuildOptions): Promise<void> {
-  const { minify, uiConfigFilePath, mainConfigFilePath, typecheck } = options
+  const { minify, typecheck } = options
   if (typecheck === true) {
     await typeCheckAsync(true)
   }
@@ -43,9 +43,7 @@ export async function watchAsync(options: BuildOptions): Promise<void> {
         promises.push(buildCssModulesTypingsAsync())
       }
     }
-    promises.push(
-      buildBundlesAsync({ mainConfigFilePath, minify, uiConfigFilePath })
-    )
+    promises.push(buildBundlesAsync(minify))
     await Promise.all(promises)
     log.success(`Built in ${getElapsedTime()}`)
     if (typecheck === false) {

packages/build/test/build-async.ts

@@ -19,10 +19,8 @@ test('no config', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -46,10 +44,8 @@ test('basic command', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -73,10 +69,8 @@ test('command with UI', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -101,10 +95,8 @@ test('multiple menu commands', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -142,10 +134,8 @@ test('nested menu commands', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -180,10 +170,8 @@ test('relaunch button', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -220,10 +208,8 @@ test('custom styles', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -249,10 +235,8 @@ test('preact', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -277,10 +261,8 @@ test('esbuild main config', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: join(process.cwd(), 'esbuild.main.config.js'),
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: null
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -306,10 +288,8 @@ test('esbuild ui config', async function (t) {
   await symlinkCreateFigmaPluginTsConfigAsync()
   await buildAsync({
     clearPreviousLine: false,
-    mainConfigFilePath: null,
     minify: false,
-    typecheck: true,
-    uiConfigFilePath: join(process.cwd(), 'esbuild.ui.config.js')
+    typecheck: true
   })
   const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
   t.deepEqual(manifestJson, {
@@ -323,7 +303,7 @@ test('esbuild ui config', async function (t) {
   t.true(await fs.pathExists('build/ui.js'))
   const uiJs = await fs.readFile('build/ui.js', 'utf8')
   t.true(/\/\/ comment appended to ui\.js/.test(uiJs) === true)
-  // await cleanUpAsync()
+  await cleanUpAsync()
 })
 
 async function symlinkFigmaPluginTypingsAsync(): Promise<void> {

packages/build/test/fixtures/10-esbuild-ui-config/esbuild.ui.config.js renamed to packages/build/test/fixtures/10-esbuild-ui-config/build-figma-plugin.ui.js

@@ -2,9 +2,11 @@ export const constants = {
   apiVersion: '1.0.0',
   build: {
     directoryName: 'build',
+    mainConfigFilePath: 'build-figma-plugin.main.js',
     manifestFilePath: 'manifest.json',
     pluginCodeFilePath: 'build/main.js',
-    pluginUiFilePath: 'build/ui.js'
+    pluginUiFilePath: 'build/ui.js',
+    uiConfigFilePath: 'build-figma-plugin.ui.js'
   },
   defaultTemplate: 'default',
   packageJson: {