Skip to content

Commit

Permalink
docs: merged next with 0.3.x
Browse files Browse the repository at this point in the history
  • Loading branch information
arctic-hen7 committed Jan 15, 2022
1 parent 606f635 commit 487ce2b
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 2 deletions.
4 changes: 4 additions & 0 deletions docs/0.3.x/en-US/server-communication.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ In the last few years, a new technology has sprung up that allows you to run ind

It's fairly trivial to communicate with a server at build-time in Perseus, which allows you to fetch data when you build your app, and then your users don't have to do as much work. You can also use other strategies to fetch data [at request-time](:strategies/request-state) if needed. Right now, it's best to use a blocking API to make requests on the server, which you can do with libraries like [`ureq`](https://docs.rs/ureq).

One of the problems with fetching data at build time (or request-time, etc.) in development is that it often adds a significant delay to building your project, which slows you down. To solve this, Perseus provides two functions `cache_res` and `cache_fallible_res` that can be used to wrap your request code. They'll run it the first time, and then they'll cache the result to `.perseus/cache/`, which will be used in all future requests. These functions take a name (for the cache file), the function to run (which must be async), and a boolean that can be set to `true` if you want to temporarily disable caching. Usefully, these functions don't have to be removed for production, because they'll automatically avoid caching there. You can find an example of using these in [this example](https://github.com/arctic-hen7/perseus/tree/main/examples/fetching).

Incidentally, you can also use those functions to work in an offline environment, even if your app includes calls to external APIs at build time. As long as you've called your app's build process once so that Perseus can cache all the requests, it won't make any more network requests in development unless you tell it to explicitly or delete `.perseus/cache/`.

### In the Browser

In some cases, it's just not possible to fetch the data you need on the server, and the client needs to fetch it themselves. This is often the case in [exported](:exporting) apps. This is typically done with the browser's inbuilt Fetch API, which is conveniently wrapped by [`reqwasm`](https://docs.rs/reqwasm). Note that you'll need to do this in a `Future`, which you can spawn using [`wasm_bindgen_futures::spawn_local`](https://docs.rs/wasm-bindgen-futures/latest/wasm_bindgen_futures/fn.spawn_local.html), conveniently re-exported from Perseus as `perseus::spawn_local`. You can then modify a `Signal` in there that holds the data you want. It's common practice in web development today to show a page skeleton (those pulsating bars instead of text) while data are still being loaded.
Expand Down
12 changes: 11 additions & 1 deletion docs/0.3.x/en-US/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@ If you've tried to create something like a stick footer, you've probably become

Notably, there are actually two of these `<div>`s at the moment: one for the content that the server pre-renders in [initial loads](:advanced/initial-loads) and another for when that content is hydrated by Perseus' client-side logic. That means that, if you only style one of these, you'll get a horrible flash of unstyled content, which nobody wants. To make this as easy as possible, Perseus provides a class `__perseus_content` that applies to both of these `<div>`s. Also, note that the `<div>` for the initial content will become `display: none;` as soon as the page is ready, which means you won't get it interfering with your layouts.

Knowing this, the main changes you'll need to make to any full-page layout code is to apply the styles to `.__perseus_content` instead of `body` or `#root`. As with CSS generally, if you expect `.__perseus_content` to take up the whole page, you'll need to make all its parents (`#root`, `body`, `html`) also take up the whole page (you can do this by setting `height: 100vh;` on `body`).
Knowing this, the main changes you'll need to make to any full-page layout code is to apply the styles to `.__perseus_content` as well as `body` or `#root`. As with CSS generally, if you expect `.__perseus_content` to take up the whole page, you'll need to make all its parents (`#root`, `body`, `html`) also take up the whole page (you can do this by setting `height: 100vh;` on `body`). A good starting point (that supports scrolling as well) is this CSS:

```css
body, #root, .__perseus_content {
min-height: 100%;
min-width: 100%;
height: 100vh;
}
```

By using `min-height` and `min-width`, we can ensure that the containers expand to fill the page, even if content goes offscreen (with a scrollable overflow).

Any other issues should be solvable by inspecting the DOM with your browser's DevTools, but you're more than welcome to ask for help on the [Sycamore Discord server](https://discord.gg/PgwPn7dKEk), where Perseus has its own channel!
3 changes: 2 additions & 1 deletion docs/0.3.x/en-US/updating.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Perseus v0.3.0 added significant architectural changes to Perseus under the hood
4. Remove any custom config managers you may have, they've been replaced by [mutable and immutable stores](:stores).
5. Take anything Perseus-related wrapped in `Rc::new` (these will be all through your template definitions and error pages) and remove the `Rc::new`, Perseus now handles that internally, with no performance cost!
6. If you're using i18n, add the `translator-fluent` flag to `perseus` in your `Cargo.toml`. If you're not, your Wasm bundle size has been reduced!
7. Update your code for the remaining breaking changes listed in [the CHANGELOG](https://github.com/arctic-hen7/perseus/blob/main/CHANGELOG).
7. Change any uses of the `HOST` and `PORT` environment variables to the `--host` and `--port` flags on `perseus serve` in development, and use `PERSEUS_HOST` and `PERSEUS_PORT` in production. The original environment variable names will still work in deployments, but they'll be deprecated in v0.4.0.
8. Update your code for the remaining breaking changes listed in [the CHANGELOG](https://github.com/arctic-hen7/perseus/blob/main/CHANGELOG).

Perseus v0.3.0 also changed a few common idioms, like breaking out the `.template()` call into a separate function `template_fn()`. This is no longer recommended, though it will still work fine. You can check out the [examples directory](https://github.com/arctic-hen7/perseus/tree/main/examples) to see how things are a bit nicer now in terms of formatting.

Expand Down

0 comments on commit 487ce2b

Please sign in to comment.