You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Until now I havnt found a way to get server components similar to htmx. One possible way is to put components in the router and use them like a route but it produces a large response size.
Describe the proposed solution
This javascript function kindof works
first I setup a components directory in routes, for example "routes/components/counter/+page.svelte"
then when I want to update the component I pass the destination element and request path to the function below and it successfully grabs the component and places it
constgetComponent=async(componentPath: string,target: HTMLElement)=>{constres=awaitfetch(componentPath,{method: 'GET',headers: {// html content type'Content-Type': 'text/html'}});if(res.ok){constparser=newDOMParser();constdoc=parser.parseFromString(awaitres.text(),'text/html');constscriptTags=doc.getElementsByTagName('script');constlastScriptTag=scriptTags[scriptTags.length-1]!;constscript=document.createElement('script');script.innerHTML=lastScriptTag.innerHTML;constteleportContent=()=>{div.querySelector('#svelte-announcer')?.remove();target.replaceWith(...div.childNodes);};// create a div in body to hold the component with id of the component pathconstdiv=document.createElement('div');div.id=componentPath;document.body.appendChild(div);// wait for the component to be hydratedconstobserver=newMutationObserver((mutations)=>{if(mutations[0].removedNodes.length>0){observer.disconnect();teleportContent();}});observer.observe(div,{childList: true});div.appendChild(script);div.remove();}else{console.error('Fetch error:',res.status);}};
The issue with this is that although it does support the use of stores and imports in the component (which is great!) it produces a large response for a relatively small component.
It would be great if the sveltekit team would add a more native and convenient solution that produces a smaller request. There are many directions this could go, I would love to see any of them happen.
Alternatives considered
I also tried setting htmx up, it worked but it was very clunky and not ideal for sveltekit in my opinion
How do I get it going?
do npm install htmx.org && npm install -D typed-htmx
Describe the problem
Until now I havnt found a way to get server components similar to htmx. One possible way is to put components in the router and use them like a route but it produces a large response size.
Describe the proposed solution
This javascript function kindof works
first I setup a components directory in routes, for example "routes/components/counter/+page.svelte"
then when I want to update the component I pass the destination element and request path to the function below and it successfully grabs the component and places it
The issue with this is that although it does support the use of stores and imports in the component (which is great!) it produces a large response for a relatively small component.
It would be great if the sveltekit team would add a more native and convenient solution that produces a smaller request. There are many directions this could go, I would love to see any of them happen.
Alternatives considered
I also tried setting htmx up, it worked but it was very clunky and not ideal for sveltekit in my opinion
How do I get it going?
do
npm install htmx.org && npm install -D typed-htmx
add this script in your app.html head
add this in tsconfig
and this inside global in app.d.ts
Importance
nice to have
Additional Information
No response
The text was updated successfully, but these errors were encountered: