seb Posts - Answer Overflow

seb

Explore posts from servers

•Created by seb on 4/10/2024 in #support

Understanding Solid Reactivity Lint Error

In the following component I get this lint warning:

The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored  solid/reactivity

The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored  solid/reactivity

But I am using it inside of an event handler function. Is this a misunderstanding on my part of how reactivity works or does the linter just not recognize that the chrome.runtime.onMessage global used by Chrome extensions can register event listeners? Here's a stripped down example of my code:

export const ExampleComponent: Component = () => {
  const [isLoading, setIsLoading] = createSignal(false);

  const handleContextMenuCommand = async (message: string) => {
    setIsLoading(true);
    await fetch('/example', { body: { message }});
    setIsLoading(false);
  }

  // this line results in a lint error:
  chrome.runtime.onMessage.addListener(handleContextMenuCommand);

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleContextMenuCommand);
  });

  return <div>Example</div>
};

export const ExampleComponent: Component = () => {
  const [isLoading, setIsLoading] = createSignal(false);

  const handleContextMenuCommand = async (message: string) => {
    setIsLoading(true);
    await fetch('/example', { body: { message }});
    setIsLoading(false);
  }

  // this line results in a lint error:
  chrome.runtime.onMessage.addListener(handleContextMenuCommand);

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleContextMenuCommand);
  });

  return <div>Example</div>
};

If this code is incorrect, what's the right way to handle it?

7 replies

TtRPC

•Created by seb on 6/17/2023 in #❓-help

Streaming responses (eg. for streaming ai chat completion text)

Hello! Has anyone used Vercel's ai package or any similar libraries which stream their responses with tRPC? I'm wondering what the best way to achieve a streamed response like that is while maintaining type safety. The trouble with useSubscription() is that it behaves more like a query than a mutation, so it would need to be called immediately when the component mounts rather than being triggered by some user action.

3 replies

SSolidJS

•Created by seb on 12/23/2022 in #support

Including solidjs router creates multiple instances of solid

I'm trying to add @solidjs/router to a project. But as soon as I import it and add the minimal setup, I get the following warning in my browser console:

You appear to have multiple instances of Solid. This can lead to unexpected behavior.

You appear to have multiple instances of Solid. This can lead to unexpected behavior.

Removing @solidjs/router resolves the issue. My imports look like this:

import { Component } from 'solid-js';
import { render } from 'solid-js/web';
import { A, Routes, Route, Router } from '@solidjs/router';

import { Component } from 'solid-js';
import { render } from 'solid-js/web';
import { A, Routes, Route, Router } from '@solidjs/router';

I had a hunch it was a peer-dependency issue, since @solidjs/router specifies [email protected] while I had [email protected] installed, but downgrading to 1.5.3 didn't end up fixing this issue. Also relevant to note that I'm using vite with vite-plugin-solid and pnpm. Any idea what I could be doing wrong here?

5 replies

Gaming

Programming