Fix dedup URL params

The depedency, url-parse, will dedup repeated url params. For example
`?fop=1&foo2` and will keep the first one. This doesn't play nicely with rails
Rack params as dups may indicate a structural array. This change migrates
`url-parse` to the browser's own 'URLSearchParams' and `URL`.

With the change, we had to:
1. Make minimal changes to `url.ts` helpers. You'll notice that we have a FAKE_ORIGIN as a fallback for the
`URL` usage, but in every instances, we have no 't need the origin at all. Either we replace the origin with a blank
or we only a part of the url like pathname.
2. baseUrl is required, but existing testing in isolation has it as optional. The update to the tests now reflect
that requirement

For dev envs, we're also included corejs which helps with adding polyfills that
we can use in place for testing.

Author: jho406

superglue/lib/action_creators/index.ts

@@ -1,5 +1,4 @@
-import { urlToPageKey, getIn } from '../utils'
-import parse from 'url-parse'
+import { urlToPageKey, getIn, propsAtParam } from '../utils'
 import {
   saveResponse,
   GRAFTING_ERROR,
@@ -31,11 +30,9 @@ function fetchDeferments(
         successAction = GRAFTING_SUCCESS,
         failAction = GRAFTING_ERROR,
       }) {
-        const parsedUrl = new parse(url, true)
-
         // props_at will always be present in a graft response
         // That's why this is marked `as string`
-        const keyPath = parsedUrl.query.props_at as string
+        const keyPath = propsAtParam(url) as string
 
         return dispatch(remote(url, { pageKey }))
           .then(() => {

superglue/lib/action_creators/requests.ts

@@ -3,7 +3,6 @@ import {
   parseResponse,
   needsRefresh,
   urlToPageKey,
-  withoutBusters,
   hasPropsAt,
   propsAtParam,
   removePropsAt,
@@ -76,7 +75,6 @@ export const remote: RemoteCreator = (
     ...rest
   } = {}
 ) => {
-  path = withoutBusters(path)
   targetPageKey = targetPageKey && urlToPageKey(targetPageKey)
 
   return (dispatch, getState) => {
@@ -146,8 +144,6 @@ export const visit: VisitCreator = (
     ...rest
   } = {}
 ) => {
-  path = withoutBusters(path)
-
   return (dispatch, getState) => {
     const currentPageKey = getState().superglue.currentPageKey
     placeholderKey =

superglue/lib/components/Navigation.tsx

@@ -6,7 +6,7 @@ import React, {
   useImperativeHandle,
   ForwardedRef,
 } from 'react'
-import { urlToPageKey, pathWithoutBZParams } from '../utils'
+import { urlToPageKey } from '../utils'
 import { removePage, setActivePage } from '../actions'
 import {
   HistoryState,
@@ -164,7 +164,6 @@ const NavigationProvider = forwardRef(function NavigationProvider(
       return false
     }
 
-    path = pathWithoutBZParams(path)
     const nextPageKey = urlToPageKey(path)
     const hasPage = Object.prototype.hasOwnProperty.call(
       store.getState().pages,

superglue/lib/index.tsx

@@ -1,5 +1,4 @@
 import React, { useRef, useMemo } from 'react'
-import parse from 'url-parse'
 import { config } from './config'
 import { urlToPageKey, ujsHandlers, argsForHistory } from './utils'
 import { saveAndProcessPage } from './action_creators'
@@ -53,8 +52,7 @@ export const prepareStore = (
   initialPage: VisitResponse,
   path: string
 ) => {
-  const location = parse(path)
-  const initialPageKey = urlToPageKey(location.href)
+  const initialPageKey = urlToPageKey(path)
   const { csrfToken } = initialPage
 
   store.dispatch(
@@ -83,7 +81,7 @@ export const setup = ({
 
   const { visit, remote } = buildVisitAndRemote(navigatorRef, store)
 
-  const initialPageKey = urlToPageKey(parse(path).href)
+  const initialPageKey = urlToPageKey(path)
   const nextHistory = history || createHistory()
   nextHistory.replace(...argsForHistory(path))
   prepareStore(store, initialPage, path)

superglue/lib/utils/request.ts

@@ -1,4 +1,3 @@
-import parse from 'url-parse'
 import { formatForXHR } from './url'
 import { config } from '../config'
 import { BasicRequestInit, ParsedResponse, RootState } from '../types'
@@ -91,11 +90,7 @@ export function argsForFetch(
     nextHeaders['x-csrf-token'] = currentState.csrfToken
   }
 
-  const fetchPath = new parse(
-    formatForXHR(pathQuery),
-    config.baseUrl || {},
-    true
-  )
+  const fetchPath = new URL(formatForXHR(pathQuery), config.baseUrl)
 
   const credentials = 'same-origin'
 
@@ -113,13 +108,9 @@ export function argsForFetch(
   }
 
   if (currentState.currentPageKey) {
-    const referrer = new parse(
-      currentState.currentPageKey,
-      config.baseUrl || {},
-      false
-    ).href
+    const referrer = new URL(currentState.currentPageKey, config.baseUrl)
 
-    options.referrer = referrer
+    options.referrer = referrer.toString()
   }
 
   if (method == 'GET' || method == 'HEAD') {
@@ -129,8 +120,11 @@ export function argsForFetch(
       )
 
       // TODO: Add coverage for this
-      const nextQuery = { ...fetchPath.query, ...Object.fromEntries(allData) }
-      fetchPath.set('query', nextQuery)
+      // Form data should override anything in the URL params First we
+      // delete every key. Then append the new keys accounting for
+      // duplicate keys that represent structural arrays.
+      allData.forEach((value, key) => fetchPath.searchParams.delete(key))
+      allData.forEach((value, key) => fetchPath.searchParams.append(key, value))
     }
 
     delete options.body

superglue/lib/utils/ujs.ts

@@ -1,4 +1,3 @@
-import { withoutBusters } from './url'
 import {
   Handlers,
   UJSHandlers,
@@ -77,13 +76,12 @@ export class HandlerBuilder {
 
     event.preventDefault()
 
-    let url = form.getAttribute('action')
+    const url = form.getAttribute('action')
     if (!url) {
       return
     }
 
     const method = (form.getAttribute('method') || 'POST').toUpperCase()
-    url = withoutBusters(url)
 
     this.visitOrRemote(form, url, {
       method,
@@ -103,11 +101,10 @@ export class HandlerBuilder {
     }
 
     event.preventDefault()
-    let url = link.getAttribute('href')
+    const url = link.getAttribute('href')
     if (!url) {
       return
     }
-    url = withoutBusters(url)
 
     this.visitOrRemote(link, url, { method: 'GET' })
   }

superglue/lib/utils/url.ts

@@ -1,58 +1,43 @@
-import parse from 'url-parse'
 import { PageKey } from '../types'
 
+const FAKE_ORIGIN = 'https://example.com'
+
 export function pathQuery(url: string): string {
-  const { pathname, query } = new parse(url, {})
+  const { pathname, search: query } = new URL(url, FAKE_ORIGIN)
 
   return pathname + query
 }
 
 export function pathQueryHash(url: string): string {
-  const { pathname, query, hash } = new parse(url, {})
+  const { pathname, hash, search: query } = new URL(url, FAKE_ORIGIN)
 
   return pathname + query + hash
 }
 
 export function hasPropsAt(url: string): boolean {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
+  const { searchParams } = new URL(url, FAKE_ORIGIN)
 
-  return !!query['props_at']
+  return searchParams.has('props_at')
 }
 
-export function propsAtParam(url: string): string | undefined {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
+export function propsAtParam(url: string): string | null {
+  const { searchParams } = new URL(url, FAKE_ORIGIN)
 
-  return query['props_at']
+  return searchParams.get('props_at')
 }
 
 export function withFormatJson(url: string): string {
-  const parsed = new parse(url, {}, true)
-  parsed.query['format'] = 'json'
-
-  return parsed.toString()
-}
+  const parsed = new URL(url, FAKE_ORIGIN)
+  parsed.searchParams.set('format', 'json')
 
-export function pathWithoutBZParams(url: string): string {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
-
-  delete query['props_at']
-  delete query['format']
-  parsed.set('query', query)
-
-  return pathQueryHash(parsed.toString())
+  return parsed.href.replace(parsed.origin, '')
 }
 
 export function removePropsAt(url: string): string {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
-
-  delete query['props_at']
-  parsed.set('query', query)
+  const parsed = new URL(url, FAKE_ORIGIN)
+  parsed.searchParams.delete('props_at')
 
-  return parsed.toString()
+  return parsed.href.replace(parsed.origin, '')
 }
 
 /**
@@ -62,29 +47,18 @@ export function removePropsAt(url: string): string {
  * @returns
  */
 export function urlToPageKey(url: string): PageKey {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
-
-  delete query['props_at']
-  delete query['format']
-  parsed.set('query', query)
+  const parsed = new URL(url, FAKE_ORIGIN)
+  parsed.searchParams.delete('props_at')
+  parsed.searchParams.delete('format')
 
   return pathQuery(parsed.toString())
 }
 
 export function withoutHash(url: string): string {
-  const parsed = new parse(url, {}, true)
-  parsed.set('hash', '')
-  return parsed.toString()
-}
-
-export function withoutBusters(url: string): string {
-  const parsed = new parse(url, {}, true)
-  const query = parsed.query
-  delete query['format']
-  parsed.set('query', query)
+  const parsed = new URL(url, FAKE_ORIGIN)
+  parsed.hash = ''
 
-  return pathQuery(parsed.toString())
+  return parsed.href.replace(parsed.origin, '')
 }
 
 export function formatForXHR(url: string): string {
@@ -94,10 +68,12 @@ export function formatForXHR(url: string): string {
 }
 
 export function parsePageKey(pageKey: PageKey) {
-  const { pathname, query } = new parse(pageKey, {}, true)
+  const { pathname, searchParams } = new URL(pageKey, FAKE_ORIGIN)
+
+  const search = Object.fromEntries(searchParams)
 
   return {
     pathname,
-    search: query,
+    search,
   }
 }

superglue/package.json

@@ -50,7 +50,6 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.10.1",
-    "@types/url-parse": "^1.4.11",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -76,15 +75,15 @@
     "typedoc-plugin-markdown": "~4.2.3",
     "typedoc-plugin-missing-exports": "~3.0.0",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.2"
+    "vitest": "^2.0.2",
+    "core-js": "^3.41.0"
   },
   "peerDependencies": {
+    "@reduxjs/toolkit": "^2.2.8",
     "react": "^18 || ^19",
-    "react-redux": "^9 || ^8",
-    "@reduxjs/toolkit": "^2.2.8"
+    "react-redux": "^9 || ^8"
   },
   "dependencies": {
-    "history": "^5.3.0",
-    "url-parse": "^1.5.1"
+    "history": "^5.3.0"
   }
 }

superglue/spec/helpers/polyfill.js

@@ -1,5 +1,5 @@
 import { AbortController } from 'abortcontroller-polyfill/dist/cjs-ponyfill'
-import { TextEncoder, TextDecoder } from 'util'
+import 'core-js/stable'
 import { JSDOM } from 'jsdom'
 
 function setUpDomEnvironment() {
@@ -26,5 +26,3 @@ function copyProps(src, target) {
 setUpDomEnvironment()
 
 global.AbortController = AbortController
-global.TextEncoder = TextEncoder
-global.TextDecoder = TextDecoder

superglue/spec/helpers/setup.js

@@ -1 +1,11 @@
 import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+vi.mock(import('../../lib/config.ts'), () => {
+  return {
+    config: {
+      baseUrl: 'https://example.com',
+      maxPages: 20,
+    },
+  }
+})