Web vs Utils

• userscript friendly vs battle tested

Utils

Useful functions for my personal projects. Trades the benefits of a popular library (performance, edge cases, standarized API), for simplicity

Web: /** Minimalist userscript helpers */

Code style

I'm testing some ideas favoring minimalism

• Single named

// class // - needs this.el vs el // - no one liner arrow functions, unless with curly

export const $ = (s, p) => p.querySelector(s), toggle = s => (el = $(s), el.style.display = el.style.display == 'none' ? '' : 'none')

Everybody should have a shared utils project! See why.

Install

npm i @icetbr/utils

Local (recommended)

npm i ../utils

generates

    "dependencies": {
        "@icetbr/utils": "file:../utils"
    }

Note that the "linked" project must have a package.json with a name. If the code is inside src, it also needs "main": "src".

Usage

import { $, $$, el, toBase64, toSearchable, isBrazil } from '@icetbr/utils/web';

Why

For learning and to a minor degree, efficiency. No reinvention of the wheel intended.

You may priorize known libraries, like lodash, but for everything you don't know where to find, and keep repeating yourself the same things, place them in a separate project.

Advantages

• better than CTRL + C, CTRL + V
• every fix and addition you make is instantly available to all projects
• ctrl + click takes to the source code, and you can quickly add/fix whatever you need
• easy to switch to a tagged release before publishing, or use a bundler like rollup
• encourages contribution to the community as any of your utils functions may become a library by itself!

Learning

I use a minimal implementation that suits my current problem. When they become insufficient or present a bug, I study the reasons and look online for solutions, usually exploring the source code of other npm libraries.

Efficiency

The minimal code also helps with performance and reduces cognitive load when trying to analyze the source code.

This package is meant to be used with tree shaking or some automatic copy/pasting perhaps, if size is really an issue.

Contributing
License (MIT)

Utils

A wrapper around ts-belt with lodash syntax, plus other utilities.

The familiarity of the most popular library with the speed of the fastest.

Responsable

Sigma

Install

npm i @ah/utils

Usage

• CJS: const { keyBy, flatten } = require('@ah/utils');
• ESM: import { keyBy, flatten } from '@ah/utils';

Contributing

$AHG_PATH/ahpi run rollup adds a background task to monitor files and generate packages/utils/index.cjs, needed when using require.

Outputs to rollup.ansi. See run.sh for details.

for now, this command needs to be manually called once after the container starts

Goals

• no more utils.js
• code should be as fast as possible, go nuts on bit scrubbing procedural code
  • the first version doesn't need to be the fastest, but in the future we might refactor to be faster
• aim for immutable and pure functions
  • object and array cloning can be slow, sometimes we might chose mutations for speed
• test cover 100%
  • TODO!
• add as many external library as needed
  • try not to reinvent the wheel, unless its a faster, cooler space wheel!
  • front end can use tree shake, size won't matter
  • if you implement a function it need tests... do you really want to write those tests? :-D

Secondary/doubtful goals

• uniformity
  • BAD: const a = string.split(',')
  • GOOD: const a = split(string, ',')
• principle of least surprise: use the "same" signature of JS or lodash whenever possible
  • BAD: const a = separate(string, aFlagNotInTheNativeSplit, ',')
  • GOOD: const a = split(string, ',')
• publish to npm

Structure

We don't know the best organization yet, favor Lodash, but modify as needed.

Lodash	Ramda	Ts-Belt
Array		Array
Collection	List
Date
Function	Function	Function
Lang
Math	Math
Number		Number
Object	Object	Object
Seq
String	String	String
Util
	Logic
	Relation
	Relation	Boolean
	Relation	Guards

https://es-toolkit.dev/intro.html https://github.com/sindresorhus/is

TYPES OPTIONS

export namespace Web { export function addStyle(css) { return "test"; } }

TESTS // const { div, a } = h; // const myDiv = div({ id: 'main' }, a('Click me')); // const noProps = div('Just text')

/**

• A "Super Event" combining properties from all common UI events.
• Useful for generic handlers where you don't want to type-check every property. */

node ./node_modules/@babel/cli/bin/babel.js src/web.ts --presets @babel/preset-typescript