feat(log): react support

src/log/index.ts

@@ -53,7 +53,7 @@ export default class Log extends Component<IOptions> {
     this.on('optionChange', (name, val) => {
       switch (name) {
         case 'log':
-          this.textViewer.setOption('text', val)
+          this.textViewer.setOption('text', ansiToHtml(val))
           break
         case 'wrapLongLines':
         case 'maxHeight':

src/log/react.tsx

@@ -0,0 +1,49 @@
+import { FC, MutableRefObject, useEffect, useRef } from 'react'
+import Log from './index'
+
+interface ILogProps {
+  log?: string
+  wrapLongLines?: boolean
+  maxHeight?: number
+  onCreate?: (log: Log) => void
+}
+
+const LunaLog: FC<ILogProps> = (props) => {
+  const logRef = useRef<HTMLDivElement>(null)
+  const log = useRef<Log>()
+
+  useEffect(() => {
+    log.current = new Log(logRef.current!, {
+      log: props.log,
+      wrapLongLines: props.wrapLongLines,
+      maxHeight: props.maxHeight,
+    })
+    props.onCreate && props.onCreate(log.current)
+
+    return () => log.current?.destroy()
+  }, [])
+
+  useEffect(() => setOption(log, 'log', props.log), [props.log])
+  useEffect(
+    () => setOption(log, 'wrapLongLines', props.wrapLongLines),
+    [props.wrapLongLines]
+  )
+  useEffect(
+    () => setOption(log, 'maxHeight', props.maxHeight),
+    [props.maxHeight]
+  )
+
+  return <div ref={logRef}></div>
+}
+
+function setOption(
+  log: MutableRefObject<Log | undefined>,
+  name: string,
+  val: any
+) {
+  if (log.current) {
+    log.current.setOption(name, val)
+  }
+}
+
+export default LunaLog

src/log/story.js

@@ -2,19 +2,14 @@ import Log from 'luna-log.js'
 import readme from './README.md'
 import story from '../share/story'
 import ansiColor from 'licia/ansiColor'
+import LunaLog from './react'
 import { text, boolean, number, button } from '@storybook/addon-knobs'
 import buildLog from '!!raw-loader!./build.log'
 
 const def = story(
   'log',
   (container) => {
-    const logTxt = text('Log', buildLog)
-    const wrapLongLines = boolean('Wrap Long Lines', true)
-    const maxHeight = number('Max Height', 500, {
-      range: true,
-      min: 50,
-      max: 1000,
-    })
+    const { logTxt, wrapLongLines, maxHeight } = createKnobs()
 
     const logToAppend = text(
       'Log to Append',
@@ -38,9 +33,36 @@ const def = story(
   {
     readme,
     source: __STORY__,
+    ReactComponent() {
+      const { logTxt, wrapLongLines, maxHeight } = createKnobs()
+
+      return (
+        <LunaLog
+          log={logTxt}
+          wrapLongLines={wrapLongLines}
+          maxHeight={maxHeight}
+        />
+      )
+    },
   }
 )
 
+function createKnobs() {
+  const logTxt = text('Log', buildLog)
+  const wrapLongLines = boolean('Wrap Long Lines', true)
+  const maxHeight = number('Max Height', 500, {
+    range: true,
+    min: 50,
+    max: 1000,
+  })
+
+  return {
+    logTxt,
+    wrapLongLines,
+    maxHeight,
+  }
+}
+
 export default def
 
-export const { log } = def
+export const { log: html, react } = def

src/text-viewer/style.scss

@@ -68,6 +68,7 @@
 
 .text {
   padding: 4px;
+  user-select: text;
   &.line-numbers {
     padding: 0;
   }