[TASK] Map relative lit-imports to bare module specifiers

Imports via bare module specifiers (such that do not start with / or .)
are cache busted by their URL mapping in importmap — relative imports
(inside lit) are not by default. This is why we used version-suffixed
lit package folders in #96511 (pretty much like unpkg.com does).

This got removed with #100245, as required updates for configuration
files have not been applied automatically and the reason for the
version suffix was undocumented and thus unclear.
While we could fix those issues and add autoupdate support for
configuration files, it is now decided to remap all relative imports,
as this logic is present in our build setup anyway and eases future
updates by creating smaller diffsets (not every file has to be
renamed, only changed ones are updated).

Note that technically a new helper grunt task es-module-lexer-init
is added, which is required to await the asynchronous es-module-lexer
parser initialization (written in web assembly, and therefore
not synchronously available). This has worked "by luck" for the
copy:ts_files task (because there we earlier tasks that implicitly
awaited the initialization), copy:lit is forked off via the concurrent
plugin, we need to ensure es-module-lexer is actually ready to be used.

Resolves: #101504
Related: #101495
Related: #100245
Releases: main, 12.4
Change-Id: I7c714530d1a645da2d89179282f80bd730d12474
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80268
Tested-by: core-ci <[email protected]>
Reviewed-by: Benjamin Franzke <[email protected]>
Tested-by: Benjamin Franzke <[email protected]>
Reviewed-by: Benni Mack <[email protected]>
Tested-by: Andreas Fernandez <[email protected]>
Tested-by: Benni Mack <[email protected]>
Reviewed-by: Andreas Fernandez <[email protected]>

Build/Gruntfile.js

