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

Diese Seite wurde von der Cloud Translation API übersetzt.

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

Auf dieser Seite finden Sie in React und JavaScript geschriebene Codebeispiele für gängige Funktionen, die Sie in Ihren Erweiterungen verwenden möchten.

Looker Extension SDK verwenden

Erweiterungen müssen eine Verbindung zum Looker-Host herstellen. In React wird die Erweiterung dazu in eine ExtensionProvider40-Komponente eingebunden. Diese Komponente stellt eine Verbindung zum Looker-Host her und stellt das Looker Extension SDK und das Looker SDK für die Erweiterung 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

Erweiterungsanbieter 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 werden die bisherigen Erweiterungsanbieter erläutert und es wird erklärt, warum ExtensionProvider40 der empfohlene Anbieter ist.

Der erste Erweiterungsanbieter war ExtensionProvider, der beide Looker SDKs, Version 3.1 und 4.0, freigegeben hat. Der Nachteil war, dass das endgültige Produktions-Bundle durch das Hinzufügen beider SDKs größer wurde.

ExtensionProvider2 wurde dann erstellt. Das wurde eingeführt, weil es keinen Sinn macht, für eine Erweiterung beide SDKs zu verwenden und den Entwickler zu zwingen, sich für eines zu entscheiden. Leider führten dadurch immer noch beide SDKs in die Größe des endgültigen Produktions-Bundles.

Als SDK 4.0 in die allgemeine Verfügbarkeit überging, wurde ExtensionProvider40 erstellt. Der Vorteil von ExtensionProvider40 besteht darin, dass der Entwickler nicht auswählen muss, welches SDK er verwenden möchte, 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, müssen Sie zuerst eine Referenz auf das SDK abrufen. Dies kann entweder über den Anbieter oder global erfolgen. Anschließend können Sie SDK-Funktionen wie in jeder JavaScript-Anwendung aufrufen.

So greifen Sie auf das SDK des Anbieters 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. Vor dem Aufruf muss die Erweiterung initialisiert werden:

    const coreSDK = getCoreSDK()

Sie können das SDK jetzt wie in jeder anderen 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 innerhalb der Looker-Instanz nicht zu einer anderen Stelle wechseln, indem Sie das window.location-Objekt des übergeordneten Elements aktualisieren. Die Navigation ist mit dem Looker Extension SDK möglich.

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 sandboxed iframe ausgeführt wird, können Sie über das übergeordnete Fenster kein neues Browserfenster öffnen. Mit dem Looker Extension SDK können Sie ein Browserfenster öffnen.

Für diese Funktion ist entweder die Berechtigung new_window erforderlich, um ein neues Fenster zu einem Speicherort 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. Versuche nicht, ein BrowserRouter zu erstellen, da es in Sandbox-iFrames nicht funktioniert. Versuche nicht, eine HashRouter zu erstellen, da sie in Sandbox-iFrames für die nicht Chromium-basierte Version des Microsoft Edge-Browsers nicht funktioniert.

Wenn MemoryRouter und react-router in Ihrer Erweiterung verwendet werden, synchronisiert das Erweiterungs-Framework automatisch den Router der Erweiterung mit dem Looker-Hostrouter. Das bedeutet, dass die Erweiterung über Klicks auf die Vorwärts- und Rückwärtsschaltflächen des Browsers sowie über die aktuelle Route informiert wird, wenn die Seite neu geladen wird. Das bedeutet auch, dass die Erweiterung automatisch Deeplinks unterstützen sollte. In den Beispielen für Erweiterungen erfahren Sie, wie Sie react-router verwenden.

Erweiterungskontextdaten

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

Erweiterungen können Kontextdaten zwischen allen Nutzern einer Erweiterung teilen. Die Kontextdaten können für Daten verwendet werden, die sich nicht häufig ändern und für die keine besonderen Sicherheitsanforderungen gelten. Beim Schreiben der Daten ist Vorsicht geboten, da keine Datensperren vorhanden sind und der letzte Schreibvorgang ausgeführt wird. Die Kontextdaten stehen der Erweiterung sofort nach dem 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 einen JSON-String serialisiert. Das muss auch berücksichtigt werden, 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 Arten des Zugriffs auf Nutzerattribute:

