PHPackages                             brandaddition/module-svelte - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. brandaddition/module-svelte

ActiveMagento2-module

brandaddition/module-svelte
===========================

BA Svelte Module

26.09.00-rc3(1mo ago)223EUPL-1.2PHPPHP ~8.2||~8.3||~8.4CI passing

Since Jun 11Pushed 5d agoCompare

[ Source](https://github.com/Brand-Addition/ba-module-svelte)[ Packagist](https://packagist.org/packages/brandaddition/module-svelte)[ RSS](/packages/brandaddition-module-svelte/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (16)Versions (6)Used By (0)

BA\_Svelte
==========

[](#ba_svelte)

`BA_Svelte` is the shared Magento 2 Svelte platform for BA storefront modules.

In practice a BA storefront module built on `BA_Svelte` usually looks like this:

1. Layout XML declares a root `SvelteBlock`
2. That root points at a `.svelte` component in your module
3. XML arguments, a `view_model`, and `computed_props` become component props
4. Optional view xml child blocks/containers become named Svelte slots
5. The shared runtime mounts the root component on the page
6. Your Svelte code imports shared BA platform helpers through `@modules`

That keeps the authoring model simple:

- normal Magento layout and blocks
- normal Svelte components
- no extra registry file
- no second naming system
- Magento-native `before`, `after`, `move`, and `remove` still work

The Main Pieces
---------------

[](#the-main-pieces)

Simply, can be condensed to:

- `BA\Svelte\Block\SvelteBlock`Any svelte block on frontend. Can be root or child components.
- `view/frontend/templates/root.phtml`Emits the `.svelte-root` wrapper, serialized config, and optional server fallback markup.
- `view/frontend/web/svelte-src`Shared Vite source used to build the runtime bundle against the deployed static-content tree.

To build your svelte interface, and run `bin/magento setup:static-content:deploy -f --jobs=20 --area=frontend` to show on frontend.

After that, you can run `bin/magento ba:svelte:watch` while developing to automatically rebuild your svelte bundle on file changes.

- `BA\Svelte\Block\SvelteBlock`Any svelte block on frontend. Can be root or child components.
- `BA\Svelte\Block\SvelteLink`Root-style Svelte block for sorted Magento link collections such as `top.links`.
- `view/frontend/templates/root.phtml`Emits the `.svelte-root` wrapper, serialized config, and optional server fallback markup.
- `view/frontend/web/svelte-src`Shared Vite source used to build the runtime bundle against the deployed static-content tree.
- `view/frontend/web/js/lib/i18n.js`Public translation helper.
- `view/frontend/web/js/lib/messages.js`Public message and Magento fragment update facade.
- `view/frontend/web/js/lib/magento.js`**BETA** Public Magento URL and JSON request helper facade.
- `view/frontend/web/js/lib/state.js`**BETA** Public customer-section and store hydration facade.
- `view/frontend/web/js/lib/forms.js`**ALPHA** Public validation and AJAX form facade.
- `view/frontend/web/js/lib/commerce.js`**TODO** Public add-to-cart facade.

Start A New Root Mount
----------------------

[](#start-a-new-root-mount)

The normal starting point is one root block in layout XML.

```

       template="BA_Svelte::root.phtml"

        Vendor_Module::example-root.svelte
        Example

                url
                rest/V1/example

```

`svelte_component` uses Magento template notation:

- `Vendor_Module::example-root.svelte`

That resolves to:

- `view/frontend/web/svelte/example-root.svelte`

The matching root component can then read normal props plus the container helpers:

```

    import ContainerRenderer from '@modules/BA_Svelte/svelte/container-renderer.svelte';

    let {
        heading = 'Example',
        get_container: getContainer,
    } = $props();

    {heading}

```

Add Magento-Native Extension Points
-----------------------------------

[](#add-magento-native-extension-points)

Obviously, as its just view xml, a second module can extend the xml we added above:

```

            Vendor_Module::actions/primary-button.svelte
            Continue

```

Given the parent module uses `$state` in a seperate file imported using `@modules`, you can bring that in, and change the state from your added component.

Every mounted component receives:

- normal props from XML arguments and `computed_props`
- `containers`
- `get_container(name)`
- `has_container(name)`
- `default_container`

Render nested configs through:

- `@modules/BA_Svelte/svelte/container-renderer.svelte`
- `@modules/BA_Svelte/svelte/block-renderer.svelte`
- `@modules/BA_Svelte/svelte/renderer.svelte`

If you need to render one child block directly and optionally override props inline:

```

    import BlockRenderer from '@modules/BA_Svelte/svelte/block-renderer.svelte';

    let {
        default_container: defaultContainer,
    } = $props();

```

You can also target a child by layout block name:

```

```

Add A Static HTML Fallback
--------------------------

[](#add-a-static-html-fallback)

Root mounts can optionally render server HTML first and then let the runtime progressively enhance it.

To do that, add a normal Magento child block with alias `fallback` under the root `SvelteBlock`.

Example:

```

        Vendor_Module::example-root.svelte

```

Behavior:

- the fallback markup stays visible initially
- BA\_Svelte mounts the Svelte app into a hidden host inside the same root wrapper
- after the first successful client render, the runtime removes the fallback and reveals the mounted app
- if config parsing or mount fails, the fallback stays in place

This is root-mount behavior only. It is not a Svelte hydration contract and it does not preserve DOM identity between server HTML and the client component.

Quick render using the viewmodel
--------------------------------

[](#quick-render-using-the-viewmodel)

Sometimes you may need to render a svelte block without using the svelte block class. If you bring in `BA\Svelte\ViewModel\SvelteBlockRenderer` as a viewmodel, you can call `render()`. This wont include child components, but will in future.

Use A Svelte Mount In Sorted Link Collections
---------------------------------------------

[](#use-a-svelte-mount-in-sorted-link-collections)

If the component needs to participate in link collections that expect `SortLinkInterface`, use `BA\Svelte\Block\SvelteLink`.

```

            60
            Vendor_Module::account-link.svelte
            Vendor\Module\ViewModel\AccountLink

            Vendor_Module::link.phtml

```

Use this for:

- `top.links`
- customer account link groups
- theme-specific link builders that sort children through Magento link APIs

Pass Data Into Components
-------------------------

[](#pass-data-into-components)

There are three normal ways to get data into a component:

### 1. Plain XML Arguments

[](#1-plain-xml-arguments)

Any non-reserved XML argument on a `SvelteBlock` is normalized into component props.

```
Example
true
```

### 2. `view_model`

[](#2-view_model)

You can attach a Magento `view_model` and let `BA_Svelte` reflect its getter methods into props.

```
Vendor\Module\ViewModel\Example
```

Example view model:

```