@@ -305,6 +305,7 @@ module.exports = function (grunt) {
       ts_files: {
         options: {
           process: (source, srcpath) => {
+            /* note: This requires grunt-task 'es-module-lexer-init' to be executed prior to this task */
             const [imports] = esModuleLexer.parse(source, srcpath);
 
             source = require('./util/map-import.js').mapImports(source, srcpath, imports);
@@ -405,7 +406,13 @@ module.exports = function (grunt) {
       },
       lit: {
         options: {
-          process: (content) => content.replace(/\/\/# sourceMappingURL=[^ ]+/, '')
+          process: (source, srcpath) => {
+            /* note: This requires grunt-task 'es-module-lexer-init' to be executed prior to this task */
+            const [imports] = esModuleLexer.parse(source, srcpath);
+            source = require('./util/map-import.js').mapImports(source, srcpath, imports);
+
+            return source.replace(/\/\/# sourceMappingURL=[^ ]+/, '');
+          }
         },
         files: [{
           expand: true,
@@ -778,7 +785,7 @@ module.exports = function (grunt) {
       compile_assets: ['scripts', 'css'],
       compile_flags: ['flags-build'],
       minify_assets: ['terser:thirdparty', 'terser:t3editor'],
-      copy_static: ['copy:core_icons', 'copy:install_icons', 'copy:module_icons', 'copy:extension_icons', 'copy:fonts', 'copy:lit', 'copy:t3editor'],
+      copy_static: ['copy:core_icons', 'copy:install_icons', 'copy:module_icons', 'copy:extension_icons', 'copy:fonts', 'copy-lit', 'copy:t3editor'],
       build: ['copy:core_icons', 'copy:install_icons', 'copy:module_icons', 'copy:extension_icons', 'copy:fonts', 'copy:t3editor'],
     },
   });
@@ -843,6 +850,8 @@ module.exports = function (grunt) {
    */
   grunt.registerTask('compile-typescript', ['tsconfig', 'eslint', 'exec:ts']);
 
+  grunt.registerTask('copy-lit', ['es-module-lexer-init', 'copy:lit']);
+
   /**
    * grunt scripts task
    *
@@ -853,7 +862,7 @@ module.exports = function (grunt) {
    * - 2) Copy all generated JavaScript files to public folders
    * - 3) Minify build
    */
-  grunt.registerTask('scripts', ['compile-typescript', 'newer:terser:typescript', 'newer:copy:ts_files']);
+  grunt.registerTask('scripts', ['compile-typescript', 'newer:terser:typescript', 'es-module-lexer-init', 'newer:copy:ts_files']);
 
   /**
    * grunt clear-build task
@@ -887,6 +896,22 @@ module.exports = function (grunt) {
     grunt.file.write('tsconfig.json', JSON.stringify(config, null, 4) + '\n');
   });
 
+  /**
+   * @internal
+   */
+  grunt.task.registerTask('es-module-lexer-init', function() {
+    const done = this.async();
+
+    esModuleLexer.init
+      .then(() => done(true))
+      .catch((e) => done(e));
+  });
+
+  /**
+   * @internal
+   */
+  grunt.registerTask('copy-lit', ['es-module-lexer-init', 'copy:lit']);
+
   /**
    * Outputs a "bell" character. When output, modern terminals flash shortly or produce a notification (usually configurable).
    * This Grunt config uses it after the "watch" task finished compiling, signaling to the developer that her/his changes

Build/util/map-import.js

@@ -12,6 +12,15 @@ const isContrib = (importValue) => {
 
 const mapImport = (targetModule, context) => {
 
+  if (
+    targetModule.charAt(0) === '.' &&
+    (context.indexOf('node_modules/lit') !== -1 || context.indexOf('node_modules/@lit/') !== -1)
+  ) {
+    return path
+      .resolve(path.dirname(context), targetModule)
+      .replace(/^.*\/node_modules\//g, '');
+  }
+
   if (isContrib(targetModule)) {
     return targetModule;
   }

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/event-options.js

@@ -1,4 +1,4 @@
-import{decorateProperty as r}from"./base.js";
+import{decorateProperty as r}from"@lit/reactive-element/decorators/base.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/query-all.js

@@ -1,4 +1,4 @@
-import{decorateProperty as r}from"./base.js";
+import{decorateProperty as r}from"@lit/reactive-element/decorators/base.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/query-assigned-elements.js

@@ -1,4 +1,4 @@
-import{decorateProperty as o}from"./base.js";
+import{decorateProperty as o}from"@lit/reactive-element/decorators/base.js";
 /**
  * @license
  * Copyright 2021 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/query-assigned-nodes.js

@@ -1,4 +1,4 @@
-import{decorateProperty as e}from"./base.js";import{queryAssignedElements as t}from"./query-assigned-elements.js";
+import{decorateProperty as e}from"@lit/reactive-element/decorators/base.js";import{queryAssignedElements as t}from"@lit/reactive-element/decorators/query-assigned-elements.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/query-async.js

@@ -1,4 +1,4 @@
-import{decorateProperty as r}from"./base.js";
+import{decorateProperty as r}from"@lit/reactive-element/decorators/base.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/query.js

@@ -1,4 +1,4 @@
-import{decorateProperty as o}from"./base.js";
+import{decorateProperty as o}from"@lit/reactive-element/decorators/base.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/decorators/state.js

@@ -1,4 +1,4 @@
-import{property as r}from"./property.js";
+import{property as r}from"@lit/reactive-element/decorators/property.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/private-ssr-support.js

@@ -1,4 +1,4 @@
-import{_$LE as t}from"./lit-element.js";
+import{_$LE as t}from"lit-element/lit-element.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/async-append.js

@@ -1,4 +1,4 @@
-import{directive as r,PartType as e}from"../directive.js";import{AsyncReplaceDirective as s}from"./async-replace.js";import{clearPart as t,insertPart as o,setChildPartValue as i}from"../directive-helpers.js";
+import{directive as r,PartType as e}from"lit-html/directive.js";import{AsyncReplaceDirective as s}from"lit-html/directives/async-replace.js";import{clearPart as t,insertPart as o,setChildPartValue as i}from"lit-html/directive-helpers.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/guard.js

@@ -1,4 +1,4 @@
-import{noChange as r}from"../lit-html.js";import{directive as t,Directive as s}from"../directive.js";
+import{noChange as r}from"lit-html/lit-html.js";import{directive as t,Directive as s}from"lit-html/directive.js";
 /**
  * @license
  * Copyright 2018 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/if-defined.js

@@ -1,4 +1,4 @@
-import{nothing as t}from"../lit-html.js";
+import{nothing as t}from"lit-html/lit-html.js";
 /**
  * @license
  * Copyright 2018 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/keyed.js

@@ -1,4 +1,4 @@
-import{nothing as r}from"../lit-html.js";import{directive as t,Directive as e}from"../directive.js";import{setCommittedValue as s}from"../directive-helpers.js";
+import{nothing as r}from"lit-html/lit-html.js";import{directive as t,Directive as e}from"lit-html/directive.js";import{setCommittedValue as s}from"lit-html/directive-helpers.js";
 /**
  * @license
  * Copyright 2021 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/template-content.js

@@ -1,4 +1,4 @@
-import{noChange as t}from"../lit-html.js";import{directive as r,Directive as e,PartType as n}from"../directive.js";
+import{noChange as t}from"lit-html/lit-html.js";import{directive as r,Directive as e,PartType as n}from"lit-html/directive.js";
 /**
  * @license
  * Copyright 2020 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/directives/unsafe-svg.js

@@ -1,4 +1,4 @@
-import{directive as s}from"../directive.js";import{UnsafeHTMLDirective as e}from"./unsafe-html.js";
+import{directive as s}from"lit-html/directive.js";import{UnsafeHTMLDirective as e}from"lit-html/directives/unsafe-html.js";
 /**
  * @license
  * Copyright 2017 Google LLC

typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/private-ssr-support.js

@@ -1,4 +1,4 @@
-import{_$LH as e,noChange as t}from"./lit-html.js";
+import{_$LH as e,noChange as t}from"lit-html/lit-html.js";
 /**
  * @license
  * Copyright 2019 Google LLC