[4.4] Move to ESM

administrator/components/com_media/resources/scripts/app/Api.es6.js → administrator/components/com_media/resources/scripts/app/Api.mjs

@@ -1,5 +1,5 @@
-import notifications from './Notifications.es6';
-import { dirname } from './path';
+import notifications from './Notifications.mjs';
+import { dirname } from './path.mjs';
 
 /**
  * Normalize a single item

administrator/components/com_media/resources/scripts/app/path.js → administrator/components/com_media/resources/scripts/app/path.mjs

@@ -1,13 +1,15 @@
 export const dirname = (path) => {
   if (typeof path !== 'string') {
-    throw new TypeError('Path must be a string. Received ' + JSON.stringify(path));
+    throw new TypeError(`Path must be a string. Received ${JSON.stringify(path)}`);
   }
 
   if (path.length === 0) return '.';
   let code = path.charCodeAt(0);
   const hasRoot = code === 47;
   let end = -1;
   let matchedSlash = true;
+
+  // eslint-disable-next-line no-plusplus
   for (let i = path.length - 1; i >= 1; --i) {
     code = path.charCodeAt(i);
     if (code === 47) {
@@ -24,4 +26,4 @@ export const dirname = (path) => {
   if (end === -1) return hasRoot ? '/' : '.';
   if (hasRoot && end === 1) return '//';
   return path.slice(0, end);
-}
+};

administrator/components/com_media/resources/scripts/components/app.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import * as types from '../store/mutation-types.es6';
-import notifications from '../app/Notifications.es6';
+import * as types from '../store/mutation-types.mjs';
+import notifications from '../app/Notifications.mjs';
 import MediaBrowser from './browser/browser.vue';
 import MediaDisk from './tree/disk.vue';
 import MediaToolbar from './toolbar/toolbar.vue';

administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import navigable from '../../mixins/navigable.es6';
+import navigable from '../../mixins/navigable.mjs';
 
 export default {
   name: 'MediaBreadcrumb',

administrator/components/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue

@@ -145,8 +145,8 @@
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-import api from '../../../app/Api.es6';
+import * as types from '../../../store/mutation-types.mjs';
+import api from '../../../app/Api.mjs';
 
 import MediaBrowserActionItemEdit from './edit.vue';
 import MediaBrowserActionItemDelete from './delete.vue';

administrator/components/com_media/resources/scripts/components/browser/browser.vue

@@ -72,9 +72,9 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 import MediaBrowserTable from './table/table.vue';
-import MediaBrowserItem from './items/item.es6';
+import MediaBrowserItem from './items/item.mjs';
 import MediaInfobar from '../infobar/infobar.vue';
 
 function sortArray(array, by, direction) {

administrator/components/com_media/resources/scripts/components/browser/items/directory.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 <script>
-import navigable from '../../../mixins/navigable.es6';
+import navigable from '../../../mixins/navigable.mjs';
 import MediaBrowserActionItemsContainer from '../actionItems/actionItemsContainer.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/browser/items/image.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import api from '../../../app/Api.es6';
+import api from '../../../app/Api.mjs';
 import MediaBrowserActionItemsContainer from '../actionItems/actionItemsContainer.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js → administrator/components/com_media/resources/scripts/components/browser/items/item.mjs

@@ -5,8 +5,8 @@ import Image from './image.vue';
 import Video from './video.vue';
 import Audio from './audio.vue';
 import Doc from './document.vue';
-import * as types from '../../../store/mutation-types.es6';
-import api from '../../../app/Api.es6';
+import * as types from '../../../store/mutation-types.mjs';
+import api from '../../../app/Api.mjs';
 
 export default {
   props: {

administrator/components/com_media/resources/scripts/components/browser/table/row.vue

@@ -31,8 +31,8 @@
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-import navigable from '../../../mixins/navigable.es6';
+import * as types from '../../../store/mutation-types.mjs';
+import navigable from '../../../mixins/navigable.mjs';
 
 export default {
   name: 'MediaBrowserItemRow',

administrator/components/com_media/resources/scripts/components/browser/table/table.vue

@@ -122,7 +122,7 @@
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
+import * as types from '../../../store/mutation-types.mjs';
 import MediaBrowserItemRow from './row.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/infobar/infobar.vue

@@ -63,7 +63,7 @@
   </transition>
 </template>
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 
 export default {
   name: 'MediaInfobar',

administrator/components/com_media/resources/scripts/components/modals/confirm-delete-modal.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 import MediaModal from './modal.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/modals/create-folder-modal.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 import MediaModal from './modal.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue

@@ -59,8 +59,8 @@
 </template>
 
 <script>
-import api from '../../app/Api.es6';
-import * as types from '../../store/mutation-types.es6';
+import api from '../../app/Api.mjs';
+import * as types from '../../store/mutation-types.mjs';
 import MediaModal from './modal.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/modals/rename-modal.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 import MediaModal from './modal.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/modals/share-modal.vue

@@ -74,8 +74,8 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
-import translate from '../../plugins/translate.es6';
+import * as types from '../../store/mutation-types.mjs';
+import translate from '../../plugins/translate.mjs';
 import MediaModal from './modal.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

@@ -149,7 +149,7 @@
 </template>
 
 <script>
-import * as types from '../../store/mutation-types.es6';
+import * as types from '../../store/mutation-types.mjs';
 import MediaBreadcrumb from '../breadcrumb/breadcrumb.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/tree/drive.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import navigable from '../../mixins/navigable.es6';
+import navigable from '../../mixins/navigable.mjs';
 import MediaTree from './tree.vue';
 
 export default {

administrator/components/com_media/resources/scripts/components/tree/tree.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import navigable from '../../mixins/navigable.es6';
+import navigable from '../../mixins/navigable.mjs';
 
 export default {
   name: 'MediaTree',

administrator/components/com_media/resources/scripts/mediamanager.es6.js → administrator/components/com_media/resources/scripts/mediamanager.mjs

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
 import App from './components/app.vue';
-import Event from './app/Event.es6';
-import store from './store/store.es6';
-import translate from './plugins/translate.es6';
+import Event from './app/Event.mjs';
+import store from './store/store.mjs';
+import translate from './plugins/translate.mjs';
 
 // Register MediaManager namespace
 window.MediaManager = window.MediaManager || {};

administrator/components/com_media/resources/scripts/store/actions.es6.js → administrator/components/com_media/resources/scripts/store/actions.mjs

@@ -1,7 +1,7 @@
-import api from '../app/Api.es6';
-import * as types from './mutation-types.es6';
-import translate from '../plugins/translate.es6';
-import notifications from '../app/Notifications.es6';
+import api from '../app/Api.mjs';
+import * as types from './mutation-types.mjs';
+import translate from '../plugins/translate.mjs';
+import notifications from '../app/Notifications.mjs';
 
 const updateUrlPath = (path) => {
   const currentPath = path === null ? '' : path;

administrator/components/com_media/resources/scripts/store/mutations.es6.js → administrator/components/com_media/resources/scripts/store/mutations.mjs

@@ -1,5 +1,5 @@
-import * as types from './mutation-types.es6';
-import { dirname } from '../app/path';
+import * as types from './mutation-types.mjs';
+import { dirname } from '../app/path.mjs';
 
 // The only way to actually change state in a store is by committing a mutation.
 // Mutations are very similar to events: each mutation has a string type and a handler.

administrator/components/com_media/resources/scripts/store/state.es6.js → administrator/components/com_media/resources/scripts/store/state.mjs

@@ -1,4 +1,4 @@
-import persistedStateOptions from './plugins/persisted-state.es6';
+import persistedStateOptions from './plugins/persisted-state.mjs';
 
 // Get the disks from joomla option storage
 const options = Joomla.getOptions('com_media', {});

administrator/components/com_media/resources/scripts/store/store.es6.js → administrator/components/com_media/resources/scripts/store/store.mjs

@@ -1,10 +1,10 @@
 import { createStore } from 'vuex';
 import VuexPersistence from 'vuex-persist';
-import state from './state.es6';
-import * as getters from './getters.es6';
-import * as actions from './actions.es6';
-import mutations from './mutations.es6';
-import persistedStateOptions from './plugins/persisted-state.es6.js';
+import state from './state.mjs';
+import * as getters from './getters.mjs';
+import * as actions from './actions.mjs';
+import mutations from './mutations.mjs';
+import persistedStateOptions from './plugins/persisted-state.mjs';
 // A Vuex instance is created by combining the state, mutations, actions, and getters.
 export default createStore({
   state,

build/.eslintrc

@@ -19,15 +19,15 @@
   // Additional global variables your script accesses during execution
   "globals": {
     "Joomla": true,
-    "MediaManager" : true,
+    "MediaManager": true,
     "bootstrap": true
   },
   // Rule overrides
   "rules": {
     // Disable no-params-reassign for properties
     "no-param-reassign": ["error", { "props": false }],
     // Allow usage of dev-dependencies in js files in build directory
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["build/**/*.js"]}],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["build/**/*.mjs", "cypress.config.dist.mjs", "**/**/cypress.config.mjs"]}],
     // Allow strict mode (we are not dealing with modules)
     "strict": [0],
     // Disable alert rule till we have a CE in place
