Merge branch 'main' of github.com:redwoodjs/redwood into feat/api-ski…

…p-prebuild-try-2 * 'main' of github.com:redwoodjs/redwood: Fastify config: Use exact file extension in log message (redwoodjs#9828) Remove unused Fastify plugin (redwoodjs#9827) Add trusted-documents to fragments CI smoke-test (redwoodjs#9826) prerender: Enable Trusted Documents support (redwoodjs#9825) trustedDocuments.test.ts: Format source cli: add missing dep jscodeshift (redwoodjs#9823) graphql setup fragments: Move telemetry to main handler (redwoodjs#9819) feat: Adds Setup CLI Command to Configure GraphQL Trusted Documents (redwoodjs#9800) Update cli tsconfig to reference used packages (redwoodjs#9822) fragments setup: newline fix + refactor->rename (redwoodjs#9821) yarn rw setup graphql fragments (redwoodjs#9811)
dac09 · Jan 15, 2024 · 2e82513 · 2e82513
2 parents 2fd6b9a + 597e673
commit 2e82513
Show file tree

Hide file tree

Showing 71 changed files with 3,341 additions and 54 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
     'packages/babel-config/src/__tests__/__fixtures__/**/*',
     'packages/core/**/__fixtures__/**/*',
     'packages/codemods/**/__testfixtures__/**/*',
+    'packages/cli/**/__testfixtures__/**/*',
     'packages/core/config/storybook/**/*',
     'packages/studio/dist-*/**/*',
   ],

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -780,6 +780,18 @@ jobs:
           REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
           REDWOOD_DISABLE_TELEMETRY: 1
 
+      - name: Enable trusted-documents in Fragments test project
+        run: npx -y tsx ./tasks/test-project/set-up-trusted-documents ${{ steps.set-up-test-project.outputs.test-project-path }}
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 📄 Run prerender smoke tests against Fragments test project (with trusted-documents enabled)
+        working-directory: tasks/smoke-tests/prerender
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: ${{ steps.set-up-test-project.outputs.test-project-path }}
+          REDWOOD_DISABLE_TELEMETRY: 1
+
   fragments-smoke-tests-skip:
     needs: detect-changes
 

diff --git a/docs/docs/cli-commands.md b/docs/docs/cli-commands.md
@@ -1999,11 +1999,76 @@ We perform a simple compatibility check in an attempt to make you aware of poten
 
 It's the author of the npm package's responsibility to specify the correct compatibility range, so **you should always research the packages you use with this command**. Especially since they will be executing code on your machine!
 
+### setup graphql
+
+This command creates the necessary files to support GraphQL features like fragments and trusted documents.
+
+#### Usage
+
+Run `yarn rw setup graphql <feature>`
+
+#### setup graphql fragments
+
+This command creates the necessary configuration to start using [GraphQL Fragments](./graphql/fragments.md).
+
+```
+yarn redwood setup graphql fragments
+```
+
+| Arguments & Options | Description                              |
+| :------------------ | :--------------------------------------- |
+| `--force, -f`       | Overwrite existing files and skip checks |
+
+#### Usage
+
+Run `yarn rw setup graphql fragments`
+
+#### Example
+
+```bash
+~/redwood-app$ yarn rw setup graphql fragments
+✔ Update Redwood Project Configuration to enable GraphQL Fragments
+✔ Generate possibleTypes.ts
+✔ Import possibleTypes in App.tsx
+✔ Add possibleTypes to the GraphQL cache config
+```
+
+#### setup graphql trusted-documents
+
+This command creates the necessary configuration to start using [GraphQL Trusted Documents](./graphql/trusted-documents.md).
+
+
+```
+yarn redwood setup graphql trusted-documents
+```
+
+#### Usage
+
+Run `yarn rw setup graphql trusted-documents`
+
+#### Example
+
+```bash
+~/redwood-app$ yarn rw setup graphql trusted-documents
+✔ Update Redwood Project Configuration to enable GraphQL Trusted Documents ...
+✔ Generating Trusted Documents store ...
+✔ Configuring the GraphQL Handler to use a Trusted Documents store ...
+```
+
+
+If you have not setup the RedwoodJS server file, it will be setup:
+
+```bash
+✔ Adding the experimental server file...
+✔ Adding config to redwood.toml...
+✔ Adding required api packages...
+```
+
+
 ### setup realtime
 
 This command creates the necessary files, installs the required packages, and provides examples to setup RedwoodJS Realtime from GraphQL live queries and subscriptions. See the Realtime docs for more information.
 
-
 ```
 yarn redwood setup realtime
 ```

diff --git a/docs/docs/graphql/fragments.md b/docs/docs/graphql/fragments.md
@@ -83,6 +83,12 @@ With `registerFragment`, you can register a fragment with the registry and get b
 
 which can then be used to work with the registered fragment.
 
