Builds Edelweiss templates on a server.
There is still a need to create web pages as in "good old days" 🙂.
This package is bundled as ES modules, so it can not be required. If you organize your code as CommonJS modules, then you should transpile this package as well.
npm i @prostory/edelweiss-ssrAnd then import it to your server's entry point.
import '@prostory/edelweiss-ssr';
// Useful code.You should import SSR package before main
@prostory/edelweiss.
The main goal of this package is to setup DOM environment on server. So, mostly you will just need to import package.
// Now DOM context for server is created.
import '@prostory/edelweiss-ssr';With renderToString function from @prostory/edelweiss, you can create static HTML.
import '@prostory/edelweiss-ssr';
import { html, renderToString } from '@prostory/edelweiss';
// You should always include DOCTYPE declaration.
const htmlLayout = (content: string): string => `
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
${content}
</body>
</html>
`;
const template = html`<p>Hello world!</p>`;
const page = htmlLayout(renderToString(template));
// And you can send page to client or write to disk, or do with this variable what you want.Also if you want to mimic browser's behavior, the package exports two functions:
-
layout- used to create basic DOM structure in globaldocumentobject.interface LayoutOptions { isPath?: boolean; sanitize?: (html: string) => string; } function layout(value: string, options?: LayoutOptions): void;
This function can accept HTML layout as
string(like htmlLayout function defined above) or path to.htmlfile, that contains basic page structure.By default, value means to be HTML string. If you want to pass a path to the file, then you should provide a second parameter with isPath property as
true.Note, that HTML passed to
layoutare not sanitized by default. If you do not trust source of value, then you can sanitize it by providing sanitize property function as second parameter.import { layout } from '@prostory/edelweiss-ssr'; import { html, render } from '@prostory/edelweiss'; const basicLayout = ` <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> </head> <body></body> </html> `; // layout function need to be called only once. layout(basicLayout); const template = html`<p>Hello world!</p>`; // Render paragraph with Hello world to server's DOM. render(document.body, template);
-
page- returns the whole current DOM as a string. So given above example, we can get stringified page's HTML as:import { page, layout } from '@prostory/edelweiss-ssr'; // ... const stringifiedPage = page(); // This variable will hold: // ` // <!DOCTYPE html> // <html land="en"> // <head> // <title>Title</title> // </head> // <body><p>Hello world!</p></body> // </html>`
Have fun ✌️