lvl_up Posts - Answer Overflow

lvl_up

•Created by lvl_up on 7/9/2023 in #support

Owner not setting for context provider

I'm working on an adapter for inertia.js with solid, and I was looking to add providers similar to their persistent layouts, but I can't seem to get the provider to attach to the component properly. The component is not being wrapped in the provider how I was intending it to. I don't know if it's even possible to do it this way.

function Create(props) {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

// How Inertia attaches persistent layouts to components
Create.layout = (page) => (
  <div style={{ border: "1px solid red" }}>{page}</div>
);

// How I am trying to pass the provider
Create.provider = (page) => (
  <TestContextProvider>{page}</TestContextProvider>
);

export default Create;

function Create(props) {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

// How Inertia attaches persistent layouts to components
Create.layout = (page) => (
  <div style={{ border: "1px solid red" }}>{page}</div>
);

// How I am trying to pass the provider
Create.provider = (page) => (
  <TestContextProvider>{page}</TestContextProvider>
);

export default Create;

const renderPage = ({
    Component,
    props,
    key,
}) => {
    const child = createComponent(Component, { key, ...props });

    // Trying to call the provider similar to the layout below
    // return Component.provider(child);

    // Inertia adapters attach layout to the component here
    if (Component.layout && typeof Component.layout === "function") {
      return Component.layout(child);
    }

    return child;
};

const renderPage = ({
    Component,
    props,
    key,
}) => {
    const child = createComponent(Component, { key, ...props });

    // Trying to call the provider similar to the layout below
    // return Component.provider(child);

    // Inertia adapters attach layout to the component here
    if (Component.layout && typeof Component.layout === "function") {
      return Component.layout(child);
    }

    return child;
};

Full sandbox: https://codesandbox.io/p/sandbox/inertia-solid-dcweir?file=%2Fsrc%2FApp.tsx%3A7%2C9

1 replies

SSolidJS

•Created by lvl_up on 6/20/2023 in #support

Handling rerenders when overwriting state

I have a signal that is storing a 2d array for my 'game state'. What would be the best way to render this data without causing the components to rerender on each update. Ex.

const [state, setState] = createStore<{
  board: Array<Array<{ col: number; row: number; player: number } | null>>;
}>({
  board: [
    [{ row: 0, col: 0, player: 1 }, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
  ],
});

const updateBoard = (col) => {
  setState((prev) => {
    const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

    return {
      ...prev,
      board,
    };
  });
  };

const [state, setState] = createStore<{
  board: Array<Array<{ col: number; row: number; player: number } | null>>;
}>({
  board: [
    [{ row: 0, col: 0, player: 1 }, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
  ],
});

const updateBoard = (col) => {
  setState((prev) => {
    const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

    return {
      ...prev,
      board,
    };
  });
  };

I'm rendering each column of the board then the tokens for each columns using the <For> flow. The issue is that when I update the state, I copy the board and update the next null index and return the copy. This causes the whole board to re-render.

5 replies

SSolidJS

•Created by lvl_up on 5/31/2023 in #support

Universal renderer createElement isn't running

I'm working on a custom renderer and I can't get the createElement function to run. I'm not sure if I missed some configuration or I'm misunderstanding. I have an example I'm going off for a basic custom renderer which calls createElement as expected, but in my version and a separate sandbox I'm not getting the expected log. https://codesandbox.io/p/sandbox/awesome-firefly-huojci?file=%2Fsrc%2FApp.tsx%3A16%2C25

12 replies

Gaming

Programming