Karpeles Lab Frontend Framework - A JavaScript library for communicating with KLB API.
This library provides a unified interface for interacting with KLB API services from both browser and Node.js environments.
- Cross-environment compatibility: Works in both browser and Node.js environments
- REST API client: Simple and consistent interface for API requests
- File upload: Supports file uploads in any environment with both direct PUT and AWS S3 multipart protocols
- Context handling: Manages authentication, locale, and other contextual information
- Cookie management: Cross-platform cookie handling that works in SSR mode
- Internationalization: Easy access to i18n data
npm install @karpeleslab/klbfw
For Node.js environments with file upload support, install optional dependencies:
npm install @karpeleslab/klbfw node-fetch xmldom
# Install dependencies
npm install
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Run integration tests (requires KLB API server)
npm run test:integration
- Modern JavaScript: Refactored to use ES6+ features (arrow functions, const/let, template literals)
- Improved Documentation: Added comprehensive JSDoc comments for all modules and functions
- Better Code Organization: Restructured code for improved readability and maintainability
- Cross-Platform Support: Enhanced environment detection and compatibility
- Standardized Naming: Consistent use of camelCase with backward compatibility for legacy APIs
- Enhanced Error Handling: More robust error handling and reporting
Performs a REST query and returns a promise to the response.
Simplified version of rest() that uses HTTP GET. Takes a REST API endpoint name and optional parameters, returning a Promise with the response.
Note: Starting from version 0.2.0, camelCase method names are also available (e.g., restGet
instead of rest_get
).
The upload module provides cross-platform file upload capabilities, supporting both browser and Node.js environments.
// Open file picker and upload selected files
upload.upload.init('Misc/Debug:testUpload')()
.then(result => console.log('Upload complete', result));
// Upload a specific File object
upload.upload.append('Misc/Debug:testUpload', fileObject)
.then(result => console.log('Upload complete', result));
// Track progress
upload.upload.onprogress = (status) => {
console.log('Progress:', status.running.map(i => i.status));
};
// Cancel an upload
upload.upload.cancelItem(uploadId);
// For Node.js environments, first install dependencies:
// npm install node-fetch xmldom
// Initialize upload with specific file paths
upload.upload.init('Misc/Debug:testUpload')(['./file1.txt', './file2.jpg'])
.then(result => console.log('Upload complete', result));
// Or create a custom file object with path
const file = {
name: 'test.txt',
size: 1024,
type: 'text/plain',
path: '/path/to/file.txt'
};
upload.upload.append('Misc/Debug:testUpload', file)
.then(result => console.log('Upload complete', result));
The upload module provides methods to manage active uploads:
upload.getStatus()
: Get current upload status (queue, running, failed)upload.cancelItem(uploadId)
: Cancel an uploadupload.pauseItem(uploadId)
: Pause an active uploadupload.resumeItem(uploadId)
: Resume a paused uploadupload.retryItem(uploadId)
: Retry a failed uploadupload.deleteItem(uploadId)
: Remove an upload from the queue or failed list
Object containing all URL query parameters parsed from the request.
Retrieves a specific query parameter value by key. If no key is provided, returns the entire GET object.
Clears the GET parameters by resetting the internal GET object to an empty object.
Returns the language/etc prefix part of the URL, for example /l/en-US
. The prefix should be inserted before the path in the URL.
Returns the active URL.
Returns the non-prefixed request path.
Processes a URL to separate the prefix parts from the main path. Returns an array with two elements: an object containing the identified prefixes and the remaining path.
Returns active settings if any.
Returns realm information.
Returns current context.
Modifies the current context.
Returns the initial state passed from SSR execution (or null if no SSR was performed).
Returns the current rendering mode ssr
, js
etc.
Returns the hostname part of the current URL.
Returns data from the registry.
Returns the currently active locale, for example en-US
.
Returns g
from context, which is the current active user group.
Returns the currently selected currency, such as USD
.
Returns the CSRF token.
Returns the UUID of the request.
Retrieves internationalization (i18n) data for a specified language. If no language is provided, uses the current locale.
These methods are required as using things like document.cookie
will not work in SSR mode. The methods described here will work when SSR is enabled, and will cause cookies to be added to the HTTP response.
Get the value of a specific cookie.
Sets value for a cookie.
Checks for presence of a given cookie.
As of version 0.2.0, klbfw includes improved environment detection and cross-platform utilities to support both browser and Node.js environments.
The library automatically detects the current environment:
const env = {
isBrowser: typeof window !== 'undefined' && typeof document !== 'undefined',
isNode: typeof process !== 'undefined' && process.versions && process.versions.node
};
Several utilities have been designed to work across environments:
- Fetch: Uses the browser's native
fetch
ornode-fetch
in Node.js - XML Parsing: Uses the browser's
DOMParser
orxmldom
in Node.js - File Reading: Uses
FileReader
in the browser orfs
in Node.js - Event Dispatching: Uses
CustomEvent
in the browser orEventEmitter
in Node.js
To use klbfw with full functionality in Node.js, install the optional dependencies:
npm install node-fetch xmldom