@youcan/cli-kit 2.1.3 → 2.2.0

package/dist/node/worker.d.ts

@@ -1,19 +1,16 @@
-/// <reference types="node" />
-import { Writable } from 'stream';
-import type { Color } from '..';
-export interface Interface {
-    run(): Promise<void>;
-    boot(): Promise<void>;
-}
-export declare class Logger extends Writable {
-    private channel;
-    private type;
-    private color;
-    constructor(channel: 'stdout' | 'stderr', type: string, color: Color.Color);
-    write(chunk: unknown): boolean;
-    private pad;
-}
-export declare abstract class Abstract implements Interface {
-    abstract boot(): Promise<void>;
-    abstract run(): Promise<void>;
-}
+/// <reference types="node" />
+import { Writable } from 'stream';
+export interface Interface {
+    run(): Promise<void>;
+    boot(): Promise<void>;
+}
+export declare class Logger extends Writable {
+    private readonly type;
+    private readonly color;
+    constructor(type: string, color: 'yellow' | 'cyan' | 'magenta' | 'green' | 'blue' | 'red' | 'dim');
+    write(chunk: unknown): boolean;
+}
+export declare abstract class Abstract implements Interface {
+    abstract run(): Promise<void>;
+    abstract boot(): Promise<void>;
+}

package/dist/node/worker.js

@@ -1,36 +1,49 @@
 import { Writable } from 'node:stream';
-import { stdout, stderr } from 'node:process';
 import dayjs from 'dayjs';
+import './cli.js';
+import 'simple-git';
+import 'execa';
+import 'tcp-port-used';
+import 'find-process';
+import 'env-paths';
+import 'node-fetch';
+import 'ramda';
+import 'change-case';
+import 'formdata-node';
+import 'formdata-node/file-from-path';
+import 'kleur';
+import 'conf';
+import './filesystem.js';
+import { renderDevOutput } from '../ui/components/DevOutput.js';
+import 'react';
+import 'ink';
 
-class Logger extends Writable {
-    channel;
-    type;
-    color;
-    constructor(channel, type, color) {
-        super();
-        this.channel = channel;
-        this.type = type;
-        this.color = color;
-    }
-    write(chunk) {
-        if (!(chunk instanceof Buffer) && typeof chunk !== 'string') {
-            return false;
-        }
-        const channel = this.channel === 'stdout' ? stdout : stderr;
-        const time = dayjs().format('HH:mm:ss:SSS');
-        const lines = chunk.toString().split('\n').map(s => s.trim()).filter(s => s !== '');
-        for (let i = 0; i < lines.length; i++) {
-            i === 0
-                ? channel.write(this.color(`${time} | ${this.pad(this.type, 10)} | ${lines[i]}\n`))
-                : channel.write(this.color(`                          | ${lines[i]}\n`));
-        }
-        return true;
-    }
-    pad(subject, length, char = ' ') {
-        return subject.padEnd(length, char);
-    }
-}
-class Abstract {
+class Logger extends Writable {
+    type;
+    color;
+    constructor(type, color) {
+        super();
+        this.type = type;
+        this.color = color;
+    }
+    write(chunk) {
+        if (!(chunk instanceof Buffer) && typeof chunk !== 'string') {
+            return false;
+        }
+        const time = dayjs().format('HH:mm:ss:SSS');
+        const lines = chunk.toString().split('\n').map(s => s.trim()).filter(s => s !== '');
+        for (const line of lines) {
+            renderDevOutput.outputSubject.emit({
+                timestamp: time,
+                color: this.color,
+                label: this.type,
+                buffer: line,
+            });
+        }
+        return true;
+    }
+}
+class Abstract {
 }
 
 export { Abstract, Logger };

package/dist/ui/components/DevOutput.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Instance, Text } from 'ink';
+import { HotKeysPropsType } from './HotKeys';
+import { Command } from '@/node/cli';
+interface SubjectDataType {
+    timestamp: string;
+    buffer: string;
+    label: string;
+    color: Parameters<typeof Text>[0]['color'];
+}
+declare class OutputSubject {
+    private readonly subject;
+    listen(handler: (data: SubjectDataType) => void): void;
+    emit(data: SubjectDataType): void;
+    private pad;
+}
+export type DevOutputPropsType = {
+    hotKeys?: HotKeysPropsType['hotKeys'];
+    cmd: Command;
+};
+interface RenderDevOutputType {
+    (props: DevOutputPropsType): Instance;
+    outputSubject: OutputSubject;
+}
+export declare const DevOutput: ({ cmd, hotKeys }: DevOutputPropsType) => React.JSX.Element;
+declare const renderDevOutput: RenderDevOutputType;
+export { renderDevOutput };

