Solid.js – a tutorial | Computer Week

import { createResource, For } from "solid-js";
//...

  {(joke) => (
    

      {joke.setup}
      
{joke.punchline}
    
  )}

allows you to create an iterable object – like the array that the Jokes()-Promise is returned – to be processed when it is resolved. You don’t have to worry about the asynchronous resolution mechanisms. Within the loop we also have access to the iterator object joke. We use this at this point to create a simple list of elements, or jokes. A (more or less funny) example: Wohin geht eine API zum Essen? Ins RESTaurant.

Suspense Boundaries

Die component makes it easier to define boundaries at which an asynchronous loading process can display its various states. In the sample application below (which builds on our previous example), you can see in action:

import { createResource, For, Suspense } from "solid-js";
// ...
Fetching jokes... please wait!}>


  {(joke) => (
    

      {joke.setup}
      
{joke.punchline}
    
  )}

It should be noted here that you not having to tell which promise or resource it is “waiting” for. It automatically detects the asynchronous processes within itself and waits for them to be resolved. In the meantime, placeholders are displayed. This makes it very easy to handle the fetch states.

Error Boundaries

Apart from that, it is often necessary to define boundaries for error handling for user interfaces. Solid also makes this process painless:

import { createResource, For, Suspense, ErrorBoundary } from "solid-js";
 (
    

      
Failed to load jokes!
      
Error details: {err.message}
    
  )}
>
   Fetching punchlines... please wait!}>
      

        
          {(joke) => (
            

              {joke.setup}
              
{joke.punchline}
            
          )}
        
      
   
 

This code is the same as our previous version – except that it is now from the ErrorBoundarycomponent is enclosed. With this you can easily define a part of the user interface that should be displayed if something goes wrong with the asynchronous call. To test this, you can add a typo to the Jokes API.

Event Handling in Solid

We now test Solid’s event handling by removing the punchline from the inline display, recording a mouse click on the setup and then displaying the punchline in a warning message:

 handleSetupClick(joke.punchline)}
  style={{ cursor: 'pointer', color: 'blue', textDecoration: 'underline' }}
  title="Click to reveal punchline"
>
  Setup: {joke.setup}

Here is the event handler defined inside the component function:

export default function JokerSimple() {
    const handleSetupClick = (punchline: string) => {
    alert(punchline);
  };
//...

If you now click on the setup line, this will happen onClick-Property that handleSetupClick is executed. This is defined as a template expression (in curly brackets) and as an anonymous inline function that makes the call to the simple handleSetupClickfunction forwards. This in turn opens an alert with the punch line. The latter is passed from the template by joke.punchline is called as an argument. If you’re on "Wo hängen Programmierer gerne rum?" click, you will get the answer: "In der Foo Bar." (this joke is so bad it’s good again).

A reactive checkbox

Now imagine you want to add the ability to switch between showing programmer jokes and general jokes. The remote API checks whether "programming" in the penultimate part of the URL (…/jokes/programming/ten versus …/jokes/ten) is present or not. To allow users to toggle the display, let’s now add a checkbox to our page. To do this, we first create a new signal called jokeType – with an empty string as the initial value:

const (jokeType, setJokeType) = createSignal("");

In the next step we add a checkbox element at the beginning of the main div:

{setJokeType(jokeType()==''?'programming/':'')}}> 

Die Attribute checked and onInput are solid specific. About the value of the jokeType()-Signal with "programming/" to compare uses that checked-Attribute a token,. In other words, the box is checked if the value of jokeType „programming/“ is. In this example we use a string for the checkbox instead of a boolean because createResource does not trigger a reactive update for incorrect values. The onInputattribute processes the input event for the checkbox. When it fires, we change the value of jokeType so that it is between an empty string and "programming/" changes. We use this changing value in the Joke Fetcher URL.

Combine signal & resource

In the last step we now combine the new signal and the resource. This is a form of Derived Reactivity in which the resource monitors the state of the signal and updates itself accordingly. Then the parts of the app that monitor the resource are updated one by one. In addition to the Promise that does the fetching job, accepted createResource a source signal as the first argument. This makes it easier to chain them together for our use case:

const (jokes) = createResource(jokeType, fetchJokes);

Now if the value of jokeType changes, updates the jokes()-Resource also the elements that depend on it. The Joke Fetcher function also receives the result of the source signal:

const fetchJokes = async (jokeType) => {
  return (await fetch(`https://official-joke-api.appspot.com/jokes/${jokeType}ten`)).json();
}

It should be noted that the signal jokeType a direct variable in the argument of fetchJokes is (the result of the dissolution of the jokeType-Promise). Die fetch-URL uses the value of jokeType. If the signal via the checkbox is changed, Solid will detect this and automatically retrieve the list of jokes again – with the updated URL. (fm)

This article originally appeared at our sister publication Infoworld.com.