one

  • Version 1.2.19
  • Published
  • 11.6 MB
  • 54 dependencies
  • BSD-3-Clause 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

variable route

const route: { feed: { $id: typeof postIdRoute }; notifications: {}; profile: {} };

    variable router

    const router: OneRouter.Router;

      Functions

      function createMiddleware

      createMiddleware: (middleware: Middleware) => Middleware;

        function createRoute

        createRoute: <Path extends string = string>() => {
        useParams: () => any;
        useActiveParams: () => any;
        createLoader: <T>(
        fn: (props: LoaderProps<Params>) => T
        ) => (props: LoaderProps<Params>) => T;
        };

          function getURL

          getURL: () => any;

            function href

            href: <A extends OneRouter.Href<{ __branded__: any }>>(a: A) => A;
            • Type-level utility function to help pass valid Href typed strings. Does not actually validate at runtime, though we could add this later.

            function isResponse

            isResponse: (res: any) => res is Response;

              function onClientLoaderResolve

              onClientLoaderResolve: (resolver: ClientLoaderResolver) => void;

                function redirect

                redirect: (
                path: '__branded__' extends keyof OneRouter.Href ? string : OneRouter.Href,
                status?: number
                ) => Response;

                  function useFocusEffect

                  useFocusEffect: (effect: EffectCallback, args: any[]) => 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.

                    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 useLoaderState

                    useLoaderState: <
                    Loader extends Function = any,
                    Returned = Loader extends (p: any) => any ? ReturnType<Loader> : unknown
                    >(
                    loader?: Loader
                    ) => Loader extends undefined
                    ? { refetch: () => Promise<void>; state: 'idle' | 'loading' }
                    : {
                    data: Returned extends Promise<any> ? Awaited<Returned> : Returned;
                    refetch: () => Promise<void>;
                    state: 'idle' | 'loading';
                    };

                      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 = '__branded__' extends keyof OneRouter.Href ? string : OneRouter.Href;

                          type LinkProps

                          type LinkProps<T extends string | object = string> = OneRouter.LinkProps<T>;

                            type LoaderProps

                            type LoaderProps<Params extends Object = Record<string, string | string[]>> = {
                            path: string;
                            search?: string;
                            params: Params;
                            request?: Request;
                            };

                              type Middleware

                              type Middleware = (props: {
                              request: Request;
                              next: () => Promise<MaybeResponse>;
                              context: MiddlewareContext;
                              }) => RequestResponse;

                                type RouteType

                                type RouteType<Path extends string = string> = OneRouter.RouteType<Path>;
                                • Helper type to get route information including params and loader props. Can be overridden in generated routes.d.ts for per-route types.

                                  Example 1

                                  import type { RouteType } from 'one'

                                  type MyRoute = RouteType<'(site)/docs/[slug]'> // MyRoute.Params = { slug: string } // MyRoute.LoaderProps = { params: { slug: string }, path: string, request?: Request }

                                Namespaces

                                namespace One

                                namespace One {}

                                  type Route

                                  type Route<Path> = OneRouter.Route<Path>;

                                    namespace OneRouter

                                    namespace OneRouter {}
                                      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 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' | 'disabled' | 'onLongPress' | 'onPressIn' | 'onPressOut'
                                          >,
                                          Pick<
                                          PressableProps,
                                          'disabled' | 'onLongPress' | 'onPressIn' | 'onPressOut'
                                          >,
                                          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 the href should not have access to the opening window's window.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 the Referer HTTP header when navigating to the href. 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 appropriate rel 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 InpurRouteParamsGeneric

                                                        type InpurRouteParamsGeneric = InputRouteParamsBlank | InputRouteParams<any>;

                                                          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 InputRouteParamsBlank

                                                          type InputRouteParamsBlank = Record<string, string | undefined | null>;
                                                          • ********************* One Exports * *********************

                                                          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;
                                                                        hash?: string;
                                                                        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 '' ? InputRouteParamsBlank : InputRouteParams<T>
                                                                              ) => void;
                                                                              /** Subscribe to state updates from the router */
                                                                              subscribe: (listener: RootStateListener) => () => void;
                                                                              /** Subscribe to loading state updates */
                                                                              onLoadState: (listener: LoadingStateListener) => () => void;
                                                                              };

                                                                                type RouteType

                                                                                type RouteType<Path extends string> = Path extends keyof __routes['RouteTypes']
                                                                                ? __routes['RouteTypes'][Path]
                                                                                : {
                                                                                Params: InputRouteParams<Path>;
                                                                                LoaderProps: import('../types').LoaderProps<InputRouteParams<Path>>;
                                                                                };
                                                                                • Helper type to get route information including params and loader props. Uses generated RouteTypes from routes.d.ts if available for better intellisense.

                                                                                  Example 1

                                                                                  const route = createRoute<'/docs/[slug]'>() // route.createLoader gets params typed as { slug: string }

                                                                                  type Route = RouteType<'/docs/[slug]'> // Route.Params = { slug: string } // Route.LoaderProps = { path: string; params: { slug: string }; request?: Request }

                                                                                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' {}
                                                                                  • Note: this entire module is exported as an interface router.* We need to treat exports as an API and not change them, maybe not the best decision.

                                                                                  variable hasAttemptedToHideSplash

                                                                                  let hasAttemptedToHideSplash: boolean;

                                                                                    variable initialState

                                                                                    let initialState: 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 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?: OneRouter.InpurRouteParamsGeneric) => 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 (15)

                                                                                                                                                    Dependencies (54)

                                                                                                                                                    Dev Dependencies (12)

                                                                                                                                                    Peer Dependencies (4)

                                                                                                                                                    Badge

                                                                                                                                                    To add a badge like this onejsDocs.io badgeto 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>