From c0f61647bb5f6521402e78e08da3e49a26f641c0 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Thu, 14 Jan 2021 10:49:06 +0100 Subject: [PATCH] New export of --- packages/auth/src/useAuth.ts | 2 +- packages/cli/src/commands/generate/auth/auth.js | 16 +++++++++------- packages/core/config/webpack.common.js | 7 +++++++ .../create-redwood-app/template/web/src/index.js | 7 ++++--- packages/testing/src/MockProviders.tsx | 6 +++--- packages/testing/tsconfig.json | 3 ++- packages/web/package.json | 6 +++++- packages/web/src/components/apollo.ts | 6 ++++++ packages/web/src/flash/README.md | 4 ++-- packages/web/src/index.ts | 1 - 10 files changed, 39 insertions(+), 19 deletions(-) create mode 100644 packages/web/src/components/apollo.ts diff --git a/packages/auth/src/useAuth.ts b/packages/auth/src/useAuth.ts index 6d486c126257..119d0bfdc06d 100644 --- a/packages/auth/src/useAuth.ts +++ b/packages/auth/src/useAuth.ts @@ -12,7 +12,7 @@ declare global { /** * Global reference to @redwoodjs/auth's `useAuth` hook for zero-config authentication. * This is used as the default value for `useAuth` in @redwoodjs/router's `Router`, - * and @redwoodjs/web's `RedwoodProvider` so that the user no longer has to pass + * and @redwoodjs/web's `RedwoodApolloProvider` so that the user no longer has to pass * in the value. */ __REDWOOD__USE_AUTH: () => AuthContextInterface diff --git a/packages/cli/src/commands/generate/auth/auth.js b/packages/cli/src/commands/generate/auth/auth.js index f3acacd8b5e3..5903c35e4897 100644 --- a/packages/cli/src/commands/generate/auth/auth.js +++ b/packages/cli/src/commands/generate/auth/auth.js @@ -49,12 +49,14 @@ const addWebInit = (content, init) => { // returns the content of index.js with added const addWebRender = (content, authProvider) => { - const [_, indent, redwoodProvider] = content.match( - /(\s+)(.*<\/RedwoodProvider>)/s + const [_, indent, redwoodApolloProvider] = content.match( + /(\s+)(.*<\/RedwoodApolloProvider>)/s ) - const redwoodProviderLines = redwoodProvider.split('\n').map((line) => { - return ' ' + line - }) + const redwoodApolloProviderLines = redwoodApolloProvider + .split('\n') + .map((line) => { + return ' ' + line + }) const customRenderOpen = (authProvider.render || []).reduce( (acc, component) => acc + indent + `<${component}>`, '' @@ -70,13 +72,13 @@ const addWebRender = (content, authProvider) => { indent + `` + indent + - redwoodProviderLines.join('\n') + + redwoodApolloProviderLines.join('\n') + indent + `` + customRenderClose return content.replace( - /\s+.*<\/RedwoodProvider>/s, + /\s+.*<\/RedwoodApolloProvider>/s, renderContent ) } diff --git a/packages/core/config/webpack.common.js b/packages/core/config/webpack.common.js index 265d2b191911..dd3b928ba442 100644 --- a/packages/core/config/webpack.common.js +++ b/packages/core/config/webpack.common.js @@ -175,6 +175,13 @@ module.exports = (webpackEnv) => { 'node_modules', 'styled-components' ), + // This is needed because we don't yet have support for this: + // https://webpack.js.org/guides/package-exports/ + '@redwoodjs/web/apollo': path.resolve( + redwoodPaths.base, + 'node_modules', + '@redwoodjs/web/dist/components/apollo' + ), react: path.resolve(redwoodPaths.base, 'node_modules', 'react'), }, }, diff --git a/packages/create-redwood-app/template/web/src/index.js b/packages/create-redwood-app/template/web/src/index.js index 50820d4cd181..71679f7fd4b7 100644 --- a/packages/create-redwood-app/template/web/src/index.js +++ b/packages/create-redwood-app/template/web/src/index.js @@ -1,6 +1,7 @@ import ReactDOM from 'react-dom' -import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web' +import { FatalErrorBoundary } from '@redwoodjs/web' +import { RedwoodApolloProvider } from '@redwoodjs/web/apollo' import FatalErrorPage from 'src/pages/FatalErrorPage' import Routes from 'src/Routes' @@ -9,9 +10,9 @@ import './index.css' ReactDOM.render( - + - + , document.getElementById('redwood-app') ) diff --git a/packages/testing/src/MockProviders.tsx b/packages/testing/src/MockProviders.tsx index 0c90ab9bf5cc..a03026da526c 100644 --- a/packages/testing/src/MockProviders.tsx +++ b/packages/testing/src/MockProviders.tsx @@ -6,7 +6,7 @@ import React from 'react' import { AuthProvider } from '@redwoodjs/auth' import type { AuthContextInterface } from '@redwoodjs/auth' -import { RedwoodProvider } from '@redwoodjs/web' +import { RedwoodApolloProvider } from '@redwoodjs/web/apollo' import { mockedUserMeta } from './mockRequests' @@ -53,10 +53,10 @@ export const mockAuthClient = { export const MockProviders: React.FunctionComponent = ({ children }) => { return ( - + {children} - + ) } diff --git a/packages/testing/tsconfig.json b/packages/testing/tsconfig.json index 6cf930367c9e..1b4a9eeab9c1 100644 --- a/packages/testing/tsconfig.json +++ b/packages/testing/tsconfig.json @@ -6,7 +6,8 @@ "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo", "outDir": "dist", "paths": { - "src/*": ["./src/*"] + "src/*": ["./src/*"], + "@redwoodjs/web/apollo": ["../web/dist/components/apollo"] } }, "include": [ diff --git a/packages/web/package.json b/packages/web/package.json index b5d95232a51f..d3316c9ec28e 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -4,7 +4,11 @@ "files": [ "dist" ], - "main": "dist/index.js", + "main": "./dist/index.js", + "exports": { + ".": "./dist/index.js", + "./apollo": "./dist/components/apollo.js" + }, "types": "dist/index.d.ts", "license": "MIT", "dependencies": { diff --git a/packages/web/src/components/apollo.ts b/packages/web/src/components/apollo.ts new file mode 100644 index 000000000000..58fccec29770 --- /dev/null +++ b/packages/web/src/components/apollo.ts @@ -0,0 +1,6 @@ +// We link to this file using "paths" in testing/tsconfig.js because TS +// doesn't support "exports" in package.json yet. When that is resolved +// this file should stay, but the config in tsconfig.json should be +// removed. +// See https://github.com/microsoft/TypeScript/issues/33079 +export { RedwoodApolloProvider } from './RedwoodApolloProvider' diff --git a/packages/web/src/flash/README.md b/packages/web/src/flash/README.md index 8843c1fe26a7..02d05c36be6d 100644 --- a/packages/web/src/flash/README.md +++ b/packages/web/src/flash/README.md @@ -10,7 +10,7 @@ Flash makes use of [React's Context API](https://reactjs.org/docs/context.html) ## FlashContext -FlashContext is the headquarters for Redwood's Flash system. Its provider component is packaged with the `` component which makes it ready to use out of the box. Your components can pass (think, "send and recieve") message objects by subscribing to it via the provided [useFlash](#useflash) hook. +FlashContext is the headquarters for Redwood's Flash system. Its provider component is packaged with the `` component which makes it ready to use out of the box. Your components can pass (think, "send and recieve") message objects by subscribing to it via the provided [useFlash](#useflash) hook. FlashContext provides update functions which allow subscribed components to send and manipulate message objects. Subscribers can [consume](#consume-messages), [add](#add-a-message), [dismiss](#dismiss-a-message), and [cycle messages](#cycle-a-message). @@ -159,7 +159,7 @@ const Message = ({ message }) => { ## useFlash -`useFlash` is an abridgment of `React.useContext(FlashContext)`. It allows you to subscribe to FlashContext's properties and functions from within any component nested within ``. +`useFlash` is an abridgment of `React.useContext(FlashContext)`. It allows you to subscribe to FlashContext's properties and functions from within any component nested within ``. ```js import { useFlash } from '@redwoodjs/web' diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts index 72c3e2164378..22ccab8549ac 100644 --- a/packages/web/src/index.ts +++ b/packages/web/src/index.ts @@ -2,7 +2,6 @@ import './global.web-auto-imports' import './config' export { default as FatalErrorBoundary } from './components/FatalErrorBoundary' -export { RedwoodApolloProvider as RedwoodProvider } from './components/RedwoodApolloProvider' export { FetchConfigProvider, useFetchConfig,