TheOinkinator Comments - Answer Overflow

TheOinkinator

Posts Comments

SSolidJS

•Created by TheOinkinator on 3/17/2024 in #support

CSS Modules not updating without page refresh

haven't seen any action on this what is the usual turnaround on issues?

7 replies

SSolidJS

•Created by TheOinkinator on 3/17/2024 in #support

CSS Modules not updating without page refresh

Submitted a git hub issues as I am not making any significant progress

7 replies

SSolidJS

•Created by TheOinkinator on 3/17/2024 in #support

CSS Modules not updating without page refresh

I have been digging into this some more and it appears that vite is not triggering an hmr update when the css module is saved and instead is making a page reload. Not sure if that helps anyone I am somewhat of a beginer so trying to pinpoint the root of the issue has been challenging

7 replies

SSolidJS

•Created by TheOinkinator on 3/17/2024 in #support

CSS Modules not updating without page refresh

Please let me know if you figure anything out. I am working on it as well

7 replies

SSolidJS

•Created by TheOinkinator on 10/12/2023 in #support

Is it possible to have a route rerender only a portion of the page with Solid Start

May have solve my own questions it appears the <A></A> tag handles rerouting without rerenders

3 replies

SSolidJS

•Created by TheOinkinator on 9/25/2023 in #support

Vercel deployment issue.

that seemed to work with some finagling

6 replies

SSolidJS

•Created by TheOinkinator on 9/25/2023 in #support

Vercel deployment issue.

let me try and see if that works

6 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

yes I was using for initially I switched to the map during the debugging process. Thanks for the advice!

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

OK adding a return to the thunk does the trick:

function newShelf() {
    setShelfList((prevList) => [...prevList, () => { return <TestComponent />}]);
  }

onclick={() => {
        newShelf();
      }}

function newShelf() {
    setShelfList((prevList) => [...prevList, () => { return <TestComponent />}]);
  }

onclick={() => {
        newShelf();
      }}

Thank you much!

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

so:

function newShelf() {
    setShelfList((prevList) => [...prevList, () => {<TestComponent />}]);
  }

onclick={() => {
        newShelf();
      }}

function newShelf() {
    setShelfList((prevList) => [...prevList, () => {<TestComponent />}]);
  }

onclick={() => {
        newShelf();
      }}

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

could you enlighten me on what a thunk is? sorry, relatively new to programming in general and solid. thanks!

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

If its relevanant this is a multi page application and the I am using astro to handle the routing

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

Here is ShelfScene:

import './shelfSceneStyles.css';
import Shelf from '../shelf/Shelf';
import TestComponent from '../../testComponent/TestComponent';
import { createSignal, onMount, For } from 'solid-js';

export default function ShelfScene() {
  const [shelfList, setShelfList] = createSignal<any[]>([]);

  onMount(() => {
    setShelfList((prevList) => [
      ...prevList,
      <TestComponent />,
      <Shelf shelfRef="1" />,
      <Shelf shelfRef="2" />,
    ]);
  });

  function newShelf() {
    setShelfList((prevList) => [...prevList, <TestComponent />]);
  }

  return (
    <div
      style={{ 'background-color': 'red' }}
      onclick={() => {
        newShelf();
      }}
    >
      {shelfList().map((component) => {
        return component;
      })}
    </div>
  );
}

import './shelfSceneStyles.css';
import Shelf from '../shelf/Shelf';
import TestComponent from '../../testComponent/TestComponent';
import { createSignal, onMount, For } from 'solid-js';

export default function ShelfScene() {
  const [shelfList, setShelfList] = createSignal<any[]>([]);

  onMount(() => {
    setShelfList((prevList) => [
      ...prevList,
      <TestComponent />,
      <Shelf shelfRef="1" />,
      <Shelf shelfRef="2" />,
    ]);
  });

  function newShelf() {
    setShelfList((prevList) => [...prevList, <TestComponent />]);
  }

  return (
    <div
      style={{ 'background-color': 'red' }}
      onclick={() => {
        newShelf();
      }}
    >
      {shelfList().map((component) => {
        return component;
      })}
    </div>
  );
}

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

here is the component that wraps context:

import { StackDraggingProvider } from "../../../context/StackDraggingContext";
import { SelectedBinderProvider } from "../../../context/SelectedBinderContext";
import { ActiveStackProvider } from "../../../context/ActiveStackContext";
import ShelfScene from "../shelfScene/ShelfScene";

export default function ShelfContextWrap() {
  return (
    <StackDraggingProvider dragState={"still"}>
      <SelectedBinderProvider selectedBinderState={0}>
        <ActiveStackProvider activeStackState={null}>
          <ShelfScene />
        </ActiveStackProvider>
      </SelectedBinderProvider>
    </StackDraggingProvider>
  );
}

