anhvu0911 Comments - Answer Overflow

anhvu0911

•Created by anhvu0911 on 1/18/2024 in #support

Use environment variable in defineConfig

For now, I use loadEnv

import { defineConfig } from "@solidjs/start/config";
import { loadEnv } from "vite";

const env = loadEnv("all", process.cwd());

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

import { defineConfig } from "@solidjs/start/config";
import { loadEnv } from "vite";

const env = loadEnv("all", process.cwd());

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

5 replies

SSolidJS

•Created by anhvu0911 on 10/19/2023 in #support

Loading CSS issue (FOUC) on optional parameter

I think it has something to with the way the route with optional parameters load. As a work-around, I can pull the CSS out as global scope (using Tailwind or just declare in root.css).

9 replies

SSolidJS

•Created by anhvu0911 on 10/19/2023 in #support

Loading CSS issue (FOUC) on optional parameter

From the SolidStart template (https://start.solidjs.com/getting-started/project-setup), I add some style in root.css. For components, I use module CSS.

9 replies

SSolidJS

•Created by anhvu0911 on 10/19/2023 in #support

Loading CSS issue (FOUC) on optional parameter

I'm using the default option. https://start.solidjs.com/core-concepts/css-and-styling

9 replies

SSolidJS

•Created by anhvu0911 on 7/2/2023 in #support

Understanding Suspense in SolidStart SSR

One workaround is to useTransition. We startTransition on calling refetchRouteData, and get the pending state.

import { Suspense, useTransition } from "solid-js"
import { A, Title, refetchRouteData, useRouteData } from "solid-start"
import { createServerData$ } from "solid-start/server"
import { sleep } from "~/utils/async"

export function sleep(timeout = 1000) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout)
  })
}

export function routeData() {
  const serverData = createServerData$(
    async () => {
      await sleep(2000)
      return "serverData ok"
    },
    { key: "serverData_ABOUT" }
  )

  return { serverData }
}

export default function About() {
  const { serverData } = useRouteData()
  const [pending, startTransition] = useTransition()

  return (
    <main>
      <Title>About</Title>
      <h1>About!</h1>
      <p>
        <A href="/">HOME</A>
        <br />
        <A href="/about">ABOUT</A>
      </p>

      <Suspense fallback="loading serverData()...">
        <div>
          pending: {pending() ? "true" : "false"}
          <br />
          serverData: {serverData()}
          <button onClick={() => startTransition(() => refetchRouteData("serverData_ABOUT"))}>
            Refetch serverData
          </button>
        </div>
      </Suspense>
    </main>
  )
}

import { Suspense, useTransition } from "solid-js"
import { A, Title, refetchRouteData, useRouteData } from "solid-start"
import { createServerData$ } from "solid-start/server"
import { sleep } from "~/utils/async"

export function sleep(timeout = 1000) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout)
  })
}

export function routeData() {
  const serverData = createServerData$(
    async () => {
      await sleep(2000)
      return "serverData ok"
    },
    { key: "serverData_ABOUT" }
  )

  return { serverData }
}

export default function About() {
  const { serverData } = useRouteData()
  const [pending, startTransition] = useTransition()

  return (
    <main>
      <Title>About</Title>
      <h1>About!</h1>
      <p>
        <A href="/">HOME</A>
        <br />
        <A href="/about">ABOUT</A>
      </p>

      <Suspense fallback="loading serverData()...">
        <div>
          pending: {pending() ? "true" : "false"}
          <br />
          serverData: {serverData()}
          <button onClick={() => startTransition(() => refetchRouteData("serverData_ABOUT"))}>
            Refetch serverData
          </button>
        </div>
      </Suspense>
    </main>
  )
}

3 replies

SSolidJS

•Created by anhvu0911 on 7/2/2023 in #support

Understanding Suspense in SolidStart SSR

For 2), Looking at the source code of refetchRouteData https://github.com/solidjs/solid-start/blob/8cfe543c18c2ee2aed30478da9893c37ec8be7f7/packages/start/data/createRouteData.tsx#L139 It uses startTransition under the hood, so it will not trigger callback of suspense. If I modify the code to not use startTransition, then the fallback is displayed as expected

export function refetchRouteData(key?: string | any[] | void) {
  if (isServer) throw new Error("Cannot refetch route data on the server.");

  for (let refetch of resources) refetch(key);
}

export function refetchRouteData(key?: string | any[] | void) {
  if (isServer) throw new Error("Cannot refetch route data on the server.");

  for (let refetch of resources) refetch(key);
}

It seems that the code is introduced in https://github.com/solidjs/solid-start/issues/304 The question is how can we get the pending state, while not triggering Suspense?

3 replies

SSolidJS

•Created by anhvu0911 on 7/1/2023 in #support

How to deploy unplugin-icons on production?

I tried with the dockerfile in https://stackoverflow.com/questions/74222441/how-to-yarn-build-on-dockerfile, where it yarn build as dev first, then remove the node_modules and reinstall as production. It is successfully deployed to the server (I'm using Gitlab CI/CD), but still got the same error on server.

2 replies

SSolidJS

•Created by anhvu0911 on 5/30/2023 in #support

Reactivity with normal functions

Finally, I get createMemo vs normal function From the article, section 4 - use less computations https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37#4-use-less-computations For simple calculation, use createMemo() will always be called when it is first declared. Declare with a normal function is just a declaration, it will not be triggered until it is used. For costly calculation, a normal function would be called every time it is used, while createMemo() caches the result, so if the signal E.g. https://playground.solidjs.com/anonymous/423f5796-c163-4545-9a8b-b1feac43e972 assume double() is a costly operation. In JSX, we use the value twice, but only one console.log for createMemo is printed

5 replies

SSolidJS

•Created by anhvu0911 on 6/15/2023 in #support

Using CSR mode, got asset error when there is a new build

Thanks, I tried adding these and it worked

<Meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
<Meta http-equiv="Pragma" content="no-cache" />

<Meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
<Meta http-equiv="Pragma" content="no-cache" />

Ref: https://stackoverflow.com/questions/34851243/how-to-make-index-html-not-to-cache-when-the-site-contents-are-changes-in-angula Now, let's see what those values mean.

7 replies

SSolidJS

•Created by anhvu0911 on 3/9/2023 in #support

Questions on the `owner` of using children() helper inside a context

Got it! I tried wrapping inside a component and it works https://playground.solidjs.com/anonymous/d4218a57-cd00-438d-a2eb-5641c6a52ae2 Thanks for the advice

4 replies

Gaming

Programming