Allow using Link without Hyperapp #32

vdsabev · 2017-12-21T14:57:38Z

Why is this useful?

I'm using the router with picodom instead of Hyperapp with great success - it does outstanding work for such a small router library, and plays well with other architectures. The only component that doesn't work out of the box is Link, because it imports h from Hyperapp.

What's the workaround?

I've basically copied all of the code from Link.js into my own application, with the only difference being I'm importing a different h function - the one from picodom.

Is there a better way?

If Link could somehow receive h as a parameter, it would completely decouple it from Hyperapp and allow everyone to use it however they want.

What did I do?

I moved most of the code from Link.js to a new script called createLink.js. It exports a function with a single parameter - h, which returns what used to be in Link.js. So we can now do this in Link.js instead:

import { h } from "hyperapp"
import { createLink } from "./createLink"

export var Link = createLink(h)

At the same time, in my own application, I can use picodom with the same effort:

import { h } from 'picodom';
import { createLink } from '@hyperapp/router/src/createLink';

export const Link = createLink(h);

What about other libraries?

There's really nothing limiting this to picodom. Any other VDOM library should work great, and I don't see why you can't use that without VDOM, probably even with vanilla JS, by passing a custom render function:

export const Link = createLink((tag, props, children) => {
  const el = document.createElement(tag);
  for (let key in props) {
    el[key] = props[key];
  }
  // append the children somehow...out of scope for this PR 😋

  return el;
});

To import the router use: import { Router } from "@hyperapp/router" or const { Router } = require("@hyperapp/router") This opens the door to adding future exports like <Link />, etc.

- No breaking changes. - Add new .index property to route info object.

…y parameters. (#13)

- Introduce Link component. Use it to create hyperlinks that map to a particular route. <Link to="/" go={actions.router.go}>Home</Link> Link is a facade around <a href={to} onclick={()=>go(to)}/> that calls element.preventDefault() for you to prevent page reloads. - Add live example http://hyperapp-router.surge.sh and update documentation. - Add tests.

Click handler should only prevent default behavior if left-click/enter key is used and no modifier keys are pressed. This is common among most other libraries. - Link target handling & refactor - Link - added brackets around early return - Link - change 'e' -> 'event' - Remove fake preventDefault() from some test cases - Link - check if same origin

For example: Link({to: '/', go: actions.router.go },[ h('img', {class: 'logo', src: '/static/logo.svg'}) ]) In this code, when you click the image link, the event.target is actually the img tag, since you clicked it. event.currentTarget should be used instead, since it always references the element which has the event listener.

- location module - Route - Redirect - Link - Switch

codecov · 2017-12-21T15:00:39Z

Codecov Report

Merging #32 into master will increase coverage by 2.26%.
The diff coverage is 18.18%.

@@           Coverage Diff           @@
##           master   #32      +/-   ##
=======================================
+ Coverage   37.73%   40%   +2.26%     
=======================================
  Files           6     7       +1     
  Lines          53    55       +2     
  Branches       12    12              
=======================================
+ Hits           20    22       +2     
  Misses         24    24              
  Partials        9     9

Impacted Files	Coverage Δ
src/createLink.js	`10% <10%> (ø)`
src/Link.js	`100% <100%> (+100%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4949a31...2f73228. Read the comment docs.

vdsabev · 2018-03-30T04:46:17Z

@jorgebucaran can we reconsider this PR? The solution I described is still valid as of 0.5.1. It would still be useful to reduce the dependency on hyperapp and avoid copy/pasting code to use Link without relying on h, as you have in 48d81a0.

Let me know what you think and I can redo the PR later today 🤠

jorgebucaran · 2018-03-30T04:48:34Z

@vdsabev If it isn't too much trouble, please make a new PR so we can review it again! :)

vdsabev · 2018-03-30T09:20:15Z

Looks like both #36 and #61 are open and contain changes to Link.js. In the interest of avoiding conflicts, should I wait for those to get merged or closed?

jorgebucaran · 2018-03-30T09:26:12Z

@vdsabev You could wait, or send your PR and update/resolve conflicts as those other two get resolved. What do you think? It's up to you.

Jorge Bucaran and others added 30 commits June 30, 2017 03:36

Initial commit.

2a20d01

Move example below usage.

a19377e

Remove dazzling blue from badge.

2ba4988

Explain usage via a CDN and bump 0.0.1.

664a65e

Fix broken badge.

f62662a

Remove table of contents.

42a5a33

Docs.

7ca3123

Rewrite description.

3516d24

Use name export instead of default export.

a84259b

To import the router use: import { Router } from "@hyperapp/router" or const { Router } = require("@hyperapp/router") This opens the door to adding future exports like <Link />, etc.

0.0.2

f0f72bb

Correct router description/info.

1828c2a

They call it the definite article.

fd4b372

Update router to hyperapp's latest. (#12)

7c3da4e

- No breaking changes. - Add new .index property to route info object.

0.1.0

29b0cb1

Add support for spaces, parentheses and URI-encoded chars within quer…

f709d0e

…y parameters. (#13)

0.2.0

f9dd664

0.2.1

47819c1

0.2.2

9fca693

0.2.3

b7a1bee

Docs: grammar.

fa17e9f

Move Router to router to follow lowercase mixin convention. (#18)

a4821d4

0.3.0

abe55f3

Introduce new router API.

18f51cd

- location module - Route - Redirect - Link - Switch

Let customize underlying <a> element in Link component.

5b2c23c

docs

7d7e4af

docs

6695bef

More docs and basic tests.

0fe2042

Jorge Bucaran and others added 4 commits December 18, 2017 14:06

Declarative routing for Hyperapp using the History API.

4fcbe13

0.4.1

4949a31

Allow using Link without Hyperapp

d93b78c

Removed leftover semicolon

2f73228

jorgebucaran added the DISCUSSION label Dec 21, 2017

jorgebucaran closed this Jan 7, 2018

jorgebucaran force-pushed the master branch from 4949a31 to 7343784 Compare January 7, 2018 06:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Allow using Link without Hyperapp #32

Allow using Link without Hyperapp #32

Uh oh!

vdsabev commented Dec 21, 2017 •

edited

Loading

Uh oh!

codecov bot commented Dec 21, 2017 •

edited

Loading

Uh oh!

vdsabev commented Mar 30, 2018

Uh oh!

jorgebucaran commented Mar 30, 2018 •

edited

Loading

Uh oh!

vdsabev commented Mar 30, 2018

Uh oh!

jorgebucaran commented Mar 30, 2018

Uh oh!

Uh oh!

Allow using Link without Hyperapp #32

Allow using Link without Hyperapp #32

Uh oh!

Conversation

vdsabev commented Dec 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why is this useful?

What's the workaround?

Is there a better way?

What did I do?

What about other libraries?

Uh oh!

codecov bot commented Dec 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

vdsabev commented Mar 30, 2018

Uh oh!

jorgebucaran commented Mar 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vdsabev commented Mar 30, 2018

Uh oh!

jorgebucaran commented Mar 30, 2018

Uh oh!

Uh oh!

vdsabev commented Dec 21, 2017 •

edited

Loading

codecov bot commented Dec 21, 2017 •

edited

Loading

jorgebucaran commented Mar 30, 2018 •

edited

Loading