upgraded to riot v4.13.2
This commit is contained in:
parent
9bd02c0c5a
commit
1c0db17787
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div id="view"></div>
|
||||
</Page>
|
||||
<Header class="component"></Header>
|
||||
<div id="view"></div>
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@ import config from './config/config.js';
|
|||
// Application Bootstrap
|
||||
// -----------------------------------------------
|
||||
|
||||
// [ global mixin ] ------------------------------
|
||||
// [ globals ] ------------------------------
|
||||
|
||||
riot.mixin({
|
||||
app: config
|
||||
});
|
||||
const APP = {config}
|
||||
|
||||
// [ start router ] ------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
// -----------------------------------------------
|
||||
// Global Riot Mixins
|
||||
// -----------------------------------------------
|
||||
|
||||
export default {};
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
|
||||
/**
|
||||
* Global Observiable Mixin
|
||||
*
|
||||
* simplifies communication between mutliple components
|
||||
* on a single page
|
||||
*/
|
||||
export default {
|
||||
relay: riot.observable()
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<Page>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<yield />
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</Page>
|
||||
Loading…
Reference in New Issue