Feature #55264
closedrequireJS for frontend in PageRenderer and TypoScript
Added by Jan Kiesewetter almost 11 years ago. Updated almost 7 years ago.
0%
Description
The class \TYPO3\CMS\Core\Page\PageRenderer, per definition "This class render the HTML of a webpage, usable for BE and FE" has two functions regarding requireJS.
loadRequireJs
loadRequireJsModule
Both are designed just for backend modules.
All paths are set relative from PATH_typo3.
Also it is not possible to include requireJS with TypoScript and add modules.
With distributions in mind, it should be possible to include requireJS with TypoScript, define main module/config and extend with packages(extensions) by PHP.
Updated by Daniel Siepmann almost 11 years ago
Should also be possible and used for sysext. One API for all.
Each extension should register her modules. (Already done in PageRenderer->loadRequireJs() for whole Resources/Public/JavaScript-Folder of each extension).
Updated by Daniel Siepmann over 10 years ago
We have to document that the official supported file structure for extensions is
'EXT:' . $packageName . '/Resources/Public/JavaScript/'
With upper J and S!
Updated by Gerrit Code Review over 10 years ago
- Status changed from New to Under Review
Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/28221
Updated by Daniel Siepmann over 10 years ago
As documented in http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html you can add requireJS the same way:
An example setup can be:
javascriptLibs { requireJs = 1 requireJs { paths { jquery = {$page.includePath.javascript}Libs/jquery-1.10.2.min theme = {$page.includePath.javascript}Libs/bootstrap.min } data-main = {$page.includePath.javascript}main shim { theme.deps { 0 = jquery } } } }
Define your own location for jquery, add twitter bootstrap and define the main js file as entry point.
Wrap the content of your main as documented on http://requirejs.org
require(['jquery', 'theme'], function($) { // youre code });
No more need to include all of your libs and js files. Just add a "bootstrap" js file that decides which files to load. Each file uses the requirements through requirejs.
It's possible to pass everything to requreJs just by adding it to TypoScript.
Just "paths" and "data-main" will be parsed.
Updated by Gerrit Code Review over 10 years ago
Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/28221
Updated by Thomas Hucke over 10 years ago
I'd like to have this also backported to 6.1.
Updated by Alexander Opitz over 9 years ago
- Category set to TypoScript
- Target version set to 7.5
Set target version to 7.5 as it was mentioned in the review.
There is also http://review.typo3.org/36857 on the same aspect.
Updated by Gabriel Kaufmann / Typoworx NewMedia over 9 years ago
page.javascriptLibs { requireJs = 1 requireJs { paths { jquery = {$page.includePath.javascript}Libs/jquery-1.10.2.min theme = {$page.includePath.javascript}Libs/bootstrap.min } data-main = {$page.includePath.javascript}main shim { theme.deps { 0 = jquery } } } }
The example given does not work. I tested with prototype = 1
which works. requireJS does not include anything... neither requireJS nor anything else.
Does anyone have a working example or hint to get it working (in frontend)?
Updated by Daniel Siepmann about 9 years ago
- Assignee deleted (
Daniel Siepmann)
Updated by Daniel Siepmann about 9 years ago
- Status changed from Under Review to Accepted
Updated by Riccardo De Contardi over 7 years ago
- Parent task changed from #55575 to #80535
Updated by Frank Gerards over 7 years ago
Any news on that feature? Does it work for FE rendering now?
Updated by Frank Nägler almost 7 years ago
- Tracker changed from Bug to Feature
- Status changed from Accepted to In Progress
- Assignee set to Frank Nägler
- Target version set to 9.0
Updated by Gerrit Code Review almost 7 years ago
- Status changed from In Progress to Under Review
Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Frank Gerards almost 7 years ago
hi,
any info if this can be backported to 7.x/8.x ?
thx
Frank
Updated by Gerrit Code Review almost 7 years ago
Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Gerrit Code Review almost 7 years ago
Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Gerrit Code Review almost 7 years ago
Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Frank Gerards almost 7 years ago
Hi,
with latest Patch the requireJS config plus library is rendered into the head-section,
there should also be a switch to move that to the footer section before closing body-tag.
Updated by Frank Gerards almost 7 years ago
and there seem to be quite some misconceptions here, how the "paths" section of requireJS works:
the value of a key inside "paths" array can contain a concrete file-path (= scriptname without .js) OR (!) a directory name.
In the latter case, EVERY script inside that folder will be included. Afais, this is NOT taken into account and only direct script-paths are processed correctly,
so u cut out 80+% of the config power of requireJS.
Updated by Frank Gerards almost 7 years ago
for the "shim" - Part:
the Key of a shim is NOT just a string, but can be a full fledged path to a dir/file, too containing slashes,
so it has to be possible to set shims like:
"bootstrap/tabs".deps {
0 = jquery
}
otherwise the config will be bloated as you would have to register dozens of bootstrap script-files in the paths section and repeat their shims in the shim section.
this is not effective.
Updated by Susanne Moog almost 7 years ago
- Target version changed from 9.0 to 9.2
Updated by Gerrit Code Review almost 7 years ago
Patch set 5 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Gerrit Code Review almost 7 years ago
Patch set 6 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Gerrit Code Review almost 7 years ago
Patch set 7 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54763
Updated by Frank Nägler almost 7 years ago
- Status changed from Under Review to Rejected
- Assignee deleted (
Frank Nägler)
we did not find a general consent for this patch, so we close this issue.
requireJS can be added and used in frontend with a lot of other TypoScript settings. no need for an own implementation.
Updated by Markus Klein almost 7 years ago
- Target version deleted (
9.2)
Some more notes on the current situation on the Frontend "market" and why we reject this:
- requireJS is just one of many solutions to have JS modules
- currently there's a lot of bundler solutions (e.g. webpack) which allow packing the right JS into one file
- IF the Core provided a solution to have requreJS config being generated automatically, with the possibility for extensions to hook in, all extensions providing JS would have to support this first, otherwise you have to deal with non-modularized code all the time.
Dynamic loading of JS files makes sense for larger applications, where shipping the whole stuff as a whole seems overkill. (Albeit, thinking of the masses of JS delivered by JS frameworks nowadays makes this argument questionable)
So for a normal website (or most web apps) you most likely will take care of bundling your JS (from your ES2015 modules) with an asset pipeline and you deliver one single cachable JS file.