@cedarjs/testing 1.0.0-canary.12316 → 1.0.0-canary.12318

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-commented-exports/code.js

@@ -0,0 +1,28 @@
+export const QUERY = gql`
+  query {
+    posts {
+      id
+      title
+      body
+    }
+  }
+`
+
+// export const beforeQuery = () => ({})
+export const afterQuery = () => ({})
+
+export function Loading() {
+  return 'Loading'
+}
+
+// export function Empty() {
+//   return 'Empty'
+// }
+
+export function Failure({ error }) {
+  return error.message
+}
+
+export const Success = ({ posts }) => {
+  return JSON.stringify(posts, null, 2)
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-commented-exports/output.js

@@ -0,0 +1,35 @@
+import { createCell } from '@cedarjs/web'
+export const QUERY = gql`
+  query {
+    posts {
+      id
+      title
+      body
+    }
+  }
+`
+
+// export const beforeQuery = () => ({})
+export const afterQuery = () => ({})
+export function Loading() {
+  return 'Loading'
+}
+
+// export function Empty() {
+//   return 'Empty'
+// }
+
+export function Failure({ error }) {
+  return error.message
+}
+export const Success = ({ posts }) => {
+  return JSON.stringify(posts, null, 2)
+}
+export default createCell({
+  QUERY,
+  afterQuery,
+  Loading,
+  Failure,
+  Success,
+  displayName: 'code',
+})

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-default-and-other-named-export/code.js

@@ -0,0 +1,7 @@
+export const Success = () => {
+  return 'string'
+}
+
+export default () => {
+  return 'string'
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-default-and-other-named-export/output.js

@@ -0,0 +1,6 @@
+export const Success = () => {
+  return 'string'
+}
+export default () => {
+  return 'string'
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-default-export/code.js

@@ -0,0 +1,3 @@
+export default () => {
+  return 'string'
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-default-export/output.js

@@ -0,0 +1,3 @@
+export default () => {
+  return 'string'
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-required-exports/code.js

@@ -0,0 +1,28 @@
+export const QUERY = gql`
+  query {
+    posts {
+      id
+      title
+      body
+    }
+  }
+`
+
+export const beforeQuery = () => ({})
+export const afterQuery = () => ({})
+
+export function Loading() {
+  return 'Loading'
+}
+
+export function Empty() {
+  return 'Empty'
+}
+
+export function Failure({ error }) {
+  return error.message
+}
+
+export const Success = ({ posts }) => {
+  return JSON.stringify(posts, null, 2)
+}

package/config/jest/babelPlugins/__tests__/__fixtures__/cell/cell-with-required-exports/output.js

@@ -0,0 +1,34 @@
+import { createCell } from '@cedarjs/web'
+export const QUERY = gql`
+  query {
+    posts {
+      id
+      title
+      body
+    }
+  }
+`
+export const beforeQuery = () => ({})
+export const afterQuery = () => ({})
+export function Loading() {
+  return 'Loading'
+}
+export function Empty() {
+  return 'Empty'
+}
+export function Failure({ error }) {
+  return error.message
+}
+export const Success = ({ posts }) => {
+  return JSON.stringify(posts, null, 2)
+}
+export default createCell({
+  QUERY,
+  beforeQuery,
+  afterQuery,
+  Loading,
+  Empty,
+  Failure,
+  Success,
+  displayName: 'code',
+})

package/config/jest/babelPlugins/__tests__/__fixtures__/viteDistDir/client-build-manifest.json

@@ -0,0 +1,59 @@
+{
+  "components/Post/Posts/image1.jpg": {
+    "file": "assets/image1-hash.jpg",
+    "src": "components/Post/Posts/image1.jpg"
+  },
+  "index.css": {
+    "file": "assets/index-3f5e7a04.css",
+    "src": "index.css"
+  },
+  "index.html": {
+    "assets": [
+      "assets/image1-hash.jpg",
+      "assets/image2-hash.jpeg",
+      "assets/image3-hash.png",
+      "assets/image4-hash.bmp",
+      "assets/doc-hash.pdf",
+      "assets/funny-hash.gif"
+    ],
+    "css": [
+      "assets/index-3f5e7a04.css"
+    ],
+    "dynamicImports": [
+      "pages/AboutPage/AboutPage.tsx",
+      "pages/BlogPostPage/BlogPostPage.tsx",
+      "pages/ContactUsPage/ContactUsPage.tsx",
+      "pages/DoublePage/DoublePage.tsx",
+      "pages/ForgotPasswordPage/ForgotPasswordPage.tsx",
+      "pages/Post/PostPage/PostPage.tsx",
+      "pages/Post/PostsPage/PostsPage.tsx"
+    ],
+    "file": "assets/index-abef5d50.js",
+    "isEntry": true,
+    "src": "index.html"
+  },
+  "pages/HomePage/image1.jpg": {
+    "file": "assets/image1-hash.jpg",
+    "src": "components/Post/Posts/image1.jpg"
+  },
+  "pages/HomePage/image2.jpeg": {
+    "file": "assets/image2-hash.jpeg",
+    "src": "pages/HomePage/image2.jpeg"
+  },
+  "pages/HomePage/image3.png": {
+    "file": "assets/image3-hash.png",
+    "src": "pages/HomePage/image3.png"
+  },
+  "pages/HomePage/image4.bmp": {
+    "file": "assets/image4-hash.bmp",
+    "src": "pages/HomePage/image4.bmp"
+  },
+  "pages/HomePage/funny.gif": {
+    "file": "assets/funny-hash.gif",
+    "src": "pages/HomePage/funny.gif"
+  },
+  "pdf/invoice.pdf": {
+    "file": "assets/invoice-7d64ed28.pdf",
+    "src": "pdf/invoice.pdf"
+  }
+}

package/config/jest/babelPlugins/__tests__/babel-plugin-redwood-cell.test.ts

@@ -0,0 +1,11 @@
+import path from 'path'
+
+import pluginTester from 'babel-plugin-tester'
+
+import redwoodCellPlugin from '../babel-plugin-redwood-cell'
+
+pluginTester({
+  plugin: redwoodCellPlugin,
+  pluginName: 'babel-plugin-redwood-cell',
+  fixtures: path.join(__dirname, '__fixtures__/cell'),
+})

package/config/jest/babelPlugins/babel-plugin-redwood-cell.js

@@ -0,0 +1,142 @@
+const { parse } = require('path')
+
+// This wraps a file that has a suffix of `Cell` in Redwood's `createCell` higher
+// order component. The HOC deals with the lifecycle methods during a GraphQL query.
+//
+// ```js
+// import { createCell } from '@cedarjs/web'
+// <YOUR CODE>
+// export default createCell({ QUERY, Loading, Success, Failure, isEmpty, Empty, beforeQuery, afterQuery, displayName })
+// ```
+//
+// To debug the output of the plugin, you can use the following:
+// ```
+// import generate from '@babel/generator'
+// // ...
+// console.log(generate(path.node).code)
+// ```
+
+// A cell can export the declarations below.
+const EXPECTED_EXPORTS_FROM_CELL = [
+  'beforeQuery',
+  'QUERY',
+  'data',
+  'isEmpty',
+  'afterQuery',
+  'Loading',
+  'Success',
+  'Failure',
+  'Empty',
+]
+
+module.exports = function ({ types: t }) {
+  // This array will collect exports from the Cell file during
+  // ExportNamedDeclaration
+  // - collected exports will then be passed to `createCell`
+  // - The array is reset every time we `enter` a new Program
+  let exportNames = []
+  let hasDefaultExport = false
+
+  return {
+    name: 'babel-plugin-redwood-cell',
+    visitor: {
+      ExportDefaultDeclaration() {
+        hasDefaultExport = true
+      },
+      ExportNamedDeclaration(path) {
+        const declaration = path.node.declaration
+
+        if (!declaration) {
+          return
+        }
+
+        let name
+        if (declaration.type === 'VariableDeclaration') {
+          const id = declaration.declarations[0].id
+          name = id.name
+        }
+        if (declaration.type === 'FunctionDeclaration') {
+          name = declaration?.id?.name
+        }
+
+        if (name && EXPECTED_EXPORTS_FROM_CELL.includes(name)) {
+          exportNames.push(name)
+        }
+      },
+      Program: {
+        enter() {
+          // Reset variables as they're still in scope from the previous file
+          // babel transformed in the same process
+          exportNames = []
+          hasDefaultExport = false
+        },
+        exit(path) {
+          const hasQueryOrDataExport =
+            exportNames.includes('QUERY') || exportNames.includes('data')
+
+          // If the file already has a default export then
+          //   1. It's likely not a cell, or it's a cell that's already been
+          //      wrapped in `createCell`
+          //   2. If we added another default export we'd be breaking JS module
+          //      rules. There can only be one default export.
+          // If there's no `QUERY` or `data` export it's not a valid cell
+          if (hasDefaultExport || !hasQueryOrDataExport) {
+            return
+          }
+
+          // TODO (RSC): When we want to support `data = async () => {}` in
+          // client cells as well, we'll need a different heuristic here
+          // If we want to support `QUERY` (gql) cells on the server we'll
+          // also need a different heuristic
+          const createCellHookName = exportNames.includes('data')
+            ? 'createServerCell'
+            : 'createCell'
+          const importFrom = exportNames.includes('data')
+            ? '@cedarjs/web/dist/components/cell/createServerCell'
+            : '@cedarjs/web'
+
+          // Insert at the top of the file:
+          // + import { createCell } from '@cedarjs/web'
+          path.node.body.unshift(
+            t.importDeclaration(
+              [
+                t.importSpecifier(
+                  t.identifier(createCellHookName),
+                  t.identifier(createCellHookName),
+                ),
+              ],
+              t.stringLiteral(importFrom),
+            ),
+          )
+
+          // Insert at the bottom of the file:
+          // + export default createCell({ QUERY?, Loading?, Success?, Failure?, Empty?, beforeQuery?, isEmpty, afterQuery?, displayName? })
+          path.node.body.push(
+            t.exportDefaultDeclaration(
+              t.callExpression(t.identifier(createCellHookName), [
+                t.objectExpression([
+                  ...exportNames.map((name) =>
+                    t.objectProperty(
+                      t.identifier(name),
+                      t.identifier(name),
+                      false,
+                      true,
+                    ),
+                  ),
+                  // Add the `displayName` property so we can name the Cell
+                  // after the filename.
+                  t.objectProperty(
+                    t.identifier('displayName'),
+                    t.stringLiteral(parse(this.file.opts.filename).name),
+                    false,
+                    true,
+                  ),
+                ]),
+              ]),
+            ),
+          )
+        },
+      },
+    },
+  }
+}

package/config/jest/web/webBabelConfig.js

@@ -1,3 +1,18 @@
 const { getWebSideDefaultBabelConfig } = require('@cedarjs/babel-config')
 
-module.exports = getWebSideDefaultBabelConfig({ forJest: true })
+const redwoodCellsPlugin = require('../babelPlugins/babel-plugin-redwood-cell')
+
+const defaultWebSideBabelConfig = getWebSideDefaultBabelConfig({
+  forJest: true,
+})
+
+module.exports = {
+  ...defaultWebSideBabelConfig,
+  overrides: [
+    ...defaultWebSideBabelConfig.overrides,
+    {
+      test: /.+Cell.(js|tsx|jsx)$/,
+      plugins: [redwoodCellsPlugin],
+    },
+  ],
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/testing",
-  "version": "1.0.0-canary.12316+9fbbf96b8",
+  "version": "1.0.0-canary.12318+74d039296",
   "description": "Tools, wrappers and configuration for testing a Cedar project.",
   "repository": {
     "type": "git",
@@ -28,13 +28,13 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@cedarjs/auth": "1.0.0-canary.12316",
-    "@cedarjs/babel-config": "1.0.0-canary.12316",
-    "@cedarjs/context": "1.0.0-canary.12316",
-    "@cedarjs/graphql-server": "1.0.0-canary.12316",
-    "@cedarjs/project-config": "1.0.0-canary.12316",
-    "@cedarjs/router": "1.0.0-canary.12316",
-    "@cedarjs/web": "1.0.0-canary.12316",
+    "@cedarjs/auth": "1.0.0-canary.12318",
+    "@cedarjs/babel-config": "1.0.0-canary.12318",
+    "@cedarjs/context": "1.0.0-canary.12318",
+    "@cedarjs/graphql-server": "1.0.0-canary.12318",
+    "@cedarjs/project-config": "1.0.0-canary.12318",
+    "@cedarjs/router": "1.0.0-canary.12318",
+    "@cedarjs/web": "1.0.0-canary.12318",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "14.5.2",
@@ -52,7 +52,7 @@
     "whatwg-fetch": "3.6.20"
   },
   "devDependencies": {
-    "@cedarjs/framework-tools": "1.0.0-canary.12316",
+    "@cedarjs/framework-tools": "1.0.0-canary.12318",
     "concurrently": "8.2.2",
     "jsdom": "24.1.3",
     "publint": "0.3.12",
@@ -60,5 +60,5 @@
     "typescript": "5.6.2",
     "vitest": "2.1.9"
   },
-  "gitHead": "9fbbf96b848616acb9561c86b887e355c92ef351"
+  "gitHead": "74d03929677d47123af04b297d4748e7d125d36e"
 }