Bundle fixes, closes #155

- Use .cjs for CJS bundles
- Default to ESM (color.js points to ESM bundle, color.iife.js is the IIFE version)
- Simplify Rollup config

get/index.njk

@@ -10,13 +10,13 @@ includes: '<link rel="stylesheet" href="style.css"><script src="index.js" type="
 
 <p>If you just want to play around ASAP, the quickest way is to import the entire library, either as a module in your JS:</p>
 
-<pre><code>import Color from "https://colorjs.io/dist/color.esm.js";</code></pre>
+<pre><code>import Color from "https://colorjs.io/dist/color.js";</code></pre>
 
 <p class="warning">To be able to use <code>import</code> statements in your JS, your <code class="language-markup">&lt;script></code> element needs <code>type="module"</code></p>
 
 Or, if you'd rather just have <code>Color</code> as a global variable, the classic way, just include the following script in your HTML:
 
-<pre class="language-markup"><code>&lt;script src="https://colorjs.io/dist/color.js">&lt;/script></code></pre>
+<pre class="language-markup"><code>&lt;script src="https://colorjs.io/dist/color.iife.js">&lt;/script></code></pre>
 
 <p class="tip">You can also add <code>.min</code> right before the <code>.js</code> extension to get a minified file.
 

package.json

@@ -1,17 +1,18 @@
 {
 	"name": "colorjs.io",
-	"version": "0.0.7",
+	"version": "0.1.0-alpha",
 	"description": "Color space agnostic color manipulation library",
 	"files": [
-		"dist/color.cjs.js",
-		"dist/color.cjs.js.map",
-		"dist/color.esm.js",
-		"dist/color.esm.js.map"
+		"dist/color.cjs",
+		"dist/color.cjs.map",
+		"dist/color.js",
+		"dist/color.js.map"
 	],
 	"exports": {
-		"import": "./dist/color.esm.js",
-		"require": "./dist/color.cjs.js"
+		"import": "./dist/color.js",
+		"require": "./dist/color.cjs"
 	},
+	"type": "module",
 	"main": "./dist/color.cjs.js",
 	"module": "./dist/color.esm.js",
 	"directories": {

rollup.config.js

@@ -1,49 +1,41 @@
 import { terser } from "rollup-plugin-terser";
 
-function bundle(format, {minify} = {}) {
-	let filename = "color";
-	let options = {
-		format: format,
-		sourcemap: true,
-		plugins: []
-	};
+let bundles = [
+	{
+		"file": "dist/color.iife.js",
+		"format": "iife",
+		"sourcemap": true,
+		"name": "Color"
+	},
+	{
+		"file": "dist/color.js",
+		"format": "esm",
+		"sourcemap": true,
+	},
+	{
+		"file": "dist/color.cjs",
+		"format": "cjs",
+		"sourcemap": true,
+		"exports": "named",
+	},
+];
 
-	if (format === "iife") {
-		options.name = "Color";
-	}
-	else {
-		filename += "." + format;
-
-		if (format === "cjs") {
-			options.exports = "named"; /** Disable warning for default imports */
-		}
-	}
-
-	if (minify) {
-		filename += ".min";
-
-		options.plugins.push(terser({
-			compress: true,
-			mangle: true
-		}));
-	}
+// Add minified versions of every bundle
+bundles = bundles.flatMap(bundle => {
+	let minBundle = Object.assign({}, bundle);
+	minBundle.file = minBundle.file.replace(/\.\w+$/, ".min$&");
+	minBundle.plugins ||= [];
+	minBundle.plugins.push(terser({
+		compress: true,
+		mangle: true
+	}));
 
-	return {
-		file: `dist/${filename}.js`,
-		...options
-	};
-}
+	return [bundle, minBundle];
+});
 
 export default {
 	input: "src/main.js",
-	output: [
-		bundle("iife"),
-		bundle("iife", {minify: true}),
-		bundle("esm"),
-		bundle("esm", {minify: true}),
-		bundle("cjs"),
-		bundle("cjs", {minify: true})
-	],
+	output: bundles,
 	onwarn (warning, rollupWarn) {
 		if (warning.code !== 'CIRCULAR_DEPENDENCY') {
 			rollupWarn(warning);