Misc: fixes (#867)

* remove templates

* refactor svelte code processing

* remove endless loop in babel-transform

* make svelte context reactive

* update vue code processing

* fix this binding

* generate reactive svelte context

* add reactive type to context

* refactor svelte code processing

* remove endless loop in babel-transform

* make svelte context reactive

* update vue code processing

* fix this binding

* generate reactive svelte context

* add reactive type to context

* Revert "remove templates"

This reverts commit d2523aa.

* bring back reactive, add reactive-proxy contrexts

* update context example and snapshots

* fix svelte reactive setter

* fix vue binding processor

* add example

* improve svg types

* remove onCreate

* undo reactive context changes

* update snapshots

* fix vue getter logic

* undo context snapshot changes

* undo

* remove new snapshot

* remove import

Author: samijaber

packages/core/jsx-runtime.d.ts

@@ -1006,6 +1006,7 @@ export declare namespace JSX {
 
   interface ContainerElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,
+      ShapeElementSVGAttributes<T>,
       Pick<
         PresentationSVGAttributes,
         | 'clip-path'
@@ -1078,6 +1079,7 @@ export declare namespace JSX {
 
   interface ShapeElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,
+      ShapeElementSVGAttributes<T>,
       Pick<
         PresentationSVGAttributes,
         | 'color'

packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap

@@ -1753,7 +1753,7 @@ const foo = inject(Context1);
 provide(Context1, {
   foo: \\"bar\\",
   content() {
-    return content;
+    return props.content;
   },
 });
 provide(Context2, { bar: \\"baz\\" });
@@ -4270,7 +4270,7 @@ const foo = inject(Context1);
 provide(Context1, {
   foo: \\"bar\\",
   content() {
-    return content;
+    return props.content;
   },
 });
 provide(Context2, { bar: \\"baz\\" });

packages/core/src/__tests__/data/render-content.raw.tsx

@@ -0,0 +1,41 @@
+import { setContext, onMount, onUpdate } from '@builder.io/mitosis';
+import {
+  sendComponentsToVisualEditor,
+  dispatchNewContentToVisualEditor,
+  trackClick,
+} from '@dummy/injection-js';
+import BuilderContext from '@dummy/context.lite';
+import RenderBlocks from '@dummy/RenderBlocks.lite.tsx';
+
+type Props = {
+  customComponents: string[];
+  content: { blocks: any[]; id: string };
+};
+
+export default function RenderContent(props: Props) {
+  onMount(() => {
+    sendComponentsToVisualEditor(props.customComponents);
+  });
+
+  onUpdate(() => {
+    dispatchNewContentToVisualEditor(props.content);
+  }, [props.content]);
+
+  setContext(BuilderContext, {
+    get content() {
+      return 3;
+    },
+    get registeredComponents() {
+      return 4;
+    },
+  });
+
+  return (
+    <div
+      css={{ display: 'flex', flexDirection: 'columns' }}
+      onClick={() => trackClick(props.content.id)}
+    >
+      <RenderBlocks blocks={props.content.blocks} />
+    </div>
+  );
+}

packages/core/src/__tests__/shared.ts

@@ -89,6 +89,7 @@ const spreadProps = getRawFile('./data/spread/spread-props.raw');
 const builderRenderContent = getRawFile('./data/blocks/builder-render-content.raw');
 
 const rootFragmentMultiNode = getRawFile('./data/blocks/root-fragment-multi-node.raw');
+const renderContentExample = getRawFile('./data/render-content.raw');
 
 const path = 'test-path';
 
@@ -154,6 +155,7 @@ const BASIC_TESTS: Tests = {
   spreadAttrs,
   spreadNestedProps,
   spreadProps,
+  // renderContentExample,
 };
 
 const SLOTS_TESTS: Tests = {

packages/core/src/generators/angular.ts

@@ -124,7 +124,7 @@ export const blockToAngular = (
     return mappers[json.name](json, options, blockOptions);
   }
 
-  if (isChildren(json)) {
+  if (isChildren({ node: json })) {
     return `<ng-content></ng-content>`;
   }
 

packages/core/src/generators/helpers/functions.ts

@@ -1,3 +1,4 @@
+import { prefixWithFunction } from '../../helpers/patterns';
 import { Plugin } from '../../modules/plugins';
 
 export const FUNCTION_HACK_PLUGIN: Plugin = () => ({
@@ -7,7 +8,7 @@ export const FUNCTION_HACK_PLUGIN: Plugin = () => ({
         const value = json.state[key]?.code;
         const type = json.state[key]?.type;
         if (typeof value === 'string' && type === 'method') {
-          const newValue = `function ${value}`;
+          const newValue = prefixWithFunction(value);
           json.state[key] = {
             code: newValue,
             type: 'method',

packages/core/src/generators/html.ts

@@ -268,7 +268,7 @@ const blockToHtml = (
     return mappers[json.name](json, options, blockOptions);
   }
 
-  if (isChildren(json)) {
+  if (isChildren({ node: json })) {
     return `<slot></slot>`;
   }
 

packages/core/src/generators/svelte/blocks.ts

@@ -1,4 +1,3 @@
-import { stripStateAndPropsRefs } from '../../helpers/strip-state-and-props-refs';
 import { selfClosingTags } from '../../parsers/jsx';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseNode, Binding, ForNode, MitosisNode } from '../../types/mitosis-node';
@@ -9,8 +8,8 @@ import { isSlotProperty, stripSlotPrefix } from '../../helpers/slots';
 import { VALID_HTML_TAGS } from '../../constants/html_tags';
 import { isUpperCase } from '../../helpers/is-upper-case';
 import { getForArguments } from '../../helpers/nodes/for';
-import { stripStateAndProps } from './helpers';
 import { ToSvelteOptions } from './types';
+import { stripStateAndProps } from './helpers';
 
 const mappers: {
   For: BlockToSvelte<ForNode>;
@@ -42,16 +41,14 @@ const mappers: {
     const args = getForArguments(json, { excludeCollectionName: true }).join(', ');
 
     return `
-{#each ${stripStateAndProps(json.bindings.each?.code, options)} as ${args} ${
-      keyValue ? `(${keyValue})` : ''
-    }}
+{#each ${json.bindings.each?.code} as ${args} ${keyValue ? `(${keyValue})` : ''}}
 ${json.children.map((item) => blockToSvelte({ json: item, options, parentComponent })).join('\n')}
 {/each}
 `;
   },
   Show: ({ json, options, parentComponent }) => {
     return `
-{#if ${stripStateAndProps(json.bindings.when?.code, options)} }
+{#if ${json.bindings.when?.code} }
 ${json.children.map((item) => blockToSvelte({ json: item, options, parentComponent })).join('\n')}
 
   ${
@@ -75,21 +72,20 @@ ${json.children.map((item) => blockToSvelte({ json: item, options, parentCompone
 
       return `
         <span #${key}>
-        ${stripStateAndPropsRefs(json.bindings[key]?.code)}
+        ${json.bindings[key]?.code}
         </span>
       `;
     }
-    const strippedTextCode = stripStateAndPropsRefs(json.bindings.name.code);
 
-    return `<slot name="${stripSlotPrefix(strippedTextCode).toLowerCase()}">${json.children
+    return `<slot name="${stripSlotPrefix(json.bindings.name.code).toLowerCase()}">${json.children
       ?.map((item) => blockToSvelte({ json: item, options, parentComponent }))
       .join('\n')}</slot>`;
   },
 };
 
 const BINDINGS_MAPPER = {
   innerHTML: (json: MitosisNode, options: ToSvelteOptions) =>
-    `{@html ${stripStateAndPropsRefs(json.bindings.innerHTML?.code)}}`,
+    `{@html ${json.bindings.innerHTML?.code}}`,
 };
 
 const SVELTE_SPECIAL_TAGS = {
@@ -101,9 +97,11 @@ const SVELTE_SPECIAL_TAGS = {
 const getTagName = ({
   json,
   parentComponent,
+  options,
 }: {
   json: MitosisNode;
   parentComponent: MitosisComponent;
+  options: ToSvelteOptions;
 }) => {
   if (parentComponent && json.name === parentComponent.name) {
     return SVELTE_SPECIAL_TAGS.SELF;
@@ -115,10 +113,13 @@ const getTagName = ({
   const hasMatchingImport = parentComponent.imports.some(({ imports }) =>
     Object.keys(imports).some((name) => name === json.name),
   );
+
   // TO-DO: no way to decide between <svelte:component> and <svelte:element>...need to do that through metadata
   // overrides for now
   if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
-    json.bindings.this = { code: json.name };
+    json.bindings.this = {
+      code: stripStateAndProps({ json: parentComponent, options })(json.name),
+    };
     return SVELTE_SPECIAL_TAGS.COMPONENT;
   }
 
@@ -139,26 +140,25 @@ const stringifyBinding =
     }
 
     const { code, arguments: cusArgs = ['event'], type } = binding;
-    const useValue = stripStateAndProps(code, options);
 
     if (type === 'spread') {
-      const spreadValue = key === 'props' ? '$$props' : useValue;
+      const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
     } else if (key.startsWith('on')) {
       const event = key.replace('on', '').toLowerCase();
       // TODO: handle quotes in event handler values
 
-      const valueWithoutBlock = removeSurroundingBlock(useValue);
+      const valueWithoutBlock = removeSurroundingBlock(code);
 
       if (valueWithoutBlock === key) {
         return ` on:${event}={${valueWithoutBlock}} `;
       } else {
         return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
       }
     } else if (key === 'ref') {
-      return ` bind:this={${useValue}} `;
+      return ` bind:this={${code}} `;
     } else {
-      return ` ${key}={${useValue}} `;
+      return ` ${key}={${code}} `;
     }
   };
 
@@ -171,9 +171,9 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
     });
   }
 
-  const tagName = getTagName({ json, parentComponent });
+  const tagName = getTagName({ json, parentComponent, options });
 
-  if (isChildren(json)) {
+  if (isChildren({ node: json, extraMatches: ['$$slots.default'] })) {
     return `<slot></slot>`;
   }
 
@@ -184,11 +184,10 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
   const textCode = json.bindings._text?.code;
 
   if (textCode) {
-    const strippedTextCode = stripStateAndProps(textCode, options);
-    if (isSlotProperty(strippedTextCode)) {
-      return `<slot name="${stripSlotPrefix(strippedTextCode).toLowerCase()}"/>`;
+    if (isSlotProperty(textCode)) {
+      return `<slot name="${stripSlotPrefix(textCode).toLowerCase()}"/>`;
     }
-    return `{${strippedTextCode}}`;
+    return `{${textCode}}`;
   }
 
   let str = '';
@@ -197,10 +196,7 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
 
   const isComponent = Boolean(tagName[0] && isUpperCase(tagName[0]));
   if ((json.bindings.style?.code || json.properties.style) && !isComponent) {
-    const useValue = stripStateAndProps(
-      json.bindings.style?.code || json.properties.style,
-      options,
-    );
+    const useValue = json.bindings.style?.code || json.properties.style;
 
     str += `use:mitosis_styling={${useValue}}`;
     delete json.bindings.style;

packages/core/src/generators/svelte/helpers.ts

@@ -1,8 +1,11 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { stripStateAndPropsRefs } from '../../helpers/strip-state-and-props-refs';
 import { ToSvelteOptions } from './types';
 
-export const stripStateAndProps = (code: string | undefined, options: ToSvelteOptions) =>
-  stripStateAndPropsRefs(code, {
-    includeState: options.stateType === 'variables',
-    replaceWith: (name) => (name === 'children' ? '$$slots.default' : name),
-  });
+export const stripStateAndProps =
+  ({ options, json }: { options: ToSvelteOptions; json: MitosisComponent }) =>
+  (code: string) =>
+    stripStateAndPropsRefs(code, {
+      includeState: options.stateType === 'variables',
+      replaceWith: (name) => (name === 'children' ? '$$slots.default' : name),
+    });