Merge pull request #2628 from bigcommerce/arvin/use-lightweight-react-core-runtime

fix: use react runtime core to reduce bundle

Author: chanceaclark

.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

@@ -18,7 +18,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",