Merge pull request #234 from TrySound/proper-modules

feat: setup universal browser and node builds

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"
   },

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

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'