create tools folder

demos/counter-element/counter-element.ts

@@ -1,11 +1,10 @@
 import { CustomElement } from 'custom-elements-ts';
 
 @CustomElement({
-  tag: 'counter-element',
-  templateUrl: 'counter-element.html',
-  styleUrls: ['counter-element.scss']
+  templateUrl: './counter-element.html',
+  styleUrl: './counter-element.scss'
 })
-export class CounterElement extends HTMLElement {
+export class CustomCounter extends HTMLElement {
 
   static get observedAttributes() {
     return ['count'];
@@ -31,8 +30,6 @@ export class CounterElement extends HTMLElement {
     this.showCount();
   }
 
-  disconnectedCallback() {}
-
   attributeChangedCallback(
     name: string,
     oldValue: string,

package.json

@@ -5,20 +5,22 @@
   "main": "index.js",
   "module": "dist/custom-element.js",
   "scripts": {
-    "build": "rm -rf dist && tsc -p src/tsconfig.json",
-    "start": "node ./scripts/start.js"
+    "build": "node tools/build.js",
+    "start": "node tools/start.js"
   },
   "license": "MIT",
   "peerDependencies": {
     "@webcomponents/custom-elements": "1.1.2"
   },
   "devDependencies": {
     "@ngx-devtools/server": "1.9.2",
-    "@webcomponents/custom-elements": "1.1.2",
+    "chalk": "2.4.1",
     "node-sass": "4.9.2",
     "rollup": "0.62.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-typescript2": "0.15.1",
-    "terser": "3.7.7"
+    "terser": "3.7.7",
+    "typescript": "2.9.2"
   },
   "typings": "dist/index.d.ts",
   "contributors": [

src/custom-element.ts

@@ -2,8 +2,8 @@ export interface CustomElementMetadata {
   tag?: string;
   template?: string;
   templateUrl?: string;
-  styleUrls?: Array<string>;
-  styles?: Array<string>;
+  styleUrl?: string;
+  style?: string;
 }
 
 export const CustomElement = (args: CustomElementMetadata) => {
@@ -27,7 +27,7 @@ export const CustomElement = (args: CustomElementMetadata) => {
       render() {
         const template = document.createElement('template');
         template.innerHTML = `
-          <style>${args.styles ? args.styles.join(',') : ''}</style>
+          <style>${args.style ? args.style : ''}</style>
           ${args.template ? args.template : ''}`;
 
           this.shadowRoot.appendChild(document.importNode(template.content, true));

tools/build.js

@@ -0,0 +1,13 @@
+
+const { rollupBuild } = require('./rollup-build');
+const { config } = require('./rollup-config');
+const { clean } = require('./clean');
+const { inlineSources } = require('./inline-sources');
+
+const DEST_PATH = 'dist';
+const TMP_PATH = '.tmp';
+const SRC_PATH = 'src/**/*.ts';
+
+Promise.all([ clean(DEST_PATH), clean(TMP_PATH) ])
+  .then(() => inlineSources(SRC_PATH, TMP_PATH))
+  .then(() => rollupBuild(config));

tools/check-args.js

@@ -0,0 +1,11 @@
+const isProcess = (list) => {
+  let result = false;
+  const index = process.argv.findIndex(value => list.includes(value));
+  const isBoolean = (process.argv[index + 1] === 'true' || process.argv[index + 1] === 'false');
+  if (index >= 0) {
+    if (isBoolean || process.argv[index + 1] !== 'false') result = true;
+  }
+  return result;
+};
+
+exports.isProcess = isProcess;

tools/clean.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const fs = require('fs');
+
+const { rmdirAsync, lstatAsync, unlinkAsync, readdirAsync } = require('./files');
+const { startAsync, doneAsync } = require('./info');
+
+const clean = async (dir) => {
+  if (fs.existsSync(dir)) {
+    const files = await readdirAsync(dir);
+    await Promise.all(files.map(async (file) => {
+      const p = path.join(dir, file);
+      const stat = await lstatAsync(p);
+      if (stat.isDirectory()) {
+        await clean(p);
+      } else {
+        await startAsync('clean', `Removed file ${p}`)
+          .then(startTime => unlinkAsync(p).then(() => Promise.resolve(startTime)))
+          .then(startTime => doneAsync('clean', `Removed file ${p}`, startTime));
+      }
+    }));
+    await startAsync('clean', `Removed dir ${dir}`) 
+      .then(startTime => rmdirAsync(dir).then(() => Promise.resolve(startTime)))
+      .then(startTime => doneAsync('clean', `Removed dir ${dir}`, startTime));
+  }
+};
+
+exports.clean = clean;

tools/files.js

@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+
+const promisify = require('util').promisify;
+
+const walk = ({ dir, isRecursive = true, includes = [] }) => {
+  let results = [];
+  const rootDir = path.resolve(dir);
+  const files = fs.readdirSync(rootDir);
+  files.forEach(list => {
+    list = path.join(rootDir, list)
+    const stat = fs.statSync(list);
+    if (stat.isDirectory() && isRecursive) {
+      results = results.concat(walk(
+        { dir: list, isRecursive: isRecursive, includes: includes }
+      ));
+    } 
+    if (stat.isFile()) {
+      if (includes.length <= 0) { 
+        results.push(list);
+      } else if (includes.includes(path.extname(list))) {
+        results.push(list); 
+      }
+    }
+  });
+  return results;
+};
+
+const getDir = src => {
+  return (Array.isArray(src) ? src : [ src ])
+    .map(file => {
+      return { 
+        dir: path.dirname(file).replace('/**', ''),
+        isRecursive: file.includes('**'),
+        includes: [ path.extname(file) ]
+      };
+    })
+};
+
+const walkSync = ({ dir, isRecursive = true, includes = [] }) => {
+  return walk({ dir, isRecursive, includes});
+};
+
+const getFiles = src => {
+  return getDir(src).map(directory => walkSync({ 
+    dir: directory.dir, 
+    isRecursive: directory.isRecursive, 
+    includes: directory.includes 
+  }));
+};
+
+const writeFileAsync = promisify(fs.writeFile);
+const readFileAsync = promisify(fs.readFile);
+const copyFileAsync = promisify(fs.copyFile);
+const rmdirAsync = promisify(fs.rmdir);
+const lstatAsync = promisify(fs.lstat);
+const unlinkAsync = promisify(fs.unlink);
+const readdirAsync = promisify(fs.readdir);
+
+exports.getFiles = getFiles;
+exports.rmdirAsync = rmdirAsync;
+exports.lstatAsync = lstatAsync;
+exports.unlinkAsync = unlinkAsync;
+exports.readdirAsync = readdirAsync;
+exports.writeFileAsync = writeFileAsync;
+exports.readFileAsync = readFileAsync;
+exports.copyFileAsync = copyFileAsync;