refactor: [REL-11292] separate imports to allow for better tree shaking (#432)

* fix: separate imports to allow for better tree shaking

* chore: remove comment

Author: cspath1

packages/demo/src/AppWrapper.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import './App.css';
 import { useLDClient } from 'launchdarkly-react-client-sdk';
-import type { ToolbarPosition } from '@launchdarkly/toolbar';
+import type { ToolbarPosition } from '@launchdarkly/toolbar/types';
 
 interface AppWrapperProps {
   children: ReactNode;

packages/demo/src/pages/DevServerMode.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { AppWrapper } from '../AppWrapper';
-import type { ToolbarPosition } from '@launchdarkly/toolbar';
-import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar';
+import type { ToolbarPosition } from '@launchdarkly/toolbar/types';
+import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar/react';
 import { eventInterceptionPlugin } from '../plugins';
 import { useLaunchDarklyProvider } from '../hooks/useLaunchDarklyProvider';
 import { LoadingScreen } from '../components/LoadingScreen';

packages/demo/src/pages/SDKMode.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { AppWrapper } from '../AppWrapper';
 import { flagOverridePlugin, eventInterceptionPlugin } from '../plugins';
-import type { ToolbarPosition } from '@launchdarkly/toolbar';
-import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar';
+import type { ToolbarPosition } from '@launchdarkly/toolbar/types';
+import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar/react';
 import { useLaunchDarklyProvider } from '../hooks/useLaunchDarklyProvider';
 import { LoadingScreen } from '../components/LoadingScreen';
 import { MockModeIndicator } from '../components/MockModeIndicator';

packages/demo/src/plugins.ts

@@ -1,4 +1,4 @@
-import { EventInterceptionPlugin, FlagOverridePlugin } from '@launchdarkly/toolbar';
+import { EventInterceptionPlugin, FlagOverridePlugin } from '@launchdarkly/toolbar/plugins';
 
 export const flagOverridePlugin = new FlagOverridePlugin({
   storageNamespace: 'ld-demo-overrides',

packages/demo/vite.config.ts

@@ -7,6 +7,9 @@ import { dirname, resolve } from 'node:path';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const rootDir = resolve(__dirname, '..');
 const toolbarSrc = resolve(rootDir, 'toolbar', 'src', 'index.ts');
+const toolbarPluginsSrc = resolve(rootDir, 'toolbar', 'src', 'plugins.ts');
+const toolbarReactSrc = resolve(rootDir, 'toolbar', 'src', 'react.ts');
+const toolbarTypesSrc = resolve(rootDir, 'toolbar', 'src', 'types-entry.ts');
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
@@ -17,6 +20,20 @@ export default defineConfig(({ command }) => {
     resolve: {
       alias: isDev
         ? [
+            // More specific paths must come before the base path
+            {
+              find: '@launchdarkly/toolbar/plugins',
+              replacement: toolbarPluginsSrc,
+            },
+            {
+              find: '@launchdarkly/toolbar/react',
+              replacement: toolbarReactSrc,
+            },
+            {
+              find: '@launchdarkly/toolbar/types',
+              replacement: toolbarTypesSrc,
+            },
+            // Base path last (catches @launchdarkly/toolbar without subpath)
             {
               find: '@launchdarkly/toolbar',
               replacement: toolbarSrc,
@@ -33,7 +50,12 @@ export default defineConfig(({ command }) => {
       : undefined,
     optimizeDeps: isDev
       ? {
-          exclude: ['@launchdarkly/toolbar'],
+          exclude: [
+            '@launchdarkly/toolbar',
+            '@launchdarkly/toolbar/plugins',
+            '@launchdarkly/toolbar/react',
+            '@launchdarkly/toolbar/types',
+          ],
         }
       : undefined,
   };

packages/toolbar/package.json

@@ -28,6 +28,19 @@
   "module": "./dist/js/index.js",
   "types": "./dist/index.d.ts",
   "typings": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "plugins": [
+        "./dist/plugins.d.ts"
+      ],
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "types": [
+        "./dist/types-entry.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -45,6 +58,36 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./plugins": {
+      "import": {
+        "types": "./dist/plugins.d.ts",
+        "default": "./dist/js/plugins.js"
+      },
+      "require": {
+        "types": "./dist/plugins.d.ts",
+        "default": "./dist/plugins.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/js/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./types": {
+      "import": {
+        "types": "./dist/types-entry.d.ts",
+        "default": "./dist/js/types-entry.js"
+      },
+      "require": {
+        "types": "./dist/types-entry.d.ts",
+        "default": "./dist/types-entry.cjs"
+      }
     }
   },
   "scripts": {

packages/toolbar/rslib.config.ts

@@ -9,6 +9,9 @@ export default defineConfig({
   source: {
     entry: {
       index: './src/index.ts',
+      plugins: './src/plugins.ts',
+      react: './src/react.ts',
+      'types-entry': './src/types-entry.ts',
     },
     include: ['./src/**/*.ts', './src/**/*.tsx'],
     exclude: ['./src/**/*.test.*', './src/**/*.stories.*'],
@@ -27,7 +30,7 @@ export default defineConfig({
           js: 'js',
         },
         filename: {
-          js: 'index.js',
+          js: '[name].js',
         },
       },
     },
@@ -42,7 +45,7 @@ export default defineConfig({
           js: '.',
         },
         filename: {
-          js: 'index.cjs',
+          js: '[name].cjs',
         },
       },
     },

packages/toolbar/src/plugins.ts

@@ -0,0 +1,27 @@
+/**
+ * Plugin exports for the LaunchDarkly Toolbar
+ *
+ * This entry point allows importing plugins separately from the main toolbar
+ * for better bundle size optimization when using lazy loading.
+ *
+ * @example
+ * ```ts
+ * import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar/plugins';
+ *
+ * const flagOverridePlugin = new FlagOverridePlugin({
+ *   storageNamespace: 'my-app-overrides',
+ * });
+ *
+ * const eventInterceptionPlugin = new EventInterceptionPlugin({
+ *   eventCapacity: 150,
+ * });
+ * ```
+ */
+export { FlagOverridePlugin, EventInterceptionPlugin } from './types/plugins';
+
+export type {
+  FlagOverridePluginConfig,
+  EventInterceptionPluginConfig,
+  IFlagOverridePlugin,
+  IEventInterceptionPlugin,
+} from './types/plugins';

packages/toolbar/src/react.ts

@@ -0,0 +1,25 @@
+/**
+ * React-specific exports for the LaunchDarkly Toolbar
+ *
+ * This entry point provides React hooks and utilities for integrating
+ * the toolbar with React applications.
+ *
+ * @example
+ * ```tsx
+ * import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar/react';
+ * import { FlagOverridePlugin } from '@launchdarkly/toolbar/plugins';
+ *
+ * // Create plugins outside the component (only once)
+ * const flagOverridePlugin = new FlagOverridePlugin();
+ *
+ * function App() {
+ *   useLaunchDarklyToolbar({
+ *     flagOverridePlugin,
+ *   });
+ *
+ *   return <YourApp />;
+ * }
+ * ```
+ */
+export { default as useLaunchDarklyToolbar } from './react/useLaunchDarklyToolbar';
+export { default as lazyLoadToolbar } from './react/lazyLoadToolbar';

packages/toolbar/src/types-entry.ts

@@ -0,0 +1,12 @@
+/**
+ * Type-only exports for the LaunchDarkly Toolbar
+ *
+ * This entry point provides TypeScript types without any runtime code,
+ * useful for type-only imports in your application.
+ *
+ * @example
+ * ```ts
+ * import type { InitializationConfig, ToolbarConfig } from '@launchdarkly/toolbar/types';
+ * ```
+ */
+export type * from './types';