Simplify instantiation of embedSDK. Eliminates factory.

README.md

@@ -13,7 +13,7 @@ The Looker JavaScript Embed SDK typically uses embed SSO to sign an embed url in
 A typical setup might look like this. In this case, a dashboard with an id of `11` is created inside a DOM element with the id `dashboard`. The `dashboard:run:start` and `dashboard:run:complete` events are used to update the state of the embedding window's UI, and a button with an id of `run` is scripted to send a `dashboard:run` message to the dashboard.
 
 ```javascript
-getSDKFactory().getSDK().init('looker.example.com', '/auth')
+getEmbedSDK().init('looker.example.com', '/auth')
 
 const setupDashboard = (connection) => {
   document.querySelector('#run').addEventListener('click', () => {
@@ -22,8 +22,7 @@ const setupDashboard = (connection) => {
 }
 
 try {
-  connection = await getSDKFactory()
-    .getSDK()
+  connection = await getEmbedSDK()
     .createDashboardWithId(11)
     .appendTo('#embed_container')
     .on('dashboard:run:start', () => updateStatus('Running'))
@@ -47,15 +46,15 @@ The Looker Embed SDK uses a fluent interface pattern. The construction of the em
 First initialize the SDK with address of the Looker server and the endpoint of the embedding application server that will create a signed Looker embedded login URL.
 
 ```javascript
-getSDKFactory().getSDK().init('looker.example.com', '/auth')
+getEmbedSDK().init('looker.example.com', '/auth')
 ```
 
 In this example, `/auth` is a backend service that must be implemented as described in the [Auth](#the-auth-endpoint) section.
 
 After the SDK is initialized, begin by creating the builder with an `id`. For example, to create a dashboard embed builder:
 
 ```javascript
-getSDKFactory().getSDK().createDashboardWithId(id)
+getEmbedSDK().createDashboardWithId(id)
 ```
 
 You can then add additional attributes to the builder to complete your setup:
@@ -139,14 +138,13 @@ The _frontend_ process using the Embed SDK entails:
 1. The embed SDK is initialized with the Looker host and the backend embed login signing endpoint:
 
 ```javascript
-getSDKFactory().getSDK().init('looker.example.com', '/auth')
+getEmbedSDK().init('looker.example.com', '/auth')
 ```
 
 2. Build the embed definition
 
 ```javascript
-const builder = getSDKFactory()
-  .getSDK()
+const builder = getEmbedSDK()
   .createDashboardWithId(11)
   .append('#embed-container')
   .build()
