FjordWarden Posts - Answer Overflow

FjordWarden

Explore posts from servers

•Created by FjordWarden on 5/14/2024 in #support

Custom renderer with hyper dom expressions

I've been trying to write my own custom renderer with the solid-js/universal module, but I am failing to understand how I should integrate the renderer into for example a Canvas component. I've studied the solid-three example and solid-universal-renderer-template examples and they seem to use directive in vite.config.js to tell the transpiler somehow to use the other renderer. I'm just using vanilla js so maybe I need to path solid/h in some way to get this to work. At any rate I'd appreciate if someone could tell me this is the right direction to take.

2 replies

SSolidJS

•Created by FjordWarden on 5/7/2024 in #support

Return non DOM element as component with hyper dom expressions

I'd like to create a declarative api that uses components that are not part of the DOM tree. Sort of like this Canvas API:

function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}

function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}

I'm just not sure how to implement to Bezier so it can also receive events.

5 replies

SSolidJS

•Created by FjordWarden on 4/13/2024 in #support

No Context when using hyper dom expressions

I've this strange behaviour that useCounter(CounterContext) returns undefined when porting the context example to use hyper dom expressions. Check codepen here: https://codepen.io/wrnrlr/pen/eYojdqV?editors=1011 Any ideas what I am doing wrong?

4 replies

SSolidJS

•Created by FjordWarden on 12/23/2023 in #support

Move table columns around with drag & drop

I've created a data table component where you can move around the order of the columns using the drag and drop api. Specifically, I am using e.dataTransfer.setData to set the index on an ondragstart and read it during the ondrop event. It works as expected, at least on the first try, after that the behaviour becomes weird because it will always use the old index and not the new ordering. I've tried using a Index instead of a For, this solves the index issue but then the data will be matched with the wrong column. One way to work around this is to just pass the index in manually like this: {each:()=>props.headers().map((h,i)=>[h,i])}. Might there be a better option?

1 replies

SSolidJS

•Created by FjordWarden on 10/26/2023 in #support

Use non breaking space with hyper dom expressions

How can I use the good old   inside a div a bit like this: h('div', [h(...),'  and  ',h(...)])

3 replies

SSolidJS

•Created by FjordWarden on 8/23/2023 in #support

Remove element from store not working

I'm trying to remove an element from a reactive store based on the index. I've tried versions of this but I keep getting an error telling me "Cannot mutate a Store directly":

props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))

props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))

I've tried both <For> and <Index> I've also tried something like props.setMyFilter(i(),undefined) but this does not result in any change in the DOM, but it does log an error because it is trying to render a element from the store that is no longer there.

Uncaught TypeError: Cannot read properties of undefined (reading 'description')

Uncaught TypeError: Cannot read properties of undefined (reading 'description')

4 replies

SSolidJS

•Created by FjordWarden on 8/10/2023 in #support

Render a component referenced by a object

How van I render a component that is referenced by an object instead of just writing the tag directly? For example I'd have a store where I want to programmatically change what ckind of editor is supported:

function View() {
  const [store,setStore] = createStore([{label:'text',form:TextForm}])
  return <For each={f=> ??? }</For>
}

function View() {
  const [store,setStore] = createStore([{label:'text',form:TextForm}])
  return <For each={f=> ??? }</For>
}

Something like f.form does not work here. Maybe this is not a good idea and I should just use a type attribute in the object and check with an if when rendering, but I was wondering more if this is an option at all.

1 replies

SSolidJS

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

How to iterate over Object.entries()?

How does one use <index> or <for> together with Object.entries(obj)

function Example() {
  const [schema] = createSignal({'paths':{'/foo':{'a':'a'},'/bar':{'b':'b'}}})
  return <Index each={Object.entries(schema().paths)}>{(k,i)=><div>{i} - {k()} - {k()[0]} - {k()[1]}</div>}</Index>;
}

function Example() {
  const [schema] = createSignal({'paths':{'/foo':{'a':'a'},'/bar':{'b':'b'}}})
  return <Index each={Object.entries(schema().paths)}>{(k,i)=><div>{i} - {k()} - {k()[0]} - {k()[1]}</div>}</Index>;
}

this only seems to work for {k()[0]}, and not {k()[1]} Playground example: https://playground.solidjs.com/anonymous/349c6400-367b-4856-938a-8cf5b4208aea In the console it logs: Unrecognized value. Skipped inserting {a: 'a'}

4 replies

SSolidJS

•Created by FjordWarden on 5/10/2023 in #support

createResource does not working with json()

Why does text() work but json() does not:

let [schema1] = createResource(async _ => await (await fetch(`https://api.localhost/`)).json());
let [schema2] = createResource(async _ => await (await fetch(`https://api.localhost/`)).text())

let [schema1] = createResource(async _ => await (await fetch(`https://api.localhost/`)).json());
let [schema2] = createResource(async _ => await (await fetch(`https://api.localhost/`)).text())

I am sure the content I get back is valid JSON and changing the content type has no effect. I can't think of a reason why this difference in behaviour?

3 replies

SSolidJS

•Created by FjordWarden on 4/25/2023 in #support

Abort resource

I am building some full text search input field and got the basic thing working. Next I want to add support to abort the previous fetch request because they can take a while and currently they build up with every token I type. This is my current attempt at a solution, but it has a problems. I never finishes the any fetch because it is aborted in the effect at the same time the resource runs. What is the suggested solution to accomplish this, I can't be the first to try this but I find very little info on how to do this with SolidJs.

const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))

const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))

2 replies

SSolidJS

•Created by FjordWarden on 4/19/2023 in #support

Context undefined

I want to wrap my auth token from local storage in a ContextProvider. To this effect I've done this:

const TokenContext = createContext();

export function TokenProvider(props) {
  const [getToken, setToken, {remove}] = createStorageSignal('token', { api: cookieStorage }),
    token = [getToken,{login(token) {setToken(token)}, logout() {remove()}}];
  return <TokenContext.Provider value={token}>{props.children}</TokenContext.Provider>
}

export function useToken() { return useContext(TokenProvider); }

const TokenContext = createContext();

export function TokenProvider(props) {
  const [getToken, setToken, {remove}] = createStorageSignal('token', { api: cookieStorage }),
    token = [getToken,{login(token) {setToken(token)}, logout() {remove()}}];
  return <TokenContext.Provider value={token}>{props.children}</TokenContext.Provider>
}

export function useToken() { return useContext(TokenProvider); }

What am i doing wrong?

6 replies

SSolidJS

•Created by FjordWarden on 1/28/2023 in #support

Strange React not defined error

I've created the bare minimum solidjs + vite app with just and index.html and index.jsx page:

import { render } from "solid-js/web";

export function App() {
  return <h1>Hello</h1>;
}

render(() => <App/>, document.body);

import { render } from "solid-js/web";

export function App() {
  return <h1>Hello</h1>;
}

render(() => <App/>, document.body);

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script type="module" src="./index.jsx"></script>
</head>
<body>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script type="module" src="./index.jsx"></script>
</head>
<body>
</body>
</html>

Yet I get this super weird error in the console for the line render(() => <App/>, document.body);: Uncaught ReferenceError: React is not defined

16 replies

Gaming

Programming