solid-refresh icon indicating copy to clipboard operation
solid-refresh copied to clipboard

passthrough ref callback causes (Cannot set property which has only a getter)

Open tmm1 opened this issue 1 year ago • 1 comments

a component approximately like:

export const InlineTextArea = (props: {
	setRef?: (ref: HTMLInputElement) => void;
}) => {
	return (
		<input
			ref={props.setRef}

is normally translated to:

export const InlineTextArea = (props: {
  setRef?: (ref: HTMLInputElement) => void;
}) => {
  return (() => {
    const _el$ = _tmpl$();
    const _ref$ = props.setRef;
    typeof _ref$ === "function" ? _$use(_ref$, _el$) : props.setRef = _el$;

but with solid-refresh:

const _REGISTRY = _$$registry();
const InlineTextArea_1 = _$$component(_REGISTRY, "InlineTextArea_1", _props => /*@refresh jsx-skip*/(() => {
  var _el$ = _tmpl$();
  var _ref$ = _props.v0;
  typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$;
...

export const InlineTextArea = _$$component(_REGISTRY, "InlineTextArea", (props: {
  setRef?: (ref: HTMLInputElement) => void;
}) => {
  return /*@refresh jsx-skip*/_$createComponent(InlineTextArea_1, {
    get v0() {
      return props.setRef;
    },

the _props.v0 = breaks:

TypeError: Cannot set property v0 of #<Object> which has only a getter
    at _$$component.location 
    at solid-refresh.mjs

my workaround is:

 		<input
-			ref={props.setRef}
+			ref={props.setRef ?? (() => {})}

tmm1 avatar Jan 17 '25 03:01 tmm1

well that's interesting. This used to work before, even if you ran a basic example like:

example = { get x() { return 100 } }
example.x = 1000;

Perhaps something changed in createComponent

lxsmnsyc avatar Jan 17 '25 05:01 lxsmnsyc