DEV Community: Daniel.xiao

Develop your own code generator in five minutes

Daniel.xiao — Sat, 29 May 2021 16:16:04 +0000

This article is short but full of sincerity

You can read it in less than 2 minutes

Then there is a high probability that you will be amazed

It turned out to be so simple to develop your own code generator

Tips: This article is a continuation of "The new generation of code generator". If you don’t know what ncgen is, it’s best to read "The new generation of code generator" first

Daniel: Brother Egg, after the last time, according to the method you taught me, I configured a code generator that fully meets my needs in a few minutes. It is really powerful and simple.

Mr. Egg: Just do it, I admire your hands-on ability

Daniel: Thanks. But I came again with a question today

Mr. Egg: Waiting for a long time

Daniel: I hung up ncgen-config.js in the cloud, and my friends complained that the command was too long to remember when using it:

$ ncgen https://raw.githubusercontent.com/daniel-dx/vue3-ncgen-demo/master/ncgen-config.js

Look, is it a bit long? Do you have any good suggestions?

Mr. Egg: Of course, ncgen has already prepared a very fascinating plan for this

Daniel: What fascinating plan? How charming is it? Tell me quickly please

Mr. Egg: That's it - Rapid development of your own code generator through ncgen

Daniel: Wo~, it belongs to me, it sounds cool. How to do it？

Mr. Egg: Suppose we want to develop a code generator now, let's call it vue-ncgen-demo-cli, guess how many steps to get it?

Daniel: I guess, just one step.

Mr. Egg: This is a bit too much, I can't do it, goodbye

Daniel: Just kidding, Brother Egg, just say it

Mr. Egg: Let's go three steps

Step 1: Generate code generator project

$ yarn create @ncgen/app # npm init @ncgen/app

Step 2: Write the code generator logic

Find ncgen-config.js in the generated project and modify this configuration file according to the logic of your code generator

The sample configuration is here: https://github.com/daniel-dx/vue-ncgen-demo-cli/blob/master/ncgen-config.js

Here is a tip. When you need to add sub-commands, in addition to copy and paste, you can actually do it more elegantly through sub-commands.

cd vue-ncgen-demo-cli
$ yarn create @ncgen/app add-sub # # npm init @ncgen/app add-sub

Step 3: Release to the world

$ npm run release

Daniel: It's over?

Mr. Egg: Yes, it's over, it's that simple

Daniel: How should my friends use this code generator?

Mr. Egg: Very simple, the example is as follows

# Installation
$ npm i vue-ncgen-demo-cli -g

# Execute the main command to generate the scaffolding project
$ vue-ncgen-demo-cli

# Execute subcommand to insert code
$ vue-ncgen-demo-cli add-component

Daniel: Perfect, I can’t wait to develop my own code generator

Mr. Egg: Looking forward to your feedback

ncgen github: https://github.com/daniel-dx/ncgen [Please star it]

ncgen documentation: https://daniel-dx.github.io/ncgen/

Keywords: ncgen, scaffolding, generator, code generator

The new generation of code generator

Daniel.xiao — Sun, 09 May 2021 11:54:10 +0000

Speaking from a scaffold

Daniel: Recently I want to build a code generator that can quickly generate project codes. What recommendation does Brother Egg have?

Mr. Egg: I have always used yeoman in the past, and it is an open source project that is nearly 10k stars. However, what I want to recommend to you today is not yeoman, but a new generation code generator ncgen, it may seem more approachable.

Daniel: I like the simple one the most. How does it work?

Mr. Egg: Old rules, you say your needs, I will try to answer them one by one

First, you need a project template

Daniel: I have a project template (for example: vue3-ncgen-demo), I hope all new projects come from this project template, so I only need to concentrate on maintaining this project template.

Mr. Egg: OK, this is the function of the project scaffolding. Let's take a look at how ncgen is processed.

The first step is to install ncgen

$ npm i ncgen -g # yarn global add ncgen

The second step is to generate the configuration file ncgen-config.js, which describes the logic of the code generator

$ ncgen genConf

Step 3 Modify main.tmplSource in ncgen-config.js to the url of the project template.

export default {
  main: {
    tmplSource: "https://github.com/daniel-dx/vue3-ncgen-demo.git",
  },
};

Try it out:

ncgen ncgen-config.js

Simple copying is not enough, modification is necessary

Daniel: Whoops is good. However, the currently generated project is exactly the same as the project template, but it will always have its own information that is different from the project template, such as the name of the project, the name of the author, etc. I don’t want to modify these manually every time the project is generated.

Mr. Egg: OK, the request is very reasonable. Since this information can only be provided by the person who created the project, we need to collect this information through some questions, and then we can make some modifications to the generated project based on this information. We modify the main.prompt and main.updateFiles in ncgen-config.js

Example description:

Perform string replacement on the package.json file in the generated project, the rules are as follows:

Replace the string vue3-ncgen-demo with the project name entered by the user

Replace the string Daniel.xiao with the author name entered by the user

export default {
  main: {
    prompt: [
      {
        type: "input",
        name: "author",
        message: "What is the author's name",
      },
    ],

    ...

    updateFiles: {
      "package.json": function (content, options) {
        const answers = this.$answers
        return api.replace(content, {
          "vue3-ncgen-demo": answers.projectNameObj.kebabCase,
          "Daniel.xiao": answers.author,
        });
      },
    },
  }
};

Daniel: Hey, I noticed that the template engine is not used here, but the string replacement is used directly

Mr. Egg: Yes, this design has a lot of meaning. Using a template engine to replace files may cause the project template itself to fail to run normally, because the template engine requires placeholders, and placeholders may cause code parsing errors

Daniel: Yes, in this way the project template is just an ordinary project, and there is no need to make some template placeholder transformations.

What about extra files? please delete

Daniel: Then I will continue. There are some template directories and files (such as module template directories, component template files) in my project template, but I don't want to see these templates in the generated project.

Mr. Egg: OK, no problem, just delete the specified files and directories. Let's modify the main.removeFiles in ncgen-config.js.

Example description:

Delete the ncgen-config.js and src/components/base/Template.vue files in the generated project

export default {
  main: {
    removeFiles: ["ncgen-config.js", "src/components/base/Template.vue"],
  },
};

One-stop service: automatic installation of dependencies

Daniel: I just noticed that the above example will automatically install dependencies when it runs. It should be installed with npm, can this support yarn? If I am a non-NodeJS project, such as Python, Go, etc., can I do it?

Mr. Egg: Of course! The generated ncgen-config.js uses npm i to install dependencies by default. See the example below. If you want to change to yarn, just change command to yarn install. And if it is Python, Go and other languages, you only need to change command to the corresponding dependency installation command.

export default {
  main: {
    installDependencies: {
      skip: false,
      tips: "Dependencies are being installed, it may take a few minutes",
      command: "npm i",
    },
  },
};

Finally, give some friendly tips

Daniel: That’s great. The project scaffolding was completed in just a few clicks. I think a friendly welcome and beautiful ending is needed in the end.

Mr. Egg: Simply modify the main.welcome and main.complete as you wish

export default {
  main: {
    welcome: "Welcome to use (Vue 3 + TypeScript + Vite) project generator",

    ...

    complete: "Congratulations, the operation is successful",
  },
};

High-frequency use is not scaffolding

Daniel: The scaffolding is done, but it is only used when building a new project. High-frequency operations are still part of the increase in code, such as adding a functional module, adding a component, adding an API, etc.

Mr. Egg: I understand what you mean. Old rules, you ask me to answer

The code template exists in the project template

Daniel: I want to add a new component to a project. I don't want to copy an existing component and then perform various operations to modify and delete the code. In fact, there is a component template in the project template

Mr. Egg: OK. Let's first add a subcommand called add-component in ncgen-config.js.

Example description (assuming that the values of category and name are'busi' and'demo' respectively):

description is used to describe the function of a subcommand.

api.listDirs This API is very useful for allowing users to choose where to insert the code.

The configuration of addFilesTo will insert the src/components/base/Template.vue in the project template into the src/components/busi/Demo.vue file in the project.

export default {
  sub: {
    "add-component": {
      description: "Add vue component",

      prompt: [
        {
          type: "list",
          choices: function () {
            return api.listDirs("src/components/");
          },
          name: "category",
          message: "Please select the category",
        },
        {
          type: "input",
          name: "name",
          message: "What is the component name",
          validate(input) {
            if (!input) return "The component name is required";
            return true;
          },
        },
      ],

      tmplSource: "https://github.com/daniel-dx/vue3-ncgen-demo.git",

      addFilesTo: function () {
        const answers = this.$answers;
        return {
          "src/components/base/Template.vue": `src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.vue`,
        };
      },
    },
  },
};

The code template does not exist in the project template

Daniel: Pretty. But for the existing projects, these projects are not from the project template, and I also want to add some sub-commands to generate part of the code for the project, how to do?

Mr. Egg: The subcommand supports two ways to add files, one is the code template from the project template mentioned above, and the other is dynamically created by you. Both can be used at the same time. The following example demonstrates how to dynamically create a code file

Example description (assuming that the values of category and name are'busi' and'demo' respectively):

The configuration of addFiles will create a src/components/busi/Demo.md file in the project. The content of this file is # Demo

export default {
  sub: {
    "add-component": {
      addFiles: function () {
        const answers = this.$answers;
        return {
          [`src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.md`]: function () {
            return `# ${answers.nameObj.upperFirstCamelCase}`;
          },
        };
      },
    },
  },
};

Highly recommended replacement technique

Daniel: Next, some file contents are modified (for example, when a page is added, the routing rules file will be automatically modified to register routes for the page), right? The operation is the same as the main command.

Mr. Egg: Well savvy. A tip recommended here is to add some identification comments where you need to insert the fragment code, as shown in the src/App.vue code:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <!-- Don't touch me-place component -->
</template>

<script lang="ts">
import {defineComponent} from'vue'
import HelloWorld from'./components/busi/HelloWorld.vue'
// <!-- Don't touch me-import component -->
export default defineComponent({
  name:'App',
  components: {
    HelloWorld,
    // <!-- Don't touch me-register component -->
  }
})
</script>

Cooperate with api.insertBefore this API to insert the specified content before the specified matching position of the file

export default {
  sub: {
    updateFiles: function () {
      const answers = this.$answers;
      return {
        "src/App.vue": function (content, options) {
          return api.insertBefore(content, {
            "// <!-- Don't touch me-import component -->": `import ${answers.nameObj.upperFirstCamelCase} from'./components/${answers.category}/${answers.nameObj.upperFirstCamelCase }.vue'`,
            "// <!-- Don't touch me-register component -->": `${answers.nameObj.upperFirstCamelCase},`,
            "<!-- Don't touch me-place component -->": `<${answers.nameObj.upperFirstCamelCase}/>`,
          });
        },
        [`src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.vue`]: function (
          content,
          options
        ) {
          return api.replace(content, {
            Template: `${answers.nameObj.upperFirstCamelCase}`,
          });
        },
      };
    },
  },
};

Daniel: Perfect. Thank you brother egg. I am now eager to try my first code generator

Mr. Egg: Welcome, looking forward to your feedback

Written at the end

Above - complete configuration

For the complete configuration of ncgen-config.js in the example, please view: https://github.com/daniel-dx/vue3-ncgen-demo/blob/master/ncgen-config.js

Below - ncgen official website

Keywords: ncgen, scaffolding, generator, code generator

Cooking a delicious CLI

Daniel.xiao — Thu, 31 Oct 2019 11:57:32 +0000

Written at the begining, I really want to write a recipe, and suffer from limited cooking ability, so the title is a lie, forgive me ^_~

Today, let's talk about the development of the command-line interface (abbreviated as CLI, the following will replace the lengthy command-line interface nouns with CLI).

After reading this article, you will have a more comprehensive understanding of developing a CLI from beginning to end.

You can also bookmark this article. When you want to develop a CLI, come back and you will always find what you want.

Daniel: Cola and potato chips are ready, waiting for you to start

All right. Let's go! <(￣︶￣)↗[GO!]]

> Take the first step: Initialize the project

Create an empty project directory (the following is an example of cook-cli, so here we name it cook-cli), then type the command at the directory path to initialize, the process is as follows:

$ mkdir cook-cli
$ cd cook-cli
$ npm init --yes

The npm init command will initialize the directory to a Node.js project, which will generate a package.json file in the cook-cli directory.

Adding --yes will automatically answer all the questions that were asked during the initialization process. You can try to remove the parameter and answer them yourself.

> Through main line: CLI skeleton codes

The project is initially complete, then we add the skeleton codes and let the CLI fly for a while.

Implementer

We create the src/index.js file, which is responsible for implementing the functional logic of the CLI. code show as below:

export function cli(args) {
    console.log('I like cooking');
}

Spokesperson

Then create the bin/cook file, which is the executable entry file for the CLI and the spokesperson for the CLI in the executable environment. code show as below:

#!/usr/bin/env node

require = require('esm')(module /*, options*/);
require('../src').cli(process.argv);

Careful, you will find that the esm module is used here. Its function is to let us use the ECMAScript modules specification to load modules directly in the JS source code, ie use import and export directly. The code in src/index.js above can directly write export thanks to this module.

(Run npm i esm in the project root path to install the module)

External publicity

We have spokesperson, but we must be publicized. So add a bin statement to package.json to announce the existence of the spokesperson. as follows:

{
  ...
  "bin": {
    "cook": "./bin/cook"
  },
  ...
}

> Frequent rehearsal: Local development and debugging

Local development and debugging is essential before the CLI is available, so a convenient debugging way is necessary.

Daniel: Developing web applications, I can debug features through a browser. What did the CLI get?

The CLI is running on the terminal, so we have to register it as a local command line. The way is very simple, run the following command in the project root path:

$ npm link

This command will register a cook CLI in the local environment and link its execution logic codes to your project directory, so it will take effect as soon as you update the code.

Try running the following command:

$ cook

Daniel: Nice! But I still have a problem, I want to set a breakpoint in vscode to debug, which sometimes makes it easier to troubleshoot the problem.

You are right. That is also very simple.

Add the following configuration to vscode. The path is: Debug > Add Configuration. Modify the value of args according to the actual command parameters to be debugged.

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Cook",
            "program": "${workspaceFolder}/bin/cook",
            "args": ["hello"] // Fill in the parameters you want to debug
        }
    ]
}

> Intent recognition: parameters analysis

Insert an episode: although you may use various CLIs at work, it is necessary to give a brief introduction to some of the terms that CLI refers to:

Command and Subcommand

# cook is a command
$ cook

# start is the subcommand of cook
$ cook start

Options

# -V is an option for short flag mode (note: only one letter, multiple letters means multiple options)
$ cook -V

# --version is the option for long name mode
$ cook --version

Parameters

# source.js and target.js are both parameters of the cp command
$ cp source.js target.js

In fact, subcommands are also parameters of the command

Ok, from the above introduction, we know if we want to implement a CLI, the analysis of the input parameters (including subcommand, options, argument) can not escape, then we will face them.

commander: Hey, brother, don't be afraid. I am here!

Yes, brother, it’s good to see you. Next, we will use the commander module to parse the parameters. The process and example are as follows:

Module installation

npm i commander

src/index.js example

......
import program from 'commander';

export function cli(args) {
    program.parse(args);
}

Just one sentence to get it, so cool.

Daniel: What about the input parameters? How to use it?

In the next example, we will use these parsed input parameters. So please don't worry about it now.

> Can't live without you: version and help

The version and help information is a part of the CLI that must be provided, otherwise it is too unprofessional. Let's see how to achieve it.

Modify src/index.js with the following code:

import program from 'commander';
import pkg from '../package.json';

export function cli(args) {
    program.version(pkg.version, '-V, --version').usage('<command> [options]');

    program.parse(args);
}

It's done by chained calls to program.version and usage, and it's still cool.

Try running the following command:

$ cook -V

$ cook -h

> Add a general: Add a subcommand

Now let's start to enrich the functionality of the CLI, starting with adding a subcommand start.

It has a parameter food and an option --fruit, the code is as follows:

