feat: compile as ES Module (#431)

* feat: compile as ES Module

* update CI workflows to newer node

* release workflow to newer node

* update yarn version to 3.3.1

* explicitly set yarnPath

* fix: frozen-lockfile to immutable

* replace isomorphic-fetch with cross-fetch

* fix: done() called only once

* update jest + fix a few tests

* Add .js to local imports as per https://github.com/microsoft/TypeScript/issues/16577\#issuecomment-754941937

* prettier write

* example for adding it in the browser

* github workflows to one version (hashes may change when changing node version, due to yarn patches)

* update package.json

* Update yarn lock

* fix: graphql subscription tests don't leak handles

* Node tests for graphql subscriptions are now working

* Don't try to make WebSocket tests work in two environments

After struggling for a long while with trying to "shim" isomorphic-ws
to work normally in a jest environment, it is easier to just run this
test only in a Node environment.

Here are the issues why this test fails in JSDOM:

1. Imports fail

The statement `import WebSocket from 'isomorphic-ws';` is passed to the
Jest module resolver, which utilises `ts-jest-resolver` (in our case) to
find the right file to load. Sadly, it will always load the "main"
module of a node package.

2. isomorphic-ws "browser" option is ESM for some reason

If we use jest.config.cjs "resolver" field [1] to define a custom script,
we will be able to modify the "main" field by patching package.json in
memory. This works fine, however isomorphic-ws's browser version is an
ES Module for some reason, even if the package.json > "type" is
"commonjs".

3. Something inside jest doesn't want me to hack it to support ESM

If I override the package.json even harder to also change the "type" to
"module" just for isomorphic-ws, Jest doesn't respect it

4. ts-jest doesn't want to change the ESM imports to CJS imports

Since... we told it to not change ESM imports to CJS imports, it will
not.

[1]: https://jestjs.io/docs/configuration#resolver-string

* prettier write

* follow flags in tsconfig

---------

Co-authored-by: karl <[email protected]>

Author: Johannes Kadak

.eslintrc.json

@@ -2,15 +2,34 @@
   "env": {
     "browser": true
   },
-  "extends": ["eslint:recommended", "@qminder", "prettier"],
+  "plugins": ["import", "@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "prettier",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  },
+  "rules": {
+    "import/namespace": "off",
+    "no-unused-vars": "off",
+    "import/no-named-as-default": "off"
+  },
   "overrides": [
     {
-      "files": ["*.test.ts"],
+      "files": ["*.test.ts", "test/unit/jestSetupFile.ts"],
       "env": {
-        "jest": true
+        "jest": true,
+        "node": true
       },
       "rules": {
         "func-names": "off"

.gitattributes

@@ -0,0 +1,2 @@
+.yarn/releases/*.cjs binary
+.yarn/plugins/@yarnpkg/*.cjs binary

.github/workflows/code-coverage.yml

@@ -10,8 +10,9 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
-      - run: yarn install --frozen-lockfile
+          node-version: 16.x
+          cache: 'yarn'
+      - run: yarn install --immutable
       - run: yarn jest --coverage
       - uses: codecov/codecov-action@v3
         with:

.github/workflows/push.yml

@@ -2,43 +2,71 @@ on: push
 name: Test on push
 jobs:
   test:
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x, 15.x, 16.x]
-    name: Test on NodeJS ${{ matrix.node-version }}
+    name: Test (JSDOM)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 16.x
+          cache: 'yarn'
       - name: Install Deps
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Run tests (browser)
         run: yarn test
+  test_node:
+    name: Test (Node.js)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+      - name: Install Deps
+        run: yarn install --immutable
       - name: Run tests (node)
         run: yarn test-node
+  test_pack:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+      - name: Install Deps
+        run: yarn install --immutable
       - name: Build the package
         run: yarn pack
   prettier:
     name: Check prettier
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
       - name: Install Deps
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
       - name: Prettier check
         run: |
           yarn run lint-prettier
   eslint:
     name: Check eslint
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
       - name: Install Deps
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
       - name: Eslint check
         run: |
           yarn run lint-eslint

.github/workflows/release.yml

@@ -12,11 +12,12 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 16.x
+          cache: 'yarn'
           always-auth: true
           registry-url: https://registry.npmjs.org
       - name: Install Deps
-        run: yarn install --frozen-lockfile --ignore-scripts
+        run: yarn install --immutable --ignore-scripts
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Build Library

.gitignore

@@ -34,3 +34,10 @@ graphql.config.json
 .idea
 
 build
+
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.yarn/releases/yarn-3.3.1.cjs

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

.yarnrc.yml

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qminder API in browser</title>
+  </head>
+  <body>
+    <label for="apikey">API key:</label><input type="password" id="apikey" />
+    <button id="load-button">Load locations</button>
+    <div id="output"></div>
+    <script type="module" src="dist/main.out.js"></script>
+  </body>
+</html>

examples/browser/index.html

@@ -0,0 +1,15 @@
+import * as Qminder from '../../build/qminder-api.js';
+
+const buttonEl = document.getElementById('load-button');
+const outputEl = document.getElementById('output');
+const apiKeyEl = document.getElementById('apikey');
+
+buttonEl.addEventListener('click', async () => {
+  Qminder.setKey(apiKeyEl.value);
+  const locations = await Qminder.locations.list();
+  for (const location of locations) {
+    const div = document.createElement('div');
+    div.textContent = location.name;
+    outputEl.appendChild(div);
+  }
+});