Separate frontend core API into 'public' and 'internally shared'

[rtibbles]

Currently, all core shared components are loaded onto the core API object, which leads to a large, bloated object that we load on every single page of Kolibri.

In conversation with @indirectlylit, we posited that the purposes of the core API would be better served by a two tier structure:

1. The public, core API. This would be available to external plugins, and accessable on the kolibriGlobal object on the window object. (this would be a subset of what is currently exposed in this way). These would be available in the kolibri core package, under the same file paths as used for import, but for plugin builds, they would map to the kolibriGlobal object at runtime.

2. A shared, internal, library. This would be available at build time for use in Kolibri. The intention of this is to allow us to more easily share components across different internal plugins, without having to overload the core API. These would be put into the kolibri-common package, which will not be published, nor supported for external usage.

Lastly - we will continue to use KDS as a place for public, shared components and functionality.

Current single purpose modules that need to be imported independently of the core API (kolibri_module, kolibri_app, content_renderer_module, and plugin_data) will be migrated to separate packages that are published to NPM.

The proposed mapping of the current API to this new format would be as follows (null indicates it would be removed):

  kolibri_module: 'kolibri-module',
  kolibri_app: 'kolibri-app',
  content_renderer_module: 'kolibri-viewer',
  plugin_data: 'kolibri-plugin-data',
  'kolibri.client': 'kolibri/client',
  'kolibri.heartbeat': 'kolibri/heartbeat',
  'kolibri.lib.logging': 'kolibri/logging',
  'kolibri.lib.vue': 'vue',
  'kolibri.lib.vuex': 'vuex',
  'kolibri.lib.vueCompositionApi': '@vue/composition-api',
  'kolibri.lib.apiResource': 'kolibri/apiResource',
  'kolibri.coreVue.vuex.constants': 'kolibri/constants',
  'kolibri.coreVue.vuex.getters': null,
  'kolibri.coreVue.vuex.actions': null,
  'kolibri.coreVue.vuex.store': null,
  'kolibri.coreVue.vuex.mappers': null, // Remove use of remaining mapper
  'kolibri.coreVue.components.ScrollingHeader': null,
  'kolibri.coreVue.components.Backdrop': 'kolibri-common/components/Backdrop',
  'kolibri.coreVue.components.CoachContentLabel': 'kolibri-common/components/labels/CoachContentLabel',
  'kolibri.coreVue.components.DownloadButton': 'kolibri-common/components/DownloadButton',
  'kolibri.coreVue.components.ProgressBar': null, // Not used
  'kolibri.coreVue.components.ContentIcon': 'kolibri-common/components/labels/ContentIcon',
  'kolibri.coreVue.components.ProgressIcon': 'kolibri-common/components/labels/ProgressIcon',
  'kolibri.coreVue.components.PermissionsIcon': 'kolibri-common/components/labels/PermissionsIcon',
  'kolibri.coreVue.components.AppBar': null, // Only used in AppBarPage
  'kolibri.coreVue.components.AppBarPage': 'kolibri/components/pages/AppBarPage',
  'kolibri.coreVue.components.ImmersivePage': 'kolibri/components/pages/ImmersivePage',
  'kolibri.coreVue.components.SideNav': null, // Only used in AppBarPage
  'kolibri.coreVue.components.Navbar': null, // Only used in HorizontalNavBarWithOverflowMenu
  'kolibri.coreVue.components.NavbarLink': null,  // Only used in HorizontalNavBarWithOverflowMenu
  'kolibri.coreVue.components.HorizontalNavBarWithOverflowMenu': null, // Should be migrated to AppBarPage, and populated by registered nav items
  'kolibri.coreVue.components.LanguageSwitcherModal': 'kolibri-common/components/language-switcher/LanguageSwitcherModal',
  'kolibri.coreVue.components.LanguageSwitcherList': 'kolibri/components/language-switcher/LanguageSwitcherList',
  'kolibri.coreVue.components.ElapsedTime': 'kolibri-common/components/ElapsedTime',
  'kolibri.coreVue.components.PointsIcon': 'kolibri-common/components/labels/PointsIcon',
  'kolibri.coreVue.components.TotalPoints': null, // Only used in SideNav
  'kolibri.coreVue.components.AuthMessage': 'kolibri/components/AuthMessage',
  'kolibri.coreVue.components.FilterTextbox': 'kolibri/components/FilterTextbox',
  'kolibri.coreVue.components.CoreSnackbar': null, // Only used in GlobalSnackbar
  'kolibri.coreVue.components.CoreMenu': 'kolibri-common/components/CoreMenu',
  'kolibri.coreVue.components.CoreMenuDivider': 'kolibri-common/components/CoreMenu/CoreMenuDivider',
  'kolibri.coreVue.components.CoreMenuOption': 'kolibri-common/components/CoreMenu/CoreMenuOption',
  'kolibri.coreVue.components.CoreTable': 'kolibri/components/CoreTable',
  'kolibri.coreVue.components.UserTable': 'kolibri-common/components/UserTable',
  'kolibri.coreVue.components.CoreInfoIcon': 'kolibri-common/components/labels/CoreInfoIcon',
  'kolibri.coreVue.components.InteractionList': 'kolibri-common/components/quizzes/InteractionList',
  'kolibri.coreVue.components.ExamReport': 'kolibri-common/components/quizzes/QuizReport',
  'kolibri.coreVue.components.SlotTruncator': 'kolibri-common/components/SlotTruncator',
  'kolibri.coreVue.components.TextTruncatorCss': 'kolibri-common/components/TextTruncatorCss',
  'kolibri.coreVue.components.TimeDuration': 'kolibri-common/components/TimeDuration',
  'kolibri.coreVue.components.MultiPaneLayout': 'kolibri-common/components/MultiPaneLayout',
  'kolibri.coreVue.components.CoreFullscreen': 'kolibri-common/components/CoreFullscreen',
  'kolibri.coreVue.components.CoreLogo': 'kolibri/components/CoreLogo',
  'kolibri.coreVue.components.UiAlert': 'kolibri-design-system/lib/keen/UiAlert',
  'kolibri.coreVue.components.UiIconButton': 'kolibri-design-system/lib/keen/UiIconButton',
  'kolibri.coreVue.components.UiToolbar': 'kolibri-common/components/keen/UiToolbar.vue',
  'kolibri.coreVue.components.PrivacyInfoModal': 'kolibri-common/components/PrivacyInfoModal',
  'kolibri.coreVue.components.UserTypeDisplay': 'kolibri-common/components/UserTypeDisplay',
  'kolibri.coreVue.components.Draggable': 'kolibri-common/components/sortable/Draggable',
  'kolibri.coreVue.components.DragHandle': 'kolibri-common/components/sortable/DragHandle',
  'kolibri.coreVue.components.DragContainer': 'kolibri-common/components/sortable/DragContainer',
  'kolibri.coreVue.components.DragSortWidget': 'kolibri-common/components/sortable/DragSortWidget',
  'kolibri.coreVue.components.FocusTrap': 'kolibri-common/components/FocusTrap',
  'kolibri.coreVue.components.BottomAppBar': 'kolibri/components/BottomAppBar',
  'kolibri.coreVue.components.BaseToolbar': 'kolibri-common/components/BaseToolbar',
  'kolibri.coreVue.components.GenderSelect': 'kolibri-common/components/userAccounts/GenderSelect',
  'kolibri.coreVue.components.GenderDisplayText': 'kolibri-common/components/userAccounts/GenderDisplayText',
  'kolibri.coreVue.components.BirthYearSelect': 'kolibri-common/components/userAccounts/BirthYearSelect',
  'kolibri.coreVue.components.FullNameTextbox': 'kolibri-common/components/userAccounts/FullNameTextbox',
  'kolibri.coreVue.components.UsernameTextbox': 'kolibri-common/components/userAccounts/UsernameTextbox',
  'kolibri.coreVue.components.PasswordTextbox': 'kolibri-common/components/userAccounts/PasswordTextbox',
  'kolibri.coreVue.components.BirthYearDisplayText': 'kolibri-common/components/userAccounts/BirthYearDisplayText',
  'kolibri.coreVue.components.PaginatedListContainer': 'kolibri-common/components/PaginatedListContainer',
  'kolibri.coreVue.components.PrivacyLinkAndModal': 'kolibri-common/components/userAccounts/PrivacyLinkAndModal.vue',
  'kolibri.coreVue.components.LearnOnlyDeviceNotice': 'kolibri-common/components/LearnOnlyDeviceNotice',
  'kolibri.coreVue.components.SuggestedTime': 'kolibri-common/components/SuggestedTime',
  'kolibri.coreVue.components.PageRoot': null, // Is an incredibly simple boiler plate that should be copied into the places it is used.
  'kolibri.coreVue.components.MasteryModel': 'kolibri-common/components/labels/MasteryModel',
  'kolibri.coreVue.components.NotificationsRoot': 'kolibri/components/pages/NotificationsRoot',
  'kolibri.coreVue.components.KolibriLoadingSnippet': 'kolibri-common/components/KolibriLoadingSnippet',
  'kolibri.coreVue.componentSets.sync': 'kolibri-common/components/syncComponentSet', // Migrate to use of individual components and composables
  'kolibri.coreVue.router': 'kolibri/router',
  'kolibri.coreVue.mixins.responsiveWindowMixin': null,
  'kolibri.coreVue.mixins.responsiveElementMixin': null,
  'kolibri.coreVue.mixins.commonCoreStrings': 'kolibri/uiText/commonCoreStrings', // Break up into use case specific translator objects
  'kolibri.coreVue.mixins.commonTaskStrings': 'kolibri-common/uiText/tasks',
  'kolibri.coreVue.mixins.commonSyncElements': 'kolibri-common/mixins/commonSyncElements',
  'kolibri.coreVue.mixins.translatedUserKinds': 'kolibri-common/uiText/userKinds',
  'kolibri.coreVue.composables.useKResponsiveWindow': 'kolibri-design-system/lib/useKResponsiveWindow',
  'kolibri.coreVue.composables.useKShow': 'kolibri-design-system/lib/composables/useKShow',
  'kolibri.coreVue.composables.useMinimumKolibriVersion': 'kolibri/composables/useMinimumKolibriVersion',
  'kolibri.coreVue.composables.useSnackbar': 'kolibri/composables/useSnackbar',
  'kolibri.coreVue.composables.useUser': 'kolibri/composables/useUser',
  'kolibri.coreVue.composables.useUserSyncStatus': 'kolibri-common/composables/useUserSyncStatus',
  'kolibri.resources': 'kolibri-common/api-resources', // Migrate to individual resource files to give import errors - put in kolibri-common to indicate these are internal APIs - the TaskResource alone will be put into `kolibri/api-resources`
  'kolibri.themeConfig': 'kolibri/styles/themeConfig',
  'kolibri.urls': 'kolibri/urls',
  'kolibri.utils.appCapabilities': 'kolibri/utils/appCapabilities',
  'kolibri.utils.browserInfo': 'kolibri/utils/browserInfo',
  'kolibri.utils.bytesForHumans': 'kolibri/uiText/bytesForHumans',
  'kolibri.utils.CatchErrors': 'kolibri/utils/CatchErrors',
  'kolibri.utils.clientFactory': 'kolibri/utils/baseClient',
  'kolibri.utils.contentNode': null, // Get rid of the use of this completely
  'kolibri.utils.coreBannerContent': 'kolibri-common/utils/coreBannerContent',
  'kolibri.utils.exams': 'kolibri-common/quizzes/utils',
  'kolibri.utils.filterUsersByNames': 'kolibri-common/utils/filterUsersByNames',
  'kolibri.utils.i18n': 'kolibri/utils/i18n',
  'kolibri.utils.licenseTranslations': 'kolibri/uiText/licenses',
  'kolibri.utils.loginComponents': 'kolibri-common/utils/loginComponents',
  'kolibri.utils.navComponents': 'kolibri/utils/navComponents',
  'kolibri.utils.redirectBrowser': 'kolibri/utils/redirectBrowser',
  'kolibri.utils.samePageCheckGenerator': 'kolibri-common/utils/samePageCheckGenerator',
  'kolibri.utils.serverClock': 'kolibri/utils/serverClock',
  'kolibri.utils.shuffled': 'kolibri-common/utils/shuffled',
  'kolibri.utils.sortLanguages': null, // Move into i18n module
  'kolibri.utils.syncTaskUtils': 'kolibri-common/utils/syncTaskUtils', // Break this up, migrate constants to constants
  'kolibri.utils.UserType': 'kolibri-common/utils/userType',
  'kolibri.utils.validators': 'kolibri/utils/validators',
  'kolibri.utils.coreStrings': 'kolibri/uiText/commonCoreStrings', // See above about breaking this up into more discrete uiText translators
  'kolibri.utils.objectSpecs': 'kolibri/utils/objectSpecs'