......
export function cli(args) {
  .....

  program
    .command('start <food>')
    .option('-f, --fruit <name>', 'Fruit to be added')
    .description('Start cooking food')
    .action(function(food, option) {
      console.log(`run start command`);
      console.log(`argument: ${food}`);
      console.log(`option: fruit = ${option.fruit}`);
    });

  program.parse(args);
}

The above example demonstrates how to get the parsed input parameters. In action you can get everything you want. What you want to do is up to you.

Try running the subcommand:

$ cook start pizza -f apple

> Seeking foreign aid: Calling external commands

Sometimes we need to call external commands in the CLI, such as npm.

execa: I am going to perform. ┏ (^ω^)=☞

Module installation

$ npm i execa

src/index.js example

......
import execa from 'execa';

export function cli(args) {
  .....

  program
    .command('npm-version')
    .description('Display npm version')
    .action(async function() {
      const { stdout } = await execa('npm -v');
      console.log('Npm version:', stdout);
    });

  program.parse(args);
}

The above external command is called by execa is npm -v. Let's print the version of npm:

$ cook npm-version

> Promoting communication: providing human interaction

Sometimes we want the CLI to interact with the user in a question-and-answer way, and the user can provide the information we want by inputting or selecting.

At thie moment, a strong wind blew. Inquirer.js ran on the colorful clouds.

Module installation

$ npm i inquirer

The most common scenarios are: text input, boolean option, radio, check. Examples are as follows:

src/index.js example

......
import inquirer from 'inquirer';

export function cli(args) {
  ......

  program
    .command('ask')
    .description('Ask some questions')
    .action(async function(option) {
      const answers = await inquirer.prompt([
        {
          type: 'input',
          name: 'name',
          message: 'What is your name?'
        },
        {
          type: 'confirm',
          name: 'isAdult',
          message: 'Are you over 18 years old?'
        },
        {
          type: 'checkbox',
          name: 'favoriteFrameworks',
          choices: ['Vue', 'React', 'Angular'],
          message: 'What are you favorite frameworks?'
        },
        {
          type: 'list',
          name: 'favoriteLanguage',
          choices: ['Chinese', 'English', 'Japanese'],
          message: 'What is you favorite language?'
        }
      ]);
      console.log('your answers:', answers);
    });

  program.parse(args);
}

The code is simple, let's directly see the result:

> Reduce anxiety: display hints in processing

The human interaction experience is very important. If you can't complete the work immediately, you need to feedback the progress of the user's current work in time, which can reduce the user's waiting anxiety.

ora and listr shoulder to shoulder, marching neatly, oncoming.

The first thing is ora.

Module installation

$ npm i ora

src/index.js example

......
import ora from 'ora';

export function cli(args) {

  ......

  program
    .command('wait')
    .description('Wait 5 secords')
    .action(async function(option) {
      const spinner = ora('Waiting 5 seconds').start();
      let count = 5;

      await new Promise(resolve => {
        let interval = setInterval(() => {
          if (count <= 0) {
            clearInterval(interval);
            spinner.stop();
            resolve();
          } else {
            count--;
            spinner.text = `Waiting ${count} seconds`;
          }
        }, 1000);
      });
    });

  program.parse(args);
}

Here is the result:

listr followed.

Module installation

$ npm i listr

src/index.js example

......
import Listr from 'listr';

export function cli(args) {
  ......

  program
    .command('steps')
    .description('some steps')
    .action(async function(option) {
      const tasks = new Listr([
        {
          title: 'Run step 1',
          task: () =>
            new Promise(resolve => {
              setTimeout(() => resolve('1 Done'), 1000);
            })
        },
        {
          title: 'Run step 2',
          task: () =>
            new Promise((resolve) => {
              setTimeout(() => resolve('2 Done'), 1000);
            })
        },
        {
          title: 'Run step 3',
          task: () =>
            new Promise((resolve, reject) => {
              setTimeout(() => reject(new Error('Oh, my god')), 1000);
            })
        }
      ]);

      await tasks.run().catch(err => {
        console.error(err);
      });
    });

  program.parse(args);
}

Still directly to see the result:

> Colorful: Make life no longer monotonous

chalk: I am a literary youth, I live for art, It’s me. <(￣ˇ￣)//

Module installation

$ npm i chalk

src/index.js example

.....
import chalk from 'chalk';


export function cli(args) {

  console.log(chalk.yellow('I like cooking'));

  .....

}

With the color of the CLI, is it to make you feel more happy?

> Decoration door: Add a border

boxen: This is my masterpiece, look at me! <(ˉ^ˉ)>

Module installation

$ npm i boxen

src/index.js example

......
import boxen from 'boxen';

export function cli(args) {

  console.log(boxen(chalk.yellow('I like cooking'), { padding: 1 }));

  ......
}

Well, it looks professional:

> Announcement: Publish to everyone

If you publish in scope mode, for example @daniel-dx/cook-cli. Then add the following configuration to package.json to allow you to publish it smoothly (of course, if you are a paid member of npm, then this configuration can be ignore)

{
  "publishConfig": {
    "access": "public"
  },
}

Go go go:

$ npm publish

OK, you have already released your CLI to the world, now you can go to https://www.npmjs.com/ to check your CLI.

> Sweet reminder: You should upgrade now

update-notifier: I finally got to play. I have waited until the flowers have been thanked. X_X

Module installation

$ npm i update-notifier

src/index.js example

......

import updateNotifier from 'update-notifier';

import pkg from '../package.json';

export function cli(args) {
  checkVersion();

  ......
}