import { StackDraggingProvider } from "../../../context/StackDraggingContext";
import { SelectedBinderProvider } from "../../../context/SelectedBinderContext";
import { ActiveStackProvider } from "../../../context/ActiveStackContext";
import ShelfScene from "../shelfScene/ShelfScene";

export default function ShelfContextWrap() {
  return (
    <StackDraggingProvider dragState={"still"}>
      <SelectedBinderProvider selectedBinderState={0}>
        <ActiveStackProvider activeStackState={null}>
          <ShelfScene />
        </ActiveStackProvider>
      </SelectedBinderProvider>
    </StackDraggingProvider>
  );
}

15 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

You got it

15 replies

SSolidJS

•Created by TheOinkinator on 8/11/2023 in #support

Createeffect not working in component where signal was defined

The exact same createeffect works with no issue. I would love an explanation of whate is happening

5 replies

SSolidJS

•Created by TheOinkinator on 8/11/2023 in #support

Createeffect not working in component where signal was defined

import { createEffect, createSignal } from "solid-js";
import { menuState, setMenuState } from "./FloatingMenu";

let searchBar: HTMLDivElement;
let searchBarInput: HTMLInputElement;
let searchCloseButton: HTMLDivElement;

const openSearch = () => {
  searchBar.style.width =
    "calc(var(--MenuHeight) * 2.2 + var(--SearchBarWidth))";
  searchBar.style.gridTemplateColumns =
    "var(--MenuHeight) 1fr var(--MenuHeight)";
  searchBarInput.style.cursor = "text";
  searchCloseButton.style.display = "grid";
};
const closeSearch = () => {
  searchBar.style.width = "var(--MenuHeight)";
  searchBar.style.gridTemplateColumns = "var(--MenuHeight) 0 0";
  searchCloseButton.style.display = "none";
  //Logic
  searchBarInput.blur();
};

export default function FMSearch() {
  createEffect(() => {
    if (menuState() === "searchOpen") {
      openSearch();
    } else {
      closeSearch();
    }
  });

  return (
    <>
      <div classList={{ menuItemContainer: true }}>
        <div
          ref={searchBar}
          classList={{ button: true }}
          onClick={() => {
            if (menuState() !== "searchOpen") {
              searchBarInput.focus();
            }
          }}
        >
          <div id="FMSearchIcon"></div>
          <input
            ref={searchBarInput}
            tabindex="0"
            id="searchInput"
            value="Start searching"
            type="text"
            onFocusIn={() => {
              setMenuState("searchOpen");
            }}
            onFocusOut={() => {
              setMenuState("loading");
            }}
          />
          <div
            id="searchCloseButton"
            ref={searchCloseButton}
            onClick={() => {
              setTimeout(() => {
                setMenuState("loading");
                searchBarInput.blur();
              }, 1);
            }}
          >
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </>
  );
}

import { createEffect, createSignal } from "solid-js";
import { menuState, setMenuState } from "./FloatingMenu";

let searchBar: HTMLDivElement;
let searchBarInput: HTMLInputElement;
let searchCloseButton: HTMLDivElement;

const openSearch = () => {
  searchBar.style.width =
    "calc(var(--MenuHeight) * 2.2 + var(--SearchBarWidth))";
  searchBar.style.gridTemplateColumns =
    "var(--MenuHeight) 1fr var(--MenuHeight)";
  searchBarInput.style.cursor = "text";
  searchCloseButton.style.display = "grid";
};
const closeSearch = () => {
  searchBar.style.width = "var(--MenuHeight)";
  searchBar.style.gridTemplateColumns = "var(--MenuHeight) 0 0";
  searchCloseButton.style.display = "none";
  //Logic
  searchBarInput.blur();
};

export default function FMSearch() {
  createEffect(() => {
    if (menuState() === "searchOpen") {
      openSearch();
    } else {
      closeSearch();
    }
  });

  return (
    <>
      <div classList={{ menuItemContainer: true }}>
        <div
          ref={searchBar}
          classList={{ button: true }}
          onClick={() => {
            if (menuState() !== "searchOpen") {
              searchBarInput.focus();
            }
          }}
        >
          <div id="FMSearchIcon"></div>
          <input
            ref={searchBarInput}
            tabindex="0"
            id="searchInput"
            value="Start searching"
            type="text"
            onFocusIn={() => {
              setMenuState("searchOpen");
            }}
            onFocusOut={() => {
              setMenuState("loading");
            }}
          />
          <div
            id="searchCloseButton"
            ref={searchCloseButton}
            onClick={() => {
              setTimeout(() => {
                setMenuState("loading");
                searchBarInput.blur();
              }, 1);
            }}
          >
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </>
  );
}

5 replies

Gaming

Programming