Skip to content

Commit 67d4a51

Browse files
crutchcorncrutchcorn
authored
fix: remove incorrect forwardRef from Preact (#1170)
* fix: remove incorrect forwardRef from Preact * chore: fix preact snapshot
1 parent 213345e commit 67d4a51

File tree

3 files changed

+89
-94
lines changed

3 files changed

+89
-94
lines changed

Diff for: ‎packages/core/src/__tests__/__snapshots__/preact.test.ts.snap

+84-92
Original file line numberDiff line numberDiff line change
@@ -1643,31 +1643,29 @@ export default MyBasicForNoTagRefComponent;
16431643
exports[`Preact > jsx > Javascript Test > basicForwardRef 1`] = `
16441644
"/** @jsx h */
16451645
import { h, Fragment } from \\"preact\\";
1646-
import { useState, forwardRef } from \\"preact/hooks\\";
1646+
import { useState } from \\"preact/hooks\\";
16471647

1648-
const MyBasicForwardRefComponent = forwardRef(
1649-
function MyBasicForwardRefComponent(props, inputRef) {
1650-
const [name, setName] = useState(() => \\"PatrickJS\\");
1648+
function MyBasicForwardRefComponent(props) {
1649+
const [name, setName] = useState(() => \\"PatrickJS\\");
16511650

1652-
return (
1653-
<Fragment>
1654-
<div>
1655-
<input
1656-
className=\\"input\\"
1657-
ref={inputRef}
1658-
value={name}
1659-
onChange={(event) => setName(event.target.value)}
1660-
/>
1661-
</div>
1662-
<style jsx>{\`
1663-
.input {
1664-
color: red;
1665-
}
1666-
\`}</style>
1667-
</Fragment>
1668-
);
1669-
}
1670-
);
1651+
return (
1652+
<Fragment>
1653+
<div>
1654+
<input
1655+
className=\\"input\\"
1656+
ref={props.inputRef}
1657+
value={name}
1658+
onChange={(event) => setName(event.target.value)}
1659+
/>
1660+
</div>
1661+
<style jsx>{\`
1662+
.input {
1663+
color: red;
1664+
}
1665+
\`}</style>
1666+
</Fragment>
1667+
);
1668+
}
16711669

16721670
export default MyBasicForwardRefComponent;
16731671
"
@@ -1676,31 +1674,29 @@ export default MyBasicForwardRefComponent;
16761674
exports[`Preact > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
16771675
"/** @jsx h */
16781676
import { h, Fragment } from \\"preact\\";
1679-
import { useState, forwardRef } from \\"preact/hooks\\";
1677+
import { useState } from \\"preact/hooks\\";
16801678

1681-
const MyBasicForwardRefComponent = forwardRef(
1682-
function MyBasicForwardRefComponent(props, inputRef) {
1683-
const [name, setName] = useState(() => \\"PatrickJS\\");
1679+
function MyBasicForwardRefComponent(props) {
1680+
const [name, setName] = useState(() => \\"PatrickJS\\");
16841681

1685-
return (
1686-
<Fragment>
1687-
<div>
1688-
<input
1689-
className=\\"input\\"
1690-
ref={inputRef}
1691-
value={name}
1692-
onChange={(event) => setName(event.target.value)}
1693-
/>
1694-
</div>
1695-
<style jsx>{\`
1696-
.input {
1697-
color: red;
1698-
}
1699-
\`}</style>
1700-
</Fragment>
1701-
);
1702-
}
1703-
);
1682+
return (
1683+
<Fragment>
1684+
<div>
1685+
<input
1686+
className=\\"input\\"
1687+
ref={props.inputRef}
1688+
value={name}
1689+
onChange={(event) => setName(event.target.value)}
1690+
/>
1691+
</div>
1692+
<style jsx>{\`
1693+
.input {
1694+
color: red;
1695+
}
1696+
\`}</style>
1697+
</Fragment>
1698+
);
1699+
}
17041700

17051701
export default MyBasicForwardRefComponent;
17061702
"
@@ -5059,36 +5055,34 @@ export default MyBasicForNoTagRefComponent;
50595055
exports[`Preact > jsx > Typescript Test > basicForwardRef 1`] = `
50605056
"/** @jsx h */
50615057
import { h, Fragment } from \\"preact\\";
5062-
import { useState, forwardRef } from \\"preact/hooks\\";
5058+
import { useState } from \\"preact/hooks\\";
50635059

50645060
export interface Props {
50655061
showInput: boolean;
50665062
inputRef: HTMLInputElement;
50675063
}
50685064

5069-
const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
5070-
function MyBasicForwardRefComponent(props: Props, inputRef) {
5071-
const [name, setName] = useState(() => \\"PatrickJS\\");
5065+
function MyBasicForwardRefComponent(props: Props) {
5066+
const [name, setName] = useState(() => \\"PatrickJS\\");
50725067

5073-
return (
5074-
<Fragment>
5075-
<div>
5076-
<input
5077-
className=\\"input\\"
5078-
ref={inputRef}
5079-
value={name}
5080-
onChange={(event) => setName(event.target.value)}
5081-
/>
5082-
</div>
5083-
<style jsx>{\`
5084-
.input {
5085-
color: red;
5086-
}
5087-
\`}</style>
5088-
</Fragment>
5089-
);
5090-
}
5091-
);
5068+
return (
5069+
<Fragment>
5070+
<div>
5071+
<input
5072+
className=\\"input\\"
5073+
ref={props.inputRef}
5074+
value={name}
5075+
onChange={(event) => setName(event.target.value)}
5076+
/>
5077+
</div>
5078+
<style jsx>{\`
5079+
.input {
5080+
color: red;
5081+
}
5082+
\`}</style>
5083+
</Fragment>
5084+
);
5085+
}
50925086

50935087
export default MyBasicForwardRefComponent;
50945088
"
@@ -5097,36 +5091,34 @@ export default MyBasicForwardRefComponent;
50975091
exports[`Preact > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
50985092
"/** @jsx h */
50995093
import { h, Fragment } from \\"preact\\";
5100-
import { useState, forwardRef } from \\"preact/hooks\\";
5094+
import { useState } from \\"preact/hooks\\";
51015095

51025096
export interface Props {
51035097
showInput: boolean;
51045098
inputRef: HTMLInputElement;
51055099
}
51065100

5107-
const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
5108-
function MyBasicForwardRefComponent(props: Props, inputRef) {
5109-
const [name, setName] = useState(() => \\"PatrickJS\\");
5101+
function MyBasicForwardRefComponent(props: Props) {
5102+
const [name, setName] = useState(() => \\"PatrickJS\\");
51105103

5111-
return (
5112-
<Fragment>
5113-
<div>
5114-
<input
5115-
className=\\"input\\"
5116-
ref={inputRef}
5117-
value={name}
5118-
onChange={(event) => setName(event.target.value)}
5119-
/>
5120-
</div>
5121-
<style jsx>{\`
5122-
.input {
5123-
color: red;
5124-
}
5125-
\`}</style>
5126-
</Fragment>
5127-
);
5128-
}
5129-
);
5104+
return (
5105+
<Fragment>
5106+
<div>
5107+
<input
5108+
className=\\"input\\"
5109+
ref={props.inputRef}
5110+
value={name}
5111+
onChange={(event) => setName(event.target.value)}
5112+
/>
5113+
</div>
5114+
<style jsx>{\`
5115+
.input {
5116+
color: red;
5117+
}
5118+
\`}</style>
5119+
</Fragment>
5120+
);
5121+
}
51305122

51315123
export default MyBasicForwardRefComponent;
51325124
"

Diff for: ‎packages/core/src/generators/react/blocks.ts

+3
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,9 @@ const BINDING_MAPPERS: {
139139
| ((key: string, value: string, options?: ToReactOptions) => [string, string]);
140140
} = {
141141
ref(ref, value, options) {
142+
if (options?.preact) {
143+
return [ref, value];
144+
}
142145
const regexp = /(.+)?props\.(.+)( |\)|;|\()?$/m;
143146
if (regexp.test(value)) {
144147
const match = regexp.exec(value);

Diff for: ‎packages/core/src/generators/react/generator.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ const _componentToReact = (
259259
let hasState = checkHasState(json);
260260

261261
const [forwardRef, hasPropRef] = getPropsRef(json);
262-
const isForwardRef = Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
262+
const isForwardRef = !options.preact && Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
263263
if (isForwardRef) {
264264
const meta = json.meta.useMetadata?.forwardRef as string;
265265
options.forwardRef = meta || forwardRef;
@@ -308,7 +308,7 @@ const _componentToReact = (
308308
if (allRefs.length) {
309309
reactLibImports.add('useRef');
310310
}
311-
if (hasPropRef) {
311+
if (!options.preact && hasPropRef) {
312312
reactLibImports.add('forwardRef');
313313
}
314314
if (

0 commit comments

Comments
 (0)