Edward's Tech Site

• ../sveltekithttps://frontendmasters.com/courses/sveltekit

• ../svelteflixhttps://github.com/Rich-Harris/svelteflix

• ../introducing-sveltekithttps://learn.svelte.dev/tutorial/introducing-sveltekit

• repo: ../sveltekit-the-learn-showcasehttps://github.com/edwardtanguay/sveltekit-the-learn-showcase
• live: ../https://sveltekit-the-learn-showcase.vercel.app/

• <script lang="ts">
      let count = $state(0);
   
      let doubled = $derived(count * 2);
   
      const increment = () => {
          count += 1;
      };
  </script>
   
  <button on:click={increment}>
      clicks: {count}
  </button>
   
  <p>double count: {doubled}</p>

• easy

• works like this
  

element left

• no errors
• installing Tailwind

• static: in /lib/images dann import und mit $lib

  • <script lang="ts">
        import img from "$lib/images/sveltekit.jpg";
    </script>
    <img class="mt-2 mb-2" src={img} alt="sveltekit icon"/>

• dynamic: in /static/images statt /public/images wie in allen anderne Frameworks

  • <img src="images/tests/test1.jpg" alt="test1" class="mt-2"/>
    <img src="images/tests/test2.jpg" alt="test2" class="mt-3"/>

• component framework

• application framework
• server-rendered by default
  • MPA - multi-page app
  • good SEO
  • can also be static apps
• no CommonJS, all ESM
• svelte.config.js
• vite.config.js
  • Svelte is built with Vite
    
• src
  • app.html
    • these are important
      

