Cyber Grandma Posts - Answer Overflow

Cyber Grandma

Explore posts from servers

SSolidJS SIASapphire - Imagine a framework DTDrizzle Team

Posts Comments

SSolidJS

•Created by Cyber Grandma on 11/23/2024 in #support

Sessions broken on external hosts ?

14 replies

SSolidJS

•Created by Cyber Grandma on 11/20/2024 in #support

SSR failed to import "drizzle-orm/bun-sqlite"

Hi, here's the error I get

1:20:01 PM [vite] Error when evaluating SSR module /src/db/index.ts: failed to import "drizzle-orm/bun-sqlite"
|- Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'bun:'
 at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:228:11)
    at defaultLoad (node:internal/modules/esm/load:110:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:567:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:442:56)
    at new ModuleJob (node:internal/modules/esm/module_job:76:27)
    at #createModuleJob (node:internal/modules/esm/loader:455:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:266:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:247:17)

1:20:01 PM [vite] Error when evaluating SSR module /src/db/index.ts: failed to import "drizzle-orm/bun-sqlite"
|- Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'bun:'
 at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:228:11)
    at defaultLoad (node:internal/modules/esm/load:110:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:567:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:442:56)
    at new ModuleJob (node:internal/modules/esm/module_job:76:27)
    at #createModuleJob (node:internal/modules/esm/loader:455:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:266:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:247:17)

I am not sure if I should post this here or in Drizzle server but it seems more like an issue with vite. I've used drizzle successfully in other solid projects so I don't know what is specific here.

2 replies

SSolidJS

•Created by Cyber Grandma on 11/12/2024 in #support

Submission not reactive in JSX ?

Hi, I'm making a login form as such:

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

As usual I want to disable the login button while the login action is running. I created the disabled signal for that that just checks if the submission is pending. But for some reason it doesn't update the page but still triggers the createEffect. Am I missing something ?

3 replies

DTDrizzle Team

•Created by Cyber Grandma on 11/5/2024 in #help

Filter based on join data

Hi, would it be possible to query a list of student and filter by the name of its coach. The data is <student>.coach.fullname where coach is added as a with join. I would like to get every student that have a certain coach.

13 replies

SSolidJS

•Created by Cyber Grandma on 11/5/2024 in #support

SolidStart layout shifts using createAsync

Hi, I found out that I experience layout shifts whenever a createAsync is re-triggered. For example here:

export default function ActivitySubmissions() {
  const [params, setParams] = createStore<ActivitySubmissionsParams>(
    structuredClone(defaultParams),
  );

  const data = createAsync(() => getActivitySubmissions({ ...params }));

  const pagination = () => data()?.pagination;
  const submissions = () => data()?.submissions;

  const setPage = (page: number) => {
    setParams('page', page);
  };

  return (
    <main class="mx-auto flex flex-col gap-8 py-8 sm:w-11/12">
      <TopBar />
      <div class="rounded-md bg-red-300 shadow-md min-h-[1000px]">
        {/* <Suspense fallback={<div>Loading...</div>}>
          <ActivitySubmissionsTable submissions={submissions()} />
        </Suspense> */}
      </div>

      <div class="flex justify-center ">
        <Pagination ...>
            <!-- Omitted -->
        </Pagination>
      </div>
    </main>
  );
}

export default function ActivitySubmissions() {
  const [params, setParams] = createStore<ActivitySubmissionsParams>(
    structuredClone(defaultParams),
  );

  const data = createAsync(() => getActivitySubmissions({ ...params }));

  const pagination = () => data()?.pagination;
  const submissions = () => data()?.submissions;

  const setPage = (page: number) => {
    setParams('page', page);
  };

  return (
    <main class="mx-auto flex flex-col gap-8 py-8 sm:w-11/12">
      <TopBar />
      <div class="rounded-md bg-red-300 shadow-md min-h-[1000px]">
        {/* <Suspense fallback={<div>Loading...</div>}>
          <ActivitySubmissionsTable submissions={submissions()} />
        </Suspense> */}
      </div>

      <div class="flex justify-center ">
        <Pagination ...>
            <!-- Omitted -->
        </Pagination>
      </div>
    </main>
  );
}

I have a "middle div" colored in red here. Whenever I change one of the params (such as page or search filters), the createAsync is retriggered. But while it does that the middle part (in red) disappears for a split second and the page is re-scrolled back up. This makes using the pagination very obnoxious. Has anyone ever experienced that ? I don't understand why in this case it is needed for Solid to re-render the whole div each time.

