DEV Community

Cover image for Learning Svelte - Project 1: Dependency Resolution Tool
Steve Monsen
Steve Monsen

Posted on • Updated on

Learning Svelte - Project 1: Dependency Resolution Tool

I've binge-read the Svelte tutorials for the last few days and it's time to start writing some basic test projects to go beyond basic concepts.

I'll be posting progress and insights here as I go.

About

I found a basic dependency resolution algorithm Gist the other day and decided to use it as the basis for learning more about Svelte. Basically, an excuse to do something other than stay stuck in tutorial-mode.

Graph theory lies at the heart so many modern development paradigms that I thought it would make an excellent MacGuffin.

Graph theory in sociology: Moreno Sociogram (1953) - Wikipedia

Project Code

Features / To Do

๐Ÿ‘ Convert current plain JavaScript CodeSandbox to Svelte.
๐Ÿ‘ Format the execution order with an ordered list.
๐Ÿ‘ User editable dependency lists that update in realtime. (add/remove items in left column)
๐Ÿ”˜ Auto color-coding of dependencies.
๐Ÿ”˜ Hovering an item highlights its use elsewhere (bi-directional item highlighting for legibility)
๐Ÿ”˜ Add infinite nested levels of dependencies.
๐Ÿ”˜ Revise language... 'before', 'after', 'subscribers', 'items', etc.
๐Ÿ”˜ Toggle real-time mode.
๐Ÿ”˜ CodeMirror for the dependencies editor
๐Ÿ”˜ Undo/redo changes.
๐Ÿ”˜ Read a package.json or other dependency configuration and display its resolution. Upload or via URL / fetch.
๐Ÿ”˜ Save to localStorage
๐Ÿ”˜ Save state to json / file download
๐Ÿ”˜ Authenticated users
๐Ÿ”˜ Basic CRUD interface for user lists
๐Ÿ”˜ Sharing dependency lists
๐Ÿ”˜ Visualization of dependency graph
๐Ÿ”˜ API - DRaaS (Dependency Resolution as a Service)

Svelte Concepts to incorporate

  • Reactivity
  • Fetch, Async/Await
  • Props
  • Slots
  • Binding
  • Lifecycles
  • Stores
  • Motion and Transitions
  • State management
    • Basic w/out library
    • XState
    • Overmind
  • Authentication (oAuth 2.0)
  • User storage
  • API

Progress

Oct 21, 2020

I turned the dependencies and execution order sections into Svelte components that update automatically on user input by adding a resolution store and auto-subscribing to it.

I'm planning on adding CodeMirror which I'm assuming would be best implemented with a Svelte module.

I found some old libraries that shoe-horned CodeMirror into Svelte, but they were from Svelte 1.x, no longer work and are no longer maintained. Just as well, though, since it will provide an excuse to learn more about Svelte modules and lifecycles.

Oct 22, 2020

To be honest, now that I've worked with some of the basic fundamentals of Svelte, I'm more interested in its utility as an authenticated app. Which is the way I'll be using it. In other words, an app that you can sign-in to, do stuff (CRUD, etc), and log out of.

So now I want to try Firebase authentication with a router. And for that I have two options in mind that I'd like to explore...

  1. Traditional - A node server w/ authenticated routes and apis. In which case, Sapper.

  2. Edgy (literally) - Achieve the same effect with higher performance and scalability with Cloudflare Workers, KV and HTMLRewriter stream injection.

I've recently read through a couple of great tutorials by Ilia Mikhailov that walk through using firebase auth w/ Svelte either directly or w/ XState.

I'll skip XState for now and focus on the more immediate task of evaluating Sapper, Cloudflare, and service workers.

Oct 25, 2020

It looks like running Sapper on Cloudflare is certainly possible. There is a GitHub repo that demonstrates it.

GitHub logo lukeed / svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!

svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!

Live Demo

This is a demo meant to illustrate how to get Svelte SSR in a Cloudflare worker. It is intentionally very minimal โ€“ it extends the official svelte-template.

Install

$ git clone https://github.com/lukeed/svelte-ssr-worker
$ cd svelte-ssr-worker
$ npm install
Enter fullscreen mode Exit fullscreen mode

Scripts

The following are npm scripts included in the project.
They are invoked via npm run <name> on the command line; for example: npm run build:dom.

build

This is an alias for sequentially running the build:dom and build:ssr scripts.

Note: These are sequential because build:ssr imports the public/index.html that build:dom produces.

build:dom

Builds the client for production, using the src/index.dom.js entry point.

All files within the /public directory comprise your front-end client application.

Important: These must be uploaded to a storage bucket and made available on a CDN location.
Alternatively, you may uploadโ€ฆ

I also found an interesting svelte/firebase/cloudflare project on Svelt's subreddit: https://www.reddit.com/r/sveltejs/comments/gt16s8/new_side_project_saas_built_with_svelte_open_demo/

Oct 27, 2020

Sidetracked with a project, but managed to install Sapper locally and get acquainted. Beyond the basics, one idiosyncrasy that I found with Sapper vs Svelte is the difference between the Client and Server Component APIs.

Focusing an input on component mount doesn't work in Sapper

Let's say you have a text input that you want to receive focus on DOM ready.

In Svelte (w/out Sapper) you simply add an onMount method and focus the element after having bound it to a variable with bind:this={inputElement}. See example (not mine)

In Sapper, this doesn't work because, as the Sapper API explains:

Unlike client-side components, server-side components don't have a lifespan after you render them โ€” their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.

I've yet to work out how to use this insight to accomplish the focus-input-onmount effect.

My initial inquest was to create a separate button that calls a handleFocus component handler on:click and that works. When you click the button the element is focused. But we want automatic focus onMount.

So now it's a matter of how to do it within a Sapper app.

My two initial thoughts on strategy are:

  1. The Svelte Wayโ„ข (unknown atm)
  2. A traditional DOM event listener of some sort shoe-horned into the Sapper paradigm. (the least desirable option)

I don't really need this for anything at the moment, but I don't like the idea of leaving it unsolved as it provides some important insights into the fundamental differences between client and server-side Svelte components.

I'll post with more when I have it.

I'm Ready - Cat

Update: Mystery Solved (a cup of coffee later)

.focus() doesn't work onMount on purpose for a11y reasons. Here's an explanation from Rich:

Comment for #619

This is for a11y โ€” when navigating, the focus is supposed to reset (which is also the reason that the autofocus attribute is discouraged): https://github.com/sveltejs/sapper/blob/master/runtime/src/app/app.ts#L154

The focus reset happens after navigation, so setting the focus in onMount will have no effect. If you really need to focus the input then the setTimeout is necessary, but ideally I'd try and see if there's an alternative that doesn't break a11y guidelines.

Thanks for the cup of obvious!

ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  Thanks for the cup of obvious.

Discussion (0)