Visual production and management of scaffolding and principle analysis of vscode plug-in

This article presents a different approach: implemented as a vscode plug-in that provides web visualization, as shown below:

The following describes how to install and use, and the implementation principle.

Install and use

This plugin is an efficiency tool. Scaffolding is just one of its features. See the documentation for more features.

After the plug-in is installed, open the scaffolding interface, as shown below:

You can create shared scaffolding directly by checking the option:

Scaffolding making

In the template project root directory to create lowcode. Scaffold. Config. Json files, dynamic replace file and content will be needed. The ejs suffix.

Ejs grammar

configuration

A complete lowcode. Scaffold. Config. Json configuration:

{
	"formSchema": {
		"schema": {
			"type": "object"."ui:displayType": "row"."ui:showDescIcon": true."properties": {
				"port": {
					"title": "Listening port"."type": "string"."props": {},
					"default": "3000"
				},
				"https": {
					"title": "https"."type": "boolean"."ui:widget": "switch"
				},
				"lint": {
					"title": "eslint + prettier"."type": "boolean"."ui:widget": "switch"."default": true
				},
				"noREADME": {
					"title": "Remove README file"."type": "boolean"."ui:widget": "switch"."ui:width": "100%"."ui:labelWidth": 0."ui:hidden": "{{rootValue.emptyREADME === true}}"."default": false
				},
				"emptyREADME": {
					"title": "Empty README file"."type": "boolean"."ui:widget": "switch"."ui:hidden": "{{rootValue.noREADME === true}}"}},"labelWidth": 120."displayType": "row"
		},
		"formData": {
			"port": 3000."https": false."lint": true."noREADME": false."emptyREADME": false}},"excludeCompile": ["codeTemplate/"."materials/"]."conditionFiles": {
		"noREADME": {
			"value": true."exclude": ["README.md.ejs"]},"lint": {
			"value": false."exclude": [".eslintrc.js".".prettierrc.js"]}}}Copy the code

FormSchema:

Formschema. schema is the schema exported by the X-render form designer, which builds the form interface based on the schema. Formschema. formData is the default data of the form

The form data is passed into the EJS template for compilation when the project is created.

ExcludeCompile: Configures folders or files that do not need to be compiled by EJS.

ConditionFiles: Deletes certain folders or files when you create the project based on the value of the form entry. For example:

"conditionFiles": {
	"noREADME": {
		"value": true."exclude": ["README.md.ejs"]},"lint": {
		"value": false."exclude": [".eslintrc.js".".prettierrc.js"]}}Copy the code

When the lint form item has the value false, the configured folder or files “.eslintrc.js”, “.prettierrc.js”, will be removed from the created project.

Local debug scaffolding

Refer to the project

Github.com/lowcode-sca…

Release scaffold

Commit the scaffolding to a Git repository, noting the open project’s public access rights.

Use scaffolding

Use git repository addresses directly

Pay attention to use clone address, support specified branch, for example – b master https://github.com/lowcode-scaffold/lowcode-mock.git, can also use the internal private warehouse

Share to template list for quick creation

Modify the index.json content in the repository and submit pr.

Realize the principle of

When opening the WebView, pull the JSON file that records the scaffold list from the CDN and render the list view.
Click on a scaffold and transfer the scaffold’s Git repository address to the plug-in background. The plug-in background downloads the template to the temporary working directory according to the Git address and reads itlowcode.scaffold.config.jsonIn the fileformSchemaReturn to webView.

export const downloadScaffoldFromGit = (remote: string) = > {
  fs.removeSync(tempDir.scaffold);
  execa.sync('git'['clone'. remote.split(' '), tempDir.scaffold]);
  fs.removeSync(path.join(tempDir.scaffold, '.git'));
  if (
    fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))) {return fs.readJSONSync(
      path.join(tempDir.scaffold, 'lowcode.scaffold.config.json')); }return {};
};
Copy the code

The webview toformSchemaAfter the popup box renders the dynamic form, click submit and send the dynamic form data and generated directory and other information to the plug-in background.
After the plugin background gets the form data, it goes to the temporary directory according toconditionFilesConfiguration to delete unnecessary files. Then compile all from the form dataejsFile, and finally copy all files to the build directory.

export const compileScaffold = async (model: any, createDir: string) => {
  if (
    fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))) {const config = fs.readJSONSync(
      path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'));const excludeCompile: string[] = config.excludeCompile || [];
    if (config.conditionFiles) {
      Object.keys(model).map((key) = > {
        if (
          config.conditionFiles[key] &&
          config.conditionFiles[key].value === model[key] &&
          Array.isArray(config.conditionFiles[key].exclude)
        ) {
          config.conditionFiles[key].exclude.map((exclude: string) = >{ fs.removeSync(path.join(tempDir.scaffold, exclude)); }); }}); }await renderEjsTemplates(model, tempDir.scaffold, excludeCompile);
    fs.removeSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'));
  }
  fs.copySync(tempDir.scaffold, createDir);
};
Copy the code

To debug locally, copy the contents of the selected folder or the currently open project contents to the temporary working directory in Step 2.

Next set to talk about plug-in other functions, plug-in source: github.com/lowcoding/l…