bunchee 4.0.1 → 4.1.0

package/README.md

@@ -16,28 +16,24 @@
 
 Bunchee makes bundling your library into one file effortless, with zero configuration required. It is built on top of Rollup and SWC ⚡️, allowing you to focus on writing code and generating multiple module types (CommonJS, ESModules) simultaneously.
 
-## Installation
+## Quick Start
+
+### Installation
 
 ```sh
 npm install --save-dev bunchee
 ```
 
-## Usage
-
-Create your library
+### Configuration
 
+Create your library entry file and package.json.
 ```sh
 cd ./my-lib && mkdir src
 touch ./src/index.ts
 touch package.json
 ```
 
-Configure module exports
-
-[exports sugar in Node.js](https://nodejs.org/api/packages.html#exports-sugar)
-
-You can use the `exports` field to support different conditions and leverage the same functionality as other bundlers, such as webpack. The exports field allows you to define multiple conditions.
-
+Then use use the [exports field in package.json](https://nodejs.org/api/packages.html#exports-sugar) to configure different conditions and leverage the same functionality as other bundlers, such as webpack. The exports field allows you to define multiple conditions.
 ```json
 {
   "exports": {
@@ -50,85 +46,29 @@ You can use the `exports` field to support different conditions and leverage the
 }
 ```
 
-Using pure ESM package?
-
+If you want to use ESM package, change the `type` field in package.json to `module`, `bunchee` will change the output format to ESM.
 ```json
 {
   "type": "module",
-  "main": "./dist/index.mjs",
+  "exports": {
+    "import": "dist/index.mjs",
+    "require": "dist/index.cjs"
+  },
   "scripts": {
     "build": "bunchee"
   }
 }
 ```
 
-Then just run `npm run build`, or `pnpm build` / `yarn build` if you're using these package managers. The output format will based on the exports condition and also the file extension. Given an example:
+Now just run `npm run build` (or `pnpm build` / `yarn build`) if you're using these package managers, `bunchee` will find the entry files and build them.
+The output format will based on the exports condition and also the file extension. Given an example:
 
 - It's CommonJS for `require` and ESM for `import` based on the exports condition.
 - It's CommonJS for `.js` and ESM for `.mjs` based on the extension regardless the exports condition. Then for export condition like "node" you could choose the format with your extension.
 
-## Configuration
-
-`bunchee` CLI provides few options to create different bundles or generating types.
-
-### CLI Options
-
-- Output (`-o <file>`): Specify output filename.
-- Format (`-f <format>`): Set output format (default: `'esm'`).
-- External (`--external <dep,>`): Specifying extra external dependencies, by default it is the list of `dependencies` and `peerDependencies` from `package.json`. Values are separate by comma.
-- Target (`--target <target>`): Set ECMAScript target (default: `'es2015'`).
-- Runtime (`--runtime <runtime>`): Set build runtime (default: `'browser'`).
-- Environment (`--env <env,>`): Define environment variables. (default: `NODE_ENV`, separate by comma)
-- Working Directory (`--cwd <cwd>`): Set current working directory where containing `package.json`.
-- Types (`--dts`): Generate TypeScript declaration files along with assets.
-- Minify (`-m`): Compress output.
-- Watch (`-w`): Watch for source file changes.
-
-### Basic Example
-
-```sh
-cd <project-root-dir>
-
-# specifying input, output and format
-
-bunchee ./src/index.js -f cjs -o ./dist/bundle.js
-bunchee ./src/index.js -f esm -o ./dist/bundle.esm.js
-
-# build node.js library, or change target to es2019
-bunchee ./src/index.js --runtime node --target es2019
-```
-
-#### Specifying extra external dependencies
-
-If you want to mark specific dependencies as external and not include them in the bundle, use the `--external` option followed by a comma-separated list of dependency names:
-
-```sh
-bunchee --external=dependency1,dependency2,dependency3
-```
-
-Replace `dependency1`, `dependency2`, and `dependency3` with the names of the dependencies you want to exclude from the bundle.
-
-#### Bundling everything without external dependencies
-
-To bundle your library without external dependencies, use the `--no-external` option:
-
-```sh
-bunchee --no-external
-```
-
-This will include all dependencies within your output bundle.
-
-### Environment Variables
-
-To pass environment variables to your bundled code, use the --env option followed by a comma-separated list of environment variable names:
-
-```bash
-bunchee --env=ENV1,ENV2,ENV3
-```
-
-Replace `ENV1`, `ENV2`, and `ENV3` with the names of the environment variables you want to include in your bundled code. These environment variables will be inlined during the bundling process.
+## Usage
 
-### Entry Files Convention
+### File Conventions
 
 While `exports` field is becoming the standard of exporting in node.js, bunchee also supports to build multiple exports all in one command.
 
@@ -169,7 +109,7 @@ Then you need to add two entry files `index.ts` and `lite.ts` in project root di
 
 It will also look up for `index.<ext>` file under the directory having the name of the export path. For example, if you have `"./lite": "./dist/lite.js"` in exports field, then it will look up for `./lite/index.js` as the entry file as well.
 
-### Use Exports Conventions
+### Multiple Runtime
 
 For exports condition like `react-native`, `react-server` and `edge-light` as they're special platforms, they could have different exports or different code conditions. In this case bunchee provides an override input source file convention if you want to build them as different code bundle.
 
@@ -185,25 +125,8 @@ For instance:
 }
 ```
 
-You can use `index.<export-type>.<ext>` to override the input source file for specific export name. Or using `<export-path>/index.<export-type>.<ext>` also works. Such as:
-
-```
-|- src/
-  |- index/.ts
-  |- index.react-server.ts
-  |- index.edge-light.ts
-```
-
-This will match the export name `"react-server"` and `"edge-light"` then use the corresponding input source file to build the bundle.
-
-#### Package lint
-
-`bunchee` has support for checking the package bundles are matched with package exports configuration.
-
-
 ### Executables
 
-
 To build executable files with the `bin` field in package.json, `bunchee` requires you to create the `bin` directory under `src` directory. The source file matching will be same as the entry files convention.
 
 For example:
@@ -244,6 +167,87 @@ This will match the `bin` field in package.json as:
 
 > Note: For multiple `bin` files, the filename should match the key name in the `bin` field.
 
+
+### Server Components
+
+`bunchee` supports to build server components and server actions with library directives like `"use client"` or `"use server"`. It will generate the corresponding chunks for client and server that scope the client and server boundaries properly.
+Then when the library is integrated to an app such as Next.js, app bundler can transform the client components and server actions correctly and maximum the benefits.
+
+If you're using `"use client"` or `"use server"` in entry file, then it will be preserved on top and the dist file of that entry will become a client component.
+If you're using `"use client"` or `"use server"` in a file that used as a dependency for an entry, then that file containing directives be split into a separate chunk and hoist the directives to the top of the chunk.
+
+### CLI
+
+#### CLI Options
+
+`bunchee` CLI provides few options to create different bundles or generating types.
+
+- Output (`-o <file>`): Specify output filename.
+- Format (`-f <format>`): Set output format (default: `'esm'`).
+- External (`--external <dep,>`): Specifying extra external dependencies, by default it is the list of `dependencies` and `peerDependencies` from `package.json`. Values are separate by comma.
+- Target (`--target <target>`): Set ECMAScript target (default: `'es2015'`).
+- Runtime (`--runtime <runtime>`): Set build runtime (default: `'browser'`).
+- Environment (`--env <env,>`): Define environment variables. (default: `NODE_ENV`, separate by comma)
+- Working Directory (`--cwd <cwd>`): Set current working directory where containing `package.json`.
+- Types (`--dts`): Generate TypeScript declaration files along with assets.
+- Minify (`-m`): Compress output.
+- Watch (`-w`): Watch for source file changes.
+
+```sh
+cd <project-root-dir>
+
+# specifying input, output and format
+
+bunchee ./src/index.js -f cjs -o ./dist/bundle.js
+bunchee ./src/index.js -f esm -o ./dist/bundle.esm.js
+
+# build node.js library, or change target to es2019
+bunchee ./src/index.js --runtime node --target es2019
+```
+
+#### Specifying extra external dependencies
+
+If you want to mark specific dependencies as external and not include them in the bundle, use the `--external` option followed by a comma-separated list of dependency names:
+
+```sh
+bunchee --external=dependency1,dependency2,dependency3
+```
+
+Replace `dependency1`, `dependency2`, and `dependency3` with the names of the dependencies you want to exclude from the bundle.
+
+#### Bundling everything without external dependencies
+
+To bundle your library without external dependencies, use the `--no-external` option:
+
+```sh
+bunchee --no-external
+```
+
+This will include all dependencies within your output bundle.
+
+### Environment Variables
+
+To pass environment variables to your bundled code, use the --env option followed by a comma-separated list of environment variable names:
+
+```bash
+bunchee --env=ENV1,ENV2,ENV3
+```
+
+Replace `ENV1`, `ENV2`, and `ENV3` with the names of the environment variables you want to include in your bundled code. These environment variables will be inlined during the bundling process.
+
+
+You can use `index.<export-type>.<ext>` to override the input source file for specific export name. Or using `<export-path>/index.<export-type>.<ext>` also works. Such as:
+
+```
+|- src/
+  |- index/.ts
+  |- index.react-server.ts
+  |- index.edge-light.ts
+```
+
+This will match the export name `"react-server"` and `"edge-light"` then use the corresponding input source file to build the bundle.
+
+
 ### Wildcard Exports
 
 Bunchee implements the Node.js feature of using the asterisk `*` as a wildcard to match the exportable entry files.
@@ -389,6 +393,11 @@ Bunchee offers a convenient watch mode for rebuilding your library whenever chan
 
 If you specify `target` option in `tsconfig.json`, then you don't have to pass it again through CLI.
 
+#### Package lint
+
+`bunchee` has support for checking the package bundles are matched with package exports configuration.
+
+
 ### License
 
 MIT

package/dist/bin/cli.js

@@ -54,7 +54,7 @@ async function fileExists(filePath) {
     }
 }
 
-var version = "4.0.1";
+var version = "4.1.0";
 
 const helpMessage = `
 Usage: bunchee [options]

package/dist/index.js

@@ -193,15 +193,40 @@ function rawContent({ exclude }) {
         '**/*.txt'
     ], exclude);
     return {
-        name: "string",
+        name: 'string',
         transform (code, id) {
             if (filter(id)) {
                 return {
-                    code: `export default ${JSON.stringify(code)}`,
-                    map: undefined
+                    code: `const data = ${JSON.stringify(code)};\nexport default data;`,
+                    map: null
+                };
+            }
+            return null;
+        }
+    };
+}
+
+function prependDirectives() {
+    return {
+        name: 'prependDirective',
+        transform: {
+            order: 'post',
+            handler (code, id) {
+                var _moduleInfo_meta;
+                const moduleInfo = this.getModuleInfo(id);
+                if (moduleInfo == null ? void 0 : (_moduleInfo_meta = moduleInfo.meta) == null ? void 0 : _moduleInfo_meta.preserveDirectives) {
+                    const firstDirective = moduleInfo.meta.preserveDirectives.directives[0];
+                    if (firstDirective) {
+                        const directive = firstDirective.value;
+                        const directiveCode = `'${directive}';`;
+                        return directiveCode + '\n' + code;
+                    }
+                }
+                return {
+                    code,
+                    map: null
                 };
             }
-            return undefined;
         }
     };
 }
