Beispiele für React- und JavaScript-Code im Erweiterungsframework

Auf dieser Seite finden Sie Codebeispiele in React und JavaScript 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 die Erweiterung in eine ExtensionProvider40-Komponente verpackt. 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 Anbietern von Erweiterungen

Erweiterungsanbieter stellen das Looker Extension SDK und die SDK API für Erweiterungen bereit. Seit der Erstellung des Erweiterungsframeworks wurden verschiedene Versionen des Erweiterungsanbieters erstellt. In diesem Abschnitt wird die Geschichte der Erweiterungsanbieter erläutert und erklärt, warum ExtensionProvider40 der empfohlene Anbieter ist.

Der erste Anbieter von Erweiterungen war ExtensionProvider, der beide Looker SDKs, Version 3.1 und 4.0, zur Verfügung stellte. Der Nachteil war, dass die Größe des endgültigen Produktions-Bundles durch das Einbeziehen beider SDKs erhöht wurde.

ExtensionProvider2 wurde dann erstellt. Das wurde eingeführt, weil es keinen Sinn macht, für eine Erweiterung beide SDKs zu verwenden und Entwickler dazu zu zwingen, sich für eines zu entscheiden. Leider wurden dadurch beide SDKs in die Größe des endgültigen Produktionsbundles einbezogen.

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 anderen 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
  • So greifen Sie global auf das SDK zu (die Erweiterung muss vor diesem Aufruf 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
      . . .
    }
}

Da die Erweiterung in einem Iframe mit Sandbox ausgeführt wird, können Sie nicht durch Aktualisieren des window.location-Objekts des übergeordneten Elements zu einem anderen Bereich der Looker-Instanz wechseln. 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')

Neues Browserfenster öffnen

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. Versuchen Sie nicht, eine BrowserRouter zu erstellen, da sie 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 Chromium-basierte Version des Microsoft Edge-Browsers nicht funktioniert.

Wenn die MemoryRouter verwendet wird und Sie react-router in Ihrer Erweiterung verwenden, synchronisiert das Erweiterungs-Framework den Router Ihrer Erweiterung automatisch mit dem Looker-Host-Router. Das bedeutet, dass die Erweiterung über Klicks auf die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers und über die aktuelle Route informiert wird, wenn die Seite aktualisiert 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.

Kontextdaten für Erweiterungen

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

Erweiterungen können Kontextdaten für alle Nutzer einer Erweiterung freigeben. 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 etwa 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 von Zugriff auf Nutzerattribute:

  • Mit Bereich verknüpft: 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. Nach der Definition kann das Nutzerattribut von der Erweiterung gelesen und aktualisiert werden.

  • Global: Dies sind globale Nutzerattribute und sie sind schreibgeschützt. Ein Beispiel ist das Nutzerattribut locale.

Hier ist eine Liste der API-Aufrufe für Nutzerattribute:

  • userAttributeGetItem: Liest ein Nutzerattribut. Ein Standardwert kann definiert werden und wird verwendet, wenn für den Nutzer kein Nutzerattributwert vorhanden ist.
  • userAttributeSetItem: Speichert ein Nutzerattribut für den aktuellen Nutzer. Für globale Nutzerattribute schlägt die Ausführung 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. Für globale Nutzerattribute schlägt die Ausführung 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. Fügen Sie beispielsweise in der Manifestdatei des LookML-Projekts Folgendes hinzu:

  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')

Lokaler Speicher

Iframes in einer Sandbox erlauben keinen Zugriff auf den lokalen Speicher des Browsers. Mit dem Looker Extension SDK kann eine Erweiterung den lokalen Speicher des übergeordneten Fensters lesen und darauf schreiben. Der lokale Speicher ist der Erweiterung zugeordnet. Das bedeutet, dass der lokale Speicher, der vom übergeordneten Fenster oder anderen Erweiterungen erstellt wird, nicht gelesen werden kann.

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 Embed SDK-Dokumentation.

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 verleihen. 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 Erweiterungsframework bietet zwei Methoden für den Zugriff auf externe API-Endpunkte:

  • Der Serverproxy: Er 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 müssen Sie 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 :: durch einen einzelnen Unterstrich.

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 Serverproxy-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 Erweiterungsframework 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.

