tes
trucks-example-skate-component
npm i trucks-example-skate-component
tes

trucks-example-skate-component

Web component compiler and package manager

by muji

1.0.5 (see all)License:MITTypeScript:Not Found
npm i trucks-example-skate-component
Readme

Skate Example

This document demonstrates using the skate compiler transform.

Install

npm i trucks-example-skate-component

To build this example install the command line interface npm i -g trucks and dependencies npm i then run:

trucks

Open index.html to see the rendered component or serve over HTTP with node server.js and visit http://localhost:3000.



Compiler Options

module.exports = {
  files: [__dirname + '/components.html'],
  transforms: ['trim', 'csp', 'skate', 'bundle', 'copy'],
  out: 'build',
  force: true,
  css: false,
  html: false,
  copy: {
    files: {
      'index.html': 'index.html'
    } 
  },
  conf: {
    transforms: {
      csp: {
        sha: 'sha256',
        statics: true 
      },
      bundle: {
        js: [require.resolve('skatejs/dist/index-with-deps.js')]
      }
    }
  }
}

Source Files

Component definition file components.html:

<dom-module id="x-panel">

  <template>
    <style>
      /*
        Inline styles for the shadow DOM.
      */
      * {
        font-family: sans-serif;
        color: white;
      }

      p, ::content p {
        margin: 0; 
        padding: 1em;
      }

      .title {
        background: black;
        cursor: pointer;
      }

      .content {
        min-height: 10em;
        background: gray;
      }
    </style>

    <div class="container">
      <p onclick="this.titleClick" class="title">${this.title}</p>
      <div class="content">
        <slot name="content"></slot>
        <ul class="items">
          <script>
            this.values.forEach((item) => {
              html(`<li>${item}</li>`); 
            })
          </script>
        </ul>
        <script>
          if(this.lang) {
            partial('current');
          }
        </script>
      </div>
    </div>
  </template>

  <template id="current">
    <p>Current language: <em>${this.lang.toLowerCase()}</em></p> 
  </template>

  <script>
    skate.define('{{id}}', {
      props: {
        lang: {
          attribute: true 
        },
        values: {
          attribute: true,
          deserialize (val) {
            return val.split(/\s*,\s*/);
          },
          serialize (val) {
            return val.join(',');
          }
        }
      },
      prototype: {
        titleClick(e) {
          console.log('click: ' + e.currentTarget.tagName.toLowerCase());
          console.log(this);
        }
      },
      render: template
    });
  </script>
</dom-module>

Markup

Example component usage in index.html:

<!doctype html>
<html>
  <head>
    <script src="components.js"></script>
  </head>
  <body>
    <x-panel title="Languages" lang="English" values="English, French, Spanish">
      <p slot="content">Choose your language preference</p> 
    </x-panel>
  </body>
</html>

Created by mkdoc on August 2, 2016

Downloads/wk

7

GitHub Stars

11

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.5
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate