heimrichhannot/contao-encore-bundle

This bundle brings integration between Symfony encore and Contao CMS.

Contao Encore Bundle

Use the power and simplicity of symfony webpack encore in contao. This bundle let you decide on layout and page level, which encore entries should be loaded. If you want more, you can prepare your bundles define their own encore entries, so never need to manually add or remove encore entries again.

Features

• use symfony encore (symfony/webpack-encore and symfony/webpack-encore-bundle) to enhance your contao assets workflow
• conditionally load your assets only if necessary (entrypoints can be activated in the backend in layout and page setting or added from your bundle code (e.g. in a frontend module))
• prepare your bundles to add encore entries when install them and strip assets from the contao global asset arrays

Setup

Prerequisites

• Read the Encore Documentation in order to install Encore and understand the core concepts of Webpack and Symfony Encore.

Prepare your project and bundle

Setup your project for encore bundle:

➡️ Project setup

➡️ Bundle setup

Run Encore

1. Run encore prepare command

   php vendor/bin/contao-console huh:encore:prepare
   

2. If (yarn) dependencies have changed, run yan install

   yarn install
   

3. Run encore to generate the assets

   yarn encore dev
   

4. Activate encore entries in the contao backend (if not added from code)

Usage

Activate encore entries

1. In the contao backend, go to page layout configuration
2. Check "Activate Webpack Encore" and fill the mandatory fields
3. If you have a main project bundle entry containing the main stylesheets, add it as active entry, add also all other entries you want to have activated on every page.
4. For page specific features, you can activate additional entries in page setting (site structure).
   • Be aware, that child pages will inherit settings from their parants
   • Pay attention that you check entries as active (if you want them to be loaded)!
   • If you want an already added entry to be not loaded on an specific page, select it as entry and don't check "active".

Prepare command

php vendor/bin/contao-console huh:encore:prepare

The prepare command must be executed after every change to the encore entries configuration, e.g. after a composer update or changes to that configurations in your own code.

The command collect encore entries from all bundle and creates a file called encore.bundles.js in your project root. This file contains entries for all contao encore compatible bundles that are added by calling encoreBundles.addEntries(); in your webpack.config.js.

It also collects the dependencies from the package.json files of bundles have EncoreExtensions registered and adds them to the project dependencies.

Description:
  Does the necessary preparation for contao encore bundle. Needs to be called after changes to bundle encore entries.

Usage:
  huh:encore:prepare [options]
  encore:prepare

Options:
      --skip-entries[=SKIP-ENTRIES]  Add a comma separated list of entries to skip their generation. [default: false]

Run encore

Run encore to generate/compile your assets.

yarn encore dev 
yarn encore dev --watch 
yarn encore prod

Documentation

Project setup - Prepare your contao project for use with encore and encore bundle

Bundle setup - Add encore bundle support to your bundle

Setup Javascript - Help about setting up your encore entries

Developer Documentation

Configuration Reference

contao-encore-bundle's Issues

[Feature Request] Support multiple encore builds

This is follow-up to #8.

Encore supports multiple webpack builds. This could be supported in the future.

See https://symfony.com/doc/current/frontend/encore/advanced-config.html#defining-multiple-webpack-configurations

Version 2.0

This is an idea and planing task for the next major release.

• Remove babel setting from layout, can now be included as entries since 1.1
• Remove unnecassery encore config key (setting can be added directry under huh_encore)
• Unset dynamic entries in Layout (add active field)
• Remove custom fe_page fields (use contao default fields)
• Remove entry definition support
• Remove utils bundle dependency
• Remove deprecations

Services für Symfony 4 nicht public

Erhalte die Fehlermeldung, dass die beiden services nicht public sind. Ab Symfony 4 müssen alle Services explizit auf true gesetzt werden.
public:true in services.yml

Support style entries

Encore configuration has an option to add style entries via Encore.addStyleEntry('style-entry', './src/Resources/assets/scss/style.scss'). Could be implemented so bundles so some unnecessary js files could be avoided.

Documentation:
https://symfony.com/doc/current/frontend/encore/simple-example.html#compiling-only-a-css-file

Proposal: Use default contao template fields

We should use replaceDynamicScriptTags Hook in combination with [[TL_BODY]], [[TL_CSS]], [[TL_HEAD]] to insert encore assets instead of using our own template variables. So this bundle would be easier to use and need no changes to the default fe_page template.

