react-runner/website/src/components/LiveRunner.tsx at 8b8acbd77b6edd4e07d629380237d6135574593b · nihgwu/react-runner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { useState } from 'react'
import styled from '@emotion/styled'
import { useRunner, Scope } from 'react-runner'
import {
  LiveProvider,
  LiveEditor,
  LivePreview,
  LiveError,
  CodeEditor,
  useLiveRunner,
  Language,
} from 'react-live-runner'
import { CodeMirror as CM } from 'react-runner-codemirror'

export const Container = styled.div`
  display: flex;
  box-shadow: 0 0 2px 0 lightsteelblue;
  height: 300px;
  overflow: hidden;

  @media (max-width: 640px) {
    flex-direction: column-reverse;
    height: 480px;
  }
`

export const EditorContainer = styled.div`
  flex: 0 1 720px;
  overflow: auto;
`

export const Editor = styled(CodeEditor)`
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
  font-size: 14px;
  white-space: pre;
  caret-color: #fff;
  min-width: 100%;
  min-height: 100%;
  float: left;

  & > textarea,
  & > pre {
    outline: none;
    white-space: pre !important;
  }
`

export const CodeMirror = styled(CM)`
  font-size: 14px;
  flex: 0 1 720px;
  overflow: hidden;
`

export const PreviewContainer = styled.div`
  flex: 1 1 720px;
  position: relative;
  display: flex;
  overflow: hidden;
`

export const Preview = styled.div`
  margin: auto;
  white-space: pre-wrap;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
`

export const PreviewError = styled.div`
  background: #fcc;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 10px;
  color: #f00;
  white-space: pre-wrap;
`

type Props = {
  code?: string
  scope?: Scope
  transformCode?: (code: string) => string
  language?: Language
}

const StyledEditor = Editor.withComponent(LiveEditor)

export const LiveRunner = (props: Props) => (
  <LiveProvider {...props}>
    <Container>
      <EditorContainer>
        <StyledEditor />
      </EditorContainer>
      <PreviewContainer>
        <Preview as={LivePreview} />
        <PreviewError as={LiveError} />
      </PreviewContainer>
    </Container>
  </LiveProvider>
)

export const UseLiveRunner = ({
  code: initialCode,
  language,
  ...rest
}: Props) => {
  const { element, error, code, onChange } = useLiveRunner({
    initialCode,
    ...rest,
  })

  return (
    <Container>
      <EditorContainer>
        <Editor value={code} language={language} onChange={onChange} />
      </EditorContainer>
      <PreviewContainer>
        <Preview>{element}</Preview>
        {error && <PreviewError>{error}</PreviewError>}
      </PreviewContainer>
    </Container>
  )
}

export const UseRunner = ({
  code: initialCode,
  transformCode,
  language,
  ...rest
}: Props) => {
  const [code, setCode] = useState((initialCode || '').trim())
  const { element, error } = useRunner({
    code: transformCode ? transformCode(code) : code,
    ...rest,
  })

  return (
    <Container>
      <EditorContainer>
        <Editor value={code} language={language} onChange={setCode} />
      </EditorContainer>
      <PreviewContainer>
        <Preview>{element}</Preview>
        {error && <PreviewError>{error}</PreviewError>}
      </PreviewContainer>
    </Container>
  )
}