This spec would also be used to create a new migration script to do the updating of import paths automatically, which could then be used by plugins for an easy migration path (but would throw a warning of anything not exposed by kolibri is used).

Prerequisites

Preview Give feedback

1. Remove use of the assessmentmetadata state mapper #11724
   3 of 3
   DEV: frontend help wanted +2
   
2. Remove unnecessary use of the core Kolibri store in tests #11725
   0 of 2
   DEV: frontend help wanted +2
   
3. Create equivalent of getters for all accessed session state and all getters in useUser composable #11723
   DEV: frontend help wanted +2
   
4. Replace instances of the PageRoot component with a default RootVue component #11729
   +0
   
5. Make the AppBarPage self populate the top nav, based on registered navigation items in in navComponents.js #11731
   0 of 7
   DEV: frontend +1
   
6. Use consistent KDS imports across the whole Kolibri #11561
   DEV: frontend TAG: tech update / debt good first issue help wanted +4
   
7. Move core vuex state registration out of the core store #12558
   +0
   
8. Migrate error codes into constants #12582
   +0
   
9. Remove TotalPoints component from the core API #12599
   +0
   
10. Move sortLanguages util into the i18n module #12601
    +0
    
11. Eliminate contentNode utils thumbnail mapper and API entry #12603
    +0
    
