hyperknot Posts - Answer Overflow

hyperknot

Explore posts from servers

•Created by hyperknot on 3/29/2025 in #support

How to trigger focus and scroll across the app?

What is the best way to trigger DOM element related reactions across the app? By across I mean for example by keyboard, related to a different component, etc. In practice, there is a global store, where you want to have a function focus() or scrollToBottom() etc. My current idea is to have a large, random integer in a variable in the store, and in the component rendering the DOM element I just put a dummy createEffect() with this integer and a scroll/focus effect. I guess the alternative is to save the ref into the store, but I think it's very bug prone for all the re-renders. I need to carefully remove it on each cleanup and add it back on each onMount. If you did this in a production app, how did you do it?

10 replies

SSolidJS

•Created by hyperknot on 3/24/2025 in #support

Does store setState check for equality before updating signals?

Does it make sense to manually check if a value is actually different before running setState/setStore? I mean, are reactions run even if the value is the same as it was before? If not, does it make sense to make like a helper function, which wraps setState in an if block, and only runs it if it's actually needed? Of course it wouldn't work on functions, etc. passed in, but I'm talking about basic cases, like setting strings or arrays of strings.

43 replies

SSolidJS

•Created by hyperknot on 3/13/2025 in #support

How do you refresh a non-solid children?

I'm using lexical editor inside one SolidJS component. It is initialised using ref={ref} + onMount(). It works correctly, mounts, unmount cleanups, etc. everything is fine. Now I need to programmatically clear it's content from a global store. I see two solutions: 1. register the editor instance (created inside onMount) into the store, and unregister it on unmount, so that I can call a .clear() command on it. 2. somehow trigger a component re-render from the global store. In React, it'd do this by putting a random number inside a key, like this:

<UserInput
  chat={props.chat}
  key={props.chat.state.userInputRefreshID}
/>

<UserInput
  chat={props.chat}
  key={props.chat.state.userInputRefreshID}
/>

But in Solid this key of course doesn't exist. How can I achieve the same behaviour? I mean I want <UserInput> to be discarded and recreated, with all the cleanups / onMounts run. Solution 1. is probably workable, but I think it's very bug prone, with all the registering / unregistering / synching of editor instances to global state. I'd rather choose 2. and discard and and recreate the component altogether. One idea between 1 and 2 seems to be to use a random number but use it in a createEffect, to call the clear function:

  createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

  createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

How do I make this run only on the 2nd, etc. subsequent updates and not at the same time as onMount?

22 replies

SSolidJS

•Created by hyperknot on 3/5/2025 in #support

Best practices when interfacing with vanilla JS libraries.

I'm trying to integrate lexical editor with my Solid app. Can you tell me if I'm thinking these integraions correctly?

export const UserInput: Component<ColumnProps> = (props) => {
  let editorInstance: LexicalEditor | undefined
  let editorRef!: HTMLDivElement

  onMount(() => {
    const config = {
      namespace: `UserInput-${props.index}`,
      onError: console.error,
    }

    editorInstance = createEditor(config)
    editorInstance.setRootElement(editorRef)

    const combinedUnregister = mergeRegister(
      registerPlainText(editorInstance),
      registerHistory(editorInstance, createEmptyHistoryState(), 300),
    )

    onCleanup(() => {
      combinedUnregister()
      editorInstance = undefined
    })
  })

  return <div ref={editorRef} contentEditable={true} />
}

export const UserInput: Component<ColumnProps> = (props) => {
  let editorInstance: LexicalEditor | undefined
  let editorRef!: HTMLDivElement

  onMount(() => {
    const config = {
      namespace: `UserInput-${props.index}`,
      onError: console.error,
    }

    editorInstance = createEditor(config)
    editorInstance.setRootElement(editorRef)

    const combinedUnregister = mergeRegister(
      registerPlainText(editorInstance),
      registerHistory(editorInstance, createEmptyHistoryState(), 300),
    )

    onCleanup(() => {
      combinedUnregister()
      editorInstance = undefined
    })
  })

  return <div ref={editorRef} contentEditable={true} />
}

Some of my questions: 1. editorRef for sure cannot be undefined, under any circumstance? 2. I have these components for a multi column layout, with index 0,1,2,3. Currently, with the index as a constant inside onMount it cannot be changed. Is this correct? 3. When would it change? Those columns are in a for loop, (item, index) => <Component ... index={index}>. In Solid, is it possible that index would need to be updated? I'm thinking there'll be one, long-lived component for each column. Is this correct? 4. Currently I've put everything in onMount. I've read that it's a good practice to split it into a smaller onMount and multiple crateEffects. How does that work? How is the order kept between them? I mean initial time it's: - onMount, createEffect1, createEffect2 - on each change is those createEffects which need updating? If both changed, does it keep their order? Thanks!

