probablyup / buttermilk Goto Github PK

The Router Challenge aims to be to Routers what TodoMVC is to MV* frameworks. It offers the same Music Catalog application built in React using different Routers. For it to be successful I need the help of Router writers like you. Will you take the Router Challenge and implement the Music Catalog application using buttermilk, please?

2 issues:

Given the below routes structure:

1. If I go to https://mypage.com/imprint everything works find and it shows me the Imprint page.
   But if I want to go to https://mypage.com/imprint/ (extra slash at the end) it redirects me to home, i.e. / again, but not to /imprint where I would expect it to go to.

2. If I got to https://mypage.com/something it correctly shows me the 404 page.
   But if I go to https://mypage.com/something/ (extra slash at the end) it redirect me to home, although something is not a valid route and it should show the 404 page again!

My routes look as follows:

{
    path: '/',
    render: () => import('./components/Home/index').then(mdl => mdl.default)
},
{
    path: '/imprint',
    render: () => Imprint
},
{
    path: '*',
    render: () => NotFound
}

I think it has to do with URL Normalization to deal with trailing slashes.

Needed for some advanced SSR use cases.

And also much more popular, I bet you!

The following code worked in [email protected] but does not work in [email protected] anymore:

import { Link } from 'buttermilk';
// ...

<Link href="/">
  <span>Home</span>
</Link>

Now no error is thrown, but it just doesn't link. Nothing happens when it actually should route to /.

When debugging I found that the <Link /> component only works if it's child is a string, e.g. <Link href="/">Home</Link>.

I saw you didn't change cjs.js in your v2.0.0. update, but something must have changed which influences this..

import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'buttermilk'
import { loadableReady } from '@loadable/component'

import App from './App'
import routes from './routes'

function Index() {
    return (
        <App>
            <Router routes={routes} />
        </App>
    )
}

ReactDOM.hydrate(<Index />, document.getElementById('root'))

Here is my entry point, and it's strange that this is being rendered into the DOM:

<div location="[object Object]" params="[object Object]" route="[object Object]">..</div>

My routes look like:

import Page from './pages/Page'
import NotFound from './pages/NotFound'

const routes = [
    { path: '/page', render: Page },
    { path: '*', render: NotFound },
]

export default routes

So nothing out of the ordinary.

I'm trying to validate a route that will accept any routes like http://localhost:3000/123456 where I can access 123456 as props.params.some_id

This is what I've tried:

      <Router
        routes={[
          {
            path: /^[0-9]$/,
            render: () => SomeComponent
          }
        ]}
      />

However the route is not matching.

With these routes:

const routes = [
    { path: '/page', render: Page },
    { path: '*', render: NotFound },
]

Calls to mypage/page?fbid=some_unique_id will render to the 404 page as query params are not ignored on the path. The workaround is to adjust the route object to become:

{ path: '/page*', render: Page },

I am wondering, is there is a cleaner approach?

The .tgz file size increased from 76.4 kB to 719.3 kB

Is some extra website code packed under dist/?

npm notice 1.0MB  dist/app.c328ef1a.js
npm notice 1.7MB  dist/app.c328ef1a.map
npm notice 8.1kB  dist/home.fc46b7b9.js
npm notice 303B   dist/home.fc46b7b9.map
npm notice 79B    dist/index.html

Noticed from: https://packagephobia.now.sh/[email protected]

a diff between $ npm pack [email protected] $ npm pack [email protected] output:

@@ -1,31 +1,33 @@
-npm notice package: [email protected]
+npm notice package: [email protected]
 npm notice === Tarball Contents ===
 npm notice 0      package
 npm notice 1.1kB  LICENSE
-npm notice 14.1kB README.md
+npm notice 14.7kB README.md
 npm notice 0      dist
-npm notice 1.6kB  package.json
+npm notice 1.8kB  package.json

-npm notice 0      site
+npm notice 1.0MB  dist/app.c328ef1a.js
+npm notice 1.7MB  dist/app.c328ef1a.map

-npm notice 21.1kB dist/cjs.js
-npm notice 30.6kB dist/cjs.js.map
-npm notice 9.3kB  dist/cjs.min.js
-npm notice 25.8kB dist/cjs.min.js.map
+npm notice 16.4kB dist/cjs.js
+npm notice 26.6kB dist/cjs.js.map
+npm notice 7.4kB  dist/cjs.min.js
+npm notice 22.2kB dist/cjs.min.js.map

