Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaeh
jaeh committed Dec 26, 2019
1 parent ef39ef9 commit 8005bac
Show file tree
Hide file tree
Showing 19 changed files with 53 additions and 53 deletions.
2 changes: 1 addition & 1 deletion docs/404.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/core/magic.css?sI/kDiAVD2" integrity="sha384-sI/kDiAVD2mbOu5b2e4FsA0pkEapoX3fyYcLhnOWDeguQ51IZdwFABIaB8Rm9HYU" crossorigin="anonymous"/><link rel="icon" href="/core/favicon.ico"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/core/"><img src="/core/logo.png" role="presentation" alt=""/><span>@magic</span></a><nav class="Menu"><ul><li><a href="/core/concepts/">concepts</a></li><li><a href="/core/files/">files &amp; directories</a></li><li><a href="/core/modules/">modules</a></li><li><a href="/core/themes/">themes</a></li><li><a href="/core/libraries/">libraries</a></li><li><a href="/core/news/">news</a></li></ul></nav></header><div class="Page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This app neither saves, collects, nor shares any data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/core/magic.js?te8pLUB3Co" integrity="sha384-te8pLUB3Coe4ePjccT/FvDzr7TeU7k5WA/80zN3CrzjWYvsv9ncT937KslR3sYit" crossorigin="anonymous"></script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/core/magic.css?sI/kDiAVD2" integrity="sha384-sI/kDiAVD2mbOu5b2e4FsA0pkEapoX3fyYcLhnOWDeguQ51IZdwFABIaB8Rm9HYU" crossorigin="anonymous"/><link rel="icon" href="/core/favicon.ico"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/core/"><img src="/core/logo.png" role="presentation" alt=""/><span>@magic</span></a><nav class="Menu"><ul><li><a href="/core/concepts/">concepts</a></li><li><a href="/core/files/">files &amp; directories</a></li><li><a href="/core/modules/">modules</a></li><li><a href="/core/themes/">themes</a></li><li><a href="/core/libraries/">libraries</a></li><li><a href="/core/news/">news</a></li></ul></nav></header><div class="Page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This app neither saves, collects, nor shares any data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/core/magic.js?AegcMQR3ow" integrity="sha384-AegcMQR3owpOS/IyNJOojdU4+vKazNTua0cM3okpAsmHxEyuq5MYC73AS1I2LJb2" crossorigin="anonymous"></script></body></html>
2 changes: 1 addition & 1 deletion docs/concepts/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/core/magic.css?sI/kDiAVD2" integrity="sha384-sI/kDiAVD2mbOu5b2e4FsA0pkEapoX3fyYcLhnOWDeguQ51IZdwFABIaB8Rm9HYU" crossorigin="anonymous"/><link rel="icon" href="/core/favicon.ico"/><title>@magic/core concepts</title><meta name="description" content="@magic/core conceptual information. explains the main concepts that make the @magic work."/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic/core concepts"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/core/"><img src="/core/logo.png" role="presentation" alt=""/><span>@magic</span></a><nav class="Menu"><ul><li class="active"><a href="/core/concepts/">concepts</a><ul><li><a href="/core/concepts/#modules">modules</a></li><li><a href="/core/concepts/#state">state</a></li><li><a href="/core/concepts/#actions">actions</a></li><li><a href="/core/concepts/#views">views</a></li><li><a href="/core/concepts/#styles">styles</a></li><li><a href="/core/concepts/#globals">global</a></li><li><a href="/core/concepts/#lambdas">server lambdas</a></li></ul></li><li><a href="/core/files/">files &amp; directories</a></li><li><a href="/core/modules/">modules</a></li><li><a href="/core/themes/">themes</a></li><li><a href="/core/libraries/">libraries</a></li><li><a href="/core/news/">news</a></li></ul></nav></header><div class="Page"><h1>@magic/core concepts</h1><p>magic concepts. These are the building blocks of every module in a magic app</p><div><h2 id="modules">@magic-modules</h2><p>modules are the main building block of magic.</p><p>a page is a module, a button is a module, a link is a module, an image is a module. a @magic app contains modules containing modules that contain modules. this can lead to inception.</p></div><h2>module building blocks</h2><div><h2 id="state">state</h2><div><p>state is a javascript object.</p><p>state can be mutated by actions or effects.</p><p>every rendering step, the state determines the output of the views</p></div></div><div><h2 id="actions">actions</h2><p>actions are an object containing functions</p><p>those functions get the state and their props and may return a new full, but changed, state.</p></div><div><h2 id="effects">effects</h2><p>effects are an object containing functions, just like actions.</p><p>they behave like actions, get a state and props and may return a new full, but changed, state.</p><p>the big difference? effects may be impure and trigger sideeffects outside of hyperapp.</p></div><div><h2 id="views">views</h2><p>views render the state to html</p><p>whenever an action triggers a change in the state, this then triggers a view change.</p></div><div><h2 id="styles">styles</h2><p>every module can have a style object attached to it.</p><p>magic will automagically merge all styles into one global css file.</p><p>in the future, it will also remove unused styles for you.</p><p>style merge order from lowest to highest, last overwrites first:</p><p>module.style &lt; page.style &lt; app.style &lt; theme.style</p><h3 id="styles-magic-css">@magic/css</h3><p>internally, magic uses it&#39;s own css-in-js library.</p><p>to find out more, click the following link:</p><a href="https://magic.github.io/css/" target="_blank" rel="noopener">@magic/css</a></div><div><h2 id="globals">global</h2><p>every module can set a global object, containing state and action properties.</p><p>every state and/or action name in the global object with a value that equals true gets merged into the main app state/actions.</p></div><div><h2 id="lambdas">server lambdas</h2><p>this is the serverside magic.</p><p>you can define functions that get transpiled into serverside lambdas.</p><p>server side lambdas will be available for GET and/or POST requests.</p><p>the server side function signature is (req, res) =&gt; {}, as in any nodejs http server, with the addition of req.body being async =&gt; awaited before execution of the lambda.</p></div><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This app neither saves, collects, nor shares any data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/core/magic.js?te8pLUB3Co" integrity="sha384-te8pLUB3Coe4ePjccT/FvDzr7TeU7k5WA/80zN3CrzjWYvsv9ncT937KslR3sYit" crossorigin="anonymous"></script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/core/magic.css?sI/kDiAVD2" integrity="sha384-sI/kDiAVD2mbOu5b2e4FsA0pkEapoX3fyYcLhnOWDeguQ51IZdwFABIaB8Rm9HYU" crossorigin="anonymous"/><link rel="icon" href="/core/favicon.ico"/><title>@magic/core concepts</title><meta name="description" content="@magic/core conceptual information. explains the main concepts that make the @magic work."/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic/core concepts"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/core/"><img src="/core/logo.png" role="presentation" alt=""/><span>@magic</span></a><nav class="Menu"><ul><li class="active"><a href="/core/concepts/">concepts</a><ul><li><a href="/core/concepts/#modules">modules</a></li><li><a href="/core/concepts/#state">state</a></li><li><a href="/core/concepts/#actions">actions</a></li><li><a href="/core/concepts/#views">views</a></li><li><a href="/core/concepts/#styles">styles</a></li><li><a href="/core/concepts/#globals">global</a></li><li><a href="/core/concepts/#lambdas">server lambdas</a></li></ul></li><li><a href="/core/files/">files &amp; directories</a></li><li><a href="/core/modules/">modules</a></li><li><a href="/core/themes/">themes</a></li><li><a href="/core/libraries/">libraries</a></li><li><a href="/core/news/">news</a></li></ul></nav></header><div class="Page"><h1>@magic/core concepts</h1><p>magic concepts. These are the building blocks of every module in a magic app</p><div><h2 id="modules">@magic-modules</h2><p>modules are the main building block of magic.</p><p>a page is a module, a button is a module, a link is a module, an image is a module. a @magic app contains modules containing modules that contain modules. this can lead to inception.</p></div><h2>module building blocks</h2><div><h2 id="state">state</h2><div><p>state is a javascript object.</p><p>state can be mutated by actions or effects.</p><p>every rendering step, the state determines the output of the views</p></div></div><div><h2 id="actions">actions</h2><p>actions are an object containing functions</p><p>those functions get the state and their props and may return a new full, but changed, state.</p></div><div><h2 id="effects">effects</h2><p>effects are an object containing functions, just like actions.</p><p>they behave like actions, get a state and props and may return a new full, but changed, state.</p><p>the big difference? effects may be impure and trigger sideeffects outside of hyperapp.</p></div><div><h2 id="views">views</h2><p>views render the state to html</p><p>whenever an action triggers a change in the state, this then triggers a view change.</p></div><div><h2 id="styles">styles</h2><p>every module can have a style object attached to it.</p><p>magic will automagically merge all styles into one global css file.</p><p>in the future, it will also remove unused styles for you.</p><p>style merge order from lowest to highest, last overwrites first:</p><p>module.style &lt; page.style &lt; app.style &lt; theme.style</p><h3 id="styles-magic-css">@magic/css</h3><p>internally, magic uses it&#39;s own css-in-js library.</p><p>to find out more, click the following link:</p><a href="https://magic.github.io/css/" target="_blank" rel="noopener">@magic/css</a></div><div><h2 id="globals">global</h2><p>every module can set a global object, containing state and action properties.</p><p>every state and/or action name in the global object with a value that equals true gets merged into the main app state/actions.</p></div><div><h2 id="lambdas">server lambdas</h2><p>this is the serverside magic.</p><p>you can define functions that get transpiled into serverside lambdas.</p><p>server side lambdas will be available for GET and/or POST requests.</p><p>the server side function signature is (req, res) =&gt; {}, as in any nodejs http server, with the addition of req.body being async =&gt; awaited before execution of the lambda.</p></div><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This app neither saves, collects, nor shares any data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/core/magic.js?AegcMQR3ow" integrity="sha384-AegcMQR3owpOS/IyNJOojdU4+vKazNTua0cM3okpAsmHxEyuq5MYC73AS1I2LJb2" crossorigin="anonymous"></script></body></html>

0 comments on commit 8005bac

Please sign in to comment.