feat(esm): migrate to ESM

- Build with microbundle
- Add build step to GitHub Actions workflow

.eslintrc.json

@@ -1,8 +1,10 @@
 {
   "env": {
-    "commonjs": true,
+    "es2021": true,
-    "es2017": true,
     "node": true
   },
-  "extends": "eslint:recommended"
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "sourceType": "module"
+  }
 }

.github/workflows/main.yml

@@ -3,7 +3,7 @@ on: push
 
 jobs:
   test-and-release:
-    name: Test and release
+    name: Test and build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -23,5 +23,8 @@ jobs:
       - name: Test
         run: npm test
 
+      - name: Build
+        run: npm run build
+
       - name: Coverage
         uses: codecov/codecov-action@v1

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .nyc_output
 coverage
+dist
 node_modules
 public
 npm-debug.log

README.md

@@ -14,6 +14,7 @@ Inspired by [jsonresume-theme-flat](https://github.com/erming/jsonresume-theme-f
 - 📐 CSS grid layout
 - 🌗 Light and dark modes
 - 🧩 Standalone CLI
+- 📦 ESM and CommonJS builds
 
 [View demo →](https://jsonresume-theme-even.netlify.app)
 

bin/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-const fs = require('fs')
+import fs from 'fs'
-const { render } = require('..')
+import { render } from '../dist/index.modern.js'
 
 const resume = JSON.parse(fs.readFileSync(process.stdin.fd, 'utf-8'))
 const html = render(resume)

index.js

@@ -1,10 +1,13 @@
-const fs = require('fs')
+import fs from 'fs'
-const path = require('path')
+import path from 'path'
-const { icons } = require('feather-icons')
+import { fileURLToPath } from 'url'
-const Handlebars = require('handlebars')
+import { icons } from 'feather-icons'
-const micromark = require('micromark')
+import Handlebars from 'handlebars'
-const striptags = require('striptags')
+import micromark from 'micromark'
+import striptags from 'striptags'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 const extname = '.hbs'
 const partialsDir = path.join(__dirname, 'partials')
 
@@ -54,9 +57,9 @@ Handlebars.registerHelper('markdown', doc => micromark(doc))
 
 Handlebars.registerHelper('stripTags', html => striptags(html))
 
-exports.pdfRenderOptions = { mediaType: 'print' }
+export const pdfRenderOptions = { mediaType: 'print' }
 
-exports.render = resume => {
+export const render = resume => {
   const template = fs.readFileSync(path.join(__dirname, 'resume.hbs'), 'utf-8')
   const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf-8')
 

package.json

@@ -12,22 +12,30 @@
   },
   "license": "MIT",
   "author": "Rafael Bardini",
+  "type": "module",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "default": "./dist/index.modern.js"
+  },
+  "main": "./dist/index.cjs",
+  "unpkg": "./dist/index.umd.js",
+  "module": "./dist/index.module.js",
+  "source": "index.js",
   "bin": {
     "jsonresume-theme-even": "bin/cli.js"
   },
   "files": [
     "bin",
-    "index.js",
+    "dist"
-    "resume.hbs",
-    "partials/*.hbs",
-    "style.css"
   ],
   "scripts": {
+    "build": "microbundle build --target node",
+    "postbuild": "cp -r resume.hbs partials style.css dist",
     "build:demo": "mkdir -p public && cat node_modules/resume-schema/sample.resume.json | ./bin/cli.js > public/index.html",
-    "format": "prettier --write .",
+    "format": "prettier --ignore-path .gitignore .",
-    "lint": "eslint .",
+    "lint": "eslint --ignore-path .gitignore .",
     "prepare": "husky install",
-    "test": "tap --no-check-coverage"
+    "test": "c8 tap --node-arg=--experimental-json-modules --no-coverage"
   },
   "dependencies": {
     "feather-icons": "^4.28.0",
@@ -36,10 +44,12 @@
     "striptags": "^3.2.0"
   },
   "devDependencies": {
+    "c8": "7.10.0",
     "eslint": "7.32.0",
     "html-validate": "6.1.0",
     "husky": "7.0.2",
     "lint-staged": "11.2.0",
+    "microbundle": "0.14.1",
     "prettier": "2.4.1",
     "resume-schema": "1.0.0",
     "tap": "15.0.10"

test/render.js

@@ -1,8 +1,8 @@
-const { test } = require('tap')
+import { test } from 'tap'
-const { HtmlValidate } = require('html-validate')
+import { HtmlValidate } from 'html-validate'
 
-const { render } = require('..')
+import { render } from '../index.js'
-const resume = require('resume-schema/sample.resume.json')
+import resume from 'resume-schema/sample.resume.json'
 
 // Overwrite empty sample resume values
 resume.basics.image = 'image.jpg'