Server side rendering for sham-ui
# npm
npm install --save-dev sham-ui-ssr
# yarn
yarn add -D sham-ui-ssr
- setup
- setup
- hydrate
- hydrate
- makeRestore
- makeRestore
- Component
- SSRRenderResult
- SSRToJSON
- SSRRenderResultSnapshot
- ssr
- RenderResultSnapshot
- RenderResult
- ToJSON
- ssrAndRehydrate
Main function for setup hydrating components
-
DI
Object App DI container
Main function for rehydrating
import { createDI, start } from 'sham-ui';
import setupUnsafe from 'sham-ui-unsafe';
import { setupRehydrator } from 'sham-ui-ssr/rehydrator';
const DI = createDI();
const data = JSON.parse( document.getElementById( 'data' ).innerText );
const disableRehydrating = setupRehydrator( DI, data );
mainInitializer( DI, root );
start( DI );
disableRehydrating();
setupUnsafe( DI );
Returns Function Restore function for disable rehydrating and switch to default behavior
Hydrate all components
-
DI
Object App DI container
import { createDI, start } from 'sham-ui';
import { setupHydrator, hydrate } from 'sham-ui-ssr/hydrator';
const DI = createDI();
const root = setupHydrator( DI );
mainInitializer( DI, root );
start( DI );
hydrate( DI ).then( storage => {
const { html, data } = storage.hydrate();
} )
Returns Promise
Hydrate node
Returns string
Save hooks & dom services for restore after rehydrating
-
DI
Object App DI container
Returns Function
Make restore function for hooks & dom
-
DI
Object App DI container
Returns Function
sham-ui component
Result of server side renderer
Type: Object
-
component
Component Rendered component instance -
html
string Rendered html -
data
string Data for component rehydrating -
toJSON
SSRToJSON Dump to JSON for jest's snapshot testing
Function for dump server side render result (using for jest-snapshots)
Type: Function
Returns SSRRenderResultSnapshot
Type: Object
Server side render for component
-
componentClass
Class<Component> Component class for rendering -
componentOptions
Object Options (optional, default{}
)
import Label from './Label.sht';
import { ssr } from 'sham-ui-ssr/testing';
it( 'renders correctly', () => {
const meta = ssr( Label );
expect( meta.component.ID ).toEqual( 'component' );
expect( meta.toJSON() ).toMatchSnapshot();
} );
Returns SSRRenderResult
Type: Object
Result of renderer
Type: Object
-
DI
Object App DI container -
component
Component Rendered component instance -
html
string SSR html string -
data
string Data for rehydrating -
toJSON
ToJSON Dump to JSON for jest's snapshot testing
Function for dump render result (using for jest-snapshots)
Type: Function
Returns RenderResultSnapshot
Render component with SSR & rehydrating
-
componentClass
Class<Component> Component class for rendering -
componentOptions
Object Options (optional, default{}
)
import Label from './Label.sht';
import { ssrAndRehydrate } from 'sham-ui-ssr/testing';
it( 'renders correctly', () => {
const meta = ssrAndRehydrate( Label );
expect( meta.component.ID ).toEqual( 'component' );
expect( meta.toJSON() ).toMatchSnapshot();
} );
Returns RenderResult