How to Install Signalize in Symfony

Learn how to easily and quickly install the Signalize framework in your Symfony applications.

Asset Mapper

This tutorial assumes you are using Symfony’s Asset Mapper.

Install Signalize

npm i signalizejs

yarn add signalizejs

pnpm i signalizejs

Configure Importmap

Open the importmap.php file and add the following:

// ...

return [
	'app' => [
		'path' => './assets/app.js',
		'entrypoint' => true,
	],
	// This module will be prepared in importmap for lazy import
	'signalizejs/sizes' => [
		'path' => './node_modules/signalizejs/modules/sizes.js',
		'entrypoint' => true
	],
];

Next, open ./assets/app.js:

import Signalize from 'signalizejs';
// We will need these two modules immediately
import EventModule from 'signalizejs/event';
import MutationObserverModule from 'signalizejs/mutation-observer';

export const signalize = new Signalize({
	modules: [
		// Initiate modules instantly
		['event', EventModule],
		['mutation-observer', MutationObserverModule]
	]
});

// There will be no request for 'signalizejs/event'
// because the module is already imported.
const { on } = await signalize.resolve('event');

// When we need the preconfigured "signalizejs/sizes" module,
// we can use the resolve function to import it.
// Signalize will use the configured importmap generated by Symfony.
const { width } = await signalize.resolve('sizes');

How to Import Signalize in Different Files

Let’s say you have a homepage.js file and you want to import Signalize from app.js. Simply create a homepage.js and it from the app module you configured in the importmap.

import { signalize } from 'app';

const { width } = await signalize.resolve('sizes');