Feature #55264

requireJS for frontend in PageRenderer and TypoScript

Added by Jan Kiesewetter over 7 years ago. Updated over 3 years ago.

Status:
Rejected
Priority:
Should have
Assignee:
-
Category:
TypoScript
Target version:
-
Start date:
2014-01-23
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

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.


Related issues

Related to TYPO3 Core - Task #48383: RequireJS does not consider correct namespace prefixClosedBenni Mack2013-05-19

Actions
#1

Updated by Daniel Siepmann over 7 years ago

  • Parent task set to #55575
#2

Updated by Daniel Siepmann over 7 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).

#3

Updated by Daniel Siepmann over 7 years ago

  • Assignee set to Daniel Siepmann
#4

Updated by Daniel Siepmann over 7 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!

#5

Updated by Gerrit Code Review over 7 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

#6

Updated by Daniel Siepmann over 7 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.

#7

Updated by Gerrit Code Review over 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/28221

#8

Updated by Thomas Hucke about 7 years ago

I'd like to have this also backported to 6.1.

#9

Updated by Alexander Opitz about 6 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.

#10

Updated by Gabriel Kaufmann / Typoworx NewMedia almost 6 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)?

#11

Updated by Benni Mack almost 6 years ago

  • Target version deleted (7.5)
#12

Updated by Daniel Siepmann over 5 years ago

  • Assignee deleted (Daniel Siepmann)
#13

Updated by Daniel Siepmann over 5 years ago

  • Status changed from Under Review to Accepted
#14

Updated by Riccardo De Contardi over 4 years ago

  • Parent task changed from #55575 to #80535
#15

Updated by Frank Gerards almost 4 years ago

Any news on that feature? Does it work for FE rendering now?

#16

Updated by Frank Naegler over 3 years ago

  • Tracker changed from Bug to Feature
  • Status changed from Accepted to In Progress
  • Assignee set to Frank Naegler
  • Target version set to 9.0
#17

Updated by Gerrit Code Review over 3 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

#18

Updated by Frank Gerards over 3 years ago

hi,

any info if this can be backported to 7.x/8.x ?
thx
Frank

#19

Updated by Gerrit Code Review over 3 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

#20

Updated by Gerrit Code Review over 3 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

#21

Updated by Gerrit Code Review over 3 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

#22

Updated by Frank Naegler over 3 years ago

  • Parent task deleted (#80535)
#23

Updated by Frank Gerards over 3 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.

#24

Updated by Frank Gerards over 3 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.

#25

Updated by Frank Gerards over 3 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.

#26

Updated by Susanne Moog over 3 years ago

  • Target version changed from 9.0 to 9.2
#27

Updated by Gerrit Code Review over 3 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

#28

Updated by Gerrit Code Review over 3 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

#29

Updated by Gerrit Code Review over 3 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

#30

Updated by Frank Naegler over 3 years ago

  • Status changed from Under Review to Rejected
  • Assignee deleted (Frank Naegler)

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.

#31

Updated by Markus Klein over 3 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.

Also available in: Atom PDF