Processor
A simple and lightweight JavaScript data processing tool.
English | 简体中文
Generally, data is processed by the server, and the frontend application interacts with the server through the API. However, when dealing with simple data, we can leave this work to the browser which can effectively reduce the number of network requests and improve the user experience. Moreover, it is very simple to develop.
Processor is such a tool which can help you processing data on the frontend.
Installnation
npm
$ npm install @processor/coreyarn
$ yarn add @processor/coreCDN
Usage
First of all, you should create a instance of processor. You can pass by source data when created it.
import { createProcessor } from "@processor/core";
const data = [
{ name: "Patricia Clark", age: 16, sex: "male" },
{ name: "Michael Hall", age: 18, sex: "female" },
{ name: "Thomas Perez", age: 14, sex: "female" },
{ name: "Mark Taylor", age: 11, sex: "male" },
];
const processor = createProcessor(data);Or provide data later by method load.
const processor = createProcessor();
processor.load(data);Listen update event
Call onUpdate to register callback function on processor instance to get the result after processing.
processor.onUpdate((result) => {
console.log(result);
});
// result
{
current: [
{ name: "Michael Hall", age: 18, sex: "female" }
...
], // current entries
page: 1, // current page number
pageCount: 4, // page count
total: 4 // total number of entries
}Pagination
page(size?: number, current?: number) => Processor
Call page to set the maximum number of entries per page and current page number. If size equal or less then 0, it will return all of entries.
processor.page(1, 2); // maximum 1 entry per page and switch to second page.
processor.page(); // all of entriesSort
Same with lodash/orderby. You can also provide a custom sort function like Array.sort
processor.sort("name"); // single field asc
processor.sort("name", "desc"); // single field desc
processor.sort(["name", "age"]); // multiple fields asc
processor.sort(["name", "age"], ["acs", "desc"]); // multiple fields with different orders
processor.sort((a, b) => a > b); // custom sort functionSearch
search(str: string, fields?: string[]) => Processor
The default search strategy is "If any field of entry matched, it is considered valid". You can provide a searching range.
processor.search("pat"); // search all of fields
processor.search("pat", ["name"]); // only search field "name"Or you can also provide a custom search strategy.
processor.search((entires) => [...]);Filter
The filter is a quite flexible method, just see the example code below.
// name === "Patricia Clark"
processor.filter({ name: "Patricia Clark" });
// name === "Patricia Clark" || name === "Michael Hall"
processor.filter({ name: ["Patricia Clark", "Michael Hall"] });
// age > 16
processor.filter({ age: (val) => val > 16 });
// sex === "female" && age > 16
processor.filter({ sex: "female", age: (val) => val > 16 });The filter conditions can be combined at you will.
exec
Calculate immediately and return the result.
const result = processor.page(2).filter({ sex: "female" }).search("Tho").exec();How to use with Vue
From v2.0, it works for Vue 2 & 3 within a single package by the power of Vue Demi!
For Vue 2.x, you should install the Composition API Plugin before.
npm
$ npm install @vue/composition-apiyarn
$ yarn add @vue/composition-apiimport Vue from "vue";
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);Usage
npm
$ npm install @processor/vueyarn
$ yarn add @processor/vueimport { useProcessor } from "@processor/vue";
import { reactive } from "vue";
const config = reactive({
source: [], // source data
searchOption: "", // first argument of process.search()
searchFields: [], // second argument of process.search()
filterOption: {}, // argument of process.filter()
sortOption: "", // first argument of process.sort()
sortOrder: "", // second argument of process.sort()
pageSize: "", // first argument of process.page()
});
const {
data,
total,
pageCount,
currentPage, // this ref can be changed
} = useProcessor();Change config to process data.
<input v-model="config.searchOption">
<button @click="currentPage++">next</button>How to use with React
Need react version >=16.8.0.
npm
$ npm install @processor/reactyarn
$ yarn add @processor/reactimport { useProcessor } from "@processor/react";
const { processor, result } = useProcessor(data);