@@ -660,6 +685,7 @@ async function buildInputConfig(entry, pkg, options, cwd, { tsConfigPath, tsComp
             exclude: /node_modules/
         }),
         preserveDirectives__default.default(),
+        prependDirectives(),
         replace__default.default({
             values: getBuildEnv(options.env || []),
             preventAssignment: true
@@ -727,6 +753,22 @@ function hasEsmExport(exportPaths, tsCompilerOptions) {
     }
     return Boolean(hasEsm || (tsCompilerOptions == null ? void 0 : tsCompilerOptions.esModuleInterop));
 }
+const splitChunks = (id, ctx)=>{
+    const moduleInfo = ctx.getModuleInfo(id);
+    const moduleMeta = moduleInfo == null ? void 0 : moduleInfo.meta;
+    if (!moduleInfo || !moduleMeta) {
+        return;
+    }
+    const directives = (moduleMeta.preserveDirectives || {
+        directives: []
+    }).directives.map((d)=>d.replace(/^use /, '')).filter((d)=>d !== 'strict');
+    const moduleLayer = directives[0];
+    if (moduleLayer && !moduleMeta.isEntry) {
+        const chunkName = path__default.default.basename(id, path__default.default.extname(id));
+        return `${chunkName}-${moduleLayer}`;
+    }
+    return;
+};
 function buildOutputConfigs(pkg, exportPaths, options, exportCondition, cwd, { tsCompilerOptions }, dts) {
     const { format } = options;
     // Add esm mark and interop helper if esm export is detected
@@ -737,16 +779,14 @@ function buildOutputConfigs(pkg, exportPaths, options, exportCondition, cwd, { t
     const name = filenameWithoutExtension(file);
     // TODO: simplify dts file name detection
     const dtsFile = file ? file : exportCondition.export['types'] ? path.resolve(cwd, exportCondition.export['types']) : path.resolve(dtsDir, (exportCondition.name === '.' ? 'index' : exportCondition.name) + '.d.ts');
-    // If there's dts file, use `output.file`
-    const dtsPathConfig = dtsFile ? {
-        file: dtsFile
-    } : {
-        dir: dtsDir
+    const dtsPathConfig = {
+        dir: dtsFile ? path.dirname(dtsFile) : dtsDir
     };
+    const outputFile = dtsFile || file;
     return {
         name: pkg.name || name,
         ...dts ? dtsPathConfig : {
-            file: file
+            dir: path.dirname(outputFile)
         },
         format,
         exports: 'named',
@@ -754,7 +794,10 @@ function buildOutputConfigs(pkg, exportPaths, options, exportCondition, cwd, { t
         interop: 'auto',
         freeze: false,
         strict: false,
-        sourcemap: options.sourcemap
+        sourcemap: options.sourcemap,
+        manualChunks: splitChunks,
+        chunkFileNames: '[name]-[hash].js',
+        entryFileNames: path.basename(outputFile)
     };
 }
 // build configs for each entry from package exports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bunchee",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "zero config bundler for js/ts/jsx libraries",
   "bin": "./dist/bin/cli.js",
   "main": "./dist/index.js",
@@ -8,6 +8,7 @@
   "scripts": {
     "test": "jest --env node",
     "test:update": "TEST_UPDATE_SNAPSHOT=1 pnpm test",
+    "test:post": "POST_BUILD=1 pnpm jest test/compile.test.ts test/integration.test.ts",
     "clean": "rm -rf ./dist",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "pnpm clean && pnpm build && chmod +x ./dist/bin/cli.js && pnpm test",
@@ -59,7 +60,7 @@
     "rollup": "^4.6.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-swc3": "^0.11.0",
-    "rollup-preserve-directives": "^1.0.1",
+    "rollup-preserve-directives": "^1.1.0",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {