:zap: Svelte RXJS API

• Snowpack-generated Sveltejs app to display random Github users
• Code by Ilia Mikhailov of Codechips.me - see :clap: Inspiration below. Some minor changes due to deprecations & commenting.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Svelte RXJS API
  • :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 - code by Ilia Mikhailov
  • :file_folder: License
  • :envelope: Contact

:books: General info

• App bootstrapped with Create Snowpack App (CSA)
• Displays random Github user details
• Note: Rxjs 'combineLatest' is deprecated - replaced with combineLatestWith
• JSON.stringify() method initially used to convert a JavaScript object to a JSON string

:camera: Screenshots

:signal_strength: Technologies

• Snowpack v3 frontend build tool, alternative to webpack or Parcel etc.
• Sveltejs v3 fast front-end UI library with small bundles of highly-optimized vanilla JavaScript & declarative transitions. Does not use a virtual DOM.
• RxJS v7 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 start to run Snowpack dev server on port localhost:8080
• npm run build to build a static copy of app to a build/ folder

:wrench: Testing

• N/A

:computer: Code Examples

• Svelte code to display Github user info.

<div>
    <button class="refresh" on:click={refresh}>refresh</button>
    {#if $suggestions}
      <ul>
        {#each $suggestions as user}
          <li>
            <div class="user">
              <img src={user.avatar_url} alt={user.login} />
              <a href={user.html_url}>{user.login}</a>
              <button class="refresh" on:click={() => replace(user.login)}
                >x</button
              >
            </div>
          </li>
        {/each}
      </ul>
    {/if}
  </div>

:cool: Features

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

:clipboard: Status & To-Do List

• Status: Working
• To-Do: Add more commenting and try diffferent RxJS methods

:clap: Inspiration - code by Ilia Mikhailov

• Ilia Mikhailov: Recreating a classic FRP tutorial with Svelte and RxJS

:file_folder: License

• N/A

:envelope: Contact

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