Possible Roadmap:

1. add ´use_contao_script_tags` config with default value false
2. if set to true, these will be used instead of our own template variables
3. in version 2.0 this option will set to true by default (or removed in combination with our own template tags)

Disadvantage:

• the hook just pass the buffer, no other context variables -> in contao 4.9 we have the page object in the request, so we could use this. For 4.4 we could drop the support in version 2.0 or add the page object before (if not already there, this must be checked)

Links:
https://docs.contao.org/dev/reference/hooks/replaceDynamicScriptTags/

Import custom entries from build/entrypoints.json

As far as i understand, i have to add all my entries from the webpack.config.js to the config.yml in order to use it in the layout or pages.

Would it be possible to parse the build/entrypoints.json generated by Encore (filter out the babel-polyfill and other duplicates from the config.yml) and show them in addition to the once from the config? The requiresCss could be defined by detecting a .css and head could be false by default.

This would speed up the usage of this bundle a lot, in my opinion.

Command nicht definiert ? There are no commands defined in the "encore" namespace.

Ich schon wieder 😉
Wenn ich auf der console encore:prepare aufrufe erhalte ich folgende Meldung:

There are no commands defined in the "encore" namespace.

Anscheinend wird das Command nicht definiert bzw. fehlt die commands.yml?

Deployment schlägt fehl, inkompatibel mit Rocksolid Custom Elements?

Context
Contao version: 4.13.11
Bundle version: 1.17.2
PHP version: 8.0

Description
Seit Contao 4.13.6 (4.13.5 hat noch problemlos funktioniert) haben wir in Verbindung mit dem Deployer und der Erweiterung "Rocksolid Custom Elements" das Problem, dass das Deployment fehlschlägt, mit dem Fehler:

  PHP Fatal error:  Cannot declare class tl_theme, because the name is already in use in /srv/www/webtool-80/public/flex-5/releases/2/vendor/contao/core-bundle/src/Resources/contao/dca/tl_theme.php on line 0

  In tl_theme.php line n/a:

    Compile Error: Cannot declare class tl_theme, because the name is already in use

Dies passiert beim Schritt
Executing task deploy:vendors

In einer leicht abgewandelten Form, haben wir diesen Fehler auch beim Deployen über Git (hier unter PHP 7.4):

An error occurred while executing the "/usr/bin/php7.4 -dmemory_limit=-1 /b  
  uilds/flex-websites/bps-design-5/vendor/contao/manager-bundle/bin/contao-co  
  nsole contao:symlinks web --env=prod --no-ansi" command: PHP Fatal error:    
  Cannot declare class tl_theme, because the name is already in use in /build  
  s/flex-websites/bps-design-5/vendor/contao/core-bundle/src/Resources/contao  
  /dca/tl_theme.php on line 216                                                
                                                                               
  In tl_theme.php line 216:                                                    
                                                                               
                                                                               
    Compile Error: Cannot declare class tl_theme, because the name is already  in use

Nach weiteren Tests hat sich folgendes herausgestellt (composer.json):
Kommt zum Fehler

        "contao/core-bundle": "4.13.*",
        "contao/faq-bundle": "4.13.*",
        "contao/manager-bundle": "4.13.*",
        "contao/news-bundle": "4.13.*",
        "contao/conflicts": "@dev",


        "madeyourday/contao-rocksolid-custom-elements": "^2.2",
        "heimrichhannot/contao-encore-bundle": "^1.15"

Fehlerfrei

        "contao/core-bundle": "4.13.*",
        "contao/faq-bundle": "4.13.*",
        "contao/manager-bundle": "4.13.*",
        "contao/news-bundle": "4.13.*",
        "contao/conflicts": "@dev",


        "madeyourday/contao-rocksolid-custom-elements": "^2.2"

Auch fehlerfrei

        "contao/core-bundle": "4.13.*",
        "contao/faq-bundle": "4.13.*",
        "contao/manager-bundle": "4.13.*",
        "contao/news-bundle": "4.13.*",
        "contao/conflicts": "@dev",

        "heimrichhannot/contao-encore-bundle": "^1.15"

Ich weiß leider nicht, wie ich noch weitere Informationen bereitstellen kann und welche der beiden Erweiterungen zum Problem führt.
Bei der RSCE-Erweiterung ist ebenfalls ein Issue erstellt:
madeyourday/contao-rocksolid-custom-elements#154

Feature: Update package.json from prepare command and make foxy obsulete

We could add the package.json files directly in our prepare command, so we don't need foxy anymore.

• Make encore bundle aware of bundles implementing it
• Extend prepare command to import bundle package.json's

Bug: Insertion of fe_page_encore_bundle on Contao-Preview

Context
Contao version: 4.13.14
Bundle version: 1.17.3
PHP version: 7.4.30

Description
When using the Contao preview function, under certain conditions the fe_page_encore_bundle can not be inserted into the fe_page.
Instead, the square brackets appear in the source code:

To review the issue, I created a preview link of a blog post. Hence, the issue is identical for my preview (logged in) and the customer preview (link with hash):
https://christian-methfessel.de/_contao/preview/5?_hash=rDt5YoK2N30k93mhpGk4ftJrCrCvdF0%2Fb7VGMX0KurM%3D

The (existing) page https://christian-methfessel.de/musiker/panfloete/ratgeber/stimmen-der-panfloete/ should be opened.
Instead, only the loading animation is shown (which would stop being there when the CSS files would be correctly loaded. If you peek beneath this div, you will notice that no js/css files were inserted by encore).

It seems that this issue only exists on some of my special blog detail pages, such as everything in /agile-coach/ and /musiker/panfloete/ .
On all the other pages and on my "basic blog" https://christian-methfessel.de/blog/ladeanimation-selbst-gemacht/ everything works fine.

So there is quite a chance that this issue is not easily reproducible.
If you need further insights, you can contact me and I give you full access to my development server.

Thanks!

Inline stylesheets not documented

contao-encore-bundle/src/EventListener/HookListener.php

Lines 118 to 121 in 98c3a72

	if ($includeInline)
	{
	$pageRegular->Template->encoreStylesheetsInline = $this->getInlineStylesheets($pageRegular->Template->encoreStylesheets);
	}

Feature: composer extension for prepare command

https://getcomposer.org/doc/articles/scripts.md

encorePublicPath in tl_layout is never used

It seems that the encorePublicPath field in tl_layout is never used.

The entries are loaded via the encore_entry_* Twig extensions from the Webpack Encore Bundle, which defines its own output_path.

ReferenceError: name is not defined in encore.bundles.js

I switched from my old Encore setup to your plugin. After installing it, i called vendor/bin/contao-console encore:prepare to generate the encore.bundles.js.

If i then execute yarn watch, i get the following error message:

ReferenceError: name is not defined
    at Object.name [as addEntries] ([...]/encore.bundles.js:105:14)
    at Object.addEntries ([...]/webpack.config.babel.js:91:15)

The code in that line is for (name in bundles). If i change this to for (let name in bundles) everything works as expected (varwould also work). This is probably related to my slightly stricter babel setup.

[Feature] entrypoint.json caching based on symfony environment

This is follow-up to #8.

Use entrypoints.json from current document root

Currently the extensions looks for /web/entrypoints.json which is not present if you install a clean contao 4.13 version.
The new web folder is now public, so the extension must use the current document root to search for the entrypoints.json.
Maybe it's somewhere hardcoded.

Feature: Template functions

We should provide template function to add encore entrypoints

Feature: Support for encore loaders and plugins

Hello,
we use this extension to develop a Contao Theme Bundle that takes advantage of Webpack and which we can include in multiple Contao instances.
With the basic functionalities of Encore this is working great!

But beyond that we would also like to use other plugins and loaders, such as this one: https://www.npmjs.com/package/svg-spritemap-webpack-plugin.

Therefore, it would be great to be able to add these, with appropriate configuration, as EncoreEntry as well.

Feature: make bundle compatible for Contao 5.x

Hello,

I'm not sure if this bundle might be still useful for Contao 5.x since it uses twig templates by itself (which makes your twig support bundle obsolete, at least).

If this bundle still might be useful (which I hope) there's no chance to use this bundle with Contao 5.x, since it depends on PHP 8.1.

Are there any plans (resp. quick workarounds available) to do any upgrade of this bundle to let it work with Contao 5.x?

Otherwise, If this bundle is obsolete are there any sources where to get some docs to let Encore work properly with Contao 5.x?
Unfortunately I haven't found any docs for the current Contao version since nearly all docs relate to Contao 4.x.

Thanks.

Symfony 4?

Can you add "symfony/framework-bundle": "3.4.* || 4.1.*" as dependency or are there any problems with symfony 4?