Some Call Me Tim Comments - Answer Overflow

yeeeeah, that's gonna be a pain in the ass afaik. Just use a context, or throw a ?loginopen=true as a param on the end of the url that you can read globally and be done with it 🙂

15 replies

SSolidJS

•Created by eponymous on 5/13/2024 in #support

Create route which opens a modal

cool. So just so I'm clear on what you're wanting: if someone goes to mydomain.com/login, it shows a regular login page, but if someone goes to mydomain.com/whatever, and clicks a login button, you want the browser to display mydomain.com/login, but -not- navigate to the actual login page, but instead display the login overlay?

15 replies

SSolidJS

•Created by eponymous on 5/13/2024 in #support

Create route which opens a modal

My 2c is that a route is a route. If I'm reading your request right, you want to shoehorn functionality that should be a simple boolean value in a global context into the router logic. i.e. example.com/login should go to a login page, having that in the url bar when on example.com/pricing would navigate to example.com/login, not keep the user on the pricing page with a login popup. I have this exact functionality with a contact form and no messing around with routes. Store a 'loginFormOpen' boolean in a globally available context, and have the login form hidden via <Show> somewhere pretty high up the tree. Now, from anywhere in your site, you can flick that boolean to 'true' and your login screen can magicaly overlay any content that is currently on screen. Add Solid Transition Group for some sparkle.

15 replies

SSolidJS

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

If context works better for your mental model, go nuts

27 replies

SSolidJS

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

yup, could do a context too, but personally for something like tabs/popups or whatever, it'd be just more mental overhead with the 'oh did this register', 'did this unload' etc. I'd rather just have it verbose like above where the chlid is tied to the parent. The joys of flexibility 🙂

27 replies

SSolidJS

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

Some of those rub me the wrong way, lots of footguns. For one, there's no way to enforce the type of children. Like the tabs for example, I'd have the <Tab> component render its own content. Maybe it's just user preference though. One thing I do like is a setup i found ages ago... here's a snippet from a popup menu I made:

              <PopupMenu>
                <Switch>
                  <Match when={!somevariable}>
                    <Show when={!props.disableDuplicate}>
                      <PopupMenu.MenuItem onClick={handleDuplicateActionClick}>
                      Duplicate
                      </PopupMenu.MenuItem>
                    </Show>

                    <PopupMenu.MenuItem onClick={handleDeleteActionClick}>
                      Delete
                    </SBPopupMenu.MenuItem>
                  </Match>

                  <Match when={somevariable}>
                    <PopupMenu.MenuItem onClick={handleCloneActionClick}>
                     Clone
                    </SBPopupMenu.MenuItem>
                  </Match>
                </Switch>
              </PopupMenu>

              <PopupMenu>
                <Switch>
                  <Match when={!somevariable}>
                    <Show when={!props.disableDuplicate}>
                      <PopupMenu.MenuItem onClick={handleDuplicateActionClick}>
                      Duplicate
                      </PopupMenu.MenuItem>
                    </Show>

                    <PopupMenu.MenuItem onClick={handleDeleteActionClick}>
                      Delete
                    </SBPopupMenu.MenuItem>
                  </Match>

                  <Match when={somevariable}>
                    <PopupMenu.MenuItem onClick={handleCloneActionClick}>
                     Clone
                    </SBPopupMenu.MenuItem>
                  </Match>
                </Switch>
              </PopupMenu>

All it takes is a PopupMenu.MenuItem = PopupMenuItem; at the bottom of the PopupMenu.tsx file.

27 replies

SSolidJS

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

I'm actually surprised that works at all, I wouldn't have thought that <For> would be a valid direct chid of <Switch>

27 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

Sooo, the actual issue was that on the redirect from Component B back to Component A, the routeData function is called using an internal _server url, which didn't have access to use useLocation(). I also found getRequestEvent();, so I was able to find out what caused the issue with useLocation(), but also able to get rid of useLocation() 🙂

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

right, that's what I was worried about. Okay, url path check for every single request it is.

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

docs look like it's only a global thing, and I don't really want to do a url path check for every single request?

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

next question is how can I only run middleware for 1 route block? i.e. I've got 100 routes, but only need it to run on this block of 3 which are nested in a ViewersRoute component .

  <Route path="/" component={ViewersRoute} >
    <Route path="/tg/:roomId" component={ViewerRoute} />
    <Route path="/v/:slug" component={ViewerRoute} />
    <Route path="/v/:slug/abc" component={TextViewer} />
  </Route>

  <Route path="/" component={ViewersRoute} >
    <Route path="/tg/:roomId" component={ViewerRoute} />
    <Route path="/v/:slug" component={ViewerRoute} />
    <Route path="/v/:slug/abc" component={TextViewer} />
  </Route>

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

yeah

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

Regardless, it looks like I need to do some middleware for this one route.

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

right, but doesn't that halt everything until the server code is all executed/finalized?

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

in the page that dies, I am deferring it via

const routeData = createAsync(() => getRouteData(), { deferStream: true });

So I was assuming it'd 'wait'.

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

nope 🙂 Removed cache() altogether and still get the same thing.

35 replies

SSolidJS

•Created by Some Call Me Tim on 5/3/2024 in #support

Router primitives can be only used in side a Route.

but a great idea, and something to look into...

35 replies

Gaming

Programming