[tutorial errata]

[warren-bank]

1. Part 1 / Stores / Store bindings
   • tutorial
   • git
   • comments:
     • following:
       • The $name += '!' assignment is equivalent to name.set($name + '!').
     • addition:
       1. a note that this is also equivalent to:
          name.update(n => n + '!')
       2. a note about whether this is also equivalent to:
          name.update($name => $name + '!')
          • does $name have any special meaning in this context,
            or can it be used (for readability) as the name of this parameter?
       3. a note about whether there is any performance benefit in choosing one form vs. another

[Conduitry]

I don't know that these sorts of things belong at this point in the tutorial. To answer some of these specific points: It's only equivalent to name.update(n => n + '!') if your store also implements the .update() method. The stores created by the exports from svelte/store so, but this is not guaranteed by the store contract. $name += '!' compiles to name.set($name + '!') which is guaranteed to work for all stores that satisfy the contract.

$name does not have special meaning when it's been shadowed by a local variable like a function parameter.

.set might be microscopically faster, but I don't think it would make any difference in the context of a real application.

[warren-bank]

2. Part 2 / Advanced bindings / Contenteditable bindings
   • tutorial
   • git
   • comments:
     • I may be nitpicking..
       but I believe that this example doesn't fully illustrate the concept
     • am I wrong to think that a better example might be:

         <script>
           let html = '<p>Write <b><i>some</i></b> text!</p>';
         </script>
       
         <div bind:textContent={html} contenteditable />
       
         <div>{@html html}</div>
       
         <style>
           [contenteditable] {
             padding: 0.5em;
             border: 1px solid #eee;
             border-radius: 4px;
             margin-bottom: 1em;
           }
         </style>
       

[warren-bank]

3. Part 3 / Routing / Pages
   • tutorial
   • git:
     1. on:change
     2. function set_iframe_src(src)
   • comments:
     • the theme configured for the tutorial is always used by the sample app that is rendered in an iframe
     • the tutorial allows the user to specify the relative URL (ie: route) that is rendered by the app
     • this relative URL should allow the user to override the global theme by specifying a ?theme= querystring parameter
       • ex: /about?theme=dark
     • however, this querystring value is updated by set_iframe_src immediately before the iframe is rendered
   • suggestion:

       /** @param {string} src */
       function set_iframe_src(src) {
         if (!iframe) return; // HMR
     
         // To prevent iframe flickering.
         // Set to `visible` by calling `set_iframe_visible` function
         // from iframe on:load or setTimeout
         iframe.style.visibility = 'hidden';
         setTimeout(set_iframe_visible, 1000);
     
         // removing the iframe from the document allows us to
         // change the src without adding a history entry, which
         // would make back/forward traversal very annoying
         const parentNode = /** @type {HTMLElement} */ (iframe.parentNode);
         parentNode?.removeChild(iframe);
     
         const url = new URL(src);
     
         if (!url.searchParams.has('theme'))
           url.searchParams.set('theme', $theme.current);
     
         iframe.src = url.href;
         parentNode?.appendChild(iframe);
       }

   • where:
     • the only change is the addition of a conditional test:
         if (!url.searchParams.has('theme'))
       before updating the theme querystring parameter

[warren-bank]

4. Part 3 / Shared modules / The $lib alias
   • tutorial
   • git
   • bug:
     • the following line:

         import { message } from '../../../../../../lib/message.js';

     • should be:

         import { message } from '../../../../../lib/message.js';

   • comments:
     • remove one instance of: ../
     • as is:

         500
         Internal Error
         Failed to resolve import
       

update:

• nevermind..
  I commented before reading far enough to learn that this error was intentional

[warren-bank]

note (to self):

