Introducing Build Process (#7)

* Reorganized

* Adds travis

* Adds build badge

* More strict linting

* Bump version of mithril

* Sourcemaps only for watch, copy html to dist

* Adds save and load for styles

.eslintrc.json

@@ -0,0 +1,57 @@
+{
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "globals": {
+        "m": false,
+        "PIXI": false,
+        "hljs": false,
+        "saveAs": false
+    },
+    "env": {
+        "browser": true
+    },
+    "rules": {
+        "semi": [
+            "error",
+            "always"
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "curly": [
+            "error",
+            "all"
+        ],
+        "brace-style": [
+            "error",
+            "stroustrup",
+            { "allowSingleLine": false }
+        ],
+        "indent": [
+            "error",
+            4,
+            { "SwitchCase": 1 }
+        ],
+        "eqeqeq": [
+            "error",
+            "always"
+        ],
+        "no-var": [
+            "error"
+        ],
+        "no-console": [
+            "warn"
+        ],
+        "no-trailing-spaces": [
+            "warn"
+        ]
+    }
+}

.gitignore

@@ -0,0 +1,3 @@
+dist
+*.log
+node_modules

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+node_js:
+    - "6"
+
+dist: trusty
+
+install:
+    - npm install
+
+cache:
+  directories:
+    - node_modules
+
+script:
+  - npm test

README.md

@@ -1,5 +1,7 @@
 # PixiJS TextStyle Generator
 
+[![Build Status](https://travis-ci.org/pixijs/pixi-text-style.svg?branch=master)](https://travis-ci.org/pixijs/pixi-text-style)
+
 Interactive tool built with [Bootstrap](https://getbootstrap.com/) and [Mithril](https://mithril.js.org/) to generate code for the `PIXI.TextStyle` object. [Click here](https://pixijs.github.io/pixi-text-style/) to use the editor.
 
 ## Related

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "pixi-text-style",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "clean": "rimraf dist/*",
+    "prebuild": "npm run clean",
+    "lintfix": "eslint --fix src",
+    "build": "rollup -c",
+    "watch": "rollup -c --watch --sourcemap",
+    "test": "npm run build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
+  },
+  "author": "Matt Karl <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "cssnano": "^3.10.0",
+    "eslint": "^4.12.0",
+    "gh-pages": "^1.1.0",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.52.0",
+    "rollup-plugin-buble": "^0.18.0",
+    "rollup-plugin-copy": "^0.2.3",
+    "rollup-plugin-eslint": "^4.0.0",
+    "rollup-plugin-postcss": "^0.5.5",
+    "rollup-plugin-uglify": "^2.0.1"
+  }
+}

rollup.config.js

@@ -0,0 +1,44 @@
+import buble from 'rollup-plugin-buble';
+import uglify from 'rollup-plugin-uglify';
+import postcss from 'rollup-plugin-postcss';
+import eslint from 'rollup-plugin-eslint';
+import copy from 'rollup-plugin-copy';
+import cssnano from 'cssnano';
+
+const sourcemap = process.argv.indexOf('--sourcemap') > -1;
+const compiled = (new Date()).toUTCString().replace(/GMT/g, 'UTC')
+
+export default {
+    input: 'src/index.js',
+    output: {
+        format: 'iife',
+        file: 'dist/bundle.js',
+        sourcemap,
+        banner: `/*! PixiJS TextStyle (${compiled}) */`
+    },
+    plugins: [
+        copy({
+            'src/index.html': 'dist/index.html'
+        }),
+        eslint({
+            throwOnError: true,
+            include: 'src/**.js'
+        }),
+        postcss({
+            plugins: [cssnano],
+            sourceMap: sourcemap,
+            extract: true
+        }),
+        buble(),
+        uglify({
+            mangle: true,
+            compress: true,
+            output: {
+                comments(node, comment)
+                {
+                    return comment.line === 1;
+                },
+            },
+        })
+    ]
+}

js/TextStyleEditor.js → src/TextStyleEditor.js

@@ -1,10 +1,17 @@
-'use strict';
+import StyleBackgroundColor from './components/StyleBackgroundColor';
+import StyleCheckbox from './components/StyleCheckbox';
+import StyleColor from './components/StyleColor';
+import StyleColorGradient from './components/StyleColorGradient';
+import StyleNumber from './components/StyleNumber';
+import StyleSelect from './components/StyleSelect';
+import StyleStopPoints from './components/StyleStopPoints';
+import { deepCopy, deepEqual } from './utils';
 
 /**
  * TextStyle Component for Mithril
  * @class TextStyleEditor
  */
-class TextStyleEditor {
+export default class TextStyleEditor {
 
     constructor() {
         this.defaults = new PIXI.TextStyle();
@@ -87,7 +94,6 @@ class TextStyleEditor {
         const init = this.init.bind(this);
         const onText = this.onText.bind(this);
         const codeColor = this.codeColor.bind(this);
-        const resize = this.resize.bind(this);
         const reset = this.reset.bind(this);
         const onFormat = this.onFormat.bind(this);
         const onShorten = this.onShorten.bind(this);
@@ -272,7 +278,23 @@ class TextStyleEditor {
                 m('div.col-sm-6', [
                     m('h3', [
                         m('span.glyphicon.glyphicon-scissors'),
-                        m('span', 'JSON')
+                        m('span', 'JSON'),
+                        m('span.btn-group.pull-right', [
+                            m('button.btn.btn-primary.btn-sm', {
+                                onclick: this.onSave.bind(this)
+                            },[
+                                m('span.glyphicon.glyphicon-save'),
+                                m('span', 'Save')
+                            ]),
+                            m('span.btn.btn-primary.btn-sm.btn-file', [
+                                m('span.glyphicon.glyphicon-open'),
+                                m('span', 'Load'),
+                                m('input', {
+                                    type: 'file',
+                                    onchange: this.onLoad.bind(this)
+                                })
+                            ])
+                        ])
                     ]),
                     m('pre.code-display.hljs', [
                         m('code.json', {
@@ -379,6 +401,45 @@ class TextStyleEditor {
         m.redraw();
     }
 
+    onLoad(event) {
+        const input = event.target;
+        if (input.files.length !== 1) {
+            return;
+        }
+        if (!/\.json$/.test(input.files[0].name)) {
+            alert('Unable to load, must be a JSON file.');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const style = JSON.parse(reader.result);
+                deepCopy(this.style, this.defaults.toJSON());
+                deepCopy(this.style, style);
+                m.redraw();
+                this.app.render();
+            }
+            catch(e) {
+                alert('Unable to parse JSON file');
+            }
+        };
+        reader.readAsText(input.files[0]);
+    }
+
+    onSave() {
+        const style = this.style.toJSON();
+        for (const name in style) {
+            if (deepEqual(style[name], this.defaults[name])) {
+                delete style[name];
+            }
+        }
+        const data = JSON.stringify(style, null, this.getIndent());
+        const blob = new Blob([data], {
+            type: 'text/plain;charset=utf-8'
+        });
+        saveAs(blob, 'style.json');
+    }
+
     onShorten() {
         const url = 'https://www.googleapis.com/urlshortener/v1/url';
         const key = 'AIzaSyCc-YIpSnyqr3RQcBN8-s-8u8DRXGECon0';
@@ -387,9 +448,9 @@ class TextStyleEditor {
             url: `${url}?key=${key}`,
             data: { longUrl: document.location.href }
         })
-        .then((data) => {
-            this.shortenUrl = data.id;
-        });
+            .then((data) => {
+                this.shortenUrl = data.id;
+            });
     }
 
     reset() {
@@ -432,25 +493,28 @@ class TextStyleEditor {
         hljs.highlightBlock(element.dom);
     }
 
-    getCode(jsonOnly) {
-        const style = this.style.toJSON();
-        for (const name in style) {
-            if (deepEqual(style[name], this.defaults[name])) {
-                delete style[name];
-            }
-        }
-
+    getIndent() {
         let indent;
-        let pretty = false;
-
         switch(this.indent) {
             case TextStyleEditor.INDENT.SPACE_4: indent = '    '; break;
             case TextStyleEditor.INDENT.SPACE_3: indent = '   '; break;
             case TextStyleEditor.INDENT.SPACE_2: indent = '  '; break;
             case TextStyleEditor.INDENT.TAB: indent = '\t'; break;
-            case TextStyleEditor.INDENT.NONE_PRETTY: pretty = true; break;
             default: indent = ''; break;
         }
+        return indent;
+    }
+
+    getCode(jsonOnly) {
+        const style = this.style.toJSON();
+        for (const name in style) {
+            if (deepEqual(style[name], this.defaults[name])) {
+                delete style[name];
+            }
+        }
+
+        const indent = this.getIndent();
+        const pretty = TextStyleEditor.INDENT.NONE_PRETTY === this.indent;
 
         let data = JSON.stringify(style, null, indent);
 
@@ -483,18 +547,19 @@ class TextStyleEditor {
 
         if (data === '{}') {
             data = '';
-        } else {
-            data = data.replace(/\"([^\"]+)\"\:/g, '$1:')
-                .replace(/\"/g, "'")
-                .replace(/\\'/g, '"');
+        }
+        else {
+            data = data.replace(/"([^"]+)":/g, '$1:')
+                .replace(/"/g, '\'')
+                .replace(/'/g, '"');
 
             if (pretty) {
                 data = this.prettify(data);
             }
         }
 
         const text = this.text.text.replace(/\n/g, '\\n')
-            .replace(/\'/g, '\\\'');
+            .replace(/'/g, '\\\'');
 
         return `const style = new PIXI.TextStyle(${data});\n`
             + `const text = new PIXI.Text('${text}', style);`;

js/components/StyleBackgroundColor.js → src/components/StyleBackgroundColor.js

@@ -1,11 +1,11 @@
-'use strict';
+import StyleComponent from './StyleComponent';
 
 /**
  * Input number selector
  * @class StyleBackgroundColor
  * @extends StyleComponent
  */
-class StyleBackgroundColor extends StyleComponent {
+export default class StyleBackgroundColor extends StyleComponent {
     init() {
         return m('input.form-control.input-sm.color[type=color]#'+this.id, {
             key: this.id,