31 replies

SSolidJS

•Created by Cyber Grandma on 11/2/2024 in #support

Re: Reset a store to its initial value, doesn't react

Hi, I'm trying to reset a store to its initial value, but when I do so the state doesn't react. The only way I can make it to work is to set each property of the store manually.

// A component with a button to reset the filters
function ThereAreNoEvents(props: ThereAreNoEventsProps) {
  return (
    <div>
      <p>There is nothing here :(</p>
      <button
        class="btn btn-primary btn-sm mt-4"
        onClick={() => {
          // Works, but I need to do it for every property
          props.setParams('textSearch', '');

          // Does not work
          props.setParams(structuredClone(defaultSearchParams));
        }}
      >
        Clear filters
      </button>
    </div>
  );
}

export default function EventGroups() {
  const [params, setParams] = createStore<SearchParams>(
    structuredClone(defaultSearchParams),
  );

  const eventGroups = createAsync(
    () => getEventGroups({ ...params }) as Promise<EventGroupWithEvents[]>,
  );

  return (.....)
}

// A component with a button to reset the filters
function ThereAreNoEvents(props: ThereAreNoEventsProps) {
  return (
    <div>
      <p>There is nothing here :(</p>
      <button
        class="btn btn-primary btn-sm mt-4"
        onClick={() => {
          // Works, but I need to do it for every property
          props.setParams('textSearch', '');

          // Does not work
          props.setParams(structuredClone(defaultSearchParams));
        }}
      >
        Clear filters
      </button>
    </div>
  );
}

export default function EventGroups() {
  const [params, setParams] = createStore<SearchParams>(
    structuredClone(defaultSearchParams),
  );

  const eventGroups = createAsync(
    () => getEventGroups({ ...params }) as Promise<EventGroupWithEvents[]>,
  );

  return (.....)
}

3 replies

DTDrizzle Team

•Created by Cyber Grandma on 9/26/2024 in #help

Possible to have multiple onConflict ?

Hi, Would it be possible to have multiple onConflictUpdate statements ? For exemple "if conflict on ID do that" and "if conflict on clientId do that instead" ?

6 replies

SSolidJS

•Created by Cyber Grandma on 2/1/2024 in #support

vite:css and postcss creating errors on SSR ?

10:56:50 PM [vite] Internal server error: Attempted to assign to readonly property.
  Plugin: vite:css
  File: /workspaces/motu/node_modules/@solidjs/start/shared/dev-overlay/styles.css
      at <anonymous> (/workspaces/motu/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:38958:18)
      at processTicksAndRejections (:13:78)
38953 |     }
38954 |     catch (e) {
38955 |         e.message = `[postcss] ${e.message}`;
38956 |         e.code = code;
38957 |         e.loc = {
38958 |             column: e.column,
                         ^
TypeError: Attempted to assign to readonly property.

10:56:50 PM [vite] Internal server error: Attempted to assign to readonly property.
  Plugin: vite:css
  File: /workspaces/motu/node_modules/@solidjs/start/shared/dev-overlay/styles.css
      at <anonymous> (/workspaces/motu/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:38958:18)
      at processTicksAndRejections (:13:78)
38953 |     }
38954 |     catch (e) {
38955 |         e.message = `[postcss] ${e.message}`;
38956 |         e.code = code;
38957 |         e.loc = {
38958 |             column: e.column,
                         ^
TypeError: Attempted to assign to readonly property.

Hi, I'm trying to start my solid-start project on another compute but I can't get it to work. I get this weird postcss error during SSR. And I'm using Devcontainers to reproduce my development environment, so I'm even more dazzled that it works on one compute and not on the other lol. Anyone has ever seen this error ?

2 replies

DTDrizzle Team

•Created by Cyber Grandma on 1/22/2024 in #help

Drizzle-kit not detecting views ?

Hi, I've created a view in the same file as my regular table:

export const userLevelsWithRank = pgView('user_levels_with_rank').as(
  (qb) =>
      qb
      .select({
          rank: sql<number>`rank() over (order by "level" desc, "xp" desc)`.as('rank')
      })
      .from(userLevels)
);

export const userLevelsWithRank = pgView('user_levels_with_rank').as(
  (qb) =>
      qb
      .select({
          rank: sql<number>`rank() over (order by "level" desc, "xp" desc)`.as('rank')
      })
      .from(userLevels)
);

But drizzle kit says that no changes were made.

No schema changes, nothing to migrate 😴

Did I miss something ?

14 replies

SSolidJS

•Created by Cyber Grandma on 1/19/2024 in #support

For is not Reactive ?

Hi, I've made this filter list using For:

<ul
  tabIndex={0}
  class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
  <For each={filters()}>
    {(f) => (
      <li>
        <div
          onClick={() => toggleFilter(f.id)}
          class="flex justify-between"
        >
          <p>{f.label}</p>
          {f.selected ? <FaSolidCheck size={12} /> : null}
        </div>
      </li>
    )}
  </For>
</ul>

<ul
  tabIndex={0}
  class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
  <For each={filters()}>
    {(f) => (
      <li>
        <div
          onClick={() => toggleFilter(f.id)}
          class="flex justify-between"
        >
          <p>{f.label}</p>
          {f.selected ? <FaSolidCheck size={12} /> : null}
        </div>
      </li>
    )}
  </For>
</ul>

The signal looks like this:

  const [filters, setFilters] = createSignal([
    { id: 'active', label: 'Active', selected: true },
    { id: 'terminated', label: 'Terminated', selected: false },
  ]);

  const toggleFilter = (id: string) => {
    console.log('before', filters()[0].selected);

    setFilters(
      filters().map((f) => {
        if (f.id === id) {
          f.selected = !f.selected;
        }

        return f;
      }),
    );

    console.log('after', filters()[0].selected);
  };

  const [filters, setFilters] = createSignal([
    { id: 'active', label: 'Active', selected: true },
    { id: 'terminated', label: 'Terminated', selected: false },
  ]);

  const toggleFilter = (id: string) => {
    console.log('before', filters()[0].selected);

    setFilters(
      filters().map((f) => {
        if (f.id === id) {
          f.selected = !f.selected;
        }

        return f;
      }),
    );

    console.log('after', filters()[0].selected);
  };

The console logs show that the value are changing, but the elements are not re-rendering. Am I missing something ?

17 replies

SSolidJS

•Created by Cyber Grandma on 1/17/2024 in #support

onClick function not rendered in the DOM ?

Hi, I'm trying to make a togglable filter list. I use the For element to loop over my list of filters and create a button for each.

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

The issue I have is that the 'onClick' doesn't run and doesn't appear in the HTML. Here is what I get in the inspector:

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

I am new to solid, I'm sorry if this is ends up being a really dumb issue on my part. But currently I'm scratching my head very hard about this onClick

7 replies

DTDrizzle Team

•Created by Cyber Grandma on 11/21/2023 in #help

Insert or Update: Error undefined is not an object (evaluating 'col.name')

Hi, I'm trying to implement Insert or Update

export async function insertOrUpdateUser(user: UserInsert) {
  const db = await getDatabase();

  return await db
    .insert(users)
    .values(user)
    .onConflictDoUpdate({
      target: users.id,
      set: user
    });
}

export async function insertOrUpdateUser(user: UserInsert) {
  const db = await getDatabase();

  return await db
    .insert(users)
    .values(user)
    .onConflictDoUpdate({
      target: users.id,
      set: user
    });
}

I get this error:

TypeError: undefined is not an object (evaluating 'col.name')
      at /app/node_modules/drizzle-orm/pg-core/dialect.js:74:41
      at buildUpdateSet (/app/node_modules/drizzle-orm/pg-core/dialect.js:72:6)
      at onConflictDoUpdate (/app/node_modules/drizzle-orm/pg-core/query-builders/insert.js:57:19)
      at /app/src/db/schemas/users.ts:43:15
      at processTicksAndRejections (:61:76)

TypeError: undefined is not an object (evaluating 'col.name')
      at /app/node_modules/drizzle-orm/pg-core/dialect.js:74:41
      at buildUpdateSet (/app/node_modules/drizzle-orm/pg-core/dialect.js:72:6)
      at onConflictDoUpdate (/app/node_modules/drizzle-orm/pg-core/query-builders/insert.js:57:19)
      at /app/src/db/schemas/users.ts:43:15
      at processTicksAndRejections (:61:76)

Any idea what it means ?

23 replies

DTDrizzle Team

•Created by Cyber Grandma on 11/9/2023 in #help

PostgresError: Relation X does not exist - After reorganizing schema

Hi guys, I have two tables (team and team_members) , which have a relation. All my schema was in one file and I decided to split it into multiple to make it cleaner. I ran the drizzle-kit generate:pg command with success, my app starts and does migration with success. But when I try to insert a new team_member it tells me that the relation does not exists. I find that odd, I also double checked I didn't delete anything. Any clue ? It's very late for me, perhaps i'm just missing something super obvious...

20 replies

SIASapphire - Imagine a framework

•Created by Cyber Grandma on 11/9/2023 in #sapphire-support

Multiple listeners on the same event ?

Hi, I'm trying to define two listeners for the same event (chatInputCommandError) My folder is organised as such: src > listeners > commands > chatInputCommandError.ts chatInputCommandErrorBis.ts I want to handle some different types of errors in these two files. In these two files it's basically like so:

export class UserEvent extends Listener<typeof Events.ChatInputCommandError> {
    public override async run(error: UserError, { interaction }: ChatInputCommandErrorPayload) {
    
        if (Reflect.get(Object(error.context), 'silent')) return;
        if (UserUsageError.isUserUsageError(error)) return; // If it's an error for the other file, return

                 // Do the stuff

    }
}

export class UserEvent extends Listener<typeof Events.ChatInputCommandError> {
    public override async run(error: UserError, { interaction }: ChatInputCommandErrorPayload) {
    
        if (Reflect.get(Object(error.context), 'silent')) return;
        if (UserUsageError.isUserUsageError(error)) return; // If it's an error for the other file, return

                 // Do the stuff

    }
}

The issue is that the second file is never fired on errors, only the first one. What did I miss in the docs to make that work ? Thanks ❤️

4 replies

DTDrizzle Team

•Created by Cyber Grandma on 10/26/2023 in #help

Custom Logging: hide notice messages ?

Hi, I'm using Drizzle ORM with Postgres SQL. Every time I start my project, it does a migration and logs things like this in my console:

{
  severity_local: 'NOTICE',
  severity: 'NOTICE',
  code: '42P07',
  message: 'relation "__drizzle_migrations" already exists, skipping',
  file: 'parse_utilcmd.c',
  line: '206',
  routine: 'transformCreateStmt'
}

{
  severity_local: 'NOTICE',
  severity: 'NOTICE',
  code: '42P07',
  message: 'relation "__drizzle_migrations" already exists, skipping',
  file: 'parse_utilcmd.c',
  line: '206',
  routine: 'transformCreateStmt'
}

I couldn't find a way to intercept these logs and handle them properly. Maybe it's not on Drizzle's side but on the Postgre Driver ? Thanks ❤️

3 replies

SIASapphire - Imagine a framework

•Created by Cyber Grandma on 9/23/2023 in #sapphire-support

Type safe Slash Commands Options ?

Hi there, I can't seem to find a way to add Type Safe options to a Slash command. See Example:

public override registerApplicationCommands(registry: Command.Registry) {
        registry.registerChatInputCommand((builder) =>
            builder //
                .setName(this.name)
                .setDescription(this.description)
                .addStringOption((builder) => {
                    return builder
                        .setName('difficulty')
                        .setDescription('Choose a difficulty')
                        .addChoices({ name: 'Easy', value: 'easy' }, { name: 'Medium', value: 'medium' }, { name: 'Hard', value: 'hard' });
                })
        );
    }

public override registerApplicationCommands(registry: Command.Registry) {
        registry.registerChatInputCommand((builder) =>
            builder //
                .setName(this.name)
                .setDescription(this.description)
                .addStringOption((builder) => {
                    return builder
                        .setName('difficulty')
                        .setDescription('Choose a difficulty')
                        .addChoices({ name: 'Easy', value: 'easy' }, { name: 'Medium', value: 'medium' }, { name: 'Hard', value: 'hard' });
                })
        );
    }

I have a Type called type Difficulty = 'easy' | 'medium' | 'hard' and functions that expect this type. But the interaction.options.getString('difficulty', false) method simply returns string. Which means I need to add as Difficulty to it. And I feel like it defeats a little bit the purpose of TypeScript when I do this. So I was wondering if there was a better way to handle this, or should I just rely on Runtime checking ? Thanks ❤️

2 replies

Gaming

Programming