Rendering HTML from Svelte SSR

[jimafisk]

Hi @matthewmueller!

I was exploring how I might leverage your V8 / Svelte compilation in Plenti. Your API is really nicely written 👌

Simple example compiling Svelte files from a "templates" folder to an "output" folder

package main

import (
	"io/ioutil"
	"os"
	"path/filepath"
	"strings"

	v8 "github.com/livebud/bud/package/js/v8"
	"github.com/livebud/bud/package/svelte"
)

func main() {
	vm, _ := v8.Load()
	svelteCompiler, _ := svelte.Load(vm)

	filepath.Walk("templates", func(path string, info os.FileInfo, err error) error {
		if !info.IsDir() && filepath.Ext(path) == ".svelte" {
			fileContents, _ := os.ReadFile(path)
			destPath := "output" + strings.TrimPrefix(path, "templates")
			os.MkdirAll(filepath.Dir(destPath), os.ModePerm)

			DOM, _ := svelteCompiler.DOM(path, fileContents)
			ioutil.WriteFile(strings.TrimSuffix(destPath, ".svelte")+"_DOM.js", []byte(DOM.JS), os.ModePerm)

			SSR, _ := svelteCompiler.SSR(path, fileContents)
			ioutil.WriteFile(strings.TrimSuffix(destPath, ".svelte")+"_SSR.js", []byte(SSR.JS), os.ModePerm)
		}
		return nil
	})
}

My question: Is there a way to run Component.render(props) from your svelte package to generate HTML? Thank you!

Related issues:

• How is svelte being server side rendered? #246
• Server side rendering #23

[matthewmueller]

Hey @jimafisk 🙂

So those functions are for compiling one Svelte file to JS. I'm guessing in Plenti, you'll want to support imports as well. To do that you'll need to wrap those functions as plugins in ESBuild to get one large blob of bundled JS.

You can find that code here:

bud/framework/view/ssr/ssr.go

Line 55 in 2cc8d0a

func (c *Generator) Compile(fsys fileSystem) ([]byte, error) {

(The transformer contains the Svelte compiler)

Once you have that blob of JS, you can call v8.Eval on it:

bud/framework/view/ssr/ssr_test.go

Line 132 in 2cc8d0a

result, err := vm.Eval("render.js", string(code)+`; bud.render("`+path+`", `+string(input)+`)`)

That would call Component.render() and return HTML.

[jimafisk]

This is great, thanks so much for the help!

you'll want to support imports as well

Definitely. Currently I'm resolving import paths manually during SSR to generate the full page HTML. Using Esbuild to do this makes way more sense.

So do you compile .svelte files to SSR .js before passing them to esbuild to bundle and resolve imports, are do you point esbuild directly at the svelte source and the plugin is doing the compiling?

Are you using Esbuild to bundle just the dependencies for the current SSR component, or are you bundling the whole project?

I believe DOM components can be compiled individually as long as I have a way to make import paths ESM ready for the browser.

[matthewmueller]

So do you compile .svelte files to SSR .js before passing them to esbuild to bundle and resolve imports, are do you point esbuild directly at the svelte source and the plugin is doing the compiling?

Are you using Esbuild to bundle just the dependencies for the current SSR component, or are you bundling the whole project?

I'm doing everything in ESBuild. The Svelte files can't really be entrypoints because you need to do something with them (e.g. call component.render), so I create JS entrypoints that import the Svelte top-level pages.

I believe DOM components can be compiled individually as long as I have a way to make import paths ESM ready for the browser.

That would work. You can achieve this in ESbuild by externalizing files that start with HTTP. I haven't done this yet, but plan to do so in dev.

[jimafisk]

Hey @matthewmueller,

I hope you're doing well!

I've been spending some time this weekend trying to improve my Svelte compilation. I was able to incorporate your transformed compiler (https://github.com/livebud/bud/blob/main/package/svelte/compiler.js) into Plenti and that seemed to work well!

Looks like it was using Svelte version 3.47.0, so I tried creating a newer version off 3.59.1 using your go:generate command as a model (and copying shimssr.ts locally):

./node_modules/.bin/esbuild node_modules/svelte/compiler.js --format=iife --global-name=__svelte__ --bundle --platform=node --inject:shimssr.ts --external:url --outfile=my_compiler.js --log-level=warning

It seems to work fine at generating the compiler file, but when trying to use the compiler in my project I'm running into a variety of errors like TypeError: Template must be a string when trying to actually compile (worked fine with the older version):

expr := fmt.Sprintf(`;__svelte__.compile({ "path": %q, "code": %q, "target": "dom", "css": false, hydratable: true })`, layoutPath, componentStr)
result, err := ctx.RunScript(expr, "compile_svelte")
if err != nil {
	return fmt.Errorf("Can't compile '%s' component file: %w", layoutPath, err)
}

Question: Have you tried upgrading to a newer version of Svelte and run into similar problems? Just curious if there's an issue you're aware of, or if I'm just doing something incorrect with esbuild. Thanks again for all the help!

[matthewmueller]

Hey Jim, nice to hear from you. I haven't yet tried to bump up Svelte yet. Currently focused on other aspects of the framework right now, so probably won't try for another month or so. Please let me know if you find a solution!

…

On Sat, May 27, 2023 at 11:26 AM Jim Fisk ***@***.***> wrote: Hey @matthewmueller <https://github.com/matthewmueller>, I hope you're doing well! I've been spending some time this weekend trying to improve my Svelte compilation. I was able to incorporate your transformed compiler ( https://github.com/livebud/bud/blob/main/package/svelte/compiler.js) into Plenti and that seemed to work well! Looks like it was using Svelte version 3.47.0, so I tried creating a newer version off 3.59.1 using your go:generate command <https://github.com/livebud/bud/blob/main/package/svelte/compiler.go#LL3C134-L3C154> as a model (and copying shimssr.ts <https://github.com/livebud/bud/blob/main/package/svelte/shimssr.ts> locally): ./node_modules/.bin/esbuild node_modules/svelte/compiler.js --format=iife --global-name=__svelte__ --bundle --platform=node --inject:shimssr.ts --external:url --outfile=my_compiler.js --log-level=warning It seems to work fine at generating the file, but when trying to use it in my project I'm running into a variety of errors starting with TypeError: Template must be a string. Have you tried upgrading to a newer version of Svelte and run into similar problems? Just curious if there's an issue you're aware of, or if I'm just doing something incorrect with esbuild. Thanks again for all the help! — Reply to this email directly, view it on GitHub <#353 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABJSO3YAUXUYAT6OB2GL6DXIITMTANCNFSM6AAAAAATZYSDK4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jimafisk]

Thanks for the response Matt! I figured out what I was doing wrong, I missed the fact that you're pulling in some overrides via package/svelte/compiler.ts, which references the actual compiler. Doing that got things working with v3.59.1 without errors :).