Skip to content

Instantly share code, notes, and snippets.

@acoyfellow
Last active August 12, 2021 11:28
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save acoyfellow/a94f020245d4bfcd4c5d9ddc8f86a98a to your computer and use it in GitHub Desktop.
Save acoyfellow/a94f020245d4bfcd4c5d9ddc8f86a98a to your computer and use it in GitHub Desktop.
My personal Sapper to Svelte-Kit Cheat Sheet (this is not-official, and pre launch, don't use this unless you like fighting dragons and breaking changes)
  • change how you access goto -- from: import { goto } from "@sapper/app"; -- to: import { goto } from "$app/navigation";

  • change how you access sessions --from: import { stores } from "@sapper/app"; const { session, page } = stores(); -- to: import { session, page } from "$app/stores";

  • preload is now load

  • this.redirect

<script context="module">
  export async function load({ page, session, fetch, context }) {
    return {
      redirect: {
        status: 302,
        to: "/",
      },
    };
  }
</script>
  • this.error
<script context="module">
  export async function load({ page, session, fetch, context }) {
    return {
      status: 402,
      error: new Error("Unauthorized."),
    };
  }
</script>

  • sapper.middleware = no more, so now it's src/setup/index.js:
export async function prepare(headers) {
  let data= {};  
  // this gets called before every route, kind of like sapper.middleware
  return {
    context: {
      data
    }
  }
};

export function getSession(context) {
  // you can trim off sensitive data to send to client here
  return {
    data: context.data
  }
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment