JS Application Flow
There is a JS application flow that begins in the {Project Root}/templates/_inc/base/scripts.twig, and creates an instance of the App class. From this point on, most other JS is controlled or kicked off from here.
A high-level overview of the flow is detailed below:
Preparation#
{Project Root}/templates/_inc/base/scripts.twig
We add the current page handle to the JS window scope, and include the bundle.js generated by Webpack.
Entry Point#
{Project Root}/src/js/app.js
Here we define an App class, and initialise a new instance of itself at the bottom of the file.
Amongst other things, the App class is responsible for loading the relevant JS module based on the page handle that was added to the window scope in the scripts.twig above.
It also initialises several other utilities that are intended to be implemented across all pages of the site.
Page Scoped Code#
{Project Root}/src/js/pages/*.js
Each of the JS files in this folder are intended to be scoped to individual pages.
In each file you should find an ES6 class, named in the pattern of {CraftPageHandle}Page, a few practical examples of class names are:
HomePage- for Craft page handlehomeProductsListPage- for Craft page handleproductsListProductsDetailPage- for Craft page handleproductsDetailContactPage- for Craft page handlecontact
Please note the uppercased first letter of the class name.
Component Scoped Code#
{Project Root}/src/js/components/*.js
Each of the JS files in this folder and it's subfolders are intended to be scoped to individual components/blocks.
In each file you should find an ES6 class, there is no required naming pattern. The only requirement is that you should import this module and instantiate wherever it is needed. For the case of block builders, this may be done automatically.