21 replies

SSolidJS

•Created by hyperknot on 3/5/2025 in #support

How to make controlled <textarea>

I'm trying to make the simplest possible controlled textarea. What I want is to show only and exactly what I set, not what the user types. My problem is that this only works for one single character, after which the user can just type freely. Minimal repro case:

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

In this example, if the user types "abc" -> "xbc" appears. I want it to simply show x, no matter what happens.

8 replies

SSolidJS

•Created by hyperknot on 2/22/2025 in #support

How to modify array partially?

I'm using a store to store an array. I'm displaying that array in a For component. What I don't understand is how can I possibly use the "smart" feature of the For component, which only renders the changing part of the array. I mean all I can do in a store is setState(), where I put my full array in. So how can I possible send a partial update to a component? I see no way to push() at the end of an existing array in state or for example modify the last element of the array. What am I missing?

33 replies

SSolidJS

•Created by hyperknot on 2/21/2025 in #support

Why does my component only update in a dummy For loop?

The component works correctly in the For loop, but doesn't do anything on it's own.

<For each={[props.string]}>
  {(t) => <Item content={t} />}
</For>

<For each={[props.string]}>
  {(t) => <Item content={t} />}
</For>

<Item content={props.string} />

<Item content={props.string} />

The component itself doesn't seem to matter, it can be as simple as return props.content

15 replies

SSolidJS

•Created by hyperknot on 2/20/2025 in #support

How to check if createMemo should be used?

I'm trying to figure out if using createMemo is or isn't worth it. I know that for super basic equality checks, there is probably no point. But what about something slow, like code highlighting? What I don't understand is that what happens when my content changes. I think the whole function needs to be re-run, so the memo doesn't help. Or does it, still? Also, what about the case, when this whole component is just item in a <For> loop. I mean I'm parsing the markdown like this:

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

So I have lot of small tokens which is processed in a <For> component, like this:

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

So what is happening here exactly with Solid? I mean I have a changing Markdown input -> changing array of parsed tokens -> a potentially lot of possible code-reuse for syntax highlighting. Is createMemo helping here or not? How can I check if it helps? Putting a console.log inside createMemo which should not trigger?

48 replies

SSolidJS

•Created by hyperknot on 2/16/2025 in #support

Understanding Solid reactivity with console.log

I'm using createMemo with a console.log inside. Can you tell me why is this console.logging all the items, when I click on one? Am I using createMemo in a wrong way? I thought only the 2 changed items would be recalculated. I created a Stackblitz + GitHub repo to undestand this better: https://stackblitz.com/~/github.com/hyperknot/solidjs-sandbox This is the line with the console.log https://github.com/hyperknot/solidjs-sandbox/blob/a19b9581595bedd7b5e7949560a7b0d0755b8fd7/src/1-simple/store/doc.js#L15

35 replies

SSolidJS

•Created by hyperknot on 2/13/2025 in #support

How do I best have createMemo in a store?

I'm used to MobX, where I can put a @computed on any method in a store. In Solid, how do I best replicate this? If I do this:

export class Chat {
  state: ChatState
  private setState: SetStoreFunction

  isActive: () => boolean

  constructor() {
    const [state, setState] = createStore({
     //...
    })

    this.state = state
    this.setState = setState
    
    // Create memo after state is initialized
    this.isActive = createMemo(() => uiStore.state.activeDocumentID === this.state.uuid)
  }

export class Chat {
  state: ChatState
  private setState: SetStoreFunction

  isActive: () => boolean

