0

I am trying to obtain all the properties defined in a StencilJS web component class from another FW, which is similar to React but proprietary (so unfortunately I can't publish a working snippet).

This is how the props are defined in the source code from the Stencil component class:

import { EventEmitter } from '@stencil/core';
import { CssClassMap } from '../../utils/utils';
import { StyleSheet } from 'jss';
import Base from '../../utils/base-interface';

export declare class Link implements Base {
    /** (optional) Tag class */
    customClass?: string;
    /** (optional) Tag size */
    size?: string;
    /** (optional) Tag variant */
    variant?: string;
    /** (optional) Tag href */
    href?: string;
    /** (optional) Tag target */
    target?: string;
    
    /** (optional) Close icon click event */
    linkClose: EventEmitter<MouseEvent>;
    componentWillUpdate(): void;
    componentDidUnload(): void;
    handleClose(event: any): void;
    render(): any;
}

I can't find anywhere in the Stencil documentation how to get a list of those props. In input I have its ref or the node element obtained through simple document.querySelector in the componentDidMount function.

Any ideas about how to achieve that and if that is possible?

Thank you.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Micky
  • 647
  • 1
  • 11
  • 26
  • 1
    FYI In dev builds there is a `window.stencil.inspect` method to get some component metadata, see this issue: https://github.com/ionic-team/stencil/issues/2190 – Thomas Feb 25 '21 at 13:08
  • Thanks so much, @Thomas. That's what I need! I will monitor the progress of that issue – Micky Feb 25 '21 at 14:20
  • 1
    I initially created it over a year ago so I wouldn't be too hopeful it will actually get implemented (although I never really pushed it). Also, my proposed code change would only work in dev builds and personally I wouldn't think it belongs in production builds. But since the solution is simply to expose an internal function cloning it shouldn't create too much work. I also just posted on the [Stencil Slack](https://stencil-worldwide.herokuapp.com/) to see if there is enough demand. Make sure to give the GitHub issue a thumbs up. – Thomas Feb 25 '21 at 16:49

1 Answers1

1

Try accessing through attributes (that's equal to Stencil props)

const attributes = [];
const ref = document.querySelector('yourWebComponent');
for (i = 0, atts = ref.attributes, n = atts.length, arr = []; i < n; i++){
  attributes.push(atts[i].nodeName);
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
AdriSolid
  • 2,570
  • 1
  • 7
  • 17
  • Thanks for your answer, @AdriSolid. Unfortunately the props are spread along component children elements too:-( So attributes key returns only a limited list of them. My goal is to write a kind of wrapper to make them available in our FW and so trying to obtain them (properties and data type) dynamically and as declared. Maybe there is a way to access a specific component class definition through a Stencil package... (which clearly I am not aware of..) – Micky Feb 25 '21 at 09:54