fix: fix ref issue when transforming to Solid.js code

[rqzheng2015]

Description

Fix ref issue when mitosis build target is solid

Issue

I used the ref example provided on the official doc.

Playground: Click here

It is correctly transformed on React, which will present the output codes like these below:

import * as React from "react";
import { forwardRef } from "react";

const MyInput = forwardRef(function MyInput(props, inputRef) {
  return <input ref={inputRef} />;
});

export default MyInput;

But, it will cause issue on Solid, and we could see the issue at console panel.

Reason

The issue is caused by the getRefsString method in Solid.js generator, which can be read here.

const getRefsString = (json: MitosisComponent, options: ToSolidOptions) =>
  Array.from(getRefs(json))
    .map((ref) => {
      const typeParameter = (options.typescript && json['refs'][ref]?.typeParameter) || '';
      return `let ${ref}${typeParameter ? ': ' + typeParameter : ''};`;
    })
    .join('\n');

And with the insertion ${getRefsString(json, options)} in solid code, eventaully, the generated solid.js code will become something like this:

function MyComponent(props:any) {
  let props.inputRef;
  return (
    <input  ref={props.inputRef!}  />
    )
}
export default MyComponent;

And when these code met with prettier format function in Solid.js generator, it will throw out the error, which leads to the break of Solid.js code bundle.

We could easily reproduce it in a online prettier editor.

Solution

Updated at May, 4th:

Remove ref definition when it's passed by props, such as props.inputRef.

const getRefsString = (json: MitosisComponent, options: ToSolidOptions) =>
  Array.from(getRefs(json))
    .map((ref) => {
      if (ref.includes('.')) return '';
      const typeParameter = (options.typescript && json['refs'][ref]?.typeParameter) || '';
      return `let ${ref}${typeParameter ? ': ' + typeParameter : ''};`;
    })
    .join('\n');

Then it will behave in two ways:

• Ref is created by useRef, will still remain.
• Ref is passed by props, will not remain after this PR.

Remove the getRefsString method calling.

Then the Solid.js generator will generae Solid.js code like these below, which works as expected and will not throw out any error.

function MyComponent(props:any) {
  return (
    <input ref={props.inputRef!}  />
    )
}

export default MyComponent;

[changeset-bot]

🦋 Changeset detected

Latest commit: a1ca5ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@builder.io/mitosis	Patch
@builder.io/mitosis-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mitosis-fiddle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 18, 2024 11:50am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a1ca5ad. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 4 targets

• nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps
• nx build @builder.io/mitosis-site
• nx build @builder.io/eslint-plugin-mitosis
• nx build @builder.io/mitosis

---

Sent with 💌 from NxCloud.

[rqzheng2015]

Hi, @samijaber. Could you help me with the pr test failed issue?

I've been tested on my local macOS and update snapshot, and it all worked well. But the test just failed on github action, any particular reason why? Thanks.

Same test failed issue happens on my other PR as well.

[rqzheng2015]

Hi, @samijaber, do you have a moment to see the reason of why vitest snapshot not correctly generated? That would be great help for my MR, thanks.

[samijaber]

Hi @rqzheng2015 , sorry for the delay. There's an issue with our test suite causing tests to not work properly.

It is causing all PRs to break unless additional instructions are followed.

I will fix this issue first and then let you know to rerun your tests locally to get them fixed

[samijaber]

this is not the right fix. you are getting rid of all ref declarations/

what we need to do is fix getRefs so it does not include ref attributes whose contents are javascript expressions.

mitosis/packages/core/src/helpers/get-refs.ts

Lines 9 to 12 in 5b04b03

	if (typeof item.bindings.ref?.code === 'string') {
	refs.add(item.bindings.ref.code);
	}
	}

an extra check needs to be made here, maybe exclude anything with a . as a quick fix for now.

[rqzheng2015]

Okay, sorry for the late response. I have corrected it in the getRefsString method of Solid.js generator without removing the getRefsString method itself. Please check again, thanks.

[rqzheng2015]

Hi @samijaber, I have modified my PR to fix the ref issue changes and vitest snapshot issues, please check when you are free, thanks.