HN Explorer

3 comments

[ 1.5 ms ] story [ 19.7 ms ] thread
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/...

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...