@startinblox/boilerplate 4.2.2 → 4.3.1

package/.gitlab-ci.yml

@@ -14,7 +14,7 @@ default:
 
 stages:
   - prepare
-  # - test
+  - test
   - publish
 
 prepare:
@@ -31,23 +31,22 @@ prepare:
     paths:
       - dist
     expire_in: 1 day
-  # tags:
-  #   - test
+  tags:
+    - test
 
-# Temp: https://github.com/cypress-io/cypress/issues/31882
-# test:
-#   stage: test
-#   image: 
-#     name: cypress/included:14.2.0
-#     entrypoint: [""]
-#   before_script:
-#     - npm ci --cache .npm --prefer-offline
-#   script:
-#     - npm run cy:run
-#   except:
-#     - tags
-#   tags:
-#     - test
+test:
+  stage: test
+  image: 
+    name: cypress/included:15.5.0
+    entrypoint: [""]
+  before_script:
+    - npm ci --cache .npm --prefer-offline
+  script:
+    - npm run cy:run
+  except:
+    - tags
+  tags:
+    - test
 
 publish:
   stage: publish

package/.storybook/main.ts

@@ -7,6 +7,10 @@ const config: StorybookConfig = {
   framework: {
     name: "@storybook/web-components-vite",
     options: {},
+  },
+
+  core: {
+    disableTelemetry: true,
   }
 };
 

package/README.md

@@ -2,48 +2,57 @@
 
 ## Introduction
 
