Modernize

Author: djhi

.eslintrc

@@ -13,18 +13,16 @@ watch: ## continuously compile ES6 files to JS
 	@yarn vite build --watch
 
 test: ## Launch unit tests
-	@NODE_ENV=test NODE_OPTIONS="$$NODE_OPTIONS --experimental-vm-modules" ./node_modules/.bin/jest
+	@yarn run test
 
 watch-test: ## Launch unit tests and watch for changes
-	@NODE_ENV=test NODE_OPTIONS="$$NODE_OPTIONS --experimental-vm-modules" ./node_modules/.bin/jest --watch
+	@yarn run watch-test
 
 format: ## Format the source code
-	@./node_modules/.bin/eslint --fix ./src
+	@yarn run format
 
 run: ## Launch server with example data
-	@node ./bin/json-graphql-server.js example/data.js
+	@yarn run server
 
 build: ## Build production release
-	@yarn vite build
-	@yarn vite build -c ./vite.config.node.js
-	@yarn vite build -c ./vite.config.umd.js
+	@yarn run build

Makefile

@@ -43,7 +43,7 @@ module.exports = {
 Start the GraphQL server on localhost, port 3000.
 
 ```sh
-json-graphql-server db.js
+npx json-graphql-server db.js
 ```
 
 To use a port other than 3000, you can run `json-graphql-server db.js --p <your port here>`
@@ -98,7 +98,7 @@ Note that the server is [GraphiQL](https://github.com/graphql/graphiql) enabled,
 ## Install
 
 ```sh
-npm install -g json-graphql-server
+npm install -D json-graphql-server
 ```
 
 ## Generated Types and Queries
@@ -448,7 +448,7 @@ Then use the `jsonGraphqlExpress` express middleware:
 
 ```js
 import express from 'express';
-import jsonGraphqlExpress from 'json-graphql-server/node';
+import { jsonGraphqlExpress } from 'json-graphql-server/node';
 
 const PORT = 3000;
 const app = express();

README.md

@@ -1,9 +1,8 @@
 #!/usr/bin/env node
-require('reify');
 var path = require('path');
 var express = require('express');
 var cors = require('cors');
-var JsonGraphqlServer = require('../dist/json-graphql-server-node.cjs').default;
+var { jsonGraphqlExpress } = require('../dist/json-graphql-server-node.cjs');
 var dataFilePath = process.argv.length > 2 ? process.argv[2] : './data.json';
 var data = require(path.join(process.cwd(), dataFilePath));
 var PORT = process.env.NODE_PORT || 3000;
@@ -22,7 +21,7 @@ process.argv.forEach((arg, index) => {
 });
 
 app.use(cors());
-app.use('/', JsonGraphqlServer(data));
+app.use('/', jsonGraphqlExpress(data));
 app.listen(PORT, HOST);
 var msg = `GraphQL server running with your data at http://${HOST}:${PORT}/`;
 console.log(msg); // eslint-disable-line no-console

bin/json-graphql-server.cjs

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 4,
+    "ignore": ["public/*.js"]
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    },
+    "ignore": ["public/*.js"]
+  }
+}

biome.json

@@ -27,34 +27,34 @@
     ],
     "license": "MIT",
     "scripts": {
-        "format": "make format",
+        "format": "biome format --write src",
+        "lint": "biome lint --apply src",
         "precommit": "lint-staged",
-        "test": "jest",
-        "watch-test": "make watch-test",
-        "server": "make run",
-        "prepublish": "make build"
+        "test": "cross-env NODE_ENV=test vitest",
+        "server": "node ./bin/json-graphql-server.js example/data.js",
+        "prepublish": "yarn build",
+        "build": "yarn build-ts && yarn build-esm-cjs && yarn build-node && yarn build-umd",
+        "build-ts": "tsc",
+        "build-esm-cjs": "vite build",
+        "build-node": "vite build -c ./vite.config.node.js",
+        "build-umd": "vite build -c ./vite.config.umd.js"
     },
     "lint-staged": {
-        "src/**/*.js": [
-            "eslint --fix",
-            "git add"
+        "*.{js,jsx,ts,tsx}": [
+            "biome lint --apply",
+            "biome format --write"
         ]
     },
     "devDependencies": {
-        "@types/jest": "^29.5.12",
-        "babel-eslint": "^10.0.3",
-        "babel-jest": "^29.7.0",
-        "eslint": "^9.0.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-prettier": "^5.1.3",
+        "@biomejs/biome": "1.7.0",
+        "@types/express": "^4.17.21",
+        "cross-env": "^7.0.3",
         "husky": "^9.0.11",
-        "jest": "^29.7.0",
         "lint-staged": "^15.2.2",
-        "prettier": "^3.2.5",
         "supertest": "^6.3.4",
-        "vite": "^5.2.8"
+        "typescript": "^5.5.4",
+        "vite": "^5.2.8",
+        "vitest": "^2.0.5"
     },
     "dependencies": {
         "@apollo/client": "^3.9.11",
@@ -63,14 +63,12 @@
         "express": "^4.17.3",
         "graphql": "^16.8.1",
         "graphql-http": "^1.22.1",
-        "graphql-tag": "^2.12.6",
         "graphql-type-json": "^0.3.2",
         "inflection": "^3.0.0",
         "lodash.merge": "^4.6.2",
-        "reify": "^0.20.12",
         "xhr-mock": "^2.5.1"
     },
     "bin": {
         "json-graphql-server": "bin/json-graphql-server.cjs"
     }
-}
+}

