fix: use react runtime core to reduce bundle

Upgrades to the latest @makeswift/runtime version, which includes a new
ReactRuntimeCore that does not include dependencies for builtin components.
We now manually register the builtins we want, omitting registrations for
components that are intentionally omitted or overridden in Catalyst.

Author: arvinpoddar

.changeset/dry-views-peel.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-makeswift": patch
+---
+
+Switch to using `ReactRuntimeCore` instead of `ReactRuntime`, avoiding the bundling of unused dependencies from some Makeswift builtin components. Also bumps to latest `@makeswift/runtime`.

core/lib/makeswift/components.ts

@@ -14,37 +14,3 @@ import './components/site-header/register';
 import './components/site-theme/register';
 import './components/slideshow/register';
 import './components/sticky-sidebar/register';
-
-import { MakeswiftComponentType } from '@makeswift/runtime';
-
-import { runtime } from './runtime';
-
-// Hide some builtin Makeswift components
-
-runtime.registerComponent(() => null, {
-  type: MakeswiftComponentType.Carousel,
-  label: 'Carousel (hidden)',
-  hidden: true,
-  props: {},
-});
-
-runtime.registerComponent(() => null, {
-  type: MakeswiftComponentType.Countdown,
-  label: 'Countdown (hidden)',
-  hidden: true,
-  props: {},
-});
-
-runtime.registerComponent(() => null, {
-  type: MakeswiftComponentType.Form,
-  label: 'Form (hidden)',
-  hidden: true,
-  props: {},
-});
-
-runtime.registerComponent(() => null, {
-  type: MakeswiftComponentType.Navigation,
-  label: 'Navigation (hidden)',
-  hidden: true,
-  props: {},
-});

core/lib/makeswift/components/button-link/register.ts

@@ -1,5 +1,5 @@
-import { MakeswiftComponentType } from '@makeswift/runtime';
 import { Link, Select, Style, TextInput } from '@makeswift/runtime/controls';
+import { MakeswiftComponentType } from '@makeswift/runtime/react/builtins';
 
 import { runtime } from '~/lib/makeswift/runtime';
 

core/lib/makeswift/runtime.ts

@@ -1,10 +1,34 @@
-import { ReactRuntime } from '@makeswift/runtime/react';
+import { registerBoxComponent } from '@makeswift/runtime/react/builtins/box';
+import { registerDividerComponent } from '@makeswift/runtime/react/builtins/divider';
+import { registerEmbedComponent } from '@makeswift/runtime/react/builtins/embed';
+import { registerImageComponent } from '@makeswift/runtime/react/builtins/image';
+import { registerRootComponent } from '@makeswift/runtime/react/builtins/root';
+import { registerSlotComponent } from '@makeswift/runtime/react/builtins/slot';
+import { registerSocialLinksComponent } from '@makeswift/runtime/react/builtins/social-links';
+import { registerTextComponent } from '@makeswift/runtime/react/builtins/text';
+import { registerVideoComponent } from '@makeswift/runtime/react/builtins/video';
+import { ReactRuntimeCore } from '@makeswift/runtime/react/core';
 
-export const runtime = new ReactRuntime({
+const runtime = new ReactRuntimeCore({
   breakpoints: {
     small: { width: 640, viewport: 390, label: 'Small' },
     medium: { width: 768, viewport: 765, label: 'Medium' },
     large: { width: 1024, viewport: 1000, label: 'Large' },
     screen: { width: 1280, label: 'XL' },
   },
 });
+
+// Only register necessary built-in components. Omitted components are:
+// Navigation, Button, Form, Carousel, Countdown
+
+registerRootComponent(runtime);
+registerSlotComponent(runtime);
+registerBoxComponent(runtime);
+registerTextComponent(runtime);
+registerImageComponent(runtime);
+registerDividerComponent(runtime);
+registerEmbedComponent(runtime);
+registerSocialLinksComponent(runtime);
+registerVideoComponent(runtime);
+
+export { runtime };

core/package.json

@@ -17,7 +17,7 @@
     "@conform-to/react": "^1.6.1",
     "@conform-to/zod": "^1.6.1",
     "@icons-pack/react-simple-icons": "^11.2.0",
-    "@makeswift/runtime": "^0.25.0",
+    "@makeswift/runtime": "^0.26.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",