Updating to Venta Theme 1.6.3 (JS bundle) ​

1.6.3 adds a static theme JS bundle, web/js/venta-bundle.min.js, built by esbuild and loaded deferred from the head. Scripts that were inline on every page now live in it; templates emit only small window.ventaBundleConfig bridges for page-specific values.

An existing project must build the bundle in its own theme, or those scripts stop loading. This guide covers that. 1.6.3 also ships the SVG icon sprite and Hyvä CMS elements (features).

Recommended reading:

• Creating Custom Theme, JS bundle
• Updating to 1.6.0

Prerequisites ​

• Project already on Venta Theme 1.6.0+ (the TailwindCSS v4 build stack). If not, do Updating to 1.6.0 first.
• Node.js 20+.

What changed across the modules ​

1. Update Composer dependencies ​

{
  "require": {
    "magebitcom/magento2-venta-theme": "1.6.3.1",
    "magebitcom/magento2-venta-theme-module": "1.6.3.1",
    "magebitcom/magento2-venta-theme-smile-elasticsuite-module": "1.6.3",
    "magebitcom/magento2-venta-theme-back-in-stock-module": "1.0.6"
  }
}

composer update \
  magebitcom/magento2-venta-theme \
  magebitcom/magento2-venta-theme-module \
  magebitcom/magento2-venta-theme-smile-elasticsuite-module \
  magebitcom/magento2-venta-theme-back-in-stock-module \
  --with-all-dependencies

2. Configure the bundle in your project theme ​

The bundle is built by the theme that extends Magebit/venta directly.

package.json ​

Copy from Venta Theme (brings esbuild and the v4 scripts):

cp vendor/magebitcom/magento2-venta-theme/web/tailwind/package.json app/design/frontend/<Vendor>/<ProjectTheme>/web/tailwind/
cp vendor/magebitcom/magento2-venta-theme/web/tailwind/package-lock.json app/design/frontend/<Vendor>/<ProjectTheme>/web/tailwind/

Maintaining your own package.json? The bundle-relevant additions are esbuild in dependencies plus:

"rebuild-js": "node esbundle.mjs",
"build-prod": "npm run generate && npm run rebuild-js && npm run build && npm run output-success"

esbundle.mjs ​

Copy from Venta Theme (no edits, it resolves the Magento root by path):

cp vendor/magebitcom/magento2-venta-theme/web/tailwind/esbundle.mjs app/design/frontend/<Vendor>/<ProjectTheme>/web/tailwind/

venta-bundle.js ​

Create web/tailwind/venta-bundle.js (authored per theme, not copied). It imports Venta's theme JS from vendor and the generated extension bundle. rebuild-js writes generated/extension-bundle.js, so the first build must run it (build-prod does).

/**
 * @author    Magebit <info@magebit.com>
 * @copyright Copyright (c) Magebit, Ltd. (https://magebit.com)
 * @license   https://magebit.com/code-license
 */

import '../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/js/bundle/modal.js';
import '../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/js/bundle/snap-slider.js';
import '../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/js/bundle/configurable-options.js';
import '../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/js/bundle/messages.js';
import '../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/js/bundle/cart-drawer.js';

/* Extension JS discovered by esbundle.mjs through module venta-bundle/ directories */
import './generated/extension-bundle.js';

Add generated/ to the theme's web/tailwind/.gitignore.

3. Rebuild and deploy ​

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

cd app/design/frontend/<Vendor>/<ProjectTheme>/web/tailwind
npm ci
npm run build-prod

Adding project custom scripts to the bundle ​

Two ways to add your own scripts.

From a module (auto-discovered): drop files in view/frontend/web/js/venta-bundle/.

app/code/<Vendor>/<Module>/view/frontend/web/js/venta-bundle/my-feature.js

esbundle.mjs scans app/code and vendor, no entry-file edit needed. Rebuild after adding or removing one.

From the theme: add an import to venta-bundle.js.

import './js/bundle/my-feature.js';

Bundled scripts are static. Page-specific values (translations, config) cannot live in a cached file. Emit them from the template:

<script>
    window.ventaBundleConfig = window.ventaBundleConfig || {};
    window.ventaBundleConfig.myFeature = {
        label: "<?= $escaper->escapeJs(__('Notify me')) ?>"
    };
</script>

The bundled script reads it:

const { label } = window.ventaBundleConfig?.myFeature ?? {};

back-in-stock works this way: logic in the bundle, translated labels inline.

When to bundle ​

The bundle is one file, loaded on every page and cached site-wide.

• Add a script when it runs on most or all pages. Downloaded and parsed once, then reused, instead of re-sent inline per page.
• Keep it page-local when it runs on one or a few pages. In the bundle it costs every page a download and parse it never uses.

Constraints:

• Static and translation-free. Per-store translations and per-page config go through the window.ventaBundleConfig bridge.
• Installing or removing a module with venta-bundle/ scripts requires a rebuild.