You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bat/tests/syntax-tests/highlighted/Svelte/App.svelte

66 lines
11 KiB
Svelte

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<script>
 import { onMount } from 'svelte';
 import List from './List.svelte';
 import Item from './Item.svelte';
 let item;
 let page;
 async function hashchange() {
 // the poor man's router!
 const path = window.location.hash.slice(1);
 if (path.startsWith('/item')) {
 const id = path.slice(6);
 item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
 window.scrollTo(0,0);
 } else if (path.startsWith('/top')) {
 page = +path.slice(5);
 item = null;
 } else {
 window.location.hash = '/top/1';
 }
 }
 onMount(hashchange);
</script>
<script type="text/livescript">
 // This block is a regression test for a bat panic when a LiveScript syntax definition is missing
</script>
<style lang="text/postcss">
 /* This block is a regression test for a bat panic when a PostCSS syntax definition is missing */
</style>
<style>
 main {
 position: relative;
 max-width: 800px;
 margin: 0 auto;
 min-height: 101vh;
 padding: 1em;
 }
 main :global(.meta) {
 color: #999;
 font-size: 12px;
 margin: 0 0 1em 0;
 }
 main :global(a) {
 color: rgb(0,0,150);
 }
</style>
<svelte:window on:hashchange={hashchange}/>
<main>
 {#if item}
 <Item {item} returnTo="#/top/{page}"/>
 {:else if page}
 <List {page}/>
 {/if}
</main>