❤
npm
Sign UpSign In

rollup-plugin-sample
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

rollup-plugin-sample

Appveyor Version Downloads

Build sample pages for UI components

Installation

npm install --save-dev rollup-plugin-sample

Usage

// rollup.config.js
import sample from 'rollup-plugin-sample'
import resolve from 'rollup-plugin-resolve'
import postcss from 'rollup-plugin-postcss'
 
export default {
    input: 'index.js',
    output: {
        file: 'dist/bundle.js'
    },
    plugins: [
        resolve(),
        sample({
            sampleDir: 'samples',
            sampleDist: 'samples',
            sampleScript: '**/*.spl.js',
            sampleTitle(id, title) {
                return `Test - ${title || 'Examples'}`
            },
            statics: [{ path: 'node_modules', mount: 'node_modules' }],
            compile: {
                plugins: [resolve(), postcss()]
            }
        })
    ]
}

Options

sampleDir

Directory of the sample source file

Type: string

Example:

Default: samples

sampleDist

The path relative to the $outputDir to output the generated files file, generate sample files to disk: $outputDir/examples and server $url/examples

Type: string

Default: samples

sampleHtml

The sample html file pattern

Type: string

Default: **/*.html

Compile the sample html by ejs with Context:

{
  file: string
  title: string
  name: string
  data: any
  scripts: Tag[]
  styles: Tag[]
  links: Tag[]
  metas: Tag[]
  scriptTags: (ident: string) => string[]
  styleTags: (ident: string) => string[]
  linkTags: (ident: string) => string[]
  metaTags: (ident: string) => string[]
}

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><%-title%></title>
        <%- styleTags("\t\t") %>
    </head>
    <body>
        <h1 style="text-align: center;"><%-title%></h1>
 
        <%- scriptTags("\t\t") %>
    </body>
</html>

sampleScript

The sample script file pattern

Default: **/*.spl.js

sampleTitle

The title of sample page or index page

Type: string | (sampleName, sampleId) => string

Example: sample({ sampleTitle: "Sample" })

Example: sample({ sampleTitle: (title, file)=> "Samples" + (title ? " - " + title:"") })

Default: $sampleName

sampleTemplate

The default html template of sample pages

Type: string | (context) => string

Default: node_modules/rollup-plugin-sample/src/sampleTemplate.html

The Template Context:

{
  file: string
  title: string
  name: string
  data: any
  scripts: Tag[]
  styles: Tag[]
  links: Tag[]
  metas: Tag[]
  scriptTags: (ident: string) => string[]
  styleTags: (ident: string) => string[]
  linkTags: (ident: string) => string[]
  metaTags: (ident: string) => string[]
}

indexTemplate

The index page html template

Type: string | (context) => string

Default: node_modules/rollup-plugin-sample/src/indexTemplate.html

The Template Context:

{
  file: string
  title: string // default: "Samples"
  data: any
  samples: {
    category: string
    samples: {
      title: string
      name: string
      file: string
      category: string
    }[]
  }[]
  scripts: Tag[]
  styles: Tag[]
  links: Tag[]
  metas: Tag[]
  scriptTags: (ident: string) => string[]
  styleTags: (ident: string) => string[]
  linkTags: (ident: string) => string[]
  metaTags: (ident: string) => string[]
}

sampleData

The user data for compile html by ejs

Default: {}

compile

The rollup options for compiling sample scripts

Type:

Omit<RollupOptions, 'input' | 'output'> & {
  output?: Omit<OutputOptions, 'file' | 'dir'> & {
    name?: string | ((sampleVarName: string, sampleId: string) => string)
  }
}

Example:

sample({
    compile: {
        plugins: [nodeResolve(), commonJs(), postCss()],
        output: {
            format: 'iife',
            name: 'Sample'
        }
    }
})

Default:

{
    plugins: [],
    output: {
        format: "umd",
        name: $sampleName,
        sourcemap: $output.sourcemap
    }
}

watch

Watch the sample files

Type: boolean

Default: false

write

Write the generated files to $outputDir/$sampleDist

Type: boolean

Default: true

server

Start the dev server

Type: boolean

Default: true

host

The host the server should listen on

Type: string

Default: "0.0.0.0"

port

The port the server should listen on

Type: number

Default: 8080

publicPath

Prefix all served files with a base path - e.g. serve from /static instead of /

Type: string

Default: ""

statics

Directories to serve static files from

Type: (string | {path: string, mount: string})[]

Example: sample({ statics: ["node_modules", {path: "test", mount: "."}] })

Default: []

Test

$ npm run test -- -w

Browser access : http://localhost:8080

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i rollup-plugin-sample

Repository

github.com/billowz/rollup-plugin-sample

Homepage

github.com/billowz/rollup-plugin-sample#readme

Weekly Downloads

1

Version

0.1.4

License

MIT

Unpacked Size

33.3 kB

Total Files

13

Last publish

Collaborators

  • billowz
Try on RunKit
Report malware