Begrenzt – mit der Erweiterung verknüpft. Ein Nutzerattribut mit Bereich ist der Erweiterung zugeordnet und muss in der Looker-Instanz definiert werden, bevor es verwendet werden kann. Wenn Sie einem Nutzerattribut einen Namespace zuweisen möchten, fügen Sie dem Attributnamen den Namen der Erweiterung vor. Alle Bindestriche und das 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 Nutzerattribut mit dem Namen my_value, das mit der Erweiterungs-ID my-extension::my-extension verwendet wird, muss der Name des Nutzerattributs my_extension_my_extension_my_value definiert sein. Sobald das Nutzerattribut definiert wurde, kann es von der Erweiterung gelesen und aktualisiert werden.
Global: Dies sind globale Nutzerattribute und sie sind schreibgeschützt. Ein Beispiel ist das Nutzerattribut locale.

Im Folgenden finden Sie eine Liste der API-Aufrufe für Nutzerattribute:

userAttributeGetItem – Liest ein Nutzerattribut. Es kann ein Standardwert definiert werden. Dieser wird verwendet, wenn für den Nutzer kein Nutzerattributwert 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.

Wenn Sie auf Nutzerattribute zugreifen möchten, müssen Sie die Attributnamen in den Berechtigungen global_user_attributes und/oder scoped_user_attributes angeben. In der Manifestdatei des LookML-Projekts 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

In einer Sandbox ausgeführte iFrames lassen keinen Zugriff auf den lokalen Speicher des Browsers zu. Mit dem Looker Extension SDK kann eine Erweiterung Lese- und Schreibvorgänge im lokalen Speicher des übergeordneten Fensters ausführen. Der lokale Speicher wird der Erweiterung mit einem Namespace zugeordnet, d. h., der lokale Speicher, der vom übergeordneten Fenster oder anderen Erweiterungen erstellt wird, kann nicht gelesen werden.

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

Die localhost API der Erweiterung ist asynchron, im Gegensatz zur synchronen API für den lokalen Speicher 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

Erweiterungen können den aktuellen Seitentitel aktualisieren. Für diese 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

IFrames in einer Sandbox 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, das Looker JavaScript Embed SDK zum Einbetten von Inhalten 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 stilisierte Komponenten verwendet, um dem generierten iframe ein einfaches Design zu geben. 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: Greift über den Looker-Server auf den Endpunkt zu. Mit diesem Mechanismus können Client-IDs und geheime Schlüssel sicher vom Looker-Server festgelegt werden.
Der Abruf-Proxy: Er 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 Berechtigung external_api_urls der Erweiterung angeben.

Server-Proxy

Im folgenden Beispiel wird gezeigt, wie der Serverproxy verwendet wird, um ein Zugriffstoken für den Abrufproxy abzurufen. Die Client-ID und das Secret müssen als Nutzerattribute für die Erweiterung definiert werden. In der Regel wird beim Einrichten des Nutzerattributs der Standardwert auf die Client-ID oder das Secret festgelegt.

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 sein. Bindestriche müssen durch Unterstriche ersetzt werden und die ::-Zeichen müssen durch einen einzelnen Unterstrich ersetzt werden.

Wenn der Name Ihrer Erweiterung beispielsweise my-extension::my-extension lautet, müssen für das vorherige Beispiel die folgenden Nutzerattribute definiert werden:

my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'

Proxy abrufen

Im folgenden Beispiel wird die Verwendung des Abruf-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. Mit OAuth können Sie ein Zugriffstoken für den Zugriff auf eine bestimmte Ressource abrufen, z. B. ein Google Tabellen-Dokument.

Du musst den OAuth-Serverendpunkt 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 folgende Abläufe:

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

