Can't access HTMLAttributes through JSX or JSXBase

[Nxt3]

I have a type created so I can extract Props from components:

  import { EventEmitter } from '@stencil/core';
  import { HTMLAttributes } from 'react';

  import { JSX as ProjectJSX } from '../../components';

  type ComponentStep = 'step-a' | 'step-b' | 'step-c';
  export type Tag<S extends ComponentStep> = `${'my-selector-prefix'-${ComponentStep}`;

  /**
   * This will strip out any native HTML attributes and event listeners
   * from the component props, leaving only the @Props() defined in a step.
   */
  namespace ComponentStepAttributes {
    // All JSX attributes (native HTML + @Prop()s) for the given step component tag.
    type AllStepAttributes<S extends ComponentStep> = ProjectJSX.IntrinsicElements[Tag<S>];

    // Extract keys that look like event-listeners (start with "on")
    type EventKeys<P> = {
      [K in keyof P]: K extends `on${string}` ? K : never;
    }[keyof P];

    /**
     * Extracts only the component-defined @Prop() attributes
     * for the given step tag, omitting any native HTML attributes or
     * event listener props.
     */
    export type Props<S extends ComponentStep> = Omit<
      AllStepAttributes<S>,
      EventKeys<AllStepAttributes<S>> | keyof React.HTMLAttributes<AllStepAttributes<S>>
    >;
  }

The above works, but I'm currently importing HTMLAttributes from a non-Stencil source to achieve this.

Per Stencil documentation, I should be able to import JSXBase and use HTMLAttributes. Unfortunately, it seems JSXBase is no longer exported from @stencil/core.

How can I get access to HTMLAttributes w/o accessing private interfaces? Is it no longer possible to do this?

Related issue

Versions

"@stencil/core": "4.18.3"

[christian-bromann]

@Nxt3 thanks for raising the issue. JSXBase is part of @stencil/core/internal, can you accessing by importing it via import type { JSXBase } from '@stencil/core/internal'?

[Nxt3]

Unfortunately in my project, I'm forbidden from deep imports. (i.e @*/*/*)

Is importing from @stencil/core/internal an acceptable practice for consumers?

[christian-bromann]

Is importing from @stencil/core/internal an acceptable practice for consumers?

Yes. If we wouldn't want users to import them, we wouldn't have exported them in Stencil.

[christian-bromann]

Unfortunately in my project, I'm forbidden from deep imports. (i.e @*/*/*)

I don't think this is a practical linting rule. I understand that you want to avoid having folks import from dist or build directories directly but with ESM it is common practices to have multiple export paths.

[Nxt3]

Is importing from @stencil/core/internal an acceptable practice for consumers?

Yes. If we wouldn't want users to import them, we wouldn't have exported them in Stencil.

Thank you for the confirmation. I'll likely get an exception for this import then. Using JSXBase.HTMLAttributes solves my issue.

Thanks!