A complete implementation of Sileo's native depictions in TypeScript.
$ npm i @parcility/kennelKennel was written to be as easy to interact with as possible.
render(depiction: any, options?: Partial<RenderOptions>): Promise<HTMLElement | string>
Render a depiction to either a HTMLElement or a string.
depiction: An object that stores the native depiction's contents.
options: The settings used for rendering.
options.ssr: Output a string instead of a DOM element.
options.defaultTintColor: The css color used for the tint.
options.backgroundColor: The css color used for the background.
options.ignoredViewNames: An array of view class names to ignore/not render.
options.linkForm: Link to a webpage to renderform-links.
options.linkHeaderless: Link to a webpage to renderdepiction-links.
options.proxyIframeUrl: The specific proxy url to use for iframe only.
options.proxyImageUrl: The specific proxy url to use for image only.
options.proxyVideoUrl: The specific proxy url to use for video only.
options.proxyUrl: The default proxy url to use for iframe, image or video.
hydrate(target?: ParentNode): void
Runs the hydrate function on views that need to be hydrate. Can only be ran on the client side.
target: The root element for hydration. Defaults todocument.body.
// Import Kennel
import { render, hydrate } from "@parcility/kennel";
// Assumes the `depiction` variables exists elsewhere. The second argument (options) can be omitted.
let output = await render(depiction, { ssr: true });
// sometime on the client.
hydrate();A full demo is available by running yarn dev.
Run the test page, which loads depictions from the test/ directory.
yarn devThis is not required if you installed Kennel through NPM.
1: Install dependencies
yarn install2: Build module
yarn build