elite174 Comments - Answer Overflow

If you're a lib author keep this in mind and provide "sanitized" functions to the user (these functions use untrack inside) which may be used inside the effect. Example: https://github.com/elite174/solid-undo-redo/blob/master/src/lib/travel.ts#L218

7 replies

SSolidJS

•Created by TripleSmile on 9/3/2023 in #support

Good practices in SolidJS

I'd add one more thing (not really obvious): use untrack (or on) when calling callbacks from props for your component for instance:

const Component = (props) => {
  const [value, setValue] = createSignal(1);
  
  // this is REALLY dangerous
  // because onValueChange may use other signals
  // so that means that this effect will subscribe
  // on that signals too!
  //createEffect(()=>{
    // props.onValueChange(value())
  //});

  // instead use this:
  createEffect(on(value, currentValue => props.onValueChange(currentValue)))

  // or hacky way (prev is better)
  createEffect(()=>{
    // subscribe
    value();

    untrack(() => props.onValueChange(value()))
  })


  return <button type="button" onClick={()=>setValue(v => v+1)}>{value()}</button>
}

const Component = (props) => {
  const [value, setValue] = createSignal(1);
  
  // this is REALLY dangerous
  // because onValueChange may use other signals
  // so that means that this effect will subscribe
  // on that signals too!
  //createEffect(()=>{
    // props.onValueChange(value())
  //});

  // instead use this:
  createEffect(on(value, currentValue => props.onValueChange(currentValue)))

  // or hacky way (prev is better)
  createEffect(()=>{
    // subscribe
    value();

    untrack(() => props.onValueChange(value()))
  })


  return <button type="button" onClick={()=>setValue(v => v+1)}>{value()}</button>
}

7 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

For instance I render there navigation, but I don't need navigation for login page

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

It's valid. in my app I use this route for common layout, but I omitted it here.

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

Here you can see that navigate runs before content DF, however DF is still running! Is it a bug?

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

When I open '/content' page in the browser, I see this:

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

EXAMPLE APP: 2/2

export const App = () => (
  <AuthService>
    <Router>
      <Routes>
        <Route
          path="/"
          data={layoutDataFunction}
          component={() => (
            <div>
              Layout
              <Outlet />
            </div>
          )}
        >
          <Route
            path="login"
            component={() => (
              <div>
                <h1>LOGIN PAGE</h1>
                <button type="button" onClick={useContext(AuthContext).login}>
                  Login
                </button>
              </div>
            )}
          />
          <Route path="">
            <Route
              path="content"
              component={() => {
                const data = useRouteData();

                return (
                  <div>
                    <h1>CONTENT PAGE</h1>
                    <button type="button" onClick={useContext(AuthContext).logout}>
                      logout
                    </button>
                  </div>
                );
              }}
              data={channelPageDataFunction}
            />
            {/** Other pages */}
          </Route>
          <Route path="*" element={<Navigate href="/content" />} />
        </Route>
      </Routes>
    </Router>
  </AuthService>
);

export const App = () => (
  <AuthService>
    <Router>
      <Routes>
        <Route
          path="/"
          data={layoutDataFunction}
          component={() => (
            <div>
              Layout
              <Outlet />
            </div>
          )}
        >
          <Route
            path="login"
            component={() => (
              <div>
                <h1>LOGIN PAGE</h1>
                <button type="button" onClick={useContext(AuthContext).login}>
                  Login
                </button>
              </div>
            )}
          />
          <Route path="">
            <Route
              path="content"
              component={() => {
                const data = useRouteData();

                return (
                  <div>
                    <h1>CONTENT PAGE</h1>
                    <button type="button" onClick={useContext(AuthContext).logout}>
                      logout
                    </button>
                  </div>
                );
              }}
              data={channelPageDataFunction}
            />
            {/** Other pages */}
          </Route>
          <Route path="*" element={<Navigate href="/content" />} />
        </Route>
      </Routes>
    </Router>
  </AuthService>
);

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

EXAMPLE APP 1/2:

