tentakelfabrik
/
tiny-one-page
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
1.8 MiB
Tree: be2ee1311e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'be2ee1311e'
${ noResults }
tiny-one-page/node_modules/riot/README.md

250 lines
8.9 KiB
Raw Normal View History

adding
5 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. 

  2. [![Riot logo](https://riot.js.org/img/logo/riot-logo.svg)](https://riot.js.org)
  3. 

  4. ## Simple and elegant component-based UI library

  5. 

  6. [![Build Status][travis-image]][travis-url]
  7. [![MIT License][license-image]][license-url]
  8. [![Join the chat at https://gitter.im/riot/riot][gitter-image]][gitter-url]
  9. [![Join the discord community channel][discord-image]][discord-url]
  10. [![Join the chat (ja) at https://riot-jp-slackin.herokuapp.com/][slack-ja-image]][slack-ja-url]
  11. [![OpenCollective Backers][backer-badge]][backer-url] [![OpenCollective Sponsors][sponsor-badge]][sponsor-url]
  12. 

  13. [![NPM version][npm-version-image]][npm-url]
  14. [![NPM downloads][npm-downloads-image]][npm-url]
  15. [![jsDelivr Hits][jsdelivr-image]][jsdelivr-url]
  16. [![Coverage Status][coverage-image]][coverage-url]
  17. ![Riot Size][lib-size]
  18. [![Code Quality][codeclimate-image]][codeclimate-url]
  19. 

  20. [![Sauce Test Status][saucelabs-image]][saucelabs-url]
  21. 

  22. 

  23. ### Custom components • Concise syntax • Simple API • Tiny Size

  24. 

  25. Riot brings custom components to all modern browsers. It is designed to offer you everything you wished native the web components API looked like.
  26. 

  27. #### Tag definition

  28. 

  29. ```html
  30. <timer>
  31.   <p>Seconds Elapsed: { state.time }</p>
  32. 

  33.   <script>
  34.     export default {
  35.       tick() {
  36.         this.update({ time: ++this.state.time })
  37.       },
  38.       onBeforeMount(props) {
  39.         // create the component initial state
  40.         this.state = {
  41.           time: props.start
  42.         }
  43. 

  44.         this.timer = setInterval(this.tick, 1000)
  45.       },
  46.       onUnmounted() {
  47.         clearInterval(this.timer)
  48.       }
  49.     }
  50.   </script>
  51. </timer>
  52. ```
  53. 

  54. [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=timer)
  55. 

  56. #### Mounting

  57. 

  58. ```javascript
  59. // mount the timer with its initial props
  60. riot.mount('timer', { start: 0 })
  61. ```
  62. 

  63. #### Nesting

  64. 

  65. Custom components let you build complex views with HTML.
  66. 

  67. ```html
  68. <timetable>
  69.   <timer start="0"></timer>
  70.   <timer start="10"></timer>
  71.   <timer start="20"></timer>
  72. </timetable>
  73. ```
  74. 

  75. HTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.
  76. 

  77. 

  78. ### Performant and predictable

  79. - Absolutely the smallest possible amount of DOM updates and reflows.
  80. - Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks.
  81. - One way data flow: updates and unmounts are propagated downwards from parent to children.
  82. - No "magic" or "smart" reactive properties or hooks
  83. - Expressions are pre-compiled and cached for high performance.
  84. - Lifecycle methods for more control.
  85. 

  86. 

  87. ### Close to standards

  88. - No proprietary event system.
  89. - Future proof thanks to the javascript module syntax.
  90. - The rendered DOM can be freely manipulated with other tools.
  91. - No extra HTML root elements, `data-` attributes or fancy custom attributes.
  92. - No new syntax to learn.
  93. - Plays well with any frontend framework.
  94. 

  95. 

  96. ### Use your dearest language and tools

  97. - Create components with CoffeeScript, Jade, LiveScript, Typescript, ES6 or [any pre-processor](https://riot.js.org/compiler/#pre-processors) you want.
  98. - Build with [@riotjs/cli](https://github.com/riot/cli), [webpack](https://github.com/riot/webpack-loader), [Rollup](https://github.com/riot/rollup-plugin-riot), [parcel](https://github.com/riot/parcel-plugin-riot), [Browserify](https://github.com/riot/riotify).
  99. - Test with however you like, you can [load your riot tags directly in node](https://github.com/riot/ssr#render---to-render-only-markup)
  100. 

  101. 

  102. ### Powerful and modular ecosystem

  103. 

  104. The Riot.js ecosystem is completely modular, it's designed to let you pick only the stuff you really need:
  105. 

  106.   - [@riotjs/cli](https://github.com/riot/cli) - CLI to compile locally your tags to javascript
  107.   - [@riotjs/ssr](https://github.com/riot/ssr) - Super simple server side rendering
  108.   - [@riotjs/hydrate](https://github.com/riot/hydrate) - Hydration strategy for your SPA
  109.   - [@riotjs/hot-reload](https://github.com/riot/hot-reload) - Live reload plugin
  110.   - [@riotjs/compiler](https://github.com/riot/compiler) - Advanced tags compiler
  111.   - [@riotjs/parser](https://github.com/riot/parser) - HTML parser
  112.   - [@riotjs/dom-bindings](https://github.com/riot/dom-bindings) - Expressions based template engine
  113.   - [@riotjs/now](https://github.com/riot/now) - https://zeit.co/ now integration
  114.   - [@riotjs/custom-elements](https://github.com/riot/custom-elements) - native custom elements implementation
  115. 

  116. ### CDN hosting

  117. - [unpkg](https://unpkg.com/riot/riot.js)
  118. - [jsDelivr](https://www.jsdelivr.com/projects/riot)
  119. - [cdnjs](https://cdnjs.com/libraries/riot)
  120. 

  121. ### How to contribute

  122. 

  123. If you are reading this it's already a good sign and I am thankful for it! I try my best working as much as I can on riot but your help is always appreciated.
  124. 

  125. If you want to contribute to riot helping the project maintenance please check first the list of [open issues](https://github.com/riot/riot/issues) to understand whether there is a task where you could help.
  126. 

  127. Riot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our [Makefile](Makefile). If you are on a Microsoft machine it could be harder to set up you development environment properly.
  128. 

  129. Following the steps below you should be able to properly submit your patch to the project
  130. 

  131. #### 1) Clone the repo and browse to the riot folder

  132. 

  133. ```shell
  134. $ git clone git@github.com:riot/riot.git && cd riot
  135. ```
  136. #### 2) Set up your git branch

  137. 

  138. ```shell
  139. $ git checkout -b feature/my-awesome-patch
  140. ```
  141. 

  142. #### 3) Install the npm dependencies

  143. 

  144. ```shell
  145. $ npm i
  146. ```
  147. 

  148. #### 4) Build and test riot using the Makefile

  149. 

  150. ```shell
  151. # To build and test riot

  152. $ make riot
  153. 

  154. # To build without testing

  155. $ make raw
  156. ```
  157. 

  158. #### 5) Pull request only against the `dev` branch making sure you have read [our pull request template](.github/PULL_REQUEST_TEMPLATE.md)

  159. 

  160. #### 6) Be patient

  161. 

  162. 

  163. ### Credits

  164. 

  165. Riot is actively maintained with :heart: by:
  166. 

  167. <table>
  168.   <tbody>
  169.     <tr>
  170.       <td valign="top">
  171.         <img width="125" height="125" src="https://github.com/GianlucaGuarini.png?s=125?s=125">
  172.         <br>
  173.         <a href="https://github.com/GianlucaGuarini">Gianluca Guarini</a>
  174.       </td>
  175.      </tr>
  176.   </tbody>
  177. </table>
  178. 

  179. Many thanks to all smart people from all over the world who helped improving it.
  180. 

  181. ## Official Website

  182. 

  183. https://riot.js.org
  184. 

  185. ## Backers

  186. 

  187. Support us with a monthly donation and help us continue our activities. [Become a backer][support-url]
  188. 

  189. [![Backers][backers-image]][support-url]
  190. 

  191. ## Sponsors

  192. 

  193. Become a sponsor to get your logo on our README. [Become a sponsor][support-url]
  194. 

  195. [![Sponsors][sponsors-image]][support-url]
  196. 

  197. ## Thanks

  198. 

  199. Special thanks to Browserstack for their support
  200. 

  201. <a href='https://www.browserstack.com/'>
  202.   <img width='70px' src="https://cdn.worldvectorlogo.com/logos/browserstack.svg" alt="browser stack">
  203. </a>
  204. 

  205. [travis-image]:https://img.shields.io/travis/riot/riot.svg?style=flat-square
  206. [travis-url]:https://travis-ci.org/riot/riot
  207. 

  208. [license-image]:https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  209. [license-url]:LICENSE.txt
  210. 

  211. [npm-version-image]:https://img.shields.io/npm/v/riot.svg?style=flat-square
  212. [npm-downloads-image]:https://img.shields.io/npm/dm/riot.svg?style=flat-square
  213. [npm-url]:https://npmjs.org/package/riot
  214. 

  215. [coverage-image]:https://img.shields.io/coveralls/riot/riot/dev.svg?style=flat-square
  216. [coverage-url]:https://coveralls.io/r/riot/riot?branch=dev
  217. 

  218. [saucelabs-image]:https://saucelabs.com/browser-matrix/testsriotjs.svg?1
  219. [saucelabs-url]:https://saucelabs.com/u/testsriotjs
  220. 

  221. [gitter-image]:https://img.shields.io/badge/GITTER-JOIN_CHAT_%E2%86%92-1dce73.svg?style=flat-square
  222. [gitter-url]:https://gitter.im/riot/riot?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
  223. 

  224. [discord-url]:https://discord.gg/PagXe5Y
  225. [discord-image]:https://img.shields.io/badge/DISCORD-JOIN_CHANNEL_%E2%86%92-7289da.svg?style=flat-square
  226. 

  227. [slack-ja-image]:https://img.shields.io/badge/SLACK_(ja)-JOIN_CHAT_%E2%86%92-551a8b.svg?style=flat-square
  228. [slack-ja-url]:https://riot-jp-slackin.herokuapp.com/
  229. 

  230. [codeclimate-image]:https://api.codeclimate.com/v1/badges/b81ddf3c77e8189876da/maintainability
  231. [codeclimate-url]:https://codeclimate.com/github/riot/riot
  232. 

  233. [donations-campaign-url]:https://pledgie.com/campaigns/31139
  234. [donations-campaign-image]:https://pledgie.com/campaigns/31139.png?skin_name=chrome
  235. 

  236. [jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/riot/badge
  237. [jsdelivr-url]: https://www.jsdelivr.com/package/npm/riot
  238. 

  239. 

  240. [backer-url]: #backers
  241. [backer-badge]: https://opencollective.com/riot/backers/badge.svg?color=blue
  242. [sponsor-url]: #sponsors
  243. [sponsor-badge]: https://opencollective.com/riot/sponsors/badge.svg?color=blue
  244. 

  245. [support-url]: https://opencollective.com/riot#support
  246. 

  247. [lib-size]: https://img.badgesize.io/https://unpkg.com/riot/riot.min.js?compression=gzip
  248. 

  249. [backers-image]: https://opencollective.com/riot/backers.svg
  250. [sponsors-image]: https://opencollective.com/riot/sponsors.svg