<Alterion.Dev> Posts - Answer Overflow

<Alterion.Dev>

Explore posts from servers

•Created by <Alterion.Dev> on 6/29/2023 in #support

Runtime Env vars in vite

Hey all, I'm trying to figure out a way to run environment variables at runtime rather than at compile time. I've been looking at https://iendeavor.github.io/import-meta-env/ , but I can't seem to get it to work. Specifically, in transformMode: "runtime" , trying to use this code in a script called by index.html (in fact, a script tag in index.html) just makes global.import_meta_env to be the placeholder, it doesn't get replaced.

   <script>
     globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
     console.log(import_meta_env); // import_meta_env_placeholder
   </script>

   <script>
     globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
     console.log(import_meta_env); // import_meta_env_placeholder
   </script>

I need this because our build system builds once and then distributes to other servers for various regions. We also have staging/beta/dev servers built the same way. Anything I'm missing? (This isn't necessarily related to solidjs, but, it's a thing that could be used with solidjs 😉 )

11 replies

SSolidJS

•Created by <Alterion.Dev> on 2/27/2023 in #support

"The reactive variable 'head' should be wrapped in a function for reactivity."

I'm a little confused specifically as to what this warning from eslint-plugin-solid means:

The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.

The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.

Here's what the code looks like (simplified):

export const Program = (props) => {
  const { showProgram } = useResult()
  const head = () => props.majors[0]
  return (
    <a onClick={[showProgram, head().program.id]} >
      <span class="i-mdi-eye mr-2 ml-1" />
      Unhide
    </a>
  )
}

export const Program = (props) => {
  const { showProgram } = useResult()
  const head = () => props.majors[0]
  return (
    <a onClick={[showProgram, head().program.id]} >
      <span class="i-mdi-eye mr-2 ml-1" />
      Unhide
    </a>
  )
}

I don't understand here why it's telling me it should be wrapped in a function, when I'm reading a derived state. This works fine it's really a linting warning that I'm not sure is even correct so I'm wondering if I've got this all wrong.

4 replies

SSolidJS

•Created by <Alterion.Dev> on 1/20/2023 in #support

Facebook/Twitter share implementation?

Hi guys! I've never had to do this before, and I'm wondering if maybe someone had an example of implementing Facebook and/or Twitter Share systems in a solidjs app? I have a "base" I can sort of duplicate but it's an overengineered reactjs code thing and I would much rather do something that's as clean and simple as possible. Is it really necessary to dynamically inject the javascript and such into the <head> for all this to work? I'd love some guidance!

15 replies

SSolidJS

•Created by <Alterion.Dev> on 12/15/2022 in #support

Dropdown with click outside pattern

What would be the best pattern to create a dropdown menu div or menu div with an onClick handler outside to auto close it? not a hover menu, mind you, but a click menu. I know how to show it, but I recall handling the onClick outside of the element actually implied something like portals or annoying dom manipulation in react, and I'm wondering if solid (or some community-made primitive) has a better idiomatic pattern for this? Currently my component looks like

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

obviously, it only opens or close on clicking the button.

15 replies

SSolidJS

•Created by <Alterion.Dev> on 12/13/2022 in #support

Virtual Scrolling with animation and dynamic loading

I don't have the bandwidth to expend too much on this idea, so it's more of a thought experiment for later, unless someone in the ecosystem team has come up with an elegant, premade solution for this. I have a list of cards rendered in a wrapper, where I need to scroll horizontally on clicking a button. My current idea that's unoptimised but functional (probably) is to just have an overflow:hidden CSS, and control the current scrolling position of the wrapper manually, setting it to "n * the width of a card*. The main issue with that is that will a grand total of 4700 cards over 70 wrappers with individual scroll control, this might be... A bit slow. Is virtual scrolling a solved problem in Solid? Is there a currently updated plugin that does it well enough? If not, I'll reserve some personal time to possibly work on it outside of work development time, but I was wondering... ☺️

5 replies

Gaming

Programming