Visual coding! Front-end seamless access code visual editing

background

R&D efficiency improvement is an eternal topic. The basic idea of efficiency inseparable from 161cfd3796caf2 standardization, standardized alignment, and subsequent intelligent .

The mainstream commercial low-code platform basically hopes to standardize and standardize the entire R&D link to achieve the effect of improving efficiency, but the demand itself changes, and it will form a dependence on the low-code platform, and subsequent maintenance All need to rely on platform capabilities to achieve;

So what I will introduce to you today is not the traditional mainstream low-code platform, but the R&D-oriented, code visual design editing platform; it is more like dreamweaver, gui visual editing for programmers.

The problems it is used to solve are:

1. No dependence on low-code platforms, secondary development can seamlessly enter the code development mode
2. At the same time, it supports WYSIWYG visual editing to improve efficiency and prompt development experience
3. Provide material ecology, customize materials, improve material usage experience, and increase reuse rate

plan description

Functions & Features

edit

Reverse positioning

Support locating code position from view

Insert material

Visually insert materials

Delete view

Mobile view

Edit code

Preview

Route isolation

The route jump in the single-page application can be intercepted and controlled, and the others are the same as the normal preview

how to use

Installation dependencies

npm i @mometa/editor -D

Use antd material

1. Install antd materials

npm i @mometa/materials-generator @mometa-mat/antd -D

2. mometa-material.config.js in the project root directory

const { resolveLibMatConfig } = require('@mometa/materials-generator')

module.exports = [resolveLibMatConfig('antd')]

You can also create your own material library, see Material definition

Access editor

webpack.config.js amended as follows:

const MometaEditorPlugin = require('@mometa/editor/webpack')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        // 注意，只需要处理你需要编辑的文件目录
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
        }
      }
    ]
  },
  plugins: [isEnvDevelopment && new MometaEditorPlugin()]
}

Note: When using, there is no need to enable the official default react-refresh, mometa will enable the react-refresh capability by

Start webpack dev server, open http://localhost:${port}/mometa/

The provided example can be seen at @mometa/app

other

For the complete open source implementation, see mometa , please don’t be stingy with your likes and stars, there will be articles detailing how to achieve it later! stay tuned