NotLuksus Posts - Answer Overflow

NotLuksus

Explore posts from servers

SSolidJS TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by NotLuksus on 8/20/2024 in #support

Weird Context Behaviour

I'm currently setting up a tip tap editor with solid and wanted to create a context to pass the editor around the components.

import type { SolidEditor } from "@vrite/tiptap-solid";
import { createContext, useContext } from "solid-js";

const EditorContext = createContext<SolidEditor | null>(null);

export const EditorProvider = EditorContext.Provider;

export function useCurrentEditor() {
  const context = useContext(EditorContext);
  if (!context) {
    throw new Error("useEditor must be used within an EditorProvider");
  }
  return context;
}

import type { SolidEditor } from "@vrite/tiptap-solid";
import { createContext, useContext } from "solid-js";

const EditorContext = createContext<SolidEditor | null>(null);

export const EditorProvider = EditorContext.Provider;

export function useCurrentEditor() {
  const context = useContext(EditorContext);
  if (!context) {
    throw new Error("useEditor must be used within an EditorProvider");
  }
  return context;
}

I have a root component that creates the editor and then multiple sub components that want to consume the editor.

export const EditorRoot: Component<Partial<EditorOptions> & EditorRootProps> = (
  props,
) => {
  const tunnelInstance = tunnel();
  const { children, ...editorProps } = props;

  const editor = useEditor({
    ...props,
    extensions: editorProps.extensions ?? [StarterKit],
  });

  return (
    <EditorProvider value={editor()}>
      <EditorCommandTunnelContext.Provider value={tunnelInstance}>
        <div class={props.className}>
          <SolidEditorContent editor={editor()}>
            {props.children}
          </SolidEditorContent>
        </div>
      </EditorCommandTunnelContext.Provider>
    </EditorProvider>
  );
};

export const EditorRoot: Component<Partial<EditorOptions> & EditorRootProps> = (
  props,
) => {
  const tunnelInstance = tunnel();
  const { children, ...editorProps } = props;

  const editor = useEditor({
    ...props,
    extensions: editorProps.extensions ?? [StarterKit],
  });

  return (
    <EditorProvider value={editor()}>
      <EditorCommandTunnelContext.Provider value={tunnelInstance}>
        <div class={props.className}>
          <SolidEditorContent editor={editor()}>
            {props.children}
          </SolidEditorContent>
        </div>
      </EditorCommandTunnelContext.Provider>
    </EditorProvider>
  );
};

10 replies

TtRPC

•Created by NotLuksus on 8/19/2024 in #❓-help

Equivalent to middleware on createNextApiHandler

Hey, I'm currently migrating our trpc app to the app router and wondered what the equivalent to the middleware property here would be in app router:

import { createNextApiHandler } from '@trpc/server/adapters/next'

import { env } from '~/env.mjs'
import { appRouter } from '~/server/api/routers/app.router'
import { createTRPCContext } from '~/server/api/trpc'
import { initBudgetAsyncLocalStorage } from '~/server/lib/getBudgetCached'

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  middleware: (_res, _req, next) => {
    initBudgetAsyncLocalStorage()
    return next()
  },
  onError:
    env.NODE_ENV === 'development'
      ? ({ path, error }) => {
        console.error(
          `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`
        )
      }
      : undefined,
})

import { createNextApiHandler } from '@trpc/server/adapters/next'

import { env } from '~/env.mjs'
import { appRouter } from '~/server/api/routers/app.router'
import { createTRPCContext } from '~/server/api/trpc'
import { initBudgetAsyncLocalStorage } from '~/server/lib/getBudgetCached'

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  middleware: (_res, _req, next) => {
    initBudgetAsyncLocalStorage()
    return next()
  },
  onError:
    env.NODE_ENV === 'development'
      ? ({ path, error }) => {
        console.error(
          `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`
        )
      }
      : undefined,
})

Thank you!

2 replies

SSolidJS

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

Shared Layouts with SolidStart

I wondered if its possible to have a shared Layout for the routes / and /pricing but not for /dashboard e.g. I have a navbar I want to show only on that routes. From the docs it seems like it's only possible for pages inside folders so /landing/ /landing/pricing having a different layout then /dashboard would work?

3 replies

SSolidJS

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

createAsyncResource and <Suspense>

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

I would expect this to first render Todos Loading... for 2 seconds and then all the todos in a list instead of the Loading However when I open the page, the browser loading indicator is there for 2 seconds and then just the "end result" gets rendered in the browser. What am I doing wrong? Quite new to solid so please excuse if this question is dumb haha Thanks for help!

