eponymous Posts - Answer Overflow

eponymous

•Created by eponymous on 7/10/2024 in #support

Using Router Action with Solid (not SolidStart)

I'm trying to understand how to use Solid Router actions with Solid (the core library, not Solid Start). When I submit a form which has an action the browser redirects to https://action/.... So something is going wrong that I don't see. Here is a test I created in the Solid Playground, adapting the example from the docs: https://playground.solidjs.com/anonymous/09ea99f6-f72a-4f63-8c80-7e86cba1b348. As you can see when the form is submitted it redirects to a URL which doesn't exist.

15 replies

SSolidJS

•Created by eponymous on 5/13/2024 in #support

Create route which opens a modal

In SolidStart and using Solid Router, I'm trying to create a route for a modal. Specifically, I want to have a log in link that opens a modal when it is clicked, with whatever page the user was on to remain in the background. I also want the URL to be updated to reflect that the modal is open, which is where the difficulty comes in. How could I accomplish this?

15 replies

SSolidJS

•Created by eponymous on 10/9/2023 in #support

Is it possible to make two separate SolidJS 'apps' work on the same page?

I have a page running SolidJS and I'm trying to get another SolidJS 'app' to render on the same page within a specific element. However, I notice that the second instance only runs when I remove the first instance. Is there any way to make this work?

13 replies

SSolidJS

•Created by eponymous on 5/16/2023 in #support

Why does routeData() return undefined?

I am fetching data from my Directus backend in createServerData$ like this:

export function routeData() {
    return createServerData$(
        async () => {
            const directus = new Directus('http://localhost:8055')
            return await directus.items('event').readByQuery()
        }
    );
}

export default function Home() {
    const events = useRouteData()
    createEffect(() => {
        console.log(events())
    })

    //...

export function routeData() {
    return createServerData$(
        async () => {
            const directus = new Directus('http://localhost:8055')
            return await directus.items('event').readByQuery()
        }
    );
}

export default function Home() {
    const events = useRouteData()
    createEffect(() => {
        console.log(events())
    })

    //...

However, the events variable is always undefined. I checked that the items are actually being fetched from Directus, and they are. And if I manually return a value from createServerData$ I can access it from the component. So what is going wrong here? Thanks!

1 replies

SSolidJS

•Created by eponymous on 4/6/2023 in #support

Render HTML from string

I have a string containing HTML tags which I want to render as HTML. For example, this can be accomplished in Svelte with a special @html directive: https://svelte.dev/tutorial/html-tags. However, I don't see a similarly straightforward way to accomplish this in SolidJS. Am I missing something? Thanks!

5 replies

SSolidJS

•Created by eponymous on 3/28/2023 in #support

Using solid-element, how do you get the children of a web component?

I'm trying to get the children of a custom component created with solid-element. In plain SolidJS I would simply use props.children, but this is undefined on the solid-element component. Is there a particular way to get this done using solid element?

5 replies

SSolidJS

•Created by eponymous on 3/15/2023 in #support

Problem creating web component with solid-element

Hi, I'm trying to create an image carousel web component by wrapping an existing JS library (called Glide) within a Solid component. As a regular solid component it works fine, but when I try to convert it to a web component I get an error from the Glide saying indicating that it cannot find the root element on which to mount the image carousel. It seems the initialization which I place within the onMount hook cannot access the elements of the shadow DOM (???) The code is below. Any insights would be appreciated.

import {Component, createEffect, createSignal, JSX, onMount} from "solid-js"
import Glide from "@glidejs/glide"
import {customElement} from "solid-element";


const VehicleGallery: Component = () => {

    onMount(() => {
        const glide = new Glide('.glide', {

              // GLIDE OPTIONS
        })
        glide.mount() // THROWS ERROR: "Root element must be a existing Html node"
    })

    return (
        <>
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css" />

            <div id="vehicle-gallery">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides">
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/000000/fff.png"/>
                            </li>
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/FF0000/fff.png"/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </>
    )
}

customElement('vehicle-gallery', {id: undefined}, (props, { element }) => {
    return <VehicleGallery id={props.id} />
})

import {Component, createEffect, createSignal, JSX, onMount} from "solid-js"
import Glide from "@glidejs/glide"
import {customElement} from "solid-element";


const VehicleGallery: Component = () => {

    onMount(() => {
        const glide = new Glide('.glide', {

              // GLIDE OPTIONS
        })
        glide.mount() // THROWS ERROR: "Root element must be a existing Html node"
    })

    return (
        <>
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css" />

            <div id="vehicle-gallery">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides">
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/000000/fff.png"/>
                            </li>
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/FF0000/fff.png"/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </>
    )
}

customElement('vehicle-gallery', {id: undefined}, (props, { element }) => {
    return <VehicleGallery id={props.id} />
})

2 replies

SSolidJS

•Created by eponymous on 3/6/2023 in #support

Cannot reference properties of object stored in a signal after being fetched from API

I fetch some data via a REST API and store it in a signal within the onMount hook. The signal stores an array of the fetched data. I can reference all top level members of that array, but when I try to reference their properties I get an error. This only happens for me when I fetch the data from an API. When I pass in the static data via prop or just initialize the signal with the data, it doesn't happen. A reproduction of the problem is below (and also here: https://playground.solidjs.com/anonymous/cd6419ab-38e5-43c8-846e-44dcc9233896) I think there is something fundamental I am missing.

import { render } from "solid-js/web";
import { createSignal, onMount, createEffect } from "solid-js";

function Test() {
  const [users, setUsers] = createSignal([]);
  const [users2, setUsers2] = createSignal([
    {
      id: 1
    },
    {
      id: 2
    }
  ])

  createEffect(() => {
    console.log(users()[0].id) //THROWS ERROR
  })

  createEffect(() => {
    console.log(users2()[0].id) //DOES NOT THROW ERROR
  })

  onMount(() => {
    fetch("https://64062563eed195a99f972501.mockapi.io/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data)
      })
  })

  return (
    <></>
  );
}

render(() => <Test />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal, onMount, createEffect } from "solid-js";

function Test() {
  const [users, setUsers] = createSignal([]);
  const [users2, setUsers2] = createSignal([
    {
      id: 1
    },
    {
      id: 2
    }
  ])

  createEffect(() => {
    console.log(users()[0].id) //THROWS ERROR
  })

  createEffect(() => {
    console.log(users2()[0].id) //DOES NOT THROW ERROR
  })

  onMount(() => {
    fetch("https://64062563eed195a99f972501.mockapi.io/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data)
      })
  })

  return (
    <></>
  );
}

render(() => <Test />, document.getElementById("app")!);

6 replies

SSolidJS

•Created by eponymous on 2/1/2023 in #support

Trigger animation using Motion One for Solid

Is there a way to manually trigger animations using motion one for solid? The regular Motion library has an animation.play() method, but I don't see how to do the same think using Motion Solid. The problem I'm trying to solve is that I'm using Motion in a component, but the animation does not play when I pass that component to a second component as a child (props.children) and try to render it in the second component.

2 replies

SSolidJS

•Created by eponymous on 1/30/2023 in #support

Control when child component is mounted

I am creating a mega menu component which is used in the following way:

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

Each child component is passed to the MainMenu component from the MenuItem by passing props.children . The MainMenu component is then responsible for showing each child component with the relevant MenuItem becomes active (is clicked), like this: {menuItems()[activeMenuItem()].children}, where menuItems is a signal containing an array of menu items and activeMenuItem is a signal containing the index of the currently active menu item. It works pretty well. The problem I'm trying to solve is that it seems the child components are mounted before the MainMenu actually shows it, and they are mounted only once. Ideally, I would like child components to the mounted each time it is shown by the MainMenu, and unmounted when they are not shown - so basically, each time the activeMenuItem signal changes and thus {menuItems()[activeMenuItem()].children} is called again. Here is the full code in the playground: https://playground.solidjs.com/anonymous/0094b6fc-014a-40a7-be43-e1c008fe3df4

1 replies

SSolidJS

•Created by eponymous on 1/5/2023 in #support

How do I pass props to child components which are accessed through props.children?

I'm coming upon this kind of issue a lot. In this particular case, I have a <Tabs> component that can have an arbitrary number of <Tab> and <TabContent> children. There are other ways to do this, but this is the way I have chosen. I need to update props.index on the children from the parent; and also set their visibility either through a props.visible property. 1. Is there a way to pass props from parent to child by getting the child through props.children (or some other way)?

25 replies

Gaming

Programming