Comments (10)
Good call! I actually was thinking about moving the package declarations back to CommonJS exports. And here is why:
- The ES6 module resolution for node_modules is still not standardized. You can use ES6 modules in the browsers now, but only for files that you know the exact location of, but you can't really write something like
import { ... } from "wouter"
in the browser. - The ES6 modules are still aren't adopted without a flag in Node.js, which makes it hard to test. One of the main reasons we keep Babel as a dev dependency here in wouter is because we want to run Jest, and that creates an extra complexity in my opinion.
So I would rather have something that can easily be imported without a special setup in both setups until the ES6 modules are fully supported.
from wouter.
Usually in package.json of popular packages I see "main" for require and "module" for ES6. See https://webpack.js.org/guides/author-libraries/#final-steps The first one points to the dist version with requires, the second also to dist version but with imports. Webpack is reading the later one and is doing tree shaking of es6 modules. But Jest is using the first one and expects no imports there
from wouter.
Due to reason I was not able to use it in CRA I had to drop it and write an own minimal routing hook. Which is sad as I loved your package idea
from wouter.
Its here if you're interested :)
https://github.com/mucsi96/react-hooks-beer-example/blob/master/src/core/useRouteParams/useRouteParams.ts
https://github.com/mucsi96/react-hooks-beer-example/blob/master/src/core/Link/Link.tsx
I am not patching push state
from wouter.
Looking good!
Does this work properly? I had issues with it and it seems like popState
isn't triggered when the location changed through pushState
:
Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).
from wouter.
Webpack is reading the later one and is doing tree shaking of es6 modules.
Right, tree shaking seems like a good reason to use ES6 modules.
from wouter.
Check the source of the Link. Apart from doing a push state it triggers a pop state event. Then the implementation of router is very easy.
Yes ES6 is very good. But not for "main" property but for "module"
from wouter.
Hey @mucsi96 I did some research and I think we could carry a folder called cjs/
in our project where we keep all CommonJS versions of our scripts (generated by the rollup on pre-publish).
We could also then point the main
to cjs/index.js
, however I just want to point out that this won't solve the problem for exports like const loc = require("wouter/use-location")
. This is a known behaviour, there was a proposal somewhere specifies the mutiple entry points in package.json, but this is still work in progress.
from wouter.
Yes that would be awesome. I think supporting users with CRA is much more important then exporting ES6 modules. Espetially that even its work in progress Webpack and rollup reads the module property for ES modules. So I don't see any isse by pointing main to cjs and ponting modules to current entrypoint
from wouter.
@mucsi96 Hi, I've just released the latest version v2.2.1
which comes with proper CJS sources, located in the cjs/
folder. The package.json's main
field now also points to the CJS source, so it should work fine in both NodeJS and Webpack, Rollup, CRA etc. (they will fetch the ESM sources instead).
from wouter.
Related Issues (20)
- V3: Refactor types for location hooks HOT 1
- Decoding URL params HOT 4
- `useSearchParams` for extracting and modifying search parameters HOT 10
- Should `useSearch` contain `?` character? HOT 1
- Route not accessible from multiple routers with different base HOT 1
- Bun install invalid hook call HOT 4
- Router don't work with Preact (10.18.1) HOT 3
- wouter-preact: Params with typescript? HOT 2
- How to add params in a nesting route? HOT 3
- v2.12.1 npm package is out of sync with v2.12.1 tag HOT 1
- v3.0.0-rc.1: When use hash router, Ctrl+click on <Link>, new window is opened with wrong url HOT 3
- Potential `useSearch` bug not triggering updates when used with `urql` HOT 9
- [Bug] Can't match default <Route>Not found</Route> when Router inside Switch HOT 3
- (?) Hash routing with no prefix slash index.html#/example/path/ HOT 3
- useSearch unsafe parameter decoding HOT 3
- v3.0.0-rc.2 decodeUriComponent is called before route match, breaking links with urlencoded slash (%2F) HOT 2
- v3.0.0-rc.1: `useRoute` should allow `nest` option just like `<Route />` HOT 1
- Suggestion: `<Link>` should always render an `<a>` (or at least have the option to do so) HOT 5
- Accessing nested params with `useParams` HOT 8
- Nested routing broken by intermediate component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wouter.