Im Allgemeinen wird ein untergeordnetes Fenster geöffnet, in dem eine OAuth-Serverseite geladen wird. Der OAuth-Server authentifiziert den Nutzer und leitet zurück zum Looker-Server mit zusätzlichen Details, 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-Grant-Typ 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 -Verifizierung:

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

Spartan

Spartan bezieht sich auf eine Methode, die Looker-Instanz als Umgebung zu verwenden, um Erweiterungen und Erweiterungen nur einer bestimmten Gruppe von Benutzern zur Verfügung zu stellen. Wenn ein Nutzer eine Looker-Instanz aufruft, wird ihm der vom Looker-Administrator konfigurierte Anmeldevorgang angezeigt. Sobald der Nutzer authentifiziert ist, wird ihm entsprechend dem Nutzerattribut landing_page eine Erweiterung angezeigt, wie unten dargestellt. Der Nutzer kann nur auf Erweiterungen zugreifen. Sie können auf keinen anderen Teil von Looker zugreifen. Wenn der Nutzer Zugriff auf mehrere Erweiterungen hat, steuern die Erweiterungen, ob der Nutzer mit extensionSDK.updateLocation zu den anderen Erweiterungen wechseln kann. Es gibt eine spezifische Methode für das Looker Extension SDK, mit der sich der Nutzer von der Looker-Instanz abmelden kann.

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

Wenn Sie einen sparsamen Nutzer definieren möchten, müssen Sie eine Gruppe mit dem Namen „Nur Erweiterungen“ erstellen.

Wenn die Schaltfläche „Nur Erweiterungen“ aufgerufen wurde, rufen Sie im Looker-Bereich Admin die Seite Nutzerattribute auf 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 sein, wobei my_extension::my_extension die ID Ihrer Erweiterung ist. Wenn sich dieser Nutzer jetzt anmeldet, wird er zur angegebenen Erweiterung weitergeleitet.

Code-Splitting

Bei der Codeaufteilung wird Code nur dann angefordert, wenn er benötigt wird. In der Regel sind Code-Chunks mit React-Routen verknüpft, wobei jede Route einen eigenen Code-Chunk erhält. In React werden dafür die Komponenten Suspense und React.lazy verwendet. Mit der Komponente „Suspense“ wird eine Fallback-Komponente angezeigt, während der Code-Chunk geladen wird. React.lazy ist für das Laden des Code-Chunks verantwortlich.

So richten Sie die Code-Split-Funktion ein:

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

Baumzittern

Looker SDKs unterstützen derzeit zwar das Tree-Shaking, diese Funktion muss aber noch verbessert werden. Wir aktualisieren unsere SDKs kontinuierlich, um die Unterstützung von Baumwicken zu verbessern. Für einige dieser Änderungen müssen Sie möglicherweise Ihren Code umstrukturieren, um sie zu nutzen. Falls dies erforderlich ist, wird dies in den Release Notes dokumentiert.

Wenn Sie das Baumwackeln verwenden möchten, müssen Sie das verwendete Modul als ESmodule exportieren. Die importierten Funktionen dürfen keine Nebenwirkungen 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 ExtensionProvider2- oder die ExtensionProvider40-Komponente aus dem Extension SDK for React.

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

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`

Im vorherigen Beispiel wird alles aus dem Modul übernommen. 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 sollten Sie das anfänglich geladene JavaScript-Bundle so klein wie möglich halten. 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 zum Erstellen und Ändern von Erweiterungen. Beispiele sind Visual Studio Code, Intellij und WebStorm.
Szene: In der Regel ein Seitenaufruf in Looker. Szenen mit den wichtigsten Routen. Manchmal haben Szenen untergeordnete Szenen, die zu Unterrouten innerhalb der Hauptroute zugeordnet sind.
Transpilieren – Der Prozess, bei dem in einer Sprache geschriebener Quellcode in eine andere Sprache mit einem ähnlichen Abstraktionsniveau umgewandelt wird. Ein Beispiel ist die Umwandlung von TypeScript in JavaScript.