import { Navigate, Outlet, Route, RouteDataFuncArgs, Router, Routes, useRouteData } from "@solidjs/router";
import { ParentComponent, createComputed, createContext, createResource, createSignal, useContext } from "solid-js";

const AuthContext = createContext();

export const AuthService: ParentComponent = (props) => {
  const [isLogged, setLogged] = createSignal(false);

  return (
    <AuthContext.Provider
      value={{
        isLogged,
        logout: () => setLogged(false),
        login: () => setLogged(true),
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export const layoutDataFunction = ({ navigate, location }: RouteDataFuncArgs) => {
  console.log("[DF]: layout");
  const { isLogged } = useContext(AuthContext)!;

  createComputed(() => {
    if (isLogged()) {
      if (location.pathname === "/login") {
        console.log("Navigate to /content", isLogged());
        navigate("/content");
      }
    } else {
      if (location.pathname !== "/login") {
        console.log("Navigate to /login", isLogged());
        navigate("/login");
      }
    }
  });
};

export const channelPageDataFunction = () => {
  console.log("[DF]: content");
  const [data] = createResource(async () => {
    console.log("THIS thing is called despite the fact that navigate calls earlier");

    await new Promise((resolve) =>
      setTimeout(() => {
        resolve;
      }, 2000),
    );

    return "data!";
  });

  return data;
};

import { Navigate, Outlet, Route, RouteDataFuncArgs, Router, Routes, useRouteData } from "@solidjs/router";
import { ParentComponent, createComputed, createContext, createResource, createSignal, useContext } from "solid-js";

const AuthContext = createContext();

export const AuthService: ParentComponent = (props) => {
  const [isLogged, setLogged] = createSignal(false);

  return (
    <AuthContext.Provider
      value={{
        isLogged,
        logout: () => setLogged(false),
        login: () => setLogged(true),
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export const layoutDataFunction = ({ navigate, location }: RouteDataFuncArgs) => {
  console.log("[DF]: layout");
  const { isLogged } = useContext(AuthContext)!;

  createComputed(() => {
    if (isLogged()) {
      if (location.pathname === "/login") {
        console.log("Navigate to /content", isLogged());
        navigate("/content");
      }
    } else {
      if (location.pathname !== "/login") {
        console.log("Navigate to /login", isLogged());
        navigate("/login");
      }
    }
  });
};

export const channelPageDataFunction = () => {
  console.log("[DF]: content");
  const [data] = createResource(async () => {
    console.log("THIS thing is called despite the fact that navigate calls earlier");

    await new Promise((resolve) =>
      setTimeout(() => {
        resolve;
      }, 2000),
    );

    return "data!";
  });

  return data;
};

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

export const contentPageDataFunction = ({data}) => {
  const {isLoggedSignal} = data;
  const [user] = createResource(isLoggedSignal, async (isLogged) => {
    // if I do smth like this
    // then I immediately change the state of the resource
    // which will affect suspense (the state will instantly be 'ready')
    // and TS handling stuff of course...
    if (!isLogged) return null;

    const result = await myVideosAPI.getMyVideos();

    return result;
  });

  return user;
};

export const contentPageDataFunction = ({data}) => {
  const {isLoggedSignal} = data;
  const [user] = createResource(isLoggedSignal, async (isLogged) => {
    // if I do smth like this
    // then I immediately change the state of the resource
    // which will affect suspense (the state will instantly be 'ready')
    // and TS handling stuff of course...
    if (!isLogged) return null;

    const result = await myVideosAPI.getMyVideos();

    return result;
  });

  return user;
};

11 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

I don't want to pass the logged state for all data functions which require auth check, because I want to keep the auth logic in one place.

11 replies

SSolidJS

•Created by akerbeltz on 6/5/2023 in #support

checkbox controlled from outside

Hey guys, I noticed that checkbox can't be controlled. For instance, if I pass <Switch checked={false} onChange={console.log} /> I still will be able to change checked state. How to deal with this?

29 replies

Gaming

Programming