crowned
crowned
PostsComments
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
Yupp
13 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
I'll push the code to a new repo when I get home.
13 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
Hi! I already ported it completely.
13 replies
SSolidJS
Created by binajmen on 4/20/2024 in #support
Is conditional rendering possible?
Okayy. I’ll check out the editor.
22 replies
SSolidJS
Created by binajmen on 4/20/2024 in #support
Is conditional rendering possible?
Is this VSCode? If so, what theme?
22 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
Hey. I just tried this (creating the signal in the hook and returning the setter) and it worked. Thanks a lot.
13 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
Okay. I'll try that once I get to my laptop.
13 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
But they all return undefined How can I properly pass the ref into the hook (and allow for updates)? Or is there a better or pre-made way to implement spatial naviagation in solidjs apps?
13 replies
SSolidJS
Created by crowned on 11/3/2023 in #support
I can't seem to get ref bindings correctly
And here is another: 
let ref;

onMount(() => {
  const node = ref;

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});
let ref;

onMount(() => {
  const node = ref;

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});
I have also tried this: 
let ref: Ref<any> = (el: any) => {
  return el;
};

onMount(() => {
  const node = ref();

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});
let ref: Ref<any> = (el: any) => {
  return el;
};

onMount(() => {
  const node = ref();

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});
13 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
Thank you to everyone who contributed and helped. 🤍
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
Okay, thank you for the advice. That means I’ll look at ways I can get a smoother change which means I’ll look into the virtualization next, then transitions.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
For reference, I have a createResource in the original code that fetches the data for pages when there is no data to display. And since the Resource is async, the page signal updates instantly. But when trying to access already saved data in the media signal, there is a delay.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
What do you think? Is there a better/smarter way?
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
So I update the Sidebar first, then after that I update the MediaCards or something like that.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
One way I thought of is by creating the illusion of a smoother UI by first rendering Skeleton Loading Cards before updating them to the actual cards.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
Yes, I understand that. But in the case that there are a 1001 elements to update, how do I make sure 1 specific element is updated before the rest.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
I'll implement the spatial-nav, then the virtual-list and see what happens.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
Spatial Navigation involves navigating the UI using keyboard keys (or a remote). It usually involves getting a map of all the available elements and determining the next best one to navigate to depending on the direction key/button pressed so a virtual-list would interfere with that.
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
It sounds weird to create 2 signals so I thought there may be a better way or something I'm missing
61 replies
SSolidJS
Created by crowned on 10/30/2023 in #support
How to allow updating of elements instead of destroying and rendering the elements?
Also, how can I make it such that the page signal updates quickly while the media is still updating in the UI. Unless, I create 2 page signals. One for the MediaCards updating and one for the sidebar/other things I need to update quickly.
61 replies