Madaxen86
Madaxen86
PostsComments
SSolidJS
Created by Liquido on 7/6/2024 in #support
How to store JSX element in a signal and render it from other elements
Have a look at kobalte.dev It has a unstyled dialog component. You can learn a lot how to design such components and it also has key bindings according the w3c standards e.g. close when pressing ESC,… https://github.com/kobaltedev/kobalte/tree/main/packages/core/src/dialog
6 replies
SSolidJS
Created by Hussein on 7/5/2024 in #support
how do i dedupe requests without `cache`?
Why not use the cache function and do a revalidate of the function in onMount of the page?
45 replies
SSolidJS
Created by binajmen on 7/4/2024 in #support
Is there a way to access children props?
https://playground.solidjs.com/anonymous/07afb07b-c728-47cd-b2fb-b32e6bd105b1
45 replies
SSolidJS
Created by binajmen on 7/4/2024 in #support
Is there a way to access children props?
But you can sort the items before setting: 
function Editor(props: ParentProps) {
  return (
        <ol>
          {props.children}
        </ol>
  );
}

function sortByDocumentPosition(a: Node, b: Node) {
  const position = a.compareDocumentPosition(b);

  if (
    position & Node.DOCUMENT_POSITION_FOLLOWING ||
    position & Node.DOCUMENT_POSITION_CONTAINED_BY
  ) {
    return -1;
  }

  if (
    position & Node.DOCUMENT_POSITION_PRECEDING ||
    position & Node.DOCUMENT_POSITION_CONTAINS
  ) {
    return 1;
  }

  return 0;
}

const [items,setItems] = createSignal<Node[]>([])
const addItem = (item:Node|undefined) => {item && setItems(prev =>[...prev,item].sort(sortByDocumentPosition))}
const removeItem = (item:Node|undefined) => {
  const removed = items().filter(o=> o!==item)
  setItems(removed)
  }
function Line(props: ParentProps<{ number?: number; onClick?: () => void }>) { 
  const [ref,setRef] = createSignal<Node|undefined>()
  onMount(()=>addItem(ref()))
  onCleanup(()=>removeItem(ref()))
  

  return (
    <div onClick={() => props.onClick?.()} ref={setRef}>
      {items()?.indexOf(ref()!)+1} - {props.children}
    </div>
  );
}
function Editor(props: ParentProps) {
  return (
        <ol>
          {props.children}
        </ol>
  );
}

function sortByDocumentPosition(a: Node, b: Node) {
  const position = a.compareDocumentPosition(b);

  if (
    position & Node.DOCUMENT_POSITION_FOLLOWING ||
    position & Node.DOCUMENT_POSITION_CONTAINED_BY
  ) {
    return -1;
  }

  if (
    position & Node.DOCUMENT_POSITION_PRECEDING ||
    position & Node.DOCUMENT_POSITION_CONTAINS
  ) {
    return 1;
  }

  return 0;
}

const [items,setItems] = createSignal<Node[]>([])
const addItem = (item:Node|undefined) => {item && setItems(prev =>[...prev,item].sort(sortByDocumentPosition))}
const removeItem = (item:Node|undefined) => {
  const removed = items().filter(o=> o!==item)
  setItems(removed)
  }
function Line(props: ParentProps<{ number?: number; onClick?: () => void }>) { 
  const [ref,setRef] = createSignal<Node|undefined>()
  onMount(()=>addItem(ref()))
  onCleanup(()=>removeItem(ref()))
  

  return (
    <div onClick={() => props.onClick?.()} ref={setRef}>
      {items()?.indexOf(ref()!)+1} - {props.children}
    </div>
  );
}
45 replies
SSolidJS
Created by binajmen on 7/4/2024 in #support
Is there a way to access children props?
That‘s right. If you render components conditionally: yes That‘s why the css solution is so great.😁
45 replies
SSolidJS
Created by Khaled on 7/4/2024 in #support
Issue with Solid JS Routing After Deployment
Can you provide your app.config.ts? Did you use the provider for the nitro server config: https://nitro.unjs.io/deploy/providers/vercel
2 replies
SSolidJS
Created by Liquido on 7/4/2024 in #support
How to pass props to context reactively?
And maybe have a look at the existing form libraries: https://modularforms.dev/solid Or https://felte.dev/docs/solid/getting-started They provide easy interfaces to interact with inputs, form validation also adapters for validation libs like zod.
10 replies
SSolidJS
Created by binajmen on 7/4/2024 in #support
Is there a way to access children props?
If it is just about numbering, you can do this with css and save all the trouble: https://blog.logrocket.com/styling-numbered-lists-with-css-counters/ Otherwise I usually create a context on the parent (the Editor in this case) and provide a map to which each child can add itself (its ref) onMount and remove itself onCleanup. And the component can then determine its index by himself by finding itself in the map. This is how component libraries like kobalte.dev do it as well.
45 replies
SSolidJS
Created by Sudhagar on 7/2/2024 in #support
With CSR, I see components inside Suspense rendering without waiting for CreateAsync's data
That’s probably just because when loading the page with refresh by the time the server streams the response to the browser the promise is resolved and it shows the actual logo. If you‘d add a timeout to the getData would will probably also see the fallback image first. You can use the route load function to preload getData when hovering over an A component. The data is already available on the cache (assuming you have wrapped get data in solid router’s cache function)
2 replies
SSolidJS
Created by KiaClouth on 7/2/2024 in #support
Incorrect response MIME type. Expected 'application/wasm'.
Maybe this Vite plugin will help: https://github.com/Menci/vite-plugin-wasm#readme
7 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
I don't know.
18 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
From @solidjs/router
18 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
This doc page might help: https://docs.solidjs.com/solid-start/building-your-application/data-loading For actions: https://docs.solidjs.com/solid-router/reference/data-apis/action
18 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
I hope this helps. Otherwise, little more context of what you want to do in your app would be good.
18 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
By using createAsync the server can start streaming anything that is not inside the Suspense. You could also use 
 
