overview

runtime

runtime

Table of contents

Namespaces

• <internal\>
• Head
• RouterView
• RuntimeServer

Classes

• Application

Interfaces

• ApplicationCreater
• IAppComponentContext
• IAppRenderFn
• IAppRouteConfig
• IAppRouteConfigWithPrivateProps
• IApplication
• IApplicationCreaterBase
• IApplicationCreaterClientContext
• IApplicationCreaterServerContext
• IContext
• IHtmlTag
• IPageError
• IRouteComponentContext
• IRouteRecord
• IServerRendererOptions
• IViewClient
• IViewServer

Type aliases

• IAppComponent
• IAppData
• IAppState
• IApplicationCreaterContext
• IData
• IErrorHandler
• IHtmlAttrs
• IParams
• IQuery
• IRenderAppResult
• IRouteComponent
• IRuntimeConfig
• IRuntimeModule
• RuntimePluginInstance

Variables

• App
• Link
• errorModel

Functions

• Head
• RouterView
• createPlugin
• dynamic
• getAppData
• getErrorHandler
• getModelManager
• getPageData
• getRuntimeConfig
• matchPathname
• matchRoutes
• parseQuery
• rankRouteBranches
• useCurrentRoute
• useParams
• useRouter
• withRouter

Type aliases

IAppComponent

Ƭ IAppComponent<C, P>: C & { getInitialProps?: (context: IAppComponentContext) => P | Promise<P> }

Type parameters

Name	Type
C	C
P	{}

---

IAppData

Ƭ IAppData<Data, appState>: { appState?: appState ; pageData?: { [key: string]: any; } ; routeProps?: { [x: string]: any; } ; runtimeConfig?: Record<string, string> ; ssr: boolean } & { [K in keyof Data]: Data[K] }

Type parameters

Name	Type
Data	{}
appState	any

---

IAppState

Ƭ IAppState: Object

Type declaration

Name	Type
error?	IPageError

---

IApplicationCreaterContext

Ƭ IApplicationCreaterContext: IApplicationCreaterClientContext | IApplicationCreaterServerContext

---

IData

Ƭ IData: Object

Index signature

▪ [k: string]: string | number | boolean | undefined | null

---

IErrorHandler

Ƭ IErrorHandler: (errorCode?: SHUVI_ERROR_CODE | string, errorDesc?: string) => void

Type declaration

▸ (errorCode?, errorDesc?): void

Parameters

Name	Type
errorCode?	SHUVI_ERROR_CODE | string
errorDesc?	string

Returns

void

---

IHtmlAttrs

Ƭ IHtmlAttrs: { textContent?: string } & { [x: string]: string | number | undefined | boolean; }

---

IParams

Ƭ IParams: Record<string, string[] | string>

---

IQuery

Ƭ IQuery: ParsedQuery

---

IRenderAppResult

Ƭ IRenderAppResult<Data>: Object

Type parameters

Name	Type
Data	{}

Type declaration

Name	Type
appData?	Data
appHtml?	string
headBeginTags?	IHtmlTag[]
headEndTags?	IHtmlTag[]
htmlAttrs?	IHtmlAttrs
mainBeginTags?	IHtmlTag[]
mainEndTags?	IHtmlTag[]
redirect?	IRedirectState
scriptBeginTags?	IHtmlTag[]
scriptEndTags?	IHtmlTag[]

---

IRouteComponent

Ƭ IRouteComponent<C, P>: C & { getInitialProps?: (context: IRouteComponentContext) => P | Promise<P> }

Type parameters

Name	Type
C	C
P	{}

---

IRuntimeConfig

Ƭ IRuntimeConfig: Record<string, string>

---

IRuntimeModule

Ƭ IRuntimeModule: Object

Type declaration

Name	Type
dispose	IRuntimePluginConstructor["dispose"]
getAppComponent	IRuntimePluginConstructor["getAppComponent"]
getAppContext	IRuntimePluginConstructor["getAppContext"]
getRootAppComponent	IRuntimePluginConstructor["getRootAppComponent"]
init	IRuntimePluginConstructor["init"]

---

RuntimePluginInstance

Ƭ RuntimePluginInstance: IPluginInstance<BuiltinRuntimePluginHooks & CustomRuntimePluginHooks, void>

Variables

App

• App: unknown

The root app Component that user can modify

---

Link

• Const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>

The public API for rendering a history-aware <a>.

// jump to `/about`
<Link to="/about">About</Link>
// jump with query
<Link to="/about?sort=name">About</Link>
// with some state
<Link to="/about" state={{fromDashboard: true}}>About</Link>
// props `to` could be a object
<Link to={{
  pathname: "/about",
  search: "?sort=name",
  hash: "#the-hash",
}}>About</Link>
// props target '_self' | '_blank', default is '_self'
<Link to="/about" target="_self">About</Link>
// overrides default redirect mode by `replace`
<Link to="/about" replace>About</Link>
// if `onClick` function, run it first
<Link to="/about" onClick={fn}>About</Link>
// other props will be delivered to `<a>`
<Link to="/about" a='a' b='b'>About</Link> => <{...rest} a>

