zobweyt
zobweyt
Explore posts from servers
CC#KPCKevin Powell - CommunitySSolidJS
PostsComments
SSolidJS
Created by zobweyt on 10/13/2024 in #support
Using JSX in custom directives
I came up with this, but now it seems like you need to re-invent the whole <Tooltip> component 
export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}
export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}
7 replies
SSolidJS
Created by zobweyt on 10/13/2024 in #support
Using JSX in custom directives
I came up with this. However, it renders the whole element as a <Portal>. Can you render it in the same exact spot? 
import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);
import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);
7 replies
SSolidJS
Created by zobweyt on 10/13/2024 in #support
Using JSX in custom directives
How would you create a portal? What do you mean? Using document.appendChild()?
7 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
ohhh, thank you very much!! I got it all now :)
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
maybe I don't understand very well why start script is needed? is it needed only for testing and preview? after moving the build to the hosting service, do I need to run the application using just node and the resulting build?
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
okay, got it however, this still remains unclear for me:
I still need Vite to run the start script, so should it remain in the regular dependencies?
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
they are using vinxi, it's vite + nitro
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
yes but it's more like a "library", not an app also, compare these examples: - https://github.com/solidjs/solid-start/blob/main/examples/bare/package.json: everything is in regular dependencies - https://github.com/solidjs/solid-start/blob/main/examples/with-vitest/package.json everything is in dev dependencies
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
I'm using Vite with Solid Start https://github.com/solidjs/solid-start
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
Should I move everything to development dependencies and then attempt to build the app with all the development dependencies installed, and then preview using the start script? I understand that the next steps may depend on the hosting environment. For example, in one scenario, would I move the build to a hosting service and only install production dependencies there? I still need Vite to run the start script, so should it remain in the regular dependencies?
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
so you are doing a build with development dependencies installed
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
but to build the app you anyway need some development dependencies
45 replies
KPCKevin Powell - Community
Created by zobweyt on 10/11/2024 in #front-end
Choosing between dependencies and dev dependencies
So building is more about development rather than production?
45 replies
SSolidJS
Created by zobweyt on 8/8/2024 in #support
Endless "[vite] ✨ optimized dependencies changed. reloading"
it appears to be machine problem as it works fine on my laptop but not on my pc
5 replies
SSolidJS
Created by zobweyt on 8/8/2024 in #support
Endless "[vite] ✨ optimized dependencies changed. reloading"
~ $ cmd /c ver

Microsoft Windows [Version 10.0.22621.3958]
~ $ pnpm -v
9.7.0
~ $ cmd /c ver

Microsoft Windows [Version 10.0.22621.3958]
~ $ pnpm -v
9.7.0
5 replies
SSolidJS
Created by zobweyt on 8/8/2024 in #support
Endless "[vite] ✨ optimized dependencies changed. reloading"
am I missing something? why is this happening?
5 replies
SSolidJS
Created by zobweyt on 8/8/2024 in #support
Endless "[vite] ✨ optimized dependencies changed. reloading"
here's complete video to reproduce this
5 replies
KPCKevin Powell - Community
Created by zobweyt on 8/7/2024 in #front-end
Using CSS selectors with @media queries
I guess light-dark() function is suitable if you have only 2 color schemes: light and dark But it's still very cool!
7 replies
KPCKevin Powell - Community
Created by zobweyt on 8/7/2024 in #front-end
Using CSS selectors with @media queries
Didn't expect to get an answer right from you :) Thank you for your awesome videos!!
You'll need to copy paste
So a more neat solution is to use a preprocessor like SASS for this, right?
As for the data-theme="system", I wouldn't include that anywhere, so it just goes back to the default that way.
Yeah, you're right, but I'd move the @media queries upper. If you had more than 2 themes, it'd be better to do it like this: 
body {
  background: var(--bg);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
  }
}

[data-theme="light"] {
  --bg: white;
}

[data-theme="dark"] {
  --bg: black;
}

[data-theme="third"] {
  --bg: green;
}
body {
  background: var(--bg);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
  }
}

[data-theme="light"] {
  --bg: white;
}

[data-theme="dark"] {
  --bg: black;
}

[data-theme="third"] {
  --bg: green;
}
7 replies
SSolidJS
Created by zobweyt on 7/26/2024 in #support
Context with children(() => props.children) helper triggers an error
interesting workaround
140 replies