Translating the second part of the tutorial:
"I wrote the first article yesterday, and the response was average."
First, let me share our official website:
https://kennana.github.io/toolkit-use/
Our Twitter handle:
https://twitter.com/Toolkituse
And our GitHub repository:
https://github.com/KenNaNa/toolkit-use
Today, we will continue writing the second article to further optimize our tutorial. Let's implement a copy functionality.
First, we need to install the clipboard copy plugin:
yarn add clipboard
Create a new src directory and inside it, create clip/index.ts:
According to the clipboard documentation, we need to pass the copy content and the element for the copy action to its class.
import Clipboard from "clipboard";
import { ToolkitUseClipboardOptions } from "../../types/clip";
class ToolkitUseClipboard {
private _data: string = '';
private _class: string = '';
private _clipboard: Clipboard;
private _options: ToolkitUseClipboardOptions;
constructor(options: ToolkitUseClipboardOptions) {
this._class = options.className;
this._data = options.message;
this._clipboard = new Clipboard(this._class, {
text: () => this._data
});
this._options = options;
}
copy(): Clipboard {
this._clipboard.on('success', () => {
this._options.onSuccess && this._options.onSuccess();
this._clipboard.destroy();
});
this._clipboard.on('error', () => {
this._options.onError && this._options.onError();
this._clipboard.destroy();
});
return this._clipboard;
}
}
export {
ToolkitUseClipboardOptions,
ToolkitUseClipboard
};
We still need to add a type. Create a new types/clip.ts file in the project's root directory:
export interface ToolkitUseClipboardOptions {
message: string;
className: string;
onSuccess?: () => void;
onError?: () => void;
}
Then export the copy function and the type in src/index.ts:
import { ToolkitUseClipboard, ToolkitUseClipboardOptions } from './clip/index';
export {
ToolkitUseClipboard,
ToolkitUseClipboardOptions,
};
After writing this, we need to configure the necessary settings in rollup.config.js:
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';
const extensions = ['.js', '.ts'];
const pkg = require('./package.json');
const version = pkg.version;
const license = pkg.license;
const author = pkg.author;
const banner =
'/*!\n' +
` * ${pkg.name} v${version}\n` +
` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
` * Released under the ${license} License.\n` +
' */';
module.exports = {
input: 'src/index.ts',
output: [
{
file: 'dist/index.umd.js',
format: 'umd',
name: 'utools',
banner
},
{
file: 'dist/index.esm.js',
format: 'esm',
name: 'utools',
banner
}
],
plugins: [
nodeResolve({
extensions,
modulesOnly: true
}),
commonjs(),
typescript(),
babel({
babelHelpers: 'runtime',
include: 'src/**',
exclude: 'node_modules/**',
extensions
}),
terser()
]
};
Execute the following command in the terminal:
npm run build
You will find the index.esm.js and index.umd.js files in the dist directory.
That's it for now. Stay tuned for more updates.
Top comments (0)