@moyarich/console-core 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -2
- package/dist/index.cjs +702 -0
- package/dist/index.d.cts +648 -0
- package/dist/index.d.ts +648 -0
- package/dist/index.js +702 -0
- package/package.json +58 -4
package/README.md
CHANGED
|
@@ -1,3 +1,114 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @moyarich/console
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A React console toolkit for **capturing and displaying runtime output**.
|
|
4
|
+
|
|
5
|
+
Bring browser-style `console.*` messages, inspectable JavaScript values, and ANSI-formatted process output into your application. Console works well in code playgrounds, developer tools, embedded previews, and applications connected to remote runtimes.
|
|
6
|
+
|
|
7
|
+
[Documentation and live examples](https://moyarich.github.io/console/)
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Structured messages:** Render familiar console levels and inspect JavaScript values.
|
|
12
|
+
- **Process output:** Display ANSI-formatted `stdout` and `stderr`.
|
|
13
|
+
- **Flexible capture:** Work with React state, runtime proxies, iframes, and remote message sources.
|
|
14
|
+
- **Customizable UI:** Extend rendering, appearance, and interactions with optional addons.
|
|
15
|
+
- **Large logs:** Opt into virtualized rendering when displaying high-volume output.
|
|
16
|
+
|
|
17
|
+
Console handles presentation and message transport; your application remains in control of runtime execution and lifecycle.
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @moyarich/console
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Requires React 18 or newer. If your application does not already include React, install it too:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install react react-dom
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
The package includes TypeScript declarations and loads its core stylesheet automatically.
|
|
32
|
+
|
|
33
|
+
### GitHub Packages setup
|
|
34
|
+
|
|
35
|
+
For installations from GitHub Packages, configure the scope and authenticate with a GitHub personal access token that has `read:packages` access:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm config set @moyarich:registry https://npm.pkg.github.com
|
|
39
|
+
npm login --scope=@moyarich --registry=https://npm.pkg.github.com
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Quick start
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { Console, useConsoleMessages } from "@moyarich/console";
|
|
46
|
+
|
|
47
|
+
export function AppConsole() {
|
|
48
|
+
const { messages, console, clear } = useConsoleMessages();
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<>
|
|
52
|
+
<button onClick={() => console.log("Hello", { ready: true })}>
|
|
53
|
+
Add message
|
|
54
|
+
</button>
|
|
55
|
+
<Console messages={messages} onClear={clear} />
|
|
56
|
+
</>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Use the console-compatible producer from event handlers or runtime callbacks to add messages, and `<Console />` to display them.
|
|
62
|
+
|
|
63
|
+
## Explore
|
|
64
|
+
|
|
65
|
+
**[Interactive playground and documentation](https://moyarich.github.io/console/)** — browse runnable examples, API reference, rendering modes, customization, and addons.
|
|
66
|
+
|
|
67
|
+
- [Console examples and guides](packages/console/examples/page.mdx)
|
|
68
|
+
- [High-volume output accessibility](packages/console/examples/36-high-volume-accessibility/page.mdx)
|
|
69
|
+
- [Virtualized output guide](packages/console/examples/38-virtualization/page.mdx)
|
|
70
|
+
- [Console lifecycle callback contracts](docs/console-lifecycle.md)
|
|
71
|
+
|
|
72
|
+
## Packages and addons
|
|
73
|
+
|
|
74
|
+
Console is a family of independently installable packages. Start with `@moyarich/console`, then add only the capabilities your application needs.
|
|
75
|
+
|
|
76
|
+
| Package | What it provides |
|
|
77
|
+
| ---------------------------------------------- | ----------------------------------------------------------- |
|
|
78
|
+
| `@moyarich/console` | React console UI for structured messages and process output |
|
|
79
|
+
| `@moyarich/console-core` | Shared contracts for building and integrating addons |
|
|
80
|
+
| `@moyarich/console-addon-animation` | Animated process-output display |
|
|
81
|
+
| `@moyarich/console-addon-annotations` | Message annotations and labels |
|
|
82
|
+
| `@moyarich/console-addon-console-feed` | Console feed integration |
|
|
83
|
+
| `@moyarich/console-addon-data-export` | Export console output data |
|
|
84
|
+
| `@moyarich/console-addon-diagnostics` | Console diagnostics |
|
|
85
|
+
| `@moyarich/console-addon-filtering` | Filter output |
|
|
86
|
+
| `@moyarich/console-addon-imperative-scrolling` | Programmatic scrolling and viewport controls |
|
|
87
|
+
| `@moyarich/console-addon-links` | Detect and interact with links |
|
|
88
|
+
| `@moyarich/console-addon-markdown` | Render GitHub Flavored Markdown |
|
|
89
|
+
| `@moyarich/console-addon-metadata` | Display message metadata |
|
|
90
|
+
| `@moyarich/console-addon-navigation` | Navigate between messages |
|
|
91
|
+
| `@moyarich/console-addon-persistence` | Save output through configurable persistence adapters |
|
|
92
|
+
| `@moyarich/console-addon-process-state` | Represent process execution state |
|
|
93
|
+
| `@moyarich/console-addon-resizable` | Resize the console frame |
|
|
94
|
+
| `@moyarich/console-addon-search` | Search console output |
|
|
95
|
+
| `@moyarich/console-addon-selection` | Select messages |
|
|
96
|
+
| `@moyarich/console-addon-session` | Serialize console sessions |
|
|
97
|
+
| `@moyarich/console-addon-xterm` | Render output with xterm.js |
|
|
98
|
+
|
|
99
|
+
Core console features work without optional addons. Each addon is installed separately. See the [interactive documentation](https://moyarich.github.io/console/) for usage examples and integration guidance.
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
MIT
|
|
104
|
+
|
|
105
|
+
## Local development
|
|
106
|
+
|
|
107
|
+
Run `npm run dev` to start the playground and Storybook together:
|
|
108
|
+
|
|
109
|
+
- Playground: <http://localhost:5173/>
|
|
110
|
+
- Storybook: <http://localhost:5173/storybook/>
|
|
111
|
+
|
|
112
|
+
Both support hot reload and link to each other. Ctrl+C stops both servers. Storybook runs internally on port 6007; set `DEV_PORT` or `STORYBOOK_DEV_PORT` to change the ports.
|
|
113
|
+
|
|
114
|
+
Use `npm run dev:playground` or `npm run storybook` to start an individual server. Run `npx playwright test -c playwright.dev.config.ts` to check navigation and live connections through the unified server.
|