@repobit/dex-store-elements 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-store-elements@1.2.5...@repobit/dex-store-elements@1.2.6) (2025-10-31)
+
+**Note:** Version bump only for package @repobit/dex-store-elements
+
+
+
+
+
+## [1.2.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-store-elements@1.2.4...@repobit/dex-store-elements@1.2.5) (2025-10-28)
+
+**Note:** Version bump only for package @repobit/dex-store-elements
+
+
+
+
+
 ## [1.2.4](https://github.com/bitdefender/dex-core/compare/@repobit/dex-store-elements@1.2.3...@repobit/dex-store-elements@1.2.4) (2025-10-20)
 
 

package/README.md

@@ -35,6 +35,21 @@ Peer dependencies are resolved automatically by npm; no extra install command is
       provider: { name: 'vlaicu' }
     });
 
+    // Optional: analytics data layer callback
+    // Fires once per <bd-option> that sets `data-layer-event`
+    root.dataLayer = ({ option, event }) => {
+      // Example GTM-style push; adapt fields as needed
+      window.dataLayer?.push({
+        event,
+        productId   : option.getProduct().getId(),
+        campaign    : option.getProduct().getCampaign(),
+        variation   : option.getVariation(), // e.g. "5-12"
+        devices     : option.getDevices(),
+        subscription: option.getSubscription(),
+        price       : option.getDiscountedPrice({ currency: false })
+      });
+    };
+
     // Optional: define derived values/functions for templates + hide DSL
     root.derived = async ({ option }) => ({
       mails: (p) => ((option?.getDevices?.() ?? 0) / p) * 100
@@ -47,18 +62,18 @@ Peer dependencies are resolved automatically by npm; no extra install command is
 
 <bd-root store-name="root">
   <bd-product store-name="product" product-id="com.bitdefender.tsmd.v2">
-    <bd-option devices="5" subscription="12">
+    <bd-option devices="5" subscription="12" data-layer-event="info">
       <!-- Attribute renderers (see below) -->
       <div data-store-render data-store-devices></div>
       <div data-store-render data-store-subscription data-store-subscription-type="years"></div>
       <div data-store-render data-store-price="discounted || full"></div>
       <a data-store-render data-store-buy-link>Buy</a>
       <!-- Eta template (text) -->
-      <p>Now at only {{= it.option.discountedPrice }}!</p>
+      <p>Now at only {{= it.option.price.discounted }}!</p>
       <!-- Eta template (attribute, implicit) -->
       <div title="Devices {{= it.option.devices }}"></div>
       <!-- Hide via DSL using merged context -->
-      <div data-store-render data-store-hide="!it.option.discountedPrice">
+      <div data-store-render data-store-hide="!it.option.price.discounted">
         Hidden when discounted price doesn't exists
       </div>
       <!-- Actions -->
@@ -162,8 +177,8 @@ Notes
     - `it.state.*` aggregated min/max data (also available under `it.ctx`)
     - any keys returned from your `root.derived`
   - Examples:
-    - `data-store-hide="it.option.discountedPrice === 0"`
-    - `data-store-hide="(it.state.price.min > 100) && (it.product.campaign === 'test')"`
+    - `data-store-hide="!it.option.price.discounted"` (hide when no discounted price)
+    - `data-store-hide="it.product.campaign === 'test'"`
 
 ## Eta templates
 - Text/HTML: any element that is not a provider and doesn’t contain nested providers is treated as a whole-template; `innerHTML` is compiled once and morphed via nanomorph. This preserves existing DOM event listeners and state.
@@ -176,12 +191,121 @@ Notes
   - your derived overlay merged at top-level (see below)
 
 ## Derived variables/functions
-- Provide a function at the root: `root.derived = async ({ option, product, state, store }) => ({ ... })`
+- Provide a function at the root: `root.derived = async ({ option, product, state }) => ({ ... })`
 - The returned object is merged into the Eta/DSL context:
-  - Example: `({ mails: (p) => (option.getDevices()/p)*100, option: { someVar: state.discount.value.min } })`
+  - Example: `({ mails: (p) => (option?.getDevices?.()/p)*100, option: { someVar: state.discount.value.min } })`
   - Use it in Eta: `{{= it.mails(10) }}` or `{{= it.option.someVar }}`
   - Use it in hide: `data-store-hide="it.mails(10) >= 50"`
 
+## DSL context reference
+The DSL and Eta contexts use Eta’s default variable name `it`. The following keys are available:
+
+- it.option
+  - price
+    - full: formatted full price (string)
+    - discounted: formatted discounted price (string)
+    - fullMonthly: formatted monthly full price (string)
+    - discountedMonthly: formatted monthly discounted price (string)
+  - discount
+    - value: formatted discount amount (string)
+    - percentage: formatted percentage discount with symbol (string)
+    - valueMonthly: formatted monthly discount amount (string)
+    - percentageMonthly: formatted monthly percentage with symbol (string)
+  - links
+    - buy: buy URL (string)
+    - trial: trial URL if available (string)
+  - devices: number
+  - subscription: number
+
+- it.product
+  - id: string
+  - campaign: string
+  - name: string
+
+- it.state (also available as `it.ctx`)
+  - price
+    - full
+      - min: formatted string
+      - max: formatted string
+      - monthly
+        - min: formatted string
+        - max: formatted string
+    - discounted
+      - min: formatted string
+      - max: formatted string
+      - monthly
+        - min: formatted string
+        - max: formatted string
+  - discount
+    - percentage
+      - min: formatted string
+      - max: formatted string
+      - monthly
+        - min: formatted string
+        - max: formatted string
+    - value
+      - min: formatted string
+      - max: formatted string
+      - monthly
+        - min: formatted string
+        - max: formatted string
+
+Notes
+- All price/discount values in the DSL are formatted strings (currency-aware). Do not perform numeric comparisons on them. Prefer truthiness checks (e.g., `!it.option.price.discounted`).
+- `it.ctx` is an alias of `it.state` for convenience.
+
+## Data Layer
+- Provide a function on `<bd-root>`: `root.dataLayer = ({ option, event }) => { ... }`.
+  - Called once per `<bd-option>` instance that declares `data-layer-event` (on first successful load).
+  - Safe if attached after the option loads; it still fires once when available.
+  - Intended for analytics (e.g., pushing to `window.dataLayer`).
+- Event name is set on each `<bd-option>` with `data-layer-event`.
+  - Canonical values: `all`, `info`, `comparison`. Any custom string is also accepted.
+- Payload shape passed to your callback:
+  - `event`: string event name.
+  - `option`: `ProductOption` from `@repobit/dex-store` with getters like `getProduct()`, `getVariation()`, `getDevices()`, `getSubscription()`, `getBuyLink()`, `getDiscountedPrice()`.
+
+Example:
+
+```html
+<script type="module">
+  import { registerContextNodes, registerActionNodes } from '@repobit/dex-store-elements';
+  import { Store } from '@repobit/dex-store';
+
+  window.addEventListener('DOMContentLoaded', async () => {
+    registerContextNodes();
+    const root = document.querySelector('bd-root');
+    root.store = new Store({ locale: 'en-us', provider: { name: 'vlaicu' } });
+
+    root.dataLayer = ({ option, event }) => {
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event,
+        productId: option.getProduct().getId(),
+        campaign : option.getProduct().getCampaign(),
+        variation: option.getVariation(),
+        devices  : option.getDevices(),
+        subscription: option.getSubscription()
+      });
+    };
+
+    registerActionNodes(root);
+  });
+</script>
+
+<bd-root store-name="root">
+  <bd-product store-name="product" product-id="com.bitdefender.tsmd.v2">
+    <bd-option devices="5" subscription="12" data-layer-event="info">
+      <!-- your UI here -->
+    </bd-option>
+  </bd-product>
+</bd-root>
+```
+
+Behavior notes
+- Fires only once per `<bd-option>` instance (first load). Subsequent changes via actions or deltas do not trigger the callback again.
+- Set different `data-layer-event` values on different options if you need multiple distinct analytics events.
+
 ## Actions
 - Add `data-store-action` to elements to emit store events.
   - Set absolute values: `data-store-set-devices`, `data-store-set-subscription`, `data-store-set-id`, `data-store-set-campaign`

package/dist/src/contexts/context.datalayer.d.ts

@@ -1,7 +1,7 @@
 import type { ProductOption } from '@repobit/dex-store';
 export type dataLayerPayload = {
     option: ProductOption;
-    event: "product-loaded" | "main-product-loaded" | "product-comparison" | (string & {});
+    event: "all" | "info" | "comparison" | (string & {});
 };
 export type dataLayerContextType = ((payload: dataLayerPayload) => void) | undefined;
 export declare const dataLayerContext: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-store-elements",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "HTML elements layer for pricings",
   "author": "Buga Adrian Alexandru <abuga@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -62,5 +62,5 @@
       ]
     }
   },
-  "gitHead": "c38f5d5676fedc5a6adc0b1248803ac5ad376f86"
+  "gitHead": "45026ddb310bc191c78072fa27ab36ec1049fa0d"
 }