SolidJS•15mo ago

Undocumented Hook useAssets ?

Whats this hook in SolidJS useAssets, Its not even documented Its being used in SUID https://github.com/swordev/suid/blob/main/packages/styled-engine/src/createStyle.tsx#L81 Could anyone explain

GitHub

suid/packages/styled-engine/src/createStyle.tsx at main · swordev/s...

A port of Material-UI (MUI) built with SolidJS. Contribute to swordev/suid development by creating an account on GitHub.

13 Replies

lxsmnsyc•15mo ago

It's semi-internal. useAssets injects an html string in the head of the document before the SSR response has been sent (directly after the initial shell render). We encourage the use of the Assets component, in this case

Waqas TahirOP•15mo ago

It's not working So I should use the Assets component in the head element ? I have used Assets component inside my head element but it still doesn't inject the assets into Head I am using the useAssets hook inside the createRenderEffect hook Also suid setup doesn't require you to have Assets component in the head It works though, Or does it ? here's the code

    createRenderEffect((prev) => {
        const elemId = componentId
        if (isServer) {
            useAssets(() => (
                <style id={elemId} nonce={context.cache?.nonce}>{`.${className}{${rulesString}}`}</style>
            ))
            return null
        } else {
            // let find = document.getElementById(elemId)
            // if(!find) {
            //     find = document.head.appendChild(document.createElement("style"))
            // }
            // find.nonce = context.cache?.nonce
            // find.id = elemId
            // find.innerHTML = `.${className}{${rulesString}}`
            // return find
            console.warn("dom style appending is turned off")
            return null
        }
    })

    createRenderEffect((prev) => {
        const elemId = componentId
        if (isServer) {
            useAssets(() => (
                <style id={elemId} nonce={context.cache?.nonce}>{`.${className}{${rulesString}}`}</style>
            ))
            return null
        } else {
            // let find = document.getElementById(elemId)
            // if(!find) {
            //     find = document.head.appendChild(document.createElement("style"))
            // }
            // find.nonce = context.cache?.nonce
            // find.id = elemId
            // find.innerHTML = `.${className}{${rulesString}}`
            // return find
            console.warn("dom style appending is turned off")
            return null
        }
    })

lxsmnsyc•15mo ago

Assets and useAssets btw is an SSR-only feature

Waqas TahirOP•15mo ago

yes I am using ssr

lxsmnsyc•15mo ago

createRenderEffect doesnt run on the server too

Waqas TahirOP•15mo ago

I am using if(isServer) In SUID its written like this https://github.com/swordev/suid/blob/main/packages/styled-engine/src/createStyle.tsx#L81 I am trying to do something like that, That works though ok, What in your opnion is the best way to do this ? I just need to insert a style element which is given a unique key Into the head element during SSR, I also don't want any duplicate keys

lxsmnsyc•15mo ago

Yeah however

createRenderEffect(() => {
  console.log('This doesnt run on the server');
});

createRenderEffect(() => {
  console.log('This doesnt run on the server');
});

Waqas TahirOP•15mo ago

style elment to head, no duplicate key

lxsmnsyc•15mo ago

seems to be a mistake

Waqas TahirOP•15mo ago

Ok, I all try that, Can you also tell me how to avoid duplicate style elements I have given a unique key based on contents

lxsmnsyc•15mo ago

Okay maybe what I said isn't true https://github.com/solidjs/solid/blob/main/packages/solid/src/server/reactive.ts#L99 I guess the code should work you don't have to not sure, it depends on the implementation

Waqas TahirOP•15mo ago

Okay, currently this code doesn't work how to fix thsi I tried to do it in the createRenderEffect & also without it, both ways it doesn't work createRenderEffect runs in the browser, I just tested it, I inserted a console log, shows up in the browser console I am going to create a solid-start module and test it in that and if it works I'll post here, right now I am using Astro and it doesn't seem to work btw useAssets hook doesn't run in the browser, but createRenderEffect does, I just console logged in it createRenderEffect(() => { console.log("the render efffect is here") useAssets(() => { console.log("the use assets hook is here") return <style id={elemId} nonce={context.cache?.nonce}>{.${className}{${rulesString}}}</style> }) }) Okay I setup a solid-start example that works https://stackblitz.com/edit/solid-ssr-vite-ke7ixp?file=src%2Froutes%2Findex.tsx I am going to setup an astro example and try to make it work I can't make it work with Astro apparently It works in solidjs as it is, I was able to dedupe and put style element into head use useAssets hook , how ever not in astro

lxsmnsyc•15mo ago

oh well, that's the thing. These things do not work in Astro useAssets requires the entire html to be rendered by Solid

Gaming

Programming

Undocumented Hook useAssets ?