Kooki Kodes
Kooki Kodes
PostsComments
SSolidJS
Created by Kooki Kodes on 11/19/2024 in #support
Weird Vinxi dev issue
This is more or less the error it throws. 
[vite] Internal server error:
./node_modules/.vinxi/client/deps/chunk-RLWJ43YW.js: Unexpected token, expected "=>" (2110:10)

  2108 |     resolve(exitDie(e));
  2109 |   }
> 2110 | }) : async((resolve) => {
       |           ^
  2111 |   try {
  2112 |     ;
  2113 |     evaluate().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
  Plugin: solid
  File: ./node_modules/.vinxi/client/deps/chunk-RLWJ43YW.js?v=5a60b639:1182:11
[vite] Internal server error:
./node_modules/.vinxi/client/deps/chunk-RLWJ43YW.js: Unexpected token, expected "=>" (2110:10)

  2108 |     resolve(exitDie(e));
  2109 |   }
> 2110 | }) : async((resolve) => {
       |           ^
  2111 |   try {
  2112 |     ;
  2113 |     evaluate().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
  Plugin: solid
  File: ./node_modules/.vinxi/client/deps/chunk-RLWJ43YW.js?v=5a60b639:1182:11
3 replies
SSolidJS
Created by Kooki Kodes on 11/19/2024 in #support
Weird Vinxi dev issue
Using the: "getOperationName" function anywhere within my code breaks vinxi. 
export type ExtractOperationName<T extends string> =
  T extends `${infer _}${"query" | "mutation"} ${infer Name}(${infer _}) {${infer _}`
    ? Name
    : T extends `${infer _}${"query" | "mutation"} ${infer Name} {${infer _}`
      ? Name
      : never;

export function getOperationName<const Operation extends string>(
  operation: Operation,
): ExtractOperationName<Operation> {
  const match = operation.match(/\b(query|mutation)\b\s+(\w+)/);
  if (!match) {
    throw new Error(`Operation name not found in operation: ${operation}`);
  }
  return match[2] as ExtractOperationName<Operation>;
}
export type ExtractOperationName<T extends string> =
  T extends `${infer _}${"query" | "mutation"} ${infer Name}(${infer _}) {${infer _}`
    ? Name
    : T extends `${infer _}${"query" | "mutation"} ${infer Name} {${infer _}`
      ? Name
      : never;

export function getOperationName<const Operation extends string>(
  operation: Operation,
): ExtractOperationName<Operation> {
  const match = operation.match(/\b(query|mutation)\b\s+(\w+)/);
  if (!match) {
    throw new Error(`Operation name not found in operation: ${operation}`);
  }
  return match[2] as ExtractOperationName<Operation>;
}
3 replies
SSolidJS
Created by Đăng Tú on 10/19/2024 in #support
Any tip/checklist to debug Solid components when it refuses to react the signal changed?
Well because there is no virtual dom, there's not really an easy solution per say. Maybe it'd help to look at the source code of the <Show /> component so you could get an idea of how it's properly done. You'd most likely end up with a similar solution. You'd have all of you're logic within a createMemo so you could subscribe to changes and then just return that from your component.
9 replies
SSolidJS
Created by Đăng Tú on 10/19/2024 in #support
Any tip/checklist to debug Solid components when it refuses to react the signal changed?
Yeah, there's also the: <Switch/> <Match/> components if you have several conditions. https://docs.solidjs.com/reference/components/switch-and-match
9 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
That writes to a virtual vite file which is then injected in my create middleware file.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
I moved to using a sort of codegen that auto injects the variable on build.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
I can't see why accessing process.env from a middleware function would break server functions.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
I haven't, but I haven't had problems with it previously. As in the package it used to use import.meta.env for all of the environment variables. But realized that there are some that needed to remain private and not exposed to the client. Hence I use process.env for private variables.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
Yeah, I have code that throws an error if it doesn't exist, I also console logged the value before attempting to use it and it was logged.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
Hey @Madaxen86 , I'm just now seeing this, this was just running on a NodeJs server locally. But it was running the fully built app.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
I don't know why this would slow it down, anyone have any ideas?
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
Not sure why, but the issue has nothing to do with the above code... You see I have a middleware that needs to use the process.env and when I build and start the server locally with the added prefixed env's causes the server functions to be significantly slower.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
Yeah... I'm stuck on this one... I've moved things around, tried changing things here and there and still can't figure this one out.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
This works perfectly fine in dev btw.
16 replies
SSolidJS
Created by Kooki Kodes on 10/11/2024 in #support
Super slow _server function
Well this is certainly weird. I'm not too sure why it would work this way... But the following code makes the whole server take FOREVER to run. This code is being imported from an external library. 
/client.ts
import { getRequestEvent } from "solid-js/web";

export function getStorefrontClient() {
  const event = getRequestEvent();
  if (!event?.locals.storefront) return null;
  return event?.locals!.storefront as ReturnType<
    typeof createStorefrontClient<StorefrontQueries, StorefrontMutations>
  >;
}

export const storefront = {
  query: async <const Query extends string>(
    query: Query,
    variables?: _createStorefrontClient.OperationVariables<
      StorefrontQueries,
      Query
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.query<Query>(query, { variables });
  },
  mutate: async <const Mutation extends string>(
    mutation: Mutation,
    variables: _createStorefrontClient.OperationVariables<
      StorefrontMutations,
      Mutation
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.mutate<Mutation>(mutation, { variables });
  },
};

// query.ts
export const createQueryCache = <Query extends string>(query: Query) => {
  return cache(
    async (
      query: Query,
      variables?: createStorefrontClient.OperationVariables<
        StorefrontQueries,
        Query
      >
    ) => {
      return storefront.query<Query>(query, variables);
    },
    getOperationName(query)
  );
};
/client.ts
import { getRequestEvent } from "solid-js/web";

export function getStorefrontClient() {
  const event = getRequestEvent();
  if (!event?.locals.storefront) return null;
  return event?.locals!.storefront as ReturnType<
    typeof createStorefrontClient<StorefrontQueries, StorefrontMutations>
  >;
}

export const storefront = {
  query: async <const Query extends string>(
    query: Query,
    variables?: _createStorefrontClient.OperationVariables<
      StorefrontQueries,
      Query
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.query<Query>(query, { variables });
  },
  mutate: async <const Mutation extends string>(
    mutation: Mutation,
    variables: _createStorefrontClient.OperationVariables<
      StorefrontMutations,
      Mutation
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.mutate<Mutation>(mutation, { variables });
  },
};

// query.ts
export const createQueryCache = <Query extends string>(query: Query) => {
  return cache(
    async (
      query: Query,
      variables?: createStorefrontClient.OperationVariables<
        StorefrontQueries,
        Query
      >
    ) => {
      return storefront.query<Query>(query, variables);
    },
    getOperationName(query)
  );
};
This is what I'm doing within the actual app: 
/routes/index.tsx
import { storefront } from "@solidifront/start/storefront";
import { shopQuery } from "~/graphql/storefront/queries";
import { createAsync } from "@solidjs/router";

export const route = {
  async preload() {
    await storefront.query(shopQuery);
  },
};

export default function Home() {
  const shopData = createAsync(() => storefront.query(shopQuery));

  return (
    <main>
      <h1>Hello {shopData()?.data?.shop.name}</h1>
    </main>
  );
}
/routes/index.tsx
import { storefront } from "@solidifront/start/storefront";
import { shopQuery } from "~/graphql/storefront/queries";
import { createAsync } from "@solidjs/router";

export const route = {
  async preload() {
    await storefront.query(shopQuery);
  },
};

export default function Home() {
  const shopData = createAsync(() => storefront.query(shopQuery));

  return (
    <main>
      <h1>Hello {shopData()?.data?.shop.name}</h1>
    </main>
  );
}
16 replies
SSolidJS
Created by Kooki Kodes on 10/9/2024 in #support
Weird solid start behavior
Ahhh, okay, so you can't have vinxi/http imports in the same files that you have client facing code. Isn't this something that could be fixed during build? All I'm doing is getting cookies from a server function.
6 replies
SSolidJS
Created by Kooki Kodes on 10/9/2024 in #support
Weird solid start behavior
Yeah I've summed it up to some weird way that it's handling my actions, it's importing stuff it shouldn't from the server and I'm not too sure why.
6 replies
SSolidJS
Created by Kooki Kodes on 10/9/2024 in #support
Weird solid start behavior
file: ./wedontknowyet/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vinxi/runtime/http.js:71:9

69: import { getContext as gContext } from "unctx";
70:
71: import { AsyncLocalStorage } from "node:async_hooks";
             ^
72:
73: /**
file: ./wedontknowyet/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vinxi/runtime/http.js:71:9

69: import { getContext as gContext } from "unctx";
70:
71: import { AsyncLocalStorage } from "node:async_hooks";
             ^
72:
73: /**
6 replies
SSolidJS
Created by Kooki Kodes on 10/9/2024 in #support
Weird solid start behavior
So maybe that's the root of the issue. I'm not sure what's happening, the dev server is working just fine, but when I try to build I get the following error:
6 replies
SSolidJS
Created by Kooki Kodes on 10/9/2024 in #support
Weird solid start behavior
I'm not sure I understand how solid router actions work. The following code is causing a hard full page refresh. 
// src/hooks/createUserTheme.ts
import { createAsync, cache, action, json, reload } from "@solidjs/router";
import { createEffect, onCleanup } from "solid-js";
import { getCookie, setCookie } from "vinxi/http";

type Theme = "light" | "dark";

const DEFAULT: Theme = "dark",
  THEME_KEY = "user-theme";

export const getThemeCookie = () => (getCookie(THEME_KEY) || "dark") as Theme;

export const getTheme = cache(async () => {
  "use server";
  return getThemeCookie();
}, THEME_KEY);

export const updateTheme = action(async (formData: FormData) => {
  "use server";
  const theme = formData.get(THEME_KEY)?.toString() || DEFAULT;
  setCookie(THEME_KEY, theme);
  return reload({ status: 200, revalidate: [THEME_KEY] });
}, THEME_KEY);

export const createUserTheme = () => {
  const theme = createAsync(() => getTheme());

  createEffect(() => {
    const t = theme();
    if (!t) return;
    document.documentElement.classList.add(t);
    onCleanup(() => {
      document.documentElement.classList.remove(t);
    });
  });

  return [theme, updateTheme] as const;
};

// src/components/ThemeToggle.tsx
import { createUserTheme, getTheme } from "~/hooks/createUserTheme";

export default function ThemeToggle() {
  const [theme, updateTheme] = createUserTheme();

  return (
    <form action={updateTheme} method="post">
      <input
        type="hidden"
        name={getTheme.key}
        value={theme() === "light" ? "dark" : "light"}
      />
      <button class="dark:bg-white bg-black text-white dark:text-black py-1.5 px-3 rounded-xl font-monument-regular ">
        Toggle Theme
      </button>
    </form>
  );
}
// src/hooks/createUserTheme.ts
import { createAsync, cache, action, json, reload } from "@solidjs/router";
import { createEffect, onCleanup } from "solid-js";
import { getCookie, setCookie } from "vinxi/http";

type Theme = "light" | "dark";

const DEFAULT: Theme = "dark",
  THEME_KEY = "user-theme";

export const getThemeCookie = () => (getCookie(THEME_KEY) || "dark") as Theme;

export const getTheme = cache(async () => {
  "use server";
  return getThemeCookie();
}, THEME_KEY);

export const updateTheme = action(async (formData: FormData) => {
  "use server";
  const theme = formData.get(THEME_KEY)?.toString() || DEFAULT;
  setCookie(THEME_KEY, theme);
  return reload({ status: 200, revalidate: [THEME_KEY] });
}, THEME_KEY);

export const createUserTheme = () => {
  const theme = createAsync(() => getTheme());

  createEffect(() => {
    const t = theme();
    if (!t) return;
    document.documentElement.classList.add(t);
    onCleanup(() => {
      document.documentElement.classList.remove(t);
    });
  });

  return [theme, updateTheme] as const;
};

// src/components/ThemeToggle.tsx
import { createUserTheme, getTheme } from "~/hooks/createUserTheme";

export default function ThemeToggle() {
  const [theme, updateTheme] = createUserTheme();

  return (
    <form action={updateTheme} method="post">
      <input
        type="hidden"
        name={getTheme.key}
        value={theme() === "light" ? "dark" : "light"}
      />
      <button class="dark:bg-white bg-black text-white dark:text-black py-1.5 px-3 rounded-xl font-monument-regular ">
        Toggle Theme
      </button>
    </form>
  );
}
I'm also noticing none of my reactivity is work 😅
6 replies