SBHelpers

Some handy helpers for Stackblitz ES/html projects

Install the package

npm install stackblitzhelpers

Use in the browser (or in Stackblitz front end project)

import {$, logFactory, ...[see 'exposed as']} from "https://cdn.jsdelivr.net/gh/KooiInc/SBHelpers@main/index.browser.bundled.js";

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

Type 'stackblitzhelpers' in the DEPENDENCIES input field

The library includes the following packets:

• jqlmodule: a JQuery alike DOM manipulation library.
  • Exposed as $
• protoxt: a library to extend objects without pollution the global namespace - using symbol.
  • Exposed as extendSymbolic
• jsregexhelper: a library to create readable EcmaScript regular expressions (multiline, commenting possible)
  • Exposed as regexhelper
• datefiddler: a library to fiddle with dates (add/subtract units from a date)
  • Exposed as xDate
• intl-dateformatter: a library to format an EcmaScript Date instance with a template string and using the Intl namespace
  • Exposed as dtFormat
• datediffcalculator (a small library to calculate the difference between two dates).
  • Exposed as dtDiffCalc

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 $.setStyle.

Example project @Stackblitz

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.