Network Printer Manager

    @proact/core

    0.1.28 • Public • Published

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

    Install

    npm i @proact/core

    DownloadsWeekly Downloads

    23

    Version

    0.1.28

    License

    MIT

    Unpacked Size

    22.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • heec