all_is_source_energy Posts - Answer Overflow

all_is_source_energy

Posts Comments

SSolidJS

•Created by all_is_source_energy on 4/16/2025 in #support

Multi Layout Children

Is it possible for a page to set some data to go into different layout locations, like named slots for children please?

2 replies

SSolidJS

•Created by all_is_source_energy on 4/16/2025 in #support

Getting Page Title

If this is in a route: <Title>Example 🧘‍♀️</Title> Is there anyway to get that information in the Layout of that route please? I figured I could hack like an onMount + js thing but wondering if server side in the layout i could know this info w/ Solid's api please?

3 replies

SSolidJS

•Created by all_is_source_energy on 4/11/2025 in #support

Prod Environment Variables Please

I'm maybe just doing something silly but when i do an npm run dev i can access env variables but not after an npm run build, i made a simple reproduction: - npm create solid => basic => ts app.config.ts:

import { defineConfig } from '@solidjs/start/config'

export default defineConfig({
  middleware: './src/middleware.ts',
})

import { defineConfig } from '@solidjs/start/config'

export default defineConfig({
  middleware: './src/middleware.ts',
})

middleware.ts:

import { createMiddleware } from '@solidjs/start/middleware'

export default createMiddleware({
  async onRequest () {
    console.log('process.env.test', process.env.test)
  },
})

import { createMiddleware } from '@solidjs/start/middleware'

export default createMiddleware({
  async onRequest () {
    console.log('process.env.test', process.env.test)
  },
})

.env: test=aloha - npm run dev refresh app, see log of env variable - npm run build and then npm run start, refresh app, env variable log is undefined 😅

5 replies

SSolidJS

•Created by all_is_source_energy on 3/31/2025 in #support

Server code in client bundle

2 replies

SSolidJS

•Created by all_is_source_energy on 3/30/2025 in #support

API w/o File Routes Component Possible?!

Are there any ways to create api routes w/o using the file routes component please? Like a way to specify a url path in the code and not via the file name please? Thanks!

6 replies

SSolidJS

•Created by all_is_source_energy on 3/28/2025 in #support

Layouts w/ Component Rendering please?!

How may we group routes w/o a common path while using component rendering please? Below I tried not putting a path for the layout components but when I test this the app is a white screen & the server terminal says 'No route matched for preloading js assets". If I add a path for each layout this works but then the url has to be example: /guest/sign-in but the goal is for the url to be /sign-in and for the layout to be Guest w/ component rendering please!

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

Btw I also tried: <Route path="/(guest)" component={Guest}> This matches the url /(guest)/sign-in so does not hide in the url like in File routing

6 replies

SSolidJS

•Created by all_is_source_energy on 3/27/2025 in #support

onCleanup is running on server

When I put client side code in an onCleanup & then refresh the page the server crashes b/c it's trying to run the client side code on the server, super simple repo is: 1. npm create solid > Solid Start > Basic > TS 2. swap index.tsx for this: import { onCleanup } from 'solid-js' export default () => { onCleanup(() => { alert('index cleanup') })
return <> <main> <h1>Index!</h1> </main> </> } Refresh index page & server crashes w/ error: /Users/chris/solid/cleanup/src/routes/index.tsx?pick=default&pick=$css:9 alert("index cleanup"); ^ ReferenceError: alert is not defined at Array.eval (/Users/chris/solid/cleanup/src/routes/index.tsx?pick=default&pick=$css:9:5) at cleanNode (file:///Users/chris/solid/cleanup/node_modules/solid-js/dist/server.js:140:68) ... Node.js v22.4.0

3 replies

SSolidJS

•Created by all_is_source_energy on 3/26/2025 in #support

Current User Items Cache

- I have a page in my solid start project called /contracts - My goal is to get the current users contracts on this page - My original solutions was like this in the contracts.tsx page: const contracts = query(() => { "use server"; // call /api route // api route has middle wear that populates userId on event.locals // api route gets the current users contracts // return current users contracts }, "contracts"); But then i saw this in the docs: https://docs.solidjs.com/solid-start/reference/server/use-server const getUser = query((id) => { "use server"; return db.getUser(id); }, "users"); - And now I'm wondering, w/ my current implementation, is the server going to cache contracts for multiple users under the same "contracts" key? - If so what's the best practice way to solve this please? I would prefer not to send an id to query b/c that seems less secure - Unless I send an id like the example: query((id)) - And then also verify the id on the server maybe? Thanks!

10 replies

SSolidJS

•Created by all_is_source_energy on 3/12/2025 in #support

Different routes using different layouts, while doing file based routing please?

For example route /a uses layout ./src/lib/layouts/One.tsx and routes /b and /c use layout /Two.tsx I'd rather not just wrap the layout component in the route b/c then if we swap between pages that use the same layout state is lost Thanks!

13 replies

Gaming

Programming