:zap: Svelte AJAX Observables

• Sveltejs sandbox using RxJS/AJAX to fetch API observable data.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Svelte AJAX Observables
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :wrench: Testing
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Displays API observable data such as Github user details
• Note: Rxjs 'startWith' used to initialise fetch with an empty array
• Note: Rxjs 'pluck operator deprecated - replaced with map()

:camera: Screenshots

:signal_strength: Technologies

• Snowpack frontend build tool, alternative to webpack or Parcel etc.
• Sveltejs/kit v3 fast front-end UI library with small bundles of highly-optimized vanilla JavaScript & declarative transitions. Does not use a virtual DOM.
• RxJS Reactive Extensions JS library
• RxJS/AJAX used to fetch Github API observable
• Github REST API v2 RESTful API with data on all world countries. Get a Github access token so API access not limited

:floppy_disk: Setup

• npm i to install dependencies
• npm run dev to run dev server on port localhost:8080. Note: I had to check dev tools/network/Disable cache to prevent caching and to see changes to files
• npm run build to build a static copy of app to a build/ folder
• npm run start to run build files on port localhost:8080

:wrench: Testing

• N/A

:computer: Code Examples

• userCard.svelte with HTML that has been extended using Svelte-specific syntax.

<main>
  <h3>Github User Infomation</h3>
  <UserCard {user} />
  <br />
  <h3>List of repos with links that contain 'svelte'</h3>
  {#each $reposObservable as r}
    <div>
      <a href={r.url}>{r.name}</a>
    </div>
  {/each}
</main>

:cool: Features

• Observables can be displayed in Svelte markup with a preceding $

:clipboard: Status & To-Do List

• Status: Working
• To-Do: Try out more RxJS methods

:clap: Inspiration

• RxJS API list

:file_folder: License

• This project is licensed under the terms of the MIT license.

:envelope: Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com