[Core] Convert custom webpack cell-loader into Babel Plugin

packages/core/config/__tests__/__fixtures__/commented/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)
+}

packages/core/config/__tests__/__fixtures__/commented/output.js

@@ -0,0 +1,31 @@
+import { withCell } from '@redwoodjs/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 withCell({
+  QUERY,
+  afterQuery,
+  Loading,
+  Failure,
+  Success,
+})

packages/core/config/__tests__/__fixtures__/complete-cell/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)
+}

packages/core/config/__tests__/__fixtures__/complete-cell/output.js

@@ -0,0 +1,33 @@
+import { withCell } from '@redwoodjs/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 withCell({
+  QUERY,
+  beforeQuery,
+  afterQuery,
+  Loading,
+  Empty,
+  Failure,
+  Success,
+})

packages/core/config/__tests__/babel-plugin-redwood-cell.test.js

@@ -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: 'Redwood Cell',
+  fixtures: path.join(__dirname, '__fixtures__'),
+})

packages/core/config/babel-plugin-redwood-cell.js

@@ -0,0 +1,82 @@
+// This is supposed to wrap a file that's has a suffix of `Cell` in Redwood's `withCell` higher order component.
+// The HOC is responsible for the lifecycle methods during a graphQL query.
+// The end result of this plugin is something like:
+// ```js
+// import { withCell } from '@redwoodjs/web'
+// export default withCell({ QUERY, Loading, Succes, Failure, Empty, beforeQuery, afterQuery })
+// ```
+module.exports = function ({ types: t }) {
+  // These are the expected named exports from a Cell file.
+  const EXPECTED_EXPORTS_FROM_CELL = [
+    'QUERY',
+    'Loading',
+    'Success',
+    'Failure',
+    'Empty',
+    'beforeQuery',
+    'afterQuery',
+  ]
+
+  // This array will
+  // - collect exports from the Cell file during ExportNamedDeclaration
+  // - collected exports will then be passed to `withCell`
+  // - be cleared after Program exit to prepare for the next file
+  let exportNames = []
+
+  return {
+    visitor: {
+      ExportNamedDeclaration(path) {
+        const { declaration } = path.node
+
+        let name
+        if (declaration.type === 'VariableDeclaration') {
+          name = declaration.declarations[0].id.name
+        }
+
+        if (declaration.type === 'FunctionDeclaration') {
+          name = declaration.id.name
+        }
+
+        if (EXPECTED_EXPORTS_FROM_CELL.includes(name)) {
+          exportNames.push(name)
+        }
+      },
+      Program: {
+        exit(path) {
+          // import { withCell } from '@redwoodjs/web'
+          path.node.body.unshift(
+            t.importDeclaration(
+              [
+                t.importSpecifier(
+                  t.identifier('withCell'),
+                  t.identifier('withCell')
+                ),
+              ],
+              t.stringLiteral('@redwoodjs/web')
+            )
+          )
+
+          // export default withCell({ QUERY?, Loading?, Succes?, Failure?, Empty?, beforeQuery?, afterQuery? })
+          path.node.body.push(
+            t.exportDefaultDeclaration(
+              t.callExpression(t.identifier('withCell'), [
+                t.objectExpression(
+                  exportNames.map((name) =>
+                    t.objectProperty(
+                      t.identifier(name),
+                      t.identifier(name),
+                      false,
+                      true
+                    )
+                  )
+                ),
+              ])
+            )
+          )
+
+          exportNames = []
+        },
+      },
+    },
+  }
+}

packages/core/config/babel-preset.js

@@ -128,5 +128,9 @@ module.exports = () => ({
         ],
       ],
     },
+    {
+      test: /.+Cell.(js|tsx)$/,
+      plugins: [require('./babel-plugin-redwood-cell')],
+    },
   ],
 })

packages/core/config/webpack.common.js

@@ -168,15 +168,6 @@ module.exports = (webpackEnv) => {
             ),
           },
         },
-        {
-          // "Create" an `index.js` file adjacent to a user's Cell.js|tsx file
-          // so that the Cell exports are run through the `withCell` HOC
-          test: /.+Cell.(js|tsx)$/,
-          include: path.join(redwoodPaths.base, 'web/src/components'),
-          use: {
-            loader: path.resolve(__dirname, '../dist/loaders/cell-loader.js'),
-          },
-        },
       ],
     },
     optimization: {

packages/core/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
+  testPathIgnorePatterns: ['fixtures', '__fixtures__'],
+}

packages/core/package.json

@@ -61,6 +61,11 @@
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production babel src --out-dir dist  --extensions \".ts\" --delete-dir-on-start",
     "prepublishOnly": "yarn build",
-    "build:watch": "nodemon --watch src --ext 'js,ts,tsx' --ignore dist --exec 'yarn build'"
+    "build:watch": "nodemon --watch src --ext 'js,ts,tsx' --ignore dist --exec 'yarn build'",
+    "test": "jest",
+    "test:watch": "yarn test --watch"
+  },
+  "devDependencies": {
+    "babel-plugin-tester": "^9.0.1"
   }
 }