Liquido
Liquido
PostsComments
SSolidJS
Created by Hussein on 7/6/2024 in #support
is this a good pattern?
I have a very similar code where I check if a user is logged in. If user is not logged in, I just throw redirect('/signin') in my server function and it works great
32 replies
SSolidJS
Created by Liquido on 7/6/2024 in #support
How to store JSX element in a signal and render it from other elements
@Madaxen86 This library is promising for the UI aspect of it but I still want to achieve this centralized dialog system (I can use Kobalte for UI aspect of it for example).
6 replies
SSolidJS
Created by Liquido on 7/6/2024 in #support
How to store JSX element in a signal and render it from other elements
@bigmistqke 🌈 I also tested this code in a sandbox to test it out and it looks like the error is not about the Solid but about Solid Start and SSR. I also checked the code of solid-icons library and it looks like there is an issue with the way the SVGs are rendered in that library with SSR. I will need to investigate that.
6 replies
SSolidJS
Created by Liquido on 7/5/2024 in #support
How to make range input element reactive
Nevermind, I forgot to set the step property :/
3 replies
SSolidJS
Created by Liquido on 7/4/2024 in #support
How to pass props to context reactively?
I actually did go through the tutorial before I started my project with SolidJS but maybe it is time to revisit it again 🙂
10 replies
SSolidJS
Created by Liquido on 7/4/2024 in #support
How to pass props to context reactively?
I come from a lot of React work and still trying to get used to the new paradigm. Does it mean that when I call the useContext, even if the context value changes (new prop is passed), the child component does not get updated? Do I understand it correctly that, there is no concept of component updates in SolidJS, just updates happening within "tracked scopes" (in my case that tracked scopes are the JSX at top level, where I render FormGroup; and the JSX of the TestComponent)?
10 replies
SSolidJS
Created by Liquido on 6/27/2024 in #support
How to use useSubmission with server action passed to form?
Makes sense thank you!
3 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
I actually did the same thing but instead of action, I used cache and createAsync. Btw my hunch about the mediakit auth modifying the auth options was correct. The SolidAuth function that is provided by mediakit mutates the config object (i.e auth options) on handler, signIn, and signOut: - https://github.com/solidjs-community/mediakit/blob/main/packages/auth/solid/src/index.ts#L27 - https://github.com/solidjs-community/mediakit/blob/main/packages/auth/solid/src/utils.ts#L76
10 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
Now that I am thinking about it, is it possible that the mediakit auth library mutates the auth options when the routes are created, which works during cache because routes are initialized and the async op is triggered by component. But that does not happen for server actions because they dont need router at all.
10 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
I had to dig deep into the code of mediakit and figure out where the error is originating from and why and at the end I figured out the problem. I am using the mediakit auth package, which uses @auth/core internally. So, basically, when I call getSession(event.request, authOptions) , Auth.js extracts the "Auth Action" by removing the basePath from the URL. When calling the getSession from cache method, the basePath = /api/auth. So, if the request URL is /api/auth/session, Auth.js would evaluate it to "session" action. (Link to the Regex: https://github.com/nextauthjs/next-auth/blob/97ad36187eea613d209c8a1d6da98ccdf3c93df7/packages/core/src/lib/utils/web.ts#L122) However, for some reason, when using server actions, basePath config property is not sent to Auth.js and the default value for basePath in Auth.js is hardcoded to /auth. As a result, the Regex that should extract the action fails. As I was following the trace upwards, the mediakit just passes the authOptions to Authjs and Authjs uses the basePath from config to determine the action. So, I fixed this issue by providing basePath in my authOptions: 
export const authOptions : SolidAuthOptions = {
  // ...
  basePath: '/api/auth'
}
export const authOptions : SolidAuthOptions = {
  // ...
  basePath: '/api/auth'
}
This solves the issue and server actions can retrieve the session data now. However, it is still a mystery to me that calling the same method with the same options inside cache works as expected. When I was debugging it, without explicitly defined basePath, I could see the value from inside Authjs when getSession is called from cache...
10 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
I tried it out with useSubmission and I am still getting the same error. The getSession method in the solidjs-mediakit/auth package fails
10 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
Why would that make getting the session fail?
10 replies
SSolidJS
Created by Liquido on 6/22/2024 in #support
With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"
After some digging, I found out that the reason why I get error here is due to usage of solid server actions. If I use cache method to fetch data, everything works as expected. Is there a workaround to get the session working with actions? My main goal is to not pass the user id via form data but retrieve it from the session id
10 replies
SSolidJS
Created by Liquido on 12/11/2023 in #support
How can I set a style based on reactive state with fallback to props?
Can you please elaborate why that's the case? When a signal is updated, how is getter different than just updating the styles? Does Solid signals automatically update nested fields, which is more efficient?
6 replies
SSolidJS
Created by Liquido on 12/11/2023 in #support
How can I set a style based on reactive state with fallback to props?
I ended up creating creating a function that is called when passing to stykle: 
  const style = () => mergeProps(props.style, { color: clicked() ? 'orange' : 'red' });

  return <button onClick={() => setClicked(c => !c)} style={style()}>
    {props.children}
  </button>
  const style = () => mergeProps(props.style, { color: clicked() ? 'orange' : 'red' });

  return <button onClick={() => setClicked(c => !c)} style={style()}>
    {props.children}
  </button>
6 replies
SSolidJS
Created by Liquido on 12/1/2023 in #support
How to make SolidJS tags not return HTML elements for a custom renderer?
renderer.render(() => <MyCustomWidgetComponent />, view);
renderer.render(() => <MyCustomWidgetComponent />, view);
My renderer accepts a custom "MyElementNode" type while the JSX that is produced from MyCustomWidgetComponent is of type Element: 
const MyCustomWidgetComponent = () => {
  return <view>Hello world</view>
}
const MyCustomWidgetComponent = () => {
  return <view>Hello world</view>
}
12 replies
SSolidJS
Created by Liquido on 12/1/2023 in #support
How to make SolidJS tags not return HTML elements for a custom renderer?
After playing a lot with it, I finally got it working with universal renderer by create separate solid plugins depending on directory and everything works as I expect it. The only issue that I have right now is about Typescript. How can I make typescript work with universal renderer and default renderer
12 replies
SSolidJS
Created by Liquido on 12/1/2023 in #support
How to make SolidJS tags not return HTML elements for a custom renderer?
I will try out defining two solid plugins -- one used specifically from my project and one used for libraries. And the one in my project is a mix of both DOM and custom renderer
12 replies
SSolidJS
Created by Liquido on 12/1/2023 in #support
How to make SolidJS tags not return HTML elements for a custom renderer?
I could not get this working. I tried the following solid Vite: 
plugins: [solid({
  solid: {
    moduleName: '@myapp/renderer',
    generate: 'universal'
  }
})]
plugins: [solid({
  solid: {
    moduleName: '@myapp/renderer',
    generate: 'universal'
  }
})]
However, doing so modifies all solid inclusions to use @myapp/renderer and if I am using a solid based library (e.g @thisbeyond/solid-dnd), I cannot use the library because it fails in the browser. Is there a way to define that only specific components should use @myapp/renderer? I want to use solid DOM but with custom renderer.
12 replies
SSolidJS
Created by Liquido on 12/1/2023 in #support
How to make SolidJS tags not return HTML elements for a custom renderer?
How do I pass the universal renderer to vite. I see that it has renderers option and generate option but I want to have both the default renderer and the custom renderer.
12 replies