TypeScript: Undefined directives when imported

[targetlucked69]

Hello, this is an issue related to isaacHagoel/solid-dnd-directive#6

When creating directive on the same file, it works as expected. But once you try to put it in another file and import it, you get a directive_name is not defined. Am I missing something?

// directive.tsx or .ts
function model(el: Element, value) {
  const [field, setField] = value();
  createRenderEffect(() => (el.value = field()));
  el.addEventListener("input", (e) => setField(e.target.value));
}

export default model

// App.tsx
import { Component, createSignal } from "solid-js";
import model from './directive'

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any];
    }
  }
}

const App: Component = () => {
  const [name, setName] = createSignal("");

  return (
    <div>
      <input type="text" use:model={[name, setName]} />;
    </div>
  );
};

export default App;

I am using vite btw.

UPDATE: It works without TypeScript.

[ryansolid]

Yeah, I realized after releasing the feature that TS strips imports away that aren't used. You can assign it to a local variable to make it not do that. Or tell TS to only strip away type imports. Although the latter forces all type imports to look like import type { SomType } from "some-module" which probably breaks some other things.

[targetlucked69]

I see. So solution is something like this then

import { Component, createSignal } from "solid-js";
import modelDirective from './directive'

const model = modelDirective

[mdawar]

You can also just reference the import without assigning it to a variable (Source: TypeScript FAQ).

import modelDirective from './directive';
modelDirective; // Preserve the import.

[LiMao00]

import modelDirective from './directive';
modelDirective; // Preserve the import.

The code is too bloated with so many commands, and the more instructions there are, the more redundant code there is. It's frustrating that even in 2024, this issue persists.