@Proact/core

Proact is an template engine for node js which renders React like jsx functional components to static HTML or XML.

$3

- Optimized for fast server rendering
- Supports async rendered views
- Output caching
- Built-in express view engine

$3

``
npm install @proact/core
`

Basic usage

Rendering HTML

`
// templates/Paragraph.jsx
import Proact from '@proact/core'

export default (props, context) => (

{context.body}

)

`

`
// 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 (
xmlns="http://www.myorg.org/schemas/data/0.9"
m:xmlns="http://www.myorg.org/schemas/meta/0.9"
>

{context.category}

)
}
`

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

`

$3

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

$3

Proact supports only functional components. The component gets two parameters: props and context.

`
import Proact from '@proact/core'

export default (props, context) => (

{context.user.email}

)
`

Components can also be async.

`
import Proact from '@proact/core'

export default async function (props, context) {
const data = await getSomeDataAsync()
return (

{data.map(item =>
• {item}
)}

)
}
`

Insert HTML content

`
import Proact, { UnsafeHtml } from '@proact/core'

export default (props) => {
const { name } = props
return (

Hello ${name}

} />
)
}
`

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 (

{items.map((item) => (

• {item}

))}

)
}

const CachedList = () => {
return (
key={large-list}
// maxAge duration in seconds
maxAge={60}
content={() => }
/>
)
}

`

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 (

{post.title}

{post.abstract}

)
}

const RelatedPosts = async (props) => {
const { slug } = props
const posts = await db.getRelatedPosts(slug)
return posts.map(item => (

{item.title}

{item.abstract}

/blog/${slog}}>read more...



)
}

const BlogPost (props, context) {
const { slug } = context
return (
<>
key={post_${slug}}\
maxAge={360}
content={() => (

)}
/>
key={relatedposts_${slug}}
maxAge={60}
content={() => (

)}
/>

)
}
``