Updated imports for better tree shaking support

Also updated folder structures a bit

Author: WillsonHaw

.changeset/fast-mirrors-hug.md

@@ -0,0 +1,5 @@
+---
+"@plexinc/react-lightning-components": patch
+---
+
+Updated imports for better tree shaking

packages/react-lightning-components/package.json

@@ -19,7 +19,11 @@
     "dist"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./layout/Row": "./src/exports/layout/Row.tsx",
+    "./layout/Column": "./src/exports/layout/Column.tsx",
+    "./text/StyledText": "./src/exports/text/StyledText.tsx",
+    "./util/FPSMonitor": "./src/exports/util/FPSMonitor.tsx"
   },
   "publishConfig": {
     "provenance": true,
@@ -30,6 +34,30 @@
         "require": "./dist/cjs/index.js",
         "default": "./dist/cjs/index.js",
         "types": "./dist/types/index.d.ts"
+      },
+      "./layout/Row": {
+        "import": "./dist/esm/layout/Row.mjs",
+        "require": "./dist/cjs/layout/Row.js",
+        "default": "./dist/cjs/layout/Row.js",
+        "types": "./dist/types/layout/Row.d.ts"
+      },
+      "./layout/Column": {
+        "import": "./dist/esm/layout/Column.mjs",
+        "require": "./dist/cjs/layout/Column.js",
+        "default": "./dist/cjs/layout/Column.js",
+        "types": "./dist/types/layout/Column.d.ts"
+      },
+      "./text/StyledText": {
+        "import": "./dist/esm/text/StyledText.mjs",
+        "require": "./dist/cjs/text/StyledText.js",
+        "default": "./dist/cjs/text/StyledText.js",
+        "types": "./dist/types/text/StyledText.d.ts"
+      },
+      "./util/FPSMonitor": {
+        "import": "./dist/esm/util/FPSMonitor.mjs",
+        "require": "./dist/cjs/util/FPSMonitor.js",
+        "default": "./dist/cjs/util/FPSMonitor.js",
+        "types": "./dist/types/util/FPSMonitor.d.ts"
       }
     }
   },

packages/react-lightning-components/rollup.config.mjs

@@ -1,6 +1,33 @@
+import { dirname } from 'node:path';
 import createRollupConfig from '@repo/rollup-config';
+import { globSync } from 'glob';
 
