Wurfle Comments - Answer Overflow

The image doesn't have to load on the server at all. The behavior I'm looking for is 1. Server renders page 2. Sees image in a resource 3. Renders suspense fallback 4. Client hydrates 5. Sees image in a resource 6. Loads image as an offscreen HTMLImageElement asynchronously 7. Hydates fallback 8. Image finishes loading 9. Resource completes with image element inside

7 replies

SSolidJS

•Created by Wurfle on 8/24/2023 in #support

Is it possible to create a resource of type HTMLImageElement with SSR?

I’m aware of preload, I’m just messing around with using images to trigger suspense.

7 replies

SSolidJS

•Created by Wurfle on 4/21/2023 in #support

Client-only resource with SSR

Also I don't think there's a way to trigger Suspense from a resource inside onMount

7 replies

SSolidJS

•Created by Wurfle on 4/21/2023 in #support

Client-only resource with SSR

ssrLoadFrom: "initial" doesn't run the fetcher on the client as far as I can tell:

  const [test] = createResource(
    () => {
      console.log('fetcher')
      return 'data'
    },
    { ssrLoadFrom: 'initial', initialValue: undefined },
  )

  createEffect(() => {
    console.log('result: ', test())
  })

  const [test] = createResource(
    () => {
      console.log('fetcher')
      return 'data'
    },
    { ssrLoadFrom: 'initial', initialValue: undefined },
  )

  createEffect(() => {
    console.log('result: ', test())
  })

7 replies

SSolidJS

•Created by musiclover on 3/3/2023 in #support

How to not render <Portal> if mount is undefined?

Alternatively you could use the ref inherent attribute, but this only works for elements created with JSX:

const [element, setElement] = createSignal()

return <div ref={setElement}>Foo</div>

const [element, setElement] = createSignal()

return <div ref={setElement}>Foo</div>

5 replies

SSolidJS

•Created by musiclover on 3/3/2023 in #support

How to not render <Portal> if mount is undefined?

document.getElementById only returns an element at a particular moment in time. You could run getElementById inside createEffect and then update a signal with the result:

const [element, setElement] = createSignal()

// This only runs once unless you access some other signal in it.
createEffect(() => {
  setElement(document.getElementById("foo"))
})

const [element, setElement] = createSignal()

// This only runs once unless you access some other signal in it.
createEffect(() => {
  setElement(document.getElementById("foo"))
})

Its worth noting that if foo gets removed from the DOM for whatever reason, your signal will not be updated of this unless the effect runs again.

5 replies

SSolidJS

•Created by musiclover on 3/3/2023 in #support

How to not render <Portal> if mount is undefined?

You can wrap the Portal in a Show. Passing the element to the when attribute to ensure that it is not null.

5 replies

SSolidJS

•Created by Wurfle on 3/1/2023 in #support

What's the simplest way to combine the classList prop?

Wouldn't spreading the props break the individual add/remove class? or does it diff the object?

5 replies

SSolidJS

•Created by Wurfle on 12/15/2022 in #support