Vexcited Posts - Answer Overflow

Vexcited

•Created by Vexcited on 8/23/2024 in #support

using id on route and named route breaks

Hello ! I experience an issue with my router where the /:id/@me/ route gets ignored and only the /:id/:guild_id/ route gets mounted when I navigate to http://localhost:1420/123456789123456789/@me (as example)

<Router>
  <Route path="/" component={AuthView} />
  <Route path="/:id" component={AccountLayout}>
    <Route path="/@me" component={PrivateDMLayout}>
      <Route path="/" component={() => <p>Hello World</p>} />
      <Route path="/friends" component={FriendsView} />
      <Route path="/:channel_id" component={ChannelView} />
    </Route>

    <Route path="/:guild_id" component={GuildLayout}>
      <Route path="/:channel_id" component={ChannelView} />
      <Route path="/" component={Account404} />
    </Route>
  </Route>
</Router>

<Router>
  <Route path="/" component={AuthView} />
  <Route path="/:id" component={AccountLayout}>
    <Route path="/@me" component={PrivateDMLayout}>
      <Route path="/" component={() => <p>Hello World</p>} />
      <Route path="/friends" component={FriendsView} />
      <Route path="/:channel_id" component={ChannelView} />
    </Route>

    <Route path="/:guild_id" component={GuildLayout}>
      <Route path="/:channel_id" component={ChannelView} />
      <Route path="/" component={Account404} />
    </Route>
  </Route>
</Router>

Any idea why it doesn't work ? I couldn't find anything in the documentation related to my case and I'm kinda lost to be honest. Thanks you in advance !

17 replies

SSolidJS

•Created by Vexcited on 4/6/2024 in #support

Is it bad to have A LOT of `createEffect` in a single component ?

Hello ! In my use case, I'm doing components to bridge classes from JavaFX to SolidJS. The classes are implemented in a way that you have a setX and getX for each property. If you setX multiple times the same object, it will reassign it and re-run everything on the JavaFX side. That's why I don't want to do everything in a single createEffect, to prevent computations in case the object assigned to X property is the same as before. For now, my code looks like this :

const StageContext: FlowComponent<{
  instance: Stage
  title: string
  show?: boolean
}> = (props) => {
  createEffect(() => {
    if (props.show) props.instance.show();
    else props.instance.hide();
  })

  createEffect(() => props.instance.setTitle(props.title));

  createEffect(() => {
    console.info("set children to scene");
    if (props.children instanceof Scene) props.instance.setScene(props.children);
    else throw new Error("The children of a StageContext must be a Scene instance.");
  });

  return props.instance;
};

const StageContext: FlowComponent<{
  instance: Stage
  title: string
  show?: boolean
}> = (props) => {
  createEffect(() => {
    if (props.show) props.instance.show();
    else props.instance.hide();
  })

  createEffect(() => props.instance.setTitle(props.title));

  createEffect(() => {
    console.info("set children to scene");
    if (props.children instanceof Scene) props.instance.setScene(props.children);
    else throw new Error("The children of a StageContext must be a Scene instance.");
  });

  return props.instance;
};

Here, there's only three properties so three createEffect, but you can easily guess how many createEffect there'll be for more bigger components with more than 10 different properties. So is it bad to have a lot of createEffect in a component ? Are there any alternative to do this that also prevents running twice a computation that was already done ?

25 replies

SSolidJS

•Created by Vexcited on 2/5/2024 in #support

SolidStart Vercel deployment issue with CSR

Hi ! When I go to the website page, it just downloads the HTML with no file extension, nothing is shown in the browser. When I go to /__nitro though, I can see stuff but nothing shows up too, probably because I don't handle 404 yet. Here's my vite configuration :

export default defineConfig({
  start: {
    ssr: false,
    server: { preset: "vercel" }
  }
})

export default defineConfig({
  start: {
    ssr: false,
    server: { preset: "vercel" }
  }
})

And you can even find the repository here https://github.com/Vexcited/Signatures-IUT-Limoges/tree/main/packages/website Is there an issue with my configuration or another issue with CSR ?

13 replies

SSolidJS

•Created by Vexcited on 12/14/2023 in #support

Is there a better way to make authenticated routes ?

3 replies

SSolidJS

•Created by Vexcited on 6/13/2023 in #support

`@solidjs/router` doesn't seem to work with Capacitor

In my index.tsx, I defined the routing like this

<Router>
  <Routes>
    <Route path="/" component={MainAppPage} />
    <Route path="/link" component={LinkPage} />
    <Route path="*" element={<p>not found</p>} />
  </Routes>
</Router>

<Router>
  <Routes>
    <Route path="/" component={MainAppPage} />
    <Route path="/link" component={LinkPage} />
    <Route path="*" element={<p>not found</p>} />
  </Routes>
</Router>

In my MainAppPage, I have a <A href="/link">Link account</A> When clicking on it, nothing happens on the built app through Android Studio, I don't even have an error in the console, nothing. When checking in the browser on the PC, it works though. Any idea on what's happening with Capacitor? did a showcase video in case my explanation isn't good enough 😭

4 replies

SSolidJS

•Created by Vexcited on 5/1/2023 in #support

Title of page not updating

So the thing is that I use SolidStart with CSR mode (w/index.html so vite-plugin-pwa detects it) On development, Title is working. On production, it doesn't. It always keep the index.html title and never updates it, probably because when looking at the DevTools, I can see 2 <title> elements - the one from my index.html and the one from SolidStart. Any work around?

12 replies

SSolidJS

•Created by Vexcited on 4/23/2023 in #support

Any help for using Framework7 with SolidJS?

Hey! I'm trying to make a Capacitor app using SolidJS and want to use Framework7 (https://framework7.io/docs) with it. I want to be able to use Solid components, routes, ... inside Framework7. I'm currently stuck with their router. I was able to render a Solid component using

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);

But I don't really know how I can switch routes or even make them work 😂 I use the core library directly and there's not a lot of documentation when you're not using their components/routing solutions so I wonder if someone here could help me :p Thanks!

3 replies

SSolidJS

•Created by Vexcited on 1/22/2023 in #support

NativeScript + SolidJS

What's the current state on this? I found this library https://github.com/nativescript-community/solid-js but not sure if that's production ready or not so if anyone have more informations about it, would be cool to know.

20 replies

SSolidJS

•Created by Vexcited on 1/14/2023 in #support

How can we lazy load route data using @solidjs/router ?

When using this pattern:

import UserData from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));

// In the Route definition
<Route path="/users/:id" component={User} data={UserData} />;

import UserData from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));

// In the Route definition
<Route path="/users/:id" component={User} data={UserData} />;

Here, the User component is lazy loaded but what about the UserData ? Is there a way to do that?

28 replies

SSolidJS

•Created by Vexcited on 12/3/2022 in #support

Rate limit SolidStart API routes

Hello! I was wondering how I can implement an API rate limit solution with the SolidStart API routes.

13 replies

Gaming

Programming