feat: introduce esm and cjs support (#42)

* feat: introduce esm and cjs support according to d3/d3#3469 (comment)

* chore: fix example app

* chore: try to fix the typescript imports...

.github/workflows/release-canary.yml

@@ -21,15 +21,16 @@ jobs:
       - name: Install dependencies
         if: steps.cache-modules.outputs.cache-hit != 'true'
         run: yarn
-      - name: Compile TypeScript
-        run: yarn tsc
+      - name: Build
+        run: yarn build
       - name: Configure Git Credentials
         run: |
           git config --global user.email "github-action@users.noreply.github.com"
           git config --global user.name "Github Action"
-      - name: Set version
-        run: yarn version --prerelease --preid ${GITHUB_SHA::8}
       - name: Publish
-        run: yarn publish --tag canary
+        run: |
+          cd dist
+          yarn version --no-git-tag-version --prerelease --preid ${GITHUB_SHA::8}
+          yarn publish --tag canary
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -122,4 +122,4 @@ app.listen(4000);
 - We created an intermediate representation of a GraphQL schema via the helper functions exported by this library.
 - Then, we converted the schema to a real graphql-js schema by calling `buildGraphQLSchema` at server startup time.
 - Used existing express middleware `express-graphql` to server our schema with `graphiql` explorer
-- That's it! We get a fully typesafe server with almost zero type annotation needed
+- That's it! We get a fully type-safe server with almost zero type annotation needed

examples/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

examples/starwars.ts

@@ -2,6 +2,8 @@ import type { Interface } from '../src';
 import type { Connection, ConnectionArguments, Edge } from '../src/relay';
 import { createTypesFactory, buildGraphQLSchema } from '../src';
 import { createRelayHelpers } from '../src/relay';
+import express = require('express');
+import graphqlHTTP = require('express-graphql');
 
 type Context = { contextContent: string };
 
@@ -307,9 +309,6 @@ const schema = {
   query: queryType,
 };
 
-import express from 'express';
-import graphqlHTTP from 'express-graphql';
-
 const app = express();
 
 app.use(
@@ -320,4 +319,6 @@ app.use(
   })
 );
 
-app.listen(4000);
+app.listen(4000, () => {
+  console.log(`Listening on http://localhost:4000/graphql`)
+});

examples/tsconfig.json

@@ -1,7 +1,11 @@
-{	
-  "extends": "../tsconfig.json",	
-  "files": ["./starwars.ts"],	
-  "compilerOptions": {	
-    "rootDir": "../"	
-  }	
-} 
+{
+  "extends": "../tsconfig.json",
+  "files": ["./starwars.ts"],
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "rootDir": "..",
+    "skipLibCheck": true
+  }
+}

package.json

@@ -1,11 +1,22 @@
 {
   "name": "gqtx",
   "version": "0.8.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "/dist"
-  ],
+  "type": "module",
+  "main": "cjs/index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./cjs/index.js"
+    },
+    "./relay": {
+      "import": "./relay.js",
+      "require": "./cjs/relay.js"
+    },
+    "./package.json": "./package.json",
+    "./": "./"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/sikanhe/gqtx"
@@ -17,17 +28,22 @@
     "graphql-server"
   ],
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.2.0",
     "@types/express": "^4.17.1",
     "express": "^4.17.1",
     "express-graphql": "^0.9.0",
     "graphql": "^15.1.0",
+    "rollup": "^2.39.0",
     "ts-node": "^8.4.1",
-    "typescript": "^3.6.4"
+    "tslib": "^2.1.0",
+    "typescript": "^4.1.5"
   },
   "peerDependencies": {
     "graphql": "^15.1.0"
   },
   "scripts": {
-    "prepare": "tsc"
+    "build:cjs": "MODE=cjs rollup -c",
+    "build:esm": "rollup -c",
+    "build": "yarn build:cjs && yarn build:esm"
   }
 }

rollup.config.js

@@ -0,0 +1,31 @@
+import ts from '@rollup/plugin-typescript'
+import { promises as fs } from "fs"
+
+const isCJSBuild = process.env.MODE === "cjs" 
+
+const commonjsPkgJSONPlugin = () => {
+  return {
+    name: 'commonjsPkgJSONPlugin',
+    writeBundle: async  () => {
+      if (isCJSBuild === true) {
+        await fs.writeFile("dist/cjs/package.json", JSON.stringify({
+          "type": "commonjs"
+        }))
+      } else {
+        await fs.copyFile("package.json", "dist/package.json")
+      }
+    }
+  }
+}
+
+export default {
+  input: ['src/index.ts', 'src/relay.ts'],
+  output: [
+    {
+      dir: isCJSBuild ? 'dist/cjs' : 'dist',
+      format: isCJSBuild ? 'cjs' : 'esm'
+    }
+  ],
+  plugins: [ts({ tsconfig: isCJSBuild ? "tsconfig.cjs.json" : "tsconfig.json" }), commonjsPkgJSONPlugin()],
+  external: ["graphql"]
+}

tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "declaration": false
+  }
+}

tsconfig.json

@@ -1,25 +1,21 @@
 {
   "compilerOptions": {
-    "incremental": true,                   /* Enable incremental compilation */
-    "target": "es2019",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "node",
     "rootDir": "src",
-    "outDir": "dist",                        /* Redirect output structure to the directory. */
+    "outDir": "dist",
     "declaration": true,
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
     /* Additional Checks */
-    "noUnusedLocals": true,                /* Report errors on unused locals. */
-    "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "emitDeclarationOnly": true
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
   },
   "files": ["./src/index.ts", "./src/relay.ts"]
 }