Download the PHP package brandaddition/module-svelte without Composer

On this page you can find all versions of the php package brandaddition/module-svelte. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of brandaddition/module-svelte

Informations about the package module-svelte

BA_Svelte

BA_Svelte is a Magento 2 Svelte integration.

A module built on BA_Svelte usually looks like this:

  1. Layout XML declares a root SvelteBlock
  2. That root template is set to BA_Svelte::root.phtml
  3. Most svelte components specificy which .svelte component using XML arguments
  4. PHP data comes in through both view_model and computed_props. They come in as props to the .svelte component.
  5. Optional view xml child blocks/containers become named Svelte slots
  6. Svelte code imports through @modules

That keeps the authoring model simple:

Careful relying only on view_model and computed_props if you have varnish caching on production - those cases should be brought in via a REST or GraphQL API. Further reading here.

Installation & running

  1. composer require brandaddition/module-svelte
  2. bin/magento setup:upgrade
  3. bin/magento setup:static-content:deploy -f --jobs=20 --area=frontend

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

The Main Pieces

Start A New Root Mount

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

svelte_component uses Magento template notation:

That resolves to:

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

Extension Points

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

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:

Render nested configs through:

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

You can also target a child by layout block name:

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:

Behavior:

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

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 may in the future.

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.

Use this for:

Pass Data Into Components

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

1. Plain XML Arguments

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

2. view_model

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

Example view model:

That becomes:

Reflection rules:

Only public zero-argument getter methods are included. Reflected view_model props are merged before computed_props, and explicit XML props still win if keys collide.

3. computed_props

Use resolver-backed props for values that should be calculated at render time.

Built-in resolvers:

You can also list all registered resolvers using the ba:svelte:resolver:list command.

Example:

Add a new computed_props using di pool

If the built-in resolvers are not enough, add your own resolver class in your module and register it into BA\Svelte\Model\PropResolverPool through DI.

Example resolver:

Register it in your module etc/di.xml:

Then use it in layout XML:

Rules for custom resolvers:

Inspect The Final Prop Contract

If you want to see what a mounted block will actually receive, use the CLI helper:

The command loads default plus the handle you pass, resolves the named BA_Svelte block, and prints a typed Svelte 5 $props() snippet.

Use --store=<code> when the layout or computed props depend on store scope.

Write Svelte Code Against @modules

Svelte modules in this setup import shared code through the @modules Vite alias.

Example:

@modules points at the deployed static-content root for the current storefront, not at app/code directly.

So:

resolves against:

Why this matters:

Rules:

The Public JS APIs

Most feature modules should build on the public facades below and avoid js/lib/runtime/*, http.js, and url.js directly.

Translation

This uses window.baTranslate() and falls back to the original string when no Svelte translation entry exists.

BA_Svelte scans Svelte-backed .svelte, .ts, and .js source files on the Magento side and exposes a translated hashmap to the storefront runtime.

Use _('Literal phrase') for any Svelte-authored text that needs Magento translation. Dynamic expressions, concatenated strings, and template literals with expressions are not extracted into the BA_Svelte translation map, so they fall back to the original source text.

Example:

Quick note on the translation. It reads most files in the view folder, regexing for translation tags. Because of this it defines a cache type using `cache.xml` and there are restrictions to the translation. Consider the code snippet below. The prop must come in already translated, as BA_Svelte won't know what text needs translating. Also, the `_()` has moved to be a variable rather than a string, so this may too struggle.

Price Rendering

If a module needs standard price output, use the shared price component:

This component handles:

Props:

Example:

The component is for rendering only. Decide what the price data should be in Magento or in your owning feature module, then pass the normalized values in as props.

Messages

Use messages.js for:

It emits an event using window.dispatchEvent(), theres a mixin to get this working with Luma. If you are not using a standard magento theme, you may need to add a listener like window.addEventListener('svelte:message', (event) => {...}. As an example see view/frontend/web/js/magento-mixin/messages.js

Example usage:

GraphQL

GraphQL queries can be posted using inbuilt tools.

First, define your query in your module's /js/graphql/queries folder. The formatting needs to follow the below example:

Then, import then query sender:

You can then post your query, with any arguments that are required for the call:

Magento Utilities

Use magento.js for:

Rules:

State

Status: beta. Expect change.

Use state.js for:

Get a Section

Get Multiple Sections

Load Sections

Force Reload

Update a Section

Subscribe to Changes

Cleanup:

Svelte 5 Example

Recommended Usage

Use the shared singleton:

Only instantiate CustomerSections directly when testing or creating isolated instances.

Forms

Status: very alpha. Expect change.

Use forms.js for:

Rules:

Commerce

Status: Cart behavior, Needs implementing.

Use Declarative Runtime Elements Where They Fit

The runtime bootstrap itself is internal, but these markup contracts are public:

Example modal:

Replace Magento JS With BA_Svelte Contracts

When you are modernizing a module, these are the preferred replacements:

Replace this Use this BA_Svelte surface Do not use
customer-data wrappers state.js feature-local customer section adapters
Magento_Ui/js/modal/modal Popup.svelte or <ba-modal> runtime modal internals
Magento_Catalog/js/validate-product forms.js plus commerce.js feature-local validation bootstraps
catalogAddToCart commerce.js or <ba-add-to-cart> feature-local add-to-cart wrappers - NEEDS IMPLEMENTING
repeated REST URL glue magento.js feature-local URL helpers
feature-local JSON fetch wrappers magento.js http.js from feature code
feature-local flash/server message plumbing messages.js duplicate message fragment implementations

Internal paths that should not appear in new feature code:

Popup Pattern

The default popup direction is native.

Use:

Example:

Exit criteria for a migrated popup:

Build And Deploy

Normal Magento Flow

  1. Run bin/magento setup:static-content:deploy
  2. BA_Svelte detects deployed storefront roots containing BA_Svelte assets
  3. For each deployed root, it runs npm run build inside view/frontend/web/svelte-src

Remember the watch command for development: bin/magento ba:svelte:watch

Manual Build

If you need to point at one deployed storefront root explicitly:

Notes

All versions of module-svelte with dependencies

PHP Build Version
Package Version
Requires php Version ~8.2||~8.3||~8.4
magento/module-backend Version *
thecodingmachine/safe Version ^3.4
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package brandaddition/module-svelte contains the following files

Loading the files please wait ...