Routify 2 - Released

Written by jakobrosenberg 11/13/2020

It’s here!

After a few months of trialing, fixing bugs and adding many requested features, it’s finally here. Big thanks to all who’ve shared the love for Routify. 💗

• Improvements
• New Features
  • Accessible components
  • Metadata flags
  • Metadata options
  • Hash based routing
  • New use directive for url helper
  • urlTransform
  • _folder.svelte alias
• Changes & Migration Guide
• Starter template

Improvements

• TabTransitions now automatically detects width of parent element. This gets rid of the previously required boilerplate.
• Page and layouts are now loaded in parallel to avoid waterfalls.
• The routes index, routes.js has been reduced 50-75% in size. For routify.dev with 60+ pages and a lot of custom metadata, routes.js clocks in at about 3 kb in production.
• To simplify navigation generation, node iteration now automatically skips dynamic pages and index.svelte files. To override automatic skipping, a metadata index can be assigned.

---

New features

Accessible components

Page and layout components can be accessed through the API. This allows for inlining pages on a single page.

<!-- Inline all pages in a single page -->
<ul>
  {#each $layout.children as node}
    <li>
      <h3>{node.title}</h3>
      {#await node.component then cmp}
        <svelte:component this={cmp} />
      {/await}
    </li>
  {/each}
</ul>

Metadata flags

<!-- routify:options someOption --> now translates to <!-- routify:options someOption=true -->. Before you had to specify a value manually.

Metadata options

• query-params-is-page reload the component if a query parameter changes
• param-is-page reload the component if the slug changes
• preload="proximity" setting preload to proximity will preload the component if it’s referenced in a $url helper. The preload setting is recursive, so enabling proximity preloading in the root layout will enable it on all pages.

Hash based routing

Hash based routing has been on of the most requested features for Routify and now it’s finally here.

To enable, set useHash to true in the runtime config.

<Router config={{useHash: true}}>

The runtime config is passed to the Router component, typically found in App.svelte

New use directive for $url helper

The $url helper can now be used as both a function and a use directive.

/**function*/
<a href={$url('./movies')}>Movies</a>

/**directive*/
<a href="./movies" use:$url>Movies</a>

/**function with parameters*/
<a href={$url('./movies/:id', {id: 123})}>Some movie</a>

/**directive with parameters*/
<a href="./movies/:id" use:$url={{id: 123}}>Some movie</a>

urlTransform

urlTransform replaces basepath. It requires a little more code, but provides much more control and versatility. For more information, see runtime config.

_folder.svelte

an alias for _layout.svelte. Will become the default.

---

Changes

• Metadata is now parsed as JSON instead of evaluated as JS
• Npm namespace has changed from @sveltech/routify to @roxi/routify
• basepath replaced by urltransform
• $layout now refers to closest layout, not current component

Please refer to the migration guide for upgrading a project.

---

Starter template

The starter template got an overhaul and rollup.config.js has been unified and simplified. To handle static exports, Routify’s built-in export function has been replaced with our own spank.

The scripts folder has been replaced by an api folder which for now only handles SSR for Vercel. The folder can safely be deleted if you’re not using Vercel with SSR.