@usels/babel-plugin-legend-memo 0.0.1-beta.3

package/tests/basic.test.ts

@@ -0,0 +1,184 @@
+import pluginTester from 'babel-plugin-tester';
+import plugin from '../src';
+
+const babelOptions = {
+  plugins: ['@babel/plugin-syntax-jsx'],
+  configFile: false,
+  babelrc: false,
+};
+
+pluginTester({
+  plugin,
+  pluginOptions: {},
+  babelOptions,
+  title: 'basic transforms',
+  tests: {
+    'wraps $-suffixed observable .get() in JSX child': {
+      code: `
+        function App() {
+          return <div>{count$.get()}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => count$.get()}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps chained .get() (user$.profile.name.get())': {
+      code: `
+        function App() {
+          return <span>{user$.profile.name.get()}</span>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <span>
+              <Memo>{() => user$.profile.name.get()}</Memo>
+            </span>
+          );
+        }
+      `,
+    },
+
+    'wraps complex expression with multiple .get() in one Auto': {
+      code: `
+        function App() {
+          return <p>{a$.get() + " " + b$.get()}</p>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <p>
+              <Memo>{() => a$.get() + " " + b$.get()}</Memo>
+            </p>
+          );
+        }
+      `,
+    },
+
+    'wraps ternary containing .get()': {
+      code: `
+        function App() {
+          return <div>{isActive$.get() ? "ON" : "OFF"}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => (isActive$.get() ? "ON" : "OFF")}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps logical AND conditional rendering': {
+      code: `
+        function App() {
+          return <div>{show$.get() && <Modal />}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => show$.get() && <Modal />}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps JSX-containing expression (ternary with JSX)': {
+      code: `
+        function App() {
+          return <div>{isVisible$.get() ? <A /> : <B />}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => (isVisible$.get() ? <A /> : <B />)}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps span child that contains .get()': {
+      code: `
+        function App() {
+          return <div><span>{name$.get()}</span><p>static</p></div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <span>
+                <Memo>{() => name$.get()}</Memo>
+              </span>
+              <p>static</p>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'does not add import if already present': {
+      code: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return <div>{count$.get()}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => count$.get()}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'does not add import when no transforms occur': {
+      code: `
+        function App() {
+          return <div>hello world</div>;
+        }
+      `,
+    },
+
+    'does not transform JSX without .get()': {
+      code: `
+        function App() {
+          return <div>{someValue}</div>;
+        }
+      `,
+    },
+
+    'does not transform non-JSX .get()': {
+      code: `const x = count$.get();`,
+    },
+  },
+});

package/tests/complex.test.ts

@@ -0,0 +1,192 @@
+import pluginTester from 'babel-plugin-tester';
+import plugin from '../src';
+
+const babelOptions = {
+  plugins: ['@babel/plugin-syntax-jsx'],
+  configFile: false,
+  babelrc: false,
+};
+
+pluginTester({
+  plugin,
+  pluginOptions: {},
+  babelOptions,
+  title: 'complex use cases',
+  tests: {
+    'wraps three independent reactive siblings with separate Memos': {
+      code: `
+        function App() {
+          return (
+            <div>
+              {a$.get()}
+              {b$.get()}
+              {c$.get()}
+            </div>
+          );
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => a$.get()}</Memo>
+              <Memo>{() => b$.get()}</Memo>
+              <Memo>{() => c$.get()}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps nullish coalescing expression containing .get()': {
+      code: `
+        function App() {
+          return <p>{name$.get() ?? 'Anonymous'}</p>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <p>
+              <Memo>{() => name$.get() ?? "Anonymous"}</Memo>
+            </p>
+          );
+        }
+      `,
+    },
+
+    'wraps function call with .get() as argument': {
+      code: `
+        function App() {
+          return <p>{formatDate(date$.get())}</p>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <p>
+              <Memo>{() => formatDate(date$.get())}</Memo>
+            </p>
+          );
+        }
+      `,
+    },
+
+    'wraps .get() inside 3-level nested JSX': {
+      code: `
+        function App() {
+          return (
+            <div>
+              <section>
+                <p>{content$.get()}</p>
+              </section>
+            </div>
+          );
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <section>
+                <p>
+                  <Memo>{() => content$.get()}</Memo>
+                </p>
+              </section>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps reactive expression and reactive-attribute sibling independently': {
+      code: `
+        function App() {
+          return (
+            <div>
+              {count$.get()}
+              <span className={color$.get()}>{label$.get()}</span>
+            </div>
+          );
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => count$.get()}</Memo>
+              <Memo>{() => <span className={color$.get()}>{label$.get()}</span>}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps .get() in arrow function component body': {
+      code: `
+        const App = () => (
+          <div>{value$.get()}</div>
+        );
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        const App = () => (
+          <div>
+            <Memo>{() => value$.get()}</Memo>
+          </div>
+        );
+      `,
+    },
+
+    'wraps logical OR fallback expression with .get()': {
+      code: `
+        function App() {
+          return <p>{user$.name.get() || 'Guest'}</p>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <p>
+              <Memo>{() => user$.name.get() || "Guest"}</Memo>
+            </p>
+          );
+        }
+      `,
+    },
+
+    'wraps .map() items that have reactive attribute and content': {
+      code: `
+        function App() {
+          return (
+            <ul>
+              {items.map((item$) => (
+                <li className={item$.class.get()}>{item$.name.get()}</li>
+              ))}
+            </ul>
+          );
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <ul>
+              {items.map((item$) => (
+                <Memo>
+                  {() => <li className={item$.class.get()}>{item$.name.get()}</li>}
+                </Memo>
+              ))}
+            </ul>
+          );
+        }
+      `,
+    },
+  },
+});