  constructor() {
    const [state, setState] = createStore({
     //...
    })

    this.state = state
    this.setState = setState
    
    // Create memo after state is initialized
    this.isActive = createMemo(() => uiStore.state.activeDocumentID === this.state.uuid)
  }

Then I get the error: computations created outside a createRoot or render will never be disposed I'd love to "cache" this value. There are thousands of documents and only one can be active at any time. How would you best structure the store for this, so that the comparisons cached/memoed?

11 replies

CDCloudflare Developers

•Created by hyperknot on 12/8/2024 in #general-help

I don't get Email Routing

I don't get Cloudflare Email Routing. It can only be added to domains without MX records. What are those domains? Why would anyone have domains without MX records, other than "parked" or empty domains? Normally you use Cloudflare with the primary, company domain, where MX records are definitely configured already, with Google Workspace or similar. How would you use Email Routing with those?

3 replies

CDCloudflare Developers

•Created by hyperknot on 12/7/2024 in #workers-help

How do I list contents of local KV?

I'm running wrangler dev. I get this on startup:

Your worker has access to the following bindings:
- KV Namespaces:
  - KV: 592fd8e6d8a94899b50f6b7e7aba4036 (local)

Your worker has access to the following bindings:
- KV Namespaces:
  - KV: 592fd8e6d8a94899b50f6b7e7aba4036 (local)

How can I list all the contents of this KV? If I try in a new terminal tab:

pnpm wrangler kv:key list --local --binding=KV

pnpm wrangler kv:key list --local --binding=KV

it returns []. So does it when I try:

pnpm wrangler kv:key list --binding=KV --preview

pnpm wrangler kv:key list --binding=KV --preview

The items are present, from inside the worker I can console.log them. Only from terminal/wrangler I cannot access them.

 list = await env.KV.list()
    for (const key of list.keys) {
      const value = await env.KV.get(key.name)
      console.log(`Key: ${key.name}, Value:`, value)
    }

 list = await env.KV.list()
    for (const key of list.keys) {
      const value = await env.KV.get(key.name)
      console.log(`Key: ${key.name}, Value:`, value)
    }

What am I doing wrong?

1 replies

SSolidJS

•Created by hyperknot on 11/25/2024 in #support

Which styling library to use?

Hi, I've read the docs, checked out many website and I just got totally confused which styling library to use with Solid + Vite. - macaron - https://macaron.js.org/ doesn't work, terminates with babel error. - https://github.com/solidjs/solid-styled-components 2 yr no commits - https://github.com/solidjs/solid-styled-jsx 2 yr no commits, however the main library it refers to still gets updates - Panda CSS works but is a mess which tries to overtake everything. - Pigment CSS doesn't support Solid, just React ATM - should I use CSS modules in separate files? Sometimes I'd love to have it colocated with the component code, not in a separate file. - linaria has an open PR, anyone used it? https://github.com/callstack/linaria/pull/1096

15 replies

CDCloudflare Developers

•Created by hyperknot on 10/30/2024 in #workers-help

How do I get the list of deployed workers like on the web UI?

With Wrangler, how do I get the list of deployed workers like on the web UI?

4 replies

SSolidJS

•Created by hyperknot on 9/27/2024 in #support

Questions about migrating from MobX

Hi, SolidJS newbie here with 8 years of MobX React experience. Couple of Qs: 1. I'd like to use class-based stores whenever possible. Is there anything I need to be aware of when using them? 2. Is store performance adequate? For example, can I update a string value at 60 FPS like this?

this.setStore('message', this.state.message + content)

this.setStore('message', this.state.message + content)

3. setStore vs. setState: Here is setState, https://docs.solidjs.com/concepts/stores#path-syntax-flexibility but later on it starts recommending using setStore https://docs.solidjs.com/concepts/stores#appending-new-values 4. Is appending to an array better than setState with .push()? 5. Is there any performance advantage to using produce? If I'm using my own setter function for each value, then I cannot use produce. Is there any disadvantage to this?

4 replies

CDCloudflare Developers

•Created by hyperknot on 6/20/2024 in #general-help

R2 down, some buckets are inaccessible

Some public buckets don't work, web UI is also broken for them. "We encountered an internal error. Please try again. (Code: 10001)" Other buckets work.

3 replies

CDCloudflare Developers

•Created by hyperknot on 6/9/2024 in #workers-help

Specify host header in fetch request

I'm trying to health-check load balanced hosts, for which I need to fetch using IP address + Host header. In curl it's super simple, like this:

curl -H "Host: direct.openfreemap.org" -I http://144.76.168.195/styles/liberty

curl -H "Host: direct.openfreemap.org" -I http://144.76.168.195/styles/liberty

However I cannot replicate the same in a Worker JS environment. For example this does not work (network connection lost):

    const resp = await fetch('http://144.76.168.195/styles/liberty', {
      headers: {
        Host: 'direct.openfreemap.org',
      },
    })

    const resp = await fetch('http://144.76.168.195/styles/liberty', {
      headers: {
        Host: 'direct.openfreemap.org',
      },
    })

How can I make either fetch work with Host headers, or use a lower level library for that?

13 replies

Gaming

Programming