hyperknot Posts - Answer Overflow

hyperknot

Explore posts from servers

•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?

10 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?

47 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