function checkVersion() {
  const notifier = updateNotifier({ pkg, updateCheckInterval: 0 });

  if (notifier.update) {
    notifier.notify();
  }
}

For local debugging, we will reduce the local CLI version, change the version of package.json to 0.0.9, and then run cook to see the effect:

o(￣︶￣)o Perfect!

The above details some of the necessary or common steps to develop a CLI.

Of course, if you just want to develop a CLI quickly, you can consider to use frameworks such as oclif that are created for the development of the CLI, out of the box.

As a programmer, we need to pay some time and energy for the ins and outs of the solution, the understanding of past and present, so that we can be more practical and go further.

Ok, that's all.

Here is the sample source code: https://github.com/daniel-dx/cook-cli

┏(^0^)┛ goodbye my friends! ByeBye...

React Hooks - How to use state safely

Daniel.xiao — Tue, 22 Oct 2019 11:51:11 +0000

Hi, Daniel, let's talk about "How to use state safely" today?

Daniel: Safe? Is it dangerous to use the state of React Hooks? X_X I am so nervous now~

Take it easy, man. About safety, I will give you an example. Without the example, it is difficult to explain it clearly.

Daniel: Ok. Does anyone reading this article know about React Hooks?

Maybe some one don't know much about it, so I will briefly introduce it:

React Hooks is a good thing, it allows you to implement stateful components with pure functions, so you don't have to worry about whether the component is stateful or stateless, no need to hesitate between the pure function and the class implementation (of course, the benefits are many, not only this. I will write an article about "Why React Hooks" later.)

Once you are on the way of React Hooks, you will encounter a variety of strange problems.

This is normal, the birth of a new thing, always accompanied by various problems, and then constantly upgraded and grew up in the fight, and eventually became. . .

Daniel: Hey, don’t pull away.

🤪 If you have read the official documentation on React Hooks and have seen some examples inside, you may think that it is quite simple, it is just changed to use state with useState, no difficulty.

However, just in the moment you relax your vigilance, "danger" is quietly coming down in some corners.

Daniel: Where is the danger? Where ? Where ? Where ?

😅 ~~

For the state value to get, you may have got an old value that is not what you expected, that is, not the latest state value.

You need to stay awake all the time to make it possible to get around these "dangers."

Daniel: 😵

You look confused., I will give an example now.

Example is coming: When you fill out some information on the form and then leave the form, you want to automatically save it as a draft, so you can restore it the next time you come in.

The implementation of the simplified version is given below:

import React, { useState, useEffect } from "react";

export const UseStateDemoComp1 = () => {
  const [name, setName] = useState('daniel');

  useEffect(function() {
    return () => {
      saveDraft()
    }
  }, [])

  function saveDraft() {
    console.log('Save Draft:', name);
  }

  return (
    <div>
      <form>
        <input value={name} onChange={e => setName(e.target.value)}></input>
      </form>
    </div>
  );
};

The code seems to have no problem.

The function passed to useEffect returns a function that is equivalent to the original componentWillUnmount lifecycle method, which is called only when the component is destroyed. We can execute some logic in the method, here call the saveDraft method, get the value of the name state, and save.

Did you find the problem? If not, then let's take a look at the picture and see what the problem is:

Clicking the Toggle button will destroy the component, so the destroy action will be triggered. As you can see from the gif, we filled in "sarah", but in the method of destroying execution, the value obtained is "daniel".

Daniel: Why is this? Shouldn't it be the latest value? 😶

Because the dependency of useEffect is an empty array, it will only be executed once during the entire component life cycle, that is, after the component finishes rendering for the first time, and the state value used in the useEffect method is the latest state value at that time. Can be understood with a snapshot. In the next time, no matter how many times the component is re-rendered, it will not change the value of the state inside, because it is just the snapshot at that time.

Some one may say that we can fix it by adding name to the array of useEffect depends on it. as follows:

useEffect(function() {
    return () => {
      saveDraft()
    }
}, [name])

It seems to satisfy the needs, but there are still problems. Because I only want to save when the component exits, but the result is that once the form field value changes, it will be saved, and the save operation becomes very frequent.

Daniel: So you want to say that React Hooks has nothing to do with this?

Of course not, the above requirements can be achieved by useRef and useEffect. How to achieve it? Try it yourself. When you implement it, you will find that the code is not only lengthy, but also poorly readable.

Daniel: Ok, start your show now.

With the above example, here is a description of safely using state:

"Safely using state is that no matter when and where you read the value of state, it always meets your expectations, always the latest value, without you being careful to judge whether it will be an old value that has not been updated"

The official provided custom hooks capabilities, it want to continue to improve Hooks through the efforts of the community.

Next, we will use [nice-hooks], the third-party custom Hooks open source project, using its useSingleState instead of useState, here is the example:

import React, { useEffect } from "react";
import { useSingleState } from "nice-hooks";

export const DemoComp1 = () => {
  const [state, setState] = useSingleState({
    name: 'daniel'
  });

  useEffect(function() {
    return () => {
      saveDraft()
    }
  }, [])

  function saveDraft() {
    console.log('Save Draft:', state.name);
  }

  return (
    <div>
      <form>
        <input value={state.name} onChange={e => setState({name: e.target.value})}></input>
      </form>
    </div>
  );
};

Let's take a look at the effect directly. Perfect~

Here is a hook about useSingleState: it uses state like this.state and this.setState in the form of class, so it's very easy to get started. The most important thing is that it can safely use state and have the ability to callback.

Finally, we use the hook useLifeCycle to improve the code. Now, the code below is a lot better than using the official hooks directly.

