⚡ Svelte RXJS API

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

📄 Table of contents

• ⚡ Svelte RXJS API
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration - code by Ilia Mikhailov
  • 📁 License
  • ✉️ Contact

📚 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

📷 Screenshots

📶 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

💾 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

🔧 Testing

• N/A

💻 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>

🆒 Features

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

📋 Status & To-Do List

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

👏 Inspiration - code by Ilia Mikhailov

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

📁 License

• N/A

✉️ Contact

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