-export default createRollupConfig({
-  useClient: true,
-  external: ['@plexinc/react-lightning', 'react', 'react/jsx-runtime'],
+const exportFiles = globSync('./src/exports/*/*.{tsx,ts}');
+
+const configs = exportFiles.map((file) => {
+  const outputDir = dirname(file.replace('src/exports', ''));
+
+  return createRollupConfig({
+    useClient: true,
+    input: file,
+    output: [
+      {
+        dir: `./dist/esm${outputDir}`,
+        entryFileNames: '[name].mjs',
+        assetFileNames: ({ name }) => name?.replace(/^src\//, '') ?? '',
+        format: 'esm',
+        exports: 'auto',
+      },
+      {
+        dir: `./dist/cjs${outputDir}`,
+        entryFileNames: '[name].js',
+        assetFileNames: ({ name }) => name?.replace(/^src\//, '') ?? '',
+        format: 'cjs',
+        exports: 'auto',
+      },
+    ],
+    external: ['@plexinc/react-lightning', 'react', 'react/jsx-runtime'],
+  });
 });
+
+export default configs;

packages/react-lightning-components/src/components/Column.tsx renamed to packages/react-lightning-components/src/exports/layout/Column.tsx

@@ -6,7 +6,7 @@ import {
 } from '@plexinc/react-lightning';
 import { forwardRef } from 'react';
 
-interface Props extends LightningViewElementProps {
+export interface ColumnProps extends LightningViewElementProps {
   focusable?: boolean;
   focusedStyle?: LightningViewElementStyle;
   autoFocus?: boolean;
@@ -16,7 +16,7 @@ interface Props extends LightningViewElementProps {
   trapFocusLeft?: boolean;
 }
 
-export const Column = forwardRef<LightningViewElement, Props>(
+const Column = forwardRef<LightningViewElement, ColumnProps>(
   (
     {
       style,
@@ -59,3 +59,5 @@ export const Column = forwardRef<LightningViewElement, Props>(
 );
 
 Column.displayName = 'Column';
+
+export default Column;

packages/react-lightning-components/src/components/Row.tsx renamed to packages/react-lightning-components/src/exports/layout/Row.tsx

@@ -6,7 +6,7 @@ import {
 } from '@plexinc/react-lightning';
 import { forwardRef } from 'react';
 
-interface Props extends LightningViewElementProps {
+export interface RowProps extends LightningViewElementProps {
   focusable?: boolean;
   focusedStyle?: LightningViewElementStyle;
   autoFocus?: boolean;
@@ -16,7 +16,7 @@ interface Props extends LightningViewElementProps {
   trapFocusLeft?: boolean;
 }
 
-export const Row = forwardRef<LightningViewElement, Props>(
+const Row = forwardRef<LightningViewElement, RowProps>(
   (
     {
       style,
@@ -59,3 +59,5 @@ export const Row = forwardRef<LightningViewElement, Props>(
 );
 
 Row.displayName = 'Row';
+
+export default Row;

packages/react-lightning-components/src/components/StyledText.tsx renamed to packages/react-lightning-components/src/exports/text/StyledText.tsx

@@ -21,7 +21,7 @@ const BASE_STYLE = {
 
 let wordWrapErrorShown = false;
 
-type StyledTextProps = LightningViewElementProps & {
+export type StyledTextProps = LightningViewElementProps & {
   /**
    * Input text with placeholders and custom tags.
    */
@@ -227,4 +227,4 @@ const StyledText: React.FC<StyledTextProps> = ({
 
 StyledText.displayName = 'StyledText';
 
-export { StyledText };
+export default StyledText;

packages/react-lightning-components/src/components/FPSMonitor.tsx renamed to packages/react-lightning-components/src/exports/util/FPSMonitor.tsx

@@ -4,17 +4,25 @@ import {
 } from '@plexinc/react-lightning';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
-interface Props {
+export interface FPSMonitorProps {
+  prefix?: string;
   style?: LightningTextElementStyle;
+  highColor?: number;
+  mediumColor?: number;
+  lowColor?: number;
+  mediumCutoff?: number;
+  lowCutoff?: number;
 }
 
-const HIGH_COLOR = 0x00ff00ff;
-const MEDIUM_COLOR = 0xffff00ff;
-const MEDIUM_CUTOFF = 30;
-const LOW_COLOR = 0xff0000ff;
-const LOW_CUTOFF = 15;
-
-const FPSMonitor = ({ style }: Props) => {
+const FPSMonitor = ({
+  style,
+  prefix = 'FPS:',
+  highColor = 0x00ff00ff,
+  mediumColor = 0xffff00ff,
+  mediumCutoff = 30,
+  lowColor = 0xff0000ff,
+  lowCutoff = 15,
+}: FPSMonitorProps) => {
   const lngContext = useContext(LightningRootContext);
   const [fps, setFps] = useState(0);
   const [color, setColor] = useState(0);
@@ -23,15 +31,15 @@ const FPSMonitor = ({ style }: Props) => {
     (_: unknown, { fps: value }: { fps: number }) => {
       setFps(value);
 
-      if (value > MEDIUM_CUTOFF) {
-        setColor(HIGH_COLOR);
-      } else if (value > LOW_CUTOFF) {
-        setColor(MEDIUM_COLOR);
+      if (value > mediumCutoff) {
+        setColor(highColor);
+      } else if (value > lowCutoff) {
+        setColor(mediumColor);
       } else {
-        setColor(LOW_COLOR);
+        setColor(lowColor);
       }
     },
-    [],
+    [highColor, mediumColor, mediumCutoff, lowColor, lowCutoff],
   );
 
   useEffect(() => {
@@ -46,17 +54,16 @@ const FPSMonitor = ({ style }: Props) => {
         color,
         display: 'flex',
         fontSize: 20,
-        mountX: 1,
         position: 'absolute',
-        x: 1900,
-        y: 20,
         zIndex: 9999,
         ...style,
       }}
     >
-      FPS: {fps}
+      {prefix} {fps}
     </lng-text>
   );
 };
 
-export { FPSMonitor };
+FPSMonitor.displayName = 'FPSMonitor';
+
+export default FPSMonitor;

packages/react-lightning-components/src/index.ts

@@ -1,4 +1,4 @@
-export { Column } from './components/Column';
-export { FPSMonitor } from './components/FPSMonitor';
-export { Row } from './components/Row';
-export { StyledText } from './components/StyledText';
+export { default as Column } from './exports/layout/Column';
+export { default as Row } from './exports/layout/Row';
+export { default as StyledText } from './exports/text/StyledText';
+export { default as FPSMonitor } from './exports/util/FPSMonitor';

packages/rollup-config/index.js

@@ -77,6 +77,7 @@ export default ({
   input = ['./src/index.ts'],
   external = [],
   options = {},
+  output,
   plugins = [],
 } = {}) => {
   /**
@@ -85,7 +86,7 @@ export default ({
   const commonOptions = {
     ...options,
     input,
-    output: [
+    output: output ?? [
       {
         dir: './dist/esm',
         entryFileNames: '[name].mjs',