feat: implement build for the esm, cjs, and umd formats

bent10 · Oct 15, 2023 · 1449e3b · 1449e3b
1 parent 1bfbfff
commit 1449e3b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -10,8 +10,9 @@
   <body>
     <h1>Open your browser console to see the result!</h1>
 
-    <script src="./dist/index.umd.cjs"></script>
-    <script>
+    <script type="module">
+      import jsonLoose from "https://cdn.jsdelivr.net/npm/json-loose/+esm"
+
       const input = `[
         "foo",
         true,

diff --git a/package.json b/package.json
@@ -18,13 +18,14 @@
     "stringify"
   ],
   "type": "module",
-  "main": "dist/index.umd.cjs",
+  "main": "dist/index.cjs",
+  "browser": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs",
+      "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     }
   },
@@ -34,12 +35,9 @@
     "license"
   ],
   "scripts": {
-    "start": "npm run prod",
-    "prod": "vite build && vite",
-    "dev": "vite build:ssr --watch",
-    "build": "npm run build:ssr && npm run build:prod && npm run types",
-    "build:ssr": "vite build --ssr src/index.ts",
-    "build:prod": "vite build",
+    "start": "vite",
+    "dev": "vite build --watch",
+    "build": "vite build && npm run types",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "types": "tsc -d --emitDeclarationOnly --outDir ./dist",

diff --git a/readme.md b/readme.md
@@ -4,16 +4,21 @@ A utility to handle and transform loosely structured data into valid JSON string
 
 ## Install
 
-You can install this module using npm or yarn:
+You can install this module using npm or yarn, it's only `2.93 kB │ gzip: 1.32 kB`:
 
 ```bash
 npm i json-loose
-
 # or
-
 yarn add json-loose
 ```
 
+You can also include this module directly in your HTML file from [CDN files](https://www.jsdelivr.com/package/npm/json-loose?tab=files&path=dist):
+
+| Type | URL                                                              |
+| :--- | :--------------------------------------------------------------- |
+| ESM  | `https://cdn.jsdelivr.net/npm/json-loose/+esm`                   |
+| UMD  | `https://cdn.jsdelivr.net/npm/json-loose/dist/index.umd.min.cjs` |
+
 ## Usage
 
 The `jsonLoose` function takes an invalid JSON string as input and returns a JSON-like string representation of the transformed data.
@@ -106,6 +111,11 @@ Yields:
 ]
 ```
 
+## Related
+
+- [attributes-parser](https://github.com/bent10/attributes-parser) – A utility for parsing and tokenizing attributes string into meaningful tokens and key-value pairs.
+- [js-tokens](https://www.npmjs.com/package/js-tokens) – A JavaScript tokenizer that never fails.
+
 ## Benchmarks
 
 ```bash
@@ -114,11 +124,6 @@ Yields:
 · js-tokens    54,156.77  0.0116  24.3425  0.0185  0.0122  0.0247  0.0643  1.1352  ±15.68%    27267
 ```
 
-## Related
-
-- [attributes-parser](https://github.com/bent10/attributes-parser) – A utility for parsing and tokenizing attributes string into meaningful tokens and key-value pairs.
-- [js-tokens](https://www.npmjs.com/package/js-tokens) – A JavaScript tokenizer that never fails.
-
 ## Contributing
 
 We 💛&nbsp; issues.

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,28 +1,23 @@
 /// <reference types="vitest" />
 import { resolve } from 'node:path'
-import { defineConfig, type BuildOptions } from 'vite'
+import { defineConfig } from 'vite'
 
-export default defineConfig(({ command, ssrBuild }) => {
-  const isBuildLib = command === 'build' && !ssrBuild
-  const build: BuildOptions = {}
-
-  if (isBuildLib) {
-    Object.assign(build, {
-      emptyOutDir: false,
-      lib: {
-        entry: resolve(__dirname, 'src/index.ts'),
-        name: 'jsonLoose',
-        formats: ['umd'],
-        fileName: 'index'
-      }
-    })
-  }
-
-  return {
-    build,
-    test: {
-      globals: true,
-      include: ['test/*.test.ts']
+export default defineConfig({
+  build: {
+    minify: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'jsonLoose',
+      formats: ['es', 'cjs', 'umd'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      external: ['moo'],
+      output: { globals: { moo: 'moo' } }
     }
+  },
+  test: {
+    globals: true,
+    include: ['test/*.test.ts']
   }
 })