Rollup-plugin-pages NPM

rollup-plugin-pages

Generate pages for webapp

Installation

npm install --save-dev rollup-plugin-pages

Usage

// rollup.config.js
import resolve from 'rollup-plugin-resolve'
import postcss from 'rollup-plugin-postcss'
import pages from 'rollup-plugin-pages'

export default {
	input: 'src/**/*.page.js',
	output: {
		dir: 'dist',
		format: 'amd',
		sourcemap: true,
		chunkFileNames: '[name].js'
	},
	plugins: [
    resolve(),
    postcss(),
		pages({
			dir: 'src',
      template: 'src/**/*.html',
      assets: ['src/assets/**']
		})
	]
}

Options

dir

Directory of the files

Type: string

Default: .

getPageId

Get id of page by html path or script path for match the html and script page

Type: (path: string) => string

Default: defaultPageId

getTitle

Get the title of the Specified page

Type: (id: string, path: string, pkg: { [k: string]: any }) => string | string[]

Default: defaultPageTitle

data

The data to bind on the compiler of page template

Type: any

Default: {}

template

The file parttern of page templates

Type: string

Default: join(dir, '**/*.html')

Compile the html by ejs with Context:

type Node = {
  title: string
  isPage: boolean
  isCategory: boolean
  pages?: Node[]
  children?: Node[]
  data: any
  pkg: Package
  walkHierachy: (enter: (page:Node, i:number, level:number)=>void, enter: (page:Node, i:number, level:number)=>void)
} & ({
  isPage: true
  id: string
  category: string[]
  page: string
  main: string
  header: { html: ()=>string }[]
  body: { html: ()=>string }[]
})

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title><%-title%></title>
		<%- header.map(h=>h.html()).join("\n\t\t") %>
	</head>
	<body>
		<%- body.map(h=>h.html()).join("\n\t\t") %>
		<script type="module" src="<%=main%>"></script>
	</body>
</html>