peerreynders
peerreynders
PostsComments
SSolidJS
Created by ChrisThornham on 7/11/2024 in #support
Can The load() Function Access Secure Values?
If these sources are anything to go by it's going to be interesting: https://github.com/orgs/supabase/discussions/1094 https://www.restack.io/docs/supabase-knowledge-supabase-get-user-by-cookie
15 replies
SSolidJS
Created by ChrisThornham on 7/11/2024 in #support
Can The load() Function Access Secure Values?
I'm not sure if "event" is needed in these cases.
Those functions are provided by h3 and in SolidStart they take event.nativeEvent. It just happens that vinxi wraps them and populates the event for you if you don't provide it. h3 also provides a session API the one caveat being that always creates a session when you use getSession() even if there isn't one already; i.e. it assumes that the session always exists, only it's contents is ephemeral. Example
15 replies
SSolidJS
Created by Luka on 6/4/2024 in #support
FileRoutes layout
Route components get RouteSectionProps Components that are layouts naturally require ParentProps
18 replies
SSolidJS
Created by ChrisThornham on 7/11/2024 in #support
Can The load() Function Access Secure Values?
Similarly in a 'use server' section you can bail if getRequestEvent() doesn't pass the sniff test.
15 replies
SSolidJS
Created by ChrisThornham on 7/11/2024 in #support
Can The load() Function Access Secure Values?
Alternately you can even put that check in the API Route by inspecting the APIEvent.request.
15 replies
SSolidJS
Created by ChrisThornham on 7/11/2024 in #support
Can The load() Function Access Secure Values?
- After successful authentication store JWT in an HttpOnly cookie (i.e. the client JS can't access it). - Have middleware block requests to protected routes that don't have a cookie header with a valid JWT.
15 replies
SSolidJS
Created by conartist6 on 7/11/2024 in #support
Objects passing through a store are copies, even after unwrapping... why?
Rather than thinking in terms of traditional state, distill it down to “what type of changes do I want to react to” and design the reactive graph from there.
35 replies
SSolidJS
Created by conartist6 on 7/11/2024 in #support
Objects passing through a store are copies, even after unwrapping... why?
Given that the object is frozen does it make any sense to use a store? i.e. expose the top level reference via a signal.
35 replies
SSolidJS
Created by conartist6 on 7/11/2024 in #support
Objects passing through a store are copies, even after unwrapping... why?
Are you using reconcile to keep the content of the store stable?
35 replies
SSolidJS
Created by eponymous on 7/10/2024 in #support
Using Router Action with Solid (not SolidStart)
Here is the one I created https://stackblitz.com/edit/stackblitz-starters-zmfxxa?file=src%2Froutes%2Fabout.tsx Fork it if you like as I don't know how long I'll keep it. The basic one I always start with is https://stackblitz.com/edit/stackblitz-starters-bjbk1s?file=src%2Froutes%2Fabout.tsx
15 replies
SSolidJS
Created by eponymous on 7/10/2024 in #support
Using Router Action with Solid (not SolidStart)
It's an accessor to the value returned by the expression in the when prop once the value isn't falsey. Because the Error is returned rather than thrown it appears on submission.result rather than submission.error once submission.pending transitions from true to false.
15 replies
SSolidJS
Created by eponymous on 7/10/2024 in #support
Using Router Action with Solid (not SolidStart)
Dropped into the basic template this works on StackBlitz: 
// file: src/routes/about.tsx
import { Show } from 'solid-js';
import { action, redirect, useAction, useSubmission } from '@solidjs/router';
import { Title } from '@solidjs/meta';

const isAdmin = action(async (formData: FormData) => {
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));
  const username = formData.get('username');

  if (username === 'admin') throw redirect('/admin');
  return new Error('Invalid username');
}, 'login');

function About() {
  const submit = useAction(isAdmin);
  const submission = useSubmission(isAdmin);
  const submitListener = (e: Event & { currentTarget: HTMLFormElement }) => {
    submission.clear?.();
    submit(new FormData(e.currentTarget));
  };

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <form action={isAdmin} method="post" onSubmit={submitListener}>
        <label for="username">Username:</label>
        <input type="text" name="username" />
        <input type="submit" value="submit" />
      </form>
      <Show when={submission.result}>
        {(error) => <p>{error().message}</p>}
      </Show>
    </main>
  );
}

export { About };
// file: src/routes/about.tsx
import { Show } from 'solid-js';
import { action, redirect, useAction, useSubmission } from '@solidjs/router';
import { Title } from '@solidjs/meta';

const isAdmin = action(async (formData: FormData) => {
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));
  const username = formData.get('username');

  if (username === 'admin') throw redirect('/admin');
  return new Error('Invalid username');
}, 'login');

function About() {
  const submit = useAction(isAdmin);
  const submission = useSubmission(isAdmin);
  const submitListener = (e: Event & { currentTarget: HTMLFormElement }) => {
    submission.clear?.();
    submit(new FormData(e.currentTarget));
  };

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <form action={isAdmin} method="post" onSubmit={submitListener}>
        <label for="username">Username:</label>
        <input type="text" name="username" />
        <input type="submit" value="submit" />
      </form>
      <Show when={submission.result}>
        {(error) => <p>{error().message}</p>}
      </Show>
    </main>
  );
}