@@ -179,14 +177,12 @@ This section does not apply to cookieless embed. See the [cookieless embed](#coo
 The Auth endpoint can be configured further, allowing custom Request Headers, as well as CORS support by passing an options object to the `init` method
 
 ```javascript
-getSDKFactory()
-  .getSDK()
-  .init('looker.example.com', {
-    url: 'https://api.acme.com/looker/auth',
-    headers: [{ name: 'Foo Header', value: 'Foo' }],
-    params: [{ name: 'foo', value: 'bar' }],
-    withCredentials: true, // Needed for CORS requests to Auth endpoint include Http Only cookie headers
-  })
+getEmbedSDK().init('looker.example.com', {
+  url: 'https://api.acme.com/looker/auth',
+  headers: [{ name: 'Foo Header', value: 'Foo' }],
+  params: [{ name: 'foo', value: 'bar' }],
+  withCredentials: true, // Needed for CORS requests to Auth endpoint include Http Only cookie headers
+})
 ```
 
 ### Node helper
@@ -433,16 +429,14 @@ export async function generateEmbedTokens(userAgent, user) {
 
 ### Initializing the Looker SDK in the frontend
 
-Cookieless embed is initialized by calling `getSDKFactory().getSDK().initCookieless` passing in the Looker host value and the the urls of the backend endpoints described previously. Once a Looker embed IFRAME is created it will communicate with the Embed SDK running in the host application and use the callbacks appropriately.
+Cookieless embed is initialized by calling `getEmbedSDK().initCookieless` passing in the Looker host value and the the urls of the backend endpoints described previously. Once a Looker embed IFRAME is created it will communicate with the Embed SDK running in the host application and use the callbacks appropriately.
 
 ```javascript
-getSDKFactory()
-  .getSDK()
-  .initCookieless(
-    'looker.example.com',
-    '/acquire-embed-session',
-    '/generate-embed-tokens'
-  )
+getEmbedSDK().initCookieless(
+  'looker.example.com',
+  '/acquire-embed-session',
+  '/generate-embed-tokens'
+)
 ```
 
 ### Embed domain allow list
@@ -645,7 +639,7 @@ const pagePropertiesChangedHandler = (
 }
 
 
-getFactory().getSDK().createDashboardWithId(runtimeConfig.dashboardId)
+getEmbedSDK().createDashboardWithId(runtimeConfig.dashboardId)
   .appendTo('#dashboard')
   .on('page:properties:changed', (event: PagePropertiesChangedEvent) => {
     pagePropertiesChangedHandler(event, 'dashboard')
@@ -657,8 +651,7 @@ getFactory().getSDK().createDashboardWithId(runtimeConfig.dashboardId)
 The Embed SDK also contains a convenience method to add this functionality for you. Example:
 
 ```javascript
-getFactory()
-  .getSDK()
+getEmbedSDK()
   .createDashboardWithId('42')
   .withDynamicIFrameHeight()
   .appendTo('#dashboard')
@@ -671,8 +664,7 @@ getFactory()
 Looker has the capability to display individual tile visualizations in full screen mode. This feature works for embedded IFRAMEs but the `fullscreen` feature MUST be added to the containing IFRAME. Version 1.8.2 of the Embed SDK was updated to allow features to be added. The following example shows how to enable support for full screen mode.
 
 ```javascript
-const connection = await getFactory()
-  .getSDK()
+const connection = await getEmbedSDK()
   .createDashboardWithId(runtimeConfig.dashboardId)
   // Allow fullscreen tile visualizations
   .withAllowAttr('fullscreen')
@@ -689,8 +681,7 @@ const connection = await getFactory()
 Users have the capability of opening dialogs from a dashboard tile. One downside of opening the dialogs is that unexpected scrolling can occur. With Looker 23.6+ it is now possible to mitigate the scrolling using the Embed SDK. Example:
 
 ```javascript
-const connection = await getFactory()
-  .getSDK()
+const connection = await getEmbedSDK()
   .createDashboardWithId(runtimeConfig.dashboardId)
   // Scrolls the top of the IFRAME into view when drilling
   .withDialogScroll()
@@ -721,7 +712,7 @@ In order to take advantage of the new features (loading different Looker dashboa
 LookerEmbedSDK.init('looker.example.com', '/auth')
 
 // Version 2.0.x
-getSDKFactory().getSDK().init('looker.example.com', '/auth')
+getEmbedSDK().init('looker.example.com', '/auth')
 ```
 
 ### Creating and interacting with an IFRAME
@@ -733,32 +724,25 @@ try {
       .createDashboardWithId('42)
       .withAllowAttr('fullscreen')
       .appendTo('#dashboard')
-      .on('dashboard:loaded', () => updateStatus('#dashboard-state', 'Loaded'))
+      .on('dashboard:loaded', () => updateStatus('Loaded'))
       .build()
       .connect()
-
-
    dashboard.run()
-
 } catch(error) {
-  ...
+  // Error handling
 }
 
 // Version 2.0.x
 try {
-  const connection = getSDKFactory().getSDK()
+  const connection = getEmbedSDK()
       .createDashboardWithId('42)
       .withAllowAttr('fullscreen')
       .appendTo('#embed_container')
-      .on('dashboard:loaded', () => updateStatus('#dashboard-state', 'Loaded'))
+      .on('dashboard:loaded', () => updateStatus('Loaded'))
       .build()
       .connect()
-
-
    connection.asDashboardConnection().run()
-
 } catch(error) {
-  ...
+  // Error handling
 }
-
 ```

demo/demo_multi_frame.ts

@@ -33,7 +33,7 @@ import type {
   ILookerEmbedExplore,
   ILookerEmbedLook,
 } from '../src/index'
-import { getSDKFactory } from '../src/index'
+import { getEmbedSDK } from '../src/index'
 import type { RuntimeConfig } from './demo_config'
 import {
   getConfiguration,
@@ -358,8 +358,7 @@ const renderDashboard = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.showDashboard) {
     document.querySelector<HTMLDivElement>('#demo-dashboard')!.style.display =
       ''
-    getSDKFactory()
-      .getSDK()
+    getEmbedSDK()
       .createDashboardWithId(runtimeConfig.dashboardId)
       // When true scrolls the top of the IFRAME into view
       .withDialogScroll(runtimeConfig.useDynamicHeights)
@@ -433,8 +432,7 @@ const renderLook = (runtimeConfig: RuntimeConfig) => {
   // Create an embedded Look
   if (runtimeConfig.showLook) {
     document.querySelector<HTMLDivElement>('#demo-look')!.style.display = ''
-    getSDKFactory()
-      .getSDK()
+    getEmbedSDK()
       .createLookWithId(parseInt(runtimeConfig.lookId, 10))
       // Append to the #look element
       .appendTo('#look')
@@ -477,8 +475,7 @@ const renderExplore = (runtimeConfig: RuntimeConfig) => {
   // Create an embedded Explore
   if (runtimeConfig.showExplore) {
     document.querySelector<HTMLDivElement>('#demo-explore')!.style.display = ''
-    getSDKFactory()
-      .getSDK()
+    getEmbedSDK()
       .createExploreWithId(runtimeConfig.exploreId)
       // Append to the #explore element
       .appendTo('#explore')
@@ -520,8 +517,7 @@ const renderExtension = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.showExtension) {
     document.querySelector<HTMLDivElement>('#demo-extension')!.style.display =
       ''
-    getSDKFactory()
-      .getSDK()
+    getEmbedSDK()
       .createExtensionWithId(runtimeConfig.extensionId)
       // Append to the #extension element
       .appendTo('#extension')
@@ -554,16 +550,14 @@ const renderExtension = (runtimeConfig: RuntimeConfig) => {
 const initializeEmbedSdk = (runtimeConfig: RuntimeConfig) => {
   if (runtimeConfig.useCookieless) {
     // Use cookieless embed
-    getSDKFactory()
-      .getSDK()
-      .initCookieless(
-        runtimeConfig.lookerHost,
-        '/acquire-embed-session',
-        '/generate-embed-tokens'
-      )
+    getEmbedSDK().initCookieless(
+      runtimeConfig.lookerHost,
+      '/acquire-embed-session',
+      '/generate-embed-tokens'
+    )
   } else {
     // Use SSO embed
-    getSDKFactory().getSDK().init(runtimeConfig.lookerHost, '/auth')
+    getEmbedSDK().init(runtimeConfig.lookerHost, '/auth')
   }
 }
 

demo/demo_single_frame.ts

@@ -32,7 +32,7 @@ import type {
   PageChangedEvent,
   SessionStatus,
 } from '../src/index'
-import { getSDKFactory } from '../src/index'
+import { getEmbedSDK } from '../src/index'
 import type { RuntimeConfig } from './demo_config'
 import {
   getConfiguration,
@@ -441,7 +441,7 @@ const createEmbed = (runtimeConfig: RuntimeConfig, sdk: ILookerEmbedSDK) => {
  * document to the embedded content. The auth endpoint is documented in README.md.
  */
 const initializeEmbedSdk = (runtimeConfig: RuntimeConfig) => {
-  const sdk: ILookerEmbedSDK = getSDKFactory().getSDK()
+  const sdk: ILookerEmbedSDK = getEmbedSDK()
   if (runtimeConfig.useCookieless) {
     // Use cookieless embed
     sdk.initCookieless(

docs/classes/EmbedClient.html

@@ -4,7 +4,7 @@
 </div><dl class="tsd-comment-tags"><dt>deprecated</dt><dd><p>Use the following instead</p>
 <ul>
 <li>```typescript
- const client = getSDKFactory().getSDK()
+ const client = getEmbedSDK()
    .createDashboardWithId(&#39;42&#39;)
    .build()</li>
 </ul>

docs/classes/LookerEmbedDashboard.html

@@ -2,7 +2,7 @@
 <p>Client that communicates with an embedded Looker dashboard. Messages are documented
 <a href="https://docs.looker.com/r/sdk/events">here</a></p>
 </div><dl class="tsd-comment-tags"><dt>deprecated</dt><dd><p>Use the following instead</p>
-<pre><code class="language-typescript"><span class="hl-1">    </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">connection</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">getSDKFactory</span><span class="hl-1">().</span><span class="hl-0">getSDK</span><span class="hl-1">()</span><br/><span class="hl-1">      .</span><span class="hl-0">createDashboardWithId</span><span class="hl-1">(</span><span class="hl-2">&#39;42&#39;</span><span class="hl-1">)</span><br/><span class="hl-1">      .</span><span class="hl-0">build</span><span class="hl-1">()</span><br/><span class="hl-1">      .</span><span class="hl-0">connect</span><span class="hl-1">()</span><br/><span class="hl-1">    </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">dashboard</span><span class="hl-1"> = </span><span class="hl-4">connection</span><span class="hl-1">.</span><span class="hl-0">asDashboardConnection</span><span class="hl-1">()</span>
+<pre><code class="language-typescript"><span class="hl-1">    </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">connection</span><span class="hl-1"> = </span><span class="hl-5">await</span><span class="hl-1"> </span><span class="hl-0">getEmbedSDK</span><span class="hl-1">()</span><br/><span class="hl-1">      .</span><span class="hl-0">createDashboardWithId</span><span class="hl-1">(</span><span class="hl-2">&#39;42&#39;</span><span class="hl-1">)</span><br/><span class="hl-1">      .</span><span class="hl-0">build</span><span class="hl-1">()</span><br/><span class="hl-1">      .</span><span class="hl-0">connect</span><span class="hl-1">()</span><br/><span class="hl-1">    </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">dashboard</span><span class="hl-1"> = </span><span class="hl-4">connection</span><span class="hl-1">.</span><span class="hl-0">asDashboardConnection</span><span class="hl-1">()</span>
 </code></pre>
 </dd></dl></div></section><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><a href="LookerEmbedBase.html" class="tsd-signature-type" data-tsd-kind="Class">LookerEmbedBase</a><ul class="tsd-hierarchy"><li><span class="target">LookerEmbedDashboard</span></li></ul></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#edit" class="tsd-kind-icon">edit</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#loadDashboard" class="tsd-kind-icon">load<wbr/>Dashboard</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#openScheduleDialog" class="tsd-kind-icon">open<wbr/>Schedule<wbr/>Dialog</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#run" class="tsd-kind-icon">run</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="LookerEmbedDashboard.html#send" class="tsd-kind-icon">send</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="LookerEmbedDashboard.html#sendAndReceive" class="tsd-kind-icon">send<wbr/>And<wbr/>Receive</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#setOptions" class="tsd-kind-icon">set<wbr/>Options</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#stop" class="tsd-kind-icon">stop</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="LookerEmbedDashboard.html#updateFilters" class="tsd-kind-icon">update<wbr/>Filters</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="edit" class="tsd-anchor"></a><h3 class="tsd-anchor-link">edit<a href="#edit" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">edit<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/looker-open-source/embed-sdk/blob/master/src/dashboard_client.ts#L69">src/dashboard_client.ts:69</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
 <p>Convenience method for sending an edit message to the embedded dashboard.</p>