From 6cf6ffae9070736ae2338fe525eea5928942c2e8 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <trysound@yandex.ru>
Date: Thu, 25 Jun 2020 13:30:56 +0300
Subject: [PATCH] feat: setup universal browser and node builds

In this diff I fixed es modules distribution for bundlers.

Before we had two problems
- bundlers use "module" field to find es module build
- bundlers cannot use provided es module with node target

In this diff I addressed both of them. Now "main" and "module" fields
points to "node" specific versions. "browser" field provides aliases
with browser compatible builds.

All modern browsers support both "module" and "browser" fields.
---
 package.json     | 12 ++++++++----
 rollup.config.ts | 48 +++++++++++++++++++++++++++++++++++-------------
 test/e2e/xhr.ts  |  2 +-
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 36a656d9a..2f61cb245 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,13 @@
   "name": "liquidjs",
   "version": "9.13.0",
   "description": "A simple, expressive, safe and Shopify compatible template engine in pure JavaScript.",
-  "main": "dist/liquid.cjs.js",
-  "es2015": "dist/liquid.esm.js",
-  "browser": "dist/liquid.js",
+  "main": "dist/liquid.node.cjs.js",
+  "module": "dist/liquid.node.esm.js",
+  "es2015": "dist/liquid.browser.esm.js",
+  "browser": {
+    "./dist/liquid.node.cjs.js": "./dist/liquid.browser.umd.js",
+    "./dist/liquid.node.esm.js": "./dist/liquid.browser.esm.js"
+  },
   "types": "dist/liquid.d.ts",
   "scripts": {
     "lint": "eslint .",
@@ -16,7 +20,7 @@
     "benchmark": "node --expose-gc benchmark/index",
     "coverage": "nyc --reporter=html mocha \"test/{unit,integration}/**/*.ts\"",
     "coverage-coveralls": "nyc mocha \"test/{unit,integration}/**/*.ts\" && nyc report --reporter=text-lcov | coveralls",
-    "build": "rollup -c rollup.config.ts && ls -lh dist",
+    "build": "rm -rf dist && rollup -c rollup.config.ts && ls -lh dist",
     "build-docs": "bin/build-docs.sh",
     "watch": "tsc --watch"
   },
diff --git a/rollup.config.ts b/rollup.config.ts
index 614fca1de..d3ba2ab5f 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -15,9 +15,9 @@ const treeshake = {
 }
 const input = './src/liquid.ts'
 
-const cjs = {
+const nodeCjs = {
   output: [{
-    file: 'dist/liquid.cjs.js',
+    file: 'dist/liquid.node.cjs.js',
     format: 'cjs',
     banner
   }],
@@ -36,9 +36,31 @@ const cjs = {
   input
 }
 
-const esm = {
+const nodeEsm = {
   output: [{
-    file: 'dist/liquid.esm.js',
+    file: 'dist/liquid.node.esm.js',
+    format: 'esm',
+    banner
+  }],
+  external: ['path', 'fs'],
+  plugins: [typescript({
+    tsconfigOverride: {
+      include: [ 'src' ],
+      exclude: [ 'test', 'benchmark' ],
+      compilerOptions: {
+        target: 'ES2017',
+        module: 'ES2015'
+      }
+    }
+  })],
+  treeshake,
+  input
+}
+
+
+const browserEsm = {
+  output: [{
+    file: 'dist/liquid.browser.esm.js',
     format: 'esm',
     banner
   }],
@@ -64,9 +86,9 @@ const esm = {
   input
 }
 
-const umd = {
+const browserUmd = {
   output: [{
-    file: 'dist/liquid.js',
+    file: 'dist/liquid.browser.umd.js',
     name: 'liquidjs',
     format: 'umd',
     sourcemap,
@@ -93,9 +115,9 @@ const umd = {
   input
 }
 
-const min = {
+const browserMin = {
   output: [{
-    file: 'dist/liquid.min.js',
+    file: 'dist/liquid.browser.min.js',
     name: 'liquidjs',
     format: 'umd',
     sourcemap
@@ -124,10 +146,10 @@ const min = {
 
 const bundles = []
 const env = process.env.BUNDLES || ''
-if (env.includes('cjs')) bundles.push(cjs)
-if (env.includes('esm')) bundles.push(esm)
-if (env.includes('umd')) bundles.push(umd)
-if (env.includes('min')) bundles.push(min)
-if (bundles.length === 0) bundles.push(cjs, umd, min, esm)
+if (env.includes('cjs')) bundles.push(nodeCjs)
+if (env.includes('esm')) bundles.push(nodeEsm, browserEsm)
+if (env.includes('umd')) bundles.push(browserUmd)
+if (env.includes('min')) bundles.push(browserMin)
+if (bundles.length === 0) bundles.push(nodeCjs, nodeEsm, browserEsm, browserUmd, browserMin)
 
 export default bundles
diff --git a/test/e2e/xhr.ts b/test/e2e/xhr.ts
index 09ab8c90e..629f04aa0 100644
--- a/test/e2e/xhr.ts
+++ b/test/e2e/xhr.ts
@@ -1,4 +1,4 @@
-import { Liquid } from '../../dist/liquid.js'
+import { Liquid } from '../../dist/liquid.browser.umd.js'
 import * as sinon from 'sinon'
 import { expect, use } from 'chai'
 import { JSDOM } from 'jsdom'