How to quickly design a set of cross end components that support rendering rich text content

background

I wonder if you have ever met this kind of demand , Configure a section of rich text in the management background html Content , At the beginning , You only need to support rendering to the browser , But as the company's business changes , May need to be used on applets , Even ios perhaps android And so on

Render to h5 Or browser like （ Ignore xss Safety issues such as ）

In general, the framework is directly used , similar

1. vue: vue-html

2. react: dangeroushtml

How to render to applet side

Because the applet uses its own unique tag , for example view label , But the background configuration is html Text string , How to handle html become view, Many people don't know how to do it , I think this is impossible , It is the product that raises unreasonable demands , See here , You can think about it first , If it's you , What would you do ？

Let's talk about my thinking process

taro

Because I was using taro Write applet , Simplify requirements to understand , Just need to put div label Render into a view label  , How to change ？ I thought of babel, because taro It supports cross end , The principle of cross end is to use babel Make an abstract syntax tree , Become the language effect you want

 

Look at the picture above , Everything is bright , But there are two fatal problems

1. babel It's static parsing , Rich text requirements are calculated by the code runtime , Contrary to

2. babel The bag is too big

Later, it was directly rejected babel

At this time, let's abstract it , The original requirement is simplified div become view , Let's simplify it a little bit div Become virtual dom , fictitious dom become view

html Turn it into virtual DOM

jquery

At this time, I thought of jquery A grammar of ,jquery Of $(' a section html') Can handle html become dom, And then a meal of operation to turn jq Source code , Not satisfied , shortcoming ：

1. dom Too many structures are attached jq Useless properties ,

2. html There are some contents jq The limitations of the framework

vue、react

Look over vue、react Some of the source code

1. vue: vue-template-compiler

2. react: babel-loader Will be able to elemennt Turn it into createElement

shortcoming ：

1. Resolved virtual dom There are still many limitations of the framework itself

Do you want to write a ？ The need is urgent , It is impossible to write by yourself

babel

The essence is how div Become a clean virtual dom Node ？ Finally, I can't go around and return to the origin .babel, By looking at the source code, I found a noun called html-parse Open it directly github search , Found many libraries , But most of them are experiments or demo Level

html-parse-stringify[1]

Finally, I chose this library

advantage :

1.  Light weight 

2.  Compatibility is good. , Many attribute descriptions can match 

3.  Generated virtual  dom  Not dependent on the framework 、 platform , Namely  json  Text 

var HTML = require('html-parse-stringify')

// this html:
var html = '<div class="oh"><p>hi</p></div>'

// becomes this AST:
var ast = HTML.parse(html)

console.log(ast)
/*
{
    // can be `tag`, `text` or `component`
    type: 'tag',

    // name of tag if relevant
    name: 'div',
    
    // parsed attribute object
    attrs: {
        class: 'oh'
    },

    // whether this is a self-closing tag
    // such as <img/>
    voidElement: false,

    // an array of child nodes
    // we see the same structure
    // repeated in each of these
    children: [
        {
            type: 'tag',
            name: 'p',
            attrs: {},
            voidElement: false,
            children: [
                // this is a text node
                // it also has a `type`
                // but nothing other than
                // a `content` containing
                // its text.
                {
                    type: 'text',
                    content: 'hi'
                }
            ]
        }
    ]
}
*/

fictitious DOM Convert to other end code

With virtual dom, The applet side can traverse through depth first , Virtual layer by layer dom Render into view label The implementation is similar to the following code , The same is true for other terminals

 Use 
<View className="index">
    <TaroRichText
      htmls={` Access content <span class="highlight"><a appid="495ec7a9-a3e8-42ad-a1ee-f14b8e0af1e3" pagepath="pages/renderer/renderer"> Activity online reservation registration Lala </a></span>
    `}
    />
</View>

 Core source code 
export default function Tree(props: IProps) {
  const { doms } = props;
  console.log(doms);
  const { children = [] } = doms || {};
  return (
    <View>
      //  Depending on the type , Simulate different styles , adopt  class  simulation 
      {doms.type === 'text' && <View>{doms.content}</View>}
      {/* <View>{ Other types , Write your own function rendering }</View> */}
      <View>
        {children.length &&
          children.map(dom => {
            return <Tree doms={dom} />;
          })}
      </View>
    </View>
  );
}