Arrow keys: ← previous · → next 1 of 35
@nodedk/browser
0.5.1 stable

browser#

HTML templates, formatting, and browser helpers in one bundle.

Install# 

npm i @nodedk/browser

Usage#

Copy the browser bundle into your application's assets:

mkdir -p app/assets/js
cp node_modules/@nodedk/browser/build/browser.js app/assets/js/browser.js

Include /js/browser.js before your application scripts in app/config/bundle.js:

module.exports = {
  css: [],
  js: ['/js/browser.js', '/js/base.js']
}

Load the bundle in your layout, as in @nodedk/scaffold:

var { html } = require('@nodedk/page')

function Layout(state, slot = []) {
  return html`<!doctype html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        ${state.script(['/bundle.js'])}
      </head>
      <body>
        <div class="flash"><span class="message"></span></div>
        ${slot}
        <button onclick="window.flash('Saved')">Save</button>
      </body>
    </html>`
}

The copied script installs every helper on window. Refresh the copy when upgrading the package. ndk build combines assets listed in bundle.js; it does not resolve CommonJS imports in browser files.

state.script() loads individual scripts in development and the built bundle in production. Serve the generated dist directory through your production web server or the server’s static option.

For a separate module-aware bundler, the package also exports the functions:

var browser = require('@nodedk/browser')
Object.assign(window, browser)

API#

The package combines these exports without wrapping their arguments or return values:

Templates and formatting#

From template and ext:

  • html(strings, ...values): template string; joins arrays and omits nullish and boolean values.
  • date(value, type = 'date'): local date/time input formatting; supports date, datetime-local, time, month, and week.
  • esc(value) and raw(value): escape and decode HTML entities.
  • isImage(name): image filename-extension check.
  • num(value, options): locale-aware number formatting; options is a locale or { lang, ...IntlOptions }.
  • time(value, options): date formatting; options is a locale or { lang, format, ...IntlOptions }.
  • truncate(value = '', size = 32): shorten text with an ellipsis suffix.

Browser helpers#

From window, which documents each option, return value, and required HTML structure:

  • active(options = {}): mark links for the current pathname; options selector and active.
  • back() and track(): navigate to and record the tracked URL.
  • blur(element) and toggle(name, element): manage open elements and classes.
  • client(path, data = {}, options = {}): JSON request; options method and headers; resolves to parsed JSON.
  • cookie(key, value, options): read, write, or delete a cookie; options days, path, domain, sameSite, and secure.
  • copy(input): copy the value of an input or selector.
  • download(input, filename): download a Blob, URL, or link.
  • file(input): presign and upload selected files from a .field container.
  • flash(message, options = {}): show a message; options el, name, time, class, and scroll.
  • load(path, into): fetch HTML into an optional element or selector; resolves to text.
  • params(id): query value by name or pathname segment by numeric index.
  • serialize(form): form values as an object, including dotted field names.
  • store(key, value): JSON session storage; null deletes, omitted value reads.
  • submit(form, options = {}): submit a form; options error, success, and redirect.
  • upload(link, file, options = {}): signed POST or PUT upload; options progress and error; resolves to { url }.

Development# 

npm run build

Writes build/browser.js and build/browser.min.js from the exported functions. Packaging runs this build automatically.

Created by Vidar Eldøy

Powered by NodeDK