Template repo for creating svelte apps in beaker browser
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tom Wilson d8df7d87ac first commit 11 months ago
.ui first commit 11 months ago
src first commit 11 months ago
README.md first commit 11 months ago

README.md

HyperSvelte Template

A project template for creating svelte apps for the beaker browser.

It contains a terminal command called compile in the .ui/ui.html file This compile command allows users to compile svelte files to esm js files.

In the src directory is the svelte code and in the lib folder is the compiled esm code. If you are building regular js modules, you may want to copy them over to the lib folder as well so that everything is always in sync.

Why?

Svelte is an awesome way to create web apps, but it requires a build step, one of the strengths of beaker is to view the source and to fork the app and work on enhancements.

With this approach we get the best of both worlds, the ability to write svelte components and the ability to leverage beakers power features.

Usage

npx bam twilson63:twilson63/hypersvelte [project name]

Use the beaker sync from folder option for connecting the hyperdrive to the new project folder.

Write all of your source files in the src folder and then in web terminal run @compile src/Index.html lib/Index.js or whatever the src file is. As your project grows you may want to create a new command that grabs all the files in the src folder and either copies or compiles them to the lib folder.

About .ui/ui.html

In this project the .ui/ui.html file is acting as a router based on the location being requested it is routing to the defined svelte component.

There are other ways to approach this, but this is how I did it.

Testing

Testing is easy in beaker and using jspm.dev/tape