import React from "react";
import { useSingleState, useLifeCycle } from "nice-hooks";

export const DemoComp1 = () => {
  const [state, setState] = useSingleState({
    name: 'daniel'
  });

  useLifeCycle({
    willUnmount() {
      saveDraft()
    }
  })

  function saveDraft() {
    console.log('Save Draft:', state.name);
  }

  return (
    <div>
      <form>
        <input value={state.name} onChange={e => setState({name: e.target.value})}></input>
      </form>
    </div>
  );
};

Time is really fast, and it’s time to say goodbye.

If you feel that this article is ok, please give it a heart or clap.

If you think nice-hooks is helpful, please give it a ☆.

ByeBye!

Keywords: react, hooks, nice-hooks

Develop a form in one minute

Daniel.xiao — Thu, 17 Oct 2019 08:52:31 +0000

The previous article "How to choose a open source project that generate forms from a JSON schema" I recommend ncform, today I will talk about how to use ncform for development form fast.

<(￣︶￣)>。

The form is actually a visual description of a data, presented to the user in a friendly way, to achieve the purpose of collecting information filled by the user.

Today, let's put aside the traditional form development way to understand the new and efficient way to develop forms (after reading, you may be able to get rid of the boring form development career)

╰(￣▽￣)╭

Form development first step: know your data structure

The following is the data structure of the form to be developed today, not complicated, but not simple

{
  firstname: 'daniel',
  lastname: 'xiao',
  fullname: 'daniel.xiao',
  gender: 'man',
  language: [ 'english', 'chinese' ],
  birthday: '',
  luckyNum: 9,
  luckyColor: '',
  email: 'danieldx666@126.com',
  favoriteMusics: [
    {
      type: '',
      score: 5
    }
  ],
  remarks: ''
}

Form development second step: generate ncform schema

We can quickly generate the basic structure of the ncform schema through the ncform schema generator.

OK, in less than a few seconds, a form is generated.

Of course, this form is now ready to use, but it's too simplistic, let's optimize it. <(￣︶￣)↗[GO!]

ncform provides a playground, you can copy the generated ncform schema to the playground for optimization. The following demos are all performed at the playground.

Optimize the name field: let users fill in as little as possible

// The following is the configuration information of the modified related fields.
    "firstname": {
      "type": "string",
      "ui": {
        "label": "First Name",
        "columns": 6
      }
    },
    "lastname": {
      "type": "string",
      "ui": {
        "label": "Last Name",
        "columns": 6
      }
    },
    "fullname": {
      "type": "string",
      "valueTemplate": "dx: {{$root.firstname}} + '.' + {{$root.lastname}}",
      "ui": {
        "label": "Full Name"
      }
    },

Optimize the gender field: pick one of two, the best choice is radio

// The following is the configuration information of the modified related fields.
    "gender": {
      "type": "string",
      "default": "man",
      "ui": {
        "label": "Gender",
        "widget": "radio",
        "widgetConfig": {
            "enumSource": [
              {
                  "value": "man",
                  "label": "Man"
              },
             {
                  "value": "woman",
                  "label": "Woman"
              }
            ]
        }
      }
    },

Optimize the language field: not too many items and support multiple choices, the check box is a good choice

// The following is the configuration information of the modified related fields.
    "language": {
      "type": "array",
      "ui": {
        "label": "Language",
        "widget": "checkbox",
        "widgetConfig": {
            "enumSource": [
                {
                    "label": "English",
                    "value": "eng"
                },
                {
                    "label": "Chinese",
                    "value": "cn"
                }
            ]
        }
      }
    },

Optimize the birthday field: date we will use the date picker

// The following is the configuration information of the modified related fields.
    "birthday": {
      "type": "string",
      "ui": {
        "label": "Birthday",
        "widget": "date-picker"
      }
    },

Optimize luckyNum and luckyColor: for numbers and colors, there are corresponding widgets

// The following is the configuration information of the modified related fields.
    "luckyNum": {
      "type": "number",
      "ui": {
        "label": "Lucky Num",
        "widget": "input-number"
      }
    },
    "luckyColor": {
      "type": "string",
      "ui": {
        "label": "lucky Color",
        "widget": "color-picker"
      }
    },

Optimize the email field: For email, it is necessary to add a email format validation rule. Let's add another rule - required.

// The following is the configuration information of the modified related fields.
    "email": {
      "type": "string",
      "ui": {
        "label": "Email"
      },
      "rules": {
          "required": true,
          "email": true
      }
    },

Optimize the favoriteMusics field: I think the table is quite nice.
Optimize the type field: There are many items in the music type, so it's better to use the drop-down box
Optimize the score field: give a few stars feels good

// The following is the configuration information of the modified related fields.
    "favoriteMusics": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": {
            "type": "string",
            "ui": {
              "label": "Type",
              "widget": "select",
              "widgetConfig": {
                  "enumSource": [
                    {
                        "value": "1",
                        "label": "Pop Music"
                    },
                    {
                        "value": "2",
                        "label": "Rock Music"
                    }
                  ]
              }
            }
          },
          "score": {
            "type": "number",
            "ui": {
              "label": "score",
              "widget": "rate"
            }
          }
        },
        "ui": {
          "label": "favoriteMusics"
        }
      },
      "ui": {
        "label": "favoriteMusics",
        "showLegend": false,
        "widget": "array-table"
      }
    },

Optimize the remarks field: people who write notes may write more, so the textarea is better.

