From e5c52b3a9b74cb9ad89ef10d2325fcc732c56f6b Mon Sep 17 00:00:00 2001
From: Raymond Muller <raymondmuller@users.noreply.github.com>
Date: Tue, 27 Sep 2022 22:35:20 +0200
Subject: [PATCH] feat(core): more basic context setting (#760)

* feat(core): add support for more basic context setting

* test(core): update snapshots

* fix(core): remove unused import
---
 .../__snapshots__/preact.test.ts.snap         | 24 +++++++++++--------
 .../__snapshots__/react-native.test.ts.snap   | 24 +++++++++++--------
 .../__snapshots__/react.test.ts.snap          | 24 +++++++++++--------
 .../__snapshots__/svelte.test.ts.snap         |  4 ++--
 .../__tests__/__snapshots__/vue.test.ts.snap  |  4 ++--
 .../core/src/generators/react/generator.ts    | 16 ++++++++++++-
 packages/core/src/generators/svelte.ts        | 11 ++++++---
 packages/core/src/generators/vue.ts           |  4 +++-
 .../core/src/parsers/jsx/function-parser.ts   |  9 ++++++-
 9 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 79c8b330f3..9c0c32c4e0 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -133,11 +133,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <div>
-      {myService.method(\\"hello\\") + name}
-      Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange={(event) => onChange} />
-    </div>
+    <Context.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Context.Provider>
   );
 }
 "
@@ -2626,11 +2628,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <div>
-      {myService.method(\\"hello\\") + name}
-      Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange={(event) => onChange} />
-    </div>
+    <Context.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Context.Provider>
   );
 }
 "
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 1d723604ac..63af56dd6c 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -127,11 +127,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <View>
-      <Text>{myService.method(\\"hello\\") + name}</Text>
-      <Text>Hello! I can run in React, Vue, Solid, or Liquid!</Text>
-      <View onChange={(event) => onChange} />
-    </View>
+    <Context.Provider value={createInjector()}>
+      <View>
+        <Text>{myService.method(\\"hello\\") + name}</Text>
+        <Text>Hello! I can run in React, Vue, Solid, or Liquid!</Text>
+        <View onChange={(event) => onChange} />
+      </View>
+    </Context.Provider>
   );
 }
 "
@@ -2543,11 +2545,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <View>
-      <Text>{myService.method(\\"hello\\") + name}</Text>
-      <Text>Hello! I can run in React, Vue, Solid, or Liquid!</Text>
-      <View onChange={(event) => onChange} />
-    </View>
+    <Context.Provider value={createInjector()}>
+      <View>
+        <Text>{myService.method(\\"hello\\") + name}</Text>
+        <Text>Hello! I can run in React, Vue, Solid, or Liquid!</Text>
+        <View onChange={(event) => onChange} />
+      </View>
+    </Context.Provider>
   );
 }
 "
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9cfa3727b1..7632342766 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -130,11 +130,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <div>
-      {myService.method(\\"hello\\") + name}
-      Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange={(event) => onChange} />
-    </div>
+    <Context.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Context.Provider>
   );
 }
 "
@@ -2557,11 +2559,13 @@ export default function MyBasicComponent(props: any) {
   }, []);
 
   return (
-    <div>
-      {myService.method(\\"hello\\") + name}
-      Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange={(event) => onChange} />
-    </div>
+    <Context.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Context.Provider>
   );
 }
 "
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 55b57a51cb..8e1ae0d197 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -119,7 +119,7 @@ exports[`Svelte Javascript Test Basic Context 1`] = `
   import { Injector, createInjector, MyService } from \\"@dummy/injection-js\\";
 
   let myService = getContext(MyService.key);
-  setContext(Injector.key, undefined);
+  setContext(Injector, createInjector());
 
   function onChange() {
     const change = myService.method(\\"change\\");
@@ -2008,7 +2008,7 @@ exports[`Svelte Typescript Test Basic Context 1`] = `
   import { Injector, createInjector, MyService } from \\"@dummy/injection-js\\";
 
   let myService = getContext(MyService.key);
-  setContext(Injector.key, undefined);
+  setContext(Injector, createInjector());
 
   function onChange() {
     const change = myService.method(\\"change\\");
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 65e9634a63..cc5746f3e0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -152,7 +152,7 @@ export default {
   provide() {
     const _this = this;
     return {
-      Injector: null,
+      Injector: createInjector(),
     };
   },
   inject: {
@@ -2557,7 +2557,7 @@ export default {
   provide() {
     const _this = this;
     return {
-      Injector: null,
+      Injector: createInjector(),
     };
   },
   inject: {
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index f1f6246137..400553badf 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -274,7 +274,7 @@ const getRefsString = (json: MitosisComponent, refs: string[], options: ToReactO
 
 function addProviderComponents(json: MitosisComponent, options: ToReactOptions) {
   for (const key in json.context.set) {
-    const { name, value } = json.context.set[key];
+    const { name, ref, value } = json.context.set[key];
     if (value) {
       json.children = [
         createMitosisNode({
@@ -289,6 +289,20 @@ function addProviderComponents(json: MitosisComponent, options: ToReactOptions)
           }),
         }),
       ];
+    } else if (ref) {
+      json.children = [
+        createMitosisNode({
+          name: 'Context.Provider',
+          children: json.children,
+          ...(ref && {
+            bindings: {
+              value: {
+                code: ref,
+              },
+            },
+          }),
+        }),
+      ];
     }
   }
 }
diff --git a/packages/core/src/generators/svelte.ts b/packages/core/src/generators/svelte.ts
index 95a0965524..3d95c954ab 100644
--- a/packages/core/src/generators/svelte.ts
+++ b/packages/core/src/generators/svelte.ts
@@ -127,9 +127,14 @@ const setContextCode = (json: MitosisComponent) => {
   const contextSetters = json.context.set;
   return Object.keys(contextSetters)
     .map((key) => {
-      const { value, name } = contextSetters[key];
-      return `setContext(${name}.key, ${
-        value ? stripStateAndPropsRefs(stringifyContextValue(value)) : 'undefined'
+      const { ref, value, name } = contextSetters[key];
+
+      return `setContext(${value ? `${name}.key` : name}, ${
+        value
+          ? stripStateAndPropsRefs(stringifyContextValue(value))
+          : ref
+          ? stripStateAndPropsRefs(ref)
+          : 'undefined'
       });`;
     })
     .join('\n');
diff --git a/packages/core/src/generators/vue.ts b/packages/core/src/generators/vue.ts
index e16fa106d7..f828d5f467 100644
--- a/packages/core/src/generators/vue.ts
+++ b/packages/core/src/generators/vue.ts
@@ -540,13 +540,15 @@ function getContextProvideString(component: MitosisComponent, options: ToVueOpti
   let str = '{';
 
   for (const key in component.context.set) {
-    const { value, name } = component.context.set[key];
+    const { ref, value, name } = component.context.set[key];
     str += `
       ${name}: ${
       value
         ? stringifyContextValue(value, {
             valueMapper: (code) => stripStateAndPropsRefs(code, { replaceWith: '_this.' }),
           })
+        : ref
+        ? stripStateAndPropsRefs(ref, { replaceWith: '_this.' })
         : null
     },
     `;
diff --git a/packages/core/src/parsers/jsx/function-parser.ts b/packages/core/src/parsers/jsx/function-parser.ts
index 4497a60517..0bb3759ddd 100644
--- a/packages/core/src/parsers/jsx/function-parser.ts
+++ b/packages/core/src/parsers/jsx/function-parser.ts
@@ -37,10 +37,10 @@ export const componentFunctionToJson = (
             expression.callee.name === 'provideContext'
           ) {
             const keyNode = expression.arguments[0];
+            const valueNode = expression.arguments[1];
             if (types.isIdentifier(keyNode)) {
               const key = keyNode.name;
               const keyPath = traceReferenceToModulePath(context.builder.component.imports, key)!;
-              const valueNode = expression.arguments[1];
               if (valueNode) {
                 if (types.isObjectExpression(valueNode)) {
                   const value = parseStateObjectToMitosisState(valueNode);
@@ -56,6 +56,13 @@ export const componentFunctionToJson = (
                   };
                 }
               }
+            } else if (types.isStringLiteral(keyNode)) {
+              if (types.isExpression(valueNode)) {
+                setContext[keyNode.value] = {
+                  name: `"${keyNode.value}"`,
+                  ref: generate(valueNode).code,
+                };
+              }
             }
           } else if (
             expression.callee.name === 'onMount' ||