Hello everyone!! Long time no see. did you enjoy Chinese New Year? The author here to give you a happy old age, I wish you a happy old age. The latest version of Vue’s official documentation has been released, has everyone gone to see it? Aside from the new interface and dark theme, the biggest highlight is the Vue Playground, which provides an online interactive editing environment for directly debugging the case code provided by the documentation, and is very lightweight.

What is a REPL(Interactive Interpreter)

REPL(Read Eval Print Loop: Interactive interpreter) represents an environment in which we can enter commands or code and receive responses from the interpreter. There are four main features.

  • Read – Reads user input, parses the input data structure and stores it in memory.
  • Execute Eval – Executes the input data structure
  • Print Print – Prints the result
  • Loop Loop – Loop through the above steps until the user exits.

In other words, every code editor we use today is actually a REPL(interactive interpreter)

What is an online REPL(Interactive Interpreter)

Most of the code editors we use on a daily basis are downloaded and installed locally via software packages, because the interaction and compilation experience is better and smoother in a local system environment. However, there are some scenarios in which the web-based interactive interpreter has advantages, such as

  • I have a piece of code that I’d like to share with others, and it’s much easier to send it in the form of a web URL than it is to send it in the form of a code package
  • I wrote a component that needs to have a preview address or embed an iframe preview link in my document
  • I want to reproduce a bug in the simplest environment, but I think it’s too cumbersome to start a new project. I want to have a web page that I can open and write code directly, preferably with the dependencies I often use built in
  • You can download the code you edit online and run it locally

Coincidentally, the above scenes of Vue’s Playground have been solved quite well

Existing problems

Although Vue Playground has all the features of an online interactive interpreter, it only presets Vue’s runtime environment. Suppose I want to preload more modules, such as loDash, component libraries, and various utility functions. What should I do?

The author himself is to do open source component library, homework has been written, interested in copying homework and not interested in seeing the implementation of students can directly read here, in theory you can also easily copy out a belongs to your own online editor

  • Varlet UI Playground
  • The source code

How to do it

First open the source code of Vue Playground, you can find that the core of the entire interactive interpreter is in the dependency of @vue/repl, and Vue Playground is only integrated with @vue/repl.

@vue/repl: @vue/repl: @vue/repl: @vue/repl: @vue/repl: @vue/repl Compare that.

Vue Playground source

Modify the class provided by @vue/repl before

Modified class

Injected dependency list

As shown below, the @vue/repl class presets only VUE, if you need to preconfigure more third-party modules, you can inject them here (merge objects). It is important to note that because the entire interpreter is Vite based, the dependent third-party module must be an ESM module.

The author’s version injection list looks something like this. Key is the module alias, value is the CDN address of the module, because the author directly put the dependency in the public directory packaged together, so the relative path is used.

{
  '@varlet/ui': './varlet.esm.js'.'@varlet/touch-emulator': './varlet-touch-emulator.js'
}
Copy the code

Injecting preset files

Once the dependencies are determined, you can add the preset files and code, which are stored in state.files and you can push in any files you want to append

The author adds this

And then…

Then you can access the normal presets of files in the interpreter, the article is just convenient for everyone to understand the focus, recommend everyone to see the source code, the source code is very short, the author copy Vue official case to the line also took more than an hour, but the benefits are really very huge.

The author also recommends building such an online editing platform within the enterprise, integrating some common modules to do some bug feedback, share code, write some drafts and so on. The key is that it takes less time.

The last

The author’s team is actively maintaining our open source project Varlet, which is a Material style mobile component library developed based on Vue3. Varlet UI Playground has also been officially launched. Welcome everyone to use it to give us bug feedback. Or as a quick way to play our component library (after all, many people are too lazy to install dependencies), but also thanks to the community for our support and help, we will make further efforts in the New Year,

If you support us or think we have done a good job, you can find our warehouse address below, please click a little STAR for us, the support of students is all the power of our open source

Github repository address File address