Skip to content

Commit

Permalink
fix typo
Browse files Browse the repository at this point in the history
  • Loading branch information
kokizzu authored Jul 7, 2023
1 parent 5eddb67 commit 19a26e3
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Multipage Svelte, Svelte MPA

The purpose of this project is to make [Svelte](//svelte.dev/) that defaults is component-based SPA into an statically-generated MPA (multipage SPA, page+component-based).
The purpose of this project is to make [Svelte](//svelte.dev/) that defaults is component-based SPA into an statically-generated MPA (multi-page SPA, page+component-based).
So for deployment you only need to [rsync](//rsync.samba.org/) the `.html`, imported/external `.css`/`.js` and any other assets (images, fonts, non-`.svelte` files).
It was originally built for [Z](https://github.com/kokizzu/gotro/tree/master/Z) template engine.

Creator: [sameerveda](//github.com/sameerveda)

Specs/sponsored by: [kokizzu](//github.com/kokizzu)
Specs/maintainer/sponsored by: [kokizzu](//github.com/kokizzu)

## Why Svelte?
## 💡 Why Svelte?

[Rethinking Reactivity](//www.youtube.com/watch?v=AdNJ3fydeao)
`tl;dw`
Expand All @@ -17,7 +17,7 @@ Specs/sponsored by: [kokizzu](//github.com/kokizzu)
- No JSX, so you can just copy paste any html and it should work without have to convert it
- compiled, so most likely you can detect problems before running it

## Changelog
## 📰 Changelog

- `2023-06-23` feat: upgrade to svelte-4
- `2023-01-07` bugfix: nested component css not outputted after editing
Expand All @@ -26,7 +26,7 @@ Specs/sponsored by: [kokizzu](//github.com/kokizzu)
- `2022-07-07` bugfix: watcher not capturing added/deleted files, feat: optimized watch list
- `2022-05-30` initial version

## Specification
## 🉐 Specification

For example you have a project with specific structure:

Expand All @@ -51,11 +51,11 @@ It would automatically generate 3 files: `foo/bar.html`, `subpage/page3.html`, a
2. there no configuration, it should work as-is automatically, anything starts with underscore will not generate `.html`, eg. `foo/_component1.svelte`, or `_components/table.svelte`
3. will look for `_layout.html` in current directory or nearest upper directories as base template
4. can import properly other js, css, or svelte file (relative import)
5. dev mode, eg. `npm run dev`, it would listen to `localhost:5500` then livereload when changed like default svelte template project (will also autogenerate the `.html` files like spec number 1), there's also `npm run watch` if you have reverse proxy or backend that loads html thatt listen on another port
5. dev mode, eg. `npm run dev`, it would listen to `localhost:5500` then livereload when changed like default svelte template project (will also autogenerate the `.html` files like spec number 1), there's also `npm run watch` if you have reverse proxy or backend that loads html that listen on another port
6. using minimal set of npm dependencies and no outdated package (use `./update_deps.sh` to update dependencies)
7. generated html will not remove comments, especially one that used in [Z](https://github.com/kokizzu/gotro/tree/master/Z) template engine, like: `/*! c1 */`, `#{c2}`, `[/* c3 */]`, or `{/* c4 */}`

## Usage
## 🍴 Usage

```shell
npm install -g degit # scaffolding helper
Expand All @@ -71,7 +71,7 @@ npm run build:prod # build project for production
./deploy.sh # example deployment script for single server
```

## How to update/upgrade from previous version?
## 🏗️ How to update/upgrade from previous version?

just copy latest `build.js` to your project directory and then `npm i` or `pnpm i`

Expand All @@ -89,7 +89,7 @@ npx svelte-migrate svelte-4 .
./update_deps.sh # or npm i # or pnpm i
```

## Dev Dependencies
## ⌨️ Dev Dependencies

- [svelte](//svelte.dev/) - cybernetically enhanced web apps
- [esbuild](//esbuild.github.io/) - an extremely fast JavaScript bundler
Expand All @@ -100,9 +100,9 @@ npx svelte-migrate svelte-4 .
- [parse5](//github.com/inikulin/parse5) - html parsing/serialization toolset for node.js
- [svelte-preprocess](//github.com/sveltejs/svelte-preprocess) - a svelte preprocessor with sensible defaults and support for: postcss, scss, less, stylus, coffeescript, typescript, pug and much more.

**ZERO** production dependency.
🔥 **ZERO** production dependency. 🔥

## Why Svelte-MPA? Motivation
## Why Svelte-MPA? Motivation

If you already have existing backend that wasn't written in NodeJS, you can have best of two worlds, multiple page with their own [meta headers](//svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42?version=3.52.0) and content for SEO, and reactivity using Svelte for each page. Also with this you can remove the serialization/transport/hop-cost of default setup:

Expand Down Expand Up @@ -132,7 +132,7 @@ became:

So your existing backend responsibility is to load the generated `.html` then replace the js variable or any template keyword with proper value for initial load/SEO. So not svelte's responsibility to request/preload the initial json content, but backend's responsibility (whatever existing backend langauge/framework you are using). Like SvelteKit, you can also use this as SSG. You can see example [here](//github.com/kokizzu/sveltefiber)

## TODO / Possible Improvement
## 📈 TODO / Possible Improvement

- [ ] update `<!-- MODIFIED TIME` generated comment from highest modification date of dependencies, eg. if `a.svelte` depends on `b.js` and `_c.svelte`, the resulting `a.html` html comment should be max modification date of those three
- [ ] generate bundled javascript `[name].min.js` foreach `[name].svelte` file that will imported by generated `[name].html`, to reduce overhead when page's bundled reactivity code size is very big, only when svelte file doesn't contain Z-template special keywords, so the code might look like this:
Expand Down

0 comments on commit 19a26e3

Please sign in to comment.