-npm notice 20.8kB dist/es.js
-npm notice 30.6kB dist/es.js.map
-npm notice 9.0kB  dist/es.min.js
-npm notice 25.8kB dist/es.min.js.map
+npm notice 16.0kB dist/es.js
+npm notice 26.6kB dist/es.js.map
+npm notice 7.0kB  dist/es.min.js
+npm notice 22.2kB dist/es.min.js.map

+npm notice 8.1kB  dist/home.fc46b7b9.js
+npm notice 303B   dist/home.fc46b7b9.map
+npm notice 79B    dist/index.html

-npm notice 21.6kB dist/standalone.js
-npm notice 32.3kB dist/standalone.js.map
-npm notice 8.0kB  dist/standalone.min.js
-npm notice 25.7kB dist/standalone.min.js.map
+npm notice 16.8kB dist/standalone.js
+npm notice 27.9kB dist/standalone.js.map
+npm notice 5.9kB  dist/standalone.min.js
+npm notice 22.1kB dist/standalone.min.js.map

-npm notice 0      site/.next
-npm notice 0      site/.next/dist

 npm notice === Tarball Details ===
 npm notice name:          buttermilk
-npm notice version:       1.1.2
-npm notice filename:      buttermilk-1.1.2.tgz
+npm notice version:       2.0.0
+npm notice filename:      buttermilk-2.0.0.tgz
-npm notice package size:  76.4 kB
+npm notice package size:  719.3 kB
-npm notice unpacked size: 277.2 kB
+npm notice unpacked size: 3.0 MB
-npm notice shasum:        e704ada0d0384570dfe3f5c7dd3a020f534794d3
-npm notice integrity:     sha512-ZY2gM6TEVqBBg[...]Lx/4uzsrg/1Kw==
+npm notice shasum:        f55bdff0de2af1c9b2b3a1051657632fac86abf5
+npm notice integrity:     sha512-wM3O1cSPHmARZ[...]NdTFoQ/c8OQ3g==
-npm notice total files:   20
+npm notice total files:   22

I am using Bootstrap and I am trying to figure out a way to set active on the parent component on a Link. I am curious to know if there is a way to do this. This is what I have thus far:

import React from 'react';
import { Link } from 'buttermilk';

const RouteLink = ({route, text}) => (
  <li className="nav-item">
    <Link as="a" className="nav-link" href={route}>
      {text}
    </Link>
  </li>
);

export default () => (
  <nav className="sticky-top navbar navbar-expand-lg navbar-light bg-light">
    <a className="navbar-brand" href="/">Navbar</a>
    <div className="navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <RouteLink route='/' text='Home' />
        <RouteLink route='/about' text='About' />
        <RouteLink route='/404' text='FourOhFour' />
      </ul>
    </div>
  </nav>
);

• use react-docgen or something like it to scan the components file and extract some useful info
• convert the README into a template that interpolates the result of docgen to fill in the various sections instead of manually copy & pasting code blocks
• make sure the HMR experience when running the site works as expected with this strategy

Is it possible to prevent a reload/refresh when user visits the current route they're already looking at?

Internet Explorer breaks due to usage of the new Event constructor.

It works fine after adding a polyfill, but it was somewhat difficult to track this issue down since the error appears as originating in react-dom, and at least with a Create React App bootstrapped app, you can't easily test IE in development.

So testing the production build you get this useful error:

SCRIPT445: Object doesn't support this action
react-dom.production.min.js (169,13)

Initially I was trying to figure out why Babel/core-js wasn't polyfilling this but it seems they're not focused on DOM related APIs.

Anyway, I'm opening this issue because it might help others avoid similar grief trying to debug the problem. Perhaps a quick mention in the README would be warranted?

This might be an issue further upstream, but updating to [email protected] breaks dynamic imports.

Works fine using 16.11.0:

https://codesandbox.io/s/buttermilk-react-is-11-h2pke

But update to 16.12.0:

https://codesandbox.io/s/buttermilk-react-is-12-zjn9d

And we get the following error:

Error
A React component suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in Unknown (created by Router)
    in div (created by Router)
    in Router (at src/index.js:11)
    in div (at src/index.js:8)
    in App (at src/index.js:20)

Opening https://buttermilk.js.org yields this error, tested on Chrome and Firefox

React error 130