vue-console-feed


This is the plugin that is almost identical to the console-feed but for Vue. This plugin moves closer to Console Chrome Devtools than console-feed

> Demo from Stackbliz

This plugin release!

Preview

!Preview

Installation

pnpm, yarn, npm:

``bash
pnpm add vue-console-feed
`

or with CDN:

`html


`

To be on

- [x] basic type value (string, number, bigint, symbol, null, undefined) full support
- [x] error full support
- [x] object full support
- [x] array full support
- [x] Map, Set, WeakMap, WeakSet full support
- [x] function, function full full support
- [x] function async
- [x] function star, prop
- [x] regexp full support
- [x] element, DOM full support
- [x] Promise limit
- [x] console.table
- [x] console.warn
- [x] console.info
- [x] console.error
- [x] console.count
- [x] console.group
- [x] Date
- [x] Buffer
- [x] TypedArray
- [x] DataView
- [x] address http in string and Error
- [x] Location link

DataAPI

- [x] console.log
- [x] console.warn
- [x] console.info
- [x] console.debug
- [x] console.error
- [x] console.table
- [x] console.group
- [x] console.groupEnd
- [x] console.count
- [x] console.countReset
- [x] console.time
- [x] console.timeLog
- [x] console.timeEnd
- [x] console.clear

Usage

$3

`vue



`

$3

| Option | Type | Required | Description |
| --------------------- | ------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------- |
| type | "warn" \| "info" \| "debug" \| "error" \| "output" \| "log" | false | determine the console type corresponding to the methods data.warn, console.info, data.debug, data.error |
| data | ReturnType | true | determine the type corresponding to the methods Encode |
| _getListLinkAsync | Promisy<_getListLink> | false | This is the promise function of _getListLink |
| readLinkObjectAsync | Promisy | false | This is the promise function of readLinkObject |

#### Example and Promise API

`vue



`

You have custom API fetch lazy data

> Options _getListLinkAsync and readLinkObjectAsync is the port of the functions corresponding to it. useful when you work with iframe.

> In it _getListLinkAsync is the promise function of _getListLink and readLinkObjectAsync is the promise function of readLinkObject.

`vue



`

$3

| Option | Type | Required | Description |
| --------------------- | -------------------------- | -------- | ------------------------------------------------------- |
| data | ReturnType | true | determine the type corresponding to the methods Table |
| _getListLinkAsync | Promisy<_getListLink> | false | This is the promise function of _getListLink |
| readLinkObjectAsync | Promisy | false | This is the promise function of readLinkObject |

#### Example and Promise API

`vue



`

You have custom API fetch lazy data

> Options _getListLinkAsync and readLinkObjectAsync is the port of the functions corresponding to it. useful when you work with iframe.

> In it _getListLinkAsync is the promise function of _getListLink and readLinkObjectAsync is the promise function of readLinkObject.

`vue



`

$3

#### Encode(value: unknown, firstCall: boolean, linkFn: boolean)

Encrypt the values for use on the components (the result of this function is a pure object so you can use JSON.stringify, send fetch or postMessage it which remains safe for data.
Option | Type | Required | Description
------ | ---- | -------- | ------------
value | unknown | true | value for encryption. accept all kinds of values like data.log
firstCall | boolean | true | Is this your root data? If you don't care about it, always set it to true.
linkFn | boolean | true | Is this link object? If you don't care about it, always set it to true.

`ts
function Encode(
value: unknown,
firstCall?: boolean,
linkFn?: boolean
):
| Data.String
| Data.Number
| Data.BigInt
| Data.Symbol
| Data.Function
| Data.Collection
| Data.RegExp
| Data.Nill
| Data.Record
| Data.Error
| Data.Array
| Data.Element
| Data.Promise
| Data.Date
| Data.TypedArray
| Data.Buffer
| Data.DataView
`

#### Table(value: object)

Encrypt the values for use on the components (the result of this function is a pure object so you can use JSON.stringify, send fetch or postMessage it which remains safe for data.
Option | Type | Required | Description
----- | ----- | ----- | -----------
value | like object | true | It could be anything in the form of an object to encrypt.

`ts
function Table(value: object): {
table: Record>;
cols: string[];
}
`

#### readLinkObject(link: Data.Link), \_getListLink(link: Data.Link)

These are the system functions for communication between different environments. (Exm: fetch, postMessage)
If you don't use other environments, you should ignore this.

`ts
function readLinkObject(link: Data.Link): Data.String | Data.Number | Data.BigInt | Data.Symbol | Data.Nill | Data.Function | Data.Collection | Data.Record | ... 8 more ... | Data.DataView
function _getListLink(link: Data.Link): (ReturnType | Data.Error)[]
`

#### clearLinkStore()

This is the memory release function. while you call the Encode functions, there will be some object in object, but the objects in are not immediately used so Encode will not analyze it but create a link by clicking on object in object that the _getLinkObject function will work to parse it

Usage with IFrame

Console.vue
`vue



