Merge pull request #68 from blitz-js/exclude-props

exclude-props

README.md

@@ -57,6 +57,20 @@ That's it! Now you're free to use all values and type supported by SuperJSON in
 
 <!-- Potential new section: how it works -->
 
+### Options
+
+You can use the `exclude` option to exclude specific properties from serialisation.
+
+```json5
+{
+  presets: ['next/babel'],
+  plugins: [
+    ...
+    ['superjson-next', { exclude: ["someProp"] }]
+  ]
+}
+```
+
 ## Contributing
 
 1. Clone the repo

example/.babelrc

@@ -1,4 +1,11 @@
 {
-    "presets": ["next/babel"],
-    "plugins": ["superjson-next"]
-}
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "superjson-next",
+      {
+        "exclude": ["superJsonSkipped"]
+      }
+    ]
+  ]
+}

example/pages/excluded-props.tsx

@@ -0,0 +1,19 @@
+import type { InferGetStaticPropsType } from 'next';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      superJsonSkipped: new Date(0).toISOString(),
+      date: new Date(0)
+    },
+  };
+}
+
+const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    'props.superJsonSkipped is string: ' +
+    (typeof props.superJsonSkipped === 'string')
+  );
+};
+
+export default Page;

example/tests/excluded-props.ts

@@ -0,0 +1,10 @@
+import { Selector } from 'testcafe';
+
+fixture`Excluded Props`.page`http://localhost:3099/excluded-props`;
+
+test('works', async (t) => {
+  const result = Selector('#__next');
+  await t
+    .expect(result.innerText)
+    .eql('props.superJsonSkipped is string: true');
+});

src/index.ts

@@ -17,6 +17,8 @@ import {
   isVariableDeclaration,
   variableDeclaration,
   variableDeclarator,
+  arrayExpression,
+  stringLiteral,
 } from '@babel/types';
 import * as nodePath from 'path';
 
@@ -170,6 +172,10 @@ function superJsonWithNext(): PluginObj {
     name: 'add superjson to pages with prop getters',
     visitor: {
       Program(path, state) {
+        const propsToBeExcluded = (state.opts as any).exclude as
+          | string[]
+          | undefined;
+
         const filePath =
           getFileName(state) ?? nodePath.join('pages', 'Default.js');
 
@@ -187,6 +193,9 @@ function superJsonWithNext(): PluginObj {
               (decl) => {
                 return callExpression(addWithSuperJSONPropsImport(path), [
                   decl,
+                  arrayExpression(
+                    propsToBeExcluded?.map((prop) => stringLiteral(prop))
+                  ),
                 ]);
               }
             );

src/tools.tsx

@@ -8,7 +8,8 @@ type SuperJSONProps<P> = P & {
 };
 
 export function withSuperJSONProps<P>(
-  gssp: GetServerSideProps<P>
+  gssp: GetServerSideProps<P>,
+  exclude: string[] = []
 ): GetServerSideProps<SuperJSONProps<P>> {
   return async function withSuperJSON(...args) {
     const result = await gssp(...args);
@@ -21,13 +22,26 @@ export function withSuperJSONProps<P>(
       return result;
     }
 
+    const excludedPropValues = exclude.map((propKey) => {
+      const value = (result.props as any)[propKey];
+      delete (result.props as any)[propKey];
+      return value;
+    });
+
     const { json, meta } = SuperJSON.serialize(result.props);
     const props = json as any;
 
     if (meta) {
       props._superjson = meta;
     }
 
+    exclude.forEach((key, index) => {
+      const excludedPropValue = excludedPropValues[index];
+      if (typeof excludedPropValue !== 'undefined') {
+        props[key] = excludedPropValue;
+      }
+    });
+
     return {
       ...result,
       props,

test/pages/class component/output.js

@@ -12,7 +12,7 @@ export const getServerSideProps = _withSuperJSONProps(async () => {
       products,
     },
   };
-});
+}, ['smth']);
 
 class Page {
   render({ products }) {

test/pages/gSP arrow function with implicit return/output.js

@@ -1,10 +1,13 @@
 import { withSuperJSONPage as _withSuperJSONPage } from 'babel-plugin-superjson-next/tools';
 import { withSuperJSONProps as _withSuperJSONProps } from 'babel-plugin-superjson-next/tools';
-export const getStaticProps = _withSuperJSONProps(() => ({
-  props: {
-    today: new Date(),
-  },
-}));
+export const getStaticProps = _withSuperJSONProps(
+  () => ({
+    props: {
+      today: new Date(),
+    },
+  }),
+  ['smth']
+);
 
 function IndexPage({ today }) {
   return JSON.stringify({

test/pages/gSP arrow function/output.js

@@ -12,7 +12,7 @@ export const getStaticProps = _withSuperJSONProps(async () => {
       products,
     },
   };
-});
+}, ['smth']);
 
 function Page({ products }) {
   return JSON.stringify(products);

test/pages/gSP function declaration/output.js

@@ -13,7 +13,8 @@ export const getStaticProps = _withSuperJSONProps(
         products,
       },
     };
-  }
+  },
+  ['smth']
 );
 
 function Page({ products }) {

test/pages/gSSP function declaration/output.js

@@ -13,7 +13,8 @@ export const getServerSideProps = _withSuperJSONProps(
         products,
       },
     };
