Component namespacing (prefix)

[tanguyantoine]

Stencil version:

 @stencil/core@0.9.7

I'm submitting a:

• [ ] bug report
• [x] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Wouldn't if be awesome to remove unnecessary component scope specification across each codebase by simply provide and expected component tag name prefix ?

At the moment we must specify component prefix within each components

Ionic Team

// card.tsx
@Component({ tag: 'ion-card' })

// jumbotron.tsx
@Component({ tag: 'ion-jumbotron' })

Cinoi Team

// card.tsx
@Component({ tag: 'cin-card' })

// jumbotron.tsx
@Component({ tag: 'cin-jumbotron' })

Expected behavior:

Ionic Team

// card.tsx
@Component({ tag: 'card' })

// jumbotron.tsx
@Component({ tag: 'jumbotron' })

//stencil.config.js
{
  componentsPrefix: 'ion'
}

Cinoi Team

// card.tsx
@Component({ tag: 'card' })

// jumbotron.tsx
@Component({ tag: 'jumbotron' })

//stencil.config.js
{
  componentsPrefix: 'cin'
}

Other information:

Here's an simple implementation #843

This would replace jsx tag name accordingly to tag provided and the prefix given. Component conflict across web component would be avoided.

We would continue to write code as below during development :

@Component({ tag: 'card' })
class Card {
}

@Component({ tag: 'jumbotron' })
class Jumbotron {

  render() {
    return (
      <div>
        <card /> // card would be renamed ion-card during compilation/transpilation time
      <div>
  }
}

Questions

• What about improving the plugin system?
• Prevent specific scope? Ignore files to transform?

[tanguyantoine]

What about opening transformers configuration? Be able to add plugin as needed during transpile phase ?

That would be awesome to allow people to add before/after transformer to enhance transpiled code.

having the namespacing would be, in this case, a plugin you can add if you need this scope feature.

[adamdbradley]

https://github.com/ionic-team/stencil/pull/843#issuecomment-398878270