This is the fourth day of my participation in Gwen Challenge

preface

It was developed for Echarts and AntV G2. What impressed me most about the documentation was how helpful the Demo pages were to the user. They not only provided rich examples, but also allowed you to modify the code and see the performance in real time.

Above is the Demo page for G2

The Demo page for Echarts is shown above

Seeing such a function, can not help but arouse my curiosity. Let me show you how to develop a simple online editing page that displays results in real time.

The development train of thought

To execute the code we entered, we can use the following methods:

  1. eval : eval('console.log("a simple script"); ');
  2. new Function : new Function('console.log("a simple script"); ') ();
  3. iframeCreate a new iframe tag and dynamically inject HTML and JS code into it

To avoid affecting the code in the current context, we use iframe injection.

All we need to do is create an area on the page where we can input code, and dynamically fetch it at edit time and inject it into the iframe to achieve the desired functionality.

The code field

HTML page structure, here we use Codemirror as the code editor.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <link rel="stylesheet" Href = "https://gw.alipayobjects.com/os/antv/assets/lib/codemirror-5.29.0/codemirror-merged.min.css" > < title >, live code</title> </head> <body> <main> <section> <button class="execute">Copy</button> <button class="run">Run</button> <textarea class="code"></textarea> </section> <section> <div class="preview"></div> </section> </main> <script src="./main.js"></script> </body> </html>Copy the code

Js code

import CodeMirror from "codemirror";

import "./style.css";

const $code = document.querySelector(".code");
const $iframeContainer = document.querySelector(".preview");
const $run = document.querySelector(".run");
const $copy = document.querySelector(".copy");

const htmlEditor = CodeMirror.fromTextArea($code, {
  mode: "text/html",
  extraKeys: {
    "Ctrl-Space": "autocomplete"
  },
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  lineNumbers: true,
  lineWrapping: false
});

function syncCode() {
  $iframeContainer.innerHTML = "<iframe></iframe>";
  const iframe = document.querySelector('iframe')
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.open();
  iframeDoc.write(htmlEditor.getValue());
  iframeDoc.close();
}

$run.addEventListener("click", syncCode);
Copy the code

The above code with syncCode is used to edit the code to show the effect of the iframe inside, here attached to the DEMO source address, welcome to download and run.

A simple running example is shown below

instructions

The sample code references the implementation of an older version of ANTV’s online demo. The new implementation of ANTV can be learned here, the core code is as follows

const execute = debounce( ( code: string, node: HTMLDivElement, exampleContainer: string | undefined, ) => { const script = document.createElement('script'); script.innerHTML = ` try { ${code} } catch(e) { if (window.__reportErrorInPlayGround) { window.__reportErrorInPlayGround(e); }} `; // eslint-disable-next-line no-param-reassign node.innerHTML = exampleContainer || '<div id="container" />'; node! .appendChild(script); }, 300,);Copy the code

Existing mature programs

We can use the existing mature products: Codepen, StackBlitz, CodeSandbox, jsbin.

The React and Vue ecosystems have their own real-time code editing and preview components:

  1. vue-live :

    A lightweight playground for live editing VueJs code in the browser

  2. react-live:

    React Live

    brings you the ability to render React components with editable source code and live preview.

The resources

  1. Js sandbox contents
  2. Bytedance’s micro front end sandbox practice