Skip to content
GitLab
  1. 03 Jun, 2022 2 commits
  3. 28 Mar, 2022 1 commit
  5. 16 Feb, 2022 1 commit
    • Benjamin Franzke's avatar
      [TASK] Use @typo3/ as ES6 module namespace · 7a41f905
      Benjamin Franzke authored and Georg Ringer's avatar Georg Ringer committed 
      Switch from TYPO3/CMS/ExtName/ to @typo3/ext-name/ module
namespace in all TypoScript modules in order to
use the common "scoped package" syntax as known from npmjs.

This will allow TYPO3 TypeScript declarations to be
published to @typo3/* packages on npmjs.com at some point,
allowing extension authors to require these as npm/yarn
dependencies to be able to use TypeScript type declarations
when developing against the TYPO3 JavaScript API.

While at it, the naming convention of JavaScript modules is
also switched to use lowercase-dashed form. This is to adhere
to the common used naming convention in the npm-world.
Also @typo3/core/ajax/ajax-request.js simply looks better than
a mixed form @typo3/core/Ajax/AjaxRequest.js would be.

All existing RequireJS module identifiers are mapped
to the new naming syntax in the requirejs-to-es6 bridge:
For example a requirejs call to
  TYPO3/CMS/T3editor/Element/CodeMirrorElement
will transparently be transformed to the new scheme:
  @typo3/t3editor/element/code-mirror-element.js

Manual modifications in:

  Build/Gruntfile.js
  Build/util/map-import.js
  Build/JSUnit/karma.conf.js
  Build/Sources/TypeScript/backend/Resources/Public/TypeScript/viewport/navigation-container.ts
  typo3/sysext/core/Resources/Public/JavaScript/requirejs-loader.js
  typo3/sysext/core/Tests/Functional/Page/PageRendererTest.php
  typo3/sysext/core/Tests/Unit/Page/Fixtures/ImportMap/package2/Configuration/JavaScriptModules.php
  typo3/sysext/core/Tests/Unit/Page/Fixtures/ImportMap/package3/Configuration/JavaScriptModules.php
  typo3/sysext/core/Tests/Unit/Page/ImportMapTest.php
  typo3/sysext/t3editor/Configuration/JavaScriptModules.php

All other changes have been automated with:

find Build/Sources/TypeScript/ -type f | \
    grep -v index.d.ts | \
    sed \
        -e 's:Build/Sources/TypeScript/:typo3/sysext/:' \
        -e 's:/Tests/:/Tests/JavaScript/:' \
        -e 's:/TypeScript/:/JavaScript/:' \
        -e 's:\.ts$:.js:' | \
    xargs git rm

find Build/Sources/TypeScript/ -type f | while read file
do
    newFilename=$(echo $file | sed \
        -e :loop1 -e 's:\(/Public/TypeScript\|/Tests\)\([0-9a-zA-Z/.]*\)/\([A-Z][A-Z]*\)\([0-9a-zA-Z/-]*\)\.ts:\1\2/\L\3\E\4.ts:' -e 't loop1' \
        -e :loop2 -e 's:\(/Public/TypeScript\|/Tests\)\([0-9a-zA-Z/.]*[a-z]\)\([A-Z][A-Z]*\)\([0-9a-zA-Z/-]*\)\.ts:\1\2-\L\3\E\4.ts:' -e 't loop2' \
        -e s:/Resources/Public/TypeScript/:/: \
        -e s:/Tests/:/tests/:
    )

    mkdir -p $(dirname "${newFilename}")
    [[ "$file" != "$newFilename" ]] && git mv "${file}" "${newFilename}"
done

cat << EOF > convert_uppercase_to_lowercase.sed
:loop1
s:\(TYPO3/CMS[0-9a-zA-Z/]*\)/\([A-Z]\)\([0-9a-zA-Z/-]*\.js\):\1/\l\2\3:
t loop1

:loop2
s:\(TYPO3/CMS[0-9a-zA-Z/]*[a-z]\)\([A-Z]\)\([0-9a-z/-]*\.js\):\1-\l\2\3:
t loop2

s:TYPO3/CMS/\([0-9a-z/-]*\.js\):@typo3/\1:g

:loop3
s:\(^import \|^import .* from \|import(\|declare module \)'\([0-9a-zA-Z/.]*\)/\([A-Z][A-Z]*\)\([0-9a-zA-Z/.-]*\)':\1'\2/\L\3\E\4':
t loop3

:loop4
s:\(^import \|^import .* from \|import(\|declare module \)'\([0-9a-zA-Z/.]*[a-z]\)\([A-Z][A-Z]*\)\([0-9a-z/.-]*\)':\1'\2-\L\3\E\4':
t loop4

:loop5
s:\(\* Module\:\{0,1\} \|\* @exports \|\* @module \)\([0-9a-zA-Z/.]*\)/\([A-Z][A-Z]*\)\([0-9a-zA-Z/.-]*\)$:\1\2/\L\3\E\4:
t loop5

:loop6
s:\(\* Module\:\{0,1\} \|\* @exports \|\* @module \)\([0-9a-zA-Z/.]*[a-z]\)\([A-Z][A-Z]*\)\([0-9a-z/.-]*\)$:\1\2-\L\3\E\4:
t loop6

s:\(^import '\|^import .* from '\|import('\|declare module '\|\* Module\:\{0,1\} \|\* @exports \|\* @module \)TYPO3/cms/\([0-9a-z/.-]*\):\1@typo3/\2:g

s:@typo3/rte_ckeditor:@typo3/rte-ckeditor:

s:TYPO3/CMS/Backend/Module/Iframe:@typo3/backend/module/iframe:
s:TYPO3/CMS/Backend/PageTree/PageTreeElement:@typo3/backend/page-tree/page-tree-element:
s:TYPO3/CMS/Backend/Tree/FileStorageTreeContainer:@typo3/backend/tree/file-storage-tree-container:
s:TYPO3/CMS/Impexp/ContextMenuActions:@typo3/impexp/context-menu-actions:
s:TYPO3/CMS/Install/chosen.jquery.min.js:@typo3/install/chosen.jquery.min.js:

s:Public/JavaScript/JavaScriptItemHandler.js:Public/JavaScript/java-script-item-handler.js:
s:Public/JavaScript/RequireJSConfigHandler.js:Public/JavaScript/require-jsconfig-handler.js:
s:Public/JavaScript/AdminPanel.js:Public/JavaScript/admin-panel.js:
EOF

git ls-tree --name-only -r HEAD | \
    grep -v dashboard/Documentation/ | \
    grep -v Documentation/Changelog/ | \
    grep -v Build/JSUnit/ | \
    xargs sed -i -f convert_uppercase_to_lowercase.sed

rm convert_uppercase_to_lowercase.sed

sed -i \
    -e 's:TYPO3/CMS/\([A-Z]\):@typo3/\l\1:' \
    -e 's:@typo3/rteCkeditor:@typo3/rte-ckeditor:' \
    typo3/sysext/*/Configuration/JavaScriptModules.php \
    typo3/sysext/core/Tests/Unit/Page/Fixtures/ImportMap/*/Configuration/JavaScriptModules.php

sed -i \
    -e "s/: \\(@typo3\\/.*\\)/: '\1\'/" \
    typo3/sysext/form/Configuration/Yaml/FormSetup.yaml

(cd Build; grunt build)

git add typo3/sysext/

Resolves: #96906
Related: #96323
Releases: main
Change-Id: Ifed6ac373aa2bc0c36fe157fb3e9c220f520a9c4
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/73522


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
      7a41f905
  7. 21 Jan, 2022 1 commit
    • Benjamin Franzke's avatar
      [TASK] Migrate backend TypeScript to ECMAScript modules (ESM) · 47481cbd
      Benjamin Franzke authored 
      Use the JavaScript module and importmap Feature introduced
in #96510 to import JavaScript as native browser modules
(commonly referred to as ES6 modules, or short ESM).
To be specific: we actually use ES2020 (ES11) modules,
as we import modules dynamically via import() in
combination with an importmap (#96510).

Backwards compatibility for existing RequireJS imports
is provided by a shim as introduced in #96510.

How to (re)view this change
---------------------------

Exclude all automatic TypeScript/JavaScript/lockfile changes with:

git show --oneline -- . \
    ':(exclude)typo3/sysext/*.js' \
    ':(exclude)Build/Sources/TypeScript/*.ts' \
    ':(exclude)Build/yarn.lock'

git show --oneline -- $(find Build/ \
    -name DragUploader.ts -o \
    -name FormEngine.ts -o \
    -name Helper.ts -o \
    -name CKEditorLoader.ts -o \
    -name CodeMirrorElement.ts)

Gruntfile & tsconfig.json
-------------------------

Gruntfile is adapted to transform all our dependencies into ES6
modules.

Also tsconfig is adapted to emit es2020 modules (es2020 is required
for dynamic module imports with import()).
Also allowSyntheticDefaultImports is enabled while esModuleInterop
is now longer needed as we target ES modules and therefore removed.
allowSyntheticDefaultImports had been enabled implicitly by
esModuleInterop, we still need this enabled as the type declarations
of our dependencies still imply AMD/CJS exports
(which we fix in our build steps).

JSUnit
------

JSUnit configuration is moved from testing-framework into core for more
flexibility when adaptions are required. The testing is revamped
to use karma-rollup-preprocessor instead of karma-requirejs in
order to support the newly compiled ES6 modules.

TypeScript Exports and Imports
------------------------------

All export and import definitions have been auto-converted
from AMD pseudo import/exports to native ES6 import/exports.

Executed commands:

  find Build/Sources/TypeScript/ -name '*.ts' -exec sed -i \
    -e 's/export =/export default/' \
    -e 's/ = require(\(.*\))/ from \1/g' \
    -e "s/^import 'tablesort';/import Tablesort from 'tablesort';/" \
    '{}' +

Note that the switch from `export =` to `export default` is
not considered breaking because the require-adapter in
requirejs-loader wil transparently resolve the .default in moduls.
This is possible because AMD modules could not use `export =`
and `export {}` (for named exports) at the same time.

Explicitly use RequireJS for CodeMirror and ext:form for now
------------------------------------------------------------

CodeMirror can't be easily transformed to ES6 right now,
therefore this patch explicitly configures to use the
global RequireJS instance.

The ext:form JavaScript is currently not written in TypeScript
and will therefore not be automatically transformed from AND
to ES6 when updating tsconfig.json to emit ES6 modules.
Therefore requirejs is uses.

This partially reverts #96326 which changed some require()
calls to import() syntax too early.

New npm dependencies:
---------------------

 # For module-postprocessing in Gruntfile
 # This is the same parser as used for the
 # frontend polyfill es-module-shims
yarn add --dev es-module-lexer

 # A rollup bundle for unit testing in karma is created
 # usin a karma preprocessor
yarn remove karma-requirejs
yarn add --dev karma-rollup-preprocessor rollup-plugin-glob-import

 # Update grunt-terser to support es2020 syntax
 # (uses terser v5 which we already depended on, but grunt v1
 # used the older v4 version)
yarn add --dev grunt-terser@^2.0.0

Releases: main
Resolves: #96511
Related: #96510
Related: #96323
Change-Id: Id1a6d414c1e9b2e39227d0b6ce9e79333a372349
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72637


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      47481cbd
  9. 13 Dec, 2021 1 commit
  11. 01 Oct, 2021 1 commit
    • Oliver Bartsch's avatar
      [BUGFIX] Fix issues with drag uploader and empty file lists · b67087c0
      Oliver Bartsch authored and Benjamin Franzke's avatar Benjamin Franzke committed 
      Previously, when a folder was empty or no files
were found for a search term, the filelist still
displayed the table header. This was related to
the Drag&Drop functionality, which internally
reads data from the table header.

However it's also sufficient to just hide the
table header and to show proper messages, including
direct actions, e.g. "reset search" or "upload files".

Therefore, also the Drag&Drop functionality is
improved. The draggable area now covers the whole
module, so the user does no longer have to strike
a 70 pixels box.

Besides, a couple of bugs in the Drag&Drop
implementation are fixed:

- When uploading files in "active search" mode, the
  file path is now properly added to the row
- After all files were uploaded, the user is now
  able to reload the module via a notification action
- Drag&Drop in FormEngine does no longer add the
  selector / checkbox field to the row
- When dragging files in and out of the dropzone,
  the dropzone is now hidden again after "dragleave"
  (only for filelist)
- The dropzone is now also hidden on "drop" (uploading
  the dragged files)
- The dropzone is not "activated" when not in the
  current visible scope (e.g. in another FormEngine tab)
- The checkbox is now also activated for uploaded
  files (without module reload)
- The full sized drozone can be closed with the ESC key
- JavaScript SyntaxError, triggered by a server error,
  such as "POST Content-Length" exceeds limit, is
  now properly handled

Resolves: #95403
Resolves: #95421
Releases: master
Change-Id: Id9de5065544aa57deaa11b8b4f9158b869a72427
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/71375


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      b67087c0
  13. 22 Sep, 2021 1 commit
  15. 02 Aug, 2021 1 commit
  17. 04 Jan, 2021 1 commit
  19. 05 Nov, 2020 1 commit
  21. 22 Aug, 2020 1 commit
  23. 09 Aug, 2020 1 commit
  25. 08 Aug, 2020 1 commit
  27. 18 Apr, 2020 1 commit
  29. 23 Mar, 2020 1 commit
  31. 20 Mar, 2020 1 commit
  33. 29 Feb, 2020 1 commit
  35. 26 Feb, 2020 1 commit
  37. 25 Sep, 2019 1 commit
  39. 07 Sep, 2019 1 commit
  41. 23 Aug, 2019 1 commit
  43. 24 May, 2019 1 commit
    • Andreas Fernandez's avatar
      [!!!][TASK] Refactor client-side IRRE · 0842cea9
      Andreas Fernandez authored and Frank Nägler's avatar Frank Nägler committed 
      This patch refactors the IRRE handling on client side, the JavaScript
land has been rewritten to have a better structure and do less repeating
on-the-fly calculations. Each IRRE container is represented by a
independent instance of InlineControlContainer.

Most of the internally used `scriptCall` directives have been removed.
Currently, `scriptCall` can't get removed completely, as further
refactorings in different areas are required.

All of the "external" communication via `inline.foobar()` has been
replaced by a event-driven approach. This also affects ElementBrowser
windows, those use a minimalistic API based on postMessage.

Some code that was never evaluated in ElementBrowser is considered dead
and has been removed regarding inserting multiple items.

A new sorting library has been added in order to replace jqueryui piece
by piece.

Executed command:

    yarn add --dev sortablejs

On PHP side, some code has been removed as well since the rewritten client
code is event-based and doesn't depend on external calls anymore.

Resolves: #88182
Releases: master
Change-Id: I4176483d2882cef49fbaddb5e2e1914c1f76c908
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/59324


Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Tested-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
      0842cea9
  45. 05 Apr, 2019 2 commits
  47. 18 Feb, 2019 1 commit
  49. 27 Sep, 2018 1 commit
  51. 12 May, 2018 1 commit
  53. 11 May, 2018 1 commit
  55. 26 Feb, 2018 1 commit
  57. 21 Feb, 2018 1 commit
  59. 18 Feb, 2018 1 commit
  61. 17 Feb, 2018 1 commit