Create a create...Effect for many tertiary primitives

[fabian-hiller]

I use SolidStart and for me it happens more often that I have to react to a primitiv with an effect. Therefore it would make the code clearer if I could react directly with a special effect.

This is what my code currently looks like:

// Create window size
const windowSize = createWindowSize();

// React on window size change
createEffect(() => {
  console.log(windowSize.width)
})

And this is how it could look with a special effect:

// React directly on window size change
createWindowSizeEffect(({width}) => {
  console.log(width)
})

This can be applied to many tertiary primitives such as createScrollPosition with createScrollPositionEffect and createElementSize with createElementSizeEffect.

In this way, we can reduce the code and complexity of components and improve readability. Since I've only been using Solid for a few days, I'm eager to hear your feedback. Maybe I have missed something. If not and you like the idea, I'm happy to contribute with pull requests to the implementation.

[thetarnav]

Hey, thanks for opening this, but I don't think I like the idea.
The only benefit is removing one line of code, and the readability gain is subjective—in my opinion, a signal + effect is a super readable pattern, used all over solid applications.
With the tradeoff of losing the composition value:

• a simple signal can bu used with a variety of primitives: memos, effects, computers, or other tertiary primitives of the same API.
• you can use multiple signals in one primitive. e.g you could compute the position value in a memo, listening to window size and the element's bounds.

import { useWindowSize } from "@solid-primitives/resize-observer"
import { createElementBounds } from "@solid-primitives/bounds"
import { createThrottledMemo } from "@solid-primitives/memo"

const windowSize = useWindowSize();
const bounds = createElementBounds(target);

const position = createThrottledMemo(() => {
  // calculate position with both window size and element bounds
}, 200)

If you are looking for a simple "callback that fires when the size changes" then, there are options too.

// on window resize:
import { makeEventListener } from "@solid-primitives/event-listener"
makeEventListener(window, "resize", e => {
  console.log({ width: window.innerWidth, height: window.innerHeight })
})

// on element resize
import { createResizeObserver } from "@solid-primitives/resize-observer";
createResizeObserver(target, ({ width, height }) => {
  console.log(width, height);
});

// on scroll
import { makeEventListener } from "@solid-primitives/event-listener"
makeEventListener(window, "scroll", e => {
  console.log({ x: window.scrollX, y: window.scrollY })
})

So API-wise I'm happy with the current primitives.
There may be a potential in abstracting some of them a little bit more. For example to remove the need to use event listeners directly, by adding more callback-based primitives.
e.g. intead of listening to the scroll position with event-listener, and get values of the window object, you would import one that would do that for you:

import { makeScrollListener } from "@solid-primitives/scroll"
makeScrollListener(window, ({ x, y }) => {
  console.log({ x, y })
})

[fabian-hiller]

Thank you for your fast feedback! Is the best approach to use makeEventListener(window,...) in SolidStart to wrap it in a if (!isServer) {...} statement to prevent a window reference error?

[thetarnav]

That or onMount works.
Maybe it would be worth accepting a thunk to avoid that..

[fabian-hiller]

Thanks again!