Benjamin Franzke authored Feb 10, 2022 and Georg Ringer committed Feb 16, 2022

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 <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>