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 (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
@@ -2626,11 +2628,13 @@ export default function MyBasicComponent(props: any) {
}, []);
return (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
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 (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
@@ -2543,11 +2545,13 @@ export default function MyBasicComponent(props: any) {
}, []);
return (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
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 (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
@@ -2557,11 +2559,13 @@ export default function MyBasicComponent(props: any) {
}, []);
return (
-
- {myService.method(\\"hello\\") + name}
- Hello! I can run in React, Vue, Solid, or Liquid!
- onChange} />
-
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
);
}
"
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' ||