Restore functionality for adding CSS/JavaScript using TypoScript. (#267)

This was removed when adding TYPO3 v14 compatibility:
#262

Now it works again, but the prefix has changed from `typo3_encore:` to `PKG:typo3_encore:`.

Example:

```
page.includeCSS {
    app = PKG:typo3_encore:app
}

page.includeJS {
    app = PKG:typo3_encore:app
}
```

Author: rvock

Classes/Asset/TagRenderer.php

@@ -168,6 +168,9 @@ public function renderWebpackLinkTags(LinkTag $linkTag): void
                 'excludeFromConcatenation' => true,
                 'splitChar' => '|',
                 'inline' => false,
+                'tagAttributes' => [],
+                'integrity' => '',
+                'crossorigin' => '',
             ], $parameters);
 
             $attributes = array_values($attributes);

Classes/Integration/PageRendererHooks.php

@@ -0,0 +1,114 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the "typo3_encore" Extension for TYPO3 CMS.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ */
+
+namespace Ssch\Typo3Encore\Integration;
+
+use Ssch\Typo3Encore\Asset\EntrypointLookupInterface;
+use Ssch\Typo3Encore\Asset\TagRendererInterface;
+use Ssch\Typo3Encore\ValueObject\LinkTag;
+use Ssch\Typo3Encore\ValueObject\ScriptTag;
+use TYPO3\CMS\Core\Page\PageRenderer;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+
+final class PageRendererHooks
+{
+    /**
+     * @var string
+     */
+    private const ENCORE_PREFIX = 'PKG:ssch/typo3-encore:';
+
+    /**
+     * @var int
+     */
+    private const PART_FOOTER = 2;
+
+    public function __construct(
+        private readonly TagRendererInterface $tagRenderer
+    ) {
+    }
+
+    public function renderPreProcess(array $params, PageRenderer $pageRenderer): void
+    {
+        // At this point, TYPO3 provides all javascript includes in only 'Files' or 'Libs'
+        foreach (TagRendererInterface::ALLOWED_JS_POSITIONS as $includeType) {
+            if (! isset($params[$includeType])) {
+                continue;
+            }
+
+            // Is the include type 'jsLibs' and should be treated as a library
+            $isLibrary = TagRendererInterface::POSITION_JS_LIBRARY === $includeType;
+
+            foreach ($params[$includeType] as $key => $jsFile) {
+                if (! $this->isEncoreEntryName($jsFile['file'])) {
+                    continue;
+                }
+
+                $buildAndEntryName = $this->createBuildAndEntryName($jsFile['file']);
+                $buildName = EntrypointLookupInterface::DEFAULT_BUILD;
+
+                if (2 === count($buildAndEntryName)) {
+                    [$buildName, $entryName] = $buildAndEntryName;
+                } else {
+                    $entryName = $buildAndEntryName[0];
+                }
+
+                $position = ($jsFile['section'] ?? '') === self::PART_FOOTER ? TagRendererInterface::POSITION_FOOTER : '';
+
+                unset($params[$includeType][$key], $jsFile['file'], $jsFile['section'], $jsFile['integrity']);
+
+                $scriptTag = new ScriptTag($entryName, $position, $buildName, $pageRenderer, $jsFile, true, $isLibrary);
+
+                $this->tagRenderer->renderWebpackScriptTags($scriptTag);
+            }
+        }
+
+        // Add CSS-Files by entryNames
+        foreach (TagRendererInterface::ALLOWED_CSS_POSITIONS as $includeType) {
+            if (! isset($params[$includeType])) {
+                continue;
+            }
+
+            foreach ($params[$includeType] as $key => $cssFile) {
+                if (! $this->isEncoreEntryName($cssFile['file'])) {
+                    continue;
+                }
+                $buildAndEntryName = $this->createBuildAndEntryName($cssFile['file']);
+                $buildName = EntrypointLookupInterface::DEFAULT_BUILD;
+
+                if (2 === count($buildAndEntryName)) {
+                    [$buildName, $entryName] = $buildAndEntryName;
+                } else {
+                    $entryName = $buildAndEntryName[0];
+                }
+
+                unset($params[$includeType][$key], $cssFile['file'], $cssFile['rel']);
+
+                $linkTag = new LinkTag($entryName, 'all', $buildName, $pageRenderer, $cssFile);
+                $this->tagRenderer->renderWebpackLinkTags($linkTag);
+            }
+        }
+    }
+
+    private function isEncoreEntryName(string $file): bool
+    {
+        return \str_starts_with($file, self::ENCORE_PREFIX);
+    }
+
+    private function removePrefix(string $file): string
+    {
+        return str_replace(self::ENCORE_PREFIX, '', $file);
+    }
+
+    private function createBuildAndEntryName(string $file): array
+    {
+        return GeneralUtility::trimExplode(':', $this->removePrefix($file), true, 2);
+    }
+}

