npm package: @proact/core
Description: Proact is an template engine for node js which renders React like jsx functional components to static HTML or XML.
Latest version: 0.1.28

# @Proact/core

Proact is an template engine for node js which renders React like jsx functional components to static HTML or XML.

### Features

- Optimized for fast server rendering
- Supports async rendered views
- Output caching
- Built-in express view engine

### install

```
npm install @proact/core
```

## Basic usage

Rendering HTML

```
// templates/Paragraph.jsx
import Proact from '@proact/core'

export default (props, context) => (
  <p>{context.body}</p>
)

```

```
// index.js
const Proact = require('@proact/core')

const renderer = Proact.createRenderer({ views: 'templates' })

renderer
  .renderToString('Paragraph.jsx', { body: 'lorem ipsum' })
  .then(function (html) {
    console.log(html)
  })

```

Rendering XML

```
// templates/data.jsx
import Proact from '@proact/core'

export default async (props, context) => {
  return (
    <data
      xmlns="http://www.myorg.org/schemas/data/0.9"
      m:xmlns="http://www.myorg.org/schemas/meta/0.9"
    >
      <title>{context.title}</title>
      <m:category>{context.category}</m:category>
    </data>
  )
}
```

```
// index.js
const Proact = require('@proact/core')

// set docType to xml
const renderer = Proact.createRenderer({
  views: 'templates',
  docType: 'xml',
})

renderer
  .renderToString('data.jsx', {
    title: 'lorem ipsum',
    category: 'dolor',
  })
  .then(function (xml) {
    console.log(xml)
  })

```

### Built-in express view engine

```
// server.js
const express = require('express')
const Proact = require('@proact/core')

const PORT = 3100
const app = express()

Proact.initializeViewEngine(app, { views: 'views' })

app.get('/', (req, res) => {
  const context = { title: 'Basic Example' }
  res.render('index', context)
})

app.listen(PORT, function () {
  console.log(`server running at http://localhost:${PORT}`)
})
```

### JSX Views

Proact supports only functional components. The component gets two parameters: `props` and `context`.

```
import Proact from '@proact/core'

export default (props, context) => (
  <div>{context.user.email}</div>
)
```

Components can also be async.

```
import Proact from '@proact/core'

export default async function (props, context) {
  const data = await getSomeDataAsync()
  return (
    <ul>
      {data.map(item => <li>{item}</li>)}
    </ul>
  )
}
```

Insert HTML content

```
import Proact, { UnsafeHtml } from '@proact/core'

export default (props) => {
  const { name } = props
  return (
    <UnsafeHtml html={`<h1>Hello ${name}</h1>`} />
  )
}
```

Use content cache

```
import Proact, { Cache } from '@proact/core'

const getItems = function (numberOfItems) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        Array(numberOfItems)
          .fill()
          .map(() => 'Lorem ipsum dolor sit amet')
      )
    }, 500)
  })
}

const List = async (props) => {
  const items = await getItems(props.numberOfItems)
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  )
}

const CachedList = () => {
  return (
    <Cache
      key={`large-list`}
      // maxAge duration in seconds
      maxAge={60}
      content={() => <List numberOfItems={1000} />}
    />
  )
}

```

Short example

```
import Proact, { Cache, UnsafeHtml } from '@proact/core'
import MarkdownIt from 'markdown-it'
import db from '../db'

const markdown = new MarkdownIt()

const Post = async (props) => {
  const { slug } = props
  const post = await db.getPostBySlug(slug)
  const content = markdown.render(post.content)
  return (
    <section>
      <h1>{post.title}<h1>
      <h1>{post.abstract}<h1>
      <UnsafeHtml html={content} preserveWhitespaces />
    </section>
  )
}

const RelatedPosts = async (props) => {
  const { slug } = props
  const posts = await db.getRelatedPosts(slug)
  return posts.map(item => (
    <article>
      <h3>{item.title}</h3>
      <p>{item.abstract}</p>
      <a href={`/blog/${slog}`}>read more...</a>
    </article>
  )
}

const BlogPost (props, context) {
  const { slug } = context
  return (
    <>
      <Cache
        key={`post_${slug}`}\
        maxAge={360}
        content={() => (
          <Post slug={slug} />
        )}
      />
      <Cache
        key={`relatedposts_${slug}`}
        maxAge={60}
        content={() => (
          <RelatedPosts slug={slug} />
        )}
      />
    </>
  )
}
```