@@ -49,27 +49,28 @@
     "func-names": [
       "error",
       "as-needed"
-    ]
+    ],
+    "import/prefer-default-export": 0
   },
   "overrides": [
-	{
-	  "files": ["tests/**/*.js"],
-	  "rules": {
-		"no-undef": ["off"],
-		"import/no-extraneous-dependencies": ["off"]
-	  }
-	},
-	{
-	  "files": ["tests/System/support/index.js"],
-	  "rules": {
-		"no-console": ["off"]
-	  }
-	},
-	{
-	  "files": ["tests/System/support/commands/db.js","tests/System/plugins/index.js"],
-	  "rules": {
-		"no-useless-escape": ["off"]
-	  }
-	}
+    {
+      "files": ["tests/**/*.js", "tests/**/*.mjs"],
+      "rules": {
+        "no-undef": ["off"],
+        "import/no-extraneous-dependencies": ["off"]
+      }
+    },
+    {
+      "files": ["tests/System/support/index.js"],
+      "rules": {
+        "no-console": ["off"]
+      }
+    },
+    {
+      "files": ["tests/System/support/commands/db.mjs"],
+      "rules": {
+        "no-useless-escape": ["off"]
+      }
+    }
   ]
 }

build/README.md

@@ -5,6 +5,8 @@ Joomla provides a set of tools for managing static assets and dependencies based
 ## Node Based Tools
 The responsibilities of these tools are:
 - To copy files from the `node-modules` folder to the `media` folder.