12. Remove core vuex channel fetching logic and state and move to coach #12557
    +0
    
13. Remove CoreSnackbar from core API - move into GlobalSnackbar, the only place it is used #12625
    +0
    
14. Add to heartbeat API to keep useConnection composable more tightly encapsulated in the heartbeat module. #12698
    DEV: frontend +1
15. Consolidate content node utilities into kolibri-common. #12699
    DEV: frontend +1
16. Move navroute generation into usenav composable. #12701
    DEV: frontend +1
17. Move renderer suffix into core constants. #12700
    DEV: frontend +1

Tasks

Preview Give feedback

1. Create migration script that reads file imports in source code and maps them to the updated import paths
2. Show a warning to a user if a mapped import maps to null - provide explanatory text for these cases to allow for remediation
3. Migrate the independent packages into their own packages in the kolibri packages directory
4. Create kolibri package and migrate all shared modules there - setting exports explicitly in the package.json
5. Migrate all common modules to kolibri-common
6. Remove all core aliases and update core externals to map to a spec object defined on the new kolibri package
7. Update all imports to use new public API kolibri-sentry-plugin#5
   +0

[indirectlylit]

🎉 congratulations!

[rtibbles]

5 years in the making!

[MisRob]

Step by step :) Good work.

Hi @indirectlylit!