Why use a JS framework if we can do all from scratch?

This library provides a collection of utility functions for common web development tasks, organized into modular components for better maintainability and flexibility.

Structure

The library is organized into the following modules:

Main Modules

• src/derafu.js - Main module (exports all functions under the derafu namespace).

Core Modules

• src/tabs.js - Tab management functions.
• src/ui.js - User interface functions (popups, tables, notifications, copy/paste, etc.).
• src/utils.js - Basic utility functions (password generation, cookies, language detection, number formatting, etc.).

Validation Modules

• src/validation/l10n-cl.js - Chilean validation functions (RUT validation, etc.).

Form Modules

• src/form/fields.js - Form field management functions.
• src/form/tables.js - Dynamic table functions.
• src/form/validation.js - Form validation functions.

Compatibility Modules

• src/__.js - Main compatibility layer (exports all functions under the __ namespace).
• src/form.js - Form compatibility layer (exports all form functions under the Form namespace).

Quick Start

Import using the CDN of the module you need, for example UI module:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/ui.js"></script>

Then use the function you need, for example notify function:

UI.notify('Hello World!');

Note: Remember to load the dependencies first, in this example notyf is used for notifications.

Usage

Browser Usage

Load the modules in the correct order:

<!-- Load individual modules -->
<script src="src/utils.js"></script>
<script src="src/ui.js"></script>
<script src="src/validation/l10n-cl.js"></script>
<script src="src/tabs.js"></script>
<script src="src/form/validation.js"></script>
<script src="src/form/fields.js"></script>
<script src="src/form/tables.js"></script>

<!-- Load compatibility layers -->
<script src="src/__.js"></script>
<script src="src/form.js"></script>

Then use the functions:

// Using the compatibility layer (recommended for existing code).
__.generatePassword(12);
__.notify('Hello World!');
Form.check('myForm');

// Using individual modules (recommended for new code).
Utils.generatePassword(12);
UI.notify('Hello World!');
FormValidation.check('myForm');

Node.js Usage

const Utils = require('./src/utils.js');
const UI = require('./src/ui.js');

Utils.generatePassword(12);
UI.notify('Hello World!');

Validation and Testing

Run the validation and test suite:

npm install
npm run format:check
npm run lint:check
npm run test