export { About };
15 replies
SSolidJS
Created by Faterek on 7/9/2024 in #support
How can I make sure that data from createAsync is loaded, before passing it to another function
You're thinking createResource() for the last two. createAsync() doesn't have that signature. To get a createAsync() to refetch you revalidate() the cache (key) it consumes. One advantage of the createAsync/cache split is that every component can have its own createAsync() that share the same cache() wrapper. With createResource() everybody shares the same accessor or each component with a createResource will cause its own async op (e.g. fetch). The latter is undesirable because - multiple fetches - separate components can be at different levels of staleness.
10 replies
SSolidJS
Created by zimo on 7/10/2024 in #support
"[error] UnknownAction" on getSession() in AuthJS
Just an FYI. Same error here: https://discord.com/channels/722131463138705510/1254011498632708147/1254091696342438029 Doesn't mean your issue is the same.
6 replies
SSolidJS
Created by Faterek on 7/9/2024 in #support
How can I make sure that data from createAsync is loaded, before passing it to another function
I'd favour resolving async dependencies on the async side; not the reactive side.
10 replies
SSolidJS
Created by qdwang on 7/9/2024 in #support
Is there a more proper way to set value across components?
Under most circumstances I would consider this a “code smell”: 
import { value, update } from './value';
import { value, update } from './value';
i.e. needing access to both the accessor and mutators at the same time. Compare to: https://playground.solidjs.com/anonymous/40c07288-1536-4f99-9f6f-283506f87667 
// file: main.tsx
import { render } from 'solid-js/web';
import { value } from './value';
import { Increment } from './increment';
import { AddThree } from './add-three';

function App() {
  return (
    <>
      <p>{value()}</p>
      <Increment />
      <AddThree />
    </>
  );
}

render(() => <App />, document.getElementById('app')!);
// file: main.tsx
import { render } from 'solid-js/web';
import { value } from './value';
import { Increment } from './increment';
import { AddThree } from './add-three';

function App() {
  return (
    <>
      <p>{value()}</p>
      <Increment />
      <AddThree />
    </>
  );
}

render(() => <App />, document.getElementById('app')!);
// file: increment.tsx
import { update } from './value';

const { increment } = update;

function Increment() {
  return (
    <button type="button" onClick={increment}>
      +1
    </button>
  );
}

export { Increment };
// file: increment.tsx
import { update } from './value';

const { increment } = update;

function Increment() {
  return (
    <button type="button" onClick={increment}>
      +1
    </button>
  );
}

export { Increment };
6 replies
SSolidJS
Created by qdwang on 7/9/2024 in #support
Is there a more proper way to set value across components?
I would be extremely reluctant to hand out a raw setter like that. The “owner ” of reactive state should constrain the possible ways in which that state can be modified. The definition of those mutators should be collocated with the state itself and exported (if absolutely necessary) instead of the setter. 
// file: value.tsx
import { createSignal } from 'solid-js';

const [value, setValue] = createSignal(0);

const increment = (v: number) => v + 1;
const addThree = (v: number) => v + 3;
const update = {
  increment: () => setValue(increment),
  addThree: () => setValue(addThree),
};

export { update, value };
// file: value.tsx
import { createSignal } from 'solid-js';

const [value, setValue] = createSignal(0);

const increment = (v: number) => v + 1;
const addThree = (v: number) => v + 3;
const update = {
  increment: () => setValue(increment),
  addThree: () => setValue(addThree),
};

export { update, value };
https://playground.solidjs.com/anonymous/e26301b5-e5dc-4d69-9304-10022a0b11e1 3. Read/Write segregation.
6 replies
SSolidJS
Created by Rodrigo on 7/9/2024 in #support
Is createAsync supposed to work with Suspense?
i.e. 
// file: src/routes/about.tsx
import { Show, Suspense } from 'solid-js';
import { cache, createAsync } from '@solidjs/router';
import { Title } from '@solidjs/meta';

function fakeRC() {
  return new Promise<{ foo: number }>((resolve) =>
    setTimeout(resolve, 2000, { foo: 1 })
  );
}

const remoteCall = cache(fakeRC, 'remote');

function About() {
  const result = createAsync(() => remoteCall());

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<div>Loading…</div>}>
        <Show when={result()}>
          {(value) => <div>Foo is {value().foo}</div>}
        </Show>
      </Suspense>
    </main>
  );
}

export { About };
// file: src/routes/about.tsx
import { Show, Suspense } from 'solid-js';
import { cache, createAsync } from '@solidjs/router';
import { Title } from '@solidjs/meta';

function fakeRC() {
  return new Promise<{ foo: number }>((resolve) =>
    setTimeout(resolve, 2000, { foo: 1 })
  );
}

const remoteCall = cache(fakeRC, 'remote');

function About() {
  const result = createAsync(() => remoteCall());

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<div>Loading…</div>}>
        <Show when={result()}>
          {(value) => <div>Foo is {value().foo}</div>}
        </Show>
      </Suspense>
    </main>
  );
}

export { About };
7 replies