chore: update public/bundle.html

jaywcjlove · jaywcjlove · commit 4cd96a945b29 · 2022-02-28T12:07:33.000+08:00
diff --git a/public/bundle.html b/public/bundle.html
@@ -4,14 +4,24 @@
     <script src="https://unpkg.com/@babel/standalone@7.17.x/babel.min.js" crossorigin></script>
     <script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@17.x/umd/react-dom.development.js" crossorigin></script>
-    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
     <title>Run Web</title>
     <meta name="description" content="Online Code Editor for Rapid Web Development." />
     <meta name="keywords" content="react,component,js,css,html,preview,editor" />
   </head>
   <body>
     <a href="https://uiwjs.github.io/react-run-web">@uiw/react-run-web</a>
     <div id="container" style="padding: 24px"></div>
+    <script>
+      window.require = function (module) {
+        if (!module) {
+          throw new Error(`this is a fake require only use for import ${module}`);
+        }
+        if (window.CM && window.CM[module]) {
+          return window.CM[module];
+        }
+        return window[module];
+      };
+    </script>
     <script src="https://unpkg.com/@uiw/react-run-web/dist/run-web.min.js"></script>
     <script type="text/babel">
       import RunWeb from '@uiw/react-run-web';
@@ -26,5 +36,41 @@
       }
       ReactDOM.render(<Demo />, document.getElementById('container'));
     </script>
+    <div id="code"></div>
+    <script src="https://codemirror.net/6/codemirror.js"></script>
+    <script src="https://unpkg.com/@uiw/react-codemirror/dist/codemirror.min.js"></script>
+    <script type="text/babel">
+      import CodeMirror from '@uiw/codemirror';
+      import { javascript } from '@codemirror/lang-javascript';
+
+      const code = `import RunWeb from '@uiw/react-run-web';\n
+const Demo = () => {
+  return (
+    <RunWeb
+      css="div {color:red;}"
+      js="console.log('hello world!')"
+      html="<div>hello world!</div>"
+    />
+  );
+}`;
+
+      const Demo = () => {
+        return (
+          <div>
+            <CodeMirror
+              value={code}
+              editable={false}
+              height="200px"
+              extensions={[javascript({ jsx: true })]}
+              onChange={(value, viewUpdate) => {
+                console.log('value:', value);
+              }}
+            />
+          </div>
+        );
+      };
+
+      ReactDOM.render(<Demo />, document.getElementById('code'));
+    </script>
   </body>
 </html>