8 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 12/18/2023 in #questions

Errors while running mutations when deploying CT3A using SST

13 replies

TtRPC

•Created by NotLuksus on 12/18/2023 in #❓-help

Errors while running mutations when deploying CT3A using SST

5 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 12/7/2023 in #questions

Use @monaco-editor/react as a tsx editor

Has anyone figured out how todo this? I can only get any types for my jsx code and no syntax highlighting, which apparently is a general limitation. Would highly appreciate any working code snippets or hint in the right direction. Current code:

            <Editor
                height="60vh"
                defaultLanguage="typescript"
                options={{
                    minimap: {
                        enabled: false,
                    },
                }}
                theme="vs-dark"
                onMount={async (editor, monaco) => {
                    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                        target: monaco.languages.typescript.ScriptTarget.Latest,
                        allowNonTsExtensions: true,
                        moduleResolution:
                            monaco.languages.typescript.ModuleResolutionKind.NodeJs,
                        module: monaco.languages.typescript.ModuleKind.CommonJS,
                        noEmit: true,
                        esModuleInterop: true,
                        jsx: monaco.languages.typescript.JsxEmit.React,
                        reactNamespace: 'React',
                        allowJs: true,
                        typeRoots: ['node_modules/@types'],
                    })

                    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
                        noSemanticValidation: false,
                        noSyntaxValidation: false,
                    })

                    const code = await fetch('https://unpkg.com/@react/types').then(res =>
                        res.text(),
                    )

                    monaco.languages.typescript.typescriptDefaults.addExtraLib(
                        code,
                        `file:///node_modules/@react/types/index.d.ts`,
                    )

                    monaco.editor.createModel(
                        value,
                        'typescript',
                        monaco.Uri.parse('file:///main.tsx'),
                    )
                }}
                value={value}
                onChange={value => {
                    setValue(value ?? '')
                }}
            />

            <Editor
                height="60vh"
                defaultLanguage="typescript"
                options={{
                    minimap: {
                        enabled: false,
                    },
                }}
                theme="vs-dark"
                onMount={async (editor, monaco) => {
                    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                        target: monaco.languages.typescript.ScriptTarget.Latest,
                        allowNonTsExtensions: true,
                        moduleResolution:
                            monaco.languages.typescript.ModuleResolutionKind.NodeJs,
                        module: monaco.languages.typescript.ModuleKind.CommonJS,
                        noEmit: true,
                        esModuleInterop: true,
                        jsx: monaco.languages.typescript.JsxEmit.React,
                        reactNamespace: 'React',
                        allowJs: true,
                        typeRoots: ['node_modules/@types'],
                    })

                    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
                        noSemanticValidation: false,
                        noSyntaxValidation: false,
                    })

                    const code = await fetch('https://unpkg.com/@react/types').then(res =>
                        res.text(),
                    )

                    monaco.languages.typescript.typescriptDefaults.addExtraLib(
                        code,
                        `file:///node_modules/@react/types/index.d.ts`,
                    )

                    monaco.editor.createModel(
                        value,
                        'typescript',
                        monaco.Uri.parse('file:///main.tsx'),
                    )
                }}
                value={value}
                onChange={value => {
                    setValue(value ?? '')
                }}
            />

Thanks for reading!

8 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 10/27/2023 in #questions

Clerk Middleware throws edge runtime error

2 replies

DTDrizzle Team

•Created by NotLuksus on 8/2/2023 in #help

ReferenceError: Cannot access 'addon' before initialization

This is one of the files in ./schema/

import {
    integer,
    primaryKey,
    sqliteTable,
    text,
} from "drizzle-orm/sqlite-core";
import { Entity } from "../abstract/Entity.ts";
import { organisation, rental } from "@/db/index.ts";
import { relations } from "drizzle-orm";

export const addon = sqliteTable("addon", {
    ...Entity,
    name: text("name").notNull(),
    description: text("description").notNull(),
    price: integer("price").notNull(),
    organisationId: text("organisationId").notNull(),
});

export const addonRelations = relations(addon, ({ one, many }) => ({
    organisation: one(organisation, {
        fields: [addon.organisationId],
        references: [organisation.id],
    }),
    addontsToRentals: many(addonsToRentals),
}));

export const addonsToRentals = sqliteTable(
    "addons_to_rentals",
    {
        addonId: text("addonId")
            .notNull()
            .references(() => addon.id),
        rentalId: text("rentalId")
            .notNull()
            .references(() => rental.id),
    },
    t => ({
        pk: primaryKey(t.addonId, t.rentalId),
    }),
);

export const addonsToRentalsRelations = relations(
    addonsToRentals,
    ({ one }) => ({
        addon: one(addon, {
            fields: [addonsToRentals.addonId],
            references: [addon.id],
        }),
        rental: one(rental, {
            fields: [addonsToRentals.rentalId],
            references: [rental.id],
        }),
    }),
);

import {
    integer,
    primaryKey,
    sqliteTable,
    text,
} from "drizzle-orm/sqlite-core";
import { Entity } from "../abstract/Entity.ts";
import { organisation, rental } from "@/db/index.ts";
import { relations } from "drizzle-orm";

export const addon = sqliteTable("addon", {
    ...Entity,
    name: text("name").notNull(),
    description: text("description").notNull(),
    price: integer("price").notNull(),
    organisationId: text("organisationId").notNull(),
});

export const addonRelations = relations(addon, ({ one, many }) => ({
    organisation: one(organisation, {
        fields: [addon.organisationId],
        references: [organisation.id],
    }),
    addontsToRentals: many(addonsToRentals),
}));

export const addonsToRentals = sqliteTable(
    "addons_to_rentals",
    {
        addonId: text("addonId")
            .notNull()
            .references(() => addon.id),
        rentalId: text("rentalId")
            .notNull()
            .references(() => rental.id),
    },
    t => ({
        pk: primaryKey(t.addonId, t.rentalId),
    }),
);

export const addonsToRentalsRelations = relations(
    addonsToRentals,
    ({ one }) => ({
        addon: one(addon, {
            fields: [addonsToRentals.addonId],
            references: [addon.id],
        }),
        rental: one(rental, {
            fields: [addonsToRentals.rentalId],
            references: [rental.id],
        }),
    }),
);

When I run npx drizzle-kit generate:sqlite I get the error:

ReferenceError: Cannot access 'addon' before initialization
    at Object.addon (/Users/notluksus/Work/velocita/db/schema/addon.ts:1:1)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/schema/addon.ts:14:45)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/schema/index.ts:10:45)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/index.ts:16:45)
    at Function.entries (<anonymous>)
    at Object.extractTablesRelationalConfig (/Users/notluksus/Work/velocita/node_modules/drizzle-orm/alias-72a4082c.cjs:3445:39)
    at drizzle (/Users/notluksus/Work/velocita/node_modules/src/better-sqlite3/driver.ts:32:24)
    at Object.<anonymous> (/Users/notluksus/Work/velocita/db/index.ts:6:12)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._compile (/Users/notluksus/Work/velocita/node_modules/drizzle-kit/index.cjs:8604:30)

ReferenceError: Cannot access 'addon' before initialization
    at Object.addon (/Users/notluksus/Work/velocita/db/schema/addon.ts:1:1)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/schema/addon.ts:14:45)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/schema/index.ts:10:45)
    at Object.get [as addon] (/Users/notluksus/Work/velocita/db/index.ts:16:45)
    at Function.entries (<anonymous>)
    at Object.extractTablesRelationalConfig (/Users/notluksus/Work/velocita/node_modules/drizzle-orm/alias-72a4082c.cjs:3445:39)
    at drizzle (/Users/notluksus/Work/velocita/node_modules/src/better-sqlite3/driver.ts:32:24)
    at Object.<anonymous> (/Users/notluksus/Work/velocita/db/index.ts:6:12)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._compile (/Users/notluksus/Work/velocita/node_modules/drizzle-kit/index.cjs:8604:30)

And I don't understand why since the schema doesn't have any self references

32 replies

DTDrizzle Team

•Created by NotLuksus on 8/1/2023 in #help

Migrating prisma schema to drizzle

1 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 6/7/2023 in #questions

Next JS 13 (noob) questions

Thank you, if you actually read threw all this. Would make my day! So I have some question / want to make sure I got everything correct before I start implementing. 1. Fetching data from a db When I just want to fetch simple data from my db I would just write the call directly in the server component right?

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

const ServerComponent = async() => {
  const data = await prisma.users.findMany();
}

So I dont do?

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

const ServerComponent = async() => {
  const data = await axios.get("SOME_API_ROUTE");
}

