Skip to content

Instantly share code, notes, and snippets.

@ericdmoore

ericdmoore/.babelrc

Last active June 20, 2018 18:36
Show Gist options
  • Save ericdmoore/e89a15458a51d29eccdf7ccecbab0314 to your computer and use it in GitHub Desktop.
Save ericdmoore/e89a15458a51d29eccdf7ccecbab0314 to your computer and use it in GitHub Desktop.
Download ZIP
HyperApp Route Trouble
Raw
.babelrc
{"plugins": [["transform-react-jsx", { "pragma": "h" }]]}
Raw
app.js
import { h, app } from "hyperapp"
import { Link, Route, Switch, Redirect, location } from "@hyperapp/router"
const state = {
location: location.state,
counter: 0
}
const actions = {
location: location.actions,
up: (value)=>(state)=>{counter: state.counter + value},
down: (value)=>(state)=>{counter: state.counter - value}
}
const Home = ({location,match})=>{
return (
<div>
<h1>Home!</h1>
<hr />
</div>
)
}
const Hello = ({location,match})=>{
return (
<div>
<h1>Hello!</h1>
<hr />
</div>
)
}
const MyComponent = (state, actions) => ({location,match})=>{
// console.log(state);
console.log(actions);
return (
<div>
<h1>Counter Component</h1>
<h3>{state.counter}</h3>
<button onclick={() => actions.up(1)} >+</button>
<button onclick={() => actions.down(1)} >-</button>
<hr />
</div>
)
};
const Info = state => ({location,match})=>{
// console.log("from Info()");
// console.log(location);
console.log(match);
return (<div>
<h1>Page Info </h1>
<br />
<h3>LOCATION:</h3>
<h3>Url: {location.pathname}</h3>
<h3>prior: {location.previous}</h3>
<br />
<h3>MATCH:</h3>
<h3>exact?: {match.isExact.toString()}</h3>
<h3>params: {match.params}</h3>
<h3>path: {match.path}</h3>
<h3>url: {match.url}</h3>
</div>
)
}
const Navigation = () => {
return (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/hello">Hello</Link></li>
<li><Link to="/counter">Counter</Link></li>
<li><Link to="/old">Redirect to Counter</Link></li>
<li><Link to="/noRoute">No Route</Link></li>
</ul>
<hr/>
</nav>
)
}
const view = (state, actions)=>{
return (
<div>
<Navigation />
<Switch>
<Route path="/" render={Home} />
<Route path="/hello" render= {Hello} />
<Route path="/counter" render= {MyComponent(state, actions)} />
<Route path="/old" render={() => <Redirect from="/old" to="/counter" />} />
<Route render={Info(state, actions)} />
</Switch>
</div>
)
}
const main = app(state, actions, view, document.body)
const unsubscribe = location.subscribe(main.location)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Routes</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="./app.js"></script>
</head>
<body class="container has-navbar-fixed-top">
<!-- HyperApp puts the goods here -->
</body>
</html>
Raw
package.json
{
"name": "HyperApp-testing",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html --public-url ./"
},
"dependencies": {
"hyperapp": "^1.2.5",
"@hyperapp/router": "^0.7.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"parcel-bundler": "^1.9.0"
},
"devDependencies": {
"make-dir": "^1.3.0"
}
}
Raw
Questions.md

Questions

Markdown

  1. Why is there an undefined tag in the markdown? Picture: UndefinedTag

Router

  1. Why doesn't the Switch tag force only one route to render - like the docs state?

  2. Why do I have refresh the page to get the loction to update the page? Did I do something wrong?

  3. I intended the Info Component to render only on a route miss - like a toy dev-helper/404 page. Similar to the Switch component example here where it demonstrates a NoMatch route

Within that component it returns JSX of

<h3>params: {match.params}</h3>
<h3>path: {match.path}</h3>

but both of those are always undefined. Any idea why?

Components

  1. Why is my counter not updating the state?

Best Practice

  1. When building a full-page component is it best practice/idiomatic to use the following component pattern?

     const MyComponent = (state, otherParams) => ({location,match})=>{
 return (
       <div> 
       <h1>Markup from Componens\</h1>
       <AnySubComponents with={state.props} />
       </div> 
 )
}

How Do I Run this locally?

  1. download this gist (see Download button at top right)
  2. unzip the download
  3. Fire up your terminal
  4. Run $ npm i && npm run start
@ericdmoore
Copy link
Author

ericdmoore commented Jun 20, 2018 •
edited
Loading

UPDATE: as I have actually gone through the process to Run this on my local - many of the issues are resolved...
🤦‍♂️

So the only applicable questions are:

  1. Components/Why Not working
  2. Components/Best Practice
  3. Switch/Params+Path are udefined

Any help is greatly appreciated.

@ericdmoore
Copy link
Author

Ok - for #1
Answer (Components/Why Not working):
The Action was not returning a partial state. Need to add () around the {counter: state.counter + value} so that the result is ({counter: state.counter + value})

@ericdmoore
Copy link
Author

This just leaves #2 and #3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment