Quantcast
Channel: Active questions tagged config - Stack Overflow
Viewing all articles
Browse latest Browse all 5054

Stencil usage - how to load external dependent stencil component in stencil module - but not to add in final build

$
0
0

I am planning to create filter box web component using @stencil/core library.In this filter component, i need to load external atomic web components like (dropdown, input, radio) implemented using @stencil/core itself. But i dont want these external web component to be part of final bundle of filter web component

Usage:I want to use this filter component in host application using Angular.

And its responsibility of HOST application to import all atomic web component/external dependencies like dropdown/radio web component. Filter web component should not load these dependencies or take them in its build

Example:**Dropdown **component's tsx file - bundled as dropdown npm package

import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';@Component({  tag: 'my-dropdown',  styleUrl: 'dropdown.scss'})export class myDropdown {  /**   * @public   * @property items   *   * Defines the data that we want to load into our dropdown area   *    */  public items: Array<any> = [    {      heading: 'Virtual DOM',      description: 'A tree of custom objects representing a part of the DOM which can be acted upon quicker than manipulating the DOM itself'    },    {      heading: 'Async rendering',      description: 'Allows parts of a component state to be rendered asynchronously (I.e. via XHR)'    },    {      heading: 'Reactive data-binding',      description: 'Allows data binding to be implemented through binding a state variable to an onChange event which allows the state to be changed as the input value changes'    }  ];  /**   * @public   * @property name   * @type String   *   * This will accept values supplied by a name attribute    * on the component HTML   */  @Prop() name: string;  /**   * @type boolean   *   * This will track state changes (I.e. whether the    * dropdown component is open or closed)   */  @State() toggle: boolean = false;  @Event({    eventName: 'itemClicked',    composed: true,    bubbles: true,    cancelable: true  }) itemClicked: EventEmitter;  /**   * @type EventEmitter   *   * Track component events (I.e. activation of dropdown component)   */  @Event({    composed: true,    bubbles: true,    eventName: 'toggleDropdown',    cancelable: true  }) onToggle: EventEmitter;  /**   * @public   * @method toggleComponent   *   * This will manage the dropdown component event and state changes   */  toggleComponent(): void {    this.toggle = !this.toggle;    // When the user click emit the toggle state value    // A event can emit any type of value    this.onToggle.emit({ visible: this.toggle });  }  onListItemClicked(ind) {    console.log(ind);    this.itemClicked.emit({ index: ind });  }  /**    * Create HTML representation of component DOM and return this     for output to the browser DOM   */  render() {    return (<div class="container"><h2 onClick={() => this.toggleComponent()}>{this.name} {this.toggle ? <span>&#9650;</span> : <span>&#9660;</span>}</h2><ul class={this.toggle ? 'active' : 'inactive'}>          {this.items.map((item, index) => <li onClick={this.onListItemClicked.bind(this, index)}><h3>{item.heading}</h3><p>{item.description}</p></li>)}</ul></div>    )  }}

In my wrapper web component - MyComponent.tsx

import { Component, Prop, h, Listen } from '@stencil/core';import { IButtonClickEvent } from '../simple-button/simple-button.model';import 'dropdown';@Component({  tag: 'my-component',  styleUrl: 'my-component.css',  shadow: true})export class MyComponent {  /**   * The first name   */  @Prop() first: string;  /**   * The middle name   */  @Prop() middle: string;  /**   * The last name   */  @Prop() last: string;  private getText(): string {    return this.first + this.middle + this.last;  }  @Listen('buttonClicked')  onButtonClickHandler(evt:CustomEvent<IButtonClickEvent>){    console.log(evt)  }  @Listen('itemClicked')  itemClickedHandler(event: CustomEvent) {    console.log('Received the custom itemClicked event: ', event.detail);  }  render() {    return (<div class="container" style={{'font-size': '12px','padding':'10px','border':'2px solid red'     }}><div class="sc-abc abc">Hello, World! I'm {this.getText()}</div><simple-button type="raised" color="primary">Child</simple-button><my-dropdown name="Stencil key features"></my-dropdown></div>    );  }}

I m loading this dropdown using 'import dropdown' - this works fine.But issue with this is - stencil config considers this dropdown as well in final build of MyComponent. I want to ignore dropdown bundle to be included in final build.Host application (Angular app) to install and load dropdown as per requirement


Viewing all articles
Browse latest Browse all 5054

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>