feat: build catalyst with opennextjs-cloudflare (#2493)

Author: matthewvolk

.gitignore

@@ -20,3 +20,4 @@ bigcommerce-graphql.d.ts
 coverage/
 .history
 .unlighthouse
+.bigcommerce

packages/cli/src/commands/build.ts

@@ -1,5 +1,6 @@
 import { Command } from 'commander';
 import consola from 'consola';
+import { execa } from 'execa';
 import { cp } from 'node:fs/promises';
 import { join, relative, sep } from 'node:path';
 import { addDevDependency, installDependencies, runScript } from 'nypm';
@@ -8,6 +9,7 @@ import { getModuleCliPath } from '../lib/get-module-cli-path';
 import { mkTempDir } from '../lib/mk-temp-dir';
 
 const OPENNEXTJS_CLOUDFLARE_VERSION = '1.5.2';
+const WRANGLER_VERSION = '4.24.3';
 
 const SKIP_DIRS = new Set([
   'node_modules',
@@ -38,9 +40,14 @@ export const build = new Command('build')
     try {
       consola.start('Copying project to temp directory...');
 
-      const cwd = process.cwd();
       const packageManager = 'pnpm';
 
+      const cwd = process.cwd();
+      const tmpCoreDir = join(tmpDir, 'core');
+      const wranglerOutDir = join(tmpCoreDir, '.dist');
+      const openNextOutDir = join(tmpCoreDir, '.open-next');
+      const bigcommerceDistDir = join(cwd, '.bigcommerce', 'dist');
+
       await cp(cwd, tmpDir, {
         recursive: true,
         force: true,
@@ -58,7 +65,7 @@ export const build = new Command('build')
       });
 
       await addDevDependency(`@opennextjs/cloudflare@${OPENNEXTJS_CLOUDFLARE_VERSION}`, {
-        cwd: join(tmpDir, 'core'),
+        cwd: tmpCoreDir,
         packageManager,
       });
 
@@ -75,12 +82,52 @@ export const build = new Command('build')
 
       consola.start('Copying templates...');
 
-      await cp(join(getModuleCliPath(), 'templates'), join(tmpDir, 'core'), {
+      await cp(join(getModuleCliPath(), 'templates'), tmpCoreDir, {
         recursive: true,
         force: true,
       });
 
       consola.success('Templates copied');
+
+      consola.start('Building project...');
+
+      await execa('pnpm', ['exec', 'opennextjs-cloudflare', 'build'], {
+        stdout: ['pipe', 'inherit'],
+        cwd: tmpCoreDir,
+      });
+
+      await execa(
+        'pnpm',
+        [
+          'dlx',
+          `wrangler@${WRANGLER_VERSION}`,
+          'deploy',
+          '--keep-vars',
+          '--outdir',
+          wranglerOutDir,
+          '--dry-run',
+        ],
+        {
+          stdout: ['pipe', 'inherit'],
+          cwd: tmpCoreDir,
+        },
+      );
+
+      consola.success('Project built');
+
+      consola.start('Copying build to project...');
+
+      await cp(wranglerOutDir, bigcommerceDistDir, {
+        recursive: true,
+        force: true,
+      });
+
+      await cp(join(openNextOutDir, 'assets'), join(bigcommerceDistDir, 'assets'), {
+        recursive: true,
+        force: true,
+      });
+
+      consola.success('Build copied to project');
     } catch (error) {
       consola.error(error);
       process.exitCode = 1;

packages/cli/tests/commands/build.spec.ts

@@ -1,6 +1,91 @@
-import { describe, expect, test } from 'vitest';
+import { Command } from 'commander';
+import consola from 'consola';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 
-import { createFilter } from '../../src/commands/build';
+import { build, createFilter } from '../../src/commands/build';
+import { program } from '../../src/program';
+
+const cleanup = vi.fn();
+
+beforeAll(() => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  vi.spyOn(process, 'exit').mockImplementation(() => null as never);
+
+  consola.wrapAll();
+
+  vi.mock('../../src/lib/mk-temp-dir', () => ({
+    mkTempDir: vi.fn(() => ['/tmp/test', cleanup]),
+  }));
+
+  vi.mock('node:fs/promises', () => ({
+    cp: vi.fn(),
+  }));
+
+  vi.mock('nypm', () => ({
+    installDependencies: vi.fn(),
+    addDevDependency: vi.fn(),
+    runScript: vi.fn(),
+  }));
+
+  vi.mock('execa', () => ({
+    execa: vi.fn(),
+  }));
+});
+
+beforeEach(() => {
+  consola.mockTypes(() => vi.fn());
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+afterAll(() => {
+  vi.restoreAllMocks();
+});
+
+test('properly configured Command instance', () => {
+  expect(build).toBeInstanceOf(Command);
+  expect(build.name()).toBe('build');
+  expect(build.options).toEqual(
+    expect.arrayContaining([expect.objectContaining({ flags: '--keep-temp-dir' })]),
+  );
+});
+
+test('does not remove temp dir if --keep-temp-dir is passed', async () => {
+  await program.parseAsync(['node', 'catalyst', 'build', '--keep-temp-dir']);
+  expect(cleanup).not.toHaveBeenCalled();
+});
+
+test('removes temp dir if --keep-temp-dir is not passed', async () => {
+  await program.parseAsync(['node', 'catalyst', 'build']);
+  expect(cleanup).toHaveBeenCalled();
+});
+
+test('successfully builds project', async () => {
+  await program.parseAsync(['node', 'catalyst', 'build']);
+
+  expect(consola.success).toHaveBeenCalledWith('Project built');
+  expect(consola.success).toHaveBeenCalledWith('Build copied to project');
+});
+
+test('handles error if cp throws during build', async () => {
+  // Dynamically mock cp for this test only
+  // eslint-disable-next-line import/dynamic-import-chunkname
+  const cpModule = await import('node:fs/promises');
+  const originalCp = cpModule.cp;
+  const cpMock = vi.fn(() => {
+    throw new Error('cp failed');
+  });
+
+  cpModule.cp = cpMock;
+
+  await program.parseAsync(['node', 'catalyst', 'build']);
+
+  expect(consola.error).toHaveBeenCalledWith(expect.any(Error));
+
+  cpModule.cp = originalCp;
+});
 
 describe('createFilter', () => {
   const ROOT = '/my/project';