Beachten Sie, dass Sie sich die Looker-Dokumentation ansehen. Dokumentation zu Looker Studio finden Sie unter https://support.google.com/looker-studio.

React- und JavaScript-Codebeispiele für das Extension Framework

Diese Seite enthält in React und JavaScript geschriebene Codebeispiele für gängige Funktionen, die Sie in Ihren Erweiterungen verwenden können.

Looker Extension SDK verwenden

Erweiterungen müssen eine Verbindung zum Looker-Host herstellen. In React wird dies durch Einbinden der Erweiterung in eine ExtensionProvider40-Komponente erreicht. Diese Komponente stellt eine Verbindung mit dem Looker-Host her und stellt der Erweiterung das Looker Extension SDK und das Looker SDK zur Verfügung.

import React from 'react'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { DemoCoreSDK } from './DemoCoreSDK'

export const App = () => {
 return (
   <ExtensionProvider40 chattyTimeout={-1}>
     <DemoCoreSDK />
   </ExtensionProvider40>
 )
}

Hintergrundinformationen zu Erweiterungsanbietern

Anbieter von Erweiterungen stellen Erweiterungen das Looker-Erweiterungs-SDK und die SDK-API zur Verfügung. Seit der Erstellung des Erweiterungs-Frameworks wurden verschiedene Versionen des Erweiterungsanbieters erstellt. In diesem Abschnitt wird der Verlauf von Erweiterungsanbietern erläutert und es wird erklärt, warum ExtensionProvider40 der empfohlene Anbieter ist.

Der erste Anbieter der Erweiterung war ExtensionProvider, der die Looker SDKs 3.1 und 4.0 zur Verfügung stellte. Der Nachteil war, dass das endgültige Produktionspaket mit beiden SDKs größer wurde.

Anschließend wurde ExtensionProvider2 erstellt. Sie wurde erstellt, weil es für eine Erweiterung nicht sinnvoll war, beide SDKs zu verwenden und den Entwickler zu zwingen, sich für eines der beiden SDKs zu entscheiden. Leider führten dies jedoch immer noch dazu, dass beide SDKs in die Größe des endgültigen Produktions-Bundles einbezogen wurden.

Als SDK 4.0 zu Google Analytics migriert wurde, wurde ExtensionProvider40 erstellt. Der Vorteil von ExtensionProvider40 besteht darin, dass der Entwickler nicht auswählen muss, welches SDK verwendet werden soll, da SDK 4.0 die einzige verfügbare Version ist. Da SDK 3.1 nicht im endgültigen Bundle enthalten ist, hat dies den Vorteil, dass die Größe des Bundles reduziert wird.

Wenn Sie Funktionen aus dem Looker Extension SDK hinzufügen möchten, benötigen Sie zuerst einen Verweis auf das SDK. Dies kann entweder vom Anbieter oder global erfolgen. Dann können Sie SDK-Funktionen wie bei jeder JavaScript-Anwendung aufrufen.

So greifen Sie über den Anbieter auf das SDK zu:

  import { ExtensionContext40 } from '@looker/extension-sdk-react'

  export const Comp1 = () => {
    const extensionContext = useContext(
      ExtensionContext40
    )
    const { extensionSDK, coreSDK } = extensionContext

Gehen Sie so vor, um global auf das SDK zuzugreifen (die Erweiterung muss vor dem Aufruf initialisiert werden):

    const coreSDK = getCoreSDK()

Jetzt können Sie das SDK wie jede andere JavaScript-Anwendung verwenden:

  const GetLooks = async () => {
    try {
      const looks = await sdk.ok(sdk.all_looks('id'))
      // process looks
      . . .
    } catch (error) {
      // do error handling
      . . .
    }
}

An anderer Stelle in der Looker-Instanz navigieren

Da die Erweiterung in einem Sandbox-iFrame ausgeführt wird, können Sie nicht zu einer anderen Stelle innerhalb der Looker-Instanz wechseln, indem Sie das window.location-Objekt des übergeordneten Elements aktualisieren. Sie können das Looker Extension SDK verwenden.

Für diese Funktion ist die Berechtigung navigation erforderlich.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  extensionSDK.updateLocation('/browse')

Öffnen eines neuen Browserfensters

Da die Erweiterung in einem Sandbox-iFrame ausgeführt wird, können Sie das übergeordnete Fenster nicht verwenden, um ein neues Browserfenster zu öffnen. Es ist möglich, mit dem Looker Extension SDK ein Browserfenster zu öffnen.

Für diese Funktion ist entweder die Berechtigung new_window erforderlich, um ein neues Fenster zu einem Standort in der aktuellen Looker-Instanz zu öffnen, oder die Berechtigung new_window_external_urls, um ein neues Fenster zu öffnen, das auf einem anderen Host ausgeführt wird.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  extensionSDK.openBrowserWindow('/browse', '_blank')
. . .
  extensionSDK.openBrowserWindow('https://docs.looker.com/reference/manifest-params/application#entitlements', '_blank')

Routing und Deeplinks

Folgendes gilt für React-basierte Erweiterungen.

Die Komponenten ExtensionProvider, ExtensionProvider2 und ExtensionProvider40 erstellen automatisch einen React-Router namens MemoryRouter, den Sie verwenden können. Versuchen Sie nicht, ein BrowserRouter-Objekt zu erstellen, da es in iFrames, die in einer Sandbox ausgeführt werden, nicht funktioniert. Versuche nicht, eine HashRouter zu erstellen, da sie in Sandbox-iFrames für die nicht auf Chromium basierende Version des Microsoft Edge-Browsers nicht funktioniert.

Wenn MemoryRouter und Sie react-router in Ihrer Erweiterung verwenden, synchronisiert das Erweiterungs-Framework den Router der Erweiterung automatisch mit dem Looker-Hostrouter. Das bedeutet, dass die Erweiterung beim Aktualisieren der Seite über Klicks auf die Schaltflächen „Zurück“ und „Vorwärts“ im Browser sowie über die aktuelle Route informiert wird. Das bedeutet auch, dass die Erweiterung automatisch Deeplinks unterstützen sollte. In den Erweiterungsbeispielen wird die Verwendung von react-router beschrieben.

Kontextdaten der Erweiterung

Kontextdaten des Erweiterungs-Frameworks dürfen nicht mit React-Kontexten verwechselt werden.

Erweiterungen können Kontextdaten unter allen Nutzern einer Erweiterung freigeben. Die Kontextdaten können für Daten verwendet werden, die sich nicht häufig ändern und keine besonderen Sicherheitsanforderungen haben. Gehen Sie beim Schreiben der Daten vorsichtig vor, da die Daten nicht gesperrt sind und der letzte Schreibvorgang erfolgreich ist. Die Kontextdaten stehen der Erweiterung sofort beim Start zur Verfügung. Das Looker Extension SDK bietet Funktionen, mit denen die Kontextdaten aktualisiert und aktualisiert werden können.

Die maximale Größe der Kontextdaten beträgt ungefähr 16 MB. Kontextdaten werden in einem JSON-String serialisiert, was auch berücksichtigt werden muss, wenn Sie Kontextdaten für Ihre Erweiterung verwenden.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  // Get loaded context data. This will reflect any updates that have
  // been made by saveContextData.
  let context = await extensionSDK.getContextData()

. . .

  // Save context data to Looker server.
  context = await extensionSDK.saveContextData(context)

. . .

  // Refresh context data from Looker server.
  context = await extensionSDK.refreshContextData()

Nutzerattribute

Das Looker Extension SDK bietet eine API für den Zugriff auf Looker-Nutzerattribute. Es gibt zwei Zugriffsarten für Nutzerattribute:

Auf einen Bereich beschränkt: Ist mit der Erweiterung verknüpft. Ein auf einen Bereich reduziertes Nutzerattribut wird der Erweiterung mit einem Namespace versehen und das Nutzerattribut muss in der Looker-Instanz definiert werden, bevor es verwendet werden kann. Wenn Sie einem Nutzerattribut einen Namespace zuweisen möchten, stellen Sie dem Attributnamen den Erweiterungsnamen voran. Alle Bindestriche und „::“-Zeichen im Erweiterungsnamen müssen durch einen Unterstrich ersetzt werden, da Bindestriche und Doppelpunkte in Nutzerattributnamen nicht verwendet werden können.

Beispiel: Für ein auf einen Bereich reduziertes Nutzerattribut namens my_value, das mit der Erweiterungs-ID my-extension::my-extension verwendet wird, muss als Nutzerattributname my_extension_my_extension_my_value definiert sein. Nach der Definition kann das Nutzerattribut von der Erweiterung gelesen und aktualisiert werden.
Global: Dies sind globale Nutzerattribute, die schreibgeschützt sind. Ein Beispiel hierfür ist das Nutzerattribut locale.

Im Folgenden finden Sie eine Liste von API-Aufrufen für Nutzerattribute:

userAttributeGetItem: Liest ein Nutzerattribut. Es kann ein Standardwert definiert werden. Dieser wird verwendet, wenn für den Nutzer kein Wert für das Nutzerattribut vorhanden ist.
userAttributeSetItem: Speichert ein Nutzerattribut für den aktuellen Nutzer. Schlägt bei globalen Nutzerattributen fehl. Der gespeicherte Wert ist nur für den aktuellen Nutzer sichtbar.
userAttributeResetItem: Setzt ein Nutzerattribut für den aktuellen Nutzer auf den Standardwert zurück. Schlägt bei globalen Nutzerattributen fehl.

Für den Zugriff auf Nutzerattribute musst du die Attributnamen in den Berechtigungen global_user_attributes und/oder scoped_user_attributes angeben. In der LookML-Projektmanifestdatei würden Sie beispielsweise Folgendes hinzufügen:

  entitlements: {
    scoped_user_attributes: ["my_value"]
    global_user_attributes: ["locale"]
  }

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read global user attribute
  const locale = await extensionSDK.userAttributeGetItem('locale')

  // Read scoped user attribute
  const value = await extensionSDK.userAttributeGetItem('my_value')

  // Update scoped user attribute
  const value = await extensionSDK.userAttributeSetItem('my_value', 'abcd1234')

  // Reset scoped user attribute
  const value = await extensionSDK.userAttributeResetItem('my_value')

Lokale Speicherung

Sandbox-iFrames lassen keinen Zugriff auf den lokalen Browserspeicher zu. Mit dem Looker Extension SDK kann eine Erweiterung im lokalen Speicher des übergeordneten Fensters lesen und schreiben. Der lokale Speicher wird der Erweiterung als Namespace zugewiesen, d. h., er kann den lokalen Speicher, der vom übergeordneten Fenster oder anderen Erweiterungen erstellt wurde, nicht lesen.

Für die Verwendung des lokalen Speichers ist die Berechtigung local_storage erforderlich.

Die localhost API der Erweiterung ist asynchron im Gegensatz zur synchronen lokalen Speicher-API des Browsers.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read from local storage
  const value = await extensionSDK.localStorageGetItem('my_storage')

  // Write to local storage
  await extensionSDK.localStorageSetItem('my_storage', 'abcedefh')

  // Delete item from local storage
  await extensionSDK.localStorageRemoveItem('my_storage')

Seitentitel aktualisieren

Der aktuelle Seitentitel kann durch Erweiterungen aktualisiert werden. Zum Ausführen dieser Aktion sind keine Berechtigungen erforderlich.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  extensionSDK.updateTitle('My Extension Title')

In die Systemzwischenablage schreiben

Sandbox-iFrames erlauben keinen Zugriff auf die Systemzwischenablage. Mit dem Looker Extension SDK kann eine Erweiterung Text in die Systemzwischenablage schreiben. Aus Sicherheitsgründen darf die Erweiterung nicht aus der Systemzwischenablage lesen.

Zum Schreiben in die Systemzwischenablage benötigen Sie die Berechtigung use_clipboard.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

    // Write to system clipboard
    try {
      await extensionSDK.clipboardWrite(
        'My interesting information'
      )
      . . .
    } catch (error) {
      . . .
    }

Dashboards, Looks und Explores einbetten

Das Erweiterungs-Framework unterstützt das Einbetten von Dashboards, Looks und Explores.

Die Berechtigung use_embeds ist erforderlich. Wir empfehlen, zum Einbetten von Inhalten das Looker JavaScript Embed SDK zu verwenden. Weitere Informationen finden Sie in der Dokumentation zum Embed SDK.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const canceller = (event: any) => {
    return { cancel: !event.modal }
  }

  const updateRunButton = (running: boolean) => {
    setRunning(running)
  }

  const setupDashboard = (dashboard: LookerEmbedDashboard) => {
    setDashboard(dashboard)
  }

  const embedCtrRef = useCallback(
    (el) => {
      const hostUrl = extensionContext?.extensionSDK?.lookerHostData?.hostUrl
      if (el && hostUrl) {
        el.innerHTML = ''
        LookerEmbedSDK.init(hostUrl)
        const db = LookerEmbedSDK.createDashboardWithId(id as number)
          .withNext()
          .appendTo(el)
          .on('dashboard:loaded', updateRunButton.bind(null, false))
          .on('dashboard:run:start', updateRunButton.bind(null, true))
          .on('dashboard:run:complete', updateRunButton.bind(null, false))
          .on('drillmenu:click', canceller)
          .on('drillmodal:explore', canceller)
          .on('dashboard:tile:explore', canceller)
          .on('dashboard:tile:view', canceller)
          .build()
          .connect()
          .then(setupDashboard)
          .catch((error: Error) => {
            console.error('Connection error', error)
          })
      }
    },
    []
  )

  return (&#60;EmbedContainer ref={embedCtrRef} /&#62;)

In den Erweiterungsbeispielen werden Komponenten mit benutzerdefinierten Stilen verwendet, um dem generierten iFrame einen einfachen Stil bereitzustellen. Beispiel:

import styled from "styled-components"

export const EmbedContainer = styled.div`
  width: 100%;
  height: 95vh;
  & > iframe {
    width: 100%;
    height: 100%;
  }

Auf externe API-Endpunkte zugreifen

Das Erweiterungs-Framework bietet zwei Methoden für den Zugriff auf externe API-Endpunkte:

Server-Proxy: Greifen Sie über den Looker-Server auf den Endpunkt zu. Mit diesem Mechanismus können Client-IDs und geheime Schlüssel vom Looker-Server sicher festgelegt werden.
Abruf-Proxy – greift über den Browser des Nutzers auf den Endpunkt zu. Der Proxy ist die Looker-Benutzeroberfläche.

In beiden Fällen musst du den externen API-Endpunkt in der Erweiterung Berechtigung external_api_urls angeben.

Server-Proxy

Das folgende Beispiel zeigt die Verwendung des Server-Proxys, um ein Zugriffstoken zur Verwendung durch den Abruf-Proxy abzurufen. Die Client-ID und das Secret müssen als Nutzerattribute für die Erweiterung definiert sein. Normalerweise wird bei der Einrichtung des Nutzerattributs die Client-ID oder das Secret als Standardwert verwendet.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  const requestBody = {
    client_id: extensionSDK.createSecretKeyTag('my_client_id'),
    client_secret: extensionSDK.createSecretKeyTag('my_client_secret'),
  },
  try {
    const response = await extensionSDK.serverProxy(
      'https://myaccesstokenserver.com/access_token',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      }
    )
    const { access_token, expiry_date } = response.body
. . .
  } catch (error) {
    // Error handling
    . . .
  }

Der Name des Nutzerattributs muss der Erweiterung zugeordnet werden. Bindestriche müssen durch Unterstriche und ::-Zeichen durch einen einzelnen Unterstrich ersetzt werden.

Lautet der Name Ihrer Erweiterung beispielsweise my-extension::my-extension, müssen für das vorherige Beispiel folgende Nutzerattribute definiert werden:

my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'

Abruf-Proxy

Im folgenden Beispiel wird die Verwendung des Fetch-Proxys veranschaulicht. Dabei wird das Zugriffstoken aus dem vorherigen Server-Proxy-Beispiel verwendet.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  try {
    const response = await extensionSDK.fetchProxy(
      'https://myaccesstokenserver.com/myendpoint',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
        body: JSON.stringify({
          some_value: someValue,
          another_value: anotherValue,
        }),
      }
    )
    // Handle success

. . .

  } catch (error) {
    // Handle failure

. . .

  }

OAuth-Integration

Das Erweiterungs-Framework unterstützt die Integration mit OAuth-Anbietern. OAuth kann verwendet werden, um ein Zugriffstoken für den Zugriff auf eine bestimmte Ressource abzurufen, z. B. ein Google Tabellen-Dokument.

Du musst den OAuth-Server-Endpunkt in der Berechtigung extension oauth2_urls angeben. Möglicherweise musst du auch zusätzliche URLs in der Berechtigung external_api_urls angeben.

Die Erweiterungs-Frameworks unterstützen die folgenden Abläufe:

Impliziter Ablauf
Autorisierungscode-Zuweisungstyp mit geheimem Schlüssel
PKCE-Code-Abfrage und -Verifizierung

Im Allgemeinen wird ein untergeordnetes Fenster geöffnet, das eine OAuth-Serverseite lädt. Der OAuth-Server authentifiziert den Nutzer und leitet den Nutzer mit zusätzlichen Details zurück zum Looker-Server, die zum Abrufen eines Zugriffstokens verwendet werden können.

Impliziter Fluss:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

    const response = await extensionSDK.oauth2Authenticate(
      'https://accounts.google.com/o/oauth2/v2/auth',
      {
        client_id: GOOGLE_CLIENT_ID!,
        scope: GOOGLE_SCOPES,
        response_type: 'token',
      }
    )
    const { access_token, expires_in } = response

Autorisierungscode-Berechtigungstyp mit geheimem Schlüssel:

  const authenticateParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    response_type: 'code',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://github.com/login/oauth/authorize',
    authenticateParameters,
   'GET'
  )
  const exchangeParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    code: response.code,
    client_secret: extensionSDK.createSecretKeyTag('github_secret_key'),
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://github.com/login/oauth/access_token',
    exchangeParameters
  )
  const { access_token, error_description } = codeExchangeResponse

PKCE-Code-Abfrage und -Verifizierer:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const authRequest: Record&#60;string, string&#62; = {
    client_id: AUTH0_CLIENT_ID!,
    response_type: 'code',
    scope: AUTH0_SCOPES,
    code_challenge_method:  'S256',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://sampleoauthserver.com/authorize',
    authRequest,
    'GET'
  )
  const exchangeRequest: Record&#60;string, string&#62; = {
    grant_type: 'authorization_code',
    client_id: AUTH0_CLIENT_ID!,
    code: response.code,
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://sampleoauthserver.com/login/oauth/token',
    exchangeRequest
  )
  const { access_token, expires_in } = codeExchangeResponse

Spartanisch

Spartan bezieht sich auf eine Methode, bei der die Looker-Instanz als Umgebung verwendet wird, um Erweiterungen und Erweiterungen nur einer bestimmten Gruppe von Nutzern zur Verfügung zu stellen. Ein spartanischer Nutzer, der zu einer Looker-Instanz wechselt, sieht den vom Looker-Administrator konfigurierten Anmeldevorgang. Sobald der Nutzer authentifiziert ist, wird ihm gemäß seinem landing_page-Nutzerattribut eine Erweiterung angezeigt, wie im Folgenden beschrieben. Der Nutzer kann nur auf Erweiterungen und nicht auf andere Teile von Looker zugreifen. Wenn der Nutzer Zugriff auf mehrere Erweiterungen hat, steuern die Erweiterungen, ob er über extensionSDK.updateLocation die anderen Erweiterungen aufrufen kann. Es gibt eine spezifische Methode im Looker Extension SDK, mit der sich Nutzer von der Looker-Instanz abmelden können.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  // Navigate to another extension
  extensionSDK.updateLocation('/spartan/another::extension')

. . .
  // Logout
  extensionSDK.spartanLogout()

Spartanische Nutzer definieren

Um einen spartanischen Nutzer zu definieren, müssen Sie eine Gruppe namens „Nur Erweiterungen“ erstellen.

Nachdem die Gruppe „Nur Erweiterungen“ erstellt wurde, gehen Sie im Bereich Admin von Looker zur Seite Benutzerattribute und bearbeiten Sie das Nutzerattribut landing_page. Wählen Sie den Tab Werte gruppieren aus und fügen Sie die Gruppe „Nur Erweiterungen“ hinzu. Der Wert sollte auf /spartan/my_extension::my_extension/ festgelegt werden, wobei my_extension::my_extension die ID Ihrer Erweiterung ist. Wenn sich der Nutzer nun anmeldet, wird er zur festgelegten Erweiterung weitergeleitet.

Code-Aufteilung

Bei der Codeaufteilung wird Code nur dann angefordert, wenn er erforderlich ist. In der Regel werden Code-Chunks React-Routen zugeordnet, wobei jede Route einen eigenen Code-Chunk erhält. In React werden dies mit den Komponenten Suspense und React.lazy ausgeführt. Während der Code-Chunk geladen wird, zeigt die Komponente Suspense eine Fallback-Komponente an. React.lazy ist für das Laden des Code-Chunks verantwortlich.

Codeaufteilung einrichten:

import { AsyncComp1 as Comp1 } from './Comp1.async'
import { AsyncComp1 as Comp2 } from './Comp2.async'

. . .

                <Suspense fallback={<div>Loading...</div>}>
                  <Switch>
                      <Route path="/comp1">
                        <Comp1 />
                      </Route>
                      <Route path="/comp2">
                        <Comp2 />
                      </Route>
                  </Switch>
                <Suspense>

Die Lazy Loading-Komponente wird so implementiert:

import { lazy } from 'react'

const Comp1 = lazy(
 async () => import(/* webpackChunkName: "comp1" */ './Comp1')
)

export const AsyncComp1 = () => &#60;Home />

Die Komponente wird wie folgt implementiert. Die Komponente muss als Standardkomponente exportiert werden:

const Comp1 = () => {
  return (
    &#60;div&#62;Hello World&#60;/div&#62;
  )
}

export default Comp1

Baumschütteln

Obwohl Looker SDKs derzeit Baum-Shaking unterstützen, muss diese Funktion noch verbessert werden. Wir überarbeiten unsere SDKs kontinuierlich, um die Unterstützung für das Schütteln des Baums zu verbessern. Bei einigen dieser Änderungen müssen Sie möglicherweise Ihren Code refaktorieren, um von den Vorteilen zu profitieren. Sollte dies jedoch erforderlich sein, wird dies in den Versionshinweisen dokumentiert.

Um das Tree Shaking nutzen zu können, muss das verwendete Modul als Esmodule exportiert werden und die importierten Funktionen dürfen keine Nebeneffekte enthalten. Das Looker SDK für TypeScript/JavaScript, die Looker SDK-Laufzeitbibliothek, die Looker-UI-Komponenten, das Looker Extension SDK und das Extension SDK for React erfüllen diese Anforderungen.

Verwenden Sie in einer Erweiterung das Looker SDK 4.0 und entweder die Komponente ExtensionProvider2 oder ExtensionProvider40 aus dem Extension SDK for React.

Mit dem folgenden Code wird der Erweiterungsanbieter eingerichtet. Sie müssen dem Anbieter mitteilen, welches SDK Sie verwenden möchten:

import { MyExtension } from './MyExtension'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { Looker40SDK } from '@looker/sdk/lib/4.0/methods'
import { hot } from 'react-hot-loader/root'

export const App = hot(() => {

  return (
    &#60;ExtensionProvider2 type={Looker40SDK}&#62;
      &#60;MyExtension /&#62;
    &#60;/ExtensionProvider2&#62;
  )
})

Verwenden Sie in Ihrer Erweiterung nicht den folgenden Importstil:

import * as lookerComponents from `@looker/components`

Das vorherige Beispiel enthält alles aus dem Modul. Importieren Sie stattdessen nur die Komponenten, die Sie tatsächlich benötigen. Beispiel:

import { Paragraph }  from `@looker/components`

Glossar

Code-Splitting: Eine Technik zum Lazy Loading von JavaScript, bis es tatsächlich benötigt wird. Idealerweise sollte das anfangs geladene JavaScript-Bundle so klein wie möglich sein. Dies kann durch Codeaufteilung erreicht werden. Funktionen, die nicht sofort benötigt werden, werden erst geladen, wenn sie tatsächlich benötigt werden.
IDE – Integrierte Entwicklungsumgebung. Ein Editor, mit dem eine Erweiterung erstellt und geändert werden kann. Beispiele sind Visual Studio Code, Intellij und WebStorm.
Szene: Im Allgemeinen ein Seitenaufruf in Looker. Die Szenen sind den Hauptverkehrsstraßen zugeordnet. Manchmal enthält eine Szene untergeordnete Szenen, die Unterrouten innerhalb der Hauptroute zugeordnet sind.
Transpile – Der Prozess, bei dem in einer Sprache geschriebener Quellcode in eine andere Sprache mit einer ähnlichen Abstraktionsebene umgewandelt wird. Ein Beispiel hierfür ist TypeScript für JavaScript.