• <script>
      import { page } from '$app/stores';
   
      const pageItems = [
          {
              href: '/',
              title: 'Home'
          },
          {
              href: '/basics',
              title: 'Basics'
          }
      ];
  </script>
   
  <nav class="bg-slate-600 px-4 pb-1 mb-3 rounded text-slate-200 flex gap-3">
      {#each pageItems as pageItem}
          <a class:active={$page.url.pathname === pageItem.href} href={pageItem.href}>{pageItem.title}</a>
      {/each}
  </nav>
   
  <style>
      a.active {
          color: yellow;
      }
  </style>

• Sveltekit package with Tailwind problems
• this seems to be the answer
  

• ../%2Bpage.sveltehttps://github.com/edwardtanguay/sveltekit-learn-showcase/blob/dev/src/routes/employees/%5Bid%5D/%2Bpage.svelte
• works like this:
  

• having problems with Vercel, something has changed
  • it somehow lost the connection to my repository
    
  • I reconnected it, now the old link I don't have access to anymore and it is still up:
    • ../sveltekit-learn-showcase.vercel.apphttps://sveltekit-learn-showcase.vercel.app
  • renamed repository: sveltekit-learning-showcase
  • redeploying as this name but it hangs:
    
  • finally came back after 5 minutes
  • but now when I deploy I get this error:
    
  • then when I try again, I get this:
    
  • renamed to: sveltekit-the-learning-showcase
    • deploying again
    • 25s normal
    • ok works again: ../sveltekit-the-learning-showcase.vercel.apphttps://sveltekit-the-learning-showcase.vercel.app
    • ok now the original site is a 404: ../sveltekit-learn-showcase.vercel.apphttps://sveltekit-learn-showcase.vercel.app
  • publishing as original site again: ../https://sveltekit-learn-showcase.vercel.app/
    • renamed at GitHub
    • publishing at Vercel, 25s ok
    • unfortunately published it at ("-ten"): ../sveltekit-learn-showcase-ten.vercel.apphttps://sveltekit-learn-showcase-ten.vercel.app
  • so renaming to: ../sveltekit-the-learn-showcase.vercel.apphttps://sveltekit-the-learn-showcase.vercel.app
    • renamed at GitHub
    • publishing at Vercel, 25s ok
    • worked
  • ok, fixed problems at Vercel but site is now under a new URL:
    • ../sveltekit-the-learn-showcase.vercel.apphttps://sveltekit-the-learn-showcase.vercel.app
• putting in icon
  • search for icons here, be sure to use CTRL-Enter to search all: ../icones.js.orghttps://icones.js.org
    
  • get code, e.g. charm:menu-hamburger
  • <iconify-icon icon="charm:menu-hamburger" class="text-2xl md:hidden"></iconify-icon>
• get info in JavaScript how width the screen is
  • SvelteKit solution?
    • doesn't seem to be one
    • although you can bind: ../867c433fd36a463fa5bb257cec2c1766?version=3.35.0https://svelte.dev/repl/867c433fd36a463fa5bb257cec2c1766?version=3.35.0
  • implementing solution from html-css-js project:
    • ../config.jshttps://github.com/edwardtanguay/html-css-js-learn-template/blob/dev/src/config.js
    • not working, will start again with a more Svelte-related solution
• make icon clickable to hide/unhide menu
  • need to get the current width, works
    • ../aa24e0b95bad4d06a5c8d0d051b521b4?version=3.29.4https://svelte.dev/repl/aa24e0b95bad4d06a5c8d0d051b521b4?version=3.29.4
      
  • Nav.svelte

    • <script lang="ts">
          let innerWidth = 0;
      </script>
       
      <svelte:window bind:innerWidth={innerWidth} />
       
      {#if $mobileMenuShowing || innerWidth > 768}

• now close window on click
• responsive finished, works like this:
  

• routing the request
• loading data
• rendering the DOM

• +page.server.js

• ../serverloadedemployeeshttps://github.com/edwardtanguay/sveltekit-the-learn-showcase/tree/dev/src/routes/serverloadedemployees

• ../svelte-native.technologyhttps://svelte-native.technology
• but it's not an officially supported project

• see The differences between +page.js, +page.server.js, and +server.js

• set a cache control header so data doesn't need to be requested

• cookies are http-only by default
• secure = ture except when on local host
• same-site to lax

• but user could use devtools to get rid of the required attribute
• so you should always do server side validation as well as client-side validation
• imports { fail } from sveltekit
• there are fails and errors

• a simple GET
  

• a form handler is easier
• basics
  

• <script lang="ts">
      import _todos from '$lib/data/todos.json';
   
      let todos = _todos;
      let newTodo = '';
   
      $: totalDoubled = todos.length * 2;
   
      const addTodo = () => {
          if (newTodo.trim() !== '') {
              todos = [...todos, newTodo];
              newTodo = '';
          }
      };
  </script>
   
  <div class="w-[18rem]">
      <form>
          <input bind:value={newTodo} placeholder="new todo" />
          <button on:click={addTodo} class="bg-gray-300 px-2 mt-2 rounded border border-gray-500 w-fit"
              >Add Todo</button
          >
      </form>
   
      <ul class="list-disc ml-3 mb-3 mt-2">
          {#each todos as todo}
              <li>{todo}</li>
          {/each}
      </ul>
      <div>
          <p>number of todos: {todos.length}</p>
          <p>number of todos doubled: {totalDoubled}</p>
      </div>
      <p class="devNote w-fit mt-2">
          Note that for arrays and objects, you need to save a REFERENCE TO A NEW VARIABLE instead of just
          mutating the value of the original variable, e.g. by spreading the old variable or using
          structuredClone.
      </p>
  </div>

• when you make a new reference, it works
  

• ../starter-mongo-mongoose-atlashttps://github.com/edwardtanguay/starter-mongo-mongoose-atlas

• x base
• .. import db
• need to call server side function from client side component
  • ../routing#server-receiving-datahttps://kit.svelte.dev/docs/routing#server-receiving-data
• it works but is not updating
  
• it looks like this
  
• online it also doesn't show up immediately, but after 10 minutes after a browser reload, it was there
  
• can't serialize them
  
• doesn't work either, still cached

  • export async function load() {
        return {
            maxage: 10,
            props: {
                todos
            }
        };
    }

• interesting: ../modules#$app-navigation-invalidatehttps://kit.svelte.dev/docs/modules#$app-navigation-invalidate
  • import { browser } from '$app/environment';
  • import { invalidateAll } from '$app/navigation';
  • invalidate((url) => url.pathname === '/path');
  • "cannot call invalidate on the server"
• key doesn't work either

  • {#key data.todos}
    <p class="mb-3 mt-2">There are {data.todos.length} todos.</p>
    <ul class="font-mono text-orange-900">
        {#each data.todos as todo}
            <li>
                {`[${todo.id}] - ${tools.displayStars(todo.stars)} - ${todo.finished ? 'done' : 'todo'} - ${todo.title}`}
            </li>
        {/each}
    </ul>
    {/key}

• data-sveltekit-reload is supposed to work but doesn't
  • ../sveltekit_question_how_to_force_loads_to_rerunhttps://www.reddit.com/r/sveltejs/comments/yoe6in/sveltekit_question_how_to_force_loads_to_rerun
• "invalidate and invalidate all won't work for server side pages. This only works when you are in SPA mode"
  • ../sveltekit_question_how_to_force_loads_to_rerunhttps://www.reddit.com/r/sveltejs/comments/yoe6in/sveltekit_question_how_to_force_loads_to_rerun
• this is the same problem: ../sveltekit-reload-page-datahttps://stackoverflow.com/questions/74065145/sveltekit-reload-page-data
  • he solved it with invalidateAll
• here is the solution to reactive, server-side page loaders, much like socket.io
  
• works like this:
  
• this solution should be used with caution every page that is open will hit your API e.g. every 3 seconds
  
• if you just want the data to be fetched on browser reload, then you just need invalidateAll in onMount, but you could put it anywhere, in a reload button, etc.
  

• REPL

• only the API is available externally
• the API is public
• server load functions are specifically for the page

• page store
• navigation store: ../types#public-types-navigationhttps://kit.svelte.dev/docs/types#public-types-navigation
  • "get comfortable with this MDN page on URL": ../URLhttps://developer.mozilla.org/en-US/docs/Web/API/URL

• +error.svelte

• replace this in error.html

• e.g. for internationalization
  
• REPL: ../handlehttps://learn.svelte.dev/tutorial/handle

• then read in load function
  

• ../handlefetchhttps://learn.svelte.dev/tutorial/handlefetch
• reads cookies
• useful if you want to avoid load balances, etc.

• ../handleerrorhttps://learn.svelte.dev/tutorial/handleerror
• e.g. add extra details to errors

• ../page-optionshttps://learn.svelte.dev/tutorial/page-options

• what SvelteKit does by default
• make client-side with
  • +page.server.js

    • export const ssr = false;

  • e.g. to access window

• +page.server.js

  • export const csr = false;

• no JavaScript will be sent to the browser
• usually won't use this option

• build process will take longer
  • +page.server.js

    • export const prerender = true;

• default of Svelte is to remove trailing slashes
  

• make e.g. /home and /en/home the same page
  

• replaced fetch with depends
  

• uses CSS variables
  

• ../871d05a3b8c2cdf3e5e8ab3a9da560c9https://gist.github.com/Rich-Harris/871d05a3b8c2cdf3e5e8ab3a9da560c9

• and the finished one: ../api.tshttps://github.com/Rich-Harris/svelteflix/blob/main/src/lib/api.ts

• x fix Ex006

• Matt Pocock on .d.ts files
  • ../watch?v=zu-EgnbmcLYhttps://www.youtube.com/watch?v=zu-EgnbmcLY
    • .d.ts can only have types, not executed code
    • it has a global scope
    • if you do want to do global alterations to scope, then use .d.ts files
    • but don't use them for your regular modules
      

• those that have an infinite loading component and those that don't