fix: try new bundling strategy

package.json

@@ -5,18 +5,18 @@
   "license": "Apache-2.0",
   "type": "module",
   "types": "dist/types/index.d.ts",
-  "main": "./dist/fxtrot-ui.cjs",
-  "module": "./dist/fxtrot-ui.mjs",
+  "main": "./dist/cjs/fxtrot-ui.cjs",
+  "module": "./dist/esm/fxtrot-ui.mjs",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/fxtrot-ui.mjs",
-      "require": "./dist/fxtrot-ui.cjs"
+      "require": "./dist/cjs/lib.cjs",
+      "import": "./dist/esm/lib.mjs"
     },
     "./tailwind.preset": {
       "types": "./dist/types/tailwind/preset.d.ts",
-      "import": "./dist/tailwind.preset.mjs",
-      "require": "./dist/tailwind.preset.cjs"
+      "require": "./dist/tailwind.preset.cjs",
+      "import": "./dist/tailwind.preset.mjs"
     },
     "./style.css": "./dist/style.css"
   },
@@ -32,7 +32,7 @@
     "build:preset": "vite build --config vite.tailwind-preset-config.mjs",
     "dev": "npm run docs:dev",
     "lint": "next lint --dir pages --dir src",
-    "typecheck": "tsc --noEmit --project ./tsconfig.without-next-modifications.json",
+    "typecheck": "tsc --noEmit",
     "docs:dev": "next dev -p 3001",
     "docs:build": "next build",
     "docs:start": "next start",
@@ -66,13 +66,15 @@
     "@radix-ui/react-visually-hidden": "^1.0.2",
     "@tw-classed/core": "^1.4.4",
     "clsx": "^1.2.1",
-    "react-keyed-flatten-children": "^1.3.0"
+    "react-keyed-flatten-children": "^1.3.0",
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
     "@stitches/react": "^1.2.8",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.1",
@@ -114,7 +116,6 @@
     "remark-gfm": "^3.0.1",
     "remark-mdx-code-meta": "^2.0.0",
     "remark-mdx-frontmatter": "^3.0.0",
-    "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4",
     "typescript-plugin-css-modules": "^5.0.1",
     "vite": "^4.3.6"

src/pages-helpers/MdxProvider.tsx

@@ -89,6 +89,8 @@ export const components = {
   ),
 };
 
-export const MdxProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+const MdxProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   return <MDXProvider components={components as any}>{children}</MDXProvider>;
 };
+
+export default MdxProvider;

src/pages-helpers/MultilineCode.tsx

@@ -29,14 +29,14 @@ export const MultilineCode = ({ code, language, fileName, lineNumber = true }: P
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({ line, key: i });
                 return (
-                  <line {...lineProps} className={clsx('table-row text-sm', lineProps.className)}>
+                  <div {...lineProps} className={clsx('table-row text-sm', lineProps.className)}>
                     {lineNumber && <span className="table-cell select-none text-end opacity-50 pr-4">{i + 1}</span>}
                     <span className="table-cell">
                       {line.map((token, key) => (
                         <span key={key} {...getTokenProps({ token, key })} />
                       ))}
                     </span>
-                  </line>
+                  </div>
                 );
               })}
             </pre>

src/pages/_app.tsx

@@ -2,11 +2,20 @@ import './globals.css';
 import localFont from 'next/font/local';
 
 import { NextSeo } from 'next-seo';
+import { lazy } from 'react';
 import { ThemeProvider } from '@fxtrot/ui';
 
-import { MdxProvider } from 'src/pages-helpers/MdxProvider';
 import type { AppProps } from 'next/dist/shared/lib/router/router';
 
+const MdxProvider = lazy(
+  () =>
+    import(
+      /*  webpackPrefetch: true */
+      /* webpackChunkName: "my-chunk-name" */
+      'src/pages-helpers/MdxProvider'
+    )
+);
+
 const Inter = localFont({
   src: '../../public/fonts/Inter-VariableFont_slnt,wght.ttf',
   fallback: ['-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif'],

tsconfig.json

@@ -18,6 +18,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "importHelpers": true,
+    "verbatimModuleSyntax": true,
     "baseUrl": ".",
     "paths": {
       "@fxtrot/ui": ["src/lib"]

tsconfig.lib.json

@@ -4,7 +4,8 @@
     "noEmit": false,
     "declaration": true,
     "outDir": "dist/types",
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "verbatimModuleSyntax": true
   },
   "include": ["src/lib", "src/types"],
   "exclude": ["node_modules"]

vite.config.mjs

@@ -4,9 +4,18 @@ import react from '@vitejs/plugin-react';
 
 import pkg from './package.json';
 
+const makeExternalPredicate = (externalArr) => {
+  if (externalArr.length === 0) {
+    return () => false;
+  }
+  const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
+  return (id) => pattern.test(id);
+};
+
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
   publicDir: false,
+  emptyOutDir: true,
   plugins: [react()],
   esbuild: {
     target: ['chrome105', 'safari16'],
@@ -18,20 +27,28 @@ export default defineConfig({
       entry: { lib: path.resolve(__dirname, './src/lib/index.ts') },
       name: pkg.name,
       formats: ['cjs', 'es'],
-      fileName: (format) => {
+      fileName: (format, entryName) => {
         switch (format) {
           case 'cjs':
-            return `fxtrot-ui.${format}`;
+            return `cjs/${entryName}.cjs`;
           case 'es':
-            return `fxtrot-ui.mjs`;
+            return `esm/${entryName}.mjs`;
           default:
-            return `fxtrot-ui.${format}.js`;
+            return `${entryName}/${format}`;
         }
       },
     },
     rollupOptions: {
-      external: [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)],
+      // external: [/node_modules/],
+      external: makeExternalPredicate([
+        // Handles both dependencies and peer dependencies so we don't have to manually maintain a list
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+      ]),
       output: {
+        chunkFileNames: '[name].[format]',
+        exports: 'named',
+        preserveModulesRoot: 'src/lib',
         preserveModules: true,
         globals: {
           'react': 'React',