fix: issue with stencil local exports

nmerget · nmerget · commit e79fc037f9eb · 2025-01-17T09:57:33.000+01:00
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -131,11 +131,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -155,11 +151,15 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -524,20 +524,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -2490,24 +2477,24 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
 })
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   render() {
     return (
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -2819,11 +2806,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Javascript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -2949,13 +2932,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run(value) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4081,11 +4058,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4105,11 +4078,15 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -4474,20 +4451,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"export function usePrevious<T>(value: T) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef<T>(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -6453,24 +6417,24 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES: Props = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
 })
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   render() {
     return (
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -6783,11 +6747,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -6913,13 +6873,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run<T>(value: T) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
diff --git a/packages/core/src/__tests__/stencil.test.ts b/packages/core/src/__tests__/stencil.test.ts
@@ -14,6 +14,6 @@ describe('Stencil', () => {
     generator: componentToStencil,
     options: {},
     logOutput: true,
-    only: ['typeDependency'],
+    only: ['defaultValsWithTypes'],
   });
 });*/
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
@@ -218,7 +218,7 @@ const BASIC_TESTS: Tests = {
   propsInterface: propsInterface,
   defaultProps: defaultProps,
   defaultPropsOutsideComponent,
-  preserveTyping: preserveTyping,
+  preserveTyping,
   typeDependency,
   typeExternalStore,
   typeExternalProps,
diff --git a/packages/core/src/generators/stencil/component.ts b/packages/core/src/generators/stencil/component.ts
@@ -1,6 +1,7 @@
 import { stringifySingleScopeOnMount } from '@/generators/helpers/on-mount';
 import { blockToStencil } from '@/generators/stencil/blocks';
 import {
+  getExportsAndLocal,
   getImports,
   getPropsAsCode,
   getStencilCoreImportsAsString,
@@ -57,7 +58,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     const childComponents: string[] = getChildComponents(json);
     const processBindingOptions: ProcessBindingOptions = { events };
 
-    options.plugins = getCodeProcessorPlugins(options, processBindingOptions);
+    options.plugins = getCodeProcessorPlugins(json, options, processBindingOptions);
 
     if (options.plugins) {
       json = runPostJsonPlugins({ json, plugins: options.plugins });
@@ -128,6 +129,8 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
         ${getPropsAsCode(props, json, defaultProps)}
         ${dataString}
         ${methodsString}
+        
+        ${getExportsAndLocal(json)}
 
         ${
           !json.hooks.onMount.length
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
@@ -23,8 +23,21 @@ const appendEmits = (str: string, events: string[]): string => {
 
 export type ProcessBindingOptions = { events: string[] };
 
-export const processBinding = (code: string, { events }: ProcessBindingOptions) => {
-  return stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+export const processBinding = (
+  json: MitosisComponent,
+  code: string,
+  { events }: ProcessBindingOptions,
+) => {
+  let resolvedCode = stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+  if (json.exports) {
+    // We need to use local exports with `this.` in stencil
+    Object.entries(json.exports)
+      .filter(([, value]) => value.usedInLocal)
+      .forEach(([key]) => {
+        resolvedCode = resolvedCode.replaceAll(key, `this.${key}`);
+      });
+  }
+  return resolvedCode;
 };
 
 export const getTagName = (name: string, { prefix }: ToStencilOptions): string => {
@@ -126,6 +139,7 @@ export const getImports = (
     explicitImportFileExtension: options.explicitImportFileExtension,
     component: json,
     target: 'stencil',
+    excludeExportAndLocal: true,
     importMapper: (_: any, theImport: any, importedValues: any) => {
       const childImport = importedValues.defaultImport;
       if (childImport && childComponents.includes(childImport)) {
@@ -136,3 +150,15 @@ export const getImports = (
     },
   });
 };
+
+export const getExportsAndLocal = (json: MitosisComponent) => {
+  return Object.entries(json.exports || {})
+    .map(([key, { usedInLocal, code }]) => {
+      if (usedInLocal) {
+        return `${key} = ${code.substring(code.indexOf('=') + 1)}`;
+      }
+
+      return '';
+    })
+    .join('\n');
+};
diff --git a/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts b/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
@@ -1,8 +1,10 @@
 import { processBinding, ProcessBindingOptions } from '@/generators/stencil/helpers/index';
 import { ToStencilOptions } from '@/generators/stencil/types';
 import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
+import { MitosisComponent } from '@/types/mitosis-component';
 
 export const getCodeProcessorPlugins = (
+  json: MitosisComponent,
   options: ToStencilOptions,
   processBindingOptions: ProcessBindingOptions,
 ) => {
@@ -18,7 +20,7 @@ export const getCodeProcessorPlugins = (
         case 'context-set':
         case 'dynamic-jsx-elements':
         case 'types':
-          return (code) => processBinding(code, processBindingOptions);
+          return (code) => processBinding(json, code, processBindingOptions);
       }
     }),
   ];
diff --git a/packages/core/src/helpers/render-imports.ts b/packages/core/src/helpers/render-imports.ts
@@ -237,11 +237,13 @@ export const renderPreComponent = ({
   componentsUsed = [],
   importMapper,
   explicitImportFileExtension = false,
+  excludeExportAndLocal = false,
 }: Omit<ImportArgs, 'explicitImportFileExtension' | 'asyncComponentImports'> &
   Partial<Pick<ImportArgs, 'explicitImportFileExtension' | 'asyncComponentImports'>> & {
     component: MitosisComponent;
     target: Target;
     excludeMitosisComponents?: boolean;
+    excludeExportAndLocal?: boolean;
   }): string => `
     ${renderImports({
       imports: component.imports,
@@ -254,7 +256,7 @@ export const renderPreComponent = ({
       importMapper,
       explicitImportFileExtension,
     })}
-    ${renderExportAndLocal(component)}
+    ${excludeExportAndLocal ? '' : renderExportAndLocal(component)}
     ${component.hooks.preComponent?.code || ''}
   `;
 
