终端模式

如果你的library是js工具类库，那么通过js console输出你的library运行结果可能更合适便捷。

终端模式下，你的demo将放在沙箱中运行，以便捕获运行的console的输出内容。

沙箱性能

Sutras针对沙箱做了性能优化，包括：懒加载、块编译、LRU缓存等等。

demo的书写可以使用vue，也可以使用js/ts的形式，如果使用vue来书写，你可以通过docs标签设置更多可选项，详见书写

使用vue来书写

Terminal

(The console has no information to display)

<script setup lang="ts">

import {chunk} from 'lodash-es'

console.group('demo: chunk-2')
console.log(chunk(['a', 'b', 'c', 'd'], 2))
console.groupEnd()

console.group('demo: chunk-3')
console.log(chunk(['a', 'b', 'c', 'd'], 3))
console.groupEnd()

const result = chunk(['a', 'b', 'c', 'd'], 4)
console.groupCollapsed('demo: chunk-4')
console.log(result)
console.groupEnd()

console.assert(result.length === 2, `错误信息`)

</script>

使用js/ts来书写

默认启用终端模式

当你使用ts/js作为demo的入口文件时，Sutras将默认启用终端模式

Terminal

(The console has no information to display)

import {chunk} from 'lodash-es'

console.group('demo: chunk-2')
console.log(chunk(['a', 'b', 'c', 'd'], 2))
console.groupEnd()

console.group('demo: chunk-3')
console.log(chunk(['a', 'b', 'c', 'd'], 3))
console.groupEnd()

const result = chunk(['a', 'b', 'c', 'd'], 4)
console.groupCollapsed('demo: chunk-4')
console.log(result)
console.groupEnd()

console.assert(result.length === 2, `错误信息`)

终端模式需要通过配置开启，否则Sutras将默认采用界面模式的block状态来展示demo

为什么需要手动开启终端模式

目前Sutras暂时没有找到准确、合适的方法来推测：你的demo是否包含需要演示的界面。

如何开启

你可以通过Sutras全局配置 或 demo的独立配置开启界面模式，其中demo的独立配置优先级高于Sutras全局配置：

代码块折叠

如果不展示代码块，终端输出的内容会让人很难理解，不直观。所以Sutras在终端模式下默认展开代码块。 如果你的代码块篇幅较长，或出于其他原因，需要默认折叠代码块，需要同时设置选项defaultCodeCollapse: true。

通过全局配置

在你的文档目录下的.vitepress/config文件中：

import { defineConfig } from 'vitepress'
import { pluginVite } from '@sgwm-sutras/plugin'

defineConfig({
  vite: {
    plugins: [
      pluginVite({
        demo: {
          defaultPreviewMode: 'terminal',
          // 终端模式下，代码块默认是展开的，设置为true时，将折叠代码块：
          // defaultCodeCollapse: true 
        }
      })
    ]
  }
})

通过demo独立配置

在你的demo入口文件中：

<docs lang="md">
---
defaultPreviewMode: 'terminal'
<!-- 终端模式下，代码块默认是展开的，设置为true时，将折叠代码块：-->
<!-- defaultCodeCollapse: true -->
---
</docs>

支持的console调用

• console.warn
• console.info
• console.debug
• console.error
• console.log
• console.table
• console.group
• console.groupCollapsed
• console.groupEnd
• console.count
• console.countReset
• console.time
• console.timeLog
• console.timeEnd
• console.assert

Terminal

(The console has no information to display)

<script setup lang="ts">

console.group('group')
console.info('console.info')
console.debug('console.debug')
console.error('console.error')
console.log('console.log')
console.groupEnd()
console.groupCollapsed('default collapsed group')
console.info('console.info')
console.debug('console.debug')
console.error('console.error')
console.log('console.log')
console.warn('warning')
console.warn('warning')
console.groupEnd()

console.table([1, 2, 3])

console.count('counter')
console.count('counter')
console.countReset()
console.count('counter')

console.time('timer1')
console.time('timer2')
console.timeLog('timer1')
console.timeLog('timer1')
console.timeEnd('timer1')
console.timeLog('timer1')
console.timeLog('timer2')
console.timeEnd('timer2')
let val1 = 1
let val2 = 2
console.assert( val1 === val2, 'assert failed message')
</script>

支持的数据类型

Terminal

(The console has no information to display)

<script setup lang="ts">

const dom = document.createElement('div')
dom.style.color = 'red'
dom.dir = 'ltr'
dom.innerHTML = '<span>Hello<span>Sutras</span></span>'

const regExp = /script/

const emptyArray = new Array(99)
const promise = Promise.resolve()
const uint = new Uint8Array([312, 432, 5435])
const asyncFunction = async function asn(arg1, arg2, ...restArgs) {}

const value = {
  dom,
  nodeList: dom.childNodes,
  regExp,
  emptyArray,
  promise,
  uint,
  asyncFunction,
  *generator() {},
  arrowFunction: () => {
    alert
    window
  },
  getter: () => 12423543,
  buffer: new Uint8Array([312, 432, 5435]).buffer,
  dataView: new DataView(new Uint8Array([312, 432, 5435]).buffer),
  date: new Date(),
  [Symbol('aafe')]: [3124],
  set: new Set([2, 54, 65, [123], () => 2]),
  anyArray: [
    /script/,
    new WeakMap(),
    new Map([[45, [789, 89]]]),
    1,
    2,
    alert,
    [432, 53, 76, 23],
    { a: 34 }
  ],
  foo: { x: 245, y: 843 },
  year: 10,
  name: 'Sutras',
  b: 129n,
  err: new Error('this message error'),
  symbol: Symbol('a'),
  map: new Map([[45, [789, 89]]]),
  //@ts-ignore
  anyMap: new Map([
    [45, [789, 89]],
    ['user', { name: 'Shin' }],
  ]),
  weakMap: new WeakMap(),
  get lusa() {
    return this.year ** 2
  },
  matcher: /<script\s+>/,
  increment: function increment(value = 56) {
    this.year++
  },
  abort: new AbortController(),
}

console.log(value)

</script>