example/data.js example/data.cjs

@@ -0,0 +1,15 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { SchemaLink } from '@apollo/client/link/schema';
+import getSchemaFromData from './introspection/getSchemaFromData';
+import type { Data } from './types';
+
+export default (data: Data) => {
+    const schema = getSchemaFromData(data);
+
+    const client = new ApolloClient({
+        cache: new InMemoryCache(),
+        link: new SchemaLink({ schema }),
+    });
+
+    return client;
+};

package.json

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        JsonGraphqlServer: object;
+        jsonSchemaBuilder: object;
+    }
+}
+export default global;

src/client.js src/client.ts

@@ -1,5 +1,6 @@
 import mock, { proxy } from 'xhr-mock';
 import handleRequestFactory from './handleRequest';
+import type { Data } from './types';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql
@@ -40,7 +41,7 @@ import handleRequestFactory from './handleRequest';
  * GraphQLClientServer(data);
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
-export default function ({ data, url }) {
+export default function ({ data, url }: { data: Data; url: string }) {
     const handleRequest = handleRequestFactory(data);
 
     return {
@@ -62,7 +63,7 @@ export default function ({ data, url }) {
 
                             resolve(res);
                         });
-                    })
+                    }),
             );
 
             // Ensure all other requests are handled by the default XmlHttpRequest

src/createApolloClient.js

@@ -1,15 +1,17 @@
-export const graphiqlHandler = (req, res) => {
+import type { Handler } from 'express';
+
+export const graphiqlHandler: Handler = (_, res) => {
     res.writeHead(200, undefined, {
         'Content-Type': 'text/html; charset=utf-8',
     });
     return res.end(
         getGraphiqlHtml({
             endpoint: '/',
-        })
+        }),
     );
 };
 
-const getGraphiqlHtml = ({ endpoint }) => `
+const getGraphiqlHtml = ({ endpoint }: { endpoint: string }) => `
 <!--
  *  Copyright (c) 2021 GraphQL Contributors
  *  All rights reserved.
@@ -83,4 +85,4 @@ const getGraphiqlHtml = ({ endpoint }) => `
       );
     </script>
   </body>
-</html>`;
+</html>`;

src/createApolloClient.ts

@@ -1,5 +1,6 @@
 import { graphql } from 'graphql';
 import schemaBuilder from './schemaBuilder';
+import type { Data } from './types';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql
@@ -40,9 +41,9 @@ import schemaBuilder from './schemaBuilder';
  * GraphQLClientServer(data);
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
-export default function (data) {
+export default function (data: Data) {
     const schema = schemaBuilder(data);
-    return (url, opts = {}) => {
+    return (url: any, opts: any = {}) => {
         let body = opts.body;
 
         if (url.requestBody) {
@@ -54,7 +55,7 @@ export default function (data) {
         return graphql({
             schema,
             source: query.query,
-            variableValues: query.variables
+            variableValues: query.variables,
         }).then(
             (result) => ({
                 status: 200,
@@ -65,7 +66,7 @@ export default function (data) {
                 status: 500,
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(error),
-            })
+            }),
         );
     };
 }

src/global.d.ts

@@ -3,7 +3,7 @@ import { Kind } from 'graphql/language';
 
 const ISO_DATE_STRING_PATTERN = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
 
-export const isISODateString = (value) => {
+export const isISODateString = (value: any) => {
     if (typeof value !== 'string') return false;
     if (!ISO_DATE_STRING_PATTERN.test(value)) return false;
     const d = new Date(value);
@@ -15,11 +15,11 @@ export const GraphQLDate = 'Date';
 export default new GraphQLScalarType({
     name: GraphQLDate,
     description: 'Date type',
-    parseValue(value) {
+    parseValue(value: any) {
         // value comes from the client
         return new Date(value); // sent to resolvers
     },
-    serialize(value) {
+    serialize(value: any) {
         // value comes from resolvers
         if (isISODateString(value)) return value;
         return value.toISOString(); // sent to the client
@@ -30,11 +30,15 @@ export default new GraphQLScalarType({
         if (ast.kind !== Kind.STRING) {
             throw new GraphQLError(
                 `Query error: Can only parse dates strings, got a: ${ast.kind}`,
-                [ast]
+                {
+                    nodes: [ast],
+                },
             );
         }
-        if (isNaN(Date.parse(ast.value))) {
-            throw new GraphQLError(`Query error: not a valid date`, [ast]);
+        if (Number.isNaN(Date.parse(ast.value))) {
+            throw new GraphQLError('Query error: not a valid date', {
+                nodes: [ast],
+            });
         }
         return new Date(ast.value);
     },

src/graphQLClientServer.js src/graphQLClientServer.ts

@@ -7,7 +7,7 @@ test('does infer field types', () => {
             { id: 1, foo: 'foo1' },
             { id: 2, foo: 'foo2', bar: 'bar1' },
             { id: 3, bar: 'bar2' },
-        ])
+        ]),
     ).toEqual({
         id: { type: new GraphQLNonNull(GraphQLID) },
         foo: { type: GraphQLString },