Only apply forwardRef for React when props.ref is passed

[crutchcorn]

This PR builds on top of #1170, please merge that first

Description

This PR ensures that forwardRefs only get passed in React when:
- props.ref is passed
- useMetadata has a passed name that matches a ref

[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	May 23, 2023 4:58am

[crutchcorn]

Fixes #1159

[samijaber]

can you handle the conflicts in this branch and merge main so we see a cleaner diff?

[samijaber]

This logic is used by many generators, and we need to forbid these reserved words for Vue as per the comment above: https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130

[crutchcorn]

Alternative method:

Can we break this into two distinct regex keywords so that they only apply to the specific generator?

[samijaber]

Yeah.

I'd do that by adding a target argument to getProps, and toggle parts of the regex based on the need. Something like:

target === 'react' ? '' : 'ref'

[samijaber]

I just realized this function is never used by the React generatore, so I'm not sure your changes are doing anything.

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this branch

---

✅ Successfully ran 4 targets

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

---

Sent with 💌 from NxCloud.

[samijaber]

I just realized this function is never used by the React generatore, so I'm not sure your changes are doing anything.

[samijaber]

We want to avoid adding new regexes to the codebase moving forward and rely instead on Babel transformers. Regexes are very error-prone and brittle, and hard to understand. I can tell you copy/pasted similar helpers used by other generators but this stuff causes lots of bugs.

To use Babel, you can rely on https://astexplorer.net/ to figure out how the AST is structured, or look at some examples in the codebase:

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

Lines 13 to 100 in d5feb30

	const replaceRefsInString = (code: string, refs: string[], mapper: RefMapper) => {
	return babelTransformExpression(code, {
	Identifier(path: NodePath<types.Identifier>) {
	const name = path.node.name;
	const isRef = refs.includes(name);
	if (isRef) {
	path.replaceWith(types.identifier(mapper(name)));
	}
	},
	});
	};
	export const mapRefs = (component: MitosisComponent, mapper: RefMapper): void => {
	const refSet = getRefs(component);
	// grab refs not used for bindings
	Object.keys(component.refs).forEach((ref) => refSet.add(ref));
	const refs = Array.from(refSet);
	for (const key of Object.keys(component.state)) {
	const stateVal = component.state[key];
	if (typeof stateVal?.code === 'string') {
	const value = stateVal.code;
	switch (stateVal.type) {
	case 'method':
	case 'getter':
	const isGet = stateVal.type === 'getter';
	const isSet = Boolean(value.match(SETTER));
	component.state[key] = {
	code: replaceRefsInString(
	value.replace(/^(get |set )?/, 'function '),
	refs,
	mapper,
	).replace(/^function /, isGet ? 'get ' : isSet ? 'set ' : ''),
	type: stateVal.type,
	};
	break;
	case 'function':
	component.state[key] = {
	code: replaceRefsInString(value, refs, mapper),
	type: 'function',
	};
	break;
	default:
	break;
	}
	}
	}
	traverse(component).forEach(function (item) {
	if (isMitosisNode(item)) {
	for (const key of Object.keys(item.bindings)) {
	const value = item.bindings[key];
	if (typeof value === 'object' && key !== 'ref') {
	item.bindings[key] = {
	...value,
	code: replaceRefsInString(value.code as string, refs, mapper),
	};
	}
	}
	}
	});
	for (const key of Object.keys(component.hooks) as (keyof typeof component.hooks)[]) {
	const hooks = component.hooks[key];
	if (Array.isArray(hooks)) {
	hooks.forEach((hook) => {
	if (hook.code) {
	hook.code = replaceRefsInString(hook.code, refs, mapper);
	}
	if (hook.deps) {
	hook.deps = replaceRefsInString(hook.deps, refs, mapper);
	}
	});
	} else {
	const hookCode = hooks?.code;
	if (hookCode) {
	hooks.code = replaceRefsInString(hookCode, refs, mapper);
	}
	if (hooks?.deps) {
	hooks.deps = replaceRefsInString(hooks?.deps, refs, mapper);
	}
	}
	}
	};

I made a quick example that should do what you want here: https://astexplorer.net/#/gist/5b7fcfe92b39eb399aea7236758befa2/latest

You can reuse babelTransformExpression to run the transform on the code