README.md

@@ -61,7 +61,31 @@ If you have defined multiple entries you can define the desired entryName in the
 </html>
 ```
 
-Note the prefix typo3_encore: This is important in order to render the files correctly.
+
+Alternatively you can also include the files via TypoScript
+
+```php
+page.includeCSS {
+    # Pattern PKG:typo3_encore:entryName
+    app = PKG:typo3_encore:app
+    # If you want to ensure that this file is loaded first uncomment the next line
+    # app.forceOnTop = 1
+}
+
+page.includeJS {
+    # Pattern PKG:typo3_encore:entryName
+    app = PKG:typo3_encore:app
+    # If you want to ensure that this file is loaded first uncomment the next line
+    # app.forceOnTop = 1
+}
+
+page.includeJSFooter {
+    # Pattern PKG:typo3_encore:entryName
+    app = PKG:typo3_encore:app
+}
+```
+
+Note the prefix PKG:typo3_encore: This is important in order to render the files correctly.
 You can then use all other known settings to include your files.
 
 You don´t have to care about including it only once. This will not happen during one request cycle unless you want to.
@@ -143,6 +167,15 @@ This way of using the AssetViewHelper is similar to the `asset` function used in
     }
    ```
 
+   Finally, you can specify which build to use:
+
+   ```php
+    page.includeCSS {
+        # Pattern PKG:typo3_encore:buildName:entryName
+        app = PKG:typo3_encore:firstBuild:app
+    }
+   ```
+
    ```html
    <html
        xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"

Tests/Unit/Asset/TagRendererTest.php

@@ -151,7 +151,10 @@ public function testRenderWebpackLinkTagsWithDefaultBuild(): void
             '',
             true,
             '|',
-            false
+            false,
+            [],
+            '',
+            ''
         )->shouldBeCalledOnce();
 
         $this->assetRegistry->registerFile(Argument::any())->shouldBeCalledOnce();
@@ -180,7 +183,10 @@ public function testRenderWebpackLinkTagsWithDefaultBuildWithoutAssetRegistratio
             '',
             true,
             '|',
-            false
+            false,
+            [],
+            '',
+            ''
         )->shouldBeCalledOnce();
 
         $this->assetRegistry->registerFile(Argument::any())->shouldNotBeCalled();

ext_localconf.php

@@ -1,5 +1,8 @@
 <?php
 
+// Enable for Frontend and Backend at the same time
+$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_pagerenderer.php']['render-preProcess']['typo3_encore'] = \Ssch\Typo3Encore\Integration\PageRendererHooks::class . '->renderPreProcess';
+
 $GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['formDataGroup']['tcaDatabaseRecord'][\Ssch\Typo3Encore\Form\FormDataProvider\RichtextEncoreConfiguration::class] = [
     'depends' => [\TYPO3\CMS\Backend\Form\FormDataProvider\TcaText::class],
 ];