search

livebud / bud

The Full-Stack Web Framework for Go
MIT License
5.57k stars 180 forks source link

How do I use UI components? #279

Open JanGordon opened 2 years ago

JanGordon commented 2 years ago

Hello, I am very interested in this project but I can't work out where I am going wrong here. I don't understand how to import ui components from svelte files. I have a folder in the base of the project named "ui" and a file named "Test.svelte" in it. If I try to import the component in the main index.svelte of the page like this: import Test from "ui/Test.svelte" I get this error: You can mark the path "ui/Test.svelte" as external to exclude it from the bundle, which will remove this error.

I also get the same error when I try and import an asset from the public directory like so: import image from "public/image.png"

matthewmueller commented 2 years ago

Hey @timmyjan46, thanks for your interest in Bud!

I'm surprised that import Test from "ui/Test.svelte" doesn't work. If you have a spare moment, creating a failing test isn't too difficult and would speed up the fix: https://github.com/livebud/bud/blob/2b3cf758554bdb6fa385129955b4ed50637f50bd/framework/view/view_test.go#L361. No pressure either way, I'll give this a try soon.

Importing non-JS/TS/Svelte assets doesn't work yet and I'm not sure if that's something worth adding. What do you expect image to be in import image from "public/image.png"?

JanGordon commented 2 years ago

Thanks for answering so quickly!

I was expecting import image from "public/image.png" to give me a URL as it does when using vite to build. You can use the image variable for and image source.

I can try and work out how to add a test but I'm not sure if I'll succeed but I'll give it a go.

matthewmueller commented 2 years ago

I was expecting import image from "public/image.png" to give me a URL as it does when using vite to build. You can use the image variable for and image source.

Oh got it, I'll have a look at how vite does it. I'm on the fence about importing assets via JS because sometimes I could see people expecting a data-uri. I do see the convenience in this and maybe I can make it pluggable.

I can try and work out how to add a test but I'm not sure if I'll succeed but I'll give it a go.

Commented on your PR, you did everything as expected, thanks!

JanGordon commented 2 years ago

I say you updated the PR but the test only makes sure that you can import from the root of the views folder. I'm still having trouble using components in any other directory. For example, if I have the file view/stories/index.svelte and try to import a component from ui/Time.svelte, import Time from "../ui/Time.svelte" obviously doesn't work here. Is there a way I can access the root of the project from anywhere? or as SvelteKit does it: allow you to import from $lib anywhere. Thanks for your time and sorry for making so much trouble.

matthewmueller commented 2 years ago

For example, if I have the file view/stories/index.svelte and try to import a component from ui/Time.svelte, import Time from "../ui/Time.svelte" obviously doesn't work here.

It's all relative paths so in that case you'd do ../../ui/Time.svelte

Is there a way I can access the root of the project from anywhere? or as SvelteKit does it: allow you to import from $lib anywhere. Thanks for your time and sorry for making so much trouble.

Not yet! That's what I'd like to add with the ~ character though, so you can do ~/ui/Time.svelte. Open to PRs!