#how to create a non-reactive function that returns a div?

68 messages · Page 1 of 1 (latest)

gritty nymph
#

maybe wrap it in untrack

#

the return

#

I think it's just the use of JSX tbh

#

seems fine to me, are you passing in any values from like a regular component or something that accesses a signal/reactive property?

#

Yeah I would guess it's just the use of jsx then

#

I don't think there would be an issue though without createRoot, just the warning

#

how is the function being called?

#

and none of the data being passed to the function is from a reactive source?

#

like a signal, store, or props?

#

pointer and numpoints aren't stores or props either 🤔

#

Yeah not sure why the warning is being thrown then

#

hmm

#

where is style coming from?

#

that is odd

#

can you try making a dummy object like

const test = {
  numContainer: "test-class"
}

and use that

#

I wonder if the issue is the bracketed assignment or something else

#

yeah

#

oh

#

no

#

yeah

#

does that error?

#

very weird

#

seems like a bug

#

btw did you leave the server and rejoin?

#

oh interesting

#

fair enough, good plan

thorny saffron
#

Did you know that selfbots (what you're using for this) are against discord's ToS? You might want to reconsider that approach.

#

Gettting permabanned from discord is no joke

undone void
#

Why not add the result of createNumberDiv to the DOM with a <Portal/>? Then you can schedule the disposal of the jsx-effects with mounting/unmounting?

frosty shoal
#

Because of the heuristic for making something reactive is it accesses a property or calls a function. If you hoist the expression out of the JSX it won't.. ie:

const { numContainer } = style;
const elem = <div class={numContainer}>5</div> as HTMLDivElement;
#

But any expression that calls a function or accesses a property could be reactive and we have to treat it as such.

#

As long as your special div don't share siblings with stuff Solid manages I think it should be fine.

#

If there are siblings then Solid does a diff and it will get confused..

#

But if your elements are in a parent (which can be in solid) and its siblings you control completely there shouldn't be an issue.

#

Well the createRoot call is only necessary because something is creating Solid effects (probably JSX bindings) otherwise it wouldn't be necessary.

#

Like this creates 2:

return (
    <div class={style.numContainer} style={{ color, width: startingWidth + "%" }}>
      {digits.map(c => getDigitSVG(c)())}
    </div>
  );
# 
function createNumberDiv(digits: Array<number>, startingWidth: number, color: string) {
  const { numContainer } = style;
  const containerStyle = { color, width: startingWidth + "%" }
  const children = digits.map(c => getDigitSVG(c)({ class: style.numSVG }));
  return (
    <div class={numContainer} style={containerStyle}>{children}</div>
  );
}
#

Try that

#

Technically we do have a comment annotation for this as well. But it has been debated that we should deprecate it since you can usually hoist.

#

The easiest way to remove reactivity is to only pass variables into the JSX.

#

I see.. yeah it is because style is special let me see

#

It is because the object itself can be a proxy

#

Put style back inline

# 
function createNumberDiv(digits: Array<number>, startingWidth: number, color: string) {
  const { numContainer } = style;
  const children = digits.map(c => getDigitSVG(c)({ class: style.numSVG }));
  return (
    <div class={numContainer} style={{ color, width: startingWidth + "%" }}>{children}</div>
  );
}
#

we can actually analyze it better inline

#

If you are still getting issues then issue is in something I can't see

#

Ahh the spread on props

#

yes

#

props could be really anytihng

#

so the spread has to be reactive

#

There is another option but I just want to see if this will work fine

#

/*@once*/

#

oh

#

call it as a function inside getDigitSVG

#

right now children is a function

#

so it is gettnig called reactively under the jsx

#

Like you are returning a component from getDigitSVG

#

You need to return the value

#

wait no you are already calling it as a funciton my bad

#

I'm not getting any more root issues with this.. obviously I deleted your lookup

#

Is it possible one of the other SVGs is different

#

oh wait

#

you have a property access in the SVG still

# 
export function IconThickNum0() {
  const { thickNum } = style;
  return (
    <svg class={thickNum} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 18">
      <path fill="currentColor" stroke="#333" stroke-miterlimit="10" d="M7.52.91c4.82 0 6.67 3.19 6.67 7.87s-1.73 8.3-6.72 8.3C1.98 17.09.8 12.67.8 8.69.8 4.22 3.11.91 7.52.91Zm2.74 7.85c0-2.14-.36-4.54-2.88-4.54-2.33 0-2.71 2.57-2.71 4.49s.34 5.11 2.81 5.11c2.66 0 2.78-3.12 2.78-5.06Z"/>
    </svg>
  );
}
#

Yes because it could be a proxy

#

Not easily at compile time..

#

It might be interesting to annotate..