

Bee - A Collection of lightweight Dart Web UI Components - benfreu
https://www.blossom.io/bee

======
mrspeaker
I don't know the dart Web UI package - but from the example code:

    
    
        <span on-click="query('.q-example-overlay').xtag.show()">Launch Overlay</span>
        <x-overlay width="600px" class="q-example-overlay">
    

Does that then get transpiled into valid HTML (and inline javascript?) or is
that what's actually served to the browser?

~~~
nik-graf
Sorry for the late reply.

Right now there is a lot of stuff happening to simulate Web Components. Going
forward they will become a W3C Standard and we can reduce the complexity. You
might want to look at the current Draft
[https://dvcs.w3.org/hg/webcomponents/raw-
file/tip/explainer/...](https://dvcs.w3.org/hg/webcomponents/raw-
file/tip/explainer/index.html)

What’s happening at the moment is that the output for <x-loading></x-loading>
is:

    
    
        <span is="x-loading">
          <style>
            @-webkit-keyframes x-loading-dot {
              0% {
              opacity: 1;
              }
              50% {
              opacity: 0;
              }
              100% {
              opacity: 1;
              }
            }
            .x-loading-one {
              opacity: 1;
              -webkit-animation: x-loading-dot 1.3s infinite;
              -webkit-animation-delay: 0.0s;
            }
            .x-loading-two {
              opacity: 1;
              -webkit-animation: x-loading-dot 1.3s infinite;
              -webkit-animation-delay: 0.2s;
            }
            .x-loading-three {
              opacity: 1;
              -webkit-animation: x-loading-dot 1.3s infinite;
              -webkit-animation-delay: 0.3s;
            }
          </style>
          <span class="q-x-loading" style="color: rgb(80, 80, 80);">
            <span class="x-loading-one">.</span><span class="x-loading-two">.</span><span class="x-loading-three">.</span>
          </span>
        </span>
    

If a component like the overlay also contains logic the code will be added to
your compiled and minified JavaScript output.

For blossom.io/bee you can find the compiled output here
[https://www.blossom.io/bee_documentation.html_bootstrap.dart...](https://www.blossom.io/bee_documentation.html_bootstrap.dart.js)

