probablyup / buttermilk Goto Github PK
View Code? Open in Web Editor NEWbeautifully simple isomorphic routing for React projects
Home Page: https://buttermilk.js.org/
License: MIT License
beautifully simple isomorphic routing for React projects
Home Page: https://buttermilk.js.org/
License: MIT License
Needed for some advanced SSR use cases.
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.
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?
Is it possible to prevent a reload/refresh when user visits the current route they're already looking at?
2 issues:
Given the below routes structure:
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.
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.
react-docgen
or something like it to scan the components file and extract some useful infoI'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.
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?
Opening https://buttermilk.js.org yields this error, tested on Chrome and Firefox
And also much more popular, I bet you!
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)
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>
);
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?
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
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..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.