_calvinandhobbes
_calvinandhobbes
PostsComments
SSolidJS
Created by _calvinandhobbes on 9/9/2023 in #support
Safari solid crash
In 16.6 I notice that solid can fail silently in my site using it with Astro + solid. It appears to be iPhone specific and solid specific. Other pieces of JS execute successfully. Does anyone else have a site that I can test a Astro solid+integration with? Or have any idea how I can get it to throw an error?
1 replies
SSolidJS
Created by _calvinandhobbes on 5/26/2023 in #support
how to get two class managers to cooperate on a single ref?
I’m making a currency input field that is supposed to interact with a 3rd party slider class that expects a native html input element to manipulate when the slider changes. So I’ve been trying to use the callback version of the ref to set the props.ref to a proxy wrapped version of the elements’s ref that can intercept the .value reads and writes the slider manager is trying to do. But I’m getting the error ”Cannot set properly ref of #<Object> which has only a getter” so I don’t think that’s possible. This all feels really janky though so is there a better way to get this to work? Right now they bounce back and forth between the numeric value and the currency value depending on who operated on the input field last.
1 replies
SSolidJS
Created by _calvinandhobbes on 4/13/2023 in #support
how to use createResource in Astro SSR
I’d like to use createResource in Astro. Right now I’m doing the data fetch in the Astro file and passing it to the Solid component as an attribute but it’s a 20kb response. I’d prefer if solid instead fetched the data and rendered the output with it and then only the final HTML was shipped down with the JavaScript to load the page. It would save a lot of time on download and parsing. How can I do this?
6 replies
SSolidJS
Created by _calvinandhobbes on 4/12/2023 in #support
How to extend native events
I have a CurrencyManager which handles when the user inputs a number and converts it to a currency in a input field and manages the cursor position. I'd like to add the unmasked and masked value from the manager to all of the events on the input field so end users have access to it. Maybe I'm overthinking the approach but right now I have a curried wrapper function that takes a function and returns a function that receives its native event and calls the original function with the data added to it. 
type CurrencyManager = () => {maskedValue: string, unmaskedValue: string}

type CurrencyEvent = Event & unmaskedVaalue:string & maskedValue: string

interface CurrencyInputProps extends HTMLInputElement {
  onInput: (e:CurrencyEvent) => void;
  //other event handlers
}

const CurrencyInput: Component<CurrencyInputProps> = (props) => {
let inputRef: HTMLInputElement;
let manager: CurrencyManger;
onMount(//initalize manager with input ref)
const wrapperFn = (fn:any) => (e:Event) => {
  const event = e as CurrencyEvent
  event.maskedValue = manager.maskedValue
  event.unmaskedValue = manager.unmaskedValue
  fn(event)
}
const wrappedOnInput = createMemo(()=>wrapperFn(props.onInput))

return <input ref={inputRef} onInput={wrappedOnInput()}/>
}
type CurrencyManager = () => {maskedValue: string, unmaskedValue: string}

type CurrencyEvent = Event & unmaskedVaalue:string & maskedValue: string

interface CurrencyInputProps extends HTMLInputElement {
  onInput: (e:CurrencyEvent) => void;
  //other event handlers
}

const CurrencyInput: Component<CurrencyInputProps> = (props) => {
let inputRef: HTMLInputElement;
let manager: CurrencyManger;
onMount(//initalize manager with input ref)
const wrapperFn = (fn:any) => (e:Event) => {
  const event = e as CurrencyEvent
  event.maskedValue = manager.maskedValue
  event.unmaskedValue = manager.unmaskedValue
  fn(event)
}
const wrappedOnInput = createMemo(()=>wrapperFn(props.onInput))

return <input ref={inputRef} onInput={wrappedOnInput()}/>
}
This all works, but it's making forwarding the ref to higher level components for them to manage the value nearly impossible. It's also annoying to have to do this for the 10+ types of input event handlers. Is there a cleaner way to implement this? Maybe having the currency manager intercept the input element's prototype with a proxy so I could do something like e.currentTarget.unmaskedValue and inputRef.disconnect() but I'm not sure how to do that and I know that's usually discouraged because of unexpected behavior/compatibility issues.
2 replies
SSolidJS
Created by _calvinandhobbes on 3/20/2023 in #support
does @solidjs/testing-library render shadowDom?
I'm trying to write unit tests for a custom element that wraps some elements inside a shadow DOM. The inner HTML of these and the shadow root's inner html doesn't include them even though they're available in browser. Does anyone have a workaround?
9 replies
SSolidJS
Created by _calvinandhobbes on 3/18/2023 in #support
Does anyone else find it annoying that you can't pass a store as a source signal for createResource?
I have a complex request to pass into the body of a POST request to an API. It has many different nested properties of various depths. I store the request in a solid createStore in the app, so I can efficently set it thoughout my app. But to make this system reactive, so Solid refetches content you have to pull off indvidual signals. I had to build a recursiveFlattener helper function to make it work so if I change any property in the request it refetches. Am I doing something wrong or is that annoying to anyone else. Shouldn't it be something that the compiler can take care of? Also, maybe a separate post but what's the right way to diff the large response from the resource in the right way? I see helpers like reconcile do I need that? Is there a better example than the docs? What if I needed optimistic updates? What if I need to do an infinite scroll like twitter? Just use solidQuery?
3 replies