// The following is the configuration information of the modified related fields.
    "remarks": {
      "type": "string",
      "ui": {
        "label": "remarks",
        "widget": "textarea"
      }
    }

Now, the ncform schema for this form has been finished, let’s take a big photo. ♪(^∇^*)

Advertising time: ncform v1.0.0 officially released ( Star the repo to support ncform if you like it. O (∩ _ ∩) O)

Main update features:

Fully tested: This version incorporates a large number of automated tests to ensure the quality of the project.
Automatic support for dx expressions: User-defined widget's widgetConfig automatically supports dx expressions, which is more friendly to developers.

The relevant link:

Thanks for reading, bye!

tags: vue, json-schema, form, generator

Is the React Hooks enough?

Daniel.xiao — Wed, 16 Oct 2019 03:35:59 +0000

Here assumes that you are familiar with Hooks, the new feature on React.

Now, we are going to talk about whether the useXXX APIs currently available in React Hooks is sufficient and whether it can meet our daily development needs.

First, the most important: State

Daniel: Hey, useState is such a core API, isn't it specifically for dealing with state?

Yes, absolutely. Those of you who have used useState should know that the original this.setstate can now be replaced by the method setXXX in the return value of useState, as follows:

const [ count, setCount ] = useState(0);

Let's make a simple comparison between class and Hooks:

# get state

class: this.state.count
Hooks: count

# set state

class: this.setState({count: 1})
Hooks: setCount(1)

Daniel: That's easy. Anyone who's ever heard of React Hooks knows it. So that's what you're going to tell me?

Of course not. Did you find anything missing? Does the original this.setstate() has a second parameter? Is this second parameter a callback method? Is this method called after state update successful?

Daniel: That sounds like something you said, but callback is something I don't use very often. Can you tell me about the scenes used?

Of course, Such as city selector. When you select a province, you need to get the corresponding data of cities, and this moment callback will be used. Let's look at an example of setState:

class App extends React.Component {
  constructor() {
    this.state = {
      pId: 0
    };
  }

  onProvinceChanged(val) {
    this.setState({ pId: val }, () => {
      fetchCities(this.state.pId);
    });
  }

  ...
}

Consider that without callback, it would be harder to do something else exactly after the state update

Daniel: So React Hooks can't fix it? I don't believe it.

Of course not. This requirement can be achieved by using useEffect. Let's take a look at how this can be done using the Hooks approach

function App() {
  const [pId, setPId] = useState(0);

  useEffect(
    function() {
      fetchCities(pId);
    },
    [pId]
  );

  function onProvinceChanged(val) {
    setPId(val);
  }
}

Daniel: So what are you going to say?

If you look at the above codes, they looks like the event pattern, one is listening (useEffect listens for changes in pId and then executes the method) and one is firing the event(setPId).

The event pattern can act as a decoupling of the code, but it also means that the code is loose, with one side only responsible for triggering events and not caring about what happens next. But our requirements here are very clear, I chose the province, the next is definitely to load the city data, the logic of these two steps is related. So, of course, I hope to be close to the better, so that the code is more organized, read more smoothly, easy to understand.

Anyway, I feel that I still have to use the callback mode. It’s important to complete the task, but the readability and maintainability of the code are also very important.

Daniel: But didn't you say that useState doesn't provide callback? So what can we do now?

Of course, the official is not currently provided, but we can do it in the way of custom Hooks.

Now, we will use the third party open source library nice-hooks to meet our requirements.

Rewrite the above example in the way nice-hooks provide, as follows:

import { useStateCB } from 'nice-hooks';

function App() {
  const [pId, setPId] = useStateCB(0);

  function onProvinceChanged(val) {
    setPId(val, newPID => {
      fetchCities(newPID);
    });
  }
}

You see, with the return of callback, Hooks are at least as good at handling state as this.setstate and are not left behind.

Ok, that's it for Hooks on handling state.

==== ☕ Suggest taking a break and looking into the distance for a few minutes ====

Next, talk about the life cycle.

As we all know, every component has its life cycle from birth to death. In React, often used are: componentDidMount, componentDidUpdate, componentWillUnmount.

Daniel: React Hooks have a lot of corresponding useXXX methods, right?

I think so too, but the reality is that we haven't found an official useXXX method for this. However, we can still implement these lifecycles with the official API currently available. So let's go through them one by one.

componentDidMount

This lifecycle method is executed after the component is mounted, and we can use useEffect to do this. How? Let's do an example

useEffect(() => {
  console.log('Do something, such as fetching data');    
}, [])

Passing an empty array means that the dependency is invariant, so it only executes once after the first rendering of the component, which is equivalent to componentDidMount

componentWillUnmout

This function is executed when the component is about to be destroyed. Accordingly, we can still use useEffect to achieve this purpose. See the following example:

useEffect(() => {
  console.log('Do something, such as fetching data');
  return function() {
      console.log('Do something before destroyed')
  }
}, [])

Since the destroy action is only executed once throughout the life cycle, we can add a return function to the first example that will be executed when the component is destroyed

componentDidUpdate

This function is executed whenever the props, state of the component changes, and you can still use useEffect to achieve this

useEffect(() => {
  console.log('Do something when props / state changes')  
})

No dependency values are provided, so they are executed after each rendering, similar to componentDidUpdate.

But here is a little problem, that is, when it is initialized, it will be executed here too, that is, it will include DidMount. It needs to write some additional code to support it, but I'm not plan to expand it here.