2.Loading State When I use the loading.tsx file at page level and any of the components lower in the component tree loads data, whatever is in there replaces everything that is inside the page.tsx file. Anything that is inside the layout stays? As an example I have a page called Shop, this shop consists of an infinite scoll of items and some text at the top, this is all done in the page.tsx file. This then is ofc used in the layout file, in the layout there is also a sidenav with filters and a navbar. And in the loading.tsx file there is just some text that states loading. Now when data is loaded everything in page.tsx gets replaced, even my text at the top right? Is it possible to keep that text shown and only replace the actual items with the loading ui? 3. Sharing state? Not sure how to call this, but lets stay with the example from above, I choose a filter in the sidenav, which would need to be a client component as it would need useState, how would I then pass this to the component that actually fetches the data? And how would I then refetch the data and show the loading state again? 4. Fetching more data Regarding pagination and infinite scrolling, I watched the video and there (at least normal pagination) is done using query params. Is that the pattern that should be used in general? Or do you just fetch the initial items on the server and then use something like react-query to do the client side data fetching? In that case there would be some code duplication as the same db call would once be in my react code and in my api route right? Thanks a lot for reading all of this (probably also stupid) questions

3 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 5/29/2023 in #questions

SSR with NextJs layouts (page dir)

So I have a shared layout in my app which looks like this

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

I now need some data in the header of the page which I would prefer to ssr using getServerSideProps, however these props are only passed to the Page and not to the layout. Any ideas on how I can do this?

2 replies

DTDrizzle Team

•Created by NotLuksus on 4/4/2023 in #help

"Extend" tables by other tables

Hey all, first of all great work with drizzle. Haven't had the time to play around with it so far. But just from how I currently use other orms. I have an AbstractEntity "class" which isn't an actual db table, but shares the common column each table should have e.g. a unique id. Basically like a parent class, but for DB tables. Is it possible to do something similar. Without trying: Can I just create an object using the given types/constructors from drizzle and then spread them? I hope that makes sense

2 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 12/21/2022 in #questions

Weird Next Image behaviour

Hey, I'm currently building a gallery that has pagination and the expected behaviour is to display a loading state on the images while they are loading. This works fine on the first page load (https://gyazo.com/b80b2b18a58abd0c089f3ade111a4235), but doesn't when I switch between the pages as seen here: https://gyazo.com/5d1b1e86f116e71f43ee208f02ae8c3f Any idea why that is?

27 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 12/2/2022 in #questions

Smooth Scrolling in Next

Hey, does anyone know a good way or a good library to implement smooth scrolling in React/Next. Talking about the scrolling that if you stop scrolling it continues a bit further down and doesnt stop directly

1 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 11/30/2022 in #questions

Apple AirPod Style Animation on scroll

Hey, Kind of a noob question, but I wondered what the best way to implement something like this animation would be. Example: https://www.youtube.com/watch?v=hY1a94niwpY I did some research and found multiple ways, some use image sequences others mp4s. Just wondered how you guys would go on with this. Thanks 🙂

10 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 11/8/2022 in #questions

Loading UI not interactive

Hey, I played around a bit with loading ui's in next 13 and for some reason links, buttons, etc. can't be clicked during loading. I wondered if that is correct or if im just stupid Thanks

4 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 10/26/2022 in #questions

Error Unsupported Server Component type undefined

Hey, I'm playing around with Next 13 rn and I encountered an issues. I have my root layout.tsx Which only has the default stuff in it + my Navbar Component The page.tsx uses a server side component to fetch data from my database and display it. My navbar component however I want to be a client side component, once i add "use client"; to the file i get the error: Error: Unsupported Server Component type: undefined In my server console it tells me to check the line where I use the Navbar component in the layout. Has anyone faced a similar project or this how its supposed to work?

8 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 10/26/2022 in #questions

Next 13

With next 13 do you just replace getserverside props with the use api and leave Trpc the same for mutations / client side requests etc. ? Not planning on using it right now, just as a general question for the future

7 replies

TTCTheo's Typesafe Cult

•Created by NotLuksus on 9/27/2022 in #questions

Next Router Issues

So I have an issues using next router. In my project I have something similar to /blog/[id].tsx This [id].tsx does a getServerSideProps where it fetches the correspoding information from a database and passes that to the page. Now when I do router.push() from anywhere in the application everything works fine. How ever I have some blog posts that reference others. Now when I do router.push("/blog/1234") while being on /blog/1 for example only the url changes. So the url now is /blog/1234, but the content that is displayed is still the one of /blog/1 A work around is just using window.location.replace, but I'm not really happy with that solution und would prefer using next router. Thanks for your help!

9 replies

Gaming

Programming