shoelace-style / shoemaker Goto Github PK

There seems be a lack of internal testing in the core library, guides for how to test components written in Shoemaker, or any tests downstream in Shoelace.

What is the plan for testing?

While Stencil distinguishes between @Prop and @State and lit-element distinguishes between @property and @internalProperty Shomaker only has one static props = [...] for both of them.
It's currenty really confusing in Shoemaker to find out whether a given component prop is meant to be internal or external.
In TypeScript the interal props may be declared as private (as done in Shoelace) but in pure JavaScript it's not really possible to see what's an internal prop and what's an external props.

Please have a look at the Counter example in the Shoemaker docs
(https://github.com/shoelace-style/shoemaker#your-first-component):
In the JavaScript version it's not possible to decide whether prop count is internal or external (it may be external because it's count and not _count, but who knows?).
In the TypeScript version it looks like prop count is external as the property is public (maybe something like @Prop({ mutable: true }) in Stencil).
Last but not least my intuition tells me that prop count was meant to be internal and the private modifier is just accidentally missing in the TypeScript version.

Why not just adding something like static internalProps = [...] (or whatever) to make things clearer?
Would also help to find bugs.

BTW: Sooner or later Shoelace surely will add something like the following again where the distinction between props and internalProps could also help (while not absolutely necessary) to detect subtle type issues.

https://unpkg.com/browse/@shoelace-style/[email protected]/dist/types/components.d.ts

[...]
export namespace JSX {
  interface IntrinsicElements {
    "sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
    "sl-animation": LocalJSX.SlAnimation & JSXBase.HTMLAttributes<HTMLSlAnimationElement>;
    "sl-avatar": LocalJSX.SlAvatar & JSXBase.HTMLAttributes<HTMLSlAvatarElement>;
    "sl-badge": LocalJSX.SlBadge & JSXBase.HTMLAttributes<HTMLSlBadgeElement>;
    [...]
  }
}
[...]

Or am I just missing something?

@claviska Great project! Not really sure whether you already like to get feedback regarding the Shoemaker project, but there are quite some issues with attribute handling in the early beta version of Shoemaker.

This is only one of several issues:
https://codesandbox.io/s/shoemaker-attribute-handling-f5290?file=/src/index.js

Please let me know whether my feedback is just too early or whether you would like me to list all attribute specific issues that I know of (this will take some time to prepare - that's why I ask first, because if I am just "too early" then I could save that time 😉)