Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patak-dev/vite-plugin-terminal
Log in the node terminal from the browser
https://github.com/patak-dev/vite-plugin-terminal
Last synced: about 21 hours ago
JSON representation
Log in the node terminal from the browser
- Host: GitHub
- URL: https://github.com/patak-dev/vite-plugin-terminal
- Owner: patak-dev
- License: mit
- Created: 2022-01-20T10:50:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-11T08:14:12.000Z (6 months ago)
- Last Synced: 2024-10-30T02:36:07.942Z (15 days ago)
- Language: TypeScript
- Size: 1.02 MB
- Stars: 267
- Watchers: 4
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-terminal
[](https://www.npmjs.com/package/vite-plugin-terminal)
Log in the node terminal from the browser
[Open a playground online in StackBlitz](https://stackblitz.com/fork/github-bdbxen-madd1h?file=module.js&terminal=dev)
## Install
```bash
npm i -D vite-plugin-terminal
```
Add plugin to your `vite.config.ts`:
```ts
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal()
]
}
```
## Usage
In your source code import `terminal`, and use it like you do with `console.log`.
```ts
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.
## Types
There are two ways of telling typescript about the types of the virtual import:
- In your `global.d.ts` file add the following line:
```ts
///
```
- In your `tsconfig.json` add the following to your `compilerOptions.types` array:
```json
{
// ...
"compilerOptions": {
// ...
"types": [
"vite-plugin-terminal/client"
],
},
}
```
## API
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[])`
## Redirect `console` logs to the terminal
If you want the standard `console` logs to appear in the terminal, you can use the `console: 'terminal'` option in your `vite.config.ts`:
```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.
```ts
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.
```html
// Redirect console logs to the terminal
import terminal from 'virtual:terminal'
globalThis.console = terminal
```
Check the [Console playground](./playground/console) for a full example.
## Log in both the terminal and the console
You can use the `output` option to define where the `terminal` logs should be logged. Accepts `terminal`, `console`, or an array with both.
```ts
// vite.config.ts
import Terminal from 'vite-plugin-terminal'
export default {
plugins: [
Terminal({
output: ['terminal', 'console']
})
]
}
```
## Examples
- **[Basic](https://stackblitz.com/fork/github-bdbxen-madd1h?file=module.js&terminal=dev)** - Playground using every available method.
- **[Console](https://stackblitz.com/fork/github/patak-dev/vite-plugin-terminal/tree/main/playground/console)** - Redirect standard console logs to the terminal.
- **[Auto Import](https://stackblitz.com/fork/github-ejosid?file=main.ts&terminal=dev)** - Use [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) to make `terminal` global in your app.
- **[Vue](https://stackblitz.com/fork/github-gzl5vm?file=src%2FApp.vue&terminal=dev)** - Example of logging to the terminal from a Vue App.
## Options
### `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.
## Credits
- Original idea from [Domenic Elm](https://twitter.com/elmd_)
- Project setup from [@antfu's vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect)
- Bundling by [unbuild](https://github.com/unjs/unbuild)
- Strip functions during build uses [rollup-plugin-strip](https://github.com/rollup/plugins/tree/master/packages/strip)
## Sponsors
## License
[MIT](./LICENSE) License © 2022-present [Matias Capeletto](https://github.com/patak-dev)