@erect/static NPM

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>`;
});

@types/parsimmon @types/cheerio cheerio parsimmon lodash classnames

@everything-registry/sub-chunk-295

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago