AtomTools
Lightning-fast, powerful, and ready-to-use TypeScript toolkit
Introduction
🌟 AtomTools is a modern TypeScript-based JavaScript toolkit designed to provide indispensable utility functions for project development. With simple import statements, you can quickly integrate these utility functions into your project without any complex configuration.
Star History
Reasons to Choose AtomTools
In traditional business project development, developers often face the need to write a large number of repetitive functions, type definitions, and constants. These codes often need to be ported and reused across different projects, leading to low efficiency.
The original intention of AtomTools is to provide an efficient and convenient solution, helping developers to easily manage and use these common programming elements. With AtomTools, you will be able to simplify the development process and focus more on the implementation of core business logic.
Key Features
🌈 Full Compatibility: Perfectly compatible with any project developed using JavaScript or TypeScript, including WeChat mini-programs.
🚀 Blazing Speed: Enhance development speed, making programming faster and more efficient.
📠 Type Safety: Entirely written in TypeScript, providing precise type hints to enhance code robustness.
🍃 Lightweight Design: Focuses on performance and practicality, with no redundant dependencies, keeping the library lightweight.
📦 Plug-and-Play: Ready to use immediately after installation, without complex configuration.
Installation
Install atom-tools via NPM, YARN, or PNPM.
npm install atom-tools
pnpm add atom-tools
yarn add atom-tools
Example
It is recommended to import AtomTools on an as-needed basis.
Utilities
import { pick } from ‘atom-tools’
interface Person {
name: string;
age: number;
email: string;
}
const person = {
name: ‘John Doe’,
age: 30,
email: ‘john.doe@example.com‘
};
// Use the pick function to select ‘name’ and ‘age’ properties
const selectedFields = pick(person, [‘name’, ‘age’]);
console.log(selectedFields); // Output: { name: ‘John Doe’, age: 30 }
Vue Custom Directive
Am I in the viewport?
const handleVisibilityChange = (isVisible) => {
console.log(Element is ${isVisible ? ‘visible’ : ‘not visible’}!);
};
const visibilityOptions = {
callback: handleVisibilityChange,
options: {
root: null, // or specify an element as a reference
rootMargin: ’50px’, // can be modified as needed
threshold: 0.5 // can be modified to an array or a value
}
};
Developer Community
Looking for like-minded friends to participate in the development of AtomTools. If you are passionate about TypeScript, JavaScript toolkit development, welcome to join us and build a more powerful, easy-to-use set of programming tools together.
Future Plans
Vue Custom Directives: Provide a variety of ready-to-use Vue custom directives to simplify the development of Vue applications.
Component Encapsulation: Plan to add more encapsulations of commonly used components to enhance development efficiency and user experience.
Code Snippet Collection: Integrate a series of common code snippets to help developers quickly solve specific problems.
AtomTools is committed to becoming a comprehensive front-end development toolkit, helping developers enhance productivity and achieve a more elegant programming experience. Join us and build the future together!
