Log in the node terminal from the browser
MIT License
Log in the node terminal from the browser
Open a playground online in StackBlitz
npm i -D vite-plugin-terminal
Add plugin to your vite.config.ts
:
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal()
]
}
In your source code import terminal
, and use it like you do with console.log
.
import { terminal } from 'virtual:terminal'
terminal.log('Hey terminal! A message from the browser')
The terminal log calls will be removed when building the app.
There are two ways of telling typescript about the types of the virtual import:
In your global.d.ts
file add the following line:
/// <reference types="vite-plugin-terminal/client" />
In your tsconfig.json
add the following to your compilerOptions.types
array:
{
// ...
"compilerOptions": {
// ...
"types": [
"vite-plugin-terminal/client"
],
},
}
Supported methods:
terminal.log(obj1 [, obj2, ..., objN])
terminal.info(obj1 [, obj2, ..., objN])
terminal.warn(obj1 [, obj2, ..., objN])
terminal.error(obj1 [, obj2, ..., objN])
terminal.assert(assertion, obj1 [, obj2, ..., objN])
terminal.group()
terminal.groupCollapsed()
terminal.groupEnd()
terminal.table(obj)
terminal.time(id)
terminal.timeLog(id, obj1 [, obj2, ..., objN])
terminal.timeEnd(id)
terminal.clear()
terminal.count(label)
terminal.countReset(label)
terminal.dir(obj)
terminal.dirxml(obj)
These methods will work but use the console
terminal.trace(...args: any[])
terminal.profile(...args: any[])
terminal.profileEnd(...args: any[])
console
logs to the terminalIf you want the standard console
logs to appear in the terminal, you can use the console: 'terminal'
option in your vite.config.ts
:
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal({
console: 'terminal'
})
]
}
In this case, you don't need to import the virtual terminal to use the plugin.
console.log('Hey terminal! A message from the browser')
You can also overwrite it in your index.html
head manually in case you would like more control.
<script type="module">
// Redirect console logs to the terminal
import terminal from 'virtual:terminal'
globalThis.console = terminal
</script>
Check the Console playground for a full example.
You can use the output
option to define where the terminal
logs should be logged. Accepts terminal
, console
, or an array with both.
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal({
output: ['terminal', 'console']
})
]
}
terminal
global in your app.console
Type: 'terminal' | undefined
Default: undefined
Set to 'terminal'
to make globalThis.console
equal to the terminal
object in your app.
output
Type: 'terminal' | 'console' | ['terminal', 'console']
Default: terminal
Define where the output for the logs.
strip
Type: boolean
Default: true
Strip terminal.*()
when bundling for production.
include
Type: String | RegExp | Array[...String|RegExp]
Default: /.+\.(js|ts|mjs|cjs|mts|cts)/
Example: include: '**/*.(mjs|js)',
A pattern, or array of patterns, which specify the files in the build the plugin should operate on when removing calls for production.
exclude
Type: String | RegExp | Array[...String|RegExp]
Default: []
Example: exlude: 'tests/**/*',
A pattern, or array of patterns, which specify the files in the build the plugin should ignore when removing calls for production.
MIT License © 2022-present Matias Capeletto