5. Part 3 / Forms / Validation
   • tutorial
   • comments:
     • +page.server.js

         export const actions = {
           create: async ({ cookies, request }) => {
             return {success: 'saved OK'}
           },
           delete: async ({ cookies, request }) => {
             return {success: 'removed OK'}
           }
         }

     • +page.svelte

         <script>
           export let form;
         </script>
       
         {#if form?.success}
           <p class="error">{form.success}</p>
         {/if}
       

[warren-bank]

note (to self):

6. Part 3 / Forms / Customizing use:enhance
   • tutorial
   • comments:
     • +page.server.js

         import {fail} from '@sveltejs/kit'
       
         export const actions = {
           delete: async () => {
             await new Promise((fulfil) => setTimeout(fulfil, 1000))
       
             return fail(500, {
               error: 'Database Error'
             })
           }
         }

[warren-bank]

note (to self):

7. Part 3 / Stores / page
   • tutorial
   • comments:
     • src/routes/+layout.svelte

         <script>
           import { page } from '$app/stores';
       
           const nav = [{
             name: 'home',
             path: '/'
           },{
             name: 'about',
             path: '/about'
           }]
         </script>
       
         <nav>
           {#each nav as item}
             <a href="{item.path}" aria-current={$page.url.pathname === item.path}>
               {item.name}
             </a>
           {/each}
         </nav>
       
         <slot />
       

[warren-bank]

note (to self):

8. Part 3 / Stores / navigating
   • tutorial
   • comments:
     • src/routes/+layout.svelte

         <script>
           import { page, navigating } from '$app/stores';
       
           $: console.log( JSON.stringify($page,       null, 2) );
           $: console.log( JSON.stringify($navigating, null, 2) );
         </script>
       

[warren-bank]

note (to self):

9. Part 4 / Hooks / handle
   • tutorial
   • comments:
     • src/hooks.server.js

         import { redirect } from '@sveltejs/kit';
       
         export async function handle({ event, resolve }) {
           console.log( JSON.stringify(event, null, 2) );
       
           switch(event.url.pathname) {
             case '/ping':
               throw redirect(307, '/pong')
       
             case '/pong':
               return new Response('pong')
           }
       
           return await resolve(event)
         }

[warren-bank]

note (to self):

10. Part 4 / Hooks / handleFetch

• tutorial
• comments:
  • src/hooks.server.js

      export async function handleFetch({ event, request, fetch }) {
    
        console.log('01. ' + (typeof event.request     === typeof request))
        console.log('02. ' + (typeof event.fetch       === typeof fetch))
        console.log('03. ' + (typeof event.request.url === typeof request.url))
    
        console.log('04. ' + (event.request     === request))
        console.log('05. ' + (event.fetch       === fetch))
        console.log('06. ' + (event.request.url === request.url))
    
        console.log('07. typeof event.url   => ' + (typeof event.url)   + ((event.url   instanceof URL) ? ' (instanceof URL)' : ''))
        console.log('08. typeof request.url => ' + (typeof request.url) + ((request.url instanceof URL) ? ' (instanceof URL)' : ''))
    
        console.log('09. event.request.url => ' + event.request.url)
        console.log('10.       request.url => ' + request.url)
    
        return await fetch(request);
      }

  • logs:

      01. true
      02. true
      03. true
    
      04. false
      05. false
      06. false
    
      07. typeof event.url   => object (instanceof URL)
      08. typeof request.url => string
    
      09. event.request.url => http://localhost:5173/?theme=light
      10.       request.url => http://localhost:5173/a
    

[warren-bank]

note (to self):

11. Part 4 / Page options / trailingSlash

• tutorial
• comments:
  • src/routes/+layout.svelte

      <nav>
        <a href="/always">/always</a>
        <a href="/always/">/always/</a>
        <a href="/ignore">/ignore</a>
        <a href="/ignore/">/ignore/</a>
        <a href="/never">/never</a>
        <a href="/never/">/never/</a>
      </nav>
    
      <slot />
    
      <hr />
      <h3>themes:</h3>
      <ul data-sveltekit-reload>
        <li><a href="./?theme=dark">dark</a></li>
        <li><a href="./?theme=light">light</a></li>
      </ul>
    

[warren-bank]

12. Part 4 / Advanced routing / Breaking out of layouts

• tutorial
• example given:
  • src/routes/a/b/c/+page@.svelte
    • uses:
      • src/routes/+layout.svelte
    • ignores:
      • src/routes/a/b/c/+layout.svelte
• comments:
  • the individual page resets its layout hierarchy to the root layout
  • should it not then also inherit the layout in its own directory?
• questions:
  • can a layout hierarchy be reset for all descendent pages?
    • example:
      • src/routes/a/b/c/+layout@.svelte
      • src/routes/a/b/c/+page.svelte
        • such that it uses:
          • src/routes/+layout.svelte
          • src/routes/a/b/c/+layout@.svelte
      • src/routes/a/b/c/d/+layout.svelte
      • src/routes/a/b/c/d/+page.svelte
        • such that it uses:
          • src/routes/+layout.svelte
          • src/routes/a/b/c/+layout@.svelte
          • src/routes/a/b/c/d/+layout.svelte