BakedSoftware · kayleg · Feb 2, 2019 · Feb 2, 2019 · Feb 4, 2019 · Feb 28, 2019
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,8 @@
 {
-  "extends": "standard",
+  "extends": "prettier",
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
   "globals": {
     "goog": true,
     "Silica": true,

diff --git a/Readme.md b/Readme.md
@@ -9,6 +9,10 @@ Install Silica js library & save to package.json
 yarn add silica
 ```
 
+## CDN Provided by JSDELIVR
+
+[![](https://data.jsdelivr.com/v1/package/npm/silica/badge)](https://www.jsdelivr.com/package/npm/silica)
+
 Documentation can be found in the Wiki
 
 https://github.com/BakedSoftware/silica/wiki/
diff --git a/build.js b/build.js
@@ -13,14 +13,12 @@ childProcess.execSync('rm -rf build_cache/src/externs.js')
 
 // childProcess.execSync("cp ./node_modules/xxhashjs/build/xxhash.min.js dist/silica.js");
 // childProcess.execSync("cp ./node_modules/xxhashjs/build/xxhash.min.js dist/silica.min.js");
-childProcess.execSync('cat libs/md5.min.js >> dist/silica.js')
-childProcess.execSync('cat libs/md5.min.js >> dist/silica.min.js')
 
 var flags = {
   js: 'build_cache/**/*.js',
   language_in: 'ECMASCRIPT6',
-  language_out: 'ECMASCRIPT5',
-  compilation_level: 'ADVANCED',
+  language_out: 'ECMASCRIPT6',
+  compilation_level: 'SIMPLE',
   externs: 'src/externs.js',
   generate_exports: 'true'
 }
@@ -31,7 +29,7 @@ closureCompiler.run(function (exitCode, stdOut, stdErr) {
   if (stdErr.length) {
     console.error(stdErr)
   }
-  fs.appendFileSync('dist/silica.min.js', '!function(){\n"use strict";\n' + stdOut + '}.call(window);')
+  fs.appendFileSync('dist/silica.min.js', '!function(){\n' + stdOut + '}.call(window);')
   let compress = spawnSync('gzip', ['-k', 'dist/silica.min.js'], {
     stdio: [0, 1, 2],
     cwd: process.cwd()
@@ -42,6 +40,16 @@ closureCompiler.run(function (exitCode, stdOut, stdErr) {
   } else {
     console.log('Compression finished')
   }
+  compress = spawnSync('brotli', ['-Z', 'dist/silica.min.js'], {
+    stdio: [0, 1, 2],
+    cwd: process.cwd()
+  })
+  if (compress.error) {
+    console.log('An error occurred during brotli compression')
+    console.error(compress.error)
+  } else {
+    console.log('Brotli Compression finished')
+  }
 })
 
 // Build debug version
@@ -55,7 +63,7 @@ closureCompiler.run(function (exitCode, stdOut, stdErr) {
   if (stdErr.length) {
     console.error(stdErr)
   }
-  fs.appendFileSync('dist/silica.js', '!function(){\n"use strict";\n' + stdOut + '}.call(window);')
+  fs.appendFileSync('dist/silica.js', '!function(){\n' + stdOut + '}.call(window);')
   console.log('Compressing results')
   let compress = spawnSync('gzip', ['-k', 'dist/silica.js'], {
     stdio: [0, 1, 2],
@@ -67,4 +75,14 @@ closureCompiler.run(function (exitCode, stdOut, stdErr) {
   } else {
     console.log('Compression finished')
   }
+  compress = spawnSync('brotli', ['-Z', 'dist/silica.js'], {
+    stdio: [0, 1, 2],
+    cwd: process.cwd()
+  })
+  if (compress.error) {
+    console.log('An error occurred during brotli compression')
+    console.error(compress.error)
+  } else {
+    console.log('Brotli Compression finished')
+  }
 })
diff --git a/dist/silica.js b/dist/silica.js
diff --git a/dist/silica.js.br b/dist/silica.js.br
diff --git a/dist/silica.js.gz b/dist/silica.js.gz
diff --git a/dist/silica.min.js b/dist/silica.min.js
diff --git a/dist/silica.min.js.br b/dist/silica.min.js.br
diff --git a/dist/silica.min.js.gz b/dist/silica.min.js.gz
diff --git a/example/include.html b/example/include.html
@@ -3,5 +3,5 @@
   <h5>
   {{selectedFont}}
   </h5>
-  <a data-click="showPage2">Show Other Page</a>
+  <a data-on-click="showPage2">Show Other Page</a>
 </div>
diff --git a/example/include2.html b/example/include2.html
@@ -1,5 +1,5 @@
 <div>
   This is another included page
   <br />
-  <a data-click="showFirstPage">Show First Page</a>
+  <a data-on-click="showFirstPage">Show First Page</a>
 </div>
diff --git a/example/index.html b/example/index.html
@@ -6,11 +6,25 @@
     <title>Silica Example</title>
   </head>
   <body>
+    <style>
+    [data-show] {
+      transition: opacity 1s;
+      opacity: 1;
+    }
+
+    .hidden {
+      opacity: 0 !important;
+      position: absolute !important;
+      z-index: -1;
+      pointer-events: none;
+    }
+    </style>
     <div data-style="appStyle">
       <h1>{{greeting}}</h1>
       <input type="text" data-model="name" placeholder="Enter Your Name" />
+      <a data-href="linkToEmail">Send Email</a>
 
-      <form action="" data-submit="alertUser">
+      <form action="" data-on-submit="alertUser">
         <input type="text" data-model="name">
         <input type="email" data-model="email">
         <select data-model="selectedFont" data-repeat="font in fonts">
@@ -19,6 +33,10 @@ <h1>{{greeting}}</h1>
         <input type="submit" value="Submit" data-disabled="!canSubmit">
       </form>
 
+      <h4>{{counter}}</h4>
+      <button data-on-click="increment">++</button>
+      <button data-on-click="decrement">--</button>
+
       <ul data-repeat="user in users">
         <li>
           <h2>{{user.name}}</h2>
@@ -29,8 +47,12 @@ <h3>{{grade.name}}</h3>
                 <td>{{klass.name}}</td>
                 <td>
                   <ol data-repeat="grade in klass.grades">
-                    <li data-silica='["id=Ex.indexTest(index)"]'
-                        data-click="printGrade(grade, klass, user)">{{grade}}</li>
+                    <li data-id="Ex.indexTest(index)"
+                        data-on-click="printGrade(grade, klass, user)">
+                      <a data-href="grade">
+                        {{grade}}
+                      </a>
+                    </li>
                   </ol>
                 </td>
               </tr>
@@ -46,11 +68,25 @@ <h3>{{grade.name}}</h3>
 
       <h3>Embedded Page: {{embeddedPage}}</h3>
       <div data-include="embeddedPage"></div>
+      <button data-show="!runUpdates" data-on-click="startTimer">Start Timer</button>
+      <button data-show="runUpdates" data-on-click="stopTimer">Stop Timer</button>
+      <ul data-repeat="item in largeList" data-repeat-not-nested="true" >
+        <li>{{item.value|duration}}</li>
+      </ul>
     </div>
-      <script src="../dist/silica.js" type="text/javascript" charset="utf-8"></script>
+      <script src="../dist/silica.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript" charset="utf-8">
         (function(){
           'use strict';
+          class ListItem {
+            constructor (app) {
+              this.created = new Date()
+              this._app = app
+            }
+            get value () {
+              return this._app.now - this.created
+            }
+          }
           window.Ex = {
             AppCntrl: class AppCntrl extends Silica.Controllers.Base {
               constructor(el) {
@@ -62,6 +98,12 @@ <h3>Embedded Page: {{embeddedPage}}</h3>
                   name:"Old Typey"}, {key:"Operator Mono", name:"Best"}];
                 this.selectedFont = "Courier";
                 this.states = { "FL": "Florida", "CA": "California"};
+                this.largeList = [];
+                this.now = new Date()
+                this.counter = 0
+                for (let i = 0; i < 10; i++) {
+                  this.largeList.push(new ListItem(this))
+                }
                 this.users = [
                   {
                     name: "Alice",
@@ -117,6 +159,10 @@ <h3>Embedded Page: {{embeddedPage}}</h3>
                 ];
               }
 
+              linkToEmail () {
+                return `mailto:${this.email}`
+              }
+
               canSubmit() {
                 return this.name && this.name.length > 0;
               }
@@ -142,11 +188,46 @@ <h3>Embedded Page: {{embeddedPage}}</h3>
               showPage2(){
                 this.embeddedPage = "./include2.html";
               }
+
+              getRandomInt (min, max) {
+                min = Math.ceil(min)
+                max = Math.floor(max)
+                return Math.floor(Math.random() * (max - min + 1)) + min
+              }
+
+              continuouslyUpdate () {
+                if (this.runUpdates) {
+                  requestAnimationFrame(() => {
+                    Silica.apply(() => {
+                      this.now = new Date()
+                      this.continuouslyUpdate()
+                    })
+                  })
+                }
+              }
+
+              startTimer () {
+                this.runUpdates = true
+                this.continuouslyUpdate()
+              }
+
+              stopTimer () {
+                this.runUpdates = false
+              }
+
+              increment () {
+                this.counter++
+              }
+
+              decrement () {
+                this.counter--
+              }
             },
 
             indexTest(index) {
               return "Prefix-Test-" + index;
             }
+
           };
           Ex.AppCntrl.watchers = {
             "characters.length": function(current, previous) {
@@ -169,9 +250,17 @@ <h3>Embedded Page: {{embeddedPage}}</h3>
           var ct = class TestCntrl extends Silica.Controllers.Base {
             onClick(){Silica.goTo("/something"); }
           };
+          Silica.addFilter('duration', (milis) => {
+            let sec = (milis / 1000) | 0
+            let min = (sec / 60) | 0
+            sec = sec % 60
+            let h = (min / 60) | 0
+            min = min % 60
+            return (h > 0 ? h + ':' : '') + `${('0'+min).substr(-2)}:${('0'+sec).substr(-2)}`
+          })
           Silica.usePushState = false;
           Silica.addDirective("my-element", {
-            template: "<div data-click='onClick'>this is my custom element</div>",
+            template: "<div data-on-click='onClick'>this is my custom element</div>",
             controller: ct });
           Silica.setContext("Ex");
           Silica.setRouter(new Ex.Router);

diff --git a/libs/md5.min.js b/libs/md5.min.js
diff --git a/package.json b/package.json
@@ -1,46 +1,51 @@
 {
   "name": "silica",
-  "version": "0.52.0",
+  "version": "0.65.1",
   "description": "Silica is a fast lightweight javascript framework for building applications. Silica's usage is designed to be as transparent as possible",
   "bin": {
-    "silica": "src/cli/silica-cli.js"
+    "silica": "src/cli/silica-cli.js",
+    "silica-create": "src/cli/silica-create.js",
+    "silica-build": "src/cli/silica-build.js",
+    "silica-watch": "src/cli/silica-watch.js",
+    "silica-test": "src/cli/silica-test.js"
   },
   "dependencies": {
+    "colors": ">=0.6.0",
     "commander": "^2.15.1",
-    "csso": "^3.5.0",
-    "eslint": "^4.19.1",
-    "eslint-config-standard": "^11.0.0",
+    "csso": "^4.2.0",
+    "eslint": "^7.2",
     "finalhandler": "^1.1.1",
-    "fs-extra": "^5.0.0",
-    "glob": "^7.1.3",
-    "google-closure-compiler": "20180402.0.0",
-    "livereload": "^0.7.0",
-    "nib": "^1.1.2",
-    "node-sprite-generator": "^0.10.2",
-    "node-static": "^0.7.10",
-    "npm": "^5.8.0",
-    "stylus": "^0.54.0",
+    "fs-extra": "^8.1",
+    "glob": "^7.1",
+    "google-closure-compiler": "20210106.0.0",
+    "livereload": "^0.9.0",
+    "nib": "stylus/nib#8291e5d20e400e04892a0b1261e2a81773d07fb4",
+    "node-sprite-generator": "selaux/node-sprite-generator#0a794ba1d73739693b559f4e42354a51fb84d6c8",
+    "node-static": "^0.7.11",
+    "npm": "^6.14.0",
+    "stylus": "^0.54.8",
     "watch": "^1.0.2"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node build"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/BakedSoftware/silica.git"
   },
   "author": "Kayle Gishen",
   "license": "GPL-3.0",
+  "jsdelivr": "/dist/silica.min.js",
   "bugs": {
     "url": "https://github.com/BakedSoftware/Silica/issues"
   },
   "homepage": "https://github.com/BakedSoftware/Silica#readme",
   "standard": {
-    "globals": [
-      "Silica",
-      "goog",
-      "md5",
-      "XMLHttpRequest"
-    ]
+    "globals": ["Silica", "goog", "XMLHttpRequest"]
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1"
   }
 }