+### Setup
+
+`yarn rw setup graphql fragments`
+
+See more in [cli commands - setup graphql fragments](../cli-commands.md#setup-graphql-fragments).
+
 ### registerFragment
 
 To register a fragment, you can simply register it with `registerFragment`.
@@ -200,7 +206,7 @@ the `getCacheKey` is a function where `getCacheKey(42)` would return `Book:42`.
 import { registerFragment } from '@redwoodjs/web/apollo'
 
 const { useRegisteredFragment } = registerFragment(
-...
+  // ...
 )
 ```
 
@@ -281,17 +287,19 @@ To make this easier to maintain, RedwoodJS GraphQL CodeGen automatically generat
 
 
 ```ts
+// web/src/App.tsx
+
 import possibleTypes from 'src/graphql/possibleTypes'
 
-...
-/// web/src/App.tsx
-<RedwoodApolloProvider
-  graphQLClientConfig={{
-    cacheConfig: {
-      ...possibleTypes,
-    },
-  }}
->
+// ...
+
+const graphQLClientConfig = {
+  cacheConfig: {
+    ...possibleTypes,
+  },
+}
+
+<RedwoodApolloProvider graphQLClientConfig={graphQLClientConfig}>
 ```
 
 To generate the `src/graphql/possibleTypes` file, enable fragments in `redwood.toml`:

diff --git a/docs/docs/graphql/trusted-documents.md b/docs/docs/graphql/trusted-documents.md
@@ -93,6 +93,11 @@ Thus preventing unwanted queries or GraphQl traversal attacks,
 
 ## Configure Trusted Documents
 
+Below are instructions to manually configure Trusted Documents in your RedwoodJS project.
+
+Alternatively, you can use the `yarn redwood setup graphql trusted-documents` [CLI setup command](../cli-commands.md#setup-graphql-trusted-docs).
+
+
 ### Configure redwood.toml
 
 Setting `trustedDocuments` to true will

diff --git a/packages/cli-helpers/src/lib/index.ts b/packages/cli-helpers/src/lib/index.ts
@@ -54,7 +54,17 @@ export const transformTSToJS = (filename: string, content: string) => {
  */
 export const prettierOptions = () => {
   try {
-    return require(path.join(getPaths().base, 'prettier.config.js'))
+    const options = require(path.join(getPaths().base, 'prettier.config.js'))
+
+    if (options.tailwindConfig?.startsWith('.')) {
+      // Make this work with --cwd
+      options.tailwindConfig = path.join(
+        process.env.RWJS_CWD ?? process.cwd(),
+        options.tailwindConfig
+      )
+    }
+
+    return options
   } catch (e) {
     return undefined
   }

diff --git a/packages/cli/jest.config.js b/packages/cli/jest.config.js
diff --git a/packages/cli/jest.config.ts b/packages/cli/jest.config.ts
@@ -0,0 +1,39 @@
+import type { Config } from 'jest'
+
+const config: Config = {
+  projects: [
+    {
+      displayName: 'root',
+      testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
+      testPathIgnorePatterns: [
+        '__fixtures__',
+        '__testfixtures__',
+        '__codemod_tests__',
+        '__tests__/utils/*',
+        '__tests__/fixtures/*',
+        '.d.ts',
+        'dist',
+      ],
+      moduleNameMapper: {
+        '^src/(.*)': '<rootDir>/src/$1',
+      },
+      setupFilesAfterEnv: ['./jest.setup.js'],
+    },
+    {
+      displayName: 'setup codemods',
+      testMatch: ['**/commands/setup/**/__codemod_tests__/*.ts'],
+      testPathIgnorePatterns: [
+        '__fixtures__',
+        '__testfixtures__',
+        '__tests__/utils/*',
+        '__tests__/fixtures/*',
+        '.d.ts',
+        'dist',
+      ],
+      setupFilesAfterEnv: ['./src/jest.codemods.setup.ts'],
+    },
+  ],
+  testTimeout: 20_000,
+}
+
+export default config
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -19,7 +19,7 @@
   "scripts": {
     "build": "yarn build:js",
     "build:clean-dist": "rimraf 'dist/**/*/__tests__' --glob",
-    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --copy-files --no-copy-ignored && yarn build:clean-dist",
+    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --ignore \"src/**/__tests__/**\" --ignore \"src/**/__testfixtures__/**\" --copy-files --no-copy-ignored && yarn build:clean-dist",
     "build:pack": "yarn pack -o redwoodjs-cli.tgz",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx,template\" --ignore dist --exec \"yarn build && yarn fix:permissions\"",
     "dev": "RWJS_CWD=../../__fixtures__/example-todo-main node dist/index.js",
@@ -63,6 +63,7 @@
     "fast-glob": "3.3.2",
     "fs-extra": "11.2.0",
     "humanize-string": "2.1.0",
+    "jscodeshift": "0.15.0",
     "latest-version": "5.1.0",
     "listr2": "6.6.1",
     "lodash": "4.17.21",

diff --git a/...commands/setup/graphql/features/fragments/__codemod_tests__/appGqlConfigTransform.test.ts b/...commands/setup/graphql/features/fragments/__codemod_tests__/appGqlConfigTransform.test.ts
@@ -0,0 +1,101 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { findUp } from '@redwoodjs/project-config'
+
+describe('fragments graphQLClientConfig', () => {
+  test('App.tsx with no graphQLClientConfig', async () => {
+    await matchFolderTransform('appGqlConfigTransform', 'config-simple', {
+      useJsCodeshift: true,
+    })
+  })
+
+  test('App.tsx with existing inline graphQLClientConfig', async () => {
+    await matchFolderTransform('appGqlConfigTransform', 'existingPropInline', {
+      useJsCodeshift: true,
+    })
+  })
+
+  test('App.tsx with existing graphQLClientConfig in separate variable', async () => {
+    await matchFolderTransform(
+      'appGqlConfigTransform',
+      'existingPropVariable',
+      {
+        useJsCodeshift: true,
+      }
+    )
+  })
+
+  test('App.tsx with existing graphQLClientConfig in separate variable, without cacheConfig property', async () => {
+    await matchFolderTransform(
+      'appGqlConfigTransform',
+      'existingPropVariableNoCacheConfig',
+      {
+        useJsCodeshift: true,
+      }
+    )
+  })
+
+  test('App.tsx with existing graphQLClientConfig in separate variable with non-standard name', async () => {
+    await matchFolderTransform(
+      'appGqlConfigTransform',
+      'existingPropVariableCustomName',
+      {
+        useJsCodeshift: true,
+      }
+    )
+  })
+
+  test('test-project App.tsx', async () => {
+    const rootFwPath = path.dirname(findUp('lerna.json') || '')
+    const testProjectAppTsx = fs.readFileSync(
+      path.join(
+        rootFwPath,
+        '__fixtures__',
+        'test-project',
+        'web',
+        'src',
+        'App.tsx'
+      ),
+      'utf-8'
+    )
+    await matchInlineTransformSnapshot(
+      'appGqlConfigTransform',
+      testProjectAppTsx,
+      `import { FatalErrorBoundary, RedwoodProvider } from \"@redwoodjs/web\";
+      import { RedwoodApolloProvider } from \"@redwoodjs/web/apollo\";
+
+      import FatalErrorPage from \"src/pages/FatalErrorPage\";
+      import Routes from \"src/Routes\";
+
+      import { AuthProvider, useAuth } from \"./auth\";
+
+      import \"./scaffold.css\";
+      import \"./index.css\";
+
+      const graphQLClientConfig = {
+        cacheConfig: {
+          possibleTypes: possibleTypes.possibleTypes,
+        },
+      };
+
+      const App = () => (
+        <FatalErrorBoundary page={FatalErrorPage}>
+          <RedwoodProvider titleTemplate=\"%PageTitle | %AppTitle\">
+            <AuthProvider>
+              <RedwoodApolloProvider
+                useAuth={useAuth}
+                graphQLClientConfig={graphQLClientConfig}
+              >
+                <Routes />
+              </RedwoodApolloProvider>
+            </AuthProvider>
+          </RedwoodProvider>
+        </FatalErrorBoundary>
+      );
+
+      export default App;
+      `
+    )
+  })
+})
diff --git a/...rc/commands/setup/graphql/features/fragments/__codemod_tests__/appImportTransform.test.ts b/...rc/commands/setup/graphql/features/fragments/__codemod_tests__/appImportTransform.test.ts
@@ -0,0 +1,13 @@
+describe('fragments possibleTypes import', () => {
+  test('Default App.tsx', async () => {
+    await matchFolderTransform('appImportTransform', 'import-simple', {
+      useJsCodeshift: true,
+    })
+  })
+
+  test('App.tsx with existing import', async () => {
+    await matchFolderTransform('appImportTransform', 'existingImport', {
+      useJsCodeshift: true,
+    })
+  })
+})
diff --git a/...rc/commands/setup/graphql/features/fragments/__testfixtures__/config-simple/input/App.tsx b/...rc/commands/setup/graphql/features/fragments/__testfixtures__/config-simple/input/App.tsx
@@ -0,0 +1,22 @@
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+
+import possibleTypes from 'src/graphql/possibleTypes'
+
+import FatalErrorPage from 'src/pages/FatalErrorPage'
+import Routes from 'src/Routes'
+
+import './scaffold.css'
+import './index.css'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App