Move all internal modules in the kolibri package into folders called …

…'internal'.

Update the kolibri package build tools to leverage this fact to automatically generate the exports field.

Makefile

@@ -231,7 +231,7 @@ i18n-pretranslate-approve-all:
 i18n-download-translations:
 	python packages/kolibri-tools/lib/i18n/crowdin.py rebuild-translations ${branch}
 	python packages/kolibri-tools/lib/i18n/crowdin.py download-translations ${branch}
-	yarn exec kolibri-tools i18n-code-gen -- --output-dir ./packages/kolibri/utils
+	yarn exec kolibri-tools i18n-code-gen -- --output-dir ./packages/kolibri/utils/internal
 	$(MAKE) i18n-django-compilemessages
 	yarn exec kolibri-tools i18n-create-message-files -- --pluginFile ./build_tools/build_plugins.txt
 

packages/kolibri-tools/lib/apiSpecExportTools.js

@@ -1,22 +1,29 @@
 const path = require('node:path');
 const kolibriPackageJson = require('../../kolibri/package.json');
 const writeSourceToFile = require('./i18n/writeSourceToFile');
+const glob = require('./glob');
 
 const apiSpec = kolibriPackageJson.exports || {};
 
 const { kolibriName } = require('./kolibriName');
 
-// Generate a list of all the module imports that we need to expose
-// Iterate over all the exports in the kolibri package
-const apiKeys = Object.keys(apiSpec)
-  // Filter out the export for the root package '.' as we don't need to expose that
-  .filter(key => key !== '.')
-  // Add the kolibri prefix and remove the leading '.' to make a full import path
-  // e.g. './urls' -> 'kolibri/urls'
-  .map(key => 'kolibri' + key.slice(1))
-  // Add the list of modules that are exposed in the kolibri package.json
-  // Unmodified, as they are already full import paths, e.g. 'vue'
-  .concat(kolibriPackageJson.exposes);
+function generateApiKeys(apiSpec) {
+  // Generate a list of all the module imports that we need to expose
+  // Iterate over all the exports in the kolibri package
+  return (
+    Object.keys(apiSpec)
+      // Filter out the export for the root package '.' as we don't need to expose that
+      .filter(key => key !== '.')
+      // Add the kolibri prefix and remove the leading '.' to make a full import path
+      // e.g. './urls' -> 'kolibri/urls'
+      .map(key => 'kolibri' + key.slice(1))
+      // Add the list of modules that are exposed in the kolibri package.json
+      // Unmodified, as they are already full import paths, e.g. 'vue'
+      .concat(kolibriPackageJson.exposes)
+  );
+}
+
+const apiKeys = generateApiKeys(apiSpec);
 
 const coreExternals = {
   // The kolibri package itself is a special case, as it is the root of the package
@@ -38,10 +45,36 @@ const apiSpecHeader = `
 `;
 
 function rebuildApiSpec() {
-  const apiSpecFilePath = path.resolve(__dirname, '../../kolibri/apiSpec.js');
+  // First we read the directory structure of the kolibri folder to infer the list of modules
+  // that are available to be imported.
+  const kolibriFolder = path.resolve(__dirname, '../../kolibri');
+  const kolibriFiles = glob
+    .sync(`${kolibriFolder}/**/*.{js,vue}`, {
+      ignore: ['**/internal/**', '**/__tests__/**', '**/__mocks__/**'],
+    })
+    .map(f => f.split('.')[0])
+    .map(f => f.replace(kolibriFolder, ''))
+    .map(f => f.replace(/\/index$/, ''))
+    .sort();
+  // Then we generate the list of modules that are exposed in the kolibri package.json
+  const newApiSpec = {};
+  for (const key of kolibriFiles) {
+    const specValue = '.' + key;
+    // When we are able to move everything into a src folder
+    // we can update the right hand side of this
+    newApiSpec[specValue] = specValue === '.' ? './index' : specValue;
+  }
+  const updatedKolibriPackageJson = {
+    ...kolibriPackageJson,
+    exports: newApiSpec,
+  };
+  const kolibriPackageJsonFilePath = path.resolve(__dirname, '../../kolibri/package.json');
+  writeSourceToFile(kolibriPackageJsonFilePath, JSON.stringify(updatedKolibriPackageJson, null, 2));
+  const apiSpecFilePath = path.resolve(__dirname, '../../kolibri/internal/apiSpec.js');
+  const updatedApiKeys = generateApiKeys(updatedKolibriPackageJson.exports);
   let apiSpecContent = apiSpecHeader;
   apiSpecContent += 'export default {\n';
-  for (const key of apiKeys) {
+  for (const key of updatedApiKeys) {
     apiSpecContent += `  '${key}': require('${key}'),\n`;
   }
   apiSpecContent += '};\n';

packages/kolibri/README.md

@@ -0,0 +1,3 @@
+This is the kolibri JS public API. All the exports and 'exposes' fields in the package.json are available at runtime as part of the Kolibri core bundle, so JS built with the Kolibri webpack configuration will defer to a global object to read these modules at runtime.
+
+Only the files detailed in 'exports' are available for import from this package, as per ESM conventions - to further clarify which modules are importable, all the code that is only used internally within this package is included inside folders called 'internal'. Any code inside these folders will not be directly importable.

packages/kolibri/__tests__/heartbeat.spec.js

@@ -7,7 +7,7 @@ import useSnackbar, { useSnackbarMock } from 'kolibri/composables/useSnackbar';
 import { ref } from '@vue/composition-api';
 import { DisconnectionErrorCodes } from 'kolibri/constants';
 import { HeartBeat } from '../heartbeat.js';
-import { trs } from '../disconnection';
+import { trs } from '../internal/disconnection';
 import coreModule from '../../../kolibri/core/assets/src/state/modules/core';
 import { stubWindowLocation } from 'testUtils'; // eslint-disable-line
 

packages/kolibri/client.js

@@ -10,7 +10,7 @@ import { get } from '@vueuse/core';
 import useUser from 'kolibri/composables/useUser';
 import { DisconnectionErrorCodes } from 'kolibri/constants';
 import clientFactory from 'kolibri/utils/baseClient';
-import useConnection from './useConnection';
+import useConnection from './internal/useConnection';
 
 export const logging = logger.getLogger(__filename);
 

packages/kolibri/components/language-switcher/LanguageSwitcherList.vue

@@ -55,8 +55,8 @@
 
   import { availableLanguages, compareLanguages, currentLanguage } from 'kolibri/utils/i18n';
   import LanguageSwitcherModal from 'kolibri/components/language-switcher/LanguageSwitcherModal';
-  import languageSwitcherMixin from './mixin';
-  import SelectedLanguage from './SelectedLanguage';
+  import languageSwitcherMixin from './internal/mixin';
+  import SelectedLanguage from './internal/SelectedLanguage';
 
   const prioritizedLanguages = ['en', 'ar', 'es-419', 'hi-in', 'fr-fr', 'sw-tz'];
 
@@ -118,7 +118,7 @@
 
 <style lang="scss" scoped>
 
-  @import './language-names';
+  @import './internal/language-names';
 
   .globe {
     position: relative;

packages/kolibri/components/language-switcher/LanguageSwitcherModal.vue

@@ -47,7 +47,7 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import FocusTrap from 'kolibri-common/components/FocusTrap';
-  import languageSwitcherMixin from './mixin';
+  import languageSwitcherMixin from './internal/mixin';
 
   export default {
     name: 'LanguageSwitcherModal',
@@ -98,7 +98,7 @@
 
 <style lang="scss" scoped>
 
-  @import './language-names';
+  @import './internal/language-names';
 
   .language-name {
     @include font-family-language-names;

packages/kolibri/components/pages/AppBarPage/index.vue

@@ -60,8 +60,8 @@
   import useUserSyncStatus from 'kolibri-common/composables/useUserSyncStatus';
   import useUser from 'kolibri/composables/useUser';
   import ScrollingHeader from '../ScrollingHeader';
-  import AppBar from './AppBar';
-  import SideNav from './SideNav';
+  import AppBar from './internal/AppBar';
+  import SideNav from './internal/SideNav';
 
   export default {
     name: 'AppBarPage',

packages/kolibri/components/pages/AppBarPage/AppBar.vue → packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue

@@ -137,7 +137,7 @@
   import useTotalProgress from 'kolibri/composables/useTotalProgress';
   import useNav from 'kolibri/composables/useNav';
   import useUser from 'kolibri/composables/useUser';
-  import SkipNavigationLink from '../../SkipNavigationLink';
+  import SkipNavigationLink from '../../../SkipNavigationLink';
   import Navbar from './Navbar';
 
   const hashedValuePattern = /^[a-f0-9]{30}$/;

packages/kolibri/components/pages/AppBarPage/SideNav.vue → packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue

@@ -266,7 +266,7 @@
   import useUser from 'kolibri/composables/useUser';
   import useUserSyncStatus from 'kolibri-common/composables/useUserSyncStatus';
   import FocusTrap from 'kolibri-common/components/FocusTrap';
-  import SyncStatusDisplay from '../../SyncStatusDisplay';
+  import SyncStatusDisplay from '../../../SyncStatusDisplay';
   import LearnOnlyDeviceNotice from './LearnOnlyDeviceNotice';
   import TotalPoints from './TotalPoints';
   import SideNavDivider from './SideNavDivider';

packages/kolibri/components/pages/AppBarPage/__tests__/side-nav.spec.js → packages/kolibri/components/pages/AppBarPage/internal/__tests__/side-nav.spec.js

@@ -6,7 +6,7 @@ import SideNav from '../SideNav';
 // eslint-disable-next-line import/named
 // eslint-disable-next-line import/named
 import LearnOnlyDeviceNotice from '../LearnOnlyDeviceNotice';
-import SyncStatusDisplay from '../../../SyncStatusDisplay';
+import SyncStatusDisplay from '../../../../SyncStatusDisplay';
 import { stubWindowLocation } from 'testUtils'; // eslint-disable-line
 
 jest.mock('kolibri/urls');

packages/kolibri/components/pages/ImmersivePage/index.vue

@@ -35,7 +35,7 @@
 
   import { mapGetters } from 'vuex';
   import ScrollingHeader from '../ScrollingHeader';
-  import ImmersiveToolbar from './ImmersiveToolbar';
+  import ImmersiveToolbar from './internal/ImmersiveToolbar';
 
   export default {
     name: 'ImmersivePage',

packages/kolibri/components/pages/NotificationsRoot/index.vue

@@ -53,7 +53,7 @@
   import AppError from 'kolibri-common/components/AppError';
   import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
   import useUser from 'kolibri/composables/useUser';
-  import UpdateNotification from './UpdateNotification';
+  import UpdateNotification from './internal/UpdateNotification';
 
   export default {
     name: 'NotificationsRoot',

packages/kolibri/composables/useNav.js

@@ -4,7 +4,7 @@ import { get } from '@vueuse/core';
 import { UserKinds, NavComponentSections } from 'kolibri/constants';
 import logger from 'kolibri-logging';
 import { computed, getCurrentInstance } from '@vue/composition-api';
-import { generateNavRoute } from './generateNavRoutes';
+import { generateNavRoute } from './internal/generateNavRoutes';
 
 const logging = logger.getLogger(__filename);
 

packages/kolibri/heartbeat.js

@@ -8,12 +8,12 @@ import useUser from 'kolibri/composables/useUser';
 import { DisconnectionErrorCodes, SIGNED_OUT_DUE_TO_INACTIVITY } from 'kolibri/constants';
 import clientFactory from 'kolibri/utils/baseClient';
 import { browser, os } from 'kolibri/utils/browserInfo';
-import useConnection from './useConnection';
+import useConnection from './internal/useConnection';
 import {
   createTryingToReconnectSnackbar,
   createDisconnectedSnackbar,
   createReconnectedSnackbar,
-} from './disconnection';
+} from './internal/disconnection';
 
 const logging = logger.getLogger(__filename);
 

packages/kolibri/index.js

@@ -4,10 +4,10 @@ import VueRouter from 'vue-router';
 import Vuex from 'vuex';
 import VueCompositionApi from '@vue/composition-api';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
-import ContentRenderer from './components/ContentRenderer';
-import initializeTheme from './styles/initializeTheme';
-import setupPluginMediator from './pluginMediator';
-import apiSpec from './apiSpec';
+import ContentRenderer from './components/internal/ContentRenderer';
+import initializeTheme from './styles/internal/initializeTheme';
+import setupPluginMediator from './internal/pluginMediator';
+import apiSpec from './internal/apiSpec';
 
 /**
  * Object that forms the public API for the Kolibri

packages/kolibri/apiSpec.js → packages/kolibri/internal/apiSpec.js

@@ -13,13 +13,14 @@ export default {
   'kolibri/components/CoreLogo': require('kolibri/components/CoreLogo'),
   'kolibri/components/CoreTable': require('kolibri/components/CoreTable'),
   'kolibri/components/FilterTextbox': require('kolibri/components/FilterTextbox'),
+  'kolibri/components/SkipNavigationLink': require('kolibri/components/SkipNavigationLink'),
+  'kolibri/components/SyncStatusDisplay': require('kolibri/components/SyncStatusDisplay'),
   'kolibri/components/language-switcher/LanguageSwitcherList': require('kolibri/components/language-switcher/LanguageSwitcherList'),
   'kolibri/components/language-switcher/LanguageSwitcherModal': require('kolibri/components/language-switcher/LanguageSwitcherModal'),
   'kolibri/components/pages/AppBarPage': require('kolibri/components/pages/AppBarPage'),
   'kolibri/components/pages/ImmersivePage': require('kolibri/components/pages/ImmersivePage'),
   'kolibri/components/pages/NotificationsRoot': require('kolibri/components/pages/NotificationsRoot'),
-  'kolibri/components/SkipNavigationLink': require('kolibri/components/SkipNavigationLink'),
-  'kolibri/components/SyncStatusDisplay': require('kolibri/components/SyncStatusDisplay'),
+  'kolibri/components/pages/ScrollingHeader': require('kolibri/components/pages/ScrollingHeader'),
   'kolibri/composables/useMinimumKolibriVersion': require('kolibri/composables/useMinimumKolibriVersion'),
   'kolibri/composables/useNav': require('kolibri/composables/useNav'),
   'kolibri/composables/useNow': require('kolibri/composables/useNow'),
@@ -34,6 +35,7 @@ export default {
   'kolibri/uiText/bytesForHumans': require('kolibri/uiText/bytesForHumans'),
   'kolibri/uiText/commonCoreStrings': require('kolibri/uiText/commonCoreStrings'),
   'kolibri/uiText/licenses': require('kolibri/uiText/licenses'),
+  'kolibri/uiText/notificationStrings': require('kolibri/uiText/notificationStrings'),
   'kolibri/urls': require('kolibri/urls'),
   'kolibri/utils/CatchErrors': require('kolibri/utils/CatchErrors'),
   'kolibri/utils/appCapabilities': require('kolibri/utils/appCapabilities'),

packages/kolibri/pluginMediator.js → packages/kolibri/internal/pluginMediator.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import scriptLoader from 'kolibri-common/utils/scriptLoader';
 import { RENDERER_SUFFIX } from 'kolibri/constants';
 import { languageDirection, languageDirections } from 'kolibri/utils/i18n';
-import contentRendererMixin from './components/ContentRenderer/mixin';
-import ContentRendererLoading from './components/ContentRenderer/ContentRendererLoading';
-import ContentRendererError from './components/ContentRenderer/ContentRendererError';
+import contentRendererMixin from '../components/internal/ContentRenderer/mixin';
+import ContentRendererLoading from '../components/internal/ContentRenderer/ContentRendererLoading';
+import ContentRendererError from '../components/internal/ContentRenderer/ContentRendererError';
 
 /**
  * Array containing the names of all methods of the Mediator that