trucks-example-skate-component
v1.0.5
Published
Skate compiler transform example
Downloads
18
Readme
Skate Example
This document demonstrates using the skate compiler transform.
Install
npm i trucks-example-skate-componentTo build this example install the command line interface npm i -g trucks and dependencies npm i then run:
trucksOpen 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