tentakelfabrik
/
tiny-consent
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.
2 Commits
1 Branch
18 MiB
Tree: f184cd7e2a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'f184cd7e2a'
${ noResults }
tiny-consent/node_modules/riot/README.md

251 lines
8.9 KiB
Raw Normal View History

adding
4 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/route](https://github.com/riot/route) - Isomorphic router
  110.   - [@riotjs/hot-reload](https://github.com/riot/hot-reload) - Live reload plugin
  111.   - [@riotjs/compiler](https://github.com/riot/compiler) - Advanced tags compiler
  112.   - [@riotjs/parser](https://github.com/riot/parser) - HTML parser
  113.   - [@riotjs/dom-bindings](https://github.com/riot/dom-bindings) - Expressions based template engine
  114.   - [@riotjs/now](https://github.com/riot/now) - https://zeit.co/ now integration
  115.   - [@riotjs/custom-elements](https://github.com/riot/custom-elements) - native custom elements implementation
  116. 

  117. ### CDN hosting

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

  122. ### How to contribute

  123. 

  124. 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.
  125. 

  126. 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.
  127. 

  128. 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.
  129. 

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

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

  133. 

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

  138. 

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

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

  144. 

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

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

  150. 

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

  153. $ make riot
  154. 

  155. # To build without testing

  156. $ make raw
  157. ```
  158. 

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

  160. 

  161. #### 6) Be patient

  162. 

  163. 

  164. ### Credits

  165. 

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

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

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

  182. ## Official Website

  183. 

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

  186. ## Backers

  187. 

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

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

  192. ## Sponsors

  193. 

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

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

  198. ## Thanks

  199. 

  200. Special thanks to Browserstack for their support
  201. 

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

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

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

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

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

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

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

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

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

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

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

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

  240. 

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

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

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

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