---

errorModel

• Const errorModel: Model

Functions

Head

▸ Head(__namedParameters): JSX.Element

This component injects elements to <head> of your page. To avoid duplicated tags in <head> you can use the key property, which will make sure every tag is only rendered once.

import { Head } from "@shuvi/runtime";

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
   </div>
 );
}

export default IndexPage;

Parameters

Name	Type
__namedParameters	Object
__namedParameters.children?	ReactNode

Returns

JSX.Element

---

RouterView

▸ RouterView(): React.ReactElement | null

Returns

React.ReactElement | null

---

createPlugin

▸ createPlugin(pluginHandlers, options?): IPluginInstance<{ dispose: AsyncParallelHook<void, void, void> ; getAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; getAppContext: AsyncSeriesWaterfallHook<IContext, void> ; getRootAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; init: AsyncParallelHook<void, void, void> } & CustomRuntimePluginHooks, void>

Parameters

Name	Type
pluginHandlers	Partial<IPluginHandlersFullMap<{ dispose: AsyncParallelHook<void, void, void> ; getAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; getAppContext: AsyncSeriesWaterfallHook<IContext, void> ; getRootAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; init: AsyncParallelHook<void, void, void> } & CustomRuntimePluginHooks, void>> & { setup?: Setup<CustomRuntimePluginHooks> }
options?	PluginOptions

Returns

IPluginInstance<{ dispose: AsyncParallelHook<void, void, void> ; getAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; getAppContext: AsyncSeriesWaterfallHook<IContext, void> ; getRootAppComponent: AsyncSeriesWaterfallHook<unknown, IContext> ; init: AsyncParallelHook<void, void, void> } & CustomRuntimePluginHooks, void>

---

dynamic

▸ dynamic<P>(dynamicOptions, options?): React.ComponentType<P>

ES2020 dynamic import() for JavaScript

Type parameters

Name	Type
P	{}

Parameters

Name	Type	Description
dynamicOptions	DynamicOptions<P> | Loader<P>	DynamicOptions | Loader
options?	DynamicOptions<P>	DynamicOptions

Returns

React.ComponentType<P>

React.ComponentType

---

getAppData

▸ getAppData(): IAppData

Returns

IAppData

---

getErrorHandler

▸ getErrorHandler(modelManager): Object

Parameters

Name	Type
modelManager	IModelManager

Returns

Object

Name	Type
errorHandler	IErrorHandler
reset	() => void

---

getModelManager

▸ getModelManager(initialState?): IModelManager

Parameters

Name	Type
initialState?	IAppState

Returns

IModelManager

---

getPageData

▸ getPageData<T>(key, defaultValue?): any

Type parameters

Name	Type
T	unknown

Parameters

Name	Type
key	string
defaultValue?	T

Returns

any

---

getRuntimeConfig

▸ getRuntimeConfig(): IRuntimeConfig

Returns

IRuntimeConfig

---

matchPathname

▸ matchPathname(pattern, pathname): IPathMatch | null

match pathname, online link https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJnMCo0SmCHGYBdyBsATSBUQBsAPABAwxsAHeGVJwuLlARA..#

Parameters

Name	Type
pattern	IPathPattern
pathname	string

Returns

IPathMatch | null

---

matchRoutes

▸ matchRoutes<T>(routes, location, basename?): IRouteMatch<T>[] | null

Type parameters

Name	Type
T	extends IRouteBaseObject<any, T>

Parameters

Name	Type
routes	T[]
location	string | PartialLocation<State>
basename?	string

Returns

IRouteMatch<T>[] | null

---

parseQuery

▸ parseQuery(queryStr): qs.ParsedQuery<string>

Parameters

Name	Type
queryStr	string

Returns

qs.ParsedQuery<string>

---

rankRouteBranches

▸ rankRouteBranches<T>(branches): T[]

Type parameters

Name	Type
T	extends [string, ...any[]]

Parameters

Name	Type
branches	T[]

Returns

T[]

---

useCurrentRoute

▸ useCurrentRoute(): "@shuvi/router/lib/index"

is just point router.current object

Returns

"@shuvi/router/lib/index"

---

useParams

▸ useParams(): IParams

Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the route path.

Returns

IParams

---

useRouter

▸ useRouter(): IRouter

Returns the current router object two parts, one is router behavior(browser history mode, hash history mode), another is router content

Returns

IRouter

---

withRouter

▸ withRouter<P>(ComposedComponent): IRouteComponent<React.ComponentType<ExcludeRouterProps<P>>, any>

withRouter is HOC, add property router to param ComposedComponent

Type parameters

Name	Type
P	extends WithRouterProps

Parameters

Name	Type	Description
ComposedComponent	IRouteComponent<ComponentType<P>, any>	IRouteComponent

Returns

IRouteComponent<React.ComponentType<ExcludeRouterProps<P>>, any>

<ComposedComponent router={useRouter()} {...props} />