jb-core

core modules of jb-design system mostly contain functions that help you manage your web-components & tools to connect them to ReactJS components.

React Modules

See the React module documentation and interactive React demos.

I18N modules

to see i18n modules please see jb-core/i18n and its Storybook documentation.

SSR-safe web components

Extend JBBaseComponent instead of HTMLElement when a web-component module must be importable during server-side rendering. In a browser, JBBaseComponent is the native HTMLElement. In environments such as Node.js where HTMLElement is unavailable, it uses a safe fallback so evaluating the module does not throw.

import { JBBaseComponent } from "jb-core";

export class MyWebComponent extends JBBaseComponent {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    // Browser-only initialization belongs in the constructor or lifecycle methods.
  }
}

if (globalThis.customElements && !globalThis.customElements.get("my-component")) {
  globalThis.customElements.define("my-component", MyWebComponent);
}

This makes importing the component safe during SSR; it does not run DOM behavior on the server. The browser creates or upgrades the custom element and runs its constructor and lifecycle callbacks during hydration. Keep other browser-only APIs such as document, window, and ResizeObserver out of module-scope expressions.

listenAndSilentEvent

this function listen to event in the capture phase and stop it's propagation and call your handler so you will be the only one who capture this event used for event forwarding (transformation) in web-components. See the event interception demo.

  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler);
  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler,{passive:true});

create events

these functions will create events based on existing event objects used mostly for event forwarding.

  #onInputInput(e:InputEvent){
    const event = createInputEvent('input', e, { cancelable: false });
    this.dispatchEvent(event);
  }
    #onInputKeyup(e:KeyboardEvent){
    const event = createKeyboardEvent('keyup', e, { cancelable: false });
    this.dispatchEvent(event);
  }
    #onButtonClick(e:MouseEvent){
    const event = createMouseEvent('click', e, { cancelable: false });
    this.dispatchEvent(event);
  }

we also have createKeyboardEvent, createInputEvent, createFocusEvent; try the event creation demo.

Inject Style

when you have your styles in a string and you want to inject it in document or shadowroot you can use this function. The style injection demo shows the resulting stylesheet.

import CSS from './style.css';
import {injectCss} from 'jb-core';

injectCss(CSS);
// same as
injectCss(CSS, document);
// in web-components when you want inject your style inside shadow DOM
injectCss(CSS, this.shadowRoot);

create unique id

import {uniqueId} from 'jb-core'
// will generate unique uuid for you with given prefix
const id = uniqueId('prefix');
document.querySelector('jb-button').setAttribute('id',id)

Generate prefixed identifiers in the unique ID demo.

Parse attribute values

Use parseBooleanAttribute and parseNumberAttribute to convert string attribute values in web components while providing a fallback for missing or invalid values.

parseBooleanAttribute

Converts a string attribute value to a boolean. A missing attribute (null) returns the provided default value. An empty string or "true" returns true, while "false" returns false.

import {parseBooleanAttribute} from 'jb-core';

const disabled = parseBooleanAttribute(this.getAttribute('disabled'));
const enabled = parseBooleanAttribute(this.getAttribute('enabled'), true);

parseNumberAttribute

Converts a string attribute value to a finite number. A missing, empty, or invalid value returns the provided default value.

import {parseNumberAttribute} from 'jb-core';

const min = parseNumberAttribute(this.getAttribute('min'));
const max = parseNumberAttribute(this.getAttribute('max'), 100);