/html-to-mastergo

一款能将网站页面转成MasterGo插件数据结构的工具库(A library can convert html into MasterGo plugin data structures)

Primary LanguageTypeScriptMIT LicenseMIT

html-mastergo

中文 | English

A library can convert html into MasterGo plugin data structures.

Install

yarn add @mastergo/html-mastergo | npm install @mastergo/html-mastergo

Usage

  1. Install MasterGo client and init a plugin project.

  2. Build UI(Click here MasterGo-Plugin if having trouble in how to develop plugins in MasterGo)

  3. Use the library

    /** UI side **/
    import { htmlToMG, postProcess } from '@mastergo/html-mastergo';
    // any dom element
    const convert = async () => {
      const layerJson = await htmlToMG(document.body);
      // Not necessary, you can do anything you want to do with json processed by the function htmlToMG. This is just one way to do it.
      const processedJson = await postProcess(layerJson)
      // post data to plugin
      parent.postMessage({
        type: 'generate',
        data: processedJson
      }, '*')
    }
    
    
    /** Plugin side **/
    import { renderToMasterGo } from '@mastergo/html-mastergo';
    mg.ui.onmessage = (msg) => {
      const { data, type } = msg
      if (type === 'generate') {
        // traverse
        renderToMasterGo(data).then(root => {
          console.log('root node', root)
        })
      }
    }

Limitations

A few known limitations:

  • Not all element types are supported (e.g. iframes)
  • Not all CSS properties are supported or fully supported
  • Not all types of media are supported (video, animated gifs, etc)
  • All fonts must be uploaded to MasterGo, otherwise the default fonts will be used for rendering

If you find any problems or have any feedback, please Ask a Question

Example

Example