Fix: Qwik SDK hack & svelte props.children refs (BuilderIO#770)

* add tagName hack for SDK * fix props.children refs in svelte * add Context Provider types * publish * update snapshots
ajanes93 · Sep 27, 2022 · ccf9444 · ccf9444
1 parent a7e54bb
commit ccf9444
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 16 deletions.
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -25,7 +25,7 @@
   "engines": {
     "npm": "99999999.9.9"
   },
-  "version": "0.0.65",
+  "version": "0.0.66",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -985,7 +985,7 @@ export const handlerClick = function handlerClick(
 };
 export const MyBasicRefAssignmentComponent = component$((props) => {
   const holdValueRef = useRef();
-  const state = { tagName: \\"\\" };
+  const state = {};
   return (
     <div>
       <button onClick$={(event) => state.handlerClick(evt)}>Click</button>
@@ -1081,7 +1081,7 @@ export const getColumnCssWidth = function getColumnCssWidth(
 };
 export const Column = component$((props) => {
   useStylesScoped$(STYLES);
-  const state = { tagName: \\"\\" };
+  const state = {};
   return (
     <div class=\\"builder-columns div-Column\\">
       {(props.columns || []).map(function (column, index) {
@@ -2324,7 +2324,7 @@ export const getRenderContentProps = function getRenderContentProps(
   };
 };
 export const RenderContent = component$((props) => {
-  const state = { tagName: \\"\\" };
+  const state = {};
   return (
     <RenderBlock
       {...getRenderContentProps(
@@ -3062,7 +3062,7 @@ export const handlerClick = function handlerClick(
 };
 export const MyBasicRefAssignmentComponent = component$((props: Props) => {
   const holdValueRef = useRef();
-  const state = { tagName: \\"\\" as any };
+  const state: any = {};
   return (
     <div>
       <button onClick$={(event) => state.handlerClick(evt)}>Click</button>
@@ -3181,7 +3181,7 @@ export const getColumnCssWidth = function getColumnCssWidth(
 };
 export const Column = component$((props: ColumnProps) => {
   useStylesScoped$(STYLES);
-  const state = { tagName: \\"\\" as any };
+  const state: any = {};
   return (
     <div class=\\"builder-columns div-Column\\">
       {(props.columns || []).map(function (column, index) {
@@ -4621,7 +4621,7 @@ export const getRenderContentProps = function getRenderContentProps(
   };
 };
 export const RenderContent = component$((props: RenderContentProps) => {
-  const state = { tagName: \\"\\" as any };
+  const state: any = {};
   return (
     <RenderBlock
       {...getRenderContentProps(

diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
@@ -94,7 +94,9 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
             emitUseMount(file, component);
             emitUseWatch(file, component);
             emitUseCleanup(file, component);
-            emitTagNameHack(file, component);
+
+            emitTagNameHack(file, component, component.meta.useMetadata?.elementTag);
+            emitTagNameHack(file, component, component.meta.useMetadata?.componentElementTag);
             emitJSX(file, component, mutable);
           },
         ],
@@ -123,14 +125,13 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
     }
   };
 
-function emitTagNameHack(file: File, component: MitosisComponent) {
-  const elementTag = component.meta.useMetadata?.elementTag as string | undefined;
-  if (elementTag) {
+function emitTagNameHack(file: File, component: MitosisComponent, metadataValue: unknown) {
+  if (typeof metadataValue === 'string' && metadataValue) {
     file.src.emit(
-      elementTag,
+      metadataValue,
       '=',
       convertMethodToFunction(
-        elementTag,
+        metadataValue,
         stateToMethodOrGetter(component.state),
         getLexicalScopeVars(component),
       ),
@@ -289,7 +290,7 @@ function emitUseStore(file: File, stateInit: StateInit) {
     file.src.emit(');');
   } else {
     // TODO hack for now so that `state` variable is defined, even though it is never read.
-    file.src.emit('const state={tagName:""' + (file.options.isTypeScript ? 'as any' : '') + '};');
+    file.src.emit('const state' + (file.options.isTypeScript ? ': any' : '') + ' = {};');
   }
 }
 

diff --git a/packages/core/src/generators/svelte.ts b/packages/core/src/generators/svelte.ts
@@ -182,6 +182,7 @@ type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
 const stripStateAndProps = (code: string | undefined, options: ToSvelteOptions) =>
   stripStateAndPropsRefs(code, {
     includeState: options.stateType === 'variables',
+    replaceWith: (name) => (name === 'children' ? '$$slots.default' : name),
   });
 
 export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent }) => {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,6 +1,14 @@
+import { JSX } from '@builder.io/mitosis/jsx-runtime';
+
 export * from './flow';
 
-export type Context<T> = {};
+function Provider<T>(props: { value: T; children: JSX.Element }): any {
+  return null;
+}
+
+export type Context<T> = {
+  Provider: typeof Provider<T>;
+};
 
 // These compile away
 export const useStore = <T>(obj: T): T => {