From 9e411290a7b1f2e6489050103ab52f7258ace375 Mon Sep 17 00:00:00 2001 From: Jayden Seric Date: Fri, 6 Dec 2019 12:59:32 +1100 Subject: [PATCH] Use file extensions in import specifiers and require paths. --- changelog.md | 1 + package.json | 1 + src/server/.babelrc.js | 2 +- src/server/index.mjs | 2 +- src/server/ssr.mjs | 2 +- src/test/.babelrc.js | 2 +- src/test/GraphQL.mjs | 8 ++++---- src/test/graphqlFetchOptions.mjs | 2 +- src/test/hashObject.mjs | 2 +- src/test/ssr.mjs | 12 ++++++------ src/test/useGraphQL.mjs | 16 ++++++++-------- src/universal/.babelrc.js | 3 ++- src/universal/GraphQL.mjs | 4 ++-- src/universal/GraphQLProvider.mjs | 6 +++--- src/universal/index.mjs | 10 +++++----- src/universal/useGraphQL.mjs | 10 +++++----- 16 files changed, 43 insertions(+), 40 deletions(-) diff --git a/changelog.md b/changelog.md index 34175f9..2ad4f00 100644 --- a/changelog.md +++ b/changelog.md @@ -5,6 +5,7 @@ ### Patch - Updated dependencies. +- Added a new [`babel-plugin-transform-require-extensions`](https://npm.im/babel-plugin-transform-require-extensions) dev dependency and ensured ESM import specifiers in both source and published `.mjs` files contain file names with extensions, which [are mandatory in the final Node.js ESM implementation](https://nodejs.org/api/esm.html#esm_mandatory_file_extensions). Published CJS `.js` files now also have file extensions in `require` paths. - Tidied Babel configs. - Readme “Apollo comparison” section corrections and tweaks. diff --git a/package.json b/package.json index 1377449..cca938f 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@size-limit/preset-small-lib": "^2.2.2", "babel-eslint": "^10.0.2", "babel-plugin-transform-replace-object-assign": "^2.0.0", + "babel-plugin-transform-require-extensions": "^1.0.1", "cross-fetch": "^3.0.4", "eslint": "^6.7.2", "eslint-config-env": "^11.0.1", diff --git a/src/server/.babelrc.js b/src/server/.babelrc.js index 01e261d..3d75a0e 100644 --- a/src/server/.babelrc.js +++ b/src/server/.babelrc.js @@ -11,5 +11,5 @@ module.exports = { } ] ], - plugins: ['@babel/transform-runtime'] + plugins: ['@babel/transform-runtime', 'transform-require-extensions'] } diff --git a/src/server/index.mjs b/src/server/index.mjs index 26c04e3..c8aba06 100644 --- a/src/server/index.mjs +++ b/src/server/index.mjs @@ -1 +1 @@ -export { ssr } from './ssr' +export { ssr } from './ssr.mjs' diff --git a/src/server/ssr.mjs b/src/server/ssr.mjs index cf64d4c..22e1a33 100644 --- a/src/server/ssr.mjs +++ b/src/server/ssr.mjs @@ -1,5 +1,5 @@ import ReactDOMServer from 'react-dom/server' -import { GraphQL } from '../universal/GraphQL' +import { GraphQL } from '../universal/GraphQL.mjs' /** * Asynchronously server side renders a [React node]{@link ReactNode}, diff --git a/src/test/.babelrc.js b/src/test/.babelrc.js index a160805..5c0b0b6 100644 --- a/src/test/.babelrc.js +++ b/src/test/.babelrc.js @@ -12,5 +12,5 @@ module.exports = { ], '@babel/react' ], - plugins: ['@babel/transform-runtime'] + plugins: ['@babel/transform-runtime', 'transform-require-extensions'] } diff --git a/src/test/GraphQL.mjs b/src/test/GraphQL.mjs index 049306a..1fb35ac 100644 --- a/src/test/GraphQL.mjs +++ b/src/test/GraphQL.mjs @@ -2,10 +2,10 @@ import 'cross-fetch/polyfill' import { GraphQLInt } from 'graphql' import Koa from 'koa' import t from 'tap' -import { GraphQL } from '../universal/GraphQL' -import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp' -import { promisifyEvent } from './helpers/promisifyEvent' -import { startServer } from './helpers/startServer' +import { GraphQL } from '../universal/GraphQL.mjs' +import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs' +import { promisifyEvent } from './helpers/promisifyEvent.mjs' +import { startServer } from './helpers/startServer.mjs' t.test('GraphQL.cache population via `cache` constructor option', t => { const cache = { diff --git a/src/test/graphqlFetchOptions.mjs b/src/test/graphqlFetchOptions.mjs index 1b8d8b2..105a822 100644 --- a/src/test/graphqlFetchOptions.mjs +++ b/src/test/graphqlFetchOptions.mjs @@ -1,7 +1,7 @@ import { ReactNativeFile } from 'extract-files' import FormData from 'formdata-node' import t from 'tap' -import { graphqlFetchOptions } from '../universal/graphqlFetchOptions' +import { graphqlFetchOptions } from '../universal/graphqlFetchOptions.mjs' // Global FormData polyfill. global.FormData = FormData diff --git a/src/test/hashObject.mjs b/src/test/hashObject.mjs index efe1df8..6e61791 100644 --- a/src/test/hashObject.mjs +++ b/src/test/hashObject.mjs @@ -1,6 +1,6 @@ import FormData from 'formdata-node' import t from 'tap' -import { hashObject } from '../universal/hashObject' +import { hashObject } from '../universal/hashObject.mjs' // Global FormData polyfill. global.FormData = FormData diff --git a/src/test/ssr.mjs b/src/test/ssr.mjs index 934b2af..357ba25 100644 --- a/src/test/ssr.mjs +++ b/src/test/ssr.mjs @@ -1,12 +1,12 @@ import 'cross-fetch/polyfill' import React from 'react' import t from 'tap' -import { ssr } from '../server/ssr' -import { GraphQL } from '../universal/GraphQL' -import { GraphQLContext } from '../universal/GraphQLContext' -import { useGraphQL } from '../universal/useGraphQL' -import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp' -import { startServer } from './helpers/startServer' +import { ssr } from '../server/ssr.mjs' +import { GraphQL } from '../universal/GraphQL.mjs' +import { GraphQLContext } from '../universal/GraphQLContext.mjs' +import { useGraphQL } from '../universal/useGraphQL.mjs' +import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs' +import { startServer } from './helpers/startServer.mjs' t.test('ssr() argument validation', async t => { const graphql = new GraphQL() diff --git a/src/test/useGraphQL.mjs b/src/test/useGraphQL.mjs index 7c4f293..bd74b14 100644 --- a/src/test/useGraphQL.mjs +++ b/src/test/useGraphQL.mjs @@ -3,14 +3,14 @@ import React from 'react' import ReactDOMServer from 'react-dom/server' import ReactTestRenderer from 'react-test-renderer' import t from 'tap' -import { GraphQL } from '../universal/GraphQL' -import { GraphQLContext } from '../universal/GraphQLContext' -import { GraphQLProvider } from '../universal/GraphQLProvider' -import { useGraphQL } from '../universal/useGraphQL' -import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp' -import { promisifyEvent } from './helpers/promisifyEvent' -import { sleep } from './helpers/sleep' -import { startServer } from './helpers/startServer' +import { GraphQL } from '../universal/GraphQL.mjs' +import { GraphQLContext } from '../universal/GraphQLContext.mjs' +import { GraphQLProvider } from '../universal/GraphQLProvider.mjs' +import { useGraphQL } from '../universal/useGraphQL.mjs' +import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs' +import { promisifyEvent } from './helpers/promisifyEvent.mjs' +import { sleep } from './helpers/sleep.mjs' +import { startServer } from './helpers/startServer.mjs' t.test('useGraphQL()', async t => { const port = await startServer(t, createGraphQLKoaApp()) diff --git a/src/universal/.babelrc.js b/src/universal/.babelrc.js index b635448..d5f12ef 100644 --- a/src/universal/.babelrc.js +++ b/src/universal/.babelrc.js @@ -16,6 +16,7 @@ module.exports = { plugins: [ ['@babel/proposal-object-rest-spread', { loose: true, useBuiltIns: true }], ['@babel/proposal-class-properties', { loose: true }], - '@babel/transform-runtime' + '@babel/transform-runtime', + 'transform-require-extensions' ] } diff --git a/src/universal/GraphQL.mjs b/src/universal/GraphQL.mjs index b2a629b..2ad9bd4 100644 --- a/src/universal/GraphQL.mjs +++ b/src/universal/GraphQL.mjs @@ -1,6 +1,6 @@ import mitt from 'mitt' -import { graphqlFetchOptions } from './graphqlFetchOptions' -import { hashObject } from './hashObject' +import { graphqlFetchOptions } from './graphqlFetchOptions.mjs' +import { hashObject } from './hashObject.mjs' /** * A lightweight GraphQL client that caches queries and mutations. diff --git a/src/universal/GraphQLProvider.mjs b/src/universal/GraphQLProvider.mjs index c1a299d..e32df17 100644 --- a/src/universal/GraphQLProvider.mjs +++ b/src/universal/GraphQLProvider.mjs @@ -1,8 +1,8 @@ import PropTypes from 'prop-types' import React from 'react' -import { FirstRenderDateContext } from './FirstRenderDateContext' -import { GraphQL } from './GraphQL' -import { GraphQLContext } from './GraphQLContext' +import { FirstRenderDateContext } from './FirstRenderDateContext.mjs' +import { GraphQL } from './GraphQL.mjs' +import { GraphQLContext } from './GraphQLContext.mjs' /** * A React component that provides a [`GraphQL`]{@link GraphQL} instance for an diff --git a/src/universal/index.mjs b/src/universal/index.mjs index 8d54864..ab9ec40 100644 --- a/src/universal/index.mjs +++ b/src/universal/index.mjs @@ -1,8 +1,8 @@ -export { GraphQL } from './GraphQL' -export { GraphQLContext } from './GraphQLContext' -export { GraphQLProvider } from './GraphQLProvider' -export { useGraphQL } from './useGraphQL' -export { reportCacheErrors } from './reportCacheErrors' +export { GraphQL } from './GraphQL.mjs' +export { GraphQLContext } from './GraphQLContext.mjs' +export { GraphQLProvider } from './GraphQLProvider.mjs' +export { useGraphQL } from './useGraphQL.mjs' +export { reportCacheErrors } from './reportCacheErrors.mjs' /** * A [GraphQL cache]{@link GraphQL#cache} map of GraphQL operation results. diff --git a/src/universal/useGraphQL.mjs b/src/universal/useGraphQL.mjs index eb32dfa..10ba157 100644 --- a/src/universal/useGraphQL.mjs +++ b/src/universal/useGraphQL.mjs @@ -1,9 +1,9 @@ import React from 'react' -import { FirstRenderDateContext } from './FirstRenderDateContext' -import { GraphQL } from './GraphQL' -import { GraphQLContext } from './GraphQLContext' -import { graphqlFetchOptions } from './graphqlFetchOptions' -import { hashObject } from './hashObject' +import { FirstRenderDateContext } from './FirstRenderDateContext.mjs' +import { GraphQL } from './GraphQL.mjs' +import { GraphQLContext } from './GraphQLContext.mjs' +import { graphqlFetchOptions } from './graphqlFetchOptions.mjs' +import { hashObject } from './hashObject.mjs' /** * A [React hook](https://reactjs.org/docs/hooks-intro) to manage a GraphQL