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...