use directive on custom component

[ptrckhjnl]

Is it possible to use the use directive (https://www.solidjs.com/docs/latest/api#use%3A___) on a custom component?

It seems like it only works for built-in html tags like <input>, <button>, ...

I wanted to use a similar validation logic like in the forms example (https://www.solidjs.com/examples/forms) but on a custom <TextInput> component.

[ryansolid]

No it is not currently possible. Components have no instance to attach to, and use uses an in scope compiler trick to get the directive which isn't possible for out of scope things like other files or even spread handling. This comes with the territory on this approach and why Svelte also doesn't support use directives on their Components.

[levibassey]

Components have no instance to attach to

and why Svelte also doesn't support use directives on their Components.

@ryansolid you might want to check this out sveltejs/svelte#15000, the svelte team have changed their stance on this, though they introduced new syntax to replace the use: directive.

Could we have something similar in solidjs, doesn't have to be the same syntax we can keep the current one, with just the addition that we can pass use: directives through components and spread them on the desired element

[levibassey]

Being able to do this might make it so that we no longer need refs because this

import { Button } from "./button.jsx";

function App() {
  const [buttonOne, setButtonOne] = createSignal();
  const [buttonTwo, setButtonTwo] = createSignal();

  return (
   <>
    <button use:setButtonOne></button>
    <Button use:setButtonTwo></Button>
   </>
  );
}

would just work, making it possible to merge ref and use: into a single API

[levibassey]

This would make it so code like this

function App() {
  const [input, setInput] = createSignal();

  createFocus(input, {...});

  return (
    <>
      <InputField ref={setInput} />
    </>
  );
}

could be simplified with use:

function App() {

  return (
   <>
    <InputField use:createFocus={{...}}/>
   </>
  );
}

you could even write it the first way with use: if you wanted

function App() {
  const [input, setInput] = createSignal();

  createFocus(input, {...});

  return (
    <>
      <InputField use:setInput />
    </>
  );
}

all in all, I think use: that can be passed through components is way more flexible than refs

[ryansolid]

Looking at attachments it is just the function form of refs with slightly different syntax. The positive is it can pass multiple refs, the negative is sort of bypasses TypeScript.

I don't know how this works with prop manipulation like prop splitting as the name is unknown. Svelte appears to be assigning it to unknown symbol which is fine if everything is going to the same element in your component but not if it can go to others. But it makes it harder to manually intercept as there could any number of these with unknown names.

That's sort of the problem conceptually with composition with ref/use. The outside user has to know what they are dealing with which suggests it is only useful for components that represent single DOM elements. Although to be fair the reference could be whatever the component wants to pass back.

What you really want is for all of these to register on props.ref but that is difficult with a compiler only approach due to spreads. Refs being singular actually make this straightforward as they override rather than merge.

There have been proposals for array refs which arguably is a bit better than this I think. Still a bit clunky though for manual setting. A setter might be interesting way to address that though.

[pablomayobre]

Assume I'm dumb and I don't understand all the details from Ryan's comment. I just wanna ask why can't this be handled through ref forwarding as well?

function App() {

  return (
   <>
    <InputField use:createFocus={{...}}/>
   </>
  );
}

function InputField (props) {
  return (<input ref={props.ref} />)
}

createFocus receives the input element as first argument, since that's what the ref points at.

Is this too hard on the compiler? Are there blindspots here?

[Ofsen]

Hello, Is there any news about this ?

[CGamesPlay]

I am experimenting with Solid JS and just encountered this issue. This is conceptually unexpected behavior that doesn't seem to make sense.

1. We can forward refs through custom components.
2. Directives are "just a syntactic sugar over ref".
3. A use directive "isn't possible for out of scope things like other files or even spread handling." (comment in this thread from 2021)

The current behavior (Solid 1.8) is to silently discard the use directive with no error or warning. It seems like, if the first two points are true, that we can sidestep the sugaring and everything should work fine. I don't know if this is true in general, but it certainly works in my limited test (below). I don't know enough of the model to understand why this isn't suitable behavior for the general case, but something in the documentation/code doesn't match up here.

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function defaultValue(el) {
  el.value = "success";
}

function CustomInput(props) {
  return (
    <input {...props} />
  );
}

function App() {
  return (
    <div>
      Native <input use:defaultValue />
      <br/>
      Sugar <CustomInput use:defaultValue />
      <br/>
      Ref <CustomInput ref={el => defaultValue(el)} />
    </div>
  )
}

render(() => <App />, document.getElementById("app")!);