Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get down to 1KB. Reimplement a subset of path-to-regexp #1

Closed
molefrog opened this issue Apr 15, 2019 · 3 comments
Closed

Get down to 1KB. Reimplement a subset of path-to-regexp #1

molefrog opened this issue Apr 15, 2019 · 3 comments

Comments

@molefrog
Copy link
Owner

molefrog commented Apr 15, 2019

Right now the gzipped library size is 2KB, 70% of which is path-to-regexp dependency. While path-to-regexp provides a well-known way for developer to describe routes, it seems like we could shrink it's functionality to cover the 99% of use cases.

It would be cool to reimplement a limited subset of the library, so that:

  1. We drop that dependency and make it a zero-dependency library 😎
  2. We reduce the size to be less than 1KB (current bundle size without a matcher is 686B).

For users who still want to use the path-to-regexp functionality and get an advanced syntax we could provide an optional entry point:

import { Router } from "wouter";
import makeMatcher from "wouter/matcher"; 
import pathToRegexp from "path-to-regexp";

<Router matchFn={makeMatcher(pathToRegexp)}>
  ...
</Router>

So ideally it would be nice to define a subset of features we would like to support. Here are my ideas:

  • Always case-insensitive
  • Ignores a slash at the end
  • Matches an entire path
  • Supports named segments /:foo/:bar
  • Supports modifiers: :foo?, :foo* and :foo+
  • No support for unnamed params. All params should have a name.
  • No segment constraints e.g. /:foo(\d+)/
@molefrog molefrog changed the title Reimplement a subset of path-to-regexp Get down to 1KB. Reimplement a subset of path-to-regexp Apr 15, 2019
@molefrog
Copy link
Owner Author

Here is what the library generates:
/^output(?:/)?$/i — matches optional slash at the end & case insensitive. Also for segments:

(default)        :foo   - [1]        ([^\/]+?)
(optional)       :foo?  - [0 - 1]    ([^\/]+?)?
(one or more)    :foo+  - [1 - ∞]    ((?:[^\/]+?)(?:\/(?:[^\/]+?))*)
(zero or more)   :foo*  - [0 - ∞]    ((?:[^\/]+?)(?:\/(?:[^\/]+?))*)?

@gitcatrat
Copy link

Ignores a slash at the end

Did this feature end up in wouter? Because my root route doesn't work with path="/", has to be path="".

@molefrog
Copy link
Owner Author

molefrog commented Aug 3, 2020

@gitcatrat It did! path="/" is the right way to do that, see https://codesandbox.io/s/wouter-demo-preact-0lr3n

Can you provide a code sample?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants