Fix builds once again

Using esModule interop for rollup caused some packages like React to import incorrectly

Author: WillsonHaw

.changeset/calm-teeth-take.md

@@ -0,0 +1,19 @@
+---
+"@plexinc/react-native-lightning": patch
+"@plexinc/react-lightning-plugin-css-transform": patch
+"@plexinc/react-lightning-example": patch
+"@plexinc/react-lightning-plugin-flexbox": patch
+"@repo/rollup-config": patch
+"@plexinc/react-lightning-storybook": patch
+"@plexinc/react-native-lightning-example": patch
+"@plexinc/react-lightning-plugin-devtools": patch
+"@plexinc/react-lightning-plugin-flexbox-lite": patch
+"@plexinc/react-lightning-plugin-reanimated": patch
+"@plexinc/react-lightning": patch
+"@plexinc/react-lightning-components": patch
+"@plexinc/vite-plugin-msdf-fontgen": patch
+"@plexinc/vite-plugin-react-native-lightning": patch
+"@plexinc/vite-plugin-react-reanimated-lightning": patch
+---
+
+Fixing cjs builds pt.2

apps/react-lightning-example/src/index.tsx

@@ -5,7 +5,7 @@ import {
   createRoot as createRootLng,
 } from '@plexinc/react-lightning';
 import devtools from '@plexinc/react-lightning-plugin-devtools/plugin';
-import flexbox from '@plexinc/react-lightning-plugin-flexbox';
+import { plugin as flexPlugin } from '@plexinc/react-lightning-plugin-flexbox';
 import { createRoot as createRootDom } from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { keyMap } from './keyMap';
@@ -78,7 +78,7 @@ const options: RenderOptions = {
     }),
   ],
   enableContextSpy: true,
-  plugins: [flexbox(), devtools()],
+  plugins: [flexPlugin(), devtools()],
   effects: {
     Noise: NoiseEffect,
     StaticAlpha: StaticAlphaEffect,

apps/storybook/src/components/StorybookDecorator.tsx

@@ -1,6 +1,6 @@
 import { SdfTrFontFace } from '@lightningjs/renderer';
 import { Canvas, type RenderOptions } from '@plexinc/react-lightning';
-import flexbox from '@plexinc/react-lightning-plugin-flexbox';
+import { plugin as flexPlugin } from '@plexinc/react-lightning-plugin-flexbox';
 import { useMemo } from 'react';
 import { keyMap } from '../../keyMap';
 import { DefaultStoryHeight, DefaultStoryWidth } from '../helpers/constants';
@@ -27,7 +27,7 @@ export function StorybookDecorator({ story: Story, canvasOptions }: Props) {
           stage,
         }),
       ],
-      plugins: [flexbox()],
+      plugins: [flexPlugin()],
       ...canvasOptions,
     }),
     [canvasOptions],

packages/plugin-css-transform/src/index.ts

@@ -9,7 +9,7 @@ export { flattenStyles } from './utils/flattenStyles';
 export { parseTransform } from './utils/parseTransform';
 export * from './types';
 
-export default function plugin(): Plugin {
+export function plugin(): Plugin {
   return {
     transformProps(_instance, props) {
       if (!('style' in props)) {

packages/plugin-flexbox/src/index.ts

@@ -12,9 +12,7 @@ import { isFlexStyleProp } from './isFlexStyleProp';
 import type { YogaOptions } from './yoga';
 import Yoga, { createNode, init } from './yoga';
 
-export default function flexPlugin(
-  yogaOptions?: YogaOptions,
-): Plugin<LightningElement> {
+export function plugin(yogaOptions?: YogaOptions): Plugin<LightningElement> {
   let _isRenderQueued = false;
   let _rootElement: LightningElement | null = null;
   let _queueTimeout: number | null = null;

packages/react-native-lightning/src/exports/Platform.ts

@@ -2,6 +2,7 @@ import type { PlatformOSType } from 'react-native';
 
 export const OS = 'web';
 export const isTV = true;
+export const isPad = false;
 export const isLightning = true;
 export const isTesting = true;
 export const Version = '0.1.0';

packages/react-native-lightning/src/render/AppRegistry.ts

@@ -3,8 +3,8 @@ import {
   type RenderOptions,
   createRoot,
 } from '@plexinc/react-lightning';
-import cssPlugin from '@plexinc/react-lightning-plugin-css-transform';
-import flexboxPlugin from '@plexinc/react-lightning-plugin-flexbox';
+import { plugin as cssPlugin } from '@plexinc/react-lightning-plugin-css-transform';
+import { plugin as flexboxPlugin } from '@plexinc/react-lightning-plugin-flexbox';
 import type { ComponentProvider } from 'react-native';
 import { cssClassNameTransformPlugin } from '../plugins/cssClassNameTransformPlugin';
 import { domPolyfillsPlugin } from '../plugins/domPolyfillsPlugin';

packages/rollup-config/index.js

@@ -9,7 +9,7 @@ import swc from 'rollup-plugin-swc3';
 export default ({
   useClient = false,
   preserveModules = false,
-  outputExports = 'named',
+  outputExports = 'auto',
   input = ['./src/index.ts'],
   external = [],
   options = {},
@@ -37,7 +37,6 @@ export default ({
         },
         format: 'cjs',
         exports: outputExports,
-        interop: 'esModule',
       },
     ],
     external,