parcel v1 to v2 migration

package.json

@@ -39,7 +39,7 @@
     "klaw": "^3.0.0",
     "lodash.clonedeep": "^4.5.0",
     "mime-types": "^2.1.24",
-    "parcel-bundler": "1.12.3"
+    "parcel": "^2.0.0-beta.2"
   },
   "devDependencies": {
     "@types/hapi__joi": "^16.0.2",

src/build-web.js

@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 const fs = require('fs-extra')
 const path = require('path')
-const Bundler = require('parcel-bundler')
+const Bundler = require('@parcel/core').default
 
 /**
  * @deprecated since 4.1.0 ( January, 2021 ), use `bundle` instead
@@ -29,16 +29,19 @@ const buildWeb = async (config, log) => {
   await fs.emptyDir(dist)
 
   // 2. build files
-  const bundler = new Bundler(path.join(src, 'index.html'), {
-    cache: false,
-    outDir: dist,
-    publicUrl: './',
-    watch: false,
-    logLevel: 0,
-    contentHash: true
+  const bundler = new Bundler({
+    entries: path.join(src, 'index.html'),
+    defaultConfig: require.resolve('@parcel/config-default'),
+    shouldDisableCache: true,
+    defaultTargetOptions: {
+      distDir: dist,
+      publicUrl: './'
+    },
+    logLevel: 'none',
+    shouldContentHash: true
   })
 
-  await bundler.bundle()
+  await bundler.run()
 
   // 3. show built files ( if we are passed a log function )
   const files = await fs.readdir(dist)

src/bundle.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-const Bundler = require('parcel-bundler')
+const Bundler = require('@parcel/core').default
 const aioLogger = require('@adobe/aio-lib-core-logging')('@adobe/aio-lib-web:bundle', { provider: 'debug' })
 const fs = require('fs-extra')
 /**
@@ -49,26 +49,28 @@ module.exports = async (entryFile, dest, options = {}, log = () => {}) => {
 
   // set defaults, but allow override by passed in values
   const parcelBundleOptions = {
-    cache: true,
-    outDir: dest,
-    contentHash: true, // false if dev, true if prod ??
-    watch: false, // currently false if dev true if prod,
-    minify: false,
-    logLevel: 1,
+    entries: entryFile,
+    defaultConfig: require.resolve('@parcel/config-default'),
+    shouldDisableCache: false,
+    targets: {
+      action: {
+        includeNodeModules: true,
+        distDir: dest
+      }
+    },
+    defaultTargetOptions: {
+      distDir: dest,
+      shouldOptimize: false
+    },
+    shouldPatchConsole: false,
+    shouldContentHash: true,
+    logLevel: 'error',
     ...options
   }
 
   aioLogger.debug(`bundle bundleOptions: ${JSON.stringify(parcelBundleOptions, null, 2)}`)
   log(`bundling ${entryFile}`)
-  const bundler = new Bundler(entryFile, parcelBundleOptions)
+  const bundler = new Bundler(parcelBundleOptions)
 
-  const cleanup = async () => {
-    aioLogger.debug('cleanup bundler...')
-    await bundler.stop()
-  }
-
-  return {
-    bundler,
-    cleanup
-  }
+  return bundler
 }

test/__mocks__/parcel-bundler.js → test/__mocks__/@parcel/core.js

@@ -11,35 +11,35 @@ governing permissions and limitations under the License.
 */
 
 const mockBundle = jest.fn()
-const mockMiddleware = jest.fn()
 const mockConstructor = jest.fn()
 const mockServe = jest.fn()
-const mockStop = jest.fn()
 
 // hack to expose constructor, somehow returning a jest.fn doesn't work as expected for commonjs (only es6)
-const Bundler = function (...args) {
-  mockConstructor(...args)
-  global._bundler__arguments = args
-  return {
-    bundle: mockBundle,
-    middleware: mockMiddleware,
-    serve: mockServe,
-    stop: mockStop
+class core {
+  constructor (...args) {
+    mockConstructor(...args)
+    global._bundler__arguments = args
+  }
+
+  run () {
+    mockBundle()
+  }
+
+  watch () {
+    mockServe()
   }
 }
-Bundler.mockBundle = mockBundle
-Bundler.mockConstructor = mockConstructor
-Bundler.mockMiddleware = mockMiddleware
-Bundler.mockServe = mockServe
-Bundler.mockStop = mockStop
+core.mockBundle = mockBundle
+core.mockConstructor = mockConstructor
+core.mockServe = mockServe
 
 // alias
-Bundler.mockReset = () => {
-  Bundler.mockConstructor.mockReset()
-  Bundler.mockBundle.mockReset()
-  Bundler.mockMiddleware.mockReset()
-  Bundler.mockServe.mockReset()
-  Bundler.mockStop.mockReset()
+core.mockReset = () => {
+  core.mockConstructor.mockReset()
+  core.mockBundle.mockReset()
+  core.mockServe.mockReset()
 }
 
-module.exports = Bundler
+module.exports = {
+  default: core
+}

test/src/build-web.test.js

@@ -63,6 +63,18 @@ describe('build-web', () => {
     global.addFakeFiles(vol, 'fakeDir', { 'index.html': '' })
     fs.readdir.mockReturnValue(['output.html'])
     await expect(buildWeb(config)).resolves.toEqual(['output.html'])
-    expect(global._bundler__arguments).toEqual([path.join('fakeDir', 'index.html'), { cache: false, contentHash: true, logLevel: 0, outDir: 'dist', publicUrl: './', watch: false }])
+    expect(global._bundler__arguments).toEqual([
+      expect.objectContaining({
+        defaultConfig: expect.stringContaining(path.join('parcel', 'config-default', 'index.json')),
+        defaultTargetOptions: expect.objectContaining({
+          distDir: 'dist',
+          publicUrl: './'
+        }),
+        entries: path.join('fakeDir', 'index.html'),
+        logLevel: 'none',
+        shouldContentHash: true,
+        shouldDisableCache: true
+      })
+    ])
   })
 })

test/src/bundle.test.js

@@ -14,6 +14,7 @@ const { vol } = global.mockFs()
 const bundle = require('../../src/bundle')
 const fs = require('fs-extra')
 jest.mock('fs-extra')
+const path = require('path')
 
 describe('bundle', () => {
   beforeEach(() => {
@@ -49,43 +50,42 @@ describe('bundle', () => {
 
   test('check build options', async () => {
     global.addFakeFiles(vol, 'fakeDir', { 'index.html': '' })
-    await expect(bundle('fakeDir/index.html', 'distProd')).resolves.toEqual(
-      expect.objectContaining({ bundler: expect.any(Object) }))
+    await expect(bundle('fakeDir/index.html', 'distProd')).resolves.toEqual(expect.any(Object))
     expect(global._bundler__arguments).toEqual([
-      expect.stringContaining('fakeDir'),
       expect.objectContaining({
-        cache: true,
-        contentHash: true,
-        logLevel: 1,
-        outDir: 'distProd',
-        watch: false
+        defaultConfig: expect.stringContaining(path.join('parcel', 'config-default', 'index.json')),
+        defaultTargetOptions: expect.objectContaining({
+          distDir: 'distProd',
+          shouldOptimize: false
+        }),
+        entries: 'fakeDir/index.html',
+        logLevel: 'error',
+        shouldContentHash: true,
+        shouldDisableCache: false
       })])
   })
 
   test('uses build options', async () => {
     global.addFakeFiles(vol, 'fakeDir', { 'index.html': '' })
     await expect(bundle('fakeDir/index.html', 'distProd', { contentHash: false, logLevel: 5 }))
-      .resolves.toEqual(expect.objectContaining({ bundler: expect.any(Object) }))
+      .resolves.toEqual(expect.any(Object))
     expect(global._bundler__arguments).toEqual([
-      expect.stringContaining('fakeDir'),
       expect.objectContaining({
-        cache: true,
-        contentHash: false,
-        logLevel: 5,
-        outDir: 'distProd',
-        watch: false
+        defaultConfig: expect.stringContaining(path.join('parcel', 'config-default', 'index.json')),
+        defaultTargetOptions: expect.objectContaining({
+          distDir: 'distProd',
+          shouldOptimize: false
+        }),
+        entries: 'fakeDir/index.html',
+        shouldContentHash: true,
+        shouldDisableCache: false
       })])
   })
 
   test('returns {bundle, cleanup}', async () => {
     global.addFakeFiles(vol, 'fakeDir', { 'index.html': '' })
 
-    const { bundler, cleanup } = await bundle('fakeDir/index.html', 'distProd', { contentHash: false, logLevel: 5 })
+    const bundler = await bundle('fakeDir/index.html', 'distProd', { contentHash: false, logLevel: 5 })
     expect(bundler).toBeDefined()
-    expect(cleanup).toBeDefined()
-    expect(typeof cleanup).toBe('function')
-    bundler.stop = jest.fn()
-    cleanup()
-    expect(bundler.stop).toHaveBeenCalled()
   })
 })