`

Embed this script to iframe
`ts
/ eslint-disable @typescript-eslint/no-explicit-any /
import type { DataAPI } from "vue-console-feed/data-api"
import { printfArgs } from "vue-console-feed/data-api"
import type { Data } from "vue-console-feed/encode"
import {
_getListLink,
callFnLink,
clearLinkStore,
Encode,
readLinkObject
} from "vue-console-feed/encode"
import { Table } from "vue-console-feed/table"

export type Methods = Exclude
export interface MessageConsoleTable {
type: "console"
name: "table"
args: [ReturnType]
}
export interface MessageConsoleEncode {
type: "console"
name: Methods
args: ReturnType[] | [string]
}

export type MessageAPI =
| {
type: "getListLink"
id: string
result: ReturnType
}
| {
type: "readLinkObject"
id: string
result: ReturnType
}
| {
type: "callFnLink"
id: string
result: ReturnType
}

function postMessageToParent(
message: MessageConsoleEncode | MessageConsoleTable | MessageAPI
) {
parent.postMessage(message, {
targetOrigin: "*"
})
}

// ===== console API ======
/**
*
clear(): void;
*/
;(["log", "warn", "info", "debug", "error"] as Methods[]).forEach((name) => {
const cbRoot = (console as unknown as any)[name]
// eslint-disable-next-line functional/functional-parameters
;(console as unknown as any)[name] = function (...args: unknown[]) {
postMessageToParent({
type: "console",
name,
args: printfArgs(args).map((item: unknown) => Encode(item, 2))
})

cbRoot.apply(this, args)
}
})
const { table } = console
console.table = function (value: unknown) {
if (value !== null && typeof value === "object")
postMessageToParent({
type: "console",
name: "table",
args: [Table(value, 1)]
})
else
postMessageToParent({
type: "console",
name: "log",
args: [Encode(value, 1)]
})
return table.call(this, value)
}
;(["group", "groupEnd"] as Methods[]).forEach((name) => {
const cbRoot = (console as unknown as any)[name]
;(console as unknown as any)[name] = function (value?: unknown) {
postMessageToParent({
type: "console",
name,
args: value !== undefined ? [Encode(value, 1)] : []
})

cbRoot.call(this, value)
}
})
;(["count", "countReset", "time", "timeLog", "timeEnd"] as Methods[]).forEach(
(name) => {
const cbRoot = (console as unknown as any)[name]
;(console as unknown as any)[name] = function (value?: unknown) {
postMessageToParent({
type: "console",
name,
args: value !== undefined ? [Encode(value + "", 1)] : []
})

cbRoot.call(this, value)
}
}
)
const { clear } = console
console.clear = function () {
postMessageToParent({
type: "console",
name: "clear",
args: []
})

clear.call(this)
}
// ========================

// ===== error globals ====
addEventListener("error", (event) => {
postMessageToParent({
type: "console",
name: "error",
args: [Encode(event.error, 1)]
})
})
// ========================

// ====== API Async ======
window.addEventListener(
"message",
(
event: MessageEvent<{
id: string
type: MessageAPI["type"]
link: Data.Link
}>
) => {
switch (event.data.type) {
case "getListLink":
postMessageToParent({
type: "getListLink",
id: event.data.id,
result: _getListLink(event.data.link)
})
break
case "readLinkObject":
postMessageToParent({
type: "readLinkObject",
id: event.data.id,
result: readLinkObject(event.data.link)
})
break
case "callFnLink":
postMessageToParent({
type: "callFnLink",
id: event.data.id,
result: callFnLink(event.data.link)
})
break
}

// id, result
}
)
window.addEventListener(
"message",
(event: MessageEvent<{ type: "clearConsole" }>) => {
if (event.data.type === "clearConsole") {
console.clear()
clearLinkStore()
}
}
)
// =======================
``