+- The configuration for the localization of any node packages is held inside the `package.json` on the root folder under the key `settings`.
+- Build the static error pages (settings are in `package.json`).
 - Do any transformations on the copied files.
 - Update the version numbers on the XML files of the TinyMCE and CodeMirror editors.
 - Copy files from the `build/media_source` folder to the `media` folder.
@@ -15,15 +17,12 @@ For some of these operations, conventions were established to simplify and speed
 
 ## Javascript
 There are three options here:
-- Modern Javascript files must have an extension `.es6.js`.
+- Modern Javascript files must have an extension `.mjs`.
+  Filenames starting with `_` will not become entry points for module bundling.
   This allows ESLint to check the code style, Joomla is using the Airbnb preset https://github.com/airbnb/javascript.
   It also instructs Rollup to do the transforms for ES2017 and then transpile to ES5. This step creates both normal and minified files.
   Production code WILL NOT have the `.es6` part for ES2017+ files but WILL HAVE a `-es5.js` for the ES5 ones.
 
-- Web Component Javascript files must have an extension `.w-c.es6.js`.
-  This allows ESLint to check the code style and instructs Rollup to do the transforms for ES2017 and then transpile to ES5. This step creates normal and minified files. The difference with the `.es6` files is that the tools will automate the minification of the CSS (assuming that the appropriate SCSS file exists), which is then injected into the JS file in place of the placeholder `{{CSS_CONTENTS_PLACEHOLDER}}` (ie: `build/media_source/system/js/joomla-core-loader.w-c.es6.js`)
-  Production code WILL NOT have the `.w-c.es6` part for ES2017+ files but WILL HAVE a `-es5.js` for the ES5 ones.
-
 - Legacy Javascript files must have an extension `.es5.js`.
   This instructs ESLint to skip checking this file.
   Also, it instructs the tools to create a minified version (production code WILL NOT have the `.es5` part)

build/build-modules-js/compilecss.es6.js → build/build-modules-js/compilecss.mjs

@@ -1,8 +1,10 @@
-const { stat } = require('fs-extra');
-const { sep } = require('path');
-const recursive = require('recursive-readdir');
-const { handleScssFile } = require('./stylesheets/handle-scss.es6.js');
-const { handleCssFile } = require('./stylesheets/handle-css.es6.js');
+import { sep } from 'node:path';
+import recursive from 'recursive-readdir';
+import pkg from 'fs-extra';
+import { handleScssFile } from './stylesheets/handle-scss.mjs';
+import { handleCssFile } from './stylesheets/handle-css.mjs';
+
+const { stat } = pkg;
 
 const RootPath = process.cwd();
 
@@ -19,7 +21,7 @@ const RootPath = process.cwd();
  * @param {object} options  The options
  * @param {string} path     The folder that needs to be compiled, optional
  */
-module.exports.stylesheets = async (options, path) => {
+const stylesheets = async (options, path) => {
   const files = [];
   let folders = [];
 
@@ -86,3 +88,5 @@ module.exports.stylesheets = async (options, path) => {
 
   return Promise.all([...cssFilesPromises, ...scssFilesPromises]);
 };
+
+export default stylesheets;