preserver file structure and names

examples/app-directory/src/app/page.tsx

@@ -4,12 +4,12 @@ import Image from 'next/image';
 import { Inter } from 'next/font/google';
 import styles from './page.module.css';
 import Link from 'next/link';
-import { Logger } from 'next-axiom';
+import { useLogger } from 'next-axiom';
 
 const inter = Inter({ subsets: ['latin'] });
 
 function Home() {
-  const logger = new Logger();
+  const logger = useLogger()
 
   logger.info('Hello from client', { foo: 'bar' });
 

package.json

@@ -45,13 +45,14 @@
     "jest": "~29.1",
     "jest-config": "~29.1",
     "jest-environment-jsdom": "~29.1",
+    "next-axiom-core": "workspace:*",
     "prettier": "2.6.2",
+    "rollup-plugin-preserve-directives": "^0.2.0",
     "ts-jest": "~29.1",
     "ts-node": "^10.8.0",
     "turbo": "^1.9.9",
-    "typescript": "^4.6.4",
-    "vite": "^4.3.9",
-    "next-axiom-core": "workspace:*"
+    "typescript": "latest",
+    "vite": "^4.3.9"
   },
   "workspaces": [
     "packages/*",

packages/next-axiom/package.json

@@ -11,8 +11,8 @@
   "engines": {
     "node": ">=16"
   },
-  "main": "dist/cjs/next-axiom.js",
-  "module": "dist/es/next-axiom.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "types": "dist/types/index.d.ts",
   "files": ["dist"],
   "scripts": {
@@ -38,15 +38,19 @@
     "url": "https://github.com/axiomhq/next-axiom/issues"
   },
   "homepage": "https://github.com/axiomhq/next-axiom#readme",
+  "dependencies": {
+    "whatwg-fetch": "^3.6.2"
+  },
   "peerDependencies": {
     "next": ">=13.4",
     "react": ">=18.0.0"
   },
   "exports": {
     ".": {
-      "import": "./dist/es/next-axiom.js",
-      "require": "./dist/cjs/next-axiom.js",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/es/index.js",
       "types": "./dist/types/index.d.ts"
-    }
+    } 
   }
-}
+}

packages/next-axiom/src/hooks.ts

@@ -9,6 +9,7 @@ export function useReportWebVitals() {
   useNextReportWebVitals((metric) => reportWebVitalsWithPath(metric, path));
 }
 
+// FIXME: Provide request data and source
 export function useLogger(config: LoggerConfig = {}): Logger {
   const path = usePathname();
   useEffect(() => {
@@ -25,5 +26,5 @@ export function useLogger(config: LoggerConfig = {}): Logger {
   config.args.path = path;
 
   const logger = new Logger(config);
-  return logger; // FIXME: Provide request data and source
+  return logger;
 }

packages/next-axiom/tsconfig.json

@@ -7,7 +7,7 @@
     "sourceMap": true,
     "strict": true,
     "composite": true,
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

packages/next-axiom/vite.config.ts

@@ -1,31 +1,47 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-
+import preserveDirectives from "rollup-plugin-preserve-directives";
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
+    // to preserve the 'use client' directive in the generated code
+    // this only works when build.rollupOptions.output.preserveModules is true
+    preserveDirectives(),
   ],
   define: {
     'NEXT_AXIOM_VERSION': process.env.npm_package_version,
   },
   optimizeDeps: {
     include: ['next-axiom-core'],
   },
+  esbuild: {
+    minifyIdentifiers: false,
+    keepNames: true,
+  },
   build: {
     target: 'esnext',
     lib: {
       entry: 'src/index.ts',
-      name: 'next-axiom',
       formats: ['es', 'cjs'],
-      fileName: (format) => `${format}/next-axiom.js`
+      fileName: (format, entryName) => {
+        // copy the shared package to core instead of internal/next-axiom-core/src
+        const entry = entryName.replace('internal/next-axiom-core/src/', 'core/')
+        return `${format}/${entry}.js`
+      }
     },
     rollupOptions: {
-      external: (id) => id.includes('node_modules')
+      external: id => {
+        return !(path.isAbsolute(id) || id.startsWith(".") || id === 'next-axiom-core')
+      },
+      output: {
+        exports: 'named',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        sourcemap: true,
+      }
     },
-    commonjsOptions: {
-      include: [/next-axiom-core/, /node_modules/],
-    }
   }
 })

packages/next12-axiom/package.json

@@ -11,8 +11,8 @@
   "engines": {
     "node": ">=16"
   },
-  "main": "dist/es/next12-axiom.js",
-  "module": "dist/es/next12-axiom.js",
+  "main": "dist/es/index.js",
+  "module": "dist/es/index.js",
   "types": "dist/types/index.d.ts",
   "files": ["dist"],
   "scripts": {
@@ -43,8 +43,8 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/es/next12-axiom.js",
-      "require": "./dist/umd/next12-axiom.js",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js",
       "types": "./dist/types/index.d.ts"
     }
   }

packages/next12-axiom/vite.config.ts

@@ -1,10 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import preserveDirectives from "rollup-plugin-preserve-directives";
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    react()
+    react(),
+    // to preserve the 'use client' directive in the generated code
+    // this only works when build.rollupOptions.output.preserveModules is true
+    preserveDirectives(),
   ],
   define: {
     'NEXT_AXIOM_VERSION': process.env.npm_package_version,
@@ -17,14 +22,21 @@ export default defineConfig({
     lib: {
       entry: 'src/index.ts',
       name: 'next12-axiom',
-      formats: ['es', 'umd'],
-      fileName: (format) => `${format}/next12-axiom.js`
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => {
+        // copy the shared package to core instead of internal/next-axiom-core/src
+        const entry = entryName.replace('internal/next-axiom-core/src/', 'core/')
+        return `${format}/${entry}.js`
+      }
     },
     rollupOptions: {
-      external: (id) => id.includes('node_modules')
-    },
-    commonjsOptions: {
-      include: [/next-axiom-core/, /node_modules/],
+      external: id => {
+        return !(path.isAbsolute(id) || id.startsWith(".") || id === 'next-axiom-core')
+      },
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      }
     }
   }
 })