jesseb34r
jesseb34r
Explore posts from servers
KPCKevin Powell - CommunitySSolidJS
PostsComments
SSolidJS
Created by jesseb34r on 8/17/2023 in #support
template not exported from solidjs/web
23 replies
SSolidJS
Created by jesseb34r on 4/17/2023 in #support
Confused by context updating in handleOnMouseDown()
I can share more code if needed but the component is pretty large and I don't think all the context is needed for this. I have a component for a drag and drop canvas that when clicked should set the starting mouse position and then calculates it's position based on the difference between the current mouse position and the starting mouse position. The problem is that the starting mouse position gets set multiple times even though I only want it set once. Does anyone know why this is happening? 
const Draggable: VoidComponent<{ id: string }> = (props) => {
  const dragContext = useDragContext();

  const handleMouseUp = () => {
    document.removeEventListener("mousemove", dragContext.handleDrag);
    document.removeEventListener("mouseup", handleMouseUp);
  };

  const handleMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
    e.preventDefault();
    if (!dragContext.state.selectedElementIds.includes(props.id)) {
      dragContext.selectElement(props.id);
    } else {
      dragContext.unSelectElement(props.id);
    }

    dragContext.setDragStartMousePosition({ x: e.clientX, y: e.clientY });
    dragContext.setDragStartPositions();

    document.addEventListener("mousemove", dragContext.handleDrag);
    document.addEventListener("mouseup", handleMouseUp);
  };

  return (
    <div
      style={{
        top: `${dragContext.state.elements[props.id].position.y}px`,
        left: `${dragContext.state.elements[props.id].position.x}px`,
      }}
      classList={{
        "fixed h-40 w-40 rounded bg-blue3": true,
        "border-4 border-orange6":
          !!dragContext.state.selectedElementIds.includes(props.id),
      }}
      onMouseDown={handleMouseDown}
    />
  );
};
const Draggable: VoidComponent<{ id: string }> = (props) => {
  const dragContext = useDragContext();

  const handleMouseUp = () => {
    document.removeEventListener("mousemove", dragContext.handleDrag);
    document.removeEventListener("mouseup", handleMouseUp);
  };

  const handleMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
    e.preventDefault();
    if (!dragContext.state.selectedElementIds.includes(props.id)) {
      dragContext.selectElement(props.id);
    } else {
      dragContext.unSelectElement(props.id);
    }

    dragContext.setDragStartMousePosition({ x: e.clientX, y: e.clientY });
    dragContext.setDragStartPositions();

    document.addEventListener("mousemove", dragContext.handleDrag);
    document.addEventListener("mouseup", handleMouseUp);
  };

  return (
    <div
      style={{
        top: `${dragContext.state.elements[props.id].position.y}px`,
        left: `${dragContext.state.elements[props.id].position.x}px`,
      }}
      classList={{
        "fixed h-40 w-40 rounded bg-blue3": true,
        "border-4 border-orange6":
          !!dragContext.state.selectedElementIds.includes(props.id),
      }}
      onMouseDown={handleMouseDown}
    />
  );
};
50 replies
SSolidJS
Created by jesseb34r on 4/11/2023 in #support
create-jd-app auth.ts type error
4 replies
SSolidJS
Created by jesseb34r on 4/6/2023 in #support
how to add function call into JSX
I have a component setup like 
<GameRoot>
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>
<GameRoot>
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>
where GameRoot is a context provider that sets up a game state and stores a list of card ids for each zone. For testing purposes I want to load some initial cards into the state. Can I put a function call to my setState function in the JSX? I've tried a couple things that felt intuitive to me but am not figuring it out. I could pass some initial state into the GameRoot component with props but that isn't how I want to implement it in the end so I would rather not
5 replies
SSolidJS
Created by jesseb34r on 3/9/2023 in #support
Redirect to current location from createServerAction$()
I have a logout action that I would like to logout the user without changing the location. My current code looks like this: 
const [, logOut] = createServerAction$(async (_, { request }) => {
  const session = await storage.getSession(request.headers.get('Cookie'));
  return redirect('/', {
    headers: {
      'Set-Cookie': await storage.destroySession(session),
    },
  });
});
const [, logOut] = createServerAction$(async (_, { request }) => {
  const session = await storage.getSession(request.headers.get('Cookie'));
  return redirect('/', {
    headers: {
      'Set-Cookie': await storage.destroySession(session),
    },
  });
});
This code is functional but it redirects to the home page of my app. I can't use useLocation() in a server action, so is there a way to do this without redirecting to the home page?
7 replies
SSolidJS
Created by jesseb34r on 1/19/2023 in #support
When is `keyed` useful for `<Show />`
The docs don't have a great explanation. My best understanding is that it allows you to use the value that the Show depends on in the rendering of the show but every time i've used a show it's been with a signal. Should I be using the keyed pattern or just reuse the signal? Example: 
// not keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
    >
      <span>{user()?.username}</span>
      <button>Log Out</button>
    </Show>
  );
};


// keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
      keyed
    >
      {(u) => (
        <span>{u.username}</span>
        <button>Log Out</button>
      )}
    </Show>
  );
};
// not keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
    >
      <span>{user()?.username}</span>
      <button>Log Out</button>
    </Show>
  );
};


// keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
      keyed
    >
      {(u) => (
        <span>{u.username}</span>
        <button>Log Out</button>
      )}
    </Show>
  );
};
55 replies
SSolidJS
Created by jesseb34r on 1/3/2023 in #support
Does mergeProps deep merge objects?
I have a syntax on my components where I define styles with an atoms prop like <MyComponent atoms={{*some styles}} />. As I am building out by components, I want to be able to set base styles with this prop but also allow the consumer of the component to define an atoms prop and have it merge with the base styles. I'm currently using lodash merge for this but was wondering if the mergeProps function could help here. Current Method: (<Text /> takes the atoms prop) 
import { merge } from 'lodash';
import { splitProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const [local, others] = splitProps(props, ['atoms']);

  return <Text atoms={merge({/*base styles*/}, local.atoms)} {...others} />;
};
import { merge } from 'lodash';
import { splitProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const [local, others] = splitProps(props, ['atoms']);

  return <Text atoms={merge({/*base styles*/}, local.atoms)} {...others} />;
};
Cleaner method that I am unsure if works: 
import { mergeProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const propsWithBaseStyles = mergeProps({atoms: {/*base styles*/}, props);

  return <Text {...propsWithBaseStyles} />;
}
import { mergeProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const propsWithBaseStyles = mergeProps({atoms: {/*base styles*/}, props);

  return <Text {...propsWithBaseStyles} />;
}
3 replies
SSolidJS
Created by jesseb34r on 12/30/2022 in #support
How does height of the body work in Solid Playground?
This may just be a lack of understanding of CSS but in my defense, CSS is hard. Here is the link to the component I'm prototyping in the playground: https://playground.solidjs.com/anonymous/962a237f-cfbd-4a77-bc7f-f2034bdbd5fa. What I'm wondering is why my Open Modal button is centered on the height of the window without considering the console whereas the actual modal is centered in the viewable space accounting for the console. The button is centered in a flexc container with a height of 100vh whereas the modal is centered with position: absolute, top: '50%', left: '50%', transform: 'translate(-50%, -50%)'. Is this a specific behavior of the solid playground or is this a CSS specific thing with heights that I don't understand?
6 replies
SSolidJS
Created by jesseb34r on 12/28/2022 in #support
Solid Playground error in style tags
6 replies
SSolidJS
Created by jesseb34r on 12/16/2022 in #support
function MyComponent() vs arrow function Component
I am relatively new to the design space of component systems and figuring it all out. I still don't understand the tradeoffs and standards for why to use different syntaxes for declaring components. Basically, what is the best way or what are the tradeoffs between defining components in these different ways? 
const MyComponent = (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default MyComponent
const MyComponent = (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default MyComponent
export default (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default function MyComponent(props) {
  // logic
  return (
    <div>{content}</div>
  );
};
export default function MyComponent(props) {
  // logic
  return (
    <div>{content}</div>
  );
};
10 replies
SSolidJS
Created by jesseb34r on 12/14/2022 in #support
Is `style={}` performant?
I am using Vanilla Extract's Sprinkles API in my project to get static performance and a css-in-js feel but I can't put every style I need in a utility class. For instance sometimes I want to define a specific grid layout or gradient background. As far as I can tell my best options are using a style tag inline in the element which puts the css rules all together or to use vanilla extract's css modules which defines those specific styles in a separate file. What I don't know is the difference in performance between them. I know that in html the style tag is seen as not performant, is Solid different? Example with style tags: (I like this but don't know about performance) 
// Hero.tsx
const Hero = () => ({
  <div
    class={sprinkles({
      height: 40,
      display: 'flex',
      flexDirection: 'column',  
      justifyContent: 'center',
      alignItems: 'center',
    })}
    style={
      background-image: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`
    }
  >
    {content}
  </div>
})
// Hero.tsx
const Hero = () => ({
  <div
    class={sprinkles({
      height: 40,
      display: 'flex',
      flexDirection: 'column',  
      justifyContent: 'center',
      alignItems: 'center',
    })}
    style={
      background-image: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`
    }
  >
    {content}
  </div>
})
Example with modules: (what I'm doing now but it's a bit clunky and I'd like to use the css in js patterns) 
// Hero.tsx
const Hero = () => {
  <div class={styles.hero}>{content}</div>
}

// Hero.css.ts
export const hero = style([
  sprinkles({
    height: 40,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }),
  {
    backgroundImage: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`,
  },
]);
// Hero.tsx
const Hero = () => {
  <div class={styles.hero}>{content}</div>
}

// Hero.css.ts
export const hero = style([
  sprinkles({
    height: 40,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }),
  {
    backgroundImage: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`,
  },
]);
10 replies