We can also use useEffect for the purpose of watching a state or props change. So you will find that the life cycle is mixed in a bunch of useEffect code, not so straightforward.

Although useEffect can implement various lifecycle methods, it is still the problem, the readability and maintainability of the code are important. We can also use the nice-hooks. The usage is very simple and the code is clear at a glance.

useLifeCycle({
  didMount() {
    console.log('Do something, such as fetching data');
  },
  didUpdate() {
    console.log('Do something when props / state changes')   
  },
  willUnmount() {
    console.log('Do something before destroyed')  
  }
});

In addition, the life cycle method of the class component has a small flaw, that is, when you need to destroy some things declared during initialization, such as event listeners, such as timers, registration and destruction logic is forcibly written in different places, easy to neglect and cause a bug, so useLifeCycle provides a didMountAndWillUnmount configuration to write the logic in pairs, as follows:

useLifeCycle({
    didMountAndUnmount: [
      {
          didMount() {
              console.log('register foo event)
          },
          willUnmount() {
              console.log('unregister foo event)
          }
      },
      {
          didMount() {
              console.log('register bar event)
          },
          willUnmount() {
              console.log('unregister bar event)
          }
      }
    ]
})

Then the recommended practice is to write the paired logic in didMountAndWillUnmount, and others in didMount and willUnmount.

==== ☕ I suggest you take a break and listen a piece of music ====

Finally, let's talk about Instance Variables

When using Hooks to write components, because it is now a pure function component, you can't declare instance variables like class. The following variable is problematic.

function comp() {
    let name = 'daniel';
}

Daniel: The variables declared in the function are normal. Is there a problem?

You may have modified the value of name somewhere, and expect that when you use the name variable, its value is the last modified value.

Unfortunately, it is counterproductive, because each time the component is re-rendered, the rendering function will be re-executed, and the variable will be re-initialized.

Daniel: Oh, it seems to be, now there is only one render function left, and it will be re-executed every time. What should we do?

We can use the official hook useRef, whose current attribute will always hold the last value, as follows:

function comp() {
  const nameRef = useRef('daniel');

  function someFn() {
    // get
    let name = nameRef.current;
    // set
    nameRef.current = 'sarah';
  }
}

Once we have modified the value of the current property, the current value will remain the last modified value the next time we re-render, achieving the effect of the instance variable.

Daniel: I guess you will say something, such as the code is not very readable.

Yeah, you are right, the code looks unfriendly.

It is still recommended to use nice-hooks, its useInstanceVar hook, similar to useState, the difference is that setXXX does not cause re-rendering, just changed the value of the instance variable. The example is as follows:

function comp() {
  const [nameVar, setNameVar] = useInstanceVar('daniel');

  function someFn() {
    // get
    nameVar;
    // set
    setNameVar('sarah');
  }
}

It is recommended to use Var as a suffix to distinguish state when declaring variable names, such as [ xxxVar, setXXXVar ]

==== Ending dividing line ====

All of the above are using nice-hooks, a third-party open source library to make React Hooks work better.

If you have some good suggestions, please feel free to submit some issues;

If you feel that it is useful to you, please add a star to this open source project.

Thanks for reading!

Form generation scheme from a JSON schema

Daniel.xiao — Wed, 16 Oct 2019 03:33:03 +0000

Sarah: "There are a lot of forms for new business system to be developed. Is there a solution that make me to do this task efficiently and happily?"

Oh, I think, configuration development concept should be more suitable, and the community also has some open source projects of this concept.

Sarah: "What is the configuration development concept?"

On, just simply define a JSON configuration data to develop the form.

Sarah: "Great, I am going to search now."

After a while...

Sarah: "There are a lot of them, but which one do I choose?"

Well, let's talk about the selection of configuration concept form development implementation.

1. Document

This is essential, no documentation, who dares to use it?

2. Live Playground

It's best to have a super-intuitive, super-image, super-convenient way to show most or all of the features, which might be like this:

3. Out Of The Box

It is best to come with a set of commonly used form controls and validation rules to meet most common scenarios, so you don't have to expand too much on your own.

For example, the following components are often used:

For example, the following verification rules are often used:

4. Expansion Ability

No more components and validation rules can meet all the requirements. So must be friendly (simple and convenient) support developers to customize their own form components and validation rules

5. Support for complex data structures

A form data structure, in addition to a simple object type with only one level attribute (such as {name: 'daniel', age: 18}), many actual scenes might look like this:

{
  "name": {
    "firstName": "daniel",
    "lastname": "xiao"
  }
}

It might be like this:

{
  "name": "daniel",
  "hobbies": [
    {
      "id": 1,
      "name": "Coding"
    },
    {
      "id": 2,
      "name": "Singing"
    }
  ]
}

Summary: must support for array type, object nested object, object nested array, array items are normal type or object type or array type

6. Form Control Interaction

The form controls are not independent, they interact with each other

Here are some representative scenes：

"Agree to continue" type

"City Selector" type
"Required filling in when more than 18 years old" type
"Date Comparison" type
"Full name autofill" type

I feel that there are already quite a lot of them. I will not list them one by one.

So, sarah, if the candidate open source project can meet the above mentioned conditions, then it can be used.

Sarah: "Oh, do you have a recommendation?"

Of course. I recommend ncform

ncform, a nice form development way that generates form UIs and their interactions with just configuration.

Comes with standard components and validation rules, out of the box.

Have powerful control interaction and extension capabilities, do what you want.

Visit the official Github for more information: https://github.com/ncform/ncform

tags: vue, form, generator, json-schema