Commit 7a41f905 authored by Benjamin Franzke's avatar Benjamin Franzke Committed by Georg Ringer
Browse files

[TASK] Use @typo3/ as ES6 module namespace

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>
parent 20fc4bde
......@@ -242,11 +242,9 @@ module.exports = function (grunt) {
cwd: '<%= paths.root %>Build/JavaScript/',
src: ['**/*.js', '**/*.js.map'],
dest: '<%= paths.sysext %>',
rename: function (dest, src) {
var srccleaned = src.replace('Resources/Public/TypeScript', 'Resources/Public/JavaScript');
srccleaned = srccleaned.replace('Tests/', 'Tests/JavaScript/');
return dest + srccleaned;
}
rename: (dest, src) => dest + src
.replace('/', '/Resources/Public/JavaScript/')
.replace('/Resources/Public/JavaScript/tests/', '/Tests/JavaScript/')
}]
},
core_icons: {
......@@ -887,9 +885,9 @@ module.exports = function (grunt) {
const config = grunt.file.readJSON("tsconfig.json");
const typescriptPath = grunt.config.get('paths.typescript');
config.compilerOptions.paths = {};
grunt.file.expand(typescriptPath + '*/Resources/Public/TypeScript').map(dir => dir.replace(typescriptPath, '')).forEach((path) => {
const extname = ('_' + path.match(/^([^\/]+?)\//)[1]).replace(/_./g, (match) => match.charAt(1).toUpperCase());
config.compilerOptions.paths['TYPO3/CMS/' + extname + '/*'] = [path + '/*'];
grunt.file.expand(typescriptPath + '*/').map(dir => dir.replace(typescriptPath, '')).forEach((path) => {
const extname = path.match(/^([^\/]+?)\//)[1].replace(/_/g, '-')
config.compilerOptions.paths['@typo3/' + extname + '/*'] = [path + '*'];
});
grunt.file.write('tsconfig.json', JSON.stringify(config, null, 4) + '\n');
......
......@@ -67,9 +67,9 @@ module.exports = function(config) {
}
}
if (source.startsWith('TYPO3/CMS')) {
const parts = source.substr(10).split('/');
const extension = parts.shift().split(/(?=[A-Z])/).join('_').toLowerCase();
if (source.startsWith('@typo3')) {
const parts = source.substr(7).split('/');
const extension = parts.shift().replace(/-/g, '_');
const path = parts.join('/');
const fullPath = `typo3/sysext/${extension}/Resources/Public/JavaScript/${path}`;
......
......@@ -11,8 +11,8 @@
* The TYPO3 project - inspiring people to share!
*/
import {AbstractAction} from './AbstractAction';
import Icons from '../Icons';
import {AbstractAction} from './abstract-action';
import Icons from '../icons';
/**
* Action used when an operation execution time is unknown.
......
......@@ -11,7 +11,7 @@
* The TYPO3 project - inspiring people to share!
*/
import {AbstractAction} from './AbstractAction';
import {AbstractAction} from './abstract-action';
/**
* Action used when an operation is executed immediately.
......
......@@ -11,18 +11,18 @@
* The TYPO3 project - inspiring people to share!
*/
import InfoWindow from 'TYPO3/CMS/Backend/InfoWindow';
import RegularEvent from 'TYPO3/CMS/Core/Event/RegularEvent';
import shortcutMenu from 'TYPO3/CMS/Backend/Toolbar/ShortcutMenu';
import windowManager from 'TYPO3/CMS/Backend/WindowManager';
import moduleMenuApp from 'TYPO3/CMS/Backend/ModuleMenu';
import documentService from 'TYPO3/CMS/Core/DocumentService';
import Utility from 'TYPO3/CMS/Backend/Utility';
import InfoWindow from '@typo3/backend/info-window';
import RegularEvent from '@typo3/core/event/regular-event';
import shortcutMenu from '@typo3/backend/toolbar/shortcut-menu';
import windowManager from '@typo3/backend/window-manager';
import moduleMenuApp from '@typo3/backend/module-menu';
import documentService from '@typo3/core/document-service';
import Utility from '@typo3/backend/utility';
declare type ActionDispatchArgument = string | HTMLElement | Event;
/**
* Module: TYPO3/CMS/Backend/ActionDispatcher
* Module: @typo3/backend/action-dispatcher
*
* @example
* <a class="btn btn-default" href="#"
......
......@@ -11,18 +11,18 @@
* The TYPO3 project - inspiring people to share!
*/
import {BroadcastMessage} from 'TYPO3/CMS/Backend/BroadcastMessage';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {SeverityEnum} from './Enum/Severity';
import MessageInterface from './AjaxDataHandler/MessageInterface';
import ResponseInterface from './AjaxDataHandler/ResponseInterface';
import {BroadcastMessage} from '@typo3/backend/broadcast-message';
import {AjaxResponse} from '@typo3/core/ajax/ajax-response';
import AjaxRequest from '@typo3/core/ajax/ajax-request';
import {SeverityEnum} from './enum/severity';
import MessageInterface from './ajax-data-handler/message-interface';
import ResponseInterface from './ajax-data-handler/response-interface';
import $ from 'jquery';
import BroadcastService from 'TYPO3/CMS/Backend/BroadcastService';
import Icons from './Icons';
import Modal from './Modal';
import Notification from './Notification';
import Viewport from './Viewport';
import BroadcastService from '@typo3/backend/broadcast-service';
import Icons from './icons';
import Modal from './modal';
import Notification from './notification';
import Viewport from './viewport';
enum Identifiers {
hide = '.t3js-record-hide',
......@@ -38,7 +38,7 @@ interface AfterProcessEventDict {
}
/**
* Module: TYPO3/CMS/Backend/AjaxDataHandler
* Module: @typo3/backend/ajax-data-handler
* Javascript functions to work with AJAX and interacting with Datahandler
* through \TYPO3\CMS\Backend\Controller\SimpleDataHandlerController->processAjaxRequest (record_process route)
*/
......
......@@ -11,7 +11,7 @@
* The TYPO3 project - inspiring people to share!
*/
import MessageInterface from './MessageInterface';
import MessageInterface from './message-interface';
export default interface ResponseInterface {
redirect: string;
......
......@@ -12,7 +12,7 @@
*/
/**
* @module TYPO3/CMS/Backend/BroadcastMessage
* @module @typo3/backend/broadcast-message
*/
export class BroadcastMessage {
readonly componentName: string;
......
......@@ -12,11 +12,11 @@
*/
import 'broadcastchannel';
import {BroadcastMessage} from 'TYPO3/CMS/Backend/BroadcastMessage';
import {MessageUtility} from 'TYPO3/CMS/Backend/Utility/MessageUtility';
import {BroadcastMessage} from '@typo3/backend/broadcast-message';
import {MessageUtility} from '@typo3/backend/utility/message-utility';
/**
* @module TYPO3/CMS/Backend/BroadcastService
* @module @typo3/backend/broadcast-service
*/
class BroadcastService {
private readonly channel: BroadcastChannel;
......
......@@ -16,11 +16,11 @@ import {customElement, property} from 'lit/decorators';
import {until} from 'lit/directives/until';
import {unsafeHTML} from 'lit/directives/unsafe-html';
import {classMap} from 'lit/directives/class-map';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import Notification from 'TYPO3/CMS/Backend/Notification';
import 'TYPO3/CMS/Backend/Element/SpinnerElement';
import 'TYPO3/CMS/Backend/Element/IconElement';
import AjaxRequest from '@typo3/core/ajax/ajax-request';
import {AjaxResponse} from '@typo3/core/ajax/ajax-response';
import Notification from '@typo3/backend/notification';
import '@typo3/backend/element/spinner-element';
import '@typo3/backend/element/icon-element';
enum CopyMode {
cut = 'cut',
......@@ -57,7 +57,7 @@ interface DispatchArgs {
}
/**
* Module: TYPO3/CMS/Backend/ClipboardPanel
* Module: @typo3/backend/clipboard-panel
*
* @example
* <typo3-backend-clipboard-panel return-url="/typo3/module" table="_FILE"></typo3-backend-clipboard-panel>
......
......@@ -15,9 +15,9 @@ import $ from 'jquery';
import 'jquery/minicolors';
/**
* Module: TYPO3/CMS/Backend/ColorPicker
* Module: @typo3/backend/color-picker
* contains all logic for the color picker used in FormEngine
* @exports TYPO3/CMS/Backend/ColorPicker
* @exports @typo3/backend/color-picker
*/
class ColorPicker {
/**
......
......@@ -13,13 +13,13 @@
import {html, TemplateResult, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators';
import {SeverityEnum} from 'TYPO3/CMS/Backend/Enum/Severity';
import Severity from 'TYPO3/CMS/Backend/Severity';
import Modal from 'TYPO3/CMS/Backend/Modal';
import {lll} from 'TYPO3/CMS/Core/lit-helper';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import Notification from 'TYPO3/CMS/Backend/Notification';
import {SeverityEnum} from '@typo3/backend/enum/severity';
import Severity from '@typo3/backend/severity';
import Modal from '@typo3/backend/modal';
import {lll} from '@typo3/core/lit-helper';
import AjaxRequest from '@typo3/core/ajax/ajax-request';
import {AjaxResponse} from '@typo3/core/ajax/ajax-response';
import Notification from '@typo3/backend/notification';
enum Selectors {
columnsSelector = '.t3js-column-selector',
......@@ -35,7 +35,7 @@ enum SelectorActions {
}
/**
* Module: TYPO3/CMS/Backend/ColumnSelectorButton
* Module: @typo3/backend/column-selector-button
*
* @example
* <typo3-backend-column-selector-button
......
......@@ -13,10 +13,10 @@
import 'bootstrap';
import $ from 'jquery';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {AjaxResponse} from '@typo3/core/ajax/ajax-response';
import AjaxRequest from '@typo3/core/ajax/ajax-request';
import {Popover as BootstrapPopover} from 'bootstrap';
import Popover from './Popover';
import Popover from './popover';
interface HelpData {
title: string;
......@@ -24,9 +24,9 @@ interface HelpData {
}
/**
* Module: TYPO3/CMS/Backend/ContextHelp
* Module: @typo3/backend/context-help
* API for context help.
* @exports TYPO3/CMS/Backend/ContextHelp
* @exports @typo3/backend/context-help
*/
class ContextHelp {
private ajaxUrl: string = TYPO3.settings.ajaxUrls.context_help;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment