@erect/static
v0.0.98
Published
A simple render implementation that renders html static pages on Erect
Downloads
47
Readme
Erect Static
Enables Erect to render static html pages, it's particularly simple to render any template engine - as long as it can render in both Node and browser.
Usage
Basic
import '@erect/static';
import { mount } from '@erect/core';
mount(module, req => {
return req.renderStatic(`
<head>
<title>Hello World</title>
</head>
<h1>Hello World</h1>
`);
});
With elements
# ./shared/app.ts
import '@erect/static';
import { mount } from '@erect/core';
mount(module, (req) => {
return req.renderStatic(req.html `
${Header({ title: 'Hello World' })}
<p>Go ${Link({ href: '/about' }) `Home`}</p>
`);
});
# ./shared/elements/Link.ts
import { element, attributes } from '@erect/static';
export interface LinkProps {
button: boolean;
href: string;
target: string;
'class': string;
style: string;
children: string;
}
export const Link = element<LinkProps>((req, props) => {
const {
children,
button = false,
...rest,
} = props;
const attr = attributes(rest);
if (button) {
attr.addClass('my-button');
attr.addStyle({ backgroundColor: 'transparent' });
}
return req.html(([ a ]) => {
a.addEventListener('click', (e) => {
e.preventDefault();
req.app.pushState(e.getAttribute('href'));
});
}) `
<a${attr}>${children}</a>
`;
});
# ./shared/elements/Indexts
import { element, attributes } from '@erect/static';
export interface HeaderProps {
title: string;
headline?: string;
children: string;
[attr: string]: any;
}
export const Header = element<HeaderProps>((req, props) => {
const {
children,
button = false,
...rest,
} = props;
const attr = attributes()
.combine({
class: 'top-nav',
style: {
fontSize: '12px',
},
})
.combine(rest);
return req.html `
<head>
<title>${title}</title>
</head>
<header${attr}>
<h1>${title}</h1>
${headline ? req.html `<h4>${headline}</h4>` : ''}
</header>
`;
});
How it works
The module extends Erect's RenderRequests class adding two new methods
req.renderStatic(html: string)
It renders the html string to the app body, if a head is present, the head
elements are pushed to the app's DocumentState
req.html(strings: TemplateStringsArray, ...substitutions: any[]): string
Parses multiple html strings and append heads to the app's DocumentState
Example
req.renderStatic(
req.html `
<head>
<title>Hello World</title>
</head>
<h1>Hello World</h1>
${req.html `
<head>
<style>.body { background-color: #f0f0f0 }</style>
</head>
<p>Another html with it's own head</p>
`}
`,
);req.html(handler: (rootElements: HTMLElement[], rootNodes: Node[]) => void)): ((strings: TemplateStringsArray, ...substitutions: any[]) => string)
The same as above, with the exception that you can pass a handler to catch rendered root elements after mounting on browser.
Example
req.renderStatic(
req.html(([ div, p1, p2 ]) => {
const link = <HTMLElement>div.firstElementChild;
link.addEventListener('click', () => {
alert('clicked');
return false;
});
p1.style.backgroundColor = 'red';
p2.style.backgroundColor = 'green';
}) `
<head>
<title>Hello World</title>
</head>
<div>
<a href="">click here</a>
</div>
<p>First paragraph</p>
<p>Second paragraph</p>
`,
);element
Creates a template element / partial
Example
export interface CodeProps {
children: string;
}
export const Code = element<CodeProps>((req, props) => {
return req.html `<pre><code>${props.children}</code></pre>`;
});