How to Install Signalize in Symfony

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');