one
- Version 1.1.297
- Published
- 8.04 MB
- 44 dependencies
- MIT license
Install
npm i one
yarn add one
pnpm add one
Overview
One is a new React Framework that makes Vite serve both native and web.
Index
Variables
Functions
Type Aliases
Namespaces
OneRouter
- AbsoluteRoute
- AllRoutes
- CatchAllRoutePart
- DynamicRoutesHref
- DynamicRoutesHref2
- DynamicRouteTemplate
- ExternalPathString
- Href
- InputRouteParams
- Link
- LinkComponent
- LinkProps
- LinkToOptions
- LoadingState
- LoadingStateListener
- NavigationRef
- OneRouterRoutes
- Redirect()
- Redirect
- RelativePathString
- ResultState
- RootStateListener
- Route
- router
- Router
- SearchParams
- SingleRoutePart
- UnknownInputParams
- useActiveParams()
- useParams()
- useRouter()
- useSearchParams()
- useSegments()
- WebAnchorProps
routerStore
- canDismiss()
- canGoBack()
- cleanup()
- dismiss()
- dismissAll()
- getRouteInfo()
- getSortedRoutes()
- goBack()
- hasAttemptedToHideSplash
- initialize()
- initialState
- linking
- linkTo()
- navigate()
- navigationRef
- preloadingLoader
- preloadRoute()
- push()
- replace()
- rootComponent
- rootState
- rootStateSnapshot()
- routeInfo
- routeInfoSnapshot()
- routeNode
- setLoadingState()
- setParams()
- snapshot()
- subscribeToLoadingState()
- subscribeToRootState()
- subscribeToStore()
- updateState()
- useOneRouter()
- useStoreRootState()
- useStoreRouteInfo()
Variables
Functions
function createRoute
createRoute: <Path>() => { useParams: () => any; useActiveParams: () => any; createLoader: ( a: (props: { params: OneRouter.InputRouteParams<Path> }) => any ) => (props: { params: OneRouter.InputRouteParams<Path> }) => any;};
function getURL
getURL: () => any;
function isResponse
isResponse: (res: any) => res is Response;
function onClientLoaderResolve
onClientLoaderResolve: (resolver: ClientLoaderResolver) => void;
function redirect
redirect: (path: string, status?: number) => Response;
function useFocusEffect
useFocusEffect: ( effect: EffectCallback, do_not_pass_a_second_prop?: never) => void;
Hook to run an effect in a focused screen, similar to
React.useEffect
. This can be used to perform side-effects such as fetching data or subscribing to events. The passed callback should be wrapped inReact.useCallback
to avoid running the effect too often.Parameter callback
Memoized callback containing the effect, should optionally return a cleanup function.
function useLoader
useLoader: < Loader extends Function, Returned = Loader extends (p: any) => any ? ReturnType<Loader> : unknown>( loader: Loader) => Returned extends Promise<any> ? Awaited<Returned> : Returned;
function useNavigation
useNavigation: <T = NavigationProp<ReactNavigation.RootParamList>>( parent?: string) => T;
Return the navigation object for the current route.
Parameter parent
Provide an absolute path like
/(root)
to the parent route or a relative path like../../
to the parent route.Returns
the navigation object for the provided route.
Type Aliases
type Endpoint
type Endpoint = (req: Request) => Response | string | Object | null;
type Href
type Href = OneRouter.Href;
type LinkProps
type LinkProps<T extends string | object = string> = OneRouter.LinkProps<T>;
type LoaderProps
type LoaderProps<Params extends Object = Record<string, string>> = { path: string; params: Params;};
Namespaces
namespace OneRouter
namespace OneRouter {}
variable Link
const Link: LinkComponent;
Component to render link to another route using a path. Uses an anchor tag on the web.
Parameter
props.href Absolute path to route (e.g. `/feeds/hot`).
Parameter
props.replace Should replace the current route without adding to the history.
Parameter
props.asChild Forward props to child component. Useful for custom buttons.
Parameter
props.children Child elements to render the content.
Parameter
props.className On web, this sets the HTML `class` directly. On native, this can be used with CSS interop tools like Nativewind.
variable router
const router: Router;
The imperative router.
function Redirect
Redirect: (props: React.PropsWithChildren<{ href: Href }>) => ReactNode;
Redirects to the href as soon as the component is mounted.
function useActiveParams
useActiveParams: < T extends string | UnknownOutputParams = UnknownOutputParams>() => T extends AllRoutes ? SearchParams<T> : T;
Get the globally selected query parameters, including dynamic path segments. This function will update even when the route is not focused. Useful for analytics or other background operations that don't draw to the screen.
When querying search params in a stack, opt-towards using `useParams` as these will only update when the route is focused.
See Also
`useParams`
function useParams
useParams: < TParams extends string | UnknownOutputParams = UnknownOutputParams>() => TParams extends AllRoutes ? SearchParams<TParams> : TParams;
Returns the URL search parameters for the contextually focused route. e.g. `/acme?foo=bar` -> `{ foo: "bar" }`. This is useful for stacks where you may push a new screen that changes the query parameters.
To observe updates even when the invoking route is not focused, use `useActiveParams()`.
See Also
`useActiveParams`
function useRouter
useRouter: () => Router;
Hooks
function useSearchParams
useSearchParams: < TParams extends string | UnknownOutputParams = UnknownOutputParams>() => TParams extends AllRoutes ? SearchParams<TParams> : TParams;
function useSegments
useSegments: <T extends string | [string]>() => T extends AbsoluteRoute ? RouteSegments<T> : T extends string ? string[] : T;
Get a list of selected file segments for the currently selected route. Segments are not normalized, so they will be the same as the file path. e.g. /[id]?id=normal -> ["[id]"]
`useSegments` can be typed using an abstract. Consider the following file structure, and strictly typed `useSegments` function:
```md - app - [user] - index.js - followers.js - settings.js ``` This can be strictly typed using the following abstract:
```ts const [first, second] = useSegments<['settings'] | ['[user]'] | ['[user]', 'followers']>() ```
interface LinkComponent
interface LinkComponent {}
property resolveHref
resolveHref: (href: Href) => string;
Helper method to resolve an Href object into a string.
call signature
<T extends string | object>( props: React.PropsWithChildren<LinkProps<T>>): JSX.Element;
interface LinkProps
interface LinkProps<T extends string | object> extends Omit<TextProps, 'href'>, WebAnchorProps {}
property asChild
asChild?: boolean;
Forward props to child component. Useful for custom buttons.
property className
className?: string;
On web, this sets the HTML
class
directly. On native, this can be used with CSS interop tools like Nativewind.
property href
href: Href<T>;
Path to route to.
property onPress
onPress?: ( e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void;
property push
push?: boolean;
Should push the current route
property replace
replace?: boolean;
Should replace the current route without adding to the history.
interface WebAnchorProps
interface WebAnchorProps {}
********** * **********
property download
download?: string;
**Web only:** Specifies that the
href
should be downloaded when the user clicks on the link, instead of navigating to it. It is typically used for links that point to files that the user should download, such as PDFs, images, documents, etc.The value of the
download
property, which represents the filename for the downloaded file. This property is passed to the underlying anchor (<a>
) tag.Example 1
Download image
property rel
rel?: string;
**Web only:** Specifies the relationship between the
href
and the current route.Common values: - **nofollow**: Indicates to search engines that they should not follow the
href
. This is often used for user-generated content or links that should not influence search engine rankings. - **noopener**: Suggests that thehref
should not have access to the opening window'swindow.opener
object, which is a security measure to prevent potentially harmful behavior in cases of links that open new tabs or windows. - **noreferrer**: Requests that the browser not send theReferer
HTTP header when navigating to thehref
. This can enhance user privacy.The
rel
property is primarily used for informational and instructive purposes, helping browsers and web crawlers make better decisions about how to handle and interpret the links on a web page. It is important to use appropriaterel
values to ensure that links behave as intended and adhere to best practices for web development and SEO (Search Engine Optimization).This property is passed to the underlying anchor (
<a>
) tag.Example 1
Go to Expo
property target
target?: '_self' | '_blank' | '_parent' | '_top' | (string & object);
**Web only:** Specifies where to open the
href
.- **_self**: the current tab. - **_blank**: opens in a new tab or window. - **_parent**: opens in the parent browsing context. If no parent, defaults to **_self**. - **_top**: opens in the highest browsing context ancestor. If no ancestors, defaults to **_self**.
This property is passed to the underlying anchor (
<a>
) tag.'_self'
Example 1
Go to Expo in new tab
type AbsoluteRoute
type AbsoluteRoute = DynamicRouteTemplate | StaticRoutes;
type AllRoutes
type AllRoutes = OneRouterRoutes | ExternalPathString;
type CatchAllRoutePart
type CatchAllRoutePart<S extends string> = S extends `${string}${SearchOrHash}` ? never : S extends '' ? never : S extends `${string}(${string})${string}` ? never : S extends `${string}[${string}]${string}` ? never : S;
Return only the CatchAll router part. If the string has search parameters or a hash return never
type DynamicRoutesHref
type DynamicRoutesHref = DynamicRouteString< { __branded__: any }, DynamicRouteTemplate>;
******* Href * *******
type DynamicRoutesHref2
type DynamicRoutesHref2 = DynamicRouteString<string, DynamicRouteTemplate>;
type DynamicRouteTemplate
type DynamicRouteTemplate = __routes extends { DynamicRouteTemplate: string } ? __routes['DynamicRouteTemplate'] : string;
type ExternalPathString
type ExternalPathString = `${string}:${string}`;
type Href
type Href<T extends string | object = { __branded__: any }> = | StringRouteToType< AllUngroupedRoutes<StaticRoutes> | RelativePathString | ExternalPathString > | DynamicRouteString<T, DynamicRouteTemplate> | DynamicRouteObject< | StaticRoutes | RelativePathString | ExternalPathString | DynamicRouteTemplate >;
The main routing type for One. Includes all available routes with strongly typed parameters.
type InputRouteParams
type InputRouteParams<Path> = { [Key in ParameterNames<Path> as Key extends `...${infer Name}` ? Name : Key]: Key extends `...${string}` ? string[] : string;};
Returns a Record of the routes parameters as strings and CatchAll parameters
There are two versions, input and output, as you can input 'string | number' but the output will always be 'string'
/[id]/[...rest] -> { id: string, rest: string[] } /no-params -> {}
type LinkToOptions
type LinkToOptions = { scroll?: boolean;};
type LoadingState
type LoadingState = 'loading' | 'loaded';
type LoadingStateListener
type LoadingStateListener = (state: LoadingState) => void;
type NavigationRef
type NavigationRef = NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
type OneRouterRoutes
type OneRouterRoutes = DynamicRouteTemplate | StaticRoutes | RelativePathString;
type Redirect
type Redirect = typeof Redirect;
type RelativePathString
type RelativePathString = `./${string}` | `../${string}` | '..';
type ResultState
type ResultState = PartialState<NavigationState> & { state?: ResultState; linkOptions?: OneRouter.LinkToOptions;};
type RootStateListener
type RootStateListener = (state: ResultState) => void;
type Route
type Route<Path> = { Params: InputRouteParams<Path>; Props: { params: InputRouteParams<Path> }; Loader: (props: { params: InputRouteParams<Path> }) => any;};
type Router
type Router = { /** Go back in the history. */ back: () => void; /** If there's history that supports invoking the `back` function. */ canGoBack: () => boolean; /** Navigate to the provided href using a push operation if possible. */ push: (href: Href, options?: LinkToOptions) => void; /** Navigate to the provided href. */ navigate: (href: Href, options?: LinkToOptions) => void; /** Navigate to route without appending to the history. */ replace: (href: Href, options?: LinkToOptions) => void; /** Navigate to the provided href using a push operation if possible. */ dismiss: (count?: number) => void; /** Navigate to first screen within the lowest stack. */ dismissAll: () => void; /** If there's history that supports invoking the `dismiss` and `dismissAll` function. */ canDismiss: () => boolean; /** Update the current route query params. */ setParams: <T = ''>( params?: T extends '' ? Record<string, string | undefined | null> : InputRouteParams<T> ) => void; /** Subscribe to state updates from the router */ subscribe: (listener: RootStateListener) => () => void; /** Subscribe to loading state updates */ onLoadState: (listener: LoadingStateListener) => () => void;};
********************* One Exports * *********************
type SearchParams
type SearchParams<T extends AllRoutes = never> = T extends DynamicRouteTemplate ? OutputRouteParams<T> : T extends StaticRoutes ? never : UnknownOutputParams;
Returns the search parameters for a route.
type SingleRoutePart
type SingleRoutePart<S extends string> = S extends `${string}/${string}` ? never : S extends `${string}${SearchOrHash}` ? never : S extends '' ? never : S extends `(${string})` ? never : S extends `[${string}]` ? never : S;
Return only the RoutePart of a string. If the string has multiple parts return never
string | type ---------|------ 123 | 123 /123/abc | never 123?abc | never ./123 | never /123 | never 123/../ | never
type UnknownInputParams
type UnknownInputParams = Record< string, string | number | undefined | null | (string | number)[]>;
namespace routerStore
module 'src/router/router.ts' {}
We need to find the deepest navigator where the action and current state diverge, If they do not diverge, the lowest navigator is the target.
By default React Navigation will target the current navigator, but this doesn't work for all actions For example: - /deeply/nested/route -> /top-level-route the target needs to be the top-level navigator - /stack/nestedStack/page -> /stack1/nestedStack/other-page needs to target the nestedStack navigator
This matching needs to done by comparing the route names and the dynamic path, for example - /1/page -> /2/anotherPage needs to target the /[id] navigator
Other parameters such as search params and hash are not evaluated.
variable hasAttemptedToHideSplash
let hasAttemptedToHideSplash: boolean;
variable initialState
let initialState: any;
variable linking
let linking: any;
variable navigationRef
let navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
variable preloadingLoader
const preloadingLoader: {};
variable rootComponent
let rootComponent: ComponentType;
variable rootState
let rootState: any;
variable routeInfo
let routeInfo: any;
variable routeNode
let routeNode: any;
function canDismiss
canDismiss: () => boolean;
function canGoBack
canGoBack: () => boolean;
function cleanup
cleanup: () => void;
function dismiss
dismiss: (count?: number) => void;
function dismissAll
dismissAll: () => void;
function getRouteInfo
getRouteInfo: (state: OneRouter.ResultState) => UrlObject;
function getSortedRoutes
getSortedRoutes: () => any;
function goBack
goBack: () => void;
function initialize
initialize: ( context: One.RouteContext, ref: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>, initialLocation?: URL) => void;
function linkTo
linkTo: ( href: string, event?: string, options?: OneRouter.LinkToOptions) => Promise<void>;
function navigate
navigate: ( url: OneRouter.Href, options?: OneRouter.LinkToOptions) => Promise<void>;
function preloadRoute
preloadRoute: (href: string) => void;
function push
push: (url: OneRouter.Href, options?: OneRouter.LinkToOptions) => Promise<void>;
function replace
replace: ( url: OneRouter.Href, options?: OneRouter.LinkToOptions) => Promise<void>;
function rootStateSnapshot
rootStateSnapshot: () => any;
function routeInfoSnapshot
routeInfoSnapshot: () => any;
function setLoadingState
setLoadingState: (state: OneRouter.LoadingState) => void;
function setParams
setParams: (params?: Record<string, string | number>) => any;
function snapshot
snapshot: () => { linkTo: ( href: string, event?: string, options?: OneRouter.LinkToOptions ) => Promise<void>; routeNode: any; rootComponent: ComponentType; linking: any; hasAttemptedToHideSplash: boolean; initialState: any; rootState: any; nextState: any; routeInfo: any; splashScreenAnimationFrame: number; navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>; navigationRefSubscription: () => void; rootStateSubscribers: Set<OneRouter.RootStateListener>; storeSubscribers: Set<() => void>;};
function subscribeToLoadingState
subscribeToLoadingState: ( subscriber: OneRouter.LoadingStateListener) => () => void;
function subscribeToRootState
subscribeToRootState: (subscriber: OneRouter.RootStateListener) => () => void;
function subscribeToStore
subscribeToStore: (subscriber: () => void) => () => void;
function updateState
updateState: (state: OneRouter.ResultState, nextStateParam?: any) => void;
function useOneRouter
useOneRouter: () => any;
function useStoreRootState
useStoreRootState: () => any;
function useStoreRouteInfo
useStoreRouteInfo: () => any;
Package Files (13)
Dependencies (44)
- @azure/core-asynciterator-polyfill
- @babel/generator
- @babel/parser
- @babel/traverse
- @radix-ui/react-slot
- @react-navigation/bottom-tabs
- @react-navigation/core
- @react-navigation/drawer
- @react-navigation/elements
- @react-navigation/native
- @react-navigation/native-stack
- @react-navigation/routers
- @ungap/structured-clone
- @vxrn/tslib-lite
- @vxrn/universal-color-scheme
- @vxrn/use-isomorphic-layout-effect
- babel-dead-code-elimination
- citty
- core-js
- create-vxrn
- dotenv
- escape-string-regexp
- expo-linking
- expo-modules-core
- fast-deep-equal
- fast-glob
- fs-extra
- hono
- lightningcss
- micromatch
- nanoid
- perfect-debounce
- react
- react-dom
- react-native-gesture-handler
- react-native-safe-area-context
- react-native-screens
- rollup-plugin-node-externals
- url-parse
- vite
- vite-tsconfig-paths
- vxrn
- ws
- xxhashjs
Dev Dependencies (10)
Peer Dependencies (1)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/one
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/one)
- HTML<a href="https://www.jsdocs.io/package/one"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 7469 ms. - Missing or incorrect documentation? Open an issue for this package.