refactor(overlay): support an async and a sync loading of dependencies

adobe · Aug 11, 2020 · 4d0b2ef · 4d0b2ef
1 parent fc122b3
commit 4d0b2ef
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 12 deletions.
diff --git a/packages/overlay/README.md b/packages/overlay/README.md
@@ -20,6 +20,12 @@ import '@spectrum-web-components/overlay/active-overlay.js';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 ```
 
+The default of `<overlay-trigger>` will load various dependencies asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<overlay-trigger>` as follows:
+
+```
+import '@spectrum-web-components/overlay/sync/overlay-trigger.js';
+```
+
 When looking to leverage the `ActiveOverlay` or `OverlayTrigger` base class as a type and/or for extension purposes, do so via:
 
 ```

diff --git a/packages/overlay/package.json b/packages/overlay/package.json
@@ -30,7 +30,9 @@
         "./active-overlay": "./active-overlay.js",
         "./active-overlay.js": "./active-overlay.js",
         "./overlay-trigger": "./overlay-trigger.js",
-        "./overlay-trigger.js": "./overlay-trigger.js"
+        "./overlay-trigger.js": "./overlay-trigger.js",
+        "./sync/overlay-trigger": "./sync/overlay-trigger.js",
+        "./sync/overlay-trigger.js": "./sync/overlay-trigger.js"
     },
     "files": [
         "custom-elements.json",
@@ -44,6 +46,8 @@
         "./active-overlay.ts",
         "./overlay-trigger.js",
         "./overlay-trigger.ts",
+        "./sync/overlay-trigger.js",
+        "./sync/overlay-trigger.ts",
         "./stories/overlay-story-components.js",
         "./stories/overlay-story-components.ts"
     ],

diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
@@ -18,7 +18,11 @@ import {
     TemplateResult,
 } from 'lit-element';
 
-import { Placement, TriggerInteractions } from './overlay-types';
+import {
+    Placement,
+    TriggerInteractions,
+    OverlayOptions,
+} from './overlay-types';
 import { openOverlay } from './loader.js';
 import overlayTriggerStyles from './overlay-trigger.css.js';
 
@@ -83,17 +87,22 @@ export class OverlayTrigger extends LitElement {
         `;
     }
 
-    private async openOverlay(
+    public static openOverlay = async (
         target: HTMLElement,
+        interaction: TriggerInteractions,
         content: HTMLElement,
-        interaction: TriggerInteractions
-    ): Promise<() => void> {
-        return await openOverlay(target, interaction, content, {
+        options: OverlayOptions
+    ): Promise<() => void> => {
+        return await openOverlay(target, interaction, content, options);
+    };
+
+    private get overlayOptions(): OverlayOptions {
+        return {
             offset: this.offset,
             placement: this.placement,
             receivesFocus:
                 this.type && this.type !== 'inline' ? 'auto' : undefined,
-        });
+        };
     }
 
     private onTrigger(event: Event): void {
@@ -125,10 +134,11 @@ export class OverlayTrigger extends LitElement {
                 }
             }
             const { targetContent, clickContent } = this;
-            this.closeClickOverlay = await this.openOverlay(
+            this.closeClickOverlay = await OverlayTrigger.openOverlay(
                 targetContent,
+                this.type ? this.type : 'click',
                 clickContent,
-                this.type ? this.type : 'click'
+                this.overlayOptions
             );
         }
     }
@@ -145,10 +155,11 @@ export class OverlayTrigger extends LitElement {
                 overlayReady = res;
             });
             const { targetContent, hoverContent } = this;
-            this.closeHoverOverlay = await this.openOverlay(
+            this.closeHoverOverlay = await OverlayTrigger.openOverlay(
                 targetContent,
+                'hover',
                 hoverContent,
-                'hover'
+                this.overlayOptions
             );
             overlayReady();
         }

diff --git a/packages/overlay/sync/overlay-trigger.ts b/packages/overlay/sync/overlay-trigger.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { OverlayTrigger } from '../src/OverlayTrigger.js';
+import {
+    Overlay,
+    OverlayOptions,
+    TriggerInteractions,
+} from '@spectrum-web-components/overlay';
+import '../overlay-trigger.js';
+
+OverlayTrigger.openOverlay = async (
+    target: HTMLElement,
+    interaction: TriggerInteractions,
+    content: HTMLElement,
+    options: OverlayOptions
+): Promise<() => void> => {
+    return await Overlay.open(target, interaction, content, options);
+};
diff --git a/packages/overlay/tsconfig.json b/packages/overlay/tsconfig.json
@@ -4,7 +4,7 @@
         "composite": true,
         "rootDir": "./"
     },
-    "include": ["*.ts", "src/*.ts"],
+    "include": ["*.ts", "src/*.ts", "sync/*.ts"],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [{ "path": "../theme" }]
 }