Showcase

中文说明

Quickly load Vue, React components via command line.

Features

• Provide command line to quickly load Vue3 and React components running on the browser. No need to install any build tools and dependencies.
• Built-in esbuild support.
• Built-in styled-components as default css module support for react components.
• Use Puppeteer to provide automatic rendering capability to output images.
• Provides a flexible command line repl interface for event interaction.

Usage

• Study Vue and React without Build Tools.
• With command line parameters, generate images for automated UI testing.
• The command line REPL interface allows event interaction and output of result data, which can be used in the OJ (OnlineJudge) platforms.

The command lines

> npm i -g showcase-core;
> showcase --input app.vue;

Visit http://localhost:3000

Arguments

| args | type | details | | --- | --- | --- | | --input | string | The component to rendered | | --servedir | string | Http server root | | --client.output | string | Puppeteer's snapshot filename | | --client.repl | boolean | Enable REPL | | --client.events | string | Send events to puppeteer page | | --client.delay | number | Delay milliseconds before take snapshot |

NodeJS

Example

const Showcase = require('showcase-core');

const showcase = new Showcase({
  client: {
    output: './out.png',
    repl: true,
  },
  serverOptions: {
    servedir: 'test',
  },
});

showcase.showComponent({
  path: './test/my-component.jsx',
  open: true,
});

For Online Judger

Use REPL interface, for example:

//PREPEND BEGIN
const Showcase = require('showcase-core');

const content = `
//PREPEND END

//TEMPLATE BEGIN
//Add component code here...

//TEMPLATE END

//APPEND BEGIN
`.trim();

const showcase = new Showcase({
  silent: true,
  client: {
    repl: true,
  },
});

showcase.showComponent({
  content,
  open: true,
});
//APPEND END

In testcase files：

1.in

click button

1.out

The base64 image data...