glorious demo

glorious demo

展示您的代码中的最简单方法。

安装

npm install @glorious/demo --save

基本用法

 < link rel =\" stylesheet \" href =\" node_modules/@glorious/demo/dist/gdemo.min.css \" >
< script src =\" node_modules/@glorious/demo/dist/gdemo.min.js \" > </ script >

注意：如果您不喜欢包装管理，请从第三方CDN提供商中加载它。

 // Constructor receives a selector that indicates
// where to inject the demonstration in your page.
const demo = new GDemo ( \'#container\' ) ;

const code = `
function greet(){
  console.log(\"Hello World!\");
}

greet();
`

demo
  . openApp ( \'editor\' , { minHeight : \'350px\' , windowTitle : \'demo.js\' } )
  . write ( code , { onCompleteDelay : 1500 } )
  . openApp ( \'terminal\' , { minHeight : \'350px\' , promptString : \'$\' } )
  . command ( \'node ./demo\' , { onCompleteDelay : 500 } )
  . respond ( \'Hello World!\' )
  . command ( \'\' )
  . end ( ) ;

注意：请检查此处以了解如何使用Prism突出显示代码。

API

OpenApp

打开或最大化开放式应用程序。

 /*
** @applicationType : String [required]
** @options : Object [optional]
*/

// Possible values are \'editor\' or \'terminal\'
const applicationType = \'terminal\' ;

const openAppOptions = {
  minHeight : \'350px\' ,
  windowTitle : \'bash\' ,
  id : \'someId\' , // Identifies an application, in case of multiple instances
  inanimate : true , // Turns off application\'s window animation
  promptString : \'~/my-project $\' , // For \'terminal\' applications only
  initialContent : \'Some text\' , // For \'editor\' applications only
  onCompleteDelay : 1000 // Delay before executing the next method
}

demo . openApp ( applicationType , openAppOptions ) . end ( ) ; 

写

在“开放编辑器”应用程序中写入一些代码。

 /*
** @codeSample : String [required]
** @options : Object [optional]
*/

// Tabs and line breaks will be preserved
const codeSample = `
function sum(a, b) {
  return a + b;
}

sum();
` ;

const writeOptions = {
  id : \'someId\' , // Identifies an application, in case of multiple instances
  onCompleteDelay : 500 // Delay before executing the next method
}

demo . openApp ( \'editor\' ) . write ( codeSample , writeOptions ) . end ( ) ; 

命令

在开放终端应用程序中写入一些命令。

 /*
** @command : String [required]
** @options : Object [optional]
*/

const command = \'npm install @glorious/demo --save\' ;

// Redefines prompt string for this and following commands
const promptString = \'$\'

// Can optionally be an HTML string:
const promptString = \'<span class=\"my-custom-class\">$</span>\'

const commandOptions = {
  id : \'someId\' , // Identifies an application, in case of multiple instances
  promptString , // Sets a custom string. Default: ~/demo $
  onCompleteDelay : 500 // Delay before executing the next method
}

demo . openApp ( \'terminal\' ) . command ( command , commandOptions ) . end ( ) ; 

回应

在开放终端应用程序上显示了一些响应。

 /*
** @response : String [required]
** @options : Object [optional]
*/

// Line breaks will be preserved
const response = `
+ @glorious/demo successfully installed!
+ v0.1.0
` ;

// Can optionally be an HTML string:
const response = `
<div><span class=\"my-custom-class\">+</span> @glorious/demo successfully installed!</div>
<div><span class=\"my-custom-class\">+</span> v0.6.0</div>
` ;

const respondOptions = {
  id : \'someId\' , // Identifies an application, in case of multiple instances
  onCompleteDelay : 500 // Delay before executing the next method
}

demo . openApp ( \'terminal\' ) . respond ( response , respondOptions ) . end ( ) ; 

结尾

指示演示的结束。如果您想在演示结束时执行一些操作，该方法将返回承诺。

 demo . openApp ( \'terminal\' )
    . command ( \'node demo\' )
    . respond ( \'Hello World!\' )
    . end ( )
    . then ( ( ) => {
      // Custom code to be performed at the end of the demostration goes here.
    } ) ;

重要的是：不要忘记在演示结束时调用它。否则，演示将不会播放。

贡献

1. 安装节点。下载“针对大多数用户的推荐”版本。

2. 克隆回购：

git clone git@github.com:glorious-codes/glorious-demo.git

3. 转到项目目录：

 cd glorious-demo

4. 安装项目依赖性：

npm install

5. 建立项目：

npm run build

测试

确保您添加的所有代码都涵盖了单位测试：

npm run test -- --coverage