lacikawiz

I've started using SolidJS maybe 2 months ago, and I like it very much. It has solutions to problems I encountered with Svelte while building a large Apps. But there's one annoyance that comes up during the development mode which bugged me until I found a solution.

If you have been working with SolidJS using the developer mode (npm run dev) then you probably noticed the annoyance which happens when you modify a file, Vite reloads it but parts of the old code is still active (namely the reactive effects), so the HTML can have duplicates, old errors that you fixed cropping up, etc. Beyond annoyance it can waste a lot of developer time to try to figure why something is still malfunctioning after fixing it.

I've run into this myself quite a bit so I decided to dig deeper. After extensive Google-ing I couldn't find the mention of this issue or any solution. It's sure to exist because it happens even when I use SolidJS' standard starter template with a very simple application.

Anyways, problem lies in the fac

lacikawiz

Svelte Components Collection

REPL Examples & Code

Modal

https://svelte.dev/repl/514f1335749a4eae9d34ad74dc277f20?version=3.37.0

lacikawiz

/*
	Calling of simple Google API to translate short pieces of text.
	Requires no API key :)
	WARNING: This call has a severe rate limitation. Frequent calls will result in a temporary block for your IP address for a few hours.

	INPUT:
	- source language code, eg: "ru"
	- target language code, eg: "en"
	- text to be translated

lacikawiz

#How to find the parameters of a circle based on 3 points on circumference

I spent some hours with WolframAlpha, paper and a text editor to distill the mathematical formula to find the center coordinates of a circle and its radius. I tested it with a few random coordinates and it returned precise results each time.

I provide here a Go code for my testing. It's very trivial to convert it into any other language.

Laszlo

lacikawiz

Run JS code on DOM elements as soon as they appear

This code is written to handle cases when the DOM is being generated, like Angular, Ractive or Svelte, etc. It does a quick (100ms) repeated check for the existence of the DOM elements and when they appear it runs the given function on each elements.

lacikawiz

<InputBlock> component

An <InputBlock> is a unit that contains all the necessary elements for a form input element.

• The label (with indication whether it's a required field)
• The input component itself
• The Explanation (short note or explanantion on the what needs to be inputted)

It also handles the validation (as given by a parameter) and displaying an error message if there's one.

lacikawiz

<FixedBottom> Svelte Component

It generates an always visible content on the bottom of the page. You can use it to add buttons, messages, etc that are always visible.

For usage examples see the Svelte REPL: https://svelte.technology/repl?version=2.15.3&gist=7c741d58745e2cd27dde18ce6a8cd384

lacikawiz

<Section> component: A styled section with slots for Title, Header, Content & Footer

A simple Svelte component to make styled sections group things together. It uses <fieldset> tag to make the section stand out.

For live example see: https://svelte.technology/repl?version=2.15.3&gist=cf3d25a679ced9fbb73ead6501113dce

lacikawiz

<Money> Component

This is a component for a specialized input that only allows the user to enter valid numbers, also limits the precision of the number, breaks up large number with commas & displays a $ sign in front of the field. Eg: $1,234.56

For live example see: https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

lacikawiz

<Modal> Component

A simple Svelte component to create a lightbox style modal window with slotted content. It closes by clicking on gray area, the X in the corner or pressing ESC on the keyboard. The ability to exit can be disabled and controlled from the App using it.

For live example see: https://svelte.technology/repl?version=2.15.3&gist=a14904a7ee58a3756bb766ef2b514cdc