⚡ 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

📄 Table of contents

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

📚 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()

📷 Screenshots

📶 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

💾 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

🔧 Testing

• N/A

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

🆒 Features

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

📋 Status & To-Do List

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

👏 Inspiration

• RxJS API list

📁 License

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

✉️ Contact

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