ESM support (#1722)

* ESM support

* add example using mjs

* update ez examples deps

* test-esm script

* update ez example

* update bob

.changeset/two-steaks-turn.md

@@ -0,0 +1,5 @@
+---
+'graphql-modules': minor
+---
+
+ESM support

.github/workflows/ci.yml

@@ -39,3 +39,6 @@ jobs:
 
       - name: Test
         run: yarn test
+
+      - name: Test ESM
+        run: node scripts/test-esm.mjs

examples/ez/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "example-graphql-ez",
+  "version": "0.0.1",
+  "license": "MIT",
+  "scripts": {
+    "dev:cjs": "tsup --watch src --onSuccess \"node dist/index.js\"",
+    "dev:mjs": "tsup --watch src --onSuccess \"node dist/index.mjs\""
+  },
+  "dependencies": {
+    "@envelop/graphql-modules": "1.0.0",
+    "@graphql-ez/fastify": "^0.8.2",
+    "@graphql-ez/plugin-graphiql": "^0.5.0",
+    "fastify": "3.20.1",
+    "graphql-ez": "^0.11.0",
+    "graphql-modules": "*"
+  },
+  "devDependencies": {
+    "@types/node": "16.6.1",
+    "tsup": "4.13.1"
+  },
+  "tsup": {
+    "entryPoints": [
+      "src/index.ts"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "target": "es2019",
+    "silent": true
+  }
+}

examples/ez/src/app/auth/auth.module.ts

@@ -0,0 +1,48 @@
+import {
+  createModule,
+  gql,
+  InjectionToken,
+  Scope,
+  CONTEXT,
+} from 'graphql-modules';
+
+interface AuthenticatedUser {
+  _id: number;
+  username: string;
+}
+const AuthenticatedUser = new InjectionToken<AuthenticatedUser>(
+  'authenticated-user'
+);
+
+export const AuthModule = createModule({
+  id: 'auth',
+  typeDefs: gql`
+    type Query {
+      me: User
+    }
+  `,
+  resolvers: {
+    Query: {
+      me(_root: {}, _args: {}, context: GraphQLModules.Context) {
+        return context.injector.get(AuthenticatedUser);
+      },
+    },
+  },
+  providers: [
+    {
+      provide: AuthenticatedUser,
+      scope: Scope.Operation,
+      deps: [CONTEXT],
+      useFactory(ctx: GraphQLModules.GlobalContext) {
+        const authHeader = ctx.request.headers.authorization;
+
+        console.log({ authHeader });
+
+        return {
+          _id: 1,
+          username: 'me',
+        };
+      },
+    },
+  ],
+});

examples/ez/src/app/social-network/social-network.module.ts

@@ -0,0 +1,15 @@
+import { createModule, gql } from 'graphql-modules';
+
+export const SocialNetworkModule = createModule({
+  id: 'social-network',
+  typeDefs: gql`
+    extend type User {
+      friends: [User]
+    }
+  `,
+  resolvers: {
+    User: {
+      friends: (user: any) => user.friends,
+    },
+  },
+});

examples/ez/src/app/user/user.module.ts

@@ -0,0 +1,17 @@
+import { createModule, gql } from 'graphql-modules';
+
+export const UserModule = createModule({
+  id: 'user',
+  typeDefs: gql`
+    type User {
+      id: String
+      username: String
+    }
+  `,
+  resolvers: {
+    User: {
+      id: (user: any) => user._id,
+      username: (user: any) => user.username,
+    },
+  },
+});

examples/ez/src/index.ts

@@ -0,0 +1,34 @@
+import 'reflect-metadata';
+
+import Fastify from 'fastify';
+import { createApplication } from 'graphql-modules';
+
+import { useGraphQLModules } from '@envelop/graphql-modules';
+import { CreateApp } from '@graphql-ez/fastify';
+import { ezGraphiQLIDE } from '@graphql-ez/plugin-graphiql';
+
+import { AuthModule } from './app/auth/auth.module';
+import { SocialNetworkModule } from './app/social-network/social-network.module';
+import { UserModule } from './app/user/user.module';
+
+const server = Fastify({
+  logger: true,
+});
+const modulesApp = createApplication({
+  modules: [UserModule, AuthModule, SocialNetworkModule],
+});
+
+const EZApp = CreateApp({
+  envelop: {
+    plugins: [useGraphQLModules(modulesApp)],
+  },
+  ez: {
+    plugins: [ezGraphiQLIDE()],
+  },
+});
+
+const { fastifyPlugin } = EZApp.buildApp();
+
+server.register(fastifyPlugin);
+
+server.listen(4000);

package.json

@@ -22,8 +22,9 @@
   },
   "devDependencies": {
     "@apollo/federation": "0.29.0",
-    "@graphql-tools/merge": "8.0.1",
+    "@changesets/apply-release-plan": "4.1.0",
     "@changesets/cli": "2.13.1",
+    "@graphql-tools/merge": "8.0.1",
     "@types/benchmark": "2.1.1",
     "@types/express": "4.17.13",
     "@types/jest": "27.0.1",
@@ -35,11 +36,13 @@
     "apollo-server-express": "2.25.2",
     "artillery": "1.7.6",
     "benchmark": "2.1.4",
-    "bob-the-bundler": "1.2.1",
+    "bob-the-bundler": "1.5.1",
+    "chalk": "4.1.2",
     "dataloader": "2.0.0",
     "eslint": "7.32.0",
     "express": "4.17.1",
     "express-graphql": "0.11.0",
+    "globby": "11.0.4",
     "graphql": "15.5.1",
     "graphql-subscriptions": "1.2.1",
     "husky": "7.0.1",

packages/graphql-modules/package.json

@@ -12,8 +12,18 @@
   "author": "Kamil Kisiela",
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./*": {
+      "require": "./dist/*.js",
+      "import": "./dist/*.mjs"
+    }
+  },
   "typings": "dist/index.d.ts",
   "typescript": {
     "definition": "dist/index.d.ts"

scripts/test-esm.mjs

@@ -0,0 +1,50 @@
+import globby from 'globby';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+
+async function main() {
+  const mjsFiles = await globby(['../packages/*/dist/*.mjs'], {
+    cwd: dirname(fileURLToPath(import.meta.url)),
+  });
+
+  const ok = [];
+  const fail = [];
+
+  let i = 0;
+  await Promise.all(
+    mjsFiles.map((mjsFile) => {
+      const mjsPath = `./${mjsFile}`;
+      return import(mjsPath)
+        .then(() => {
+          ok.push(mjsPath);
+        })
+        .catch((err) => {
+          const color = i++ % 2 === 0 ? chalk.magenta : chalk.red;
+          console.error(color('\n\n-----\n' + i + '\n'));
+          console.error(mjsPath, err);
+          console.error(color('\n-----\n\n'));
+          fail.push(mjsPath);
+        });
+    })
+  );
+  ok.length && console.log(chalk.blue(`${ok.length} OK: ${ok.join(' | ')}`));
+  fail.length &&
+    console.error(chalk.red(`${fail.length} Fail: ${fail.join(' | ')}`));
+
+  if (fail.length) {
+    console.error('\nFAILED');
+    process.exit(1);
+  } else if (ok.length) {
+    console.error('\nOK');
+    process.exit(0);
+  } else {
+    console.error('No files analyzed!');
+    process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});