-  }
+  },
+  ['smth']
 );
 
 function Page({ products }) {

test/pages/separate export declaration/output.js

@@ -12,7 +12,7 @@ export const getServerSideProps = _withSuperJSONProps(async () => {
       products,
     },
   };
-});
+}, ['smth']);
 
 function Page({ products }) {
   return JSON.stringify(products);

test/pages/transforms a valid example/output.js

@@ -12,7 +12,7 @@ export const getServerSideProps = _withSuperJSONProps(async () => {
       products,
     },
   };
-});
+}, ['smth']);
 
 function Page({ products }) {
   return JSON.stringify(products);

test/plugin.test.ts

@@ -4,5 +4,8 @@ import * as path from 'path';
 
 pluginTester({
   plugin: superJsonWithNext,
+  pluginOptions: {
+    exclude: ['smth'],
+  },
   fixtures: path.join(__dirname, 'pages'),
 });

test/tools.test.tsx

@@ -1,28 +1,55 @@
-import { withSuperJSONPage } from "../src/tools"
-import { render } from "@testing-library/react-native"
-import * as React from "react"
+import { withSuperJSONPage, withSuperJSONProps } from '../src/tools';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
 
-describe("tools", () => {
-  describe("a component wrapped withSuperJSONPage", () => {
-    describe("when used from a test", () => {
-      it("works", () => {
+describe('tools', () => {
+  describe('a component wrapped withSuperJSONPage', () => {
+    describe('when used from a test', () => {
+      it('works', () => {
         function Greeter(props: { name: string }) {
-          return (
-            <p>
-              Greetings, {props.name}!
-            </p>
-          )
+          return <p>Greetings, {props.name}!</p>;
         }
 
-        const WrappedGreeter = withSuperJSONPage(Greeter)
+        const WrappedGreeter = withSuperJSONPage(Greeter);
 
-        const GreeterFromTest = WrappedGreeter as any as typeof Greeter
+        const GreeterFromTest = (WrappedGreeter as any) as typeof Greeter;
 
-        const result = render(<GreeterFromTest name="Earthling" />)
+        const result = render(<GreeterFromTest name="Earthling" />);
         expect(result.toJSON().children).toEqual([
-          "Greetings, ", "Earthling", "!"
-        ])
-      })
-    })
-  })
-})
+          'Greetings, ',
+          'Earthling',
+          '!',
+        ]);
+      });
+    });
+  });
+
+  describe('withSuperJSONProps', () => {
+    it('respects `exclude`', async () => {
+      const aDate = new Date();
+      const bDate = new Date();
+      async function gSSP() {
+        return {
+          props: {
+            a: aDate,
+            b: bDate,
+          },
+        };
+      }
+      const wrappedGssp = withSuperJSONProps(gSSP, ['a']);
+
+      const result = await wrappedGssp(null as any);
+      expect(result).toEqual({
+        props: {
+          a: aDate,
+          b: bDate.toISOString(),
+          _superjson: {
+            values: {
+              b: ['Date'],
+            },
+          },
+        },
+      });
+    });
+  });
+});