Evaluating stencil.js

[shumy]

There have been discussions about getting rid of jQuery. I believe this will be a good choice, but there should be a replacement. In the spirit of sticking with standards, I think you should evaluate the Stencil option. The are so many good advantages on this path:

Pros: 1) Stick with web-components standard and don't commit with any framework (Angular, React, etc). Don't fragment the Semantic-UI community. 2) No dependencies. The philosophy is the same as applied with Svelte 3) Mobile performance. The Ionic team is reporting amazing performance boosts, and they intend to use it in there own development. 4) Using modern tools for development (Typescript, JSX) without imposing any one on the users of components.

Cons: 1) Relatively new, and there are stuffs in the template standard that should be re-evaluated, like the tag.

I would love to see the Semantic-UI move forward, because in reality I haven't seen anything open source that compares to it.

[ansarizafar]

I totally agree with @shumy.

[riovir]

I've looked into if it's feasible to convert Semantic UI elements with Stencil. There were some tricky parts to tackle, but it seams doable.

DOM structure

Semantic UI components expect a specific DOM structure. Let's pick a dropdown. This renders fine:

<div class="ui selection dropdown">
  <input type="hidden" name="color">
  <i class="dropdown icon"></i>
  <div class="default text">Color</div>
  <div class="menu">
    <div class="item" data-value="1">Red</div>
    <div class="item" data-value="0">Green</div>
  </div>
</div>

With Stencil one could create an element like this:

<sui-dropdown text="Color" selection>
  <sui-dropdown-item value="1" text="Red"></sui-dropdown-item>
  <sui-dropdown-item value="2" text="Green"></sui-dropdown-item>
</sui-dropdown>

However without extra effort the resulting DOM structure would look something like this:

<sui-dropdown text="Color" selection>
  <div class="ui selection dropdown">
    <input type="hidden" name="color">
    <i class="dropdown icon"></i>
    <div class="default text">Color</div>
    <div class="menu">
      <sui-dropdown-item value="1" text="Red"><div class="item" data-value="1">Red</div></sui-dropdown-item>
      <sui-dropdown-item value="1" text="Red"><div class="item" data-value="0">Green</div></sui-dropdown-item>
    </div>
  </div>
</sui-dropdown>

Do notice that there is an extra element between the menu and it's item. The styling rules of Semantic UI will be off.

Possible workaround: Breaking the best practice of "Do not self-apply classes" (see: https://developers.google.com/web/fundamentals/web-components/best-practices). Semantic UI themes don't care about the right classes being applied to divs, or custom elements. (The only exception I found were the \<i> icons). With some extra code Stencil is able to sync the right classes directly to the custom element.

API that is a mix of React and jQuery editions

Stencil understands JSX just like React, however the API of a custom element is more limited than that of a React native component.

Note

For more details here is a Stencil based research page. The experimental Semantic components have the xui- prefix.

• demo: https://riovir.gitlab.io/riovir-components/
• page source: https://gitlab.com/riovir/riovir-components/blob/master/public/index.html
• components: https://gitlab.com/riovir/riovir-components/tree/master/src/components

[moda20]

This is really impressive it is quite inuitive too. is there any repo or package already being developped that supports stencil and semantic ?

[morganbarrett]

It's not stencil but check out https://github.com/morganbarrett/Vanilla-Semantic-UI

[balupton]

Quite a fan of the approach of using Stencil for Semantic UI. As it hits all the same needs for why Ionic Framework chose to use it, which are detailed in this talk: https://www.youtube.com/watch?v=UfD-k7aHkQE