Introduction

This blog records my development journey of ygktool.

Origin

Around July 2019, I was already tired of mindlessly assembling HTML and CSS, and I wanted to get closer to the level of front-end experts. Additionally, the seniors I had been following also had their own (very powerful) toolkits, which inspired me to come up with the idea of creating a toolkit.

Aspiration

At least have an influence similar to a wooden box in China?

To be recommended in others' articles. For example, on Zhihu.

Journey

Before February 2020, I was still using the traditional PHP and jQuery architecture. To create a SPA effect, I stubbornly used iframe. Surprisingly, the visual effect turned out quite well.

After February 2020, I started to get in touch with NPM. Since I already had a foundation in React, I quickly set up ygktool pro using Create-react-app. Soon after, I began the migration work, which was quite tedious (at that time, I didn't use VSCode and had to format the code manually). Before long, pro became the official version, and I bid farewell to PHP + jQuery.

Tech Stack

Thanks to these excellent libraries/frameworks. Other smaller libraries that were used are not listed.

• Create-react-app
• Typescript
• Sass
• MDUI
• Express

Technical Details

Hook Error When Using npm link

When testing the UI library with npm link, an error occurs if the component uses Hooks. I found a solution in the GitHub issue regarding hooks. The problem was that the two libraries were using their own React dependencies. The solution was to link the app's React to the UI library's React.

1    npm-link-shared ./node_modules/mdui-in-react/node_modules . react && npm start

Class Reference Without Declaration Files

The author of the gif.js library did not publish declaration files, so I had to add the module myself. I added the following in react-app-env.d.ts:

1declare module "gif.js" {
2	class GIF {
3		constructor(config);
4	}
5	export = GIF;
6}

Detecting Device's Night Mode

Don't forget the parentheses in the query string!

1window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

React Event Pool

While developing the file tree tool, I discovered something interesting:

1for (var i = 0; i < e.target.files.length; i++) {
2	var freader = new FileReader();
3	freader.readAsDataURL(file);
4	console.log(e.target.files); // ok
5	freader.onload = (fe) => {
6		console.log(e.target.files); // error!
7	};
8}

Following the console's hint, I checked the official documentation:

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. Thus, you cannot access the event in an asynchronous way.

Now I understood that as long as I save the event properties in a variable before the callback function, I could use them in the callback.

Wasting Time Ignoring Implicit Type Conversion

While developing the settings page, the list component would return the index of the selected item, and if the setting business function was called without a value, it would exit.

1if (!name || !value) return originSetting;

With this code, if value is 0, it would also exit...

Solution

1if (!name || (!value && value !== 0)) return originSetting;

ECMA2020 introduced new features that provide solutions to similar problems:

1let number = 0;
2let myNumber = number ?? 7; // => 0

Reflection

As WeChat mini-programs gradually develop, will they encroach on the browser market?