convert theme system to real plugin

src/bootstrap4/main.ts

@@ -1,4 +1,4 @@
-import { Theme, defineThemeSystem } from '@fullcalendar/core'
+import { Theme, createPlugin } from '@fullcalendar/core'
 
 export class Bootstrap4Theme extends Theme {
 }
@@ -44,9 +44,8 @@ Bootstrap4Theme.prototype.iconOverrideOption = 'bootstrapFontAwesome'
 Bootstrap4Theme.prototype.iconOverrideCustomButtonOption = 'bootstrapFontAwesome'
 Bootstrap4Theme.prototype.iconOverridePrefix = 'fa-'
 
-
-defineThemeSystem('bootstrap4', Bootstrap4Theme)
-
-export default {
-  warning: 'TODO: convert bootstrap4 to real plugin. will still work though.'
-}
+export default createPlugin({
+  themeClasses: {
+    bootstrap4: Bootstrap4Theme
+  }
+})

src/core/Calendar.ts

@@ -4,7 +4,6 @@ import { default as EmitterMixin, EmitterInterface } from './common/EmitterMixin
 import OptionsManager from './OptionsManager'
 import View from './View'
 import Theme from './theme/Theme'
-import { getThemeSystemClass } from './theme/ThemeRegistry'
 import { OptionsInput } from './types/input-types'
 import { getLocale } from './datelib/locale'
 import { DateEnv, DateInput } from './datelib/env'
@@ -34,6 +33,7 @@ import { PointerDragEvent } from './interactions/pointer'
 import { InteractionSettingsInput, parseInteractionSettings, Interaction, interactionSettingsStore, InteractionClass } from './interactions/interaction'
 import EventClicking from './interactions/EventClicking'
 import EventHovering from './interactions/EventHovering'
+import StandardTheme from './theme/StandardTheme'
 
 export interface DateClickApi extends DatePointApi {
   dayEl: HTMLElement
@@ -1223,8 +1223,8 @@ function buildDateEnv(locale, timeZone, timeZoneImpl, firstDay, weekNumberCalcul
 }
 
 
-function buildTheme(calendarOptions) {
-  let themeClass = getThemeSystemClass(calendarOptions.themeSystem || calendarOptions.theme)
+function buildTheme(this: Calendar, calendarOptions) {
+  let themeClass = this.pluginSystem.hooks.themeClasses[calendarOptions.themeSystem || calendarOptions.theme] || StandardTheme
   return new themeClass(calendarOptions)
 }
 

src/core/main.ts

@@ -104,7 +104,6 @@ export { unpromisify } from './util/promise'
 
 export { default as EmitterMixin, EmitterInterface } from './common/EmitterMixin'
 export { DateRange, rangeContainsMarker, intersectRanges, rangesEqual, rangesIntersect, rangeContainsRange } from './datelib/date-range'
-export { defineThemeSystem } from './theme/ThemeRegistry'
 export { default as Mixin } from './common/Mixin'
 export { default as PositionCache } from './common/PositionCache'
 export { default as ScrollComponent, ScrollbarWidths } from './common/ScrollComponent'

src/core/plugin-system.ts

@@ -12,6 +12,8 @@ import { dateSelectionJoinTransformer } from './interactions/date-selecting'
 import { EventResizeJoinTransforms } from './interactions/event-resizing'
 import { ExternalDefTransform } from './interactions/external-element-dragging'
 import { InteractionClass } from './interactions/interaction'
+import { ThemeClass } from './theme/Theme'
+import { __assign } from 'tslib'
 
 // TODO: easier way to add new hooks? need to update a million things
 
@@ -34,6 +36,7 @@ export interface PluginDefInput {
   eventDropTransformers?: EventDropTransformers[]
   componentInteractions?: InteractionClass[]
   calendarInteractions?: CalendarInteractionClass[]
+  themeClasses?: { [themeSystemName: string]: ThemeClass }
 }
 
 export interface PluginHooks {
@@ -54,6 +57,7 @@ export interface PluginHooks {
   eventDropTransformers: EventDropTransformers[]
   componentInteractions: InteractionClass[]
   calendarInteractions: CalendarInteractionClass[]
+  themeClasses: { [themeSystemName: string]: ThemeClass }
 }
 
 export interface PluginDef extends PluginHooks {
@@ -92,7 +96,8 @@ export function createPlugin(input: PluginDefInput): PluginDef {
     viewContainerModifiers: input.viewContainerModifiers || [],
     eventDropTransformers: input.eventDropTransformers || [],
     componentInteractions: input.componentInteractions || [],
-    calendarInteractions: input.calendarInteractions || []
+    calendarInteractions: input.calendarInteractions || [],
+    themeClasses: input.themeClasses || {}
   }
 }
 
@@ -119,7 +124,8 @@ export class PluginSystem {
       viewContainerModifiers: [],
       eventDropTransformers: [],
       componentInteractions: [],
-      calendarInteractions: []
+      calendarInteractions: [],
+      themeClasses: {}
     }
     this.addedHash = {}
   }
@@ -166,6 +172,7 @@ function combineHooks(hooks0: PluginHooks, hooks1: PluginHooks): PluginHooks {
     viewContainerModifiers: hooks0.viewContainerModifiers.concat(hooks1.viewContainerModifiers),
     eventDropTransformers: hooks0.eventDropTransformers.concat(hooks1.eventDropTransformers),
     calendarInteractions: hooks0.calendarInteractions.concat(hooks1.calendarInteractions),
-    componentInteractions: hooks0.componentInteractions.concat(hooks1.componentInteractions)
+    componentInteractions: hooks0.componentInteractions.concat(hooks1.componentInteractions),
+    themeClasses: __assign({}, hooks0.themeClasses, hooks1.themeClasses)
   }
 }

src/core/theme/Theme.ts

@@ -94,3 +94,5 @@ Theme.prototype.classes = {}
 Theme.prototype.iconClasses = {}
 Theme.prototype.baseIconClass = ''
 Theme.prototype.iconOverridePrefix = ''
+
+export type ThemeClass = { new(calendarOptions: any): Theme }