one 1.1.389 → 1.1.391

package/src/fork/validatePathConfig.ts

@@ -1,25 +1,77 @@
-const formatToList = (items: string[]) => items.map((key) => `- ${key}`).join('\n')
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/core/src/validatePathConfig.tsx
+ *
+ * Please refrain from making changes to this file, as it will make merging updates from the upstream harder.
+ * All modifications except formatting should be marked with `// @modified` comment.
+ */
 
-export default function validatePathConfig(config: any, root = true) {
-  const validKeys = ['initialRouteName', 'screens', '_route']
+const formatToList = (items: Record<string, string>) =>
+  Object.entries(items)
+    .map(([key, value]) => `- ${key} (${value})`)
+    .join('\n')
 
-  if (!root) {
-    validKeys.push('path', 'exact', 'stringify', 'parse')
+export function validatePathConfig(config: unknown, root = true) {
+  const validation = {
+    path: 'string',
+    initialRouteName: 'string',
+    screens: 'object',
+    // @modified - start
+    preserveDynamicRoutes: 'boolean',
+    preserveGroups: 'boolean',
+    // @modified - end
+    ...(root
+      ? null
+      : {
+          exact: 'boolean',
+          stringify: 'object',
+          parse: 'object',
+        }),
   }
 
-  const invalidKeys = Object.keys(config).filter((key) => !validKeys.includes(key))
+  if (typeof config !== 'object' || config === null) {
+    throw new Error(
+      `Expected the configuration to be an object, but got ${JSON.stringify(config)}.`
+    )
+  }
+
+  const validationErrors = Object.fromEntries(
+    Object.keys(config)
+      .map((key) => {
+        if (key in validation) {
+          const type = validation[key as keyof typeof validation] as string
+          const value: string = config[key]
+
+          // biome-ignore lint/suspicious/useValidTypeof: do not check copied code
+          if (value !== undefined && typeof value !== type) {
+            return [key, `expected '${type}', got '${typeof value}'`]
+          }
+        } else {
+          return [key, 'extraneous']
+        }
 
-  if (invalidKeys.length) {
+        return null
+      })
+      .filter(Boolean) as [string, string][]
+  )
+
+  if (Object.keys(validationErrors).length) {
     throw new Error(
       `Found invalid properties in the configuration:\n${formatToList(
-        invalidKeys
-      )}\n\nDid you forget to specify them under a 'screens' property?\n\nYou can only specify the following properties:\n${formatToList(
-        validKeys
-      )}\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+        validationErrors
+      )}\n\nYou can only specify the following properties:\n${formatToList(
+        validation
+      )}\n\nIf you want to specify configuration for screens, you need to specify them under a 'screens' property.\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+    )
+  }
+
+  if (root && 'path' in config && typeof config.path === 'string' && config.path.includes(':')) {
+    throw new Error(
+      `Found invalid path '${config.path}'. The 'path' in the top-level configuration cannot contain patterns for params.`
     )
   }
 
-  if (config.screens) {
+  if ('screens' in config && config.screens) {
     Object.entries(config.screens).forEach(([_, value]) => {
       if (typeof value !== 'string') {
         validatePathConfig(value, false)

package/src/getReactNavigationConfig.ts

@@ -1,5 +1,5 @@
-import { matchDeepDynamicRouteName, matchDynamicName } from './matchers'
-import type { RouteNode } from './Route'
+import { matchDeepDynamicRouteName, matchDynamicName } from './router/matchers'
+import type { RouteNode } from './router/Route'
 
 export type Screen =
   | string

package/src/hooks.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, type ReactNode } from 'react'
-import { router } from './imperative-api'
+import { router } from './router/imperative-api'
 import type { OneRouter } from './interfaces/router'
-import { RouteParamsContext } from './Route'
+import { RouteParamsContext } from './router/Route'
 import { navigationRef, useStoreRootState, useStoreRouteInfo } from './router/router'
 
 type SearchParams = OneRouter.SearchParams

package/src/index.ts

@@ -9,8 +9,8 @@ export type LinkProps<T extends string | object = string> = OneRouter.LinkProps<
 export type { Endpoint, LoaderProps } from './types'
 
 // base
-export { router } from './imperative-api'
-export { createRoute, route } from './createRoute'
+export { router } from './router/imperative-api'
+export { createRoute, route } from './router/createRoute'
 export { onClientLoaderResolve } from './clientLoaderResolver'
 
 // middleware
@@ -66,5 +66,5 @@ export * from '@vxrn/universal-color-scheme'
 
 // React Navigation
 export { useFocusEffect } from './useFocusEffect'
-export { useNavigation } from './useNavigation'
+export { useNavigation } from './router/useNavigation'
 export { useLoader } from './useLoader'

package/src/layouts/withLayoutContext.tsx

@@ -1,8 +1,8 @@
 import type { EventMapBase, NavigationState } from '@react-navigation/native'
 import React from 'react'
-import { useContextKey } from '../Route'
+import { useContextKey } from '../router/Route'
 import type { PickPartial } from '../types'
-import { useSortedScreens, type ScreenProps } from '../useScreens'
+import { useSortedScreens, type ScreenProps } from '../router/useScreens'
 import { Screen } from '../views/Screen'
 import { withStaticProperties } from '../utils/withStaticProperties'
 
@@ -94,7 +94,7 @@ export function withLayoutContext<
       }
 
       return (
-        <Nav {...props} {...options?.props} id={contextKey} ref={ref}>
+        <Nav {...options?.props} {...props} id={contextKey} ref={ref}>
           {sorted}
         </Nav>
       )

package/src/link/linking.ts

@@ -2,8 +2,8 @@ import * as Linking from 'expo-linking'
 import { Platform } from 'react-native'
 
 import { adjustPathname } from '../fork/extractPathFromURL'
-import getPathFromState from '../fork/getPathFromState'
-import getStateFromPath from '../fork/getStateFromPath'
+import { getPathFromState } from '../fork/getPathFromState'
+import { getStateFromPath } from '../fork/getStateFromPath'
 
 // @ts-ignore
 const isExpoGo = typeof expo !== 'undefined' && globalThis.expo?.modules?.ExpoGo

package/src/link/useLinkTo.tsx

@@ -1,9 +1,9 @@
 import type * as React from 'react'
 import { Platform, type GestureResponderEvent } from 'react-native'
 
-import { appendBaseUrl } from '../fork/getPathFromState'
+import { appendBaseUrl } from '../fork/getPathFromState-mods'
 import { useOneRouter } from '../router/router'
-import { stripGroupSegmentsFromPath } from '../matchers'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
 
 function eventShouldPreventDefault(
   e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent

package/src/render.tsx

@@ -9,15 +9,14 @@ export function render(element: React.ReactNode) {
     globalThis['__vxrnVersion']++
     globalThis['__vxrnRoot'].render(element)
   } else {
-    // const deferLoad = requestAnimationFrame || setImmediate
-    // deferLoad(() => {
     startTransition(() => {
+      const rootElement = document as any
       if (globalThis['__vxrnIsSPA']) {
-        const root = createRoot(document.body)
+        const root = createRoot(rootElement)
         globalThis['__vxrnRoot'] = root
         root.render(element)
       } else {
-        globalThis['__vxrnRoot'] = hydrateRoot(document.body, element, {
+        globalThis['__vxrnRoot'] = hydrateRoot(rootElement, element, {
           onRecoverableError(...args) {
             console.groupCollapsed(
               `[one] Non-critical recoverable React error occurred, expand group to see details`
@@ -35,6 +34,5 @@ export function render(element: React.ReactNode) {
         })
       }
     })
-    // })
   }
 }

package/src/{Route.tsx → router/Route.tsx}

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, type ReactNode } from 'react'
 
 import { getContextKey } from './matchers'
-import type { ErrorBoundaryProps } from './views/Try'
-import type { One } from './vite/types'
+import type { ErrorBoundaryProps } from '../views/Try'
+import type { One } from '../vite/types'
 
 export type DynamicConvention = { name: string; deep: boolean; notFound?: boolean }
 

package/src/{createRoute.ts → router/createRoute.ts}

@@ -1,5 +1,5 @@
-import { useActiveParams, useParams, usePathname } from './hooks'
-import type { OneRouter } from './interfaces/router'
+import { useActiveParams, useParams, usePathname } from '../hooks'
+import type { OneRouter } from '../interfaces/router'
 
 export function createRoute<Path>() {
   type Route = OneRouter.Route<Path>

package/src/router/filterRootHTML.ts

@@ -0,0 +1,81 @@
+import { cloneElement, isValidElement } from 'react'
+
+type Props = Record<string, any>
+
+export type FoundRootHTML = {
+  children: React.ReactElement
+  htmlProps?: Props
+  bodyProps?: Props
+  head?: React.ReactElement
+}
+
+/**
+ * To enable custom <html> and other html-like stuff in the root _layout
+ * we are doing some fancy stuff, namely, just capturing the root layout return
+ * value and deep-mapping over it.
+ *
+ * On server, we filter it out and hoist it to the parent root html in createApp
+ *
+ * On client, we just filter it out completely as in One we don't hydrate html
+ */
+
+export function filterRootHTML(el: React.ReactNode): FoundRootHTML {
+  let htmlProps: Props | undefined
+  let bodyProps: React.ReactElement | undefined
+  let head: React.ReactElement | undefined
+
+  function traverse(element: React.ReactNode) {
+    if (!element || typeof element !== 'object') {
+      return element
+    }
+    if (Array.isArray(element)) {
+      return element.map(traverse)
+    }
+
+    const reactElement = element as React.ReactElement
+    const { type, props } = reactElement
+
+    if (type === 'html') {
+      const { children, ...restProps } = reactElement.props
+      htmlProps = restProps
+      return traverse(children)
+    }
+
+    if (type === 'head') {
+      head = reactElement
+      return null
+    }
+
+    if (type === 'body') {
+      const { children, ...restProps } = reactElement.props
+      bodyProps = restProps
+      return children
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      if (
+        isValidElement(element) &&
+        typeof element.type === 'string' &&
+        element.type.toLowerCase() === element.type
+      ) {
+        // filter out things like <meta /> etc on native
+        // because it could just be thown in <html> or a fragment to be hoisted on web
+        return null
+      }
+    }
+
+    return element
+  }
+
+  const children =
+    traverse(el) ||
+    // if none found, we assume they aren't returning any html so just pass it on
+    el
+
+  return {
+    children,
+    htmlProps,
+    bodyProps,
+    head,
+  }
+}

package/src/{getLinkingConfig.ts → router/getLinkingConfig.ts}

@@ -1,8 +1,13 @@
 import { getActionFromState, type LinkingOptions } from '@react-navigation/native'
 import type { RouteNode } from './Route'
-import type { State } from './fork/getPathFromState'
-import { getReactNavigationConfig, type Screen } from './getReactNavigationConfig'
-import { addEventListener, getInitialURL, getPathFromState, getStateFromPath } from './link/linking'
+import type { State } from '../fork/getPathFromState'
+import { getReactNavigationConfig, type Screen } from '../getReactNavigationConfig'
+import {
+  addEventListener,
+  getInitialURL,
+  getPathFromState,
+  getStateFromPath,
+} from '../link/linking'
 
 export function getNavigationConfig(
   routes: RouteNode,

package/src/router/getNormalizedStatePath.tsx

@@ -1,4 +1,4 @@
-import { stripBaseUrl } from '../fork/getStateFromPath'
+import { stripBaseUrl } from '../fork/getStateFromPath-mods'
 
 type SearchParams = Record<string, string | string[]>
 

package/src/{getRoutes.ts → router/getRoutes.ts}

@@ -1,4 +1,4 @@
-import { getDefaultRenderMode } from './config'
+import { getDefaultRenderMode } from '../config'
 import {
   matchArrayGroupName,
   matchDeepDynamicRouteName,
@@ -7,8 +7,8 @@ import {
   removeSupportedExtensions,
 } from './matchers'
 import type { DynamicConvention, RouteNode } from './Route'
-import { getPageExport } from './utils/getPageExport'
-import type { One } from './vite/types'
+import { getPageExport } from '../utils/getPageExport'
+import type { One } from '../vite/types'
 // import { Unmatched } from './views/Unmatched'
 
 export type Options = {
@@ -242,7 +242,7 @@ function getDirectoryTree(contextModule: One.RouteContext, options: Options) {
       {
         type: 'layout',
         loadRoute: () => ({
-          default: (require('./views/Navigator') as typeof import('./views/Navigator'))
+          default: (require('../views/Navigator') as typeof import('../views/Navigator'))
             .DefaultNavigator,
         }),
         // Generate a fake file name for the directory
@@ -481,7 +481,7 @@ function appendSitemapRoute(directory: DirectoryNode) {
       {
         loadRoute() {
           // console.warn(`Loading sitemap`)
-          // const { Sitemap, getNavOptions } = require('./views/Sitemap')
+          // const { Sitemap, getNavOptions } = require('../views/Sitemap')
           // return { default: Sitemap, getNavOptions }
           return { default: () => null, getNavOptions: () => {} }
         },

package/src/{imperative-api.ts → router/imperative-api.ts}

@@ -1,5 +1,5 @@
-import * as store from './router/router'
-import type { OneRouter } from './interfaces/router'
+import * as store from './router'
+import type { OneRouter } from '../interfaces/router'
 
 export const router: OneRouter.Router = {
   navigate: store.navigate,

package/src/router/router.ts

@@ -8,19 +8,19 @@ import * as Linking from 'expo-linking'
 import { nanoid } from 'nanoid/non-secure'
 import { Fragment, startTransition, useSyncExternalStore, type ComponentType } from 'react'
 import { Platform } from 'react-native'
-import type { RouteNode } from '../Route'
-import { getLoaderPath, getPreloadPath } from '../cleanUrl'
+import type { RouteNode } from './Route'
+import { getLoaderPath, getPreloadPath } from '../utils/cleanUrl'
 import type { State } from '../fork/getPathFromState'
-import { deepEqual, getPathDataFromState } from '../fork/getPathFromState'
-import { stripBaseUrl } from '../fork/getStateFromPath'
-import { getLinkingConfig, type OneLinkingOptions } from '../getLinkingConfig'
-import { getRoutes } from '../getRoutes'
+import { getPathDataFromState } from '../fork/getPathFromState'
+import { stripBaseUrl } from '../fork/getStateFromPath-mods'
+import { getLinkingConfig, type OneLinkingOptions } from './getLinkingConfig'
+import { getRoutes } from './getRoutes'
 import type { OneRouter } from '../interfaces/router'
 import { resolveHref } from '../link/href'
 import { resolve } from '../link/path'
-import { matchDynamicName } from '../matchers'
-import { sortRoutes } from '../sortRoutes'
-import { getQualifiedRouteComponent } from '../useScreens'
+import { matchDynamicName } from './matchers'
+import { sortRoutes } from './sortRoutes'
+import { getQualifiedRouteComponent } from './useScreens'
 import { assertIsReady } from '../utils/assertIsReady'
 import { dynamicImport } from '../utils/dynamicImport'
 import { removeSearch } from '../utils/removeSearch'
@@ -641,3 +641,42 @@ function getNavigateAction(
     },
   }
 }
+
+function deepEqual(a: any, b: any) {
+  if (a === b) {
+    return true
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+
+    if (keysA.length !== keysB.length) {
+      return false
+    }
+
+    for (const key of keysA) {
+      if (!deepEqual(a[key], b[key])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  return false
+}

package/src/{useScreens.tsx → router/useScreens.tsx}

@@ -1,4 +1,5 @@
 import { createNavigatorFactory } from '@react-navigation/core'
+import { SafeAreaProviderCompat } from '@react-navigation/elements'
 import type {
   EventMapBase,
   NavigationState,
@@ -6,7 +7,15 @@ import type {
   RouteProp,
   ScreenListeners,
 } from '@react-navigation/native'
-import React, { Suspense, useEffect } from 'react'
+import React, { forwardRef, Suspense, useEffect } from 'react'
+import { getPageExport } from '../utils/getPageExport'
+import { getServerContext, ServerContextScript } from '../utils/serverContext'
+import { useConstant } from '../utils/useConstant'
+import { EmptyRoute } from '../views/EmptyRoute'
+import { RootErrorBoundary } from '../views/RootErrorBoundary'
+import { Try } from '../views/Try'
+import { DevHead } from '../vite/DevHead'
+import { filterRootHTML } from './filterRootHTML'
 import {
   Route,
   useRouteNode,
@@ -15,10 +24,6 @@ import {
   type RouteNode,
 } from './Route'
 import { sortRoutesWithInitial } from './sortRoutes'
-import { getPageExport } from './utils/getPageExport'
-import { EmptyRoute } from './views/EmptyRoute'
-import { RootErrorBoundary } from './views/RootErrorBoundary'
-import { Try } from './views/Try'
 
 // `@react-navigation/core` does not expose the Screen or Group components directly, so we have to
 // do this hack.
@@ -163,52 +168,63 @@ export function getQualifiedRouteComponent(value: RouteNode) {
     return qualifiedStore.get(value)!
   }
 
-  let ScreenComponent: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>
-
-  // if (One_ROUTER_IMPORT_MODE === 'lazy') {
-  //   ScreenComponent = React.forwardRef((props, ref) => {
-  //     // for native avoid suspense for now
-  //     const [loaded, setLoaded] = useState<any>(null)
-
-  //     useEffect(() => {
-  //       try {
-  //         const found = value.loadRoute()
-  //         if (found) {
-  //           setLoaded(found)
-  //         }
-  //       } catch (err) {
-  //         if (err instanceof Promise) {
-  //           err
-  //             .then((res) => {
-  //               setLoaded(res)
-  //             })
-  //             .catch((err) => {
-  //               console.error(`Error loading route`, err)
-  //             })
-  //         } else {
-  //           setLoaded(err as any)
-  //         }
-  //       }
-  //     }, [])
-
-  //     if (loaded) {
-  //       const Component = getPageExport(fromImport(loaded)) as React.ComponentType<any>
-  //       return (
-  //         // <Suspense fallback={null}>
-  //         <Component {...props} ref={ref} />
-  //         // </Suspense>
-  //       )
-  //     }
-
-  //     return null
-  //   })
-  // } else {
+  let ScreenComponent: React.ForwardRefExoticComponent<{ segment: string; key?: string }>
+
   ScreenComponent = React.forwardRef((props, ref) => {
     const res = value.loadRoute()
-    const Component = getPageExport(fromImport(res)) as React.ComponentType<any>
+    const Component = useConstant(() => {
+      const BaseComponent = getPageExport(fromImport(res)) as React.ComponentType<any>
+      const serverContext = getServerContext()
+
+      // root layout do special html handling only
+      if (props.segment === '') {
+        return forwardRef((props, ref) => {
+          // @ts-expect-error
+          const out = BaseComponent(props, ref)
+          const { children, bodyProps, head, htmlProps } = filterRootHTML(out)
+          const { children: headChildren, ...headProps } = head?.props || {}
+
+          if (process.env.TAMAGUI_TARGET === 'native') {
+            // on native we just ignore all html/body/head
+            return children
+          }
+
+          const contents = (
+            <>
+              <head key="head" {...headProps}>
+                <DevHead />
+                <script
+                  dangerouslySetInnerHTML={{
+                    __html: `globalThis['global'] = globalThis`,
+                  }}
+                />
+                {serverContext?.css?.map((file) => {
+                  return <link key={file} rel="stylesheet" href={file} />
+                })}
+                <ServerContextScript />
+                {headChildren}
+              </head>
+              <body key="body" suppressHydrationWarning {...bodyProps}>
+                <SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
+              </body>
+            </>
+          )
+
+          return (
+            // tamagui and libraries can add className on hydration to have ssr safe styling
+            // so supress hydration warnings here
+            <html suppressHydrationWarning lang="en-US" {...htmlProps}>
+              {contents}
+            </html>
+          )
+        })
+      }
+
+      return BaseComponent
+    })
 
     if (process.env.NODE_ENV === 'development' && process.env.DEBUG === 'one') {
-      console.groupCollapsed(`Render ${props.key}`)
+      console.groupCollapsed(`Render ${props.key} ${props.segment}`)
       console.info(`res`, res)
       console.info(`value`, value)
       console.info(`fromImport`, fromImport(res))
@@ -222,7 +238,6 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       // </Suspense>
     )
   })
-  // }
 
   const wrapSuspense = (children: any) => {
     if (process.env.TAMAGUI_TARGET === 'native') {

package/src/{useViteRoutes.tsx → router/useViteRoutes.tsx}

@@ -1,5 +1,5 @@
-import type { GlobbedRouteImports } from './types'
-import type { One } from './vite/types'
+import type { GlobbedRouteImports } from '../types'
+import type { One } from '../vite/types'
 
 // essentially a development helper
 

package/src/server/createRoutesManifest.ts

@@ -1,9 +1,9 @@
-import { type Options, getRoutes } from '../getRoutes'
+import { type Options, getRoutes } from '../router/getRoutes'
 import { getServerManifest } from './getServerManifest'
-import type { RouteNode } from '../Route'
+import type { RouteNode } from '../router/Route'
 import type { One } from '../vite/types'
 
-export { type Options } from '../getRoutes'
+export { type Options } from '../router/getRoutes'
 
 export type RouteInfo<TRegex = string> = {
   file: string

package/src/server/getServerManifest.ts

@@ -8,9 +8,9 @@
  *
  * Based on https://github.com/vercel/next.js/blob/1df2686bc9964f1a86c444701fa5cbf178669833/packages/next/src/shared/lib/router/utils/route-regex.ts
  */
-import type { RouteNode } from '../Route'
-import { getContextKey, matchGroupName } from '../matchers'
-import { sortRoutes } from '../sortRoutes'
+import type { RouteNode } from '../router/Route'
+import { getContextKey, matchGroupName } from '../router/matchers'
+import { sortRoutes } from '../router/sortRoutes'
 import type { One } from '../vite/types'
 
 // TODO: Share these types across cli, server, router, etc.

package/src/server/oneServe.ts

@@ -2,7 +2,7 @@ import type { Hono, MiddlewareHandler } from 'hono'
 import type { BlankEnv } from 'hono/types'
 import { extname, join } from 'node:path'
 import { getServerEntry } from 'vxrn/serve'
-import { getPathFromLoaderPath } from '../cleanUrl'
+import { getPathFromLoaderPath } from '../utils/cleanUrl'
 import { LOADER_JS_POSTFIX_UNCACHED } from '../constants'
 import { compileManifest, getURLfromRequestURL, type RequestHandlers } from '../createHandleRequest'
 import type { RenderAppProps } from '../types'

package/src/typed-routes/generateRouteTypes.ts

@@ -1,7 +1,7 @@
 import FSExtra from 'fs-extra'
 import { writeFile } from 'node:fs/promises'
 import { dirname } from 'node:path'
-import { globbedRoutesToRouteContext } from '../useViteRoutes'
+import { globbedRoutesToRouteContext } from '../router/useViteRoutes'
 import { globDir } from '../utils/globDir'
 import { getTypedRoutesDeclarationFile } from './getTypedRoutesDeclarationFile'
 

package/src/typed-routes/getTypedRoutesDeclarationFile.ts

@@ -1,6 +1,6 @@
-import { getRoutes } from '../getRoutes'
-import { isTypedRoute, removeSupportedExtensions } from '../matchers'
-import type { RouteNode } from '../Route'
+import { getRoutes } from '../router/getRoutes'
+import { isTypedRoute, removeSupportedExtensions } from '../router/matchers'
+import type { RouteNode } from '../router/Route'
 import type { One } from '../vite/types'
 
 // /[...param1]/ - Match [...param1]