Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only apply forwardRef for React when props.ref is passed #1172

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+1,946 −112
Open

Only apply forwardRef for React when props.ref is passed #1172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
de59709
fix: remove incorrect forwardRef from Preact
crutchcorn May 8, 2023
d67de8d
chore: fix preact snapshot
crutchcorn May 9, 2023
b652d89
Merge branch 'remove-forward-ref-preact' into react-renderer
May 9, 2023
1fdb410
chore: make React only forwardRef during `ref`
May 9, 2023
06673d9
chore: update forwardRef docs
May 9, 2023
e882dea
Merge branch 'main' into react-renderer
crutchcorn May 15, 2023
644b64d
chore: apply formatting
crutchcorn May 16, 2023
df5433e
Merge branch 'main' into react-renderer
crutchcorn May 23, 2023
4702447
chore: add target to getProps to validate Vue
crutchcorn May 23, 2023
a6f5934
chore: update snapshots
crutchcorn May 23, 2023
d249c8e
chore: fix formatter
crutchcorn May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/hooks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,13 @@ export default function MyComponent() {

<details>

In React you may need to wrap your component with `forwardRef` to provide direct access to an element (`input` for example). You can do this by using using a `prop` value as the `ref`
In React you may need to wrap your component with `forwardRef` to pass a `ref` property to a component. You can do this by naming one of your Mitosis `prop`s `ref`

_Mitosis input_

```typescript
export default function MyInput(props) {
return <input ref={props.inputRef} />;
return <input ref={props.ref} />;
}
```

Expand All @@ -67,8 +67,8 @@ _Mitosis output_
```typescript
import { forwardRef } from 'react';

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

Expand Down
52 changes: 50 additions & 2 deletions packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1443,7 +1443,7 @@ exports[`Alpine.js > jsx > Javascript Test > basicForwardRef 1`] = `
<div x-data=\\"myBasicForwardRefComponent()\\">
<input
class=\\"input\\"
x-ref=\\"inputRef\\"
x-ref=\\"ref\\"
x-bind:value=\\"name\\"
x-on:change=\\"name = $event.target.value\\"
/>
Expand Down Expand Up @@ -1710,6 +1710,30 @@ exports[`Alpine.js > jsx > Javascript Test > defaultValsWithTypes 1`] = `
"
`;

exports[`Alpine.js > jsx > Javascript Test > dontForwardRef 1`] = `
"<style>
.input {
color: red;
}
</style>
<div x-data=\\"dontForwardRefComponent()\\">
<input
class=\\"input\\"
x-ref=\\"inputRef\\"
x-bind:value=\\"name\\"
x-on:change=\\"name = $event.target.value\\"
/>
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"dontForwardRefComponent\\", () => ({
name: \\"PatrickJS\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
<script>
Expand Down Expand Up @@ -3992,7 +4016,7 @@ exports[`Alpine.js > jsx > Typescript Test > basicForwardRef 1`] = `
<div x-data=\\"myBasicForwardRefComponent()\\">
<input
class=\\"input\\"
x-ref=\\"inputRef\\"
x-ref=\\"ref\\"
x-bind:value=\\"name\\"
x-on:change=\\"name = $event.target.value\\"
/>
Expand Down Expand Up @@ -4259,6 +4283,30 @@ exports[`Alpine.js > jsx > Typescript Test > defaultValsWithTypes 1`] = `
"
`;

exports[`Alpine.js > jsx > Typescript Test > dontForwardRef 1`] = `
"<style>
.input {
color: red;
}
</style>
<div x-data=\\"dontForwardRefComponent()\\">
<input
class=\\"input\\"
x-ref=\\"inputRef\\"
x-bind:value=\\"name\\"
x-on:change=\\"name = $event.target.value\\"
/>
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"dontForwardRefComponent\\", () => ({
name: \\"PatrickJS\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
<script>
Expand Down
83 changes: 82 additions & 1 deletion packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2627,6 +2627,44 @@ export class ComponentWithTypesModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > dontForwardRef 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
template: \`
<div>
<input
class=\\"input\\"
[attr.value]=\\"name\\"
(input)=\\"name = $event.target.value\\"
/>
</div>
\`,
styles: [
\`
.input {
color: red;
}
\`,
],
})
export class DontForwardRefComponent {
name = \\"PatrickJS\\";
}

@NgModule({
declarations: [DontForwardRefComponent],
imports: [CommonModule],
exports: [DontForwardRefComponent],
})
export class DontForwardRefComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > expressionState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -6458,7 +6496,7 @@ import { Component } from \\"@angular/core\\";

export interface Props {
showInput: boolean;
inputRef: HTMLInputElement;
ref: HTMLInputElement;
}

@Component({
Expand Down Expand Up @@ -7010,6 +7048,49 @@ export class ComponentWithTypesModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > dontForwardRef 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

export interface Props {
showInput: boolean;
inputRef: HTMLInputElement;
}

@Component({
selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
template: \`
<div>
<input
class=\\"input\\"
[attr.value]=\\"name\\"
(input)=\\"name = $event.target.value\\"
/>
</div>
\`,
styles: [
\`
.input {
color: red;
}
\`,
],
})
export class DontForwardRefComponent {
name = \\"PatrickJS\\";
}

@NgModule({
declarations: [DontForwardRefComponent],
imports: [CommonModule],
exports: [DontForwardRefComponent],
})
export class DontForwardRefComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > expressionState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down
85 changes: 84 additions & 1 deletion packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2681,6 +2681,45 @@ export class ComponentWithTypesModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Javascript Test > dontForwardRef 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
template: \`
<div>
<input
class=\\"input\\"
[attr.value]=\\"name\\"
(input)=\\"name = $event.target.value\\"
/>
</div>
\`,
styles: [
\`
.input {
color: red;
}
\`,
],
})
export class DontForwardRefComponent {
name = \\"PatrickJS\\";
}

@NgModule({
declarations: [DontForwardRefComponent],
imports: [CommonModule],
exports: [DontForwardRefComponent],
bootstrap: [SomeOtherComponent],
})
export class DontForwardRefComponentModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Javascript Test > expressionState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -6591,7 +6630,7 @@ import { Component } from \\"@angular/core\\";

export interface Props {
showInput: boolean;
inputRef: HTMLInputElement;
ref: HTMLInputElement;
}

@Component({
Expand Down Expand Up @@ -7157,6 +7196,50 @@ export class ComponentWithTypesModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Typescript Test > dontForwardRef 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

export interface Props {
showInput: boolean;
inputRef: HTMLInputElement;
}

@Component({
selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
template: \`
<div>
<input
class=\\"input\\"
[attr.value]=\\"name\\"
(input)=\\"name = $event.target.value\\"
/>
</div>
\`,
styles: [
\`
.input {
color: red;
}
\`,
],
})
export class DontForwardRefComponent {
name = \\"PatrickJS\\";
}

@NgModule({
declarations: [DontForwardRefComponent],
imports: [CommonModule],
exports: [DontForwardRefComponent],
bootstrap: [SomeOtherComponent],
})
export class DontForwardRefComponentModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Typescript Test > expressionState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down
Loading