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.

[ptrckhjnl]

Maybe this could be written in the documentation? Could have saved me some trouble 😅

[ryansolid]

Yeah I agree. Better to explicitly call it out. The docs describe what you can do but not what you can't. It's always the omissions that are harder to see. Thank you.

[SmartNetAR]

maybe not the best way, but I solved it by passing it through props. You can see it in our repository https://github.com/DigiChanges/solid-components/blob/master/src/atoms/Input/Input.tsx

[tennox]

after finding this out the hard way, I've added a warning to the docs - solidjs/solid-docs#952

[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")!);