├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── Makefile ├── README.md ├── example ├── css │ └── styles.css ├── dist │ ├── alltags.js │ └── app.built.js ├── index.html ├── js │ ├── app.js │ └── app.precompiled.js ├── requirejs.build.js ├── requirejs.config.js ├── requirejs_bundled.html ├── requirejs_example.html ├── systemjs_example.html ├── systemjs_precompiled.html └── tags │ ├── panels.tag │ ├── timer.tag │ └── todo.tag ├── jspm.config.js ├── package-lock.json ├── package.json ├── requirejs-riot.js ├── systemjs-riot.js └── test └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | charset = utf-8 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | example/*.html -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "eslint:recommended", 4 | "env": 5 | { 6 | "browser": true, 7 | "node": true, 8 | "es6": true, 9 | "amd": true 10 | }, 11 | globals: 12 | { 13 | "require": false, 14 | "requirejs": false, 15 | "define": false, 16 | "describe": false, 17 | "it": false, 18 | "System":false, 19 | "SystemJS":false 20 | 21 | }, 22 | 23 | "ecmaFeatures": 24 | { 25 | "arrowFunctions": true, 26 | "binaryLiterals": true, 27 | "blockBindings": true, 28 | "classes": true, 29 | "defaultParams": true, 30 | "destructuring": true, 31 | "forOf": true, 32 | "generators": true, 33 | "modules": true, 34 | "objectLiteralComputedProperties": true, 35 | "objectLiteralDuplicateProperties": true, 36 | "objectLiteralShorthandMethods": true, 37 | "objectLiteralShorthandProperties": true, 38 | "octalLiterals": true, 39 | "regexUFlag": true, 40 | "regexYFlag": true, 41 | "spread": true, 42 | "superInFunctions": true, 43 | "templateStrings": true, 44 | "unicodeCodePointEscapes": true, 45 | "globalReturn": true, 46 | "jsx": true 47 | }, 48 | 49 | "rules": 50 | { 51 | 52 | // 53 | //Possible Errors 54 | // 55 | // The following rules point out areas where you might have made mistakes. 56 | // 57 | "comma-dangle": 2, // disallow or enforce trailing commas 58 | "no-cond-assign": 2, // disallow assignment in conditional expressions 59 | "no-console": 0, // disallow use of console (off by default in the node environment) 60 | "no-constant-condition": 2, // disallow use of constant expressions in conditions 61 | "no-control-regex": 2, // disallow control characters in regular expressions 62 | "no-debugger": 2, // disallow use of debugger 63 | "no-dupe-args": 2, // disallow duplicate arguments in functions 64 | "no-dupe-keys": 2, // disallow duplicate keys when creating object literals 65 | "no-duplicate-case": 2, // disallow a duplicate case label. 66 | "no-empty": 2, // disallow empty statements 67 | 68 | "no-ex-assign": 2, // disallow assigning to the exception in a catch block 69 | "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context 70 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) 71 | "no-extra-semi": 2, // disallow unnecessary semicolons 72 | "no-func-assign": 2, // disallow overwriting functions written as function declarations 73 | "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks 74 | "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor 75 | "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments 76 | "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression 77 | "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions 78 | "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal 79 | "no-sparse-arrays": 2, // disallow sparse arrays 80 | "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement 81 | "use-isnan": 2, // disallow comparisons with the value NaN 82 | "valid-jsdoc": 2, // Ensure JSDoc comments are valid (off by default) 83 | "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string 84 | 85 | // 86 | // Best Practices 87 | // 88 | // These are rules designed to prevent you from making mistakes. 89 | // They either prescribe a better way of doing something or help you avoid footguns. 90 | // 91 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default). 0: deep destructuring is not compatible https://github.com/eslint/eslint/issues/1863 92 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) 93 | "consistent-return": 2, // require return statements to either always or never specify values 94 | "curly": 2, // specify curly brace conventions for all control statements 95 | "default-case": 2, // require default case in switch statements (off by default) 96 | "dot-notation": 2, // encourages use of dot notation whenever possible 97 | "eqeqeq": 2, // require the use of === and !== 98 | "guard-for-in": 2, // make sure for-in loops have an if statement (off by default) 99 | "no-alert": 2, // disallow the use of alert, confirm, and prompt 100 | "no-caller": 2, // disallow use of arguments.caller or arguments.callee 101 | "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression (off by default) 102 | "no-else-return": 2, // disallow else after a return in an if (off by default) 103 | 104 | "no-eq-null": 2, // disallow comparisons to null without a type-checking operator (off by default) 105 | "no-eval": 2, // disallow use of eval() 106 | "no-extend-native": 2, // disallow adding to native types 107 | "no-extra-bind": 2, // disallow unnecessary function binding 108 | "no-fallthrough": 2, // disallow fallthrough of case statements 109 | "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals (off by default) 110 | "no-implied-eval": 2, // disallow use of eval()-like methods 111 | "no-iterator": 2, // disallow usage of __iterator__ property 112 | "no-labels": 2, // disallow use of labeled statements 113 | "no-lone-blocks": 2, // disallow unnecessary nested blocks 114 | "no-loop-func": 2, // disallow creation of functions within loops 115 | "no-multi-spaces": 2, // disallow use of multiple spaces 116 | "no-multi-str": 2, // disallow use of multiline strings 117 | "no-native-reassign": 2, // disallow reassignments of native objects 118 | "no-new": 2, // disallow use of new operator when not part of the assignment or comparison 119 | "no-new-func": 2, // disallow use of new operator for Function object 120 | "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean 121 | "no-octal": 2, // disallow use of octal literals 122 | "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 123 | "no-param-reassign": 2, // disallow reassignment of function parameters (off by default) 124 | "no-process-env": 2, // disallow use of process.env (off by default) 125 | "no-proto": 2, // disallow usage of __proto__ property 126 | "no-redeclare": 2, // disallow declaring the same variable more then once 127 | "no-return-assign": 2, // disallow use of assignment in return statement 128 | "no-script-url": 2, // disallow use of javascript: urls. 129 | "no-self-compare": 2, // disallow comparisons where both sides are exactly the same (off by default) 130 | "no-sequences": 2, // disallow use of comma operator 131 | "no-throw-literal": 2, // restrict what can be thrown as an exception (off by default) 132 | "no-unused-expressions": 2, // disallow usage of expressions in statement position 133 | "no-void": 2, // disallow use of void operator (off by default) 134 | "no-warning-comments": [0, 135 | { 136 | "terms": ["todo", "fixme"], 137 | "location": "start" 138 | }], // disallow usage of configurable warning terms in comments": 2, // e.g. TODO or FIXME (off by default) 139 | "no-with": 2, // disallow use of the with statement 140 | "radix": 2, // require use of the second argument for parseInt() (off by default) 141 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) 142 | "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses (off by default) 143 | "yoda": 2, // require or disallow Yoda conditions 144 | 145 | // 146 | // Strict Mode 147 | // 148 | // These rules relate to using strict mode. 149 | // 150 | "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint` 151 | 152 | // 153 | // Variables 154 | // 155 | // These rules have to do with variable declarations. 156 | // 157 | "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) 158 | "no-delete-var": 2, // disallow deletion of variables 159 | "no-label-var": 2, // disallow labels that share a name with a variable 160 | "no-shadow": 2, // disallow declaration of variables already declared in the outer scope 161 | "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments 162 | "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block 163 | "no-undef-init": 2, // disallow use of undefined when initializing variables 164 | "no-undefined": 2, // disallow use of undefined variable (off by default) 165 | "no-unused-vars": 0, // disallow declaration of variables that are not used in the code 166 | "no-use-before-define": 2, // disallow use of variables before they are defined 167 | 168 | // 169 | //Stylistic Issues 170 | // 171 | // These rules are purely matters of style and are quite subjective. 172 | // 173 | "indent": [0, "tab"], // this option sets a specific tab width for your code (off by default) 174 | "brace-style": 1, // enforce one true brace style (off by default) 175 | "camelcase": 0, // require camel case names 176 | "comma-spacing": [1, 177 | { 178 | "before": false, 179 | "after": true 180 | }], // enforce spacing before and after comma 181 | "comma-style": [1, "last"], // enforce one true comma style (off by default) 182 | "consistent-this": [1, "_this"], // enforces consistent naming when capturing the current execution context (off by default) 183 | "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines 184 | "func-names": 0, // require function expressions to have a name (off by default) 185 | "func-style": 0, // enforces use of function declarations or expressions (off by default) 186 | "key-spacing": [1, 187 | { 188 | "beforeColon": false, 189 | "afterColon": true 190 | }], // enforces spacing between keys and values in object literal properties 191 | "max-nested-callbacks": [1, 4], // specify the maximum depth callbacks can be nested (off by default) 192 | "new-cap": [1, 193 | { 194 | newIsCap: true, 195 | capIsNew: false 196 | }], // require a capital letter for constructors 197 | "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments 198 | "newline-after-var": 0, // allow/disallow an empty newline after var statement (off by default) 199 | "no-array-constructor": 1, // disallow use of the Array constructor 200 | "no-inline-comments": 0, // disallow comments inline after code (off by default) 201 | "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default) 202 | "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation 203 | "no-multiple-empty-lines": [1, 204 | { 205 | "max": 2 206 | }], // disallow multiple empty lines (off by default) 207 | "no-nested-ternary": 1, // disallow nested ternary expressions (off by default) 208 | "no-new-object": 1, // disallow use of the Object constructor 209 | "no-spaced-func": 1, // disallow space between function identifier and application 210 | "no-ternary": 0, // disallow the use of ternary operators (off by default) 211 | "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines 212 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers 213 | //"one-var": [1, "never"], // allow just one var statement per function (off by default) 214 | "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default) 215 | "padded-blocks": [0, "always"], // enforce padding within blocks (off by default) 216 | "quote-props": [0, "as-needed"], // require quotes around object literal property names (off by default) 217 | "quotes": [0, "single"], // specify whether double or single quotes should be used 218 | "semi": [1, "always"], // require or disallow use of semicolons instead of ASI 219 | "semi-spacing": [1, 220 | { 221 | "before": false, 222 | "after": true 223 | }], // enforce spacing before and after semicolons 224 | "sort-vars": 0, // sort variables within the same declaration block (off by default) 225 | "keyword-spacing": [2, 226 | { 227 | "before": true, 228 | "after": true 229 | }], // require a space after certain keywords (off by default) 230 | "space-before-blocks": [1, "always"], // require or disallow space before blocks (off by default) 231 | 232 | 233 | //"space-infix-ops": [1], // require spaces around operators 234 | //"space-return-throw-case": [1, "always"], // require a space after return, throw, and case 235 | "space-unary-ops": [1, 236 | { 237 | "words": true, 238 | "nonwords": false 239 | }], // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default) 240 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) 241 | 242 | // 243 | // ECMAScript 6 244 | // 245 | // These rules are only relevant to ES6 environments and are off by default. 246 | // 247 | "no-var": 0, // require let or const instead of var (off by default) 248 | "generator-star-spacing": [2, "before"], // enforce the spacing around the * in generator functions (off by default) 249 | 250 | // 251 | // Legacy 252 | // 253 | // The following rules are included for compatibility with JSHint and JSLint. 254 | // While the names of the rules may not match up with the JSHint/JSLint counterpart, 255 | // the functionality is the same. 256 | // 257 | "max-depth": [2, 3], // specify the maximum depth that blocks can be nested (off by default) 258 | "max-len": [2, 150, 2], // specify the maximum length of a line in your program (off by default) 259 | "max-params": [1, 5], // limits the number of parameters that can be used in the function declaration. (off by default) 260 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) 261 | "no-bitwise": 1, // disallow use of bitwise operators (off by default) 262 | "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default) 263 | 264 | 265 | } 266 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | jspm_packages 3 | fabfile* 4 | example/dist/*.tag.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8.11" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2015 Guy Bedford 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | VERSION = $(shell cat package.json | sed -n 's/.*"version": "\([^"]*\)",/\1/p') 3 | 4 | SHELL = /usr/bin/env bash 5 | 6 | default: install 7 | .PHONY: default test install tag 8 | 9 | version: 10 | @echo $(VERSION) 11 | 12 | 13 | install: 14 | npm install 15 | 16 | 17 | test: 18 | $$(npm bin)/jspm install --quick 19 | $$(npm bin)/mocha 20 | 21 | runexample: build serve 22 | 23 | serve: 24 | @echo "Point your browser to http://localhost:3000/example/ to check the examples" 25 | $$(npm bin)/serve . 26 | 27 | build: 28 | @echo "Generating a single bundle of all tags" 29 | $$(npm bin)/jspm build 'tags/todo.tag + tags/timer.tag + tags/panels.tag - riot' example/dist/alltags.js --format umd --skip-source-maps 30 | @echo "Generating a monolihyc build using r.js optimizer" 31 | $$(npm bin)/r.js -o example/requirejs.build.js 32 | 33 | 34 | update_version: 35 | @echo "Current version is " ${VERSION} 36 | @echo "Next version is " $(v) 37 | sed -i s/'"$(VERSION)"'/'"$(v)"'/ package.json 38 | 39 | tag_and_push: 40 | git add --all 41 | git commit -a -m "Tag v$(v) $(m)" 42 | git tag v$(v) 43 | git push 44 | git push --tags 45 | npm publish 46 | 47 | tag: update_version tag_and_push 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Riot Tag Plugin for SystemJS and RequireJS 2 | 3 | [![Build Status](https://travis-ci.org/HuasoFoundries/systemjs-riot.svg)](https://travis-ci.org/HuasoFoundries/systemjs-riot) [![Code Climate](https://codeclimate.com/github/HuasoFoundries/systemjs-riot/badges/gpa.svg)](https://codeclimate.com/github/HuasoFoundries/systemjs-riot) 4 | [![npm](https://img.shields.io/npm/dm/systemjs-riot.svg)](https://www.npmjs.com/package/systemjs-riot) 5 | 6 | This is a loader plugin that enables to dynamically compile [Riot](http://riotjs.com/) tags 7 | from [jspm](https://jspm.io)/[SystemJS](https://github.com/systemjs/systemjs) or [RequireJS](http://requirejs.org/) 8 | and statically inline them during your build task. 9 | 10 | Prior to version 1.2.0 the requirejs part of this loader was a separate project known as [requirejs-riot](https://www.npmjs.com/package/requirejs-riot), 11 | which is now deprecated in favor of this one. 12 | 13 | 14 | ### Usage with JSPM/SystemJS 15 | 16 | To use it you should install it with jspm: 17 | 18 | 19 | ``` 20 | jspm install tag 21 | ``` 22 | 23 | 24 | After that you can include Riot tags in your modules: 25 | 26 | ```js 27 | import riot from 'riot'; 28 | import 'app.tag!'; 29 | 30 | riot.mount('app'); 31 | 32 | ``` 33 | 34 | You can also use it when defining AMD style modules, and combine it with the `pluginFirst` option 35 | of your SystemJS project to use it like: 36 | 37 | ```js 38 | define(['riot','tag!todo.tag'], function(riot) { 39 | riot.mount('todo'); 40 | riot.route.start(true); 41 | }); 42 | ``` 43 | 44 | ### Usage with RequireJS 45 | 46 | 47 | Install using npm like so: 48 | 49 | ```sh 50 | npm install systemjs-riot 51 | ``` 52 | 53 | Add the proper config to your main requirejs.config. For example: 54 | 55 | ```js 56 | requirejs.config({ 57 | paths: { 58 | "riot": "/node_modules/riot/riot+compiler.min", 59 | "tag": "../requirejs-riot", 60 | "tags": "./tags", 61 | "dist": "./dist" 62 | } 63 | }); 64 | ``` 65 | 66 | Then load your tags by prepending `tag!` to their path: 67 | 68 | 69 | ```js 70 | define(['riot','tag!timer.tag'], function(riot) { 71 | riot.mount('timer', { 72 | start: 0 73 | }); 74 | riot.route.start(true); 75 | }); 76 | ``` 77 | 78 | 79 | 80 | 81 | ## Running examples 82 | 83 | Install [serve](https://www.npmjs.com/package/serve) or any other basic webserver 84 | 85 | ```sh 86 | make runexample 87 | ``` 88 | 89 | Then point your browser to `http://localhost:3000/` 90 | 91 | 92 | 93 | ### Precompilation and Bundling 94 | 95 | When you bundle or build your project, the tags will be precompiled and inlined as part of the process. 96 | 97 | The `make runexamples` task does run `make build`, which uses both `jspm` and `r.js` to generate working 98 | bundles that you can inspect. The tasks run under the hood are: 99 | 100 | **for jspm**: 101 | 102 | ```sh 103 | jspm build 'tag!tags/todo.tag + tag!tags/timer.tag + tag!tags/app.tag - riot' example/dist/alltags.js --format umd 104 | ``` 105 | 106 | **for the `r.js` optimizer** 107 | 108 | ```sh 109 | ./node_modules/.bin/r.js -o example/requirejs.build.js 110 | ``` 111 | 112 | 113 | 114 | ## Tests 115 | 116 | ```bash 117 | npm install 118 | npm test 119 | ``` 120 | -------------------------------------------------------------------------------- /example/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'myriad pro', sans-serif; 3 | font-size: 20px; 4 | border: 0; 5 | } 6 | 7 | form input { 8 | font-size: 85%; 9 | padding: .4em; 10 | border: 1px solid #ccc; 11 | border-radius: 2px; 12 | } 13 | 14 | button { 15 | background-color: #1FADC5; 16 | border: 1px solid rgba(0, 0, 0, .2); 17 | font-size: 75%; 18 | color: #fff; 19 | padding: .4em 1.2em; 20 | border-radius: 2em; 21 | cursor: pointer; 22 | margin: 0 .23em; 23 | outline: none; 24 | } 25 | 26 | button[disabled] { 27 | background-color: #ddd; 28 | color: #aaa; 29 | } 30 | 31 | ul { 32 | padding: 0; 33 | } 34 | 35 | li { 36 | list-style-type: none; 37 | padding: .2em 0; 38 | } 39 | 40 | .completed { 41 | text-decoration: line-through; 42 | color: #ccc; 43 | } 44 | 45 | label { 46 | cursor: pointer; 47 | } 48 | 49 | timer { 50 | display: block; 51 | max-width: 300px; 52 | margin: 0 auto; 53 | border: 1px solid rgba(64, 139, 194, .5); 54 | border-radius: 6px; 55 | color: rgba(64, 139, 194, 1); 56 | height: 100px; 57 | line-height: 100px; 58 | text-align: center; 59 | background: white; 60 | } 61 | 62 | p { 63 | margin: 0; 64 | } 65 | 66 | .menu { 67 | width: 100%; 68 | text-align: center; 69 | 70 | margin: 0 auto; 71 | } 72 | 73 | .menu a { 74 | float: left; 75 | display: inline-block; 76 | width: 23%; 77 | border: 1px solid #CCC; 78 | padding: 5px 2px; 79 | text-decoration: none; 80 | font-size: 14px; 81 | } 82 | 83 | .menu a:hover { 84 | background-color: #EEE; 85 | } 86 | 87 | .tagcontainer { 88 | width: 100%; 89 | height: 100%; 90 | float: left; 91 | } 92 | 93 | .tagcontainer>div { 94 | float: left; 95 | } 96 | 97 | .tagcontainer .timercontainer { 98 | width: 20%; 99 | text-align: center; 100 | } 101 | 102 | .tagcontainer .appcontainer { 103 | width: 40%; 104 | margin: 0 5%; 105 | text-align: center; 106 | } 107 | 108 | .tagcontainer .todocontainer { 109 | width: 25%; 110 | } 111 | -------------------------------------------------------------------------------- /example/dist/alltags.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('riot')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'riot'], factory) : 4 | (factory((global.tags = {}),null)); 5 | }(this, (function (exports,riot) { 'use strict'; 6 | 7 | riot = riot && riot.hasOwnProperty('default') ? riot['default'] : riot; 8 | 9 | riot.tag2('panels', '

{page.title || \'Not found\'}

{page.body || \'Specified id is not found.\'}

', 'panels,[riot-tag="panels"],[data-is="panels"]{ display: block; font-family: sans-serif; margin: 0; padding: 1em; text-align: center; color: #666; } panels nav,[riot-tag="panels"] nav,[data-is="panels"] nav{ display: block; border-bottom: 1px solid #666; padding: 0 0 1em; } panels nav > a,[riot-tag="panels"] nav > a,[data-is="panels"] nav > a{ display: inline-block; padding: 0 .8em; } panels nav > a:not(:first-child),[riot-tag="panels"] nav > a:not(:first-child),[data-is="panels"] nav > a:not(:first-child){ border-left: 1px solid #eee; }', '', function (opts) { 10 | var self = this; 11 | self.data = [{ id: "", title: "Home", body: "Click the link above." }, { id: "1", title: "First", body: "This is the first page." }, { id: "2", title: "Second", body: "This is the second page." }]; 12 | self.page = self.data[0]; 13 | 14 | riot.route(function (id) { 15 | self.page = self.data.filter(function (r) { 16 | return r.id == id; 17 | })[0] || {}; 18 | self.update(); 19 | }); 20 | }); 21 | 22 | riot.tag2('timer', '

Seconds Elapsed: {time}

', '', '', function (opts) { 23 | this.time = opts.start || 0; 24 | 25 | this.tick = function () { 26 | this.update({ time: ++this.time }); 27 | }.bind(this); 28 | 29 | var timer = setInterval(this.tick, 1000); 30 | 31 | this.on('unmount', function () { 32 | clearInterval(timer); 33 | }); 34 | }); 35 | 36 | riot.tag2('todo', '

{opts.title}

', '', '', function (opts) { 37 | this.items = opts.items; 38 | 39 | this.edit = function (e) { 40 | this.text = e.target.value; 41 | }.bind(this); 42 | 43 | this.add = function (e) { 44 | if (this.text) { 45 | this.items.push({ title: this.text }); 46 | this.text = this.input.value = ''; 47 | } 48 | }.bind(this); 49 | 50 | this.removeAllDone = function (e) { 51 | this.items = this.items.filter(function (item) { 52 | return !item.done; 53 | }); 54 | }.bind(this); 55 | 56 | this.whatShow = function (item) { 57 | return !item.hidden; 58 | }.bind(this); 59 | 60 | this.onlyDone = function (item) { 61 | return item.done; 62 | }.bind(this); 63 | 64 | this.toggle = function (e) { 65 | var item = e.item; 66 | item.done = !item.done; 67 | return true; 68 | }.bind(this); 69 | }); 70 | 71 | Object.defineProperty(exports, '__esModule', { value: true }); 72 | 73 | }))); 74 | -------------------------------------------------------------------------------- /example/dist/app.built.js: -------------------------------------------------------------------------------- 1 | /* Riot v2.6.8, @license MIT */ 2 | !function(e,t){"use strict";function n(e,t,n){var r={};return r[e.key]=t,e.pos&&(r[e.pos]=n),r}function r(e,t){for(var n,r=t.length,o=e.length;r>o;)n=t[--r],t.splice(r,1),n.unmount()}function o(e,t){Object.keys(e.tags).forEach(function(n){var r=e.tags[n];I(r)?m(r,function(e){N(e,n,t)}):N(r,n,t)})}function i(e,t,n){var r,o=e._root;for(e._virts=[];o;)r=o.nextSibling,n?t.insertBefore(o,n._root):t.appendChild(o),e._virts.push(o),o=r}function a(e,t,n,r){for(var o,i=e._root,a=0;a0}),e)},enumerable:!1,writable:!1,configurable:!1},off:{value:function(r,o){return"*"!=r||o?t(r,function(e,t){if(o)for(var r,i=n[e],a=0;r=i&&i[a];++a)r==o&&i.splice(a--,1);else delete n[e]}):n={},e},enumerable:!1,writable:!1,configurable:!1},one:{value:function(t,n){function r(){e.off(t,r),n.apply(e,arguments)}return e.on(t,r)},enumerable:!1,writable:!1,configurable:!1},trigger:{value:function(o){for(var i,a=arguments.length-1,u=new Array(a),s=0;s1?/{[\S\s]*?}/:h[4],t),t[5]=n(e.length>3?/\\({|})/g:h[5],t),t[6]=n(h[6],t),t[7]=RegExp("\\\\("+t[3]+")|([[({])|("+t[3]+")|"+l,c),t[8]=e,t}function o(e){return e instanceof RegExp?u(e):x[e]}function i(e){(e||(e=m))!==x[8]&&(x=r(e),u=e===m?t:n,x[9]=u(h[9])),v=e}function a(e){var t;e=e||{},t=e.brackets,Object.defineProperty(e,"brackets",{set:i,get:function(){return v},enumerable:!0}),s=e,i(t)}var u,s,c="g",f=/"[^"\\]*(?:\\[\S\s][^"\\]*)*"|'[^'\\]*(?:\\[\S\s][^'\\]*)*'/g,l=f.source+"|"+/(?:\breturn\s+|(?:[$\w\)\]]|\+\+|--)\s*(\/)(?![*\/]))/.source+"|"+/\/(?=[^*\/])[^[\/\\]*(?:(?:\[(?:\\.|[^\]\\]*)*\]|\\.)[^[\/\\]*)*?(\/)[gim]*/.source,p=RegExp("[\\x00-\\x1F<>a-zA-Z0-9'\",;\\\\]"),d=/(?=[[\]()*+?.^$|])/g,g={"(":RegExp("([()])|"+l,c),"[":RegExp("([[\\]])|"+l,c),"{":RegExp("([{}])|"+l,c)},m="{ }",h=["{","}","{","}",/{[^}]*}/,/\\([{}])/g,/\\({)|{/g,RegExp("\\\\(})|([[({])|(})|"+l,c),m,/^\s*{\^?\s*([$\w]+)(?:\s*,\s*(\S+))?\s+in\s+(\S.*)\s*}/,/(^|[^\\]){=[\S\s]*?}/],v=void 0,x=[];return o.split=function(e,t,n){function r(e){t||i?s.push(e&&e.replace(n[5],"$1")):s.push(e)}n||(n=x);var o,i,a,u,s=[],c=n[6];for(i=a=c.lastIndex=0;o=c.exec(e);){if(u=o.index,i){if(o[2]){c.lastIndex=function(e,t,n){var r,o=g[t];for(o.lastIndex=n,n=1;(r=o.exec(e))&&(!r[1]||(r[1]===t?++n:--n)););return n?e.length:o.lastIndex}(e,o[2],c.lastIndex);continue}if(!o[3])continue}o[1]||(r(e.slice(a,u)),a=c.lastIndex,c=n[6+(i^=1)],c.lastIndex=a)}return e&&a2||r[0]){var o,a,u=[];for(o=a=0;o2&&!t?s+(n.push(e)-1)+"~":e}).replace(/\s+/g," ").trim().replace(/\ ?([[\({},?\.:])\ ?/g,"$1")){for(var r,o=[],i=0;e&&(r=e.match(c))&&!r.index;){var u,l,p=/,|([[{(])|$/g;for(e=RegExp.rightContext,u=r[2]?n[r[2]].slice(1,-1).trim().replace(/\s+/g," "):r[1];l=(r=p.exec(e))[1];)!function(t,n){var r,o=1,i=d[t];for(i.lastIndex=n.lastIndex;r=i.exec(e);)if(r[0]===t)++o;else if(!--o)break;n.lastIndex=o?e.length:i.lastIndex}(l,p);l=e.slice(0,r.index),e=RegExp.rightContext,o[i++]=a(l,1,u)}e=i?i>1?"["+o.join(",")+'].join(" ").trim()':o[0]:a(e,t)}return e}function a(e,t,n){var r;return e=e.replace(m,function(e,t,n,o,i){return n&&(o=r?0:o+e.length,"this"!==n&&"global"!==n&&"window"!==n?(e=t+'("'+n+g+n,o&&(r="."===(i=i[o])||"("===i||"["===i)):o&&(r=!h.test(i.slice(o)))),e}),r&&(e="try{return "+e+"}catch(e){E(e,this)}"),n?e=(r?"function(){"+e+"}.call(this)":"("+e+")")+'?"'+n+'":""':t&&(e="function(v){"+(r?e.replace("return ","v="):"v=("+e+")")+';return v||v===0?v:""}.call(this)'),e}var u={};t.haveRaw=ge.hasRaw,t.hasExpr=ge.hasExpr,t.loopKeys=ge.loopKeys,t.clearCache=function(){u={}},t.errorHandler=null;var s=String.fromCharCode(8279),c=/^(?:(-?[_A-Za-z\xA0-\xFF][-\w\xA0-\xFF]*)|\u2057(\d+)~):/,f=RegExp(ge.S_QBLOCKS,"g"),l=/\u2057/g,p=/\u2057(\d+)~/g,d={"(":/[()]/g,"[":/[[\]]/g,"{":/[{}]/g},g='"in this?this:'+("object"!=typeof e?"global":"window")+").",m=/[,{][\$\w]+(?=:)|(^ *|[^$\w\.{])(?!(?:typeof|true|false|null|undefined|in|instanceof|is(?:Finite|NaN)|void|NaN|new|Date|RegExp|Math)(?![$\w]))([$_A-Za-z][$\w]*)/g,h=/^(?=(\.[$\w]+))\1(?:[^.[(]|$)/;return t.version=ge.version="v2.4.2",t}(),he=function(){function e(e,r,o){var i=e&&e.match(/^\s*<([-\w]+)/),a=i&&i[1].toLowerCase(),u=D("div",o&&b(a));return e=n(e,r),s.test(a)?u=t(u,e,a):x(u,e),u.stub=!0,u}function t(e,t,n){var r="o"===n[0],o=r?"select>":"table>";if(e.innerHTML="<"+o+t.trim()+"|>([\S\s]*?)<\/yield\s*>|>)/gi,i=/]*)['"]\s*>([\S\s]*?)<\/yield\s*>/gi,a=/|>([\S\s]*?)<\/yield\s*>)/gi,u={tr:"tbody",th:"tr",td:"tr",col:"colgroup"},s=pe&&pe<10?ce:/^(?:t(?:body|head|foot|[rhd])|caption|col(?:group)?)$/;return e}(),ve=function(t){if(!e)return{add:function(){},inject:function(){}};var n=function(){var e=D("style");O(e,"type","text/css");var t=B("style[type=riot]");return t?(t.id&&(e.id=t.id),t.parentNode.replaceChild(e,t)):document.getElementsByTagName("head")[0].appendChild(e),e}(),r=n.styleSheet,o="";return Object.defineProperty(t,"styleNode",{value:n,writable:!0}),{add:function(e){o+=e},inject:function(){o&&(r?r.cssText+=o:n.innerHTML+=o,o="")}}}(Q),xe=function(e){var t=e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame;if(!t||/iP(ad|hone|od).*OS 6/.test(e.navigator.userAgent)){var n=0;t=function(e){var t=Date.now(),r=Math.max(16-(t-n),0);setTimeout(function(){e(n=t+r)},r)}}return t}(e||{});Q.util={brackets:ge,tmpl:me},Q.mixin=function(){var e={},t=e[Y]={},n=0;return function(r,o,i){if(y(r))return void Q.mixin("__unnamed_"+n++,r,!0);var a=i?t:e;if(!o){if(typeof a[r]===ie)throw new Error("Unregistered mixin: "+r);return a[r]}h(o)?(R(o.prototype,a[r]||{}),a[r]=o):a[r]=R(a[r]||{},o)}}(),Q.tag=function(e,t,n,r,o){return h(r)&&(o=r,/^[\w\-]+\s?=/.test(n)?(r=n,n=""):r=""),n&&(h(n)?o=n:ve.add(n)),e=e.toLowerCase(),J[e]={name:e,tmpl:t,attrs:r,fn:o},e},Q.tag2=function(e,t,n,r,o){return n&&ve.add(n),J[e]={name:e,tmpl:t,attrs:r,fn:o},e},Q.mount=function(e,t,n){function r(e){var t="";return m(e,function(e){/[^-\w]/.test(e)||(e=e.trim().toLowerCase(),t+=",["+ne+'="'+e+'"],['+te+'="'+e+'"]')}),t}function o(){var e=Object.keys(J);return e+r(e)}function i(e){if(e.tagName){var r=C(e,ne)||C(e,te);t&&r!==t&&(r=t,O(e,ne,t),O(e,te,t));var o=U(e,r||e.tagName.toLowerCase(),n);o&&s.push(o)}else e.length&&m(e,i)}var a,u,s=[];if(ve.inject(),y(t)&&(n=t,t=0),typeof e===re?("*"===e?e=u=o():e+=r(e.split(/, */)),a=e?q(e):[]):a=e,"*"===t){if(t=u||o(),a.tagName)a=q(t,a);else{var c=[];m(a,function(e){c.push(q(t,e))}),a=c}t=0}return i(a),s},Q.update=function(){return m(X,function(e){e.update()})},Q.vdom=X,Q.Tag=l;var be=function(e){function t(t){var n=e[t];if(n)return n;throw new Error('Parser "'+t+'" not loaded.')}function n(e){var t=e.split(".");if(2!==t.length)throw new Error("Bad format for parsers._req");var n=i[t[0]][t[1]];if(n)return n;throw new Error('Parser "'+e+'" not found.')}function r(e,t){if(t)for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function o(e,n,o,i){return o=r({pretty:!0,filename:i,doctype:"html"},o),t(e).render(n,o)}var i={};return i.html={jade:function(e,t,n){return console.log('DEPRECATION WARNING: jade was renamed "pug" - The jade parser will be removed in riot@3.0.0!'),o("jade",e,t,n)},pug:function(e,t,n){return o("pug",e,t,n)}},i.css={less:function(e,n,o,i){var a;return o=r({sync:!0,syncImport:!0,filename:i},o),t("less").render(n,o,function(e,t){if(e)throw e;a=t.css}),a}},i.js={es6:function(e,n){return n=r({blacklist:["useStrict","strict","react"],sourceMaps:!1,comments:!1},n),t("babel").transform(e,n).code},babel:function(e,n,o){return t("babel").transform(e,r({filename:o},n)).code},buble:function(e,n,o){return n=r({source:o,modules:!1},n),t("buble").transform(e,n).code},coffee:function(e,n){return t("CoffeeScript").compile(e,r({bare:!0},n))},livescript:function(e,n){return t("livescript").compile(e,r({bare:!0,header:!1},n))},typescript:function(e,n){return t("typescript")(e,n)},none:function(e){return e}},i.js.javascript=i.js.none,i.js.coffeescript=i.js.coffee,i._req=n,i.utils={extend:r},i}(e||global);Q.parsers=be;var ye=function(){function e(e){var t,n=N;for(~e.indexOf("\r")&&(e=e.replace(/\r\n?/g,"\n")),n.lastIndex=0;t=n.exec(e);)"<"===t[0][0]&&(e=RegExp.leftContext+RegExp.rightContext,n.lastIndex=t[3]+1);return e}function t(e,t){var n,r,o,i=[];for(E.lastIndex=0,e=e.replace(/\s+/g," ");n=E.exec(e);){var a=n[1].toLowerCase(),u=n[2];u?(u[0]!==q&&(u=q+(u[0]===B?u.slice(1,-1):u)+q),"type"===a&&I.test(u)?r=u:(F.test(u)&&("value"===a?o=1:M.test(a)?a="__"+a:~T.indexOf(a)&&(a="riot-"+a)),i.push(a+"="+u))):i.push(a)}return r&&(o&&(r=q+t._bp[0]+B+r.slice(1,-1)+B+t._bp[1]+q),i.push("type="+r)),i.join(" ")}function n(e,t,n){var r=n._bp;if(e&&r[4].test(e)){for(var o,i=t.expr&&(t.parser||t.type)?u:0,a=ge.split(e,0,r),s=1;s"}),!o.whitespace){var a=[];/]/.test(e)&&(e=e.replace(A,function(e){return a.push(e),""})),e=e.trim().replace(/\s+/g," "),a.length&&(e=e.replace(/\u0002/g,function(){return a.shift()}))}return o.compact&&(e=e.replace(j,"><$1")),r(e,i).replace(k,"")}function i(t,n,r){return Array.isArray(n)?(r=n,n={}):(r||(r=[]),n||(n={})),r._bp=ge.array(n.brackets),o(e(t),n,r)}function a(e){var t,n,r,o,i=[],a=RegExp;for(~e.indexOf("/")&&(e=function(e,t,n){for(t.lastIndex=0;n=t.exec(e);)"/"!==n[0][0]||n[1]||n[2]||(e=a.leftContext+" "+a.rightContext,t.lastIndex=n[3]+1);return e}(e,Z));t=e.match(z);)i.push(a.leftContext),e=a.rightContext,r=function(e,t){var n,r=1;for(t.lastIndex=0;r&&(n=t.exec(e));)"{"===n[0]?++r:"}"===n[0]&&--r;return r?e.length:t.lastIndex}(e,K),o=t[1],n=!/^(?:if|while|for|switch|catch|function)$/.test(o),o=n?t[0].replace(o,"this."+o+" = function"):t[0],i.push(o,e.slice(0,r)),e=e.slice(r),n&&!/^\s*.\s*bind\b/.test(e)&&i.push(".bind(this)");return i.length?i.join("")+e:e}function u(e,t,n,r,o){return/\S/.test(e)?(n||(n=t.type),(t.parser||n&&be._req("js."+n,!0)||a)(e,r,o).replace(/\r\n?/g,"\n").replace(k,"")):""}function s(e,t,n,r){return"string"==typeof t&&(r=n,n=t,t={}),n&&"object"==typeof n&&(r=n,n=""),r||(r={}),u(e,t||{},n,r.parserOptions,r.url)}function c(e,t){return t.replace(G,function(t,n,r){return r?(r=r.replace(/[^,]+/g,function(t){var n=t.trim();return n&&"from"!==n&&"to"!==n&&"%"!==n.slice(-1)?n=n.indexOf(":scope")<0?e+" "+n+',[riot-tag="'+e+'"] '+n+',[data-is="'+e+'"] '+n:n.replace(":scope",e)+","+n.replace(":scope",'[riot-tag="'+e+'"]')+","+n.replace(":scope",'[data-is="'+e+'"]'):t}),n?n+" "+r:r):t})}function f(e,t,n,r){var o=(r||(r={})).scoped;if(n)if("scoped-css"===n)o=!0;else if("css"!==n){var i=be._req("css."+n,!0);e=i(t,e,r.parserOpts||{},r.url)}if(e=e.replace(ge.R_MLCOMMS,"").replace(/\s+/g," ").trim(),o){if(!t)throw new Error("Can not parse scoped CSS without a tagName");e=c(t,e)}return e}function l(e,t,n){return t&&"object"==typeof t?(n=t,t=""):n||(n={}),f(e,n.tagName,t,n)}function p(e,t){return e?(e=B+e.replace(/\\/g,"\\\\").replace(/'/g,"\\'")+B,t&&~e.indexOf("\n")?e.replace(/\n/g,"\\n"):e):"''"}function d(e,t,n,r,o,i,a){var u=a.debug?",\n ":", ",s="});";return o&&"\n"!==o.slice(-1)&&(s="\n"+s),i+"riot.tag2('"+e+B+u+p(t,1)+u+p(n)+u+p(r)+", function(opts) {\n"+o+s}function g(e){if(/<[-\w]/.test(e))for(var t,n=e.lastIndexOf("<"),r=e.length;~n;){if(t=e.slice(n,r).match(X))return n+=t.index+t[0].length,t=e.slice(0,n),"<-/>\n"===t.slice(-5)&&(t=t.slice(0,-5)),[t,e.slice(n)];r=n,n=e.lastIndexOf("<",n-1)}return["",e]}function m(e){if(e){var t=e.match(U);if(t=t&&(t[2]||t[3]))return t.replace("text/","")}return""}function h(e,t){if(e){var n=e.match(RegExp("\\s"+t+W,"i"));if(n=n&&n[1])return/^['"]/.test(n)?n.slice(1,-1):n}return""}function v(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,'"').replace(/'/g,"'")}function x(e){var t=v(h(e,"options"));return t?JSON.parse(t):null}function b(e,t,n,r){var o=m(n),i=h(n,"src"),a=C({},t.parserOptions.js);return!i&&u(e,t,o,C(a,x(n)),r)}function y(e,t,n,r,o){var i=C({},t.parserOptions.style),a={parserOpts:C(i,x(n)),scoped:n&&/\sscoped(\s|=|$)/i.test(n),url:r};return f(e,o,m(n)||t.style,a)}function w(e,t,n,r){return be._req("html."+n,!0)(e,r,t)}function _(i,a,s){var c,f=[],l={template:{},js:{},style:{}};a||(a={}),a.parserOptions=C(l,a.parserOptions||{}),c=a.exclude?function(e){return a.exclude.indexOf(e)<0}:function(){return 1},s||(s="");var p=ge.array(a.brackets);return a.template&&(i=w(i,s,a.template,a.parserOptions.template)),i=e(i).replace(J,function(e,i,l,m,h,v){var x="",w="",_="",C="",O=[];if(O._bp=p,l=l.toLowerCase(),m=m&&c("attribs")?r(t(n(m,a,O),O),O):"",(h||(h=v))&&/\S/.test(h))if(v)c("html")&&(_=o(v,a,O));else{h=h.replace(RegExp("^"+i,"gm"),""),h=h.replace(ee,function(e,t,n){return c("css")&&(w+=(w?" ":"")+y(n,a,t,s,l)),""}),h=h.replace(Y,function(e,t,n){if(c("js")){var r=b(n,a,t,s);r&&(x+=(x?"\n":"")+r)}return""});var S=g(h.replace(k,""));c("html")&&(_=o(S[0],a,O)),c("js")&&(h=u(S[1],a,null,null,s),h&&(x+=(x?"\n":"")+h),x=x.replace($,function(e){return C+=e.trim()+"\n",""}))}return x=/\S/.test(x)?x.replace(/\n{3,}/g,"\n\n"):"",a.entities?(f.push({tagName:l,html:_,css:w,attribs:m,js:x,imports:C}),""):d(l,_,w,m,x,C,a)}),a.entities?f:i}var C=be.utils.extend,O=/"[^"\n\\]*(?:\\[\S\s][^"\n\\]*)*"|'[^'\n\\]*(?:\\[\S\s][^'\n\\]*)*'/.source,S=ge.R_STRINGS.source,E=/ *([-\w:\xA0-\xFF]+) ?(?:= ?('[^']*'|"[^"]*"|\S+))?/g,N=RegExp(//.source+"|"+O,"g"),L=/<(-?[A-Za-z][-\w\xA0-\xFF]*)(?:\s+([^"'\/>]*(?:(?:"[^"]*"|'[^']*'|\/[^>])[^'"\/>]*)*)|\s*)(\/?)>/g,j=/>[ \t]+<(-?[A-Za-z]|\/[-A-Za-z])/g,M=RegExp("^(?:disabled|checked|readonly|required|allowfullscreen|auto(?:focus|play)|compact|controls|default|formnovalidate|hidden|ismap|itemscope|loop|multiple|muted|no(?:resize|shade|validate|wrap)?|open|reversed|seamless|selected|sortable|truespeed|typemustmatch)$"),T=["style","src","d"],R=/^(?:input|img|br|wbr|hr|area|base|col|embed|keygen|link|meta|param|source|track)$/,A=/]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi,I=/^"(?:number|date(?:time)?|time|month|email|color)\b/i,$=/^\s*import(?:(?:\s|[^\s'"])*)['|"].*\n?/gm,k=/[ \t]+$/gm,F=V(/@#\d/,"x01"),P=V(/@#(\d+)/g,"x01"),H="#",D="⁗",q='"',B="'",z=/^[ \t]*([$_A-Za-z][$\w]*)\s*\([^()]*\)\s*{/m,K=RegExp("[{}]|"+ge.S_QBLOCKS,"g"),Z=RegExp(ge.R_MLCOMMS.source+"|//[^\r\n]*|"+ge.S_QBLOCKS,"g"),G=RegExp("([{}]|^)[ ;]*([^@ ;{}][^{}]*)(?={)|"+O,"g"),U=/\stype\s*=\s*(?:(['"])(.+?)\1|(\S+))/i,W="\\s*=\\s*("+S+"|{[^}]+}|\\S+)",X=/\/>\n|^<(?:\/?-?[A-Za-z][-\w\xA0-\xFF]*\s*|-?[A-Za-z][-\w\xA0-\xFF]*\s+[-\w:\xA0-\xFF][\S\s]*?)>\n/,J=RegExp(/^([ \t]*)<(-?[A-Za-z][-\w\xA0-\xFF]*)(?:\s+([^'"\/>]+(?:(?:@|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/.source.replace("@",S),"gim"),Y=/]*)?>\n?([\S\s]*?)<\/script\s*>/gi,ee=/]*)?>\n?([\S\s]*?)<\/style\s*>/gi;return Q.util.compiler={compile:_,html:i,css:l,js:s,version:"v2.5.7"},_}();Q.compile=function(){function e(e,t,n){var r=new XMLHttpRequest;r.onreadystatechange=function(){4===r.readyState&&(200===r.status||!r.status&&r.responseText.length)&&t(r.responseText,n,e)},r.open("GET",e,!0),r.send("")}function n(e,t){if(typeof e===re){var n=D("script"),r=document.documentElement;t&&(e+="\n//# sourceURL="+t+".js"),n.text=e,r.appendChild(n),r.removeChild(n)}}function r(t,r){function a(){o.trigger("ready"),i=!0,t&&t()}function u(e,t,r){n(ye(e,t,r),r),--c||a()}var s=q('script[type="riot/tag"]'),c=s.length;if(c)for(var f=0;fSeconds Elapsed: {time}

', '', '', function(opts) { 7 | this.time = opts.start || 0 8 | 9 | this.tick = function() { 10 | this.update({ time: ++this.time }) 11 | }.bind(this) 12 | 13 | var timer = setInterval(this.tick, 1000) 14 | 15 | this.on('unmount', function() { 16 | clearInterval(timer) 17 | }) 18 | }); 19 | }); 20 | 21 | 22 | define('tag!tags/panels.tag',['riot'], function(riot){ return riot.tag2('panels', '

{page.title || \'Not found\'}

{page.body || \'Specified id is not found.\'}

', 'panels,[riot-tag="panels"],[data-is="panels"]{ display: block; font-family: sans-serif; margin: 0; padding: 1em; text-align: center; color: #666; } panels nav,[riot-tag="panels"] nav,[data-is="panels"] nav{ display: block; border-bottom: 1px solid #666; padding: 0 0 1em; } panels nav > a,[riot-tag="panels"] nav > a,[data-is="panels"] nav > a{ display: inline-block; padding: 0 .8em; } panels nav > a:not(:first-child),[riot-tag="panels"] nav > a:not(:first-child),[data-is="panels"] nav > a:not(:first-child){ border-left: 1px solid #eee; }', '', function(opts) { 23 | var self = this 24 | self.data = [ 25 | { id: "", title: "Home", body: "Click the link above." }, 26 | { id: "1", title: "First", body: "This is the first page." }, 27 | { id: "2", title: "Second", body: "This is the second page." } 28 | ] 29 | self.page = self.data[0] 30 | 31 | riot.route(function(id) { 32 | self.page = self.data.filter(function(r) { return r.id == id })[0] || {} 33 | self.update() 34 | }) 35 | }); 36 | }); 37 | 38 | 39 | define('tag!tags/todo.tag',['riot'], function(riot){ return riot.tag2('todo', '

{opts.title}

', '', '', function(opts) { 40 | this.items = opts.items 41 | 42 | this.edit = function(e) { 43 | this.text = e.target.value 44 | }.bind(this) 45 | 46 | this.add = function(e) { 47 | if (this.text) { 48 | this.items.push({ title: this.text }) 49 | this.text = this.input.value = '' 50 | } 51 | }.bind(this) 52 | 53 | this.removeAllDone = function(e) { 54 | this.items = this.items.filter(function(item) { 55 | return !item.done 56 | }) 57 | }.bind(this) 58 | 59 | this.whatShow = function(item) { 60 | return !item.hidden 61 | }.bind(this) 62 | 63 | this.onlyDone = function(item) { 64 | return item.done 65 | }.bind(this) 66 | 67 | this.toggle = function(e) { 68 | var item = e.item 69 | item.done = !item.done 70 | return true 71 | }.bind(this) 72 | }); 73 | }); 74 | 75 | define('js/app',[ 76 | "riot", 77 | "tag!tags/timer.tag", 78 | "tag!tags/panels.tag", 79 | "tag!tags/todo.tag" 80 | 81 | ], function(riot) { 82 | 83 | riot.mount('timer', { 84 | start: 0 85 | }); 86 | 87 | riot.mount('panels'); 88 | 89 | riot.mount('todo', { 90 | items: [{ title: 'wash my teeth' }, { title: 'wipe my hands' }] 91 | }); 92 | 93 | riot.route.start(true); 94 | }); 95 | 96 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RIOT loader for SystemJS and RequireJS example 6 | 7 | 8 | 9 | 10 | 11 |
12 | RequireJS Example 13 | RequireJS all-in-one-file 14 | SystemJS Example 15 | SystemJS + precompiled tags 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/js/app.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "riot", 3 | "tag!tags/timer.tag", 4 | "tag!tags/panels.tag", 5 | "tag!tags/todo.tag" 6 | 7 | ], function(riot) { 8 | 9 | riot.mount('timer', { 10 | start: 0 11 | }); 12 | 13 | riot.mount('panels'); 14 | 15 | riot.mount('todo', { 16 | items: [{ title: 'wash my teeth' }, { title: 'wipe my hands' }] 17 | }); 18 | 19 | riot.route.start(true); 20 | }); 21 | -------------------------------------------------------------------------------- /example/js/app.precompiled.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "riot", 3 | "dist/alltags.js" 4 | 5 | ], function(riot) { 6 | 7 | riot.mount('timer', { 8 | start: 0 9 | }); 10 | 11 | riot.mount('panels'); 12 | 13 | riot.mount('todo', { 14 | items: [{ title: 'wash my teeth' }, { title: 'wipe my hands' }] 15 | }); 16 | 17 | riot.route.start(true); 18 | 19 | 20 | }); 21 | -------------------------------------------------------------------------------- /example/requirejs.build.js: -------------------------------------------------------------------------------- 1 | ({ 2 | 3 | baseUrl: ".", 4 | 5 | paths: { 6 | "riot": "../node_modules/riot/riot+compiler.min", 7 | "tag": "../requirejs-riot", 8 | "tags": "./tags", 9 | "dist": "./dist" 10 | }, 11 | 12 | normalizeDirDefines: "all", 13 | preserveLicenseComments: false, 14 | stubModules: ['tag'], 15 | 16 | name: "js/app", 17 | 18 | out: "dist/app.built.js", 19 | optimize: 'none', 20 | logLevel: 0, 21 | useStrict: true 22 | 23 | }) 24 | -------------------------------------------------------------------------------- /example/requirejs.config.js: -------------------------------------------------------------------------------- 1 | requirejs.config({ 2 | paths: { 3 | "riot": "/node_modules/riot/riot+compiler.min", 4 | "tag": "../requirejs-riot", 5 | "tags": "./tags", 6 | "dist": "./dist" 7 | } 8 | }); 9 | -------------------------------------------------------------------------------- /example/requirejs_bundled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AMD RequireJS example 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 |
20 | RequireJS Example 21 | RequireJS all-in-one-file 22 | SystemJS Example 23 | SystemJS + precompiled tags 24 |
25 |
26 |
27 |

Timer

28 | 29 |
30 |
31 |

Panels

32 | 33 |
34 |
35 |

Todo

36 | 37 |
38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /example/requirejs_example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AMD RequireJS example 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 |
18 | RequireJS Example 19 | RequireJS all-in-one-file 20 | SystemJS Example 21 | SystemJS + precompiled tags 22 |
23 |
24 |
25 |

Timer

26 | 27 |
28 |
29 |

Panels

30 | 31 |
32 |
33 |

Todo

34 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /example/systemjs_example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AMD Riot example 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 22 |
23 | RequireJS Example 24 | RequireJS all-in-one-file 25 | SystemJS Example 26 | SystemJS + precompiled tags 27 |
28 |
29 |
30 |

Timer

31 | 32 |
33 |
34 |

Panels

35 | 36 |
37 |
38 |

Todo

39 | 40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /example/systemjs_precompiled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AMD Riot example 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 |
18 | RequireJS Example 19 | RequireJS all-in-one-file 20 | SystemJS Example 21 | SystemJS + precompiled tags 22 |
23 |
24 |
25 |

Timer

26 | 27 |
28 |
29 |

Panels

30 | 31 |
32 |
33 |

Todo

34 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /example/tags/panels.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

{ page.title || 'Not found' }

6 |

{ page.body || 'Specified id is not found.' }

7 |
8 | 9 | 23 | 24 | 46 | 47 | -------------------------------------------------------------------------------- /example/tags/timer.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Seconds Elapsed: { time }

4 | 5 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/tags/todo.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 |

{ opts.title }

4 | 5 |
    6 |
  • 7 | 10 |
    • 11 |
12 | 13 |
14 | 15 | 16 | 17 | 19 |
20 | 21 | 22 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /jspm.config.js: -------------------------------------------------------------------------------- 1 | SystemJS.config({ 2 | baseURL: "/", 3 | paths: { 4 | "npm:": "jspm_packages/npm/", 5 | "dist/": "example/dist/", 6 | "riot": "node_modules/riot/riot.js", 7 | "tag": "systemjs-riot.js", 8 | "tags/": "example/tags/", 9 | "github:": "jspm_packages/github/" 10 | }, 11 | nodeConfig: { 12 | "paths": { 13 | "systemjs-riot/": "" 14 | } 15 | }, 16 | devConfig: { 17 | "map": { 18 | "plugin-babel": "npm:systemjs-plugin-babel@0.0.25", 19 | "assert": "npm:jspm-nodelibs-assert@0.2.1", 20 | "vm": "npm:jspm-nodelibs-vm@0.2.1" 21 | } 22 | }, 23 | transpiler: "plugin-babel", 24 | meta: { 25 | "riot": { 26 | "build": false 27 | }, 28 | "*.tag": { 29 | "defaultExtension": false, 30 | "loader": "tag", 31 | "format": "esm" 32 | } 33 | }, 34 | map: { 35 | "tag": "systemjs-riot.js", 36 | "riot-compiler": "npm:riot-compiler@2.5.7" 37 | } 38 | }); 39 | 40 | SystemJS.config({ 41 | packageConfigPaths: [ 42 | "npm:@*/*.json", 43 | "npm:*.json", 44 | "github:*/*.json" 45 | ], 46 | map: { 47 | "fs": "npm:jspm-nodelibs-fs@0.2.1", 48 | "path": "npm:jspm-nodelibs-path@0.2.3", 49 | "process": "npm:jspm-nodelibs-process@0.2.1" 50 | }, 51 | packages: {} 52 | }); 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "systemjs-riot", 3 | "version": "1.4.10", 4 | "description": "RiotJS loader plugin for jspm/systemjs and requirejs", 5 | "main": "systemjs-riot.js", 6 | "engines": { 7 | "node": "8.11.x || 4.2.x" 8 | }, 9 | "readmeFilename": "README.md", 10 | "files": [ 11 | "systemjs-riot.js", 12 | "requirejs-riot.js", 13 | "README.md" 14 | ], 15 | "scripts": { 16 | "test": "make test" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/HuasoFoundries/systemjs-riot" 21 | }, 22 | "keywords": [ 23 | "jspm", 24 | "systemjs", 25 | "requirejs", 26 | "riotjs", 27 | "loader", 28 | "plugin" 29 | ], 30 | "author": "Felipe Figueroa ", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/HuasoFoundries/systemjs-riot/issues" 34 | }, 35 | "homepage": "https://github.com/HuasoFoundries/systemjs-riot", 36 | "devDependencies": { 37 | "babel-eslint": "^8.2.5", 38 | "eslint": "^4.19.1", 39 | "jspm": "^0.17.0-beta.48", 40 | "mocha": "^5.2.0", 41 | "requirejs": "^2.3.5", 42 | "riot": "^2.6.8", 43 | "serve": "^9.6.0" 44 | }, 45 | "jspm": { 46 | "format": "esm", 47 | "registry": "jspm", 48 | "devDependencies": { 49 | "assert": "npm:jspm-nodelibs-assert@^0.2.0", 50 | "plugin-babel": "npm:systemjs-plugin-babel@^0.0.25", 51 | "vm": "npm:jspm-nodelibs-vm@^0.2.0" 52 | }, 53 | "peerDependencies": { 54 | "fs": "npm:jspm-nodelibs-fs@^0.2.0", 55 | "path": "npm:jspm-nodelibs-path@^0.2.0", 56 | "process": "npm:jspm-nodelibs-process@^0.2.0", 57 | "riot-compiler": "npm:riot-compiler@2" 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /requirejs-riot.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license The MIT License (MIT) 3 | * 4 | * Copyright (c) 2016 Felipe Figueroa (amenadiel@gmail.com) 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining a copy 7 | * of this software and associated documentation files (the "Software"), to deal 8 | * in the Software without restriction, including without limitation the rights 9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | * copies of the Software, and to permit persons to whom the Software is 11 | * furnished to do so, subject to the following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included in 14 | * all copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | * THE SOFTWARE. 23 | */ 24 | define(['module'], function(module) { 25 | 26 | 'use strict'; 27 | 28 | var buildMap = {}; 29 | var fileExtension = '.tag'; 30 | var riotloader = { 31 | version: '0.0.1', 32 | 33 | getUrlContents: function GET(url, cb) { 34 | var req = new XMLHttpRequest(); 35 | 36 | req.onreadystatechange = function() { 37 | if (req.readyState === 4 && 38 | (req.status === 200 || !req.status && req.responseText.length)) { 39 | cb(req.responseText, url); 40 | } 41 | }; 42 | req.open('GET', url, true); 43 | req.send(''); 44 | }, 45 | 46 | load: function(name, parentRequire, onLoad, config) { 47 | 48 | var name_with_extension = (name.indexOf(fileExtension) === -1) ? name.fileExtension : name, 49 | fileUrl = parentRequire.toUrl(name_with_extension), 50 | compiledTag; 51 | 52 | if (config.isBuild && require.nodeRequire) { 53 | try { 54 | 55 | var noderiot = require.nodeRequire('riot'), 56 | fs = require.nodeRequire('fs'), 57 | tagtext = fs.readFileSync(fileUrl, 'utf8'); 58 | 59 | compiledTag = noderiot.compile(tagtext); 60 | 61 | buildMap[name] = compiledTag; 62 | } catch (e) { 63 | console.log('Riot not installed. Use "sudo npm install riot -g" to enable.'); 64 | console.log('Exception! ', e); 65 | } 66 | onLoad(); 67 | 68 | 69 | } else { 70 | riotloader.getUrlContents(fileUrl, function(rawTag) { 71 | parentRequire(['riot'], function(riot) { 72 | compiledTag = riot.compile(rawTag, true); 73 | var text = "require(['riot'],function(riot) {\n" + compiledTag + " });"; 74 | onLoad.fromText(text); 75 | 76 | }); 77 | }); 78 | 79 | } 80 | return; 81 | 82 | }, 83 | 84 | write: function(pluginName, moduleName, write) { 85 | console.log('write', moduleName); 86 | if (buildMap.hasOwnProperty(moduleName)) { 87 | var content = buildMap[moduleName]; 88 | write("define('" + pluginName + "!" + moduleName + "',['riot'], function(riot){ return " + content + "});\n"); 89 | } 90 | } 91 | }; 92 | 93 | return riotloader; 94 | }); 95 | -------------------------------------------------------------------------------- /systemjs-riot.js: -------------------------------------------------------------------------------- 1 | /* SystemJS Riot Loader Plugin */ 2 | 'use strict'; 3 | 4 | import compiler from 'riot-compiler'; 5 | 6 | export function translate(load) { 7 | let precompiled = compiler.compile(load.source); 8 | let output; 9 | 10 | if (load.metadata.format === 'esm') { 11 | output = `import riot from 'riot';\n${precompiled}`; 12 | } else { 13 | output = `define(['riot'], function(riot) { ${precompiled} });`; 14 | } 15 | 16 | load.source = output; 17 | return output; 18 | } 19 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var assert = require('assert'), 2 | Builder = require('jspm').Builder, 3 | 4 | 5 | fs = require('fs'), 6 | thetags = ['tags/todo.tag', 'tags/timer.tag', 'tags/panels.tag'], 7 | theoutputs = ['example/dist/todo.tag.js', 'example/dist/timer.tag.js', 'example/dist/panels.tag.js']; 8 | 9 | describe('Bundle precompiled tag file', function() { 10 | this.timeout(10000); 11 | var cb = function(filein, fileout) { 12 | return function(done) { 13 | 14 | 15 | fs.exists(fileout, function(exists) { 16 | if (exists) { 17 | fs.unlinkSync(fileout); 18 | } 19 | 20 | var builder = new Builder(); 21 | 22 | 23 | builder.bundle('tag!' + filein, fileout, { 24 | minify: false, 25 | sourceMaps: false, 26 | format: 'amd' 27 | }).then(function() { 28 | done(); 29 | }).catch(function(err) { 30 | console.error(err); 31 | throw err; 32 | }); 33 | }); 34 | 35 | }; 36 | }; 37 | for (var i = 0; i < thetags.length; i++) { 38 | var infile = thetags[i], 39 | outfile = theoutputs[i]; 40 | 41 | it('Should be able to compile and bundle ' + infile, cb(infile, outfile)); 42 | 43 | } 44 | }); 45 | 46 | describe('The bundled file containts valid code', function() { 47 | this.timeout(2000); 48 | var cb = function(fileout) { 49 | return function(done) { 50 | setTimeout(function() { 51 | var code = fs.readFileSync(fileout); 52 | assert.ok(/riot\.tag2/.test(code)); 53 | 54 | done(); 55 | }, 50); 56 | }; 57 | }; 58 | for (var j = 0; j < thetags.length; j++) { 59 | var outfile = theoutputs[j]; 60 | it(outfile + ' should contain riot.tag2', cb(outfile)); 61 | } 62 | }); 63 | --------------------------------------------------------------------------------