feat: generate bundled ESM module

closes #619
tauri-apps · Sep 17, 2024 · a20acbc · a20acbc
1 parent 0cb0f10
commit a20acbc
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/.changes/esm-bundled.md b/.changes/esm-bundled.md
@@ -0,0 +1,5 @@
+---
+"meilisearch-docsearch": "patch"
+---
+
+Publish `index.bundled.esm.js` file which is an ESM bundled verion of the package.
diff --git a/README.md b/README.md
@@ -109,6 +109,20 @@ The package also contains a browser bundle and the necessary styles that could b
    </script>
    ```
 
+   alternatively you can import the ESM module when using `<script type="module">`
+
+   ```html
+   <script type="module" async>
+     import { docsearch } from "https://unpkg.com/meilisearch-docsearch@latest/dist/index.bundled.esm.js";
+     docsearch({
+       container: "#docsearch",
+       host: "YOUR_HOST_URL",
+       apiKey: "YOUR_SEARCH_API_KEY",
+       indexUid: "YOUR_INDEX_UID",
+     });
+   </script>
+   ```
+
 3. import styles
 
    ```html

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -8,6 +8,7 @@ const VERSION = JSON.parse(readFileSync("package.json", "utf-8")).version;
 export default defineConfig(
   (config) =>
     [
+      // ESM and CJS builds published to NPM
       {
         entry: ["src/index.tsx"],
         format: ["esm", "cjs"],
@@ -19,11 +20,32 @@ export default defineConfig(
           VERSION,
         },
       },
+
+      // Solid-JS builds published to NPM
+      {
+        entry: ["src/index.solid.tsx"],
+        format: "esm",
+        dts: true,
+        clean: !config.watch,
+        minify: false,
+        esbuildOptions: () => ({
+          jsx: "preserve",
+        }),
+        outExtension: () => ({
+          js: ".jsx",
+        }),
+        env: {
+          VERSION,
+        },
+      },
+
+      // Global window object bundled
       {
         entry: ["src/index.tsx"],
         format: ["iife"],
+        noExternal: [/(.*)/],
         clean: !config.watch,
-        minify: false,
+        minify: true,
         esbuildPlugins: [solidPlugin()],
         env: {
           VERSION,
@@ -34,22 +56,25 @@ export default defineConfig(
           js: "if (!'__docsearch_meilisearch__' in window) window.__docsearch_meilisearch__ = __docsearch_meilisearch__",
         },
       },
+
+      // ESM bundled
       {
-        entry: ["src/index.solid.tsx"],
-        format: "esm",
-        dts: true,
+        entry: ["src/index.tsx"],
+        format: ["esm"],
         clean: !config.watch,
-        minify: false,
-        esbuildOptions: () => ({
-          jsx: "preserve",
-        }),
+        minify: true,
+        esbuildPlugins: [solidPlugin()],
+        noExternal: [/(.*)/],
         outExtension: () => ({
-          js: ".jsx",
+          js: ".bundled.esm.js",
         }),
         env: {
           VERSION,
         },
+        platform: "browser",
       },
+
+      // CSS
       {
         entry: [
           "src/styles/index.css",