HtmlHelpers

Some handy helpers for ES/JS/HTML projects.

The helper contains

• A logger factory to print text/html in a structured way to the browser screen
• A JQuery alike library to manage HTML elements (create, handle, modify, style, remove)
• A small library to create multiline regular expressions with comments
• A library to manage ES Date (format, locale sensitive, calculation etc.)

Important

This repository was originally developed for (my) Stackblitz projects (npm package name stackblitzhelpers)

The repository is moved to Codeberg.org and renamed to HtmlHelpers. For the time being, the npm package will keep the name 'stackblitzhelpers'.

For now it is kept in sync with the original repository @Github.

Depending on future USA/Microsoft/Github policies the Github version may be discontinued later.

Examples

Use in Stackblitz front end project

import {logFactory /*, ...[see 'exposed as']*/}
  from "https://unpkg.com/stackblitzhelpers@latest/Bundle/htmlhelpers.min.js";

Note

index.browser.bundled.js and index.browser.js in the repository root are there for legacy.

Install the package

npm install stackblitzhelpers

Use as standalone script

<script src="https://unpkg.com/stackblitzhelpers@latest/Bundle/sbhelpers.script.min.js"></script>
<script>
  const {logFactory, $ /*, ...[see 'exposed as']*/} = SBHelpers;
  // ...
</script>

Use in Stackblitz plain ecmascript project ('javascript blank project')

Type 'stackblitzhelpers' in the DEPENDENCIES input field and press <ENTER>.

Next use

import {logFactory /*, ...[see 'exposed as'] */} from "stackblitzhelpers"

The library includes the following packets:

• jqlmodule: a JQuery alike DOM manipulation library.
  • Exposed as $
• jsregexhelper: a library to create readable ECMAScript regular expressions (multiline, commenting possible)
  • Exposed as regexhelper
• ticktock-es: a library to fiddle extensively with ECMAScript Dates
  • Exposed as $D

For printing/logging to screen

• logFactory: logfactory logs string(s) to screen within a formatted unordered listing (<ul>). It exposes 2 methods

  • log([string1],[string2] ... [stringX])

    print the parameter strings.

    Note: inserting !! in a parameter string (e.g. !!<div>some text</div>) will print it as a header (no list item style).

  • logTop: same as log, but the string(s) will be prependend (inserted on top op the existing logged lines).

Automatic style creation

The SBHelpers library supplies a default (css-)style for Stackblitz Ecmascript projects. Style may be edited using $.editCssRules.

Notes

• Stackblitz seems to rewrite links with target="_top" (to target="_blank"). Version >= 0.3.6 of this library catches and fixes this. For links to _top, use target="_top" OR class="internalLink" OR the data-attribute data-top.