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