package/tests/edge-cases.test.ts

@@ -0,0 +1,231 @@
+import pluginTester from 'babel-plugin-tester';
+import plugin from '../src';
+
+const babelOptions = {
+  plugins: ['@babel/plugin-syntax-jsx'],
+  configFile: false,
+  babelrc: false,
+};
+
+pluginTester({
+  plugin,
+  pluginOptions: {},
+  babelOptions,
+  title: 'skip / edge cases',
+  tests: {
+    'does NOT wrap inside existing <Memo>': {
+      code: `
+        function App() {
+          return <Memo>{() => count$.get()}</Memo>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside <For>': {
+      code: `
+        function App() {
+          return <For each={list$}>{(item) => <div>{item.name.get()}</div>}</For>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside <Show>': {
+      code: `
+        function App() {
+          return <Show if={isVisible$}>{() => <span>{label$.get()}</span>}</Show>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside <Memo>': {
+      code: `
+        function App() {
+          return <Memo>{() => <p>{count$.get()}</p>}</Memo>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside <Computed>': {
+      code: `
+        function App() {
+          return <Computed>{() => <p>{count$.get()}</p>}</Computed>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside <Switch>': {
+      code: `
+        function App() {
+          return <Switch value={val$}>{count$.get()}</Switch>;
+        }
+      `,
+    },
+
+    'does NOT wrap inside observer() HOC': {
+      code: `const Comp = observer(() => <div>{obs$.get()}</div>);`,
+    },
+
+    'does NOT wrap Map.get("key") with string arg': {
+      code: `
+        function App() {
+          return <div>{map.get("key")}</div>;
+        }
+      `,
+    },
+
+    'does NOT wrap Map.get(variable) with variable arg': {
+      code: `
+        function App() {
+          return <div>{map.get(id)}</div>;
+        }
+      `,
+    },
+
+    'does NOT wrap store.get() without $ suffix (allGet:false default)': {
+      code: `
+        function App() {
+          return <div>{store.get()}</div>;
+        }
+      `,
+    },
+
+    'does NOT wrap .get() inside onClick arrow function': {
+      code: `
+        function App() {
+          return <button onClick={() => count$.get()}>click</button>;
+        }
+      `,
+    },
+
+    'does NOT wrap .get() inside onChange regular function': {
+      code: `
+        function App() {
+          return <input onChange={function() { obs$.get(); }} />;
+        }
+      `,
+      output: `
+        function App() {
+          return (
+            <input
+              onChange={function () {
+                obs$.get();
+              }}
+            />
+          );
+        }
+      `,
+    },
+
+    'does NOT wrap .get() inside useMemo callback': {
+      code: `
+        function App() {
+          return <div>{useMemo(() => obs$.get(), [])}</div>;
+        }
+      `,
+    },
+
+    'does NOT wrap .get() inside useCallback callback': {
+      code: `
+        function App() {
+          return <div>{useCallback(() => obs$.get(), [])}</div>;
+        }
+      `,
+    },
+
+    'wraps obs$?.get() optional call': {
+      code: `
+        function App() {
+          return <div>{obs$?.get()}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => obs$?.get()}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps obs$.items[0].get() with computed access': {
+      code: `
+        function App() {
+          return <div>{obs$.items[0].get()}</div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => obs$.items[0].get()}</Memo>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps only the child with .get(), leaves siblings untouched': {
+      code: `
+        function App() {
+          return <div>{count$.get()}<p>static</p></div>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <div>
+              <Memo>{() => count$.get()}</Memo>
+              <p>static</p>
+            </div>
+          );
+        }
+      `,
+    },
+
+    'wraps .get() inside Fragment': {
+      code: `
+        function App() {
+          return <>{count$.get()}<p>hello</p></>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <>
+              <Memo>{() => count$.get()}</Memo>
+              <p>hello</p>
+            </>
+          );
+        }
+      `,
+    },
+
+    'wraps .get() inside .map() callback JSX child': {
+      code: `
+        function App() {
+          return <ul>{items.map(item$ => <li>{item$.name.get()}</li>)}</ul>;
+        }
+      `,
+      output: `
+        import { Memo } from "@legendapp/state/react";
+        function App() {
+          return (
+            <ul>
+              {items.map((item$) => (
+                <li>
+                  <Memo>{() => item$.name.get()}</Memo>
+                </li>
+              ))}
+            </ul>
+          );
+        }
+      `,
+    },
+  },
+});