-This repository provides a boilerplate for developing Startin'blox web components. It streamlines the creation and deployment of web components, whether used independently or integrated with the Startin'blox ecosystem, including Lit, Startin'blox Core, Startin'blox Store, Startin'blox Router, and Startin'blox Orbit. The primary objective is to enable developers to concentrate on web component logic by abstracting common complexities and providing out-of-the-box functionalities.
+This repository provides a boilerplate for developing Startin'blox web components. It streamlines the creation and deployment of web components, whether used standalone or integrated within the Startin'blox ecosystem (Lit, Startin'blox Core, Store, Router, and Orbit). The primary objective is to enable developers to concentrate on web component logic by abstracting common complexities and providing essential functionalities out-of-the-box.
 
 ## Features
 
 This boilerplate includes:
 
-* **Localization:** Compatibility with platforms like Weblate, powered by [`@lit/localize`](https://www.npmjs.com/package/@lit/localize).
+* **Localization:** Supports internationalization with platforms like Weblate, powered by [`@lit/localize`](https://www.npmjs.com/package/@lit/localize).
 * **Data Management:** A comprehensive wrapper around the Startin'blox Store for simplified property handling (RDF or named).
 * **Component Awareness:** Mechanisms to manage race conditions and inheritance across external components.
 * **Helper Utilities:** Functions for data reactivity, filtering, and sorting.
 * **Development Tools:**
-  * **Storybook:** For component documentation and isolated development, reducing the need for a heavy local environment.
+  * **Storybook:** For isolated component development and documentation, reducing the need for a heavy local environment.
   * **Cypress:** For component testing.
   * **Unpluggin Icons:** Access to a vast library of icons from [Iconify](https://icon-sets.iconify.design/).
   * **Lit Integration:** Pre-made component classes to accelerate development.
-  * **Vite-powered:** Typescript, SASS, PostCSS, Autoprefixer... Focus on your component logic, not the build process.
-  * **BiomeJS:** For linting and formatting, preconfigured for Startin'blox JS styling, using the most [reasonable one](https://github.com/airbnb/javascript). Use [Biome](https://biomejs.dev/fr/) within your preferred editor.
+  * **Vite-powered:** Typescript, SASS, PostCSS and Autoprefixer, allowing you to focus on component logic rather than build configurations.
+  * **BiomeJS:** Preconfigured for Startin'blox JS styling, using the most [reasonable one](https://github.com/airbnb/javascript), for linting and formatting. Integrate [Biome](https://biomejs.dev/fr/) with your preferred editor.
 
-## Getting started
+## Quick Start for Developers
 
-### Creating a new components repository
+This section guides you through setting up the local development environment and using the boilerplate to create and test web components.
 
-To initialize a new component repository from this boilerplate:
+### Local Development Setup
+
+To get started with local development:
 
-1. Clone this repository.
-2. Rename the `origin` remote to `upstream`:
+1. **Clone the repository:**
 
     ```bash
-    git remote rename origin upstream
+    git clone https://git.startinblox.com/components/your-component-name.git
+    cd your-component-name
     ```
 
-3. Update the `name`, `description`, and `repository.url` fields in [`package.json`](package.json).
-4. Commit the changes with a `major: Initial commit` message.
-5. Create a new repository on [git.startinblox.com/components](https://git.startinblox.com/components/).
-6. Add the new repository as the `origin` remote:
+    *Note: If you are starting a new project from this boilerplate, refer to the "Developping new components from the boilerplate" section below.*
+
+2. **Install dependencies:**
 
     ```bash
-    git remote add origin https://git.startinblox.com/components/your-component-name.git
+    npm install
     ```
 
-7. Configure Gitlab settings (branch protection rules, FF merge only, clone instead of fetch).
-8. Push to `origin master`.
+3. **Run Storybook:**
+    Storybook is the primary development environment for isolated component development and documentation.
+
+    ```bash
+    npm run storybook
+    ```
+
+    This will open Storybook in your browser, typically at `http://localhost:6006`.
+
+### Using Your Components
 
 For production usage, components can be served via a CDN like JSDelivr or self-hosted.
 
@@ -60,18 +69,58 @@ For production usage, components can be served via a CDN like JSDelivr or self-h
   <!-- etc. -->
 ```
 
-### Installation
+## Developping new components from the boilerplate
 
-To set up the local development environment with Storybook:
+### Creating a New Component Repository
 
-```bash
-npm install
-npm run storybook
-```
+To initialize a new component repository from this boilerplate:
+
+1. **Clone this repository:**
+
+    ```bash
+    git clone https://git.startinblox.com/components/solid-boilerplate.git your-new-component-name
+    cd your-new-component-name
+    ```
 
-## Development environment
+2. **Rename the `origin` remote to `upstream`:**
 
-This boilerplate is designed as a **library** for multiple web components and intentionally **does not include** a default `index.html` file.
+    ```bash
+    git remote rename origin upstream
+    ```
+
+3. **Update project details:**
+    Modify the `name`, `description`, and `repository.url` fields in [`package.json`](package.json) to reflect your new component.
+
+4. **Initial commit:**
+    Commit the changes with a `major: Initial commit` message.
+
+5. **Create a new repository:**
+    Create a new repository on [git.startinblox.com/components](https://git.startinblox.com/components/).
+
+6. **Add the new repository as the `origin` remote:**
+
+    ```bash
+    git remote add origin https://git.startinblox.com/components/your-component-name.git
+    ```
+
+7. **Configure Gitlab settings:**
+    Set up branch protection rules, enforce FF merge only, and configure cloning instead of fetching in your new repository's Gitlab settings.
+
+8. **Push to `origin master`:**
+
+    ```bash
+    git push -u origin master
+    ```
+
+## Important Considerations
+
+This boilerplate is designed as a **library** for multiple web components and intentionally **does not include** a default `index.html` file. Developers should use Storybook for isolated component development.
+
+* **Avoid Blind Copy-Pasting:** Do not simply copy files without understanding their purpose. This boilerplate includes specific configurations and integrations (e.g., Orbit, localization) that may not be relevant to all projects. Always review and adapt the code to your specific needs.
+* **Understand Core Concepts:** Familiarize yourself with the "Core Concepts" section to understand how data management, component awareness, and helper utilities are implemented.
+* **Orbit Integration:** The `import @src/initializer;` statement is **only required if your component will be integrated with Startin'blox Orbit**. If you are not using Orbit, you **do not need** this import.
+
+## Development Environment
 
 **Storybook** is the primary development environment for isolated component development and documentation. **Cypress** is integrated for component testing.
 
@@ -236,15 +285,13 @@ npm run build-storybook
 npm run build
 ```
 
-## Orbit integration
+## Orbit Integration
 
 Components built with this boilerplate are designed to work seamlessly with Orbit without requiring specific configurations.
 
-To prevent potential race conditions, include `import @src/initializer;` at the top of your component's file, before the `@customElement` declaration.
-
-Application performance can be optimized by utilizing the `gatekeeper` method within your `OrbitComponent`'s render methods.
-
-Note that without a complete Orbit environment, interactions with external components (e.g., route management, component deduplication, global localization, conditional component display) may be limited.
+* **Initializer:** To prevent potential race conditions when integrating with Orbit, include `import @src/initializer;` at the top of your component's file, before the `@customElement` declaration. **This import is only necessary if your component will be used within an Orbit environment.**
+* **Performance Optimization:** Application performance can be optimized by utilizing the `gatekeeper` method within your `OrbitComponent`'s render methods.
+* **Limitations without Orbit:** Without a complete Orbit environment, interactions with external components (e.g., route management, component deduplication, global localization, conditional component display) may be limited.
 
 ## Best practices
 

package/dist/index.js

@@ -23,14 +23,14 @@ let Ct = class {
   }
 };
 const it = (s) => new Ct(typeof s == "string" ? s : s + "", void 0, st), rt = (s, ...t) => {
-  const e = s.length === 1 ? s[0] : t.reduce((r, i, o) => r + ((n) => {
+  const e = s.length === 1 ? s[0] : t.reduce(((r, i, o) => r + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(i) + s[o + 1], s[0]);
+  })(i) + s[o + 1]), s[0]);
   return new Ct(e, s, st);
 }, Vt = (s, t) => {
-  if (et) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+  if (et) s.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
   else for (const e of t) {
     const r = document.createElement("style"), i = N.litNonce;
     i !== void 0 && r.setAttribute("nonce", i), r.textContent = e.cssText, s.appendChild(r);
@@ -141,7 +141,7 @@ let E = class extends HTMLElement {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t) => t(this));
+    this._$ES = new Promise(((t) => this.enableUpdating = t)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t) => t(this)));
   }
   addController(t) {
     (this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
@@ -159,12 +159,12 @@ let E = class extends HTMLElement {
     return Vt(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
-    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((t) => t.hostConnected?.());
+    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
   }
   enableUpdating(t) {
   }
   disconnectedCallback() {
-    this._$EO?.forEach((t) => t.hostDisconnected?.());
+    this._$EO?.forEach(((t) => t.hostDisconnected?.()));
   }
   attributeChangedCallback(t, e, r) {
     this._$AK(t, r);
@@ -180,7 +180,9 @@ let E = class extends HTMLElement {
     const r = this.constructor, i = r._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
       const o = r.getPropertyOptions(i), n = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : D;
-      this._$Em = i, this[i] = n.fromAttribute(e, o.type) ?? this._$Ej?.get(i) ?? null, this._$Em = null;
+      this._$Em = i;
+      const h = n.fromAttribute(e, o.type);
+      this[i] = h ?? this._$Ej?.get(i) ?? h, this._$Em = null;
     }
   }
   requestUpdate(t, e, r) {
@@ -223,7 +225,7 @@ let E = class extends HTMLElement {
     let t = !1;
     const e = this._$AL;
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach((r) => r.hostUpdate?.()), this.update(e)) : this._$EM();
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach(((r) => r.hostUpdate?.())), this.update(e)) : this._$EM();
     } catch (r) {
       throw t = !1, this._$EM(), r;
     }
@@ -232,7 +234,7 @@ let E = class extends HTMLElement {
   willUpdate(t) {
   }
   _$AE(t) {
-    this._$EO?.forEach((e) => e.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
+    this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
   }
   _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -247,14 +249,14 @@ let E = class extends HTMLElement {
     return !0;
   }
   update(t) {
-    this._$Eq &&= this._$Eq.forEach((e) => this._$ET(e, this[e])), this._$EM();
+    this._$Eq &&= this._$Eq.forEach(((e) => this._$ET(e, this[e]))), this._$EM();
   }
   updated(t) {
   }
   firstUpdated(t) {
   }
 };
-E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[O("elementProperties")] = /* @__PURE__ */ new Map(), E[O("finalized")] = /* @__PURE__ */ new Map(), Gt?.({ ReactiveElement: E }), (B.reactiveElementVersions ??= []).push("2.1.0");
+E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[O("elementProperties")] = /* @__PURE__ */ new Map(), E[O("finalized")] = /* @__PURE__ */ new Map(), Gt?.({ ReactiveElement: E }), (B.reactiveElementVersions ??= []).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -400,7 +402,7 @@ class U {
     i < e.length && (this._$AR(r && r._$AB.nextSibling, i), e.length = i);
   }
   _$AR(t = this._$AA.nextSibling, e) {
-    for (this._$AP?.(!1, !0, e); t && t !== this._$AB; ) {
+    for (this._$AP?.(!1, !0, e); t !== this._$AB; ) {
       const r = t.nextSibling;
       t.remove(), t = r;
     }
@@ -475,7 +477,7 @@ class ne {
   }
 }
 const ae = ot.litHtmlPolyfillSupport;
-ae?.(L, U), (ot.litHtmlVersions ??= []).push("3.3.0");
+ae?.(L, U), (ot.litHtmlVersions ??= []).push("3.3.1");
 const he = (s, t, e) => {
   const r = e?.renderBefore ?? t;
   let i = r._$litPart$;
@@ -516,16 +518,16 @@ let S = class extends E {
 S._$litElement$ = !0, S.finalized = !0, at.litElementHydrateSupport?.({ LitElement: S });
 const le = at.litElementPolyfillSupport;
 le?.({ LitElement: S });
-(at.litElementVersions ??= []).push("4.2.0");
+(at.litElementVersions ??= []).push("4.2.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const ht = (s) => (t, e) => {
-  e !== void 0 ? e.addInitializer(() => {
+  e !== void 0 ? e.addInitializer((() => {
     customElements.define(s, t);
-  }) : customElements.define(s, t);
+  })) : customElements.define(s, t);
 };
 /**
  * @license
@@ -575,9 +577,9 @@ function xt(s) {
 const de = Symbol();
 class pe {
   get taskComplete() {
-    return this.t || (this.i === 1 ? this.t = new Promise((t, e) => {
+    return this.t || (this.i === 1 ? this.t = new Promise(((t, e) => {
       this.o = t, this.h = e;
-    }) : this.i === 3 ? this.t = Promise.reject(this.l) : this.t = Promise.resolve(this.u)), this.t;
+    })) : this.i === 3 ? this.t = Promise.reject(this.l) : this.t = Promise.resolve(this.u)), this.t;
   }
   constructor(t, e, r) {
     this.p = 0, this.i = 0, (this._ = t).addController(this);
@@ -602,7 +604,7 @@ class pe {
   }
   async run(t) {
     let e, r;
-    t ??= this.T(), this.O = t, this.i === 1 ? this.q?.abort() : (this.t = void 0, this.o = void 0, this.h = void 0), this.i = 1, this.autoRun === "afterUpdate" ? queueMicrotask(() => this._.requestUpdate()) : this._.requestUpdate();
+    t ??= this.T(), this.O = t, this.i === 1 ? this.q?.abort() : (this.t = void 0, this.o = void 0, this.h = void 0), this.i = 1, this.autoRun === "afterUpdate" ? queueMicrotask((() => this._.requestUpdate())) : this._.requestUpdate();
     const i = ++this.p;
     this.q = new AbortController();
     let o = !1;
@@ -659,7 +661,7 @@ class pe {
     }
   }
 }
-const fe = (s, t) => s === t || s.length === t.length && s.every((e, r) => !W(e, t[r]));
+const fe = (s, t) => s === t || s.length === t.length && s.every(((e, r) => !W(e, t[r])));
 !window.orbit && !"/".includes("cypress") && await new Promise((s) => {
   document.addEventListener("orbit-ready", () => {
     s(!0);
@@ -962,7 +964,7 @@ const Ce = (s, ...t) => ({
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ut = (s) => Pe(s) ? Lt(s.strings, s.values) : s;
+const Ut = ((s) => Pe(s) ? Lt(s.strings, s.values) : s);
 let ct = Ut, At = !1;
 function Re(s) {
   if (At)
@@ -1082,7 +1084,7 @@ function X(s) {
 let I = "", J, Nt, k, tt, Dt, m = new Ht();
 m.resolve();
 let H = 0;
-const qe = (s) => (Re((t, e) => Ne(Dt, t, e)), I = Nt = s.sourceLocale, k = new Set(s.targetLocales), k.add(s.sourceLocale), tt = s.loadLocale, { getLocale: Ie, setLocale: ke }), Ie = () => I, ke = (s) => {
+const qe = (s) => (Re(((t, e) => Ne(Dt, t, e))), I = Nt = s.sourceLocale, k = new Set(s.targetLocales), k.add(s.sourceLocale), tt = s.loadLocale, { getLocale: Ie, setLocale: ke }), Ie = () => I, ke = (s) => {
   if (s === (J ?? I))
     return m.promise;
   if (!k || !tt)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/boilerplate",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "description": "Startin'blox Boilerplate",
   "main": "dist/index.js",
   "type": "module",
@@ -67,24 +67,24 @@
   ],
   "dependencies": {
     "@lit/localize": "^0.12.2",
-    "@lit/task": "^1.0.2",
+    "@lit/task": "^1.0.3",
     "autoprefixer": "^10.4.21",
-    "cssnano": "^7.0.7",
-    "lit": "^3.3.0",
+    "cssnano": "^7.1.1",
+    "lit": "^3.3.1",
     "postcss": "^8.5.6",
-    "postcss-preset-env": "^10.2.3",
+    "postcss-preset-env": "^10.4.0",
     "postcss-scss": "^4.0.9",
-    "sass": "^1.89.2",
-    "unplugin-icons": "^22.1.0",
-    "vite": "^7.0.0"
+    "sass": "^1.93.2",
+    "unplugin-icons": "^22.5.0",
+    "vite": "^7.1.12"
   },
   "devDependencies": {
     "@lit/localize-tools": "^0.8.0",
-    "@storybook/addon-docs": "^9.0.13",
-    "@storybook/web-components-vite": "^9.0.13",
-    "cypress": "^14.5.0",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/web-components-vite": "^9.1.13",
+    "cypress": "^15.5.0",
     "cypress-ct-lit": "^1.0.0",
     "lorem-ipsum": "^2.0.8",
-    "storybook": "^9.0.13"
+    "storybook": "^9.1.13"
   }
 }