upgraded to riot v4.13.2

README.md

@@ -15,11 +15,10 @@ What are you waiting for -- **GO FORTH AND BUILD YOUR APP, RAPIDLY!**
 
 ## Features
 
-- [RiotJS](https://riot.js.org/) 3.x give us the core UI building blocks
+- [RiotJS](https://riot.js.org/) 4.x give us the core UI building blocks
     - `Web Components` for composable and reusable UI
     - `Events` to communicate between components or other code
 - [Riot-Route](https://riot.js.org/api/route/) the simplest way to manage URL navigation
-- [Require1k](http://stuk.github.io/require1k/) tiny CommonJS module system for mixins/libs
 - [Grayscale](http://n2geoff.github.io/grayscale/) Small, 2kb gzipped CSS framework with a layout focus
 - [Gulp](https://gulpjs.com/) is there for when your ready for *production*.  See [Build for Production](#build production) below
 
@@ -60,9 +59,7 @@ public/                     <-- develop here
         config/             <-- configuration files used in app.js
             config.js       <-- global app settings, such as version
             routes.js       <-- routes combined
-            mixins.js       <-- mixins combined
         mixins/             <-- collection of mixins
-            relay.mixin.js  <-- global observeable mixin
             store.mixin.js  <-- localStorage mixin
         app.js              <-- application bootstrap
     images/                 <-- your images

package.json

@@ -26,13 +26,13 @@
     "author": "Geoff Doty",
     "license": "MIT",
     "devDependencies": {
-        "frontend-dependencies": "^1.1.7",
+        "frontend-dependencies": "^1.1.8",
         "gulp": "^4.0.2",
-        "gulp-clean-css": "^4.2.0",
+        "gulp-clean-css": "^4.3.0",
         "gulp-concat": "^2.6.1",
         "gulp-minify": "^3.1.0",
         "gulp-riot": "^1.1.5",
-        "gulp-rollup-lightweight": "^1.0.10",
+        "gulp-rollup-lightweight": "^1.0.11",
         "gulp-useref": "^3.1.6",
         "vinyl-source-stream": "^2.0.0"
     },
@@ -40,7 +40,7 @@
         "target": "public/vendor/",
         "packages": {
             "riot": {
-                "version": "3.13.2",
+                "version": "4.13.2",
                 "src": "*min.js",
                 "namespaced": true
             },

public/index.html

@@ -17,7 +17,7 @@
     <!-- endbuild-->
 
     <!-- build:js  vendor/riot/riot.min.js -->
-    <script src="https://cdn.jsdelivr.net/npm/riot@3.13.2/riot+compiler.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/riot@4.13.2/riot+compiler.min.js" crossorigin="anonymous"></script>
     <script>window.riot || document.write('<script src="vendor/riot/riot+compiler.min.js"><\/script>')</script>
     <!-- endbuild-->
     <script src="vendor/riot-route/route.min.js"></script>
@@ -30,27 +30,30 @@
     <!-- Add your site or application content here -->
     <div class="layout">
         <div class="content">
-            <Page>
+            <Header class="component"></Header>
             <div id="view"></div>
-            </Page>
+            <Footer class="component"></Footer>
         </div>
     </div>
 
+    <!-- build:js js/tags.min.js -->
+    <script type="riot" src="tags/layout/header.tag.html"></script>
+    <script type="riot" src="tags/layout/footer.tag.html"></script>
+    <script type="riot" src="tags/home.tag.html"></script>
+    <script type="riot" src="tags/about.tag.html"></script>
+    <!-- endbuild -->
+
+    <!-- mount all included tags -->
+    <script type="module">
+        riot.compile().then(() => {
+            riot.mount('.component', {});
+        });
+    </script>
+
     <!-- build:js js/bundle.min.js -->
     <script type="module" src="js/app.js"></script>
     <!-- endbuild -->
 
-    <!-- build:js js/tags.min.js -->
-    <script type="riot/tag" src="tags/layout/page.tag.html"></script>
-    <script type="riot/tag" src="tags/layout/header.tag.html"></script>
-    <script type="riot/tag" src="tags/layout/footer.tag.html"></script>
-    <script type="riot/tag" src="tags/home.tag.html"></script>
-    <script type="riot/tag" src="tags/about.tag.html"></script>
-    <!-- endbuild -->
-
-    <!-- mount all included tags -->
-    <script>riot.mount('Page');</script>
-
     <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
     <script>
         window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

public/js/app.js

@@ -7,11 +7,9 @@ import config from './config/config.js';
 // Application Bootstrap
 // -----------------------------------------------
 
-// [ global mixin ] ------------------------------
+// [ globals ] ------------------------------
 
-riot.mixin({
+const APP = {config}
-    app: config
-});
 
 // [ start router ] ------------------------------
 

public/js/config/mixins.js

@@ -1,6 +0,0 @@
-
-// -----------------------------------------------
-// Global Riot Mixins
-// -----------------------------------------------
-
-export default {};

public/js/config/routes.js

@@ -10,12 +10,14 @@ route.base('#');
 
 // home page
 route('/', function () {
-    riot.mount('#view', 'home');
+    riot.unmount('#view', true);
+    riot.mount('#view', {}, 'home');
 });
 
 // about page
 route('/about', function () {
-    riot.mount('#view', 'about');
+    riot.unmount('#view', true);
+    riot.mount('#view', {}, 'about');
 });
 
 export default route;

public/js/mixins/relay.mixin.js

@@ -1,10 +0,0 @@
-
-/**
- * Global Observiable Mixin
- *
- * simplifies communication between mutliple components
- * on a single page
- */
-export default {
-    relay: riot.observable()
-};

public/tags/about.tag.html

@@ -2,7 +2,7 @@
 
     <section>
         <h3>RiotJS</h3>
-        <blockquote class="block"><code>version: 3.x</code> </blockquote>
+        <blockquote class="block"><code>version: 4.x</code> </blockquote>
     </section>
 
     <section>

public/tags/layout/page.tag.html

@@ -1,7 +0,0 @@
-<Page>
-    <div>
-        <Header></Header>
-        <yield />
-        <Footer></Footer>
-    </div>
-</Page>