#! /usr/bin/env node
require('es.shim')
const log = console.log
const fs = require('iofs')
const path = require('path')
const scss = require('node-sass')
const chalk = require('chalk')
const uglify = require('uglify-es')
const sourceDir = path.resolve(__dirname, 'src')
const buildDir = path.resolve(__dirname, 'dist')
const VERSION = require('./package.json').version
const BUILD_DATE = new Date().format()
const BASE_SCSS = `
$ct: #3fc2a7 #19b491 #16967a;
$cg: #58d68d #2ecc71 #27ae60;
$cpp: #ac61ce #9b59b6 #8e44ad;
$cb: #66b1ff #409eff #3a8ee6;
$cr: #ff5061 #eb3b48 #ce3742;
$co: #ffb618 #f39c12 #e67e22;
$cp: #f3f5fb #e8ebf4 #dae1e9;
$cgr: #aabac3 #90a3ae #7e909a;
$cd: #62778d #526273 #425064;
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
transition:$c $t $m;
}
@mixin focus1(){
box-shadow: 0 0 2px #88f7df;
}
@mixin focus2(){
box-shadow: 0 0 2px #f3be4d;
}
* {
box-sizing: border-box;
margin: 0;padding: 0;
}
::before,
::after{box-sizing:border-box;}
`
function fixImport(str) {
return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
.replace(
/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
}
const compileJs = (entry, output) => {
let t1 = Date.now()
let buf = fs.cat(entry).toString()
buf = fixImport(buf)
let { code } = uglify.minify(buf)
log(
'编译JS: %s, 耗时 %s ms',
chalk.green(entry),
chalk.yellow(Date.now() - t1)
)
fs.echo(code, output)
}
// 编译样式
function compileScss(code = '') {
try {
return scss.renderSync({
data: BASE_SCSS + code,
outputStyle: 'compressed'
}).css
} catch (err) {
log(err)
}
}
function mkWCFile({ style, html, js }) {
style = compileScss(style)
html = html.replace(/[\n\r]+/g, ' ')
html = html.replace(/\s+/g, ' ')
let name = ''
let props = ''
js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
props = m
var attr = new Function(
`var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
)()
return `static get observedAttributes() {
return ${JSON.stringify(attr)}
}
`
})
js = fixImport(js)
.replace(/class ([a-zA-Z0-9]+)/, function(s, m) {
name = m
return `${s} extends HTMLElement `
})
.replace(/__init__\(\)\s+\{/, 'constructor() {\n super();')
.replace(
'/* render */',
`
Object.defineProperty(this, 'root', {
value: this.attachShadow({ mode: 'open' }),
writable: true,
enumerable: false,
configurable: true
})
Object.defineProperty(this, 'props', {
value: ${props},
writable: true,
enumerable: false,
configurable: true
})
this.root.innerHTML = \`${html}\`
`
)
.replace('mounted()', 'connectedCallback()')
.replace('unmount()', 'disconnectedCallback()')
.replace(
'watch() {',
'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
)
.replace('adopted()', 'adoptedCallback()')
let res = uglify.minify(js)
return `/**
*
* @authors yutent (yutent@doui.cc)
* @date ${BUILD_DATE}
* @version v${VERSION}
*
*/
'use strict'
${res.code}
if(!customElements.get('wc-${name.toLowerCase()}')){
customElements.define('wc-${name.toLowerCase()}', ${name})
}
`
}
const compileWC = (entry, output) => {
log('编译wc: %s', chalk.green(entry))
let code = fs.cat(entry).toString()
let style = code.match(/