Packaging Salesforce lightning web components

Question

I have Created few components for reusable purpose so end users can use the package and integrate with the application they are creating, for example (one of the component having @api property and a dispatch event):

<template>
    <div class="blocx-ratings">
        <div class="blocx-ratings_star">
            <template if:false={variant}>
            <ul>
                <template for:each={ratingLength} for:item="item">
                    <lightning-icon size={size} key={item} icon-name="utility:favorite"></lightning-icon>
                </template>
            </ul>
        </template>
        </div>
    </div>
</template>

---

import { LightningElement, api } from 'lwc';
import wcfBundle from '@salesforce/resourceUrl/wcfBundle';
import { loadStyle } from 'lightning/platformResourceLoader';
export default class BlocxRatings extends LightningElement {
    @api size = "large";
    @api variant ;
    @api value;
    ratingLength = [1, 2, 3, 4, 5];
    ratingValue = 0;
    renderedCallback() {
        loadStyle(this, wcfBundle);
        if(this.variant !== 'readonly'){
        this.onClick();
        }
        else{
        this.readOnlyRating(this.value);
        }
    }
    onClick() {
        const ul = this.template.querySelector('ul');
        const stars = this.template.querySelectorAll('lightning-icon')
        for (let i = 0; i <= stars.length - 1; i++) {
            stars[i].addEventListener('click', () => {
                this.ratingClicked(ul, i);
            })
        }
    }
    ratingClicked(element, value) {
        this.ratingValue = value + 1;
        for (let j = 0; j < element.children.length; j++) {
            element.children[j].classList.remove('blocx-ratings_star_active');
        }
        for (let j = 0; j <= value; j++) {
            element.children[j].classList.add('blocx-ratings_star_active');
        }
        this.dispatchEvent(new CustomEvent('ratingclick', { detail: { ratingValue: this.ratingValue } }))
    }
    readOnlyRating(value){
        value--;
        const ul = this.template.querySelector('ul');
        for (let j = 0; j <= value; j++) {
            ul.children[j].classList.add('blocx-ratings_star_active');
        }
    }
}

---

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__HomePage</target>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightningCommunity__Page</target>
      <target>lightningCommunity__Default</target>
    </targets> 
    <targetConfigs>
      <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage,lightningCommunity__Default">
          <property name="size" type="String" />
          <property name="variant" type="String" />
          <property name="value" type="String" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>`

if i'm creating the component as a package the source code should be disabled and when the end user makes use of the package. They should be able access the component using selector(ex:c-blocx-ratings), @api property as attributes and dispatch event as a handler.

I tried with Both Unmanaged and Managed;

1. In Unmanaged Package: Source code and attributes are visible (I don't want this way).
2. In Managed Package: Source code is hidden but attributes are also not accessible in code side.

Do we have any possibilities to access defined attributes within managed packages components?

Answer 1

If you include the properties and attrib definitions in file it will be available in lightning app builder etc this is your typical .js-meta.xml in lwc package.