WIP: Trying to dynamically import map component

Author: arildm

app/index.ts

@@ -19,8 +19,6 @@ require("./styles/ui_mods.css")
 require("./styles/jquery.tooltip.css")
 require("rickshaw/rickshaw.css")
 
-require("leaflet/dist/leaflet.css")
-require("leaflet.markercluster/dist/MarkerCluster.css")
 require("./styles/_bootstrap-custom.scss")
 
 require("./styles/tailwind.scss")
@@ -49,9 +47,6 @@ require("slickgrid/slick.interactions.js")
 
 require("./scripts/jq_extensions.js")
 
-require("leaflet")
-require("leaflet.markercluster")
-require("leaflet-providers")
 require("angular-filter/index.js")
 
 require("./lib/jquery.tooltip.pack.js")

app/scripts/components/result-map.ts

@@ -8,6 +8,10 @@ import "@/../styles/map.scss"
 import { AppSettings } from "@/settings/app-settings.types"
 import { WithinParameters } from "@/backend/types"
 import { Point } from "@/map_services"
+import "leaflet/dist/leaflet.css"
+import "leaflet.markercluster"
+import "leaflet.markercluster/dist/MarkerCluster.css"
+import "leaflet-providers"
 
 type ResultMapController = IController & {
     center: AppSettings["map_center"]

app/scripts/components/results-map.ts

@@ -1,16 +1,15 @@
 /** @format */
 import _ from "lodash"
-import angular, { IController, IScope, ITimeoutService } from "angular"
+import angular, { ICompileService, IController, IScope, ITimeoutService } from "angular"
 import settings from "@/settings"
 import { html, regescape } from "@/util"
 import { MapTab, RootScope } from "@/root-scope.types"
 import { AppSettings } from "@/settings/app-settings.types"
 import { MapRequestResult } from "@/backend/backend"
 import { MapResult } from "@/map_services"
 import { WithinParameters } from "@/backend/types"
-import { Marker, MarkerEvent, MarkerGroup } from "@/components/result-map"
+import type { Marker, MarkerEvent, MarkerGroup } from "@/components/result-map"
 import "@/components/korp-error"
-import "@/components/result-map"
 
 type ResultsMapController = IController & {
     active: boolean
@@ -22,6 +21,7 @@ type ResultsMapController = IController & {
 type ResultsMapScope = IScope & {
     center: AppSettings["map_center"]
     error?: string
+    hasComponent?: boolean
     selectedGroups: string[]
     markerGroups?: Record<string, MarkerGroup>
     numResults: number
@@ -57,14 +57,19 @@ angular.module("korpApp").component("resultsMap", {
                     </label>
                 </div>
             </div>
-            <result-map
-                center="center"
-                markers="markerGroups"
-                marker-callback="newKWICSearch"
-                selected-groups="selectedGroups"
-                rest-color="'#9b9fa5'"
-                use-clustering="useClustering"
-            ></result-map>
+            <div ng-if="hasComponent">
+                <dynamic-wrapper
+                    name="result-map"
+                    payload="{
+                        center: center,
+                        markers: markerGroups,
+                        markerCallback: newKWICSearch,
+                        selectedGroups: selectedGroups,
+                        restColor: '#9b9fa5',
+                        useClustering: useClustering,
+                    }"
+                ></dynamic-wrapper>
+            </div>
         </div>
     </div>`,
     bindings: {
@@ -81,19 +86,22 @@ angular.module("korpApp").component("resultsMap", {
             const $ctrl = this as ResultsMapController
 
             $scope.center = settings["map_center"]
+            $scope.hasComponent = undefined
             $scope.selectedGroups = []
             $scope.markerGroups = {}
             $scope.numResults = 0
             $scope.useClustering = false
 
+            const componentPromise = import(/* webpackChunkName: "map" */ "@/components/result-map")
             const rickshawPromise = import(/* webpackChunkName: "rickshaw" */ "rickshaw")
 
             $ctrl.$onInit = () => {
                 $ctrl.setProgress(true, 0)
 
-                Promise.all([rickshawPromise, $ctrl.promise]).then(
-                    ([Rickshaw, result]) => {
+                Promise.all([$ctrl.promise, componentPromise, rickshawPromise]).then(
+                    ([result, component, Rickshaw]) => {
                         $scope.$apply(($scope: ResultsMapScope) => {
+                            $scope.hasComponent = true
                             $ctrl.setProgress(false, 100)
                             $scope.numResults = 20
                             $scope.markerGroups = result ? getMarkerGroups(Rickshaw, result) : undefined
@@ -204,3 +212,34 @@ angular.module("korpApp").component("resultsMap", {
         },
     ],
 })
+
+// https://stackoverflow.com/a/53398323/1750365
+type DynamicWrapperScope = IScope & {
+    name: string
+    payload: Record<string, unknown>
+}
+angular.module("korpApp").component("dynamicWrapper", {
+    bindings: {
+        name: "@",
+        payload: "=?",
+    },
+    controller: [
+        "$compile",
+        "$element",
+        "$scope",
+        function ($compile: ICompileService, $element: JQLite, $scope: DynamicWrapperScope) {
+            const $ctrl = this
+            $ctrl.$onInit = () => {
+                const scope = $scope.$new()
+                for (const key in $ctrl.payload || {}) {
+                    ;(scope as unknown as Record<string, unknown>)[key] = $ctrl.payload[key]
+                }
+                const attrs = Object.keys($ctrl.payload)
+                    .map((key) => `${key}="${key}"`)
+                    .join(" ")
+                const template = `<${$ctrl.name} ${attrs}></${$ctrl.name}>`
+                $element.append($compile(template)(scope))
+            }
+        },
+    ],
+})