Skip to content

Commit 3d2107f

Browse files
kellyjosephpricekellyjosephprice
committed
ci: seperate files
1 parent c1d9bfb commit 3d2107f

File tree

3 files changed

+173
-14
lines changed

3 files changed

+173
-14
lines changed

‎public/index.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import createRoot from 'react-dom/client';
34

45
import syntaxHighlighter, { cmVariableContext } from '../src/index';
56

6-
let createRoot;
7-
if (process.env.REACT_VERSION === '18') {
8-
// eslint-disable-next-line global-require
9-
({ createRoot } = require('react-dom/client'));
10-
}
11-
127
const exampleCode = `curl --request POST
138
--url <<url>>
149
--header 'authorization: Bearer 123'
@@ -172,10 +167,5 @@ const App = () => (
172167
</div>
173168
);
174169

175-
if (typeof createRoot === 'function') {
176-
const root = createRoot(document.getElementById('root'));
177-
root.render(<App />);
178-
} else {
179-
// eslint-disable-next-line react/no-deprecated
180-
ReactDOM.render(<App />, document.getElementById('root'));
181-
}
170+
const root = createRoot(document.getElementById('root'));
171+
root.render(<App />);

‎public/index.legacy.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import syntaxHighlighter, { cmVariableContext } from '../src/index';
5+
6+
const exampleCode = `curl --request POST
7+
--url <<url>>
8+
--header 'authorization: Bearer 123'
9+
--header 'content-type: application/json'`;
10+
11+
const exampleJson = `{
12+
"key": "value",
13+
"array": [1, 2, 3],
14+
"a": {
15+
"b": {
16+
"c": {
17+
"d": "ok",
18+
"e": "err"
19+
},
20+
"f": {
21+
"g": "ok"
22+
},
23+
"h": {
24+
"i": "ok"
25+
}
26+
},
27+
"j": {
28+
"k": {
29+
"l": "ok"
30+
}
31+
}
32+
},
33+
"isThing": true
34+
}
35+
`;
36+
37+
const exampleMarkdown = `# Custom Scrollbars
38+
39+
This is a piece of text that creates scrollbars
40+
41+
Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
42+
aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
43+
dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
44+
integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
45+
Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
46+
pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
47+
fusce vel.
48+
49+
Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
50+
vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
51+
sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
52+
quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
53+
vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
54+
donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
55+
est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
56+
explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
57+
curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.
58+
59+
Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
60+
turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
61+
volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
62+
eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
63+
Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
64+
tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
65+
parturient augue interdum, mattis sit tellus.
66+
67+
Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
68+
id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
69+
sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
70+
enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
71+
ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
72+
augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
73+
curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
74+
maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
75+
lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;
76+
77+
const App = () => (
78+
<div style={{ margin: '20px' }}>
79+
<h1>Core Syntax Highlighter</h1>
80+
81+
<h2>Dark Theme</h2>
82+
<pre id="hub-reference">
83+
<cmVariableContext.Provider
84+
value={{
85+
user: {},
86+
defaults: [
87+
{
88+
name: 'url',
89+
default: 'GET',
90+
},
91+
],
92+
}}
93+
>
94+
{syntaxHighlighter(exampleCode, 'curl', {
95+
dark: true,
96+
highlightMode: true,
97+
tokenizeVariables: true,
98+
ranges: [
99+
[
100+
{ ch: 0, line: 0 },
101+
{ ch: 0, line: 1 },
102+
],
103+
[
104+
{ ch: 0, line: 4 },
105+
{ ch: 0, line: 5 },
106+
],
107+
],
108+
})}
109+
</cmVariableContext.Provider>
110+
</pre>
111+
112+
<h2>Light Theme</h2>
113+
<pre id="hub-reference">
114+
<cmVariableContext.Provider
115+
value={{
116+
user: {},
117+
defaults: [
118+
{
119+
name: 'url',
120+
default: 'GET',
121+
},
122+
],
123+
}}
124+
>
125+
{syntaxHighlighter(exampleCode, 'curl', {
126+
dark: false,
127+
highlightMode: true,
128+
tokenizeVariables: true,
129+
ranges: [
130+
[
131+
{ ch: 0, line: 0 },
132+
{ ch: 0, line: 1 },
133+
],
134+
[
135+
{ ch: 0, line: 4 },
136+
{ ch: 0, line: 5 },
137+
],
138+
],
139+
})}
140+
</cmVariableContext.Provider>
141+
</pre>
142+
143+
<hr />
144+
<h1>Code Editor</h1>
145+
<h2>Dark Theme</h2>
146+
<pre id="hub-reference">
147+
{syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
148+
</pre>
149+
150+
<h2>Light Theme</h2>
151+
<pre id="hub-reference">
152+
{syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
153+
</pre>
154+
155+
<hr />
156+
<h1>Code Folding</h1>
157+
<h2>Dark Theme</h2>
158+
<pre id="hub-reference">
159+
{syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: true })}
160+
</pre>
161+
162+
<h2>Light Theme</h2>
163+
<pre id="hub-reference">
164+
{syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: false })}
165+
</pre>
166+
</div>
167+
);
168+
169+
ReactDOM.render(<App />, document.getElementById('root'));

‎webpack.config.dev.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
44

55
module.exports = {
66
mode: 'development',
7-
entry: ['./public/index.js'],
7+
entry: [['16', '18'].includes(process.env.REACT_VERSION) ? './public/index.legacy.js' : './public.index.js'],
88
module: {
99
rules: [
1010
{

0 commit comments

Comments
 (0)