feat: App router now uses history API

Not listed yet as a change that requires a major bump,
but it lays the foundation for a unified API with the
pages router implementation.
Such a change will require Next 13.4+ with the stable app router.

At this time we've got:
- An internal state for fast updates
- A deferred queue for updating the URL query string,
  which allows batching and with a Promise-based API
- A sync system between hooks and with external navigation,
  from <Link> and imperative calls to the Next.js router
- No more network calls when updating queries (shallow by default)
- No more scroll to top when updating queries (this is kind of
  a breaking change).

This is done by bypassing the Next.js router and patching the
Web History API calls to gain reactivity on external query updates,
using an event emitter to keep hooks of the same key in sync across
the app, and an update queue to allow batching and throttling.

cypress.config.ts

@@ -5,6 +5,8 @@ export default defineConfig({
     baseUrl: 'http://localhost:3000',
     video: false,
     fixturesFolder: false,
-    supportFile: false
+    supportFile: false,
+    testIsolation: true,
+    retries: 5
   }
 })

cypress/e2e/useQueryState.cy.js

@@ -1,132 +1,79 @@
 /// <reference types="cypress" />
 
 function runTest() {
+  cy.wait(100)
   // String
   {
     cy.get('#string_value').should('be.empty')
-    cy.get('#string_set_a')
-      .click()
-      .location('search')
-      .should('eq', '?string=a')
-      .get('#string_value')
-      .should('have.text', 'a')
-    cy.get('#string_set_b')
-      .click()
-      .location('search')
-      .should('eq', '?string=b')
-      .get('#string_value')
-      .should('have.text', 'b')
-    cy.get('#string_clear')
-      .click()
-      .location('search')
-      .should('be.empty')
-      .get('#string_value')
-      .should('be.empty')
+    cy.get('#string_set_a').click()
+    cy.location('search').should('eq', '?string=a')
+    cy.get('#string_value').should('have.text', 'a')
+    cy.get('#string_set_b').click()
+    cy.location('search').should('eq', '?string=b')
+    cy.get('#string_value').should('have.text', 'b')
+    cy.get('#string_clear').click()
+    cy.location('search').should('be.empty')
+    cy.get('#string_value').should('be.empty')
   }
 
   // Integer
   {
     cy.get('#int_value').should('be.empty')
-    cy.get('#int_increment')
-      .click()
-      .location('search')
-      .should('eq', '?int=1')
-      .get('#int_value')
-      .should('have.text', '1')
-    cy.get('#int_increment')
-      .click()
-      .location('search')
-      .should('eq', '?int=2')
-      .get('#int_value')
-      .should('have.text', '2')
-    cy.get('#int_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?int=1')
-      .get('#int_value')
-      .should('have.text', '1')
-    cy.get('#int_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?int=0')
-      .get('#int_value')
-      .should('have.text', '0')
-    cy.get('#int_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?int=-1')
-      .get('#int_value')
-      .should('have.text', '-1')
-    cy.get('#int_clear')
-      .click()
-      .location('search')
-      .should('be.empty')
-      .get('#int_value')
-      .should('be.empty')
+    cy.get('#int_increment').click()
+    cy.location('search').should('eq', '?int=1')
+    cy.get('#int_value').should('have.text', '1')
+    cy.get('#int_increment').click()
+    cy.location('search').should('eq', '?int=2')
+    cy.get('#int_value').should('have.text', '2')
+    cy.get('#int_decrement').click()
+    cy.location('search').should('eq', '?int=1')
+    cy.get('#int_value').should('have.text', '1')
+    cy.get('#int_decrement').click()
+    cy.location('search').should('eq', '?int=0')
+    cy.get('#int_value').should('have.text', '0')
+    cy.get('#int_decrement').click()
+    cy.location('search').should('eq', '?int=-1')
+    cy.get('#int_value').should('have.text', '-1')
+    cy.get('#int_clear').click()
+    cy.location('search').should('be.empty')
+    cy.get('#int_value').should('be.empty')
   }
 
   // Float
   {
     cy.get('#float_value').should('be.empty')
-    cy.get('#float_increment')
-      .click()
-      .location('search')
-      .should('eq', '?float=0.1')
-      .get('#float_value')
-      .should('have.text', '0.1')
-    cy.get('#float_increment')
-      .click()
-      .location('search')
-      .should('eq', '?float=0.2')
-      .get('#float_value')
-      .should('have.text', '0.2')
-    cy.get('#float_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?float=0.1')
-      .get('#float_value')
-      .should('have.text', '0.1')
-    cy.get('#float_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?float=0')
-      .get('#float_value')
-      .should('have.text', '0')
-    cy.get('#float_decrement')
-      .click()
-      .location('search')
-      .should('eq', '?float=-0.1')
-      .get('#float_value')
-      .should('have.text', '-0.1')
-    cy.get('#float_clear')
-      .click()
-      .location('search')
-      .should('be.empty')
-      .get('#float_value')
-      .should('be.empty')
+    cy.get('#float_increment').click()
+    cy.location('search').should('eq', '?float=0.1')
+    cy.get('#float_value').should('have.text', '0.1')
+    cy.get('#float_increment').click()
+    cy.location('search').should('eq', '?float=0.2')
+    cy.get('#float_value').should('have.text', '0.2')
+    cy.get('#float_decrement').click()
+    cy.location('search').should('eq', '?float=0.1')
+    cy.get('#float_value').should('have.text', '0.1')
+    cy.get('#float_decrement').click()
+    cy.location('search').should('eq', '?float=0')
+    cy.get('#float_value').should('have.text', '0')
+    cy.get('#float_decrement').click()
+    cy.location('search').should('eq', '?float=-0.1')
+    cy.get('#float_value').should('have.text', '-0.1')
+    cy.get('#float_clear').click()
+    cy.location('search').should('be.empty')
+    cy.get('#float_value').should('be.empty')
   }
 
   // Float
   {
     cy.get('#bool_value').should('be.empty')
-    cy.get('#bool_toggle')
-      .click()
-      .location('search')
-      .should('eq', '?bool=true')
-      .get('#bool_value')
-      .should('have.text', 'true')
-    cy.get('#bool_toggle')
-      .click()
-      .location('search')
-      .should('eq', '?bool=false')
-      .get('#bool_value')
-      .should('have.text', 'false')
-    cy.get('#bool_clear')
-      .click()
-      .location('search')
-      .should('be.empty')
-      .get('#bool_value')
-      .should('be.empty')
+    cy.get('#bool_toggle').click()
+    cy.location('search').should('eq', '?bool=true')
+    cy.get('#bool_value').should('have.text', 'true')
+    cy.get('#bool_toggle').click()
+    cy.location('search').should('eq', '?bool=false')
+    cy.get('#bool_value').should('have.text', 'false')
+    cy.get('#bool_clear').click()
+    cy.location('search').should('be.empty')
+    cy.get('#bool_value').should('be.empty')
   }
 
   // todo: Add tests for:

package.json

@@ -77,11 +77,13 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "next": "^13",
+    "next": "^13.4",
     "react": "*",
     "react-dom": "*"
   },
-  "dependencies": {},
+  "dependencies": {
+    "mitt": "^3.0.1"
+  },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.7.0",
     "@types/jest": "^29.5.4",