Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

package published incorrectly and fails type checking in consuming projects #190

Closed
NullVoxPopuli opened this issue Apr 14, 2024 · 2 comments · Fixed by universal-ember/ember-primitives#289

Comments

@NullVoxPopuli
Copy link
Contributor

NullVoxPopuli commented Apr 14, 2024

From npm, the currently published assets:

Screenshot_20240414-085247
image-2~2

Idk what happened to that ember-modifier import, but that's not a valid syntax, afaik

@miguelcobain
Copy link
Contributor

From what I could understand, it seems that the problem is when TypeScript is generating the declaration file, more specifically the return type of modifier for the velcroHook property.
That's when it generates the import("ember-modifier/.") line:

velcroHook: import("ember-modifier/.").FunctionBasedModifier<{
    Element: HTMLElement | SVGElement;
    Args: {
        Named: import("ember-modifier/-private/signature").EmptyObject;
        Positional: [];
    };
}>;

However, if add the following lines on the component's index.ts file

import type { FunctionBasedModifier } from 'ember-modifier';
import type { EmptyObject } from 'ember-modifier/-private/signature.js';

Then this appears to serve as a "hint" to typescript, and the generated declaration is:

import { FunctionBasedModifier } from 'ember-modifier';
import { EmptyObject } from 'ember-modifier/-private/signature.js';

// ...

velcroHook: FunctionBasedModifier<{
    Element: HTMLElement | SVGElement;
    Args: {
        Named: EmptyObject;
        Positional: [];
    };
}>;

I lack the knowledge to instruct typescript to generate the correct declaration, but hopefully this helps.

@miguelcobain
Copy link
Contributor

Another find: in the consuming app, if I go into node_modules/ember-velcro/dist/components/velcro/index.d.ts and make this change

-velcroHook: import("ember-modifier/.").FunctionBasedModifier<{
+velcroHook: import("ember-modifier").FunctionBasedModifier<{
    Args: {
        Positional: unknown[];
        Named: import("ember-modifier/-private/signature").EmptyObject;
    };
    Element: HookSignature;
}>;

then the typecheck on the app works!
So, seems like the only problem is that /.. 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants