Kyros
Kyros
PostsComments
SSolidJS
Created by Kyros on 11/13/2023 in #support
How to use async functions inside of synchronous components?
ok thanks guys it did it
4 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
Very clear explanation too
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
Thanks
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
Oh ok
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
why the heck do signals and effects and stuff exist then
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
like just this would work?
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
oh like just do something on the lines of this? 
const header = () => useLocation().pathname
const path = () => PAGES[path as Indexer]
const header = () => useLocation().pathname
const path = () => PAGES[path as Indexer]
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
what do you mean?
15 replies
SSolidJS
Created by Kyros on 6/25/2023 in #support
Not sure whether I'm using reactivity right... (Codereview)
So basically the way I had it before was something on these lines: On my Sidebar component, I would have some buttons that would trigger a navigation, using useNavigate(). I actually switched to some <A /> tags and I'd like to hear about that too, but that shouldn't really matter I think. Anyway, then, In this component, which is the Header component, I would implement useLocation() to get the current path in order to update the text, by mapping it to every possible route. Now, in React that worked for some reason I actually don't quite understand, but intuitively useLocation probably knew when it was changing and triggered a rerender and stuff. Now, in Solid, i just switched the useLocation by React to the useLocation of Solid, and had it like this: 
const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const path = useLocation().pathname
  const header = PAGES[path as Indexer]

  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}
const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const path = useLocation().pathname
  const header = PAGES[path as Indexer]

  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}
But that didn't work, probably because I didn't implement any form of tracking. That's it, lemme know what you think of my new implementation :)
15 replies
SSolidJS
Created by Kyros on 6/21/2023 in #support
Add props to an element programmatically
oh exactly what i needed, ty
7 replies
SSolidJS
Created by Kyros on 6/21/2023 in #support
Add props to an element programmatically
ty
7 replies
SSolidJS
Created by Kyros on 6/21/2023 in #support
Add props to an element programmatically
what is it?
7 replies
SSolidJS
Created by Kyros on 6/21/2023 in #support
Add props to an element programmatically
update: I was able to get it to work by passing a function definition that accepted a css_class argument and then calling that inside the component, although i find this approach quite tedious and id really appreciate a better solution... 
// Parent.tsx
import { MyComponent, ComponentImPassing } from "./components";


export default function ParentComponent() {
  return (
    <div>
        <MyComponent path="/" src={function (css_class: string) { return <ComponentImPassing class={css_class}></ComponentImPassing> }} />
    </div>
  )
}

// MyComponent.tsx
import styles from "./css/MyElement.module.css";
import { JSX } from "solid-js";

interface Props {
  src: (arg0: string) => JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src(styles.svg)}
      </div>
    );
}
// Parent.tsx
import { MyComponent, ComponentImPassing } from "./components";


export default function ParentComponent() {
  return (
    <div>
        <MyComponent path="/" src={function (css_class: string) { return <ComponentImPassing class={css_class}></ComponentImPassing> }} />
    </div>
  )
}

// MyComponent.tsx
import styles from "./css/MyElement.module.css";
import { JSX } from "solid-js";

interface Props {
  src: (arg0: string) => JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src(styles.svg)}
      </div>
    );
}
7 replies