Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wellwelwel/node-and-vite-helpers
🌱 A personal compilation with helpers for NodeJS and Vite
https://github.com/wellwelwel/node-and-vite-helpers
classname head helpers input node react reactjs sanitizer utils vite xss
Last synced: 13 days ago
JSON representation
🌱 A personal compilation with helpers for NodeJS and Vite
- Host: GitHub
- URL: https://github.com/wellwelwel/node-and-vite-helpers
- Owner: wellwelwel
- License: mit
- Created: 2022-12-11T18:39:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-06T01:22:39.000Z (over 1 year ago)
- Last Synced: 2024-12-17T03:25:39.043Z (17 days ago)
- Topics: classname, head, helpers, input, node, react, reactjs, sanitizer, utils, vite, xss
- Language: TypeScript
- Homepage:
- Size: 113 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Helpers to Node and Vite
🌱 A personal compilation with helpers for NodeJS and Vite
### Install
```shell
npm i node-and-vite-helpers
```
### 💡 Helpers
- #### [selectors](./src/selectors.ts)
> 
> 
See some examples
```javascript
import { s, sAll, sEl, sElAll } from 'node-and-vite-helpers';
// import { s, sAll, sEl, sElAll } from 'node-and-vite-helpers/selectors';
s('#id'); // document.querySelector('#id');
sAll('.class'); // document.querySelectorAll('.class');
sEl(element, '.child'); // element.querySelector('.child');
sElAll(element, '.childs'); // element.querySelectorAll('.childs');
```
- #### [setTime](./src/set-time.ts)
> 
>
>
See some examples
```javascript
import { setTime } from 'node-and-vite-helpers';
// import { setTime } from 'node-and-vite-helpers/set-time';
setTime(1000); // 1000
setTime('1000'); // 1000
setTime('1s'); // 1000
setTime('1m'); // 60000
setTime('1h'); // 3600000
setTime('1d'); // 86400000
```
- #### [doClass](./src/do-class.ts)
>
>
>
See some examples
```javascript
import { cx } from 'node-and-vite-helpers';
// import { cx } from 'node-and-vite-helpers/do-class';
cx('c1', 'c2 c3'); // 'c1 c2 c3'
cx(validCond && 'active'); // 'active'
cx(invalidCond && 'active'); // ''
```
- #### [head](./src/head.ts)
>
>
See some examples
```javascript
import { head } from 'node-and-vite-helpers';
// import * as head from 'node-and-vite-helpers/head';
import favicon from '../favicon.svg';
/**
* These functions check if an element already exists in head
* If exists, update element atribute, otherwise creates the element in head
**/
head.title('Home');
head.meta('theme-color', '#6c46bf');
head.link('canonical', 'https://site.com/');
head.favicon(favicon);
head.faviconBase64('data:image/png;base64,iVBO0KGN...ErkJg==');
```
```javascript
/**
* This function creates any custom element in head
* Interesting to use for advanced properties, SEO, etc.
**/
const gtag = 'XXXXXXXXXX';
head.createElement({
element: 'script',
attributes: [
{
name: 'src',
value: `https://www.googletagmanager.com/gtag/js?id=G-${gtag}`,
},
{
name: 'async',
},
],
});
head.createElement({
element: 'script',
textContext: `
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'G-${gtag}')
`,
});
```
- #### [dates](./src/dates.ts)
>
>
>
See some examples
```javascript
import { dates } from 'node-and-vite-helpers';
// import * as dates from 'node-and-vite-helpers/dates';
// defaults 🔓
dates.set.locale('pt-BR');
dates.set.timeZone('America/Sao_Paulo');
```
```javascript
// Preparing examples 🤹
const dateA = new Date('2023-01-02T05:06:42.041Z');
const dateB = new Date('2023-01-04T04:10:35.208Z');
const christmasEve = new Date('2023-12-24 00:00');
```
```javascript
/**
* @return string
*/
dates.toYodaString(dateA);
// 2023-01-02 02:06:42
dates.toLocaleString(dateA);
// 02/01/2023 02:06:42
```
```javascript
/**
* @return Date
*/
dates.toLocaleDate(dateA);
// 2023-01-02T02:06:42.000Z
dates.pastDate(dateA, 1);
// 2023-01-01T02:06:42.000Z
dates.futureDate(dateA, 1);
// 2023-01-03T02:06:42.000Z
dates.getBusinessDate(christmasEve, 1);
// 2023-12-26T00:00:00.000Z
dates.getBusinessDate(christmasEve, 2));
// 2023-12-27T00:00:00.000Z
```
```javascript
/**
* @return object
*/
dates.parse(dateA);
// { year: 2023, month: 1, day: 2, hours: 2, minutes: 6, seconds: 42 }
dates.diff(dateA, dateB);
// { situation: 'remaining', years: 0, months: 0, days: 1, hours: 23, minutes: 3, seconds: 53 }
```
```javascript
/**
* @return boolean
*/
dates.isHoliday(date);
dates.isWeekend(date);
dates.isWeek(date);
dates.isBusinessDay(date);
dates.isEqual(date, compareDate);
dates.isSmaller(date, compareDate);
dates.isBigger(date, compareDate);
dates.isSmallerOrEqual(date, compareDate);
dates.isBiggerOrEqual(date, compareDate);
dates.isBetween(startDate, date, endDate);
```
- You can set custom **holidays**:
```javascript
const holidays = {
1: [ 1, 2 ],
// ...
12: [ 25, 31 ],
};
dates.set.holidays(holidays);
```
- You can see the default holidays in [defaultHolidays](./src/dates.ts#L10)
- You can customize `timeZone` by overwriting the default params:
```javascript
dates.toYodaString(dateA, { timeZone: 'UTC' }));
// 2023-01-02 05:06:42
dates.toLocaleString(dateA, { locale: 'en-US', timeZone: 'America/New_York' }));
// 1/2/2023, 12:06:42 AM
```
- Both `locale` and `timeZone` options have typing suggestions 📝
- This module assumes that you know the **time zone** from origin dates 🎓
- #### [input](./src/input.ts)
>
>
>
See some examples
```javascript
import { striptags, entities, xss } from 'node-and-vite-helpers';
// import { striptags, entities, xss } from 'node-and-vite-helpers/input';
```
```javascript
striptags('
🤔...'); // 🤔...
xss('
🤔...'); // 🤔...
xss('<div>🤔</div>'); // 🤔...
entities.decode('🤔...'); // 🤔...
```
```javascript
// I: Trying broke decode xss 😈 //
const input = '<div>👮</div>';
const filteredInput = xss(input);
entities.decode(filteredInput); // 👮
```
```javascript
// II: Trying broke decode xss 👿 //
const input = '<div>👮</div>';
const filteredInput = xss(input);
entities.decode(filteredInput); // 👮
```
```javascript
// Unsafe!
entities.encode('
🤔...');
// <div>🤔...</div>
// ❌ Be careful, consider using xss(string)
entities.decode('<div>🤔.../div>', false);
//
🤔...
// ❗️ Be careful, consider using entities.decode(string);
```
👮🏻♂️ Use carefully:
- The decoding depth of the `xss()` goes up to two stages.
- The decoding for display `entities.decode()` has one stage and re-run `striptags` before returning the result.
- This means that even if someone insert more layers in a xss attack, it will display the xss content as text and not execute it.
- #### [tokenGenerate](./src/token-generate.ts)
>
>
>
See an example
```javascript
import { tokenGenerate } from 'node-and-vite-helpers';
// import { tokenGenerate } from 'node-and-vite-helpers/token-generate';
tokenGenerate(8); // '45832c3f', 'fa3fe988', '749ecfaa', ...
```
- #### [empty](./src/empty.ts)
>
>
>
See some examples
```javascript
import { isEmpty, notEmpty } from 'node-and-vite-helpers';
// import { isEmpty, notEmpty } from 'node-and-vite-helpers/empty';
isEmpty(''); // true
isEmpty(' '); // true
isEmpty('anything'); // false
notEmpty(''); // false
notEmpty(' '); // false
notEmpty('anything'); // true
```
- #### [forceArray](./src/force-array.ts)
>
>
>
See some examples
```javascript
import { forceArray } from 'node-and-vite-helpers';
// import { forceArray } from 'node-and-vite-helpers/force-array';
forceArray('string'); // [ 'string' ]
forceArray(1); // [ 1 ]
forceArray(true); // [ true ]
forceArray(false); // [ false ]
forceArray({}); // [ {} ]
forceArray(/* any */); // [ /* any */ ]
forceArray([ /* items */ ]); // [ /* items */ ]
```
### Credits
| Contributors | GitHub |
| ------------ | ---------------------------------------------------------------------------------- |
| Author | [](https://github.com/wellwelwel) |