feat: add support for react-jpex encase method

Author: Jack Ellis

package.json

@@ -54,7 +54,6 @@
     "@typescript-eslint/parser": "^4.2.0",
     "ava": "^3.12.1",
     "eslint": "^7.7.0",
-    "jpex": "^4.0.0",
     "rollup": "^2.26.6",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",

rollup.config.js

@@ -1,7 +1,7 @@
 import babel from 'rollup-plugin-babel';
 import localResolve from 'rollup-plugin-node-resolve';
 
-export default {
+const src = {
   input: 'src/index.ts',
   output: {
     file: 'dist/index.js',
@@ -23,3 +23,16 @@ export default {
     'path',
   ],
 };
+
+const helpers = {
+  input: 'src/common/index.ts',
+  output: {
+    file: 'dist/helpers.js',
+    format: 'cjs',
+    exports: 'named',
+  },
+  plugins: src.plugins,
+  external: src.external,
+};
+
+export default [ src, helpers ];

src/index.ts

@@ -1,15 +1,15 @@
-import { resolve } from 'path';
+import { NodePath, Visitor } from '@babel/core';
 import { declare } from '@babel/helper-plugin-utils';
-import handleFactoryCalls from './factories';
-import handleResolveCall from './resolve';
-import handleResolveWithCall from './resolveWith';
+import { resolve } from 'path';
 import handleAliasCall from './alias';
+import handleClearCache from './clearCache';
 import handleEncaseCall from './encase';
+import handleFactoryCalls from './factories';
 import handleInferCall from './infer';
 import handleRawCall from './raw';
-import handleUseResolve from './useResolve';
-import handleClearCache from './clearCache';
-import { Visitor, NodePath } from '@babel/core';
+import handleResolveCall from './resolve';
+import handleResolveWithCall from './resolveWith';
+import reactJpex from './react-jpex';
 
 declare const require: any;
 declare const process: any;
@@ -53,7 +53,7 @@ const mainVisitor: Visitor<{
     handleInferCall(programPath, path, opts);
     handleRawCall(programPath, path, opts);
     handleClearCache(programPath, path, opts);
-    handleUseResolve(programPath, path, opts);
+    reactJpex(programPath, path, opts);
   },
 };
 

src/react-jpex/encase.ts

@@ -0,0 +1,52 @@
+import { NodePath, types as t, Visitor } from '@babel/core';
+import {
+  extractFunctionParameterTypes,
+  State,
+} from '../common';
+
+const importVisitor: Visitor<{
+  found: boolean,
+}> = {
+  ImportSpecifier(path, state) {
+    if (path.node.imported.name === 'encase') {
+      if (path.node.local.name === 'encase') {
+        // @ts-ignore
+        if (path.parent.source.value === 'react-jpex') {
+          state.found = true;
+        }
+      }
+    }
+  },
+};
+
+const encase = (
+  programPath: NodePath<t.Program>,
+  path: NodePath<any>,
+  {
+    filename,
+    publicPath,
+  }: State,
+) => {
+  const callee = path.node.callee;
+  const args = path.node.arguments;
+
+  if (callee?.name !== 'encase') {
+    return;
+  }
+  const state = { found: false };
+  programPath.traverse(importVisitor, state);
+
+  if (!state.found) {
+    return;
+  }
+
+  if (args.length > 0 && t.isStringLiteral(args[0])) {
+    return;
+  }
+
+  const arg = path.get('arguments.0') as NodePath<any>;
+  const deps = extractFunctionParameterTypes(programPath, arg, filename, publicPath);
+  path.node.arguments.splice(0, 0, t.arrayExpression(deps.map((dep) => t.stringLiteral(dep))));
+};
+
+export default encase;

src/react-jpex/index.ts

@@ -0,0 +1,15 @@
+import { NodePath, types as t } from '@babel/core';
+import { State } from '../common';
+import encase from './encase';
+import useResolve from './useResolve';
+
+const reactJpex = (
+  programPath: NodePath<t.Program>,
+  path: NodePath<any>,
+  state: State,
+) => {
+  encase(programPath, path, state);
+  useResolve(programPath, path, state);
+};
+
+export default reactJpex;

src/useResolve.ts src/react-jpex/useResolve.tssrc/useResolve.ts renamed to src/react-jpex/useResolve.ts

@@ -1,9 +1,9 @@
-import { types as t, Visitor, NodePath } from '@babel/core';
+import { NodePath, types as t, Visitor } from '@babel/core';
 import {
   getConcreteTypeName,
-  State,
   getTypeParameter,
-} from './common';
+  State,
+} from '../common';
 
 const importVisitor: Visitor<{
   found: boolean,

tests/encase.ts

@@ -0,0 +1,30 @@
+import { transformAsync } from '@babel/core';
+import test from 'ava';
+
+test('encase', async(t) => {
+  const code = `
+    import jpex from 'jpex';
+    
+    type Foo = string;
+    type Bar = number;
+    
+    const fn = jpex.encase((foo: Foo, bar: Bar) => (seed: string) => {
+      return seed + foo + bar;
+    }); 
+  `;
+  const { code: actual } = await transformAsync(code, {
+    filename: './code.ts',
+    babelrc: false,
+    configFile: false,
+    presets: [
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      [
+        './dist',
+      ],
+    ],
+  });
+
+  t.snapshot(actual);
+});

tests/react-jpex.ts

@@ -0,0 +1,33 @@
+import { transformAsync } from '@babel/core';
+import test from 'ava';
+
+test('encase', async(t) => {
+  const code = `
+    import { useResolve, encase } from 'react-jpex';
+    
+    type Foo = string;
+    type Bar = number;
+    type Baz = string;
+
+    const Component = encase((foo: Foo, bar: Bar) => (props: {}) => {
+      const baz = useResolve<Baz>();
+
+      return foo + bar + baz;
+    })
+  `;
+  const { code: actual } = await transformAsync(code, {
+    filename: './code.ts',
+    babelrc: false,
+    configFile: false,
+    presets: [
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      [
+        './dist',
+      ],
+    ],
+  });
+
+  t.snapshot(actual);
+});

tests/snapshots/encase.ts.md

@@ -0,0 +1,14 @@
+# Snapshot report for `tests/encase.ts`
+
+The actual snapshot is saved in `encase.ts.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## encase
+
+> Snapshot 1
+
+    `import jpex from 'jpex';␊
+    const fn = jpex.encase(["type:/code/Foo", "type:/code/Bar"], (foo, bar) => seed => {␊
+      return seed + foo + bar;␊
+    });`