AlexErrant Posts - Answer Overflow

AlexErrant

Explore posts from servers

CDCloudflare Developers SSolidJS KKysely

•Created by AlexErrant on 10/12/2024 in #support

How to mount a Solid component to a dom element?

I have a Solid app... ...that uses a vanilla-js library ...which gives me a <div> to do stuff with. (So this sandwich has 3 layers.) (Think of the vanilla-js library as like, CodeMirror or ag-grid or something. A complex UI lib which gives me ways to customize certain components.) How do I mount a Solid component to the vanilla-js's exposed <div>? I see two options: render(), and <Portal>. render's docs only really discuss it as the "browser entry point". However I feel like I should be able to use it for the above purpose too. (Yes, the vanilla-js library provides a "teardown" hook where I can call render's dispose.) There shouldn't be any problems with nested render calls, right? * https://www.solidjs.com/guides/rendering * https://docs.solidjs.com/reference/rendering/render Portal should work too, but I'm hoping to avoid it because I'm getting a "computations created outside a createRoot or render will never be disposed" warning and fixing that is causing a lot of boilerplate code.

11 replies

CDCloudflare Developers

•Created by AlexErrant on 8/14/2024 in #pages-help

Solid's `clientOnly` only works with "Development Mode" enabled [solved]

Steps to reproduce 1. Clone this minimal repo https://github.com/AlexErrant/solid-start-cf-basic 2. pnpm i && pnpm build && pnpm run deploy 3. Observe that it works on the whatever-name.pages.dev domain 4. Observe that a Cloudflare Site doesn't work (for me, DNS is setup like CNAME, pentive.com, hub-b6m.pages.dev) From Cloudflare's Dashboard, Caching/Configuration, I've hit the "Purge Everything" button to clear the cache. It doesn't fix anything. Strangely, enabling "Development Mode" makes clientOnly render as expected. But it only works for 3hrs before Cloudflare turns it off again, so obviously it's not a real solution. Ordinarily I'd think this is a SolidStart issue... but since "Development Mode" makes it work I think this is on Cloudflare. (Or me for missing something obvious.) The links work, so you can view the difference in behavior https://pentive.com/ https://hub-b6m.pages.dev

4 replies

KKysely

•Created by AlexErrant on 3/11/2024 in #help

Is `sql.join` the best way to concatenate sql templates?

I have some business logic that incrementally builds up a sql WHERE query as a string. It looks like I can't do the dumb thing and just string concat the pieces together like so:

let q = sql.raw` noteFtsFv.rowid ` + sql.raw` in `

let q = sql.raw` noteFtsFv.rowid ` + sql.raw` in `

So instead, I build a list of sql.raw and use sql.join with an empty string like so:

 const things = [
  sql.raw(" noteFtsFv.rowid "),
  sql.raw(" not "),
  sql.raw("IN (SELECT rowid FROM noteFtsFv WHERE noteFtsFv.fieldValues MATCH "),
  "some user input",
  sql.raw(" ) "),
]

let q = sql.join(things, sql``) as RawBuilder<SqlBool>

const person = await db
  .selectFrom('person')
  .select(['id', 'first_name'])
  .where(q)
  .executeTakeFirst()

 const things = [
  sql.raw(" noteFtsFv.rowid "),
  sql.raw(" not "),
  sql.raw("IN (SELECT rowid FROM noteFtsFv WHERE noteFtsFv.fieldValues MATCH "),
  "some user input",
  sql.raw(" ) "),
]

let q = sql.join(things, sql``) as RawBuilder<SqlBool>

const person = await db
  .selectFrom('person')
  .select(['id', 'first_name'])
  .where(q)
  .executeTakeFirst()

Is this the best way or am I missing a better solution 😅

8 replies

SSolidJS

•Created by AlexErrant on 3/7/2023 in #support

`createServerData` with `fetch` is returning `undefined` in `createEffect`

Here's a minimal example.

import { Component, createEffect} from "solid-js";
import {  useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData() {
  return {
    myServerData: createServerData$(
      async () => {
        await fetch("http://example.com") // this is necessary to cause the issue
        return "hi world"
      }
    ),
  }
}

const Stories: Component = () => {
  const { myServerData } = useRouteData<typeof routeData>();
  // console.log("outer", myServerData()) // uncomment this to "fix" the issue

  createEffect(() => {
    console.log("create effect", myServerData()) // this logs `undefined`
  })

  return (
    <div>
    </div>
  )
};

export default Stories;

import { Component, createEffect} from "solid-js";
import {  useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData() {
  return {
    myServerData: createServerData$(
      async () => {
        await fetch("http://example.com") // this is necessary to cause the issue
        return "hi world"
      }
    ),
  }
}

const Stories: Component = () => {
  const { myServerData } = useRouteData<typeof routeData>();
  // console.log("outer", myServerData()) // uncomment this to "fix" the issue

  createEffect(() => {
    console.log("create effect", myServerData()) // this logs `undefined`
  })

  return (
    <div>
    </div>
  )
};

export default Stories;

Note that the fetch is required to cause the issue and that I can "fix" the issue by calling the signal in the outer scope. I'm on solid-start 0.2.23. Is this expected behavior?

13 replies

KKysely

•Created by AlexErrant on 2/16/2023 in #help

How to make a top level SELECT that isn't from a table?

I'm trying to combine two queries, SELECT COUNT(*) FROM A and SELECT COUNT(*) FROM B. SELECT (SELECT COUNT(*) FROM A), (SELECT COUNT(*) FROM B) does what I want. How can I convert this to Kysely? My real code also returns two scalars, so I could theoretically use a UNION ALL - however I'm not sure if the return order is guaranteed in MySQL. I'm open to other solutions that don't have a top level SELECT.

12 replies

Gaming

Programming