Sie müssen 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 die folgenden Abläufe:

  • Impliziter Ablauf
  • Grant-Typ „Autorisierungscode“ mit geheimem Schlüssel
  • PKCE-Code-Herausforderung und ‑Prüfzeichen

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

Impliziter Ablauf:

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-Herausforderung und ‑Prüfzeichen:

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, bei der die Looker-Instanz als Umgebung verwendet wird, um einer bestimmten Gruppe von Nutzern nur Erweiterungen zur Verfügung zu stellen. Wenn ein Nutzer eine Looker-Instanz aufruft, wird ihm der vom Looker-Administrator konfigurierte Anmeldevorgang angezeigt. Nach der Authentifizierung wird dem Nutzer eine Erweiterung entsprechend seinem landing_page Nutzerattribut angezeigt (siehe Abbildung unten). Der Nutzer kann nur auf Erweiterungen zugreifen, nicht auf andere Teile von Looker. 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 spezielle Methode des 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 Spartaner-Nutzer definieren möchten, müssen Sie eine Gruppe mit dem Namen „Nur Erweiterungen“ erstellen.

Nachdem Sie die Gruppe „Nur Erweiterungen“ erstellt haben, rufen Sie in Looker im Bereich Verwaltung 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

Beim Code-Splitting wird Code nur angefordert, wenn er benötigt wird. Normalerweise werden Code-Chunks mit React-Routen verknüpft, wobei jede Route einen eigenen Code-Chunk erhält. In React geschieht dies mit den Komponenten Suspense und React.lazy. Die Komponente Suspense zeigt eine Fallback-Komponente an, 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 Komponente mit verzögerter Ladezeit wird so implementiert:

import { lazy } from 'react'

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

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

Die Komponente ist so implementiert: Die Komponente muss als Standardkomponente exportiert werden:

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

export default Comp1

Tree-Shaking

Looker SDKs unterstützen derzeit zwar das Tree-Shaking, diese Funktion muss aber noch verbessert werden. Wir ändern unsere SDKs kontinuierlich, um die Unterstützung für Tree Shaking 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.

Damit Tree Shaking verwendet werden kann, muss das verwendete Modul als ES-Modul exportiert werden und die importierten Funktionen dürfen keine Nebenwirkungen haben. Das Looker SDK für TypeScript/Javascript, die Looker SDK Runtime Library, die Looker-UI-Komponenten, das Looker Extension SDK und das Extension SDK für 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 für 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 importiert. Importieren Sie stattdessen nur die Komponenten, die Sie tatsächlich benötigen. Beispiel:

import { Paragraph }  from `@looker/components`

Glossar

  • Code Splitting: Eine Methode zum Lazy-Laden 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 Code-Splitting erreicht werden. Funktionen, die nicht sofort erforderlich sind, werden erst geladen, wenn sie tatsächlich benötigt werden.
  • IDE: Integrierte Entwicklungsumgebung. Ein Editor zum Erstellen und Ändern einer Erweiterung. Beispiele hierfür sind Visual Studio Code, IntelliJ und WebStorm.
  • Szene: In der Regel ein Seitenaufruf in Looker. Die Szenen werden wichtigen Routen zugeordnet. Manchmal haben Szenen untergeordnete Szenen, die zu Unterrouten innerhalb der Hauptroute zugeordnet sind.
  • Transpilieren: Der Prozess, bei dem Quellcode, der in einer Sprache geschrieben wurde, in eine andere Sprache mit einem ähnlichen Abstraktionsgrad umgewandelt wird. Ein Beispiel ist die Umwandlung von TypeScript in JavaScript.