+The tiny framework for building web interfaces.
+
To learn more, go to https://hyperapp.dev for documentation, guides, and examples.
Install Hyperapp with npm or Yarn:
npm i hyperappThen with a module bundler like Parcel or Webpack import it in your application and get right down to business.
import { h, app } from "hyperapp"Don't want to set up a build step? Import Hyperapp in a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
<script type="module">
+ import { h, app } from "https://unpkg.com/hyperapp"
+</script>Here's the first example to get you started: a counter that can go up or down. You can try it online here.
<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <script type="module">
+ import { h, app } from "https://unpkg.com/hyperapp"
+
+ app({
+ init: 0,
+ view: state =>
+ h("main", {}, [
+ h("h1", {}, state),
+ h("button", { onClick: state => state - 1 }, "-"),
+ h("button", { onClick: state => state + 1 }, "+")
+ ]),
+ node: document.getElementById("app")
+ })
+ </script>
+ </head>
+ <body>
+ <main id="app"></main>
+ </body>
+</html>The app starts off with init as the initial state. Our code doesn't explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a plain object representation of the DOM known as a virtual DOM, and Hyperapp updates the real DOM to match it whenever the state changes.
Now it's your turn! Experiment with the code a bit. Spend some time thinking about how the view reacts to changes in the state. Can you add a button that resets the counter back to zero? Or how about multiple counters?
We love to talk JavaScript and Hyperapp. If you've hit a stumbling block, hop on the Hyperapp Slack or drop by Spectrum to get support, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out.
Is anything wrong, unclear, missing? Help us improve this page.
Copyright © Jorge Bucaran <https://jorgebucaran.com>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file diff --git a/_redirects b/_redirects new file mode 100644 index 0000000..235cf79 --- /dev/null +++ b/_redirects @@ -0,0 +1,4 @@ +# Netlify redirects file + +# Redirect 404s to index.html (404 should be handled by client) +/* /index.html 200 diff --git a/api.4a87837f.html b/api.4a87837f.html new file mode 100644 index 0000000..11aec1d --- /dev/null +++ b/api.4a87837f.html @@ -0,0 +1,34 @@ ++The tiny framework for building web interfaces.
+
To learn more, go to https://hyperapp.dev for documentation, guides, and examples.
Install Hyperapp with npm or Yarn:
npm i hyperappThen with a module bundler like Parcel or Webpack import it in your application and get right down to business.
import { h, app } from "hyperapp"Don't want to set up a build step? Import Hyperapp in a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
<script type="module">
+ import { h, app } from "https://unpkg.com/hyperapp"
+</script>Here's the first example to get you started: a counter that can go up or down. You can try it online here.
<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <script type="module">
+ import { h, app } from "https://unpkg.com/hyperapp"
+
+ app({
+ init: 0,
+ view: state =>
+ h("main", {}, [
+ h("h1", {}, state),
+ h("button", { onClick: state => state - 1 }, "-"),
+ h("button", { onClick: state => state + 1 }, "+")
+ ]),
+ node: document.getElementById("app")
+ })
+ </script>
+ </head>
+ <body>
+ <main id="app"></main>
+ </body>
+</html>The app starts off with init as the initial state. Our code doesn't explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a plain object representation of the DOM known as a virtual DOM, and Hyperapp updates the real DOM to match it whenever the state changes.
Now it's your turn! Experiment with the code a bit. Spend some time thinking about how the view reacts to changes in the state. Can you add a button that resets the counter back to zero? Or how about multiple counters?
We love to talk JavaScript and Hyperapp. If you've hit a stumbling block, hop on the Hyperapp Slack or drop by Spectrum to get support, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out.
Is anything wrong, unclear, missing? Help us improve this page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis dignissim tellus, eget vestibulum leo feugiat vel. Fusce ac odio at nulla feugiat tincidunt. Cras eu metus varius, placerat ex nec, commodo felis. Morbi ac tempus ligula, eget finibus mi. Maecenas porttitor est a lacus suscipit luctus. Suspendisse ornare mattis purus eu mollis. Maecenas pellentesque sem quam, eu imperdiet ante lobortis in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur purus lectus, sollicitudin in tempus vel, dignissim vitae nibh. In eu elit non elit dapibus dignissim eu congue diam. Nullam ut tellus et erat egestas consectetur eu ut lorem.
\ No newline at end of file diff --git a/examples.md b/examples.md new file mode 100644 index 0000000..9324aea --- /dev/null +++ b/examples.md @@ -0,0 +1,212 @@ +# Examples + +## [Counter](https://codesandbox.io/s/hyperapp-playground-fwjlo) + +```js +import { h, app } from "https://unpkg.com/hyperapp" + +app({ + init: 0, + view: state => + h("div", {}, [ + h("h1", {}, state), + h("button", { onClick: state => state - 1 }, "-"), + h("button", { onClick: state => state + 1 }, "+") + ]), + node: document.getElementById("app") +}) +``` + +## [Calculator](https://codesandbox.io/s/hyperapp-calculator-v8y5h) + +```js +import { h, app } from "hyperapp" + +const computer = { + "+": (a, b) => a + b, + "-": (a, b) => a - b, + "×": (a, b) => a * b, + "÷": (a, b) => a / b +} + +const initialState = { + fn: "", + carry: 0, + value: 0, + hasCarry: false +} + +const Clear = () => initialState + +const NewDigit = (state, number) => ({ + ...state, + hasCarry: false, + value: (state.hasCarry ? 0 : state.value) * 10 + number +}) + +const NewFunction = (state, fn) => ({ + ...state, + fn, + hasCarry: true, + carry: state.value, + value: + state.hasCarry || !state.fn + ? state.value + : computer[state.fn](state.carry, state.value) +}) + +const Equal = state => ({ + ...state, + hasCarry: true, + carry: state.hasCarry ? state.carry : state.value, + value: state.fn + ? computer[state.fn]( + state.hasCarry ? state.value : state.carry, + state.hasCarry ? state.carry : state.value + ) + : state.value +}) + +const Calculator = state => + h("main", {}, [ + Display(state.value), + Keypad([ + Functions({ keys: Object.keys(computer) }), + Digits({ keys: [7, 8, 9, 4, 5, 6, 1, 2, 3, 0] }), + AC, + EQ + ]) + ]) + +const Display = value => h("div", { class: "display" }, value) + +const Keypad = children => h("div", { class: "keys" }, children) + +const Functions = props => + props.keys.map(fn => + h("button", { class: "function", onClick: [NewFunction, fn] }, fn) + ) + +const Digits = props => + props.keys.map(digit => + h( + "button", + { class: { zero: digit === 0 }, onClick: [NewDigit, digit] }, + digit + ) + ) + +const AC = h("button", { onClick: Clear }, "AC") +const EQ = h("button", { onClick: Equal, class: "equal" }, "=") + +app({ + init: initialState, + view: Calculator, + node: document.getElementById("app") +}) +``` + +## [Simple Clock](https://codesandbox.io/s/hyperapp-simple-clock-uhk59) + +```js +import { h, app } from "hyperapp" +import { interval } from "@hyperapp/time" + +const timeToUnits = t => [t.getHours(), t.getMinutes(), t.getSeconds()] + +const formatTime = (hours, minutes, seconds, use24) => + (use24 ? hours : hours > 12 ? hours - 12 : hours) + + ":" + + `${minutes}`.padStart(2, "0") + + ":" + + `${seconds}`.padStart(2, "0") + + (use24 ? "" : ` ${hours > 12 ? "PM" : "AM"}`) + +const posixToHumanTime = (time, use24) => + formatTime(...timeToUnits(new Date(time)), use24) + +const Tick = (state, time) => ({ + ...state, + time +}) + +const ToggleFormat = state => ({ + ...state, + use24: !state.use24 +}) + +const getInitialState = time => ({ + time, + use24: false +}) + +app({ + init: getInitialState(Date.now()), + view: state => + h("div", {}, [ + h("h1", {}, posixToHumanTime(state.time, state.use24)), + h("fieldset", {}, [ + h("legend", {}, "Settings"), + h("label", {}, [ + h("input", { + type: "checkbox", + checked: state.use24, + onInput: ToggleFormat + }), + "Use 24 Hour Clock" + ]) + ]) + ]), + subscriptions: state => interval(Tick, { delay: 1000 }), + node: document.getElementById("app") +}) +``` + +## [Todo App](https://codesandbox.io/s/hyperapp-todo-app-m3ctx) + +```js +import { h, app } from "hyperapp" +import { preventDefault, targetValue } from "@hyperapp/events" + +const getInitialState = items => ({ items, value: "" }) + +const newItem = value => ({ + value, + lastValue: "", + isEditing: false, + id: Math.random().toString(36) +}) + +const NewValue = (state, value) => ({ ...state, value }) + +const Add = state => + state.value.length === 0 + ? state + : { + ...state, + value: "", + items: state.items.concat(newItem(state.value)) + } + +const TodoList = items => + h("ol", {}, items.map(item => h("li", {}, item.value))) + +app({ + init: getInitialState([newItem("Take out the trash")]), + view: state => + h("div", {}, [ + h("h1", {}, "What needs done?"), + TodoList(state.items), + h("form", { onSubmit: preventDefault(Add) }, [ + h("label", {}, [ + h("input", { + value: state.value, + onInput: [NewValue, targetValue] + }) + ]), + h("button", {}, `New #${state.items.length + 1}`) + ]) + ]), + node: document.getElementById("app") +}) +``` diff --git a/faster-than-react.31c816ca.svg b/faster-than-react.31c816ca.svg new file mode 100644 index 0000000..dc58941 --- /dev/null +++ b/faster-than-react.31c816ca.svg @@ -0,0 +1,22 @@ + + \ No newline at end of file diff --git a/favicon.648f6921.png b/favicon.648f6921.png new file mode 100644 index 0000000..d23ba9f Binary files /dev/null and b/favicon.648f6921.png differ diff --git a/global.89bdf38a.css b/global.89bdf38a.css new file mode 100644 index 0000000..9c95d8c --- /dev/null +++ b/global.89bdf38a.css @@ -0,0 +1 @@ +*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none;padding:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select{margin:0}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{border:1px solid #a0a0a0;padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details,dialog{display:block}dialog{background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}code,kbd,pre,samp{font-family:Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}button,input,select,textarea{background-color:transparent;border:1px solid WindowFrame;color:inherit;font:inherit;letter-spacing:inherit;padding:.25em .375em}select{-moz-appearance:none;-webkit-appearance:none;background:no-repeat 100%/1em;border-radius:0;padding-right:1em}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E")}::-ms-expand{display:none}:-ms-input-placeholder{color:rgba(0,0,0,.54)}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:100;font-display:swap;src:url(/IBMPlexSans-Thin.eb4bbefb.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-display:swap;src:url(/IBMPlexSans-Light.ab432367.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/IBMPlexSans-Regular.97a23001.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/IBMPlexSans-Medium.f3ba3949.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/IBMPlexSans-SemiBold.027d36f8.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/IBMPlexSans-Bold.4dfaebd3.ttf) format("truetype")}@font-face{font-family:Fira Code;src:url(/FiraCode-Light.0049a308.woff2) format("woff2"),url(/FiraCode-Light.7462e69b.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/FiraCode-Regular.de18f42f.woff2) format("woff2"),url(/FiraCode-Regular.5c4d2b60.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/FiraCode-Medium.61e32950.woff2) format("woff2"),url(/FiraCode-Medium.fa345726.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Fira Code;src:url(/FiraCode-Bold.d2e4e930.woff2) format("woff2"),url(/FiraCode-Bold.9341457d.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Fira Code VF;src:url(/FiraCode-VF.fa7346fc.woff2) format("woff2-variations"),url(/FiraCode-VF.2a9bbcf8.woff) format("woff-variations");font-weight:300 700;font-style:normal}:root{--primary-blue:#1661ee;--dark-blue:#091226;--body-text-grey:#9da0a8;--error-red:#ff4545;--disabled-grey:#989898;--disabled-grey-2:#f3f4f7;--active-input-text:#dadfe1;--line-separator:#eef0f3}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;color:var(--body-text-grey);background-color:#fff;scroll-behavior:smooth}body{position:relative;overflow-x:hidden}@media (min-width:640px){body{font-size:1.25rem}}::selection{background:var(--primary-blue);color:#fff}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:IBM Plex Sans,sans-serif;color:var(--dark-blue);font-weight:300}.h1,h1{font-size:2.625rem;line-height:1.25}.h1,.h2,h1,h2{font-weight:300;width:95%}.h2,h2{font-size:1.75rem;line-height:1.425}.h3,h3{font-size:1.5rem;line-height:1.5;font-weight:300}.h4,.h5,.h6,h4,h5,h6{font-size:1.25rem;line-height:1.25}.h5,.h6,h5,h6{margin:1em 0}@media (min-width:640px){.h1,h1{font-size:3.375rem;line-height:1.2}.h2,h2{font-size:2.625rem;line-height:1.25}.h3,h3{font-size:1.75rem;font-weight:300;line-height:1.425}.h4,h4{font-size:1.5rem;line-height:1.5}}label{display:block}button,input,select,textarea{border:none;padding:.5rem 0}iframe,img,input,select,textarea{height:auto;max-width:100%}code,kbd,samp{display:inline-block;color:var(--dark-blue);font-family:Fira Code,monospace;font-size:1rem}pre code{display:block;padding:1rem 0;overflow:auto}em{font-weight:500}a,em{color:var(--dark-blue)}a{text-decoration:none}a:hover{color:var(--primary-blue)}a:active,a:hover{text-decoration:underline}a:active{color:var(--body-text-grey)}.arrow-link{display:inline-block;text-decoration:none;position:relative;padding-right:1.5rem;font-size:1.25rem}.arrow-link:after{content:"";display:block;position:absolute;top:.6rem;right:.2rem;background-image:url('data:image/svg+xml;utf8,');background-size:contain;background-repeat:no-repeat;width:.8rem;height:.8rem}.arrow-link:hover:after{background-image:url('data:image/svg+xml;utf8,')}.arrow-link:active:after{background-image:url('data:image/svg+xml;utf8,')}.back-link{display:inline-block;text-decoration:none;position:relative;padding-right:2rem;font-size:1.25rem}.back-link:after{content:"";display:block;position:absolute;top:.33rem;right:.2rem;background-image:url('data:image/svg+xml;utf8,');background-size:contain;background-repeat:no-repeat;width:1.2rem;height:1.2rem}.back-link:hover:after{background-image:url('data:image/svg+xml;utf8,')}.back-link:active:after{background-image:url('data:image/svg+xml;utf8,')}blockquote{color:var(--dark-blue);font-size:1.5rem;padding:1rem 3rem;border-left:1px solid var(--line-separator);margin-left:0}hr{border:none;border-top:1px solid var(--line-separator);margin:2rem 0}caption{font-weight:500}caption,th{color:var(--dark-blue)}th{font-weight:400;text-align:left}td,th{padding:.5rem}strong{font-weight:500}b,strong{color:var(--dark-blue)}b{font-weight:400}abbr,cite,del,dfn,i,ins,q,s,time,u,var{color:var(--dark-blue)}mark{background:var(--primary-blue);color:#fff}small{font-size:.875rem}.error{color:var(--error-red)}fieldset{border:1px solid var(--dark-blue)}.button,button,label,legend{color:var(--dark-blue)}.button,button{padding:.5rem 1rem;border:1px solid;cursor:pointer;min-height:3rem;min-width:3rem}.button+.button,button+button{margin-left:1rem}.button:hover,button:hover{color:var(--primary-blue)}.button:active,button:active{color:#fff;background-color:var(--primary-blue);border-color:var(--primary-blue);outline:none}.button:disabled,button:disabled{color:var(--disabled-grey);background-color:var(--disabled-grey-2);border-color:var(--disabled-grey-2)}.primary-button{color:#fff;background-color:var(--primary-blue);border-color:var(--primary-blue)}.primary-button:hover{color:#fff;background-color:var(--dark-blue);border-color:var(--dark-blue)}.primary-button:active{color:var(--dark-blue);background-color:#fff}.square-button{font-size:0;color:#fff;background-color:var(--primary-blue);border-color:var(--primary-blue);display:flex;align-items:center;justify-content:center;padding:0;position:relative}.square-button:after,.square-button:before{content:"";display:block;background-color:currentColor;position:absolute}.square-button:before{top:.75rem;bottom:.75rem;width:1px}.square-button:after{left:.75rem;right:.75rem;height:1px}.square-button:hover{background-color:#000;border-color:#000;color:#fff}.square-button:hover:before{top:0;bottom:0}.square-button:hover:after{left:0;right:0}.square-button:active{background-color:#fff;border-color:#000;color:#000}.square-button:active:before{top:0;bottom:0}.square-button:active:after{left:0;right:0}input{font-size:inherit}.nice-input,input{color:var(--dark-blue)}.nice-input{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto;max-width:24rem;margin:1rem 0}.nice-input input{grid-row:1;grid-column:1;color:inherit}.nice-input button{grid-row:1;grid-column:2}.nice-input small{grid-row:2;grid-column:1/2}.nice-input.error{color:var(--error-red)}.nice-input.error button{background-color:var(--error-red);border-color:var(--error-red)}body{--menu-width:18rem}.app{margin:0 auto;position:relative;min-height:100vh}.noBodyScroll{overflow:hidden;max-height:100vh}.main-content{padding:1rem 1.25rem;max-width:1024px;position:relative}.secondary-menu{position:fixed;top:1.25rem;right:1.25rem;height:0;display:flex;flex-direction:column;align-items:flex-end;display:none;z-index:5}.secondary-menu a{color:inherit;text-decoration:none;position:relative}.secondary-menu a:hover{color:#546067}.secondary-menu a:hover:before{content:"";display:block;position:fixed;top:0;bottom:0;left:var(--menu-width);right:0;background-color:hsla(0,0%,100%,.8);width:100%;height:100%;min-height:50vh;pointer-events:none;z-index:-1}.secondary-menu a.active{color:var(--dark-blue)}h1 a{text-decoration:none}@media (min-width:992px){.main-content{margin-left:var(--menu-width);margin-bottom:6rem;padding:1.25rem}.secondary-menu{display:flex}}@media (min-width:1320px){body{--menu-width:24rem}}code,pre{padding:0!important;background-color:#fff!important}code{display:inline-block!important;color:var(--dark-blue)!important;font-family:Fira Code,monospace!important;font-size:1rem!important} \ No newline at end of file diff --git a/guides.31d0dce1.html b/guides.31d0dce1.html new file mode 100644 index 0000000..3730c99 --- /dev/null +++ b/guides.31d0dce1.html @@ -0,0 +1 @@ +lorem lorem
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In id turpis et nibh commodo viverra et eu nisl. Pellentesque imperdiet dapibus aliquam. Cras vulputate viverra neque nec ultricies. Mauris consectetur vulputate eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas a auctor augue. Donec iaculis urna eget nisi maximus, vel aliquam magna volutpat. Mauris mattis ac augue non pharetra. Aliquam erat volutpat. Vestibulum ultricies, turpis ac pretium fringilla, quam ante tincidunt nisi, quis venenatis turpis odio sed libero. Nullam pulvinar tempor elit, gravida eleifend odio viverra non.
\ No newline at end of file diff --git a/hyperapp-logo-v1.eed9079f.svg b/hyperapp-logo-v1.eed9079f.svg new file mode 100644 index 0000000..9331f4e --- /dev/null +++ b/hyperapp-logo-v1.eed9079f.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/hyperapp-logo-v2.10d2f4a5.svg b/hyperapp-logo-v2.10d2f4a5.svg new file mode 100644 index 0000000..6f300ba --- /dev/null +++ b/hyperapp-logo-v2.10d2f4a5.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/hypercharged.f1b19631.svg b/hypercharged.f1b19631.svg new file mode 100644 index 0000000..32bb9a7 --- /dev/null +++ b/hypercharged.f1b19631.svg @@ -0,0 +1,16 @@ + + \ No newline at end of file diff --git a/icon-192x192.c99be655.png b/icon-192x192.c99be655.png new file mode 100644 index 0000000..669b11c Binary files /dev/null and b/icon-192x192.c99be655.png differ diff --git a/icon-512x512.ebbe6b77.png b/icon-512x512.ebbe6b77.png new file mode 100644 index 0000000..2d8df0a Binary files /dev/null and b/icon-512x512.ebbe6b77.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf1e03a --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +The Ocean is Sinking
\n \nOcean life is brutal
\n \n\n Family friendly fun at the\n ocean exhibit\n
\n \n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat.\n
\nSurphy McBrah
\n1․ Install Hyperapp with npm or Yarn:
npm i hyperapp2․ Then with a module bundler like Parcel or Webpack import it in your application and get right down to business.
import { h, app } from "hyperapp"3․ Don't want to set up a build step? Import Hyperapp in a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
<script type="module">
+ import { h, app } from "https://unpkg.com/hyperapp"
+</script>Here's the first example to get you started: a counter that can go up or down. You can try it online here.
lorem lorem lorem
In urna ex, finibus sit amet laoreet id, pharetra placerat lorem. Suspendisse laoreet pulvinar nunc, sed tristique ex venenatis tristique. Quisque non vulputate enim, vitae facilisis sapien. Nunc sagittis vel mi et tristique. In ornare leo et lectus ornare, vel pretium odio vulputate. Nam rhoncus quam vel neque rhoncus rutrum. Quisque posuere, purus sit amet ornare blandit, massa ligula sagittis magna, ut interdum purus neque et nisl. Integer eros sapien, faucibus at est vel, rhoncus gravida arcu. In volutpat sapien neque, vel malesuada sapien aliquam at.
\ No newline at end of file diff --git a/src.07c797be.js b/src.07c797be.js new file mode 100644 index 0000000..4d4ad38 --- /dev/null +++ b/src.07c797be.js @@ -0,0 +1,80 @@ +parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c===================================
Welcome! If you're new to Hyperapp, you've found the perfect place to start learning.
Together we'll build a simple newsreader-like application. As we do, we'll work +our way through the five core concepts: view, state, actions, effects and subscriptions.
To move things along, let's imagine we've already made a static version of the +app we want to build, with this HTML:
<div id="app" class="container">
+ <div class="filter">
+ Filter:
+ <span class="filter-word">ocean</span>
+ <button>✎</button>
+ </div>
+ <div class="stories">
+ <ul>
+ <li class="unread">
+ <p class="title">The <em>Ocean </em>is Sinking</p>
+ <p class="author">Kat Stropher</p>
+ </li>
+ <li class="reading">
+ <p class="title"><em>Ocean </em>life is brutal</p>
+ <p class="author">Surphy McBrah</p>
+ </li>
+ <li>
+ <p class="title">
+ Family friendly fun at the
+ <em>ocean </em>exhibit
+ </p>
+ <p class="author">Guy Prosales</p>
+ </li>
+ </ul>
+ </div>
+ <div class="story">
+ <h1>Ocean life is brutal</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
+ </p>
+ <p class="signature">Surphy McBrah</p>
+ </div>
+ <div class="autoupdate">
+ Auto update:
+ <input type="checkbox" />
+ </div>
+</div>...and some CSS here.
It looks like this:
We'll start by making Hyperapp render the HTML for us. Then we will +add dynamic behavior to all the widgets, including text input and dynamically fetching stories.
First, let's begin with the traditional "Hello World!"
Create this html file:
<!doctype html>
+<html>
+ <head>
+ <link rel="stylesheet" href="https://zaceno.github.com/hatut/style.css">
+ <script type="module">
+
+// -- IMPORTS --
+
+import {h, app} from "https://unpkg.com/hyperapp?module"
+
+
+
+// -- ACTIONS --
+
+
+
+// -- VIEWS ---
+
+
+
+// -- RUN --
+
+app({
+ node: document.getElementById("app"),
+ view: () => h("h1", {}, [
+ "Hello ",
+ h("i", {}, "World!")
+ ])
+})
+ </script>
+ </head>
+ <body>
+ <div id="app"></div>
+ </body>
+</html>+The section structure outlined in the comments is not important. It's +just a suggestion for how to organize the code we'll be +adding throughout the tutorial.
+
Open it in a browser, and you'll be greeted with an optimistic Hello World!.
Let's step through what just happened.
Hyperapp exports the app and h functions.
+h is for creating virtual nodes, which is to say: plain javascript objects
+which represent DOM nodes.
The result of
h("h1", {}, [
+ "Hello ",
+ h("i", {}, "World!")
+])is a virtual node, representing
<h1>
+ Hello
+ <i>World!</i>
+</h1>app is the function that runs our app. It is called with a single argument - an object
+which can take several properties. For now we're just concerned with view and node.
Hyperapp calls the view function which tells it the DOM structure we want, in the form
+of virtual nodes. Hyperapp proceeds to create it for us, replacing the node specified in node.
To render the HTML we want, change the view to:
view: () => h("div", {id: "app", class: "container"}, [
+ h("div", {class: "filter"}, [
+ " Filter: ",
+ h("span", {class: "filter-word"}, "ocean"),
+ h("button", {}, "\u270E")
+ ]),
+ h("div", {class: "stories"}, [
+ h("ul", {}, [
+ h("li", {class: "unread"}, [
+ h("p", {class: "title"}, [
+ "The ",
+ h("em", {}, "Ocean"),
+ " is Sinking!"
+ ]),
+ h("p", {class: "author"}, "Kat Stropher")
+ ]),
+ h("li", {class: "reading"}, [
+ h("p", {class: "title"}, [
+ h("em", {}, "Ocean"),
+ " life is brutal"
+ ]),
+ h("p", {class: "author"}, "Surphy McBrah"),
+ ]),
+ h("li", {}, [
+ h("p", {class: "title"}, [
+ "Family friendly fun at the ",
+ h("em", {}, "ocean"),
+ " exhibit"
+ ]),
+ h("p", {class: "author"}, "Guy Prosales")
+ ])
+ ])
+ ]),
+ h("div", {class: "story"}, [
+ h("h1", {}, "Ocean life is brutal"),
+ h("p", {}, `
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip
+ ex ea commodo consequat.
+ `),
+ h("p", {class: "signature"}, "Surphy McBrah")
+ ]),
+ h("div", {class: "autoupdate"}, [
+ "Auto update: ",
+ h("input", {type: "checkbox"})
+ ])
+]),Try it out to confirm that the result matches the screenshot above.
+In many frameworks it is common to write your views/templates +using syntax that looks like HTML. This is possible with Hyperapp as well. +JSX can compile a HTML-like syntax into
+hcalls at build-time. If you'd rather +not use a build system, htm does the same at run-time.In this tutorial we'll stick with
+hto keep it simple and close to the metal.
The great thing about using plain functions to build up our virtual DOM +is that we can break out repetitive or complicated parts into their own functions.
Add this function (in the "VIEWS" section):
const emphasize = (word, string) =>
+ string.split(" ").map(x => {
+ if (x.toLowerCase() === word.toLowerCase()) {
+ return h("em", {}, x + " ")
+ } else {
+ return x + " "
+ }
+ }) It lets you change this:
...
+ h("p", {class: "title"}, [
+ "The ",
+ h("em", {}, "Ocean"),
+ " is Sinking!"
+ ]),
+ ...into this:
...
+ h("p", {class: "title"}, emphasize("ocean",
+ "The Ocean is Sinking"
+ ))
+ ...Story thumbnails are repeated several times, so encapsulate +them in their own function:
const StoryThumbnail = props => h(
+ "li",
+ {class: {
+ unread: props.unread,
+ reading: props.reading,
+ }},
+ [
+ h("p", {class: "title"}, emphasize(props.filter, props.title)),
+ h("p", {class: "author"}, props.author)
+ ]
+)+The last example demonstrates a helpful feature of the
+classproperty. When +you set it to an object rather than a string, each key with a truthy value +will become a class in the class list.
Continue by creating functions for each section of the view:
+const StoryList = props => h("div", {class: "stories"}, [
+ h("ul", {}, Object.keys(props.stories).map(id =>
+ StoryThumbnail({
+ id,
+ title: props.stories[id].title,
+ author: props.stories[id].author,
+ unread: !props.stories[id].seen,
+ reading: props.reading === id,
+ filter: props.filter,
+ })
+ ))
+])
+
+const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+ h("span", {class: "filter-word"}, props.filter),
+ h("button", {}, "\u270E")
+])
+
+const StoryDetail = props => h("div", {class: "story"}, [
+ props && h("h1", {}, props.title),
+ props && h("p", {}, `
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, qui
+ nostrud exercitation ullamco laboris nisi ut aliquip
+ ex ea commodo consequat.
+ `),
+ props && h("p", {class: "signature"}, props.author)
+])
+
+const AutoUpdate = props => h("div", {class: "autoupdate"}, [
+ "Auto update: ",
+ h("input", {type: "checkbox"})
+])
+
+const Container = content => h("div", {class: "container"}, content)
+With those the view can be written as:
view: () => Container([
+ Filter({
+ filter: "ocean"
+ }),
+ StoryList({
+ stories: {
+ "112": {
+ title: "The Ocean is Sinking",
+ author: "Kat Stropher",
+ seen: false,
+ },
+ "113": {
+ title: "Ocean life is brutal",
+ author: "Surphy McBrah",
+ seen: true,
+ },
+ "114": {
+ title: "Family friendly fun at the ocean exhibit",
+ author: "Guy Prosales",
+ seen: true,
+ }
+ },
+ reading: "113",
+ filter: "ocean"
+ }),
+ StoryDetail({
+ title: "Ocean life is brutal",
+ author: "Surphy McBrah",
+ }),
+ AutoUpdate(),
+])What you see on the page should be exactly the same as before, because we haven't
+changed what view returns. Using basic functional composition, we were able to make
+the code a bit more manageable, and that's the only difference.
With all that view logic broken out in separate functions, view is starting to look like
+plain data. The next step is to fully separate data from the view.
Add an init property to your app, with this pure data:
init: {
+ filter: "ocean",
+ reading: "113",
+ stories: {
+ "112": {
+ title: "The Ocean is Sinking",
+ author: "Kat Stropher",
+ seen: false,
+ },
+ "113": {
+ title: "Ocean life is brutal",
+ author: "Surphy McBrah",
+ seen: true,
+ },
+ "114": {
+ title: "Family friendly fun at the ocean exhibit",
+ author: "Guy Prosales",
+ seen: true,
+ }
+ }
+ },The value of init becomes the app's state. Hyperapp calls view with the state
+as an argument, so it can be reduced to:
view: state => Container([
+ Filter(state),
+ StoryList(state),
+ StoryDetail(state.reading && state.stories[state.reading]),
+ AutoUpdate(state),
+ ]),Visually, everything is still the same. If you'd like to see a working example of the code so far, have a look here
Now that we know all about rendering views, it's finally time for some action!
The first bit of dynamic behavior we will add is so that when you click +the pencil-button, a text input with the filter word appears.
Add an onClick property to the button in the filter view:
const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+ h("span", {class: "filter-word"}, props.filter),
+ h("button", { onClick: StartEditingFilter }, "\u270E") // <---
+])This makes Hyperapp bind a click-event handler on the button element, so
+that when the button is clicked, an action named StartEditingFilter is
+dispatched. Create the action in the "ACTIONS" section:
const StartEditingFilter = state => ({...state, editingFilter: true})Actions are just functions describing transformations of the state.
+This action keeps everything in the state the same except for editingFilter
+which it sets to true.
When Hyperapp dispatches an action, it replaces the old state with the new +one calculated using the action. Then the DOM is modified to match what the +view returns for this new state.
When editingFilter is true, we want to have a text input instead of a span with the filter word. We can express this in the Filter view using a
+ternary operator (a ? b : c).
const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+
+ props.editingFilter // <---
+ ? h("input", {type: "text", value: props.filter}) // <---
+ : h("span", {class: "filter-word"}, props.filter),
+
+ h("button", { onClick: StartEditingFilter }, "\u270E")
+])Now, when you click the pencil button the text input appears. But we still need to add
+a way to go back. We need an action to StopEditingFilter, and a button to dispatch it.
Add the action:
const StopEditingFilter = state => ({...state, editingFilter: false})and update the Filter view again:
const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+
+ props.editingFilter
+ ? h("input", {type: "text", value: props.filter})
+ : h("span", {class: "filter-word"}, props.filter),
+
+ props.editingFilter // <---
+ ? h("button", {onClick: StopEditingFilter}, "\u2713")
+ : h("button", {onClick: StartEditingFilter}, "\u270E"), // <---
+])When you click the pencil button, it is replaced with a check-mark button that can take you back to the first state.
The next step is to use the input for editing the filter word. Whatever we +type in the box should be emphasized in the story-list.
Update the Filter view yet again:
const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+
+ props.editingFilter
+ ? h("input", {
+ type: "text",
+ value: props.filter,
+ onInput: SetFilter, // <----
+ })
+ : h("span", {class: "filter-word"}, props.filter),
+
+ props.editingFilter
+ ? h("button", {onClick: StopEditingFilter}, "\u2713")
+ : h("button", {onClick: StartEditingFilter}, "\u270E"),
+])This will dispatch the SetFilter action everytime someone types in the input. Implement the action like this:
const SetFilter = (state, event) => ({...state, filter: event.target.value})The second argument to an action is known as the payload. Actions
+dispatched in response to an events on DOM elements receive the event object for a payload. event.target refers to the input element in the DOM, and
+event.target.value refers to the current value entered into it.
Now see what happens when you erase "ocean" and type "friendly" instead:
Next up: selecting stories by clicking them in the list.
The following action sets the reading property in the state to a story-id, which amounts to "selecting" the story:
const SelectStory = (state, id) => ({...state, reading: id})It has a payload, but it's not an event object. It's a custom value telling us which +story was clicked. How are actions dispatched with custom payloads? – Like this:
+const StoryThumbnail = props => h(
+ "li",
+ {
+ onClick: [SelectStory, props.id], // <----
+ class: {
+ unread: props.unread,
+ reading: props.reading,
+ }
+ },
+ [
+ h("p", {class: "title"}, emphasize(props.filter, props.title)),
+ h("p", {class: "author"}, props.author)
+ ]
+)Instead of just specifying the action, we give a length-2 array with the action first and the custom payload second.
Selecting stories works now, but the feature is not quite done. When a story is selected,
+we need to set its seen property to true, so we can highlight which stories the user has yet to read. Update the SelectStory action:
const SelectStory = (state, id) => ({
+ ...state, // keep all state the same, except for the following:
+ reading: id,
+ stories: {
+ ...state.stories, //keep stories the same, except for:
+ [id]: {
+ ...state.stories[id], //keep this story the same, except for:
+ seen: true,
+ }
+ }
+})Now, when you select a blue-edged story it turns yellow because it is selected, and when you select something else, +the edge turns gray to indicate you've read the story.
There's one little thing we should fix about SetFilter. See how it's dependent on the complex event object? It would be easier to test and reuse if it were simply:
const SetFilter = (state, word) => ({...state, filter: word})But we don't know the word beforehand, so how can we set it as a custom payload? Change the Filter view again (last time - I promise!):
const Filter = props => h("div", {class: "filter"}, [
+ "Filter:",
+
+ props.editingFilter
+ ? h("input", {
+ type: "text",
+ value: props.filter,
+ onInput: [SetFilter, event => event.target.value], // <----
+ })
+ : h("span", {class: "filter-word"}, props.filter),
+
+ props.editingFilter
+ ? h("button", {onClick: StopEditingFilter}, "\u2713")
+ : h("button", {onClick: StartEditingFilter}, "\u270E"),
+])When we give a function as the custom payload, Hyperapp considers it a payload filter and passes the default +payload through it, providing the returned value as payload to the action.
+Payload filters are also useful when you need a payload that is a combination of custom data and event data
+
If you'd like to see a working example of the code so far, have a look here
Until now, the list of stories has been defined in the state and doesn't change. What we really want is +for stories matching the filter to be dynamically loaded. When we click the check-mark button +(indicating we are done editing the filter), we want to query an API and display the stories it responds with.
Add this import (to the "IMPORTS" section):
import {Http} from "https:/unpkg.com/hyperapp-fx@next?module"Use the imported Http in the StopEditingFilter action like this:
const StopEditingFilter = state => [
+ {
+ ...state,
+ editingFilter: false,
+ },
+ Http({ // <---
+ url: `https://zaceno.github.io/hatut/data/${state.filter.toLowerCase()}.json`, // <---
+ response: "json", // <---
+ action: GotStories, // <---
+ })
+]The call to Http(...) does not immediately execute the API request. Http is an effect creator. It returns
+an effect bound to the options we provided.
When Hyperapp sees an action return an array, it takes the first element of the array to be the new state, and the rest to +be effects. Effects are executed by Hyperapp as part of processing the action's return value.
+Hyperapp provides effect creators for many common situations. If you've got an unusual case or are working +with less common APIs you may need to implement your own effects. Don't worry - it's easy! See the API reference for more information.
+
One of the options we passed to Http was action: GotStories. The way this effect works is that when the response comes
+back from the api, an action named GotStories (yet to be implemented) will be dispatched, with the response body as the payload.
The response body is in json, but the payload will be a javascript object, thanks to the parsing hint response: "json". It will look like this (although the details depend on your filter of course):
{
+ "112": {
+ title: "The Ocean is Sinking",
+ author: "Kat Stropher",
+ },
+ "113": {
+ title: "Ocean life is brutal",
+ author: "Surphy McBrah",
+ },
+ "114": {
+ title: "Family friendly fun at the ocean exhibit",
+ author: "Guy Prosales",
+ }
+}The job of GotStories is to load this data into the state, in place of the stories we already have there. As it
+does, it should take care to remember which story was selected, and which stories we have seen, if they were already
+in the previous state. This will be our most complex action yet, and it could look like this:
const GotStories = (state, response) => {
+ const stories = {}
+ Object.keys(response).forEach(id => {
+ stories[id] = {...response[id], seen: false}
+ if (state.stories[id] && state.stories[id].seen) {
+ stories[id].seen = true
+ }
+ })
+ const reading = stories[state.reading] ? state.reading : null
+ return {
+ ...state,
+ stories,
+ reading,
+ }
+}Try it out! Enter "life" in the filter input. When you click the check-mark button some new +stories are loaded – all with blue edges except for "Ocean life is brutal" because it is +still selected.
The next obvious step is to load the initial stories from the API as well. Change init to this:
init: [
+ {
+ editingFilter: false,
+ autoUpdate: false,
+ filter: "ocean",
+ reading: null,
+ stories: {}, // <---
+ },
+ Http({ // <---
+ url: `https://zaceno.github.io/hatut/data/ocean.json`, // <---
+ response: 'json', // <---
+ action: GotStories, // <---
+ })
+ ],Hyperapp treats the init-value the same way as it treats return values from actions. By adding the Http effect
+in init, the app will fire the API request immediately, so we don't need the stories in the state from the start.
If we could display a spinner while we wait for stories to load, it would make for a smoother user experience. To +do that, we will need a new state property to tell us if we're waiting for a repsonse - and +consequently wether or not to render the spinner.
Create this action:
const FetchStories = state => [
+ {...state, fetching: true},
+ Http({
+ url: `https://zaceno.github.io/hatut/data/${state.filter.toLowerCase()}.json`,
+ response: 'json',
+ action: GotStories,
+ })
+]Instead of dispatching this action, we will use it to simplify StopEditingFilter:
const StopEditingFilter = state => FetchStories({...state, editingFilter: false})... and init as well:
init: FetchStories({
+ editingFilter: false,
+ autoUpdate: false,
+ filter: "ocean",
+ reading: null,
+ stories: {},
+ }),Now, when StopEditingFilter is dispatched, and at initialization, the API call goes out and the
+fetching prop is set to true. Also, notice how we refactored out the repetitive use of Http.
We also need to set fetching: false in GotStories:
const GotStories = (state, response) => {
+ const stories = {}
+ Object.keys(response).forEach(id => {
+ stories[id] = {...response[id], seen: false}
+ if (state.stories[id] && state.stories[id].seen) {
+ stories[id].seen = true
+ }
+ })
+ const reading = stories[state.reading] ? state.reading : null
+ return {
+ ...state,
+ stories,
+ reading,
+ fetching: false, // <---
+ }
+}With this, we know that when fetching is true we are waiting for a response, and should display
+the spinner in the StoryList view:
const StoryList = props => h("div", {class: "stories"}, [
+
+ props.fetching && h("div", {class: "loadscreen"}, [ // <---
+ h("div", {class: "spinner"}) // <---
+ ]), // <---
+
+ h("ul", {}, Object.keys(props.stories).map(id =>
+ StoryThumbnail({
+ id,
+ title: props.stories[id].title,
+ author: props.stories[id].author,
+ unread: !props.stories[id].seen,
+ reading: props.reading === id,
+ filter: props.filter
+ })
+ ))
+])When the app loads, and when you change the filter, you should see the spinner appear until the stories are loaded.
+If you aren't seeing the spinner, it might just be happening too fast. Try choking your network speed. In the Chrome +browser you can set your network speed to "slow 3g" under the network tab in the developer tools.
+
If you'd like to see a working example of the code so far, have a look here
The last feature we'll add is to make our app periodically check for new stories matching the filter. There won't actually +be any because it's not a real service, but you'll know it's happening when you see the spinner pop up every five +seconds.
However, we want to make it opt-in. That's what the auto update checkbox at the bottom is for. We need a +property in the state to track wether the box is checked or not.
Change the AutoUpdate view:
const AutoUpdate = props => h("div", {class: "autoupdate"}, [
+ "Auto update: ",
+ h("input", {
+ type: "checkbox",
+ checked: props.autoUpdate, // <---
+ onInput: ToggleAutoUpdate, // <---
+ })
+])and implement the ToggleAutoUpdate action:
const ToggleAutoUpdate = state => ({...state, autoUpdate: !state.autoUpdate})Now we've got autoUpdate in the state tracking the checkbox. All we need now, is to set up FetchStories
+to be dispatched every five seconds when autoUpdate is true.
Import the interval subscription creator:
import {interval} from "https://unpkg.com/@hyperapp/time?module"Add a subscriptions property to your app, with a conditional declaration of interval like this:
subscriptions: state => [
+ state.autoUpdate && interval(FetchStories, {delay: 5000})
+ ]Hyperapp will call subscriptions every time the state changes. If it notices a
+new subscription, it will be started, or if one has been removed it will be stopped.
The options we passed to the interval subscription state that FetchStories should be dispatched every five seconds. It
+will start when we check the auto update box, and stop when it is unchecked.
+As with effects, Hyperapp offers subscriptions for the most common cases, but you +may need to implement your own. Refer to the API reference. Again, it is no big deal - just not in scope for this tutorial.
+
If you'd like to see a working example of the final code, have a look here
Congratulations on completing this Hyperapp tutorial!
Along the way you've familiarized yourself with +the core concepts: view, state, actions, effects & subscriptions. And that's really all you need to +build any web application.
\ No newline at end of file diff --git a/tutorial.md b/tutorial.md new file mode 100644 index 0000000..aefa0ab --- /dev/null +++ b/tutorial.md @@ -0,0 +1,915 @@ +Tutorial +=================================== + +Welcome! If you're new to Hyperapp, you've found the perfect place to start learning. + +The Set-up +----------------------------------- + +Together we'll build a simple newsreader-like application. As we do, we'll work +our way through the five core concepts: view, state, actions, effects and subscriptions. + +To move things along, let's imagine we've already made a static version of the +app we want to build, with this HTML: + + +```html +The Ocean is Sinking
+ +Ocean life is brutal
+ ++ Family friendly fun at the + ocean exhibit +
+ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
+Surphy McBrah
+