const data = createAsync(() => getOtp({reqId:params.id}),{deferStream:true});
 
const data = createAsync(() => getOtp({reqId:params.id}),{deferStream:true});
to prevent the server from streaming before the promise is resolved.
18 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
I don't really get what you do. It looks like you only want to send data, but what are you getting? I'd assume you would usually have a getCall like getOtp and then "mutation" where you send data and need to update from the getCall. 
// your server action / mutation function
const sendOtp = action(async ({reqId}) => {
  'use server';
  //send your data
  revalidate(getOtp.keyFor(reqId); //will trigger a refetch of getOtpByID for the reqId updates the cache
  // return what 
});


//wrapping in cache helps to dedupe request if you need to send
// your getter function
const getOtpByID = cache(async ({reqId}) => {
  'use server';
  //get data
},"getOtpByID");


//your component
export default function PageComponent() {
  const params = useParams(); //assuming you have a route like /otp/:id
  const data = createAsync(() => getOtp({reqId:params.id}));
  const sendOtpAction = useAction(sendOtp);
  //IF YOU want to get the state of the action like errors,   pending
  const submission = useSubmission(sendOtp);
  return (
    <Suspense>
      <pre>{JSON.stringify(data()}</pre>
      <button 
        disabled={submission.pending} 
        onClick={() =>sendOtpAction({reqId:params.id})}
      >
        Send data
      </button>
    </Suspense>
  );
}
// your server action / mutation function
const sendOtp = action(async ({reqId}) => {
  'use server';
  //send your data
  revalidate(getOtp.keyFor(reqId); //will trigger a refetch of getOtpByID for the reqId updates the cache
  // return what 
});


//wrapping in cache helps to dedupe request if you need to send
// your getter function
const getOtpByID = cache(async ({reqId}) => {
  'use server';
  //get data
},"getOtpByID");


//your component
export default function PageComponent() {
  const params = useParams(); //assuming you have a route like /otp/:id
  const data = createAsync(() => getOtp({reqId:params.id}));
  const sendOtpAction = useAction(sendOtp);
  //IF YOU want to get the state of the action like errors,   pending
  const submission = useSubmission(sendOtp);
  return (
    <Suspense>
      <pre>{JSON.stringify(data()}</pre>
      <button 
        disabled={submission.pending} 
        onClick={() =>sendOtpAction({reqId:params.id})}
      >
        Send data
      </button>
    </Suspense>
  );
}
18 replies
SSolidJS
Created by ChrisThornham on 7/1/2024 in #support
Is My Understanding Of RouteSectionProps Correct?
I view the load function as the "warmup" for the cache. The createAsync function inside the component will then get the prefechted data from the cache. And I never use the props returned to the page, instead I always use the useParams,... helpers, so I am always free to move parts of the page to their own component without the need to pass props around. So basically my pages look like this: 
const getData = cache(async (id:string) => {
  'use server';
  //fetch and return data
}, 'getData');

export const route = {
  load: ({ params }) => getData(params.id),
} satisfies RouteDefinition;

export default function PageComponent() {
  const params = useParams();
  const data = createAsync(() => getData(params.id));

  return (
    <Suspense>
      <pre>{JSON.stringify(data()}</pre>
    </Suspense>
  );
}
const getData = cache(async (id:string) => {
  'use server';
  //fetch and return data
}, 'getData');

export const route = {
  load: ({ params }) => getData(params.id),
} satisfies RouteDefinition;

export default function PageComponent() {
  const params = useParams();
  const data = createAsync(() => getData(params.id));

  return (
    <Suspense>
      <pre>{JSON.stringify(data()}</pre>
    </Suspense>
  );
}
10 replies
SSolidJS
Created by nerotide on 6/28/2024 in #support
Redirect does not happen during load if there is an awaited call before it.
Instead of redirecting, you could just throw an error. And add an ErrorBoundary to your component/page. The fallback of the ErrorBoundary can be component showing a 404.
5 replies
SSolidJS
Created by ish on 6/28/2024 in #support
useNavigate outside of router - for example on authentication faiures?
https://docs.solidjs.com/solid-router/reference/data-apis/response-helpers#redirect
9 replies
SSolidJS
Created by ish on 6/28/2024 in #support
useNavigate outside of router - for example on authentication faiures?
If you use solid router then you can use the redirect helper. It’s part of the solid router package and work for client and ssr apps.
9 replies