dmo

Features

• Pure function driven 🍣
• Support multiple modes 🎂
• Minimalist Responsive Design 🍉
• Detecting language 🧀
• Power from vue and TypeScript ❤

Getting Started

Let's use dmo to make a simple Babel REPL, first, write a simple html file, then inject the following necessary dependencies:

<script src="https://unpkg.com/dmo"></script>
<script src="https://unpkg.com/@babel/standalone@7.0.0-beta.38/babel.min.js"></script>

Next, initialize it:

  window.dmo({
    title: 'Babel REPL',
    transformers: {
      es2015: function (input) {
        return Babel.transform(input, { presets: ['es2015'] }).code;
      }
    }
  })

Open the browser, then you can get a usable Babel REPL (Check out the online DEMO):

Open the mobile snapshot

Install

The recommendation is to use the unpkg directly, of course, you can also use npm/yarn to download it:

npm i dmo --save
# yarn add dmo 

API

dmo(options)

options

• Type: Object

• Required: true

  fields of options are as follows

input

• Type: string

• Required: true

  REPL's input initial value. it also supports reading Github files as input, such as:

  'https://github.com/vuejs/vue/blob/dev/src/core/index.js'  // Full path
  '$github/vuejs/vue/dev/src/core/index.js'                  // Short cut

title

• Type: string

• Required: true

  REPL's title.

username

• Type: string

• Required: true

  user name.

name

• Type: string

• Required: false

  Project's name.

placeholder

• Type: string

• Required: false

• Default: Please enter your input

  placeholder of the input area.

transformers

• Type: { [mode: string]: transformFn }

• Required: true

  An plain object, the key is the name of the mode, the value is the transform function corresponding to the mode, note that the transform accepts a string of the current input area as input, and the return value will display in the preview area.

detectLanguage

• Type: boolean

• Required: false

• Default: false

  Whether to enable language detection with program-language-detector, From v1.1.2, it will automatically highlight the input / ouput by the detecting result, due to the real-time language detection will consume more performance, by default is false.

Projects Using Dmo

• markdown-catalogue-parser: 🛁 Git the category via raw markdown file.
• html-css-transformer: 🎊 Get css from html.
• Feel free to add yours here :)

Prior art

dmo wouldn't exist if it wasn't for excellent prior art, dmo is inspired by these projects:

• vue
• docsify
• docute

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

dmo © ulivz, Released under the MIT License.
Authored and maintained by ulivz with help from contributors (list).

github.com/ulivz · GitHub @ulivz