Noble Programming Mantra
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    spike-preact-ssrpublic

    Spike Preact SSR

    npm tests dependencies coverage

    Easily render preact components to HTML

    Note: This project is in early development, and versioning is a little different. Read this for more details.

    Installation

    yarn add spike-preact-ssr

    Usage

    Let's say you have some preact components in a folder under assets/js/pages, like this:

    export default ({ foo }) => {
      return (<p>Hello there! Foo is {foo}</p>)
    }

    ...and you want to prerender these as HTML. You'd just add the plugin to spike, and tell it where your component(s) are, and how to map them to an output path as such:

    const path = require('path')
    const PreactSSR = require('spike-preact-ssr')
     
    module.exports = {
      // ...
      plugins: [
        new PreactSSR({
          pages: 'assets/js/pages/*.js', // globstar syntax optional
          props: { foo: 'bar' }, // props to pass to root component
          output: (relativePath) => path.basename(relativePath).replace(/\.js$/, '.html') // by default it will map to its current location and just replace .js with .html
        })
      ]
      // ...
    }

    That's it! Run spike, and you'll see some nice pretty html rendered out as you wanted. If you have interactive components, you can then run them from JS as well and it will work just like normal server side rendering.

    License & Contributing

    Keywords

    none

    install

    npm i spike-preact-ssr

    Downloadsweekly downloads

    2

    version

    0.1.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar