From 9084eee5f56282e57d13dc42ba712a476935fadf Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 1/9] Migrated FFI to ES modules via 'lebab'

---
 src/Graphics/Canvas.js | 280 ++++++++++++++++++++---------------------
 1 file changed, 140 insertions(+), 140 deletions(-)

diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
index 73b25c9..8678f5a 100644
--- a/src/Graphics/Canvas.js
+++ b/src/Graphics/Canvas.js
@@ -1,10 +1,10 @@
 "use strict";
 
-exports.canvasElementToImageSource = function(e) {
+export function canvasElementToImageSource(e) {
   return e;
-};
+}
 
-exports.tryLoadImageImpl = function (src) {
+export function tryLoadImageImpl(src) {
   return function(e) {
     return function(f) {
       return function () {
@@ -19,9 +19,9 @@ exports.tryLoadImageImpl = function (src) {
       };
     };
   };
-};
+}
 
-exports.getCanvasElementByIdImpl = function(id, Just, Nothing) {
+export function getCanvasElementByIdImpl(id, Just, Nothing) {
   return function() {
     var el = document.getElementById(id);
     if (el && el instanceof HTMLCanvasElement) {
@@ -30,177 +30,177 @@ exports.getCanvasElementByIdImpl = function(id, Just, Nothing) {
       return Nothing;
     }
   };
-};
+}
 
-exports.getContext2D = function(c) {
+export function getContext2D(c) {
   return function() {
     return c.getContext("2d");
   };
-};
+}
 
-exports.getCanvasWidth = function(canvas) {
+export function getCanvasWidth(canvas) {
   return function() {
     return canvas.width;
   };
-};
+}
 
-exports.getCanvasHeight = function(canvas) {
+export function getCanvasHeight(canvas) {
   return function() {
     return canvas.height;
   };
-};
+}
 
-exports.setCanvasWidth = function(canvas) {
+export function setCanvasWidth(canvas) {
   return function(width) {
     return function() {
       canvas.width = width;
     };
   };
-};
+}
 
-exports.setCanvasHeight = function(canvas) {
+export function setCanvasHeight(canvas) {
   return function(height) {
     return function() {
       canvas.height = height;
     };
   };
-};
+}
 
-exports.canvasToDataURL = function(canvas) {
+export function canvasToDataURL(canvas) {
   return function() {
     return canvas.toDataURL();
   };
-};
+}
 
-exports.setLineWidth = function(ctx) {
+export function setLineWidth(ctx) {
   return function(width) {
     return function() {
       ctx.lineWidth = width;
     };
   };
-};
+}
 
-exports.setLineDash = function(ctx) {
+export function setLineDash(ctx) {
   return function(dash) {
     return function() {
       ctx.setLineDash(dash);
     };
   };
-};
+}
 
-exports.setFillStyle = function(ctx) {
+export function setFillStyle(ctx) {
   return function(style) {
     return function() {
       ctx.fillStyle = style;
     };
   };
-};
+}
 
-exports.setStrokeStyle = function(ctx) {
+export function setStrokeStyle(ctx) {
   return function(style) {
     return function() {
       ctx.strokeStyle = style;
     };
   };
-};
+}
 
-exports.setShadowColor = function(ctx) {
+export function setShadowColor(ctx) {
   return function(color) {
     return function() {
       ctx.shadowColor = color;
     };
   };
-};
+}
 
-exports.setShadowBlur = function(ctx) {
+export function setShadowBlur(ctx) {
   return function(blur) {
     return function() {
       ctx.shadowBlur = blur;
     };
   };
-};
+}
 
-exports.setShadowOffsetX = function(ctx) {
+export function setShadowOffsetX(ctx) {
   return function(offsetX) {
     return function() {
       ctx.shadowOffsetX = offsetX;
     };
   };
-};
+}
 
-exports.setShadowOffsetY = function(ctx) {
+export function setShadowOffsetY(ctx) {
   return function(offsetY) {
     return function() {
       ctx.shadowOffsetY = offsetY;
     };
   };
-};
+}
 
-exports.setMiterLimit = function(ctx) {
+export function setMiterLimit(ctx) {
   return function(limit) {
     return function() {
       ctx.miterLimit = limit;
     };
   };
-};
+}
 
-exports.setLineCapImpl = function(ctx) {
+export function setLineCapImpl(ctx) {
   return function(cap) {
     return function() {
       ctx.lineCap = cap;
     };
   };
-};
+}
 
-exports.setLineJoinImpl = function(ctx) {
+export function setLineJoinImpl(ctx) {
   return function(join) {
     return function() {
       ctx.lineJoin = join;
     };
   };
-};
+}
 
-exports.setGlobalCompositeOperationImpl = function(ctx) {
+export function setGlobalCompositeOperationImpl(ctx) {
   return function(op) {
     return function() {
       ctx.globalCompositeOperation = op;
     };
   };
-};
+}
 
-exports.setGlobalAlpha = function(ctx) {
+export function setGlobalAlpha(ctx) {
   return function(alpha) {
     return function() {
       ctx.globalAlpha = alpha;
     };
   };
-};
+}
 
-exports.beginPath = function(ctx) {
+export function beginPath(ctx) {
   return function() {
     ctx.beginPath();
   };
-};
+}
 
-exports.stroke = function(ctx) {
+export function stroke(ctx) {
   return function() {
     ctx.stroke();
   };
-};
+}
 
-exports.fill = function(ctx) {
+export function fill(ctx) {
   return function() {
     ctx.fill();
   };
-};
+}
 
-exports.clip = function(ctx) {
+export function clip(ctx) {
   return function() {
     ctx.clip();
   };
-};
+}
 
-exports.lineTo = function(ctx) {
+export function lineTo(ctx) {
   return function(x) {
     return function(y) {
       return function() {
@@ -208,9 +208,9 @@ exports.lineTo = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.moveTo = function(ctx) {
+export function moveTo(ctx) {
   return function(x) {
     return function(y) {
       return function() {
@@ -218,137 +218,137 @@ exports.moveTo = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.closePath = function(ctx) {
+export function closePath(ctx) {
   return function() {
     ctx.closePath();
   };
-};
+}
 
-exports.arc = function(ctx) {
+export function arc(ctx) {
   return function(a) {
     return function() {
       ctx.arc(a.x, a.y, a.radius, a.start, a.end);
     };
   };
-};
+}
 
-exports.rect = function(ctx) {
+export function rect(ctx) {
   return function(r) {
     return function() {
       ctx.rect(r.x, r.y, r.width, r.height);
     };
   };
-};
+}
 
-exports.fillRect = function(ctx) {
+export function fillRect(ctx) {
   return function(r) {
     return function() {
       ctx.fillRect(r.x, r.y, r.width, r.height);
     };
   };
-};
+}
 
-exports.strokeRect = function(ctx) {
+export function strokeRect(ctx) {
   return function(r) {
     return function() {
       ctx.strokeRect(r.x, r.y, r.width, r.height);
     };
   };
-};
+}
 
-exports.clearRect = function(ctx) {
+export function clearRect(ctx) {
   return function(r) {
     return function() {
       ctx.clearRect(r.x, r.y, r.width, r.height);
     };
   };
-};
+}
 
-exports.scale = function(ctx) {
+export function scale(ctx) {
   return function(t) {
     return function() {
       ctx.scale(t.scaleX, t.scaleY);
     };
   };
-};
+}
 
-exports.rotate = function(ctx) {
+export function rotate(ctx) {
   return function(angle) {
     return function() {
       ctx.rotate(angle);
     };
   };
-};
+}
 
-exports.translate = function(ctx) {
+export function translate(ctx) {
   return function(t) {
     return function() {
       ctx.translate(t.translateX, t.translateY);
     };
   };
-};
+}
 
-exports.transform = function(ctx) {
+export function transform(ctx) {
   return function(t) {
     return function() {
       ctx.transform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
     };
   };
-};
+}
 
-exports.setTransform = function(ctx) {
+export function setTransform(ctx) {
   return function(t) {
     return function() {
       ctx.setTransform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
     };
   };
-};
+}
 
-exports.textAlignImpl = function(ctx) {
+export function textAlignImpl(ctx) {
   return function() {
     return ctx.textAlign;
   };
-};
+}
 
-exports.setTextAlignImpl = function(ctx) {
+export function setTextAlignImpl(ctx) {
   return function(textAlign) {
     return function() {
       ctx.textAlign = textAlign;
     };
   };
-};
+}
 
-exports.textBaselineImpl = function (ctx) {
+export function textBaselineImpl(ctx) {
   return function () {
     return ctx.textBaseline;
   };
-};
+}
 
-exports.setTextBaselineImpl = function (ctx) {
+export function setTextBaselineImpl(ctx) {
   return function (textBaseline) {
     return function () {
       ctx.textBaseline = textBaseline;
     };
   };
-};
+}
 
-exports.font = function(ctx) {
+export function font(ctx) {
   return function() {
     return ctx.font;
   };
-};
+}
 
-exports.setFont = function(ctx) {
+export function setFont(ctx) {
   return function(fontspec) {
     return function() {
       ctx.font = fontspec;
     };
   };
-};
+}
 
-exports.fillText = function(ctx) {
+export function fillText(ctx) {
   return function(text) {
     return function(x) {
       return function(y) {
@@ -358,9 +358,9 @@ exports.fillText = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.strokeText = function(ctx) {
+export function strokeText(ctx) {
   return function(text) {
     return function(x) {
       return function(y) {
@@ -370,41 +370,41 @@ exports.strokeText = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.measureText = function(ctx) {
+export function measureText(ctx) {
   return function(text) {
     return function() {
       return ctx.measureText(text);
     };
   };
-};
+}
 
-exports.save = function(ctx) {
+export function save(ctx) {
   return function() {
     ctx.save();
   };
-};
+}
 
-exports.restore = function(ctx) {
+export function restore(ctx) {
   return function() {
     ctx.restore();
   };
-};
+}
 
-exports.imageDataWidth = function(image) {
+export function imageDataWidth(image) {
   return image.width;
-};
+}
 
-exports.imageDataHeight = function(image) {
+export function imageDataHeight(image) {
   return image.height;
-};
+}
 
-exports.imageDataBuffer = function(image) {
+export function imageDataBuffer(image) {
   return image.data;
-};
+}
 
-exports.getImageData = function(ctx) {
+export function getImageData(ctx) {
   return function(x) {
     return function(y) {
       return function(w) {
@@ -416,9 +416,9 @@ exports.getImageData = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.putImageDataFull = function(ctx) {
+export function putImageDataFull(ctx) {
   return function(image_data) {
     return function(x) {
       return function(y) {
@@ -436,9 +436,9 @@ exports.putImageDataFull = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.putImageData = function(ctx) {
+export function putImageData(ctx) {
   return function(image_data) {
     return function(x) {
       return function(y) {
@@ -448,9 +448,9 @@ exports.putImageData = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.createImageData = function(ctx) {
+export function createImageData(ctx) {
   return function(sw) {
     return function(sh) {
       return function() {
@@ -458,25 +458,25 @@ exports.createImageData = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.createImageDataCopy = function(ctx) {
+export function createImageDataCopy(ctx) {
   return function(image_data) {
     return function() {
       return ctx.createImageData(image_data);
     };
   };
-};
+}
 
-exports.createImageDataWith = function(arr) {
+export function createImageDataWith(arr) {
   return function(sw) {
     return function() {
       return new ImageData(arr, sw);
     };
   };
-};
+}
 
-exports.drawImage = function(ctx) {
+export function drawImage(ctx) {
   return function(image_source) {
     return function(dx) {
       return function(dy) {
@@ -486,9 +486,9 @@ exports.drawImage = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.drawImageScale = function(ctx) {
+export function drawImageScale(ctx) {
   return function(image_source) {
     return function(dx) {
       return function(dy) {
@@ -502,9 +502,9 @@ exports.drawImageScale = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.drawImageFull = function(ctx) {
+export function drawImageFull(ctx) {
   return function(image_source) {
     return function(sx) {
       return function(sy) {
@@ -526,9 +526,9 @@ exports.drawImageFull = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.createPatternImpl = function(ctx) {
+export function createPatternImpl(ctx) {
   return function(img) {
     return function(repeat) {
       return function() {
@@ -536,33 +536,33 @@ exports.createPatternImpl = function(ctx) {
       };
     };
   };
-};
+}
 
-exports.setPatternFillStyle = function(ctx) {
+export function setPatternFillStyle(ctx) {
   return function(pattern) {
     return function() {
       ctx.fillStyle = pattern;
     };
   };
-};
+}
 
-exports.createLinearGradient = function(ctx) {
+export function createLinearGradient(ctx) {
   return function(linearGradient) {
     return function() {
       return ctx.createLinearGradient(linearGradient.x0, linearGradient.y0, linearGradient.x1, linearGradient.y1);
     };
   };
-};
+}
 
-exports.createRadialGradient = function(ctx) {
+export function createRadialGradient(ctx) {
   return function(radialGradient) {
     return function() {
       return ctx.createRadialGradient(radialGradient.x0, radialGradient.y0, radialGradient.r0, radialGradient.x1, radialGradient.y1, radialGradient.r1);
     };
   };
-};
+}
 
-exports.addColorStop = function(gradient) {
+export function addColorStop(gradient) {
   return function(stop) {
     return function(color) {
       return function() {
@@ -570,28 +570,28 @@ exports.addColorStop = function(gradient) {
       };
     };
   };
-};
+}
 
-exports.setGradientFillStyle = function(ctx) {
+export function setGradientFillStyle(ctx) {
   return function(gradient) {
     return function() {
       ctx.fillStyle = gradient;
     };
   };
-};
+}
 
-exports.quadraticCurveTo = function(ctx) {
+export function quadraticCurveTo(ctx) {
   return function(qCurve) {
     return function() {
       ctx.quadraticCurveTo(qCurve.cpx, qCurve.cpy, qCurve.x, qCurve.y);
     };
   };
-};
+}
 
-exports.bezierCurveTo = function(ctx) {
+export function bezierCurveTo(ctx) {
   return function(bCurve) {
     return function() {
       ctx.bezierCurveTo(bCurve.cp1x, bCurve.cp1y, bCurve.cp2x, bCurve.cp2y, bCurve.x, bCurve.y);
     };
   };
-};
+}

From a70680fc7cbcd53a5e2612e9b5301dada2007bc5 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 2/9] Removed '"use strict";' in FFI files

---
 src/Graphics/Canvas.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
index 8678f5a..b57a01c 100644
--- a/src/Graphics/Canvas.js
+++ b/src/Graphics/Canvas.js
@@ -1,5 +1,3 @@
-"use strict";
-
 export function canvasElementToImageSource(e) {
   return e;
 }

From 762533585eb317aa4552f0a82594c5e46a6a77ae Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 3/9] Update to CI to use 'unstable' purescript

---
 .github/workflows/ci.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 063845e..f5a96fe 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,6 +13,8 @@ jobs:
       - uses: actions/checkout@v2
 
       - uses: purescript-contrib/setup-purescript@main
+        with:
+          purescript: "unstable"
 
       - uses: actions/setup-node@v1
         with:

From d6436164747fe6984120ef974e4564a86d6490f1 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 4/9] Update Bower dependencies to master or main

---
 bower.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/bower.json b/bower.json
index 417a555..88b7233 100644
--- a/bower.json
+++ b/bower.json
@@ -20,10 +20,10 @@
     "url": "https://github.com/purescript-web/purescript-canvas.git"
   },
   "dependencies": {
-    "purescript-arraybuffer-types": "^3.0.0",
-    "purescript-effect": "^3.0.0",
-    "purescript-exceptions": "^5.0.0",
-    "purescript-functions": "^5.0.0",
-    "purescript-maybe": "^5.0.0"
+    "purescript-arraybuffer-types": "main",
+    "purescript-effect": "master",
+    "purescript-exceptions": "master",
+    "purescript-functions": "master",
+    "purescript-maybe": "master"
   }
 }

From bb203a85112e01cb3d346922841e981323159628 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 5/9] Update pulp to 16.0.0-0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 46f4de9..c46c5dc 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "devDependencies": {
     "eslint": "^7.32.0",
-    "pulp": "^15.0.0",
+    "pulp": "16.0.0-0",
     "purescript-psa": "^0.8.0",
     "rimraf": "^3.0.2"
   }

From 0efe1618cebb38f50378da69383341b5c4f357d1 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:04:11 -0500
Subject: [PATCH 6/9] Update psa to 0.8.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c46c5dc..d2c3151 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "eslint": "^7.32.0",
     "pulp": "16.0.0-0",
-    "purescript-psa": "^0.8.0",
+    "purescript-psa": "^0.8.2",
     "rimraf": "^3.0.2"
   }
 }

From cb98c4cf7a877fa12fce01815010767eae72890f Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:10:31 -0500
Subject: [PATCH 7/9] Update .eslintrc.json to ES6

---
 .eslintrc.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index cb9c786..3a97d05 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,10 +1,10 @@
 {
   "parserOptions": {
-    "ecmaVersion": 5
+    "ecmaVersion": 6,
+    "sourceType": "module"
   },
   "extends": "eslint:recommended",
   "env": {
-    "commonjs": true,
     "browser": true
   },
   "rules": {

From b94661253cfce4d69e8119a309f80e98fbae0c79 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:12:02 -0500
Subject: [PATCH 8/9] Added changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce6fd4f..dfc9cb6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Notable changes to this project are documented in this file. The format is based
 ## [Unreleased]
 
 Breaking changes:
+- Migrate FFI to ES modules (#85 by @JordanMartinez)
 
 New features:
 - Added `createImageDataWith` (#81)

From 1bfadd7fc7ecbe4d3f4200e5427bfed97d437b14 Mon Sep 17 00:00:00 2001
From: Jordan Martinez <jordanalex.martinez@protonmail.com>
Date: Tue, 22 Mar 2022 15:14:12 -0500
Subject: [PATCH 9/9] Update node to 14 in ci

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f5a96fe..06ed895 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -16,9 +16,9 @@ jobs:
         with:
           purescript: "unstable"
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: "10"
+          node-version: "14"
 
       - name: Install dependencies
         run: |