package/dist/ui/components/DevOutput.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { useInput, Static, Box, Text, render } from 'ink';
+import { HotKeys } from './HotKeys.js';
+import { VerticalDivider } from './utils/symbols.js';
+import { map } from 'rxjs/operators';
+import { ReplaySubject } from 'rxjs';
+
+class OutputSubject {
+    subject = new ReplaySubject;
+    listen(handler) {
+        let lastLineKey = null;
+        this.subject.pipe(map(item => {
+            const currentLineKey = `${item.label}-${item.color}`;
+            if (currentLineKey !== lastLineKey) {
+                lastLineKey = currentLineKey;
+                return { ...item, label: this.pad(item.label, 10) };
+            }
+            return { ...item, label: this.pad('', 10) };
+        }))
+            .subscribe(handler);
+    }
+    emit(data) {
+        this.subject.next(data);
+    }
+    pad(subject, length, char = ' ') {
+        return subject.padEnd(length, char);
+    }
+}
+const outputSubject = new OutputSubject;
+const DevOutput = ({ cmd, hotKeys = [] }) => {
+    const [linesBuffers, setLinesBuffers] = useState([]);
+    useInput((input, key) => {
+        if (input === 'c' && key.ctrl)
+            cmd.exit(130);
+    });
+    useEffect(() => {
+        outputSubject.listen((data) => {
+            setLinesBuffers((previousLines) => [...previousLines, data]);
+        });
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Static, { items: linesBuffers }, (line, i) => (React.createElement(Box, { flexDirection: 'column', key: i },
+            React.createElement(Text, null,
+                React.createElement(Text, { dimColor: true }, line.timestamp),
+                ' ',
+                React.createElement(VerticalDivider, null),
+                ' ',
+                React.createElement(Text, { color: line.color }, line.label),
+                React.createElement(Text, null,
+                    ' ',
+                    React.createElement(VerticalDivider, null),
+                    ' ',
+                    line.buffer))))),
+        React.createElement(Box, { flexDirection: 'column', paddingTop: 1 },
+            React.createElement(HotKeys, { hotKeys: hotKeys }))));
+};
+const renderDevOutput = ((props) => render(React.createElement(DevOutput, { ...props }), { exitOnCtrlC: false }));
+renderDevOutput.outputSubject = outputSubject;
+
+export { DevOutput, renderDevOutput };

package/dist/ui/components/HotKeys.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type KeyType = {
+    keyboardKey: string;
+    description: string;
+    handler: () => void;
+};
+export type HotKeysPropsType = {
+    hotKeys: KeyType[];
+};
+export declare const HotKeys: ({ hotKeys }: HotKeysPropsType) => React.JSX.Element;
+export declare const renderHotKeys: (props: HotKeysPropsType) => import("ink").Instance;
+export {};

package/dist/ui/components/HotKeys.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RightChevron, VerticalDivider } from './utils/symbols.js';
+import { Box, render, useInput, Text } from 'ink';
+
+const HotKey = ({ keyboardKey, description, handler }) => {
+    useInput((input) => {
+        if (input === keyboardKey)
+            handler();
+    });
+    return (React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Text, null,
+            React.createElement(RightChevron, null),
+            " Press ",
+            React.createElement(Text, { dimColor: true }, keyboardKey),
+            " ",
+            React.createElement(VerticalDivider, null),
+            " ",
+            description)));
+};
+const HotKeys = ({ hotKeys }) => {
+    return (React.createElement(Box, { flexDirection: 'column' }, hotKeys.map((hotKey) => React.createElement(HotKey, { key: hotKey.keyboardKey, ...hotKey }))));
+};
+const renderHotKeys = (props) => render(React.createElement(HotKeys, { ...props }), { exitOnCtrlC: false });
+
+export { HotKeys, renderHotKeys };

package/dist/ui/components/utils/symbols.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const VerticalDivider: () => React.JSX.Element;
+export declare const RightChevron: () => React.JSX.Element;

package/dist/ui/components/utils/symbols.js

@@ -0,0 +1,7 @@
+import { Text } from 'ink';
+import React from 'react';
+
+const VerticalDivider = () => React.createElement(Text, null, "\u2502");
+const RightChevron = () => React.createElement(Text, null, "\u203A");
+
+export { RightChevron, VerticalDivider };

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDevOutput } from './components/DevOutput';
+export { renderHotKeys } from './components/HotKeys';

package/dist/ui/index.js

@@ -0,0 +1,2 @@
+export { renderDevOutput } from './components/DevOutput.js';
+export { renderHotKeys } from './components/HotKeys.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/cli-kit",
   "type": "module",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Utilities for the YouCan CLI",
   "author": "YouCan <contact@youcan.shop> (https://youcan.shop)",
   "license": "MIT",
@@ -22,21 +22,24 @@
     "@oclif/core": "^2.15.0",
     "archiver": "^5.3.2",
     "change-case": "^4.1.2",
-    "chokidar": "^3.5.3",
+    "chokidar": "^4.0.1",
     "conf": "^11.0.2",
     "dayjs": "^1.11.10",
     "env-paths": "^3.0.0",
     "execa": "^6.1.0",
     "find-process": "^1.4.7",
-    "formdata-node": "^5.0.1",
+    "formdata-node": "^6.0.3",
     "fs-extra": "^11.1.1",
     "glob": "^11.0.0",
+    "ink": "^5.1.0",
     "kill-port-process": "^3.2.0",
     "kleur": "^4.1.5",
     "node-fetch": "^3.3.2",
     "open": "^9.1.0",
     "prompts": "^2.4.2",
     "ramda": "^0.28.0",
+    "react": "^18.3.1",
+    "rxjs": "^7.8.1",
     "simple-git": "^3.20.0",
     "tcp-port-used": "^1.0.2",
     "tempy": "^3.1.0",
@@ -48,6 +51,7 @@
     "@types/node": "^18.18.0",
     "@types/prompts": "^2.4.5",
     "@types/ramda": "^0.28.25",
+    "@types/react": "^18.3.12",
     "@types/tcp-port-used": "^1.0.2",
     "shx": "^0.3.4"
   },