דוגמאות לקוד React ו-JavaScript של מסגרת התוסף

בדף הזה מובאות דוגמאות לקוד שנכתב ב-React וב-JavaScript לפונקציות נפוצות שאולי תרצו להשתמש בהן בתוספים שלכם.

שימוש ב-Looker Extension SDK

התוספים צריכים ליצור חיבור למארח Looker. ב-React, עושים את זה על ידי הוספת התוסף לרכיב ExtensionProvider40. הרכיב הזה יוצר חיבור למארח Looker ומאפשר לתוסף להשתמש ב-Looker Extension SDK וב-Looker SDK.

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


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

רקע על ספקי תוספים

ספקי התוספים חושפים את Looker extension SDK ואת SDK API לתוספים. מאז שנוצר ה-framework של התוספים, נוצרו גרסאות שונות של ספק התוספים. בקטע הזה מוסבר על ההיסטוריה של ספקי התוספים ולמה ExtensionProvider40 הוא הספק המומלץ.

ספק התוספים הראשון היה ExtensionProvider, שחשף את שני ה-SDK של Looker, גרסאות 3.1 ו-4.0. החיסרון היה ששילוב של שתי ערכות ה-SDK הגדיל את הגודל של חבילת הייצור הסופית.

לאחר מכן נוצר ExtensionProvider2. התוסף נוצר כי לא היה הגיוני שתוסף ישתמש בשני ה-SDK ויכריח את המפתח לבחור באחד מהם. לצערנו, גם אחרי השינוי הזה, שתי ערכות ה-SDK נכללות בגודל של חבילת הייצור הסופית.

כשגרסה 4.0 של ה-SDK עברה לזמינות כללית, נוצר ExtensionProvider40. היתרון של ExtensionProvider40 הוא שהמפתח לא צריך לבחור באיזו גרסת SDK להשתמש, כי גרסה 4.0 היא הגרסה היחידה שזמינה. היתרון בכך הוא שהגודל של החבילה קטן יותר, כי SDK 3.1 לא נכלל בחבילה הסופית.

כדי להוסיף פונקציות מ-Looker Extension SDK, צריך קודם לקבל הפניה ל-SDK, שאפשר לעשות זאת מהספק או באופן גלובלי. אחרי כן תוכלו לקרוא לפונקציות של ה-SDK כמו בכל אפליקציית JavaScript.

  • כדי לגשת ל-SDK מהספק, פועלים לפי השלבים הבאים:
  import { ExtensionContext40 } from '@looker/extension-sdk-react'

  export const Comp1 = () => {
    const extensionContext = useContext(
      ExtensionContext40
    )
    const { extensionSDK, coreSDK } = extensionContext
  • כדי לגשת ל-SDK באופן גלובלי (חובה לאתחל את התוסף לפני שמבצעים את הקריאה הזו), פועלים לפי השלבים הבאים:
    const coreSDK = getCoreSDK()

עכשיו אפשר להשתמש ב-SDK כמו בכל אפליקציית JavaScript:

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

מכיוון שהתוסף פועל ב-iframe של ארגז חול, אי אפשר לנווט למקום אחר במופע Looker על ידי עדכון אובייקט window.location של ההורה. אפשר לנווט באמצעות Looker Extension SDK.

כדי להשתמש בפונקציה הזו נדרשת זכאות ל-navigation.

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

. . .

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

. . .

  extensionSDK.updateLocation('/browse')

פתיחת חלון חדש בדפדפן

מכיוון שהתוסף פועל ב-iframe של ארגז חול, אי אפשר להשתמש בחלון האב כדי לפתוח חלון דפדפן חדש. אפשר לפתוח חלון דפדפן באמצעות Looker Extension SDK.

הפונקציה הזו דורשת את new_window הרשאת הגישה כדי לפתוח חלון חדש למיקום במופע Looker הנוכחי, או את new_window_external_urls הרשאת הגישה כדי לפתוח חלון חדש שפועל במארח אחר.

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

ניתוב וקישורי עומק

ההנחיות הבאות רלוונטיות לתוספים שמבוססים על React.

הרכיבים ExtensionProvider,‏ ExtensionProvider2 ו-ExtensionProvider40 יוצרים באופן אוטומטי React Router בשם MemoryRouter שתוכלו להשתמש בו. אל תנסו ליצור BrowserRouter, כי הוא לא פועל ב-sandboxed iframes. אל תנסו ליצור HashRouter, כי הוא לא פועל ב-iframe שבארגז חול (sandbox) בגרסה של דפדפן Microsoft Edge שלא מבוססת על Chromium.

אם נעשה שימוש ב-MemoryRouter ואתם משתמשים ב-react-router בתוסף, מסגרת התוסף תסנכרן אוטומטית את הנתב של התוסף עם נתב המארח של Looker. המשמעות היא שההרחבה תקבל הודעה על קליקים על הלחצנים 'הקודם' ו'הבא' בדפדפן ועל המסלול הנוכחי כשהדף ייטען מחדש. המשמעות היא גם שהתוסף אמור לתמוך אוטומטית בקישורי עומק. דוגמאות לשימוש ב-react-router

נתוני הקשר של התוספים

חשוב להבחין בין נתוני ההקשר של מסגרת התוסף לבין הקשרים של React.

תוספים יכולים לשתף נתוני הקשר בין כל המשתמשים בתוסף. אפשר להשתמש בנתוני ההקשר לנתונים שלא משתנים לעיתים קרובות ושאין להם דרישות אבטחה מיוחדות. צריך להיזהר כשכותבים את הנתונים, כי אין נעילת נתונים והפעולה האחרונה היא הקובעת. נתוני ההקשר זמינים לתוסף מיד עם ההפעלה. ‫Looker Extension SDK מספק פונקציות שמאפשרות לעדכן ולרענן את נתוני ההקשר.

הגודל המקסימלי של נתוני ההקשר הוא כ-16MB. נתוני ההקשר יעברו סריאליזציה למחרוזת JSON, ולכן צריך לקחת זאת בחשבון אם משתמשים בנתוני ההקשר בתוסף.

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

מאפייני המשתמשים

‫Looker Extension SDK מספק API לגישה אל מאפייני משתמשים ב-Looker. יש שני סוגים של גישה למאפייני משתמש:

  • במסגרת התוסף – משויך לתוסף. מאפיין משתמש בהיקף מוגבל מוגדר במרחב שמות של התוסף, ומאפיין המשתמש צריך להיות מוגדר במופע Looker לפני שאפשר להשתמש בו. כדי להגדיר מרחב שמות למאפיין משתמש, מוסיפים לשם המאפיין קידומת של שם התוסף. כל מקף והתווים '::' בשם התוסף חייבים להיות מוחלפים בקו תחתון, כי אי אפשר להשתמש במקפים ובנקודתיים בשמות של מאפייני משתמש.

    לדוגמה: מאפיין משתמש בהיקף בשם my_value שמשמש עם מזהה תוסף my-extension::my-extension חייב לכלול הגדרה של שם מאפיין משתמש my_extension_my_extension_my_value. אחרי שמגדירים את מאפיין המשתמש, התוסף יכול לקרוא ולעדכן אותו.

  • כללי – אלה מאפייני משתמש כלליים והם לקריאה בלבד. דוגמה למאפיין משתמש היא locale.

הנה רשימה של קריאות ל-API של מאפייני משתמש:

  • ‫userAttributeGetItem — קורא מאפיין משתמש. אפשר להגדיר ערך ברירת מחדל שישמש אם לא קיים ערך מאפיין משתמש עבור המשתמש.
  • ‫userAttributeSetItem – שומר מאפיין משתמש עבור המשתמש הנוכחי. הפעולה תיכשל במקרה של מאפייני משתמש גלובליים. הערך השמור גלוי רק למשתמש הנוכחי.
  • ‫userAttributeResetItem – מאפס את מאפיין המשתמש של המשתמש הנוכחי לערך ברירת המחדל. הפעולה תיכשל במקרה של מאפייני משתמש גלובליים.

כדי לגשת למאפייני משתמש, צריך לציין את שמות המאפיינים בהרשאות global_user_attributes או scoped_user_attributes. לדוגמה, בקובץ המניפסט של פרויקט LookML, מוסיפים:

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

אחסון מקומי

ב-sandboxed iframes אין אפשרות לגשת לאחסון המקומי בדפדפן. Looker Extension SDK מאפשר לתוסף לקרוא ולכתוב לאחסון המקומי של חלון האב. האחסון המקומי מוגבל למרחב השמות של התוסף, כלומר הוא לא יכול לקרוא אחסון מקומי שנוצר על ידי חלון האב או תוספים אחרים.

כדי להשתמש באחסון מקומי, צריך הרשאה ל-local_storage.

ה-API של localhost של התוסף הוא אסינכרוני, בניגוד ל-API הסינכרוני של האחסון המקומי בדפדפן.

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

עדכון שם הדף

תוספים יכולים לעדכן את הכותרת של הדף הנוכחי. לא נדרשות זכויות גישה כדי לבצע את הפעולה הזו.

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

. . .

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

  extensionSDK.updateTitle('My Extension Title')

כתיבה ללוח העריכה של המערכת

מסגרות iframe בארגז חול אינן מאפשרות גישה ללוח המערכת. Looker Extension SDK מאפשר לתוסף לכתוב טקסט ללוח של המערכת. מטעמי אבטחה, לתוסף אין הרשאה לקרוא מלוח הגזירה של המערכת.

כדי לכתוב ללוח המערכת, צריך את הזכאות 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) {
      . . .
    }

הטמעה של מרכזי בקרה, תצוגות וניתוחים

ה-framework של התוספים תומך בהטמעה של מרכזי בקרה, תצוגות וניתוחים.

נדרשת use_embeds הרשאה. מומלץ להשתמש ב-Looker JavaScript Embed SDK כדי להטמיע תוכן. מידע נוסף זמין במסמכי התיעוד של 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;)

בדוגמאות של התוספים נעשה שימוש ברכיבים עם סגנון כדי לספק סגנון פשוט ל-iframe שנוצר. לדוגמה:

import styled from "styled-components"

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

גישה לנקודות קצה (endpoints) של API חיצוני

מסגרת התוספים מספקת שתי שיטות לגישה לנקודות קצה (endpoints) של API חיצוני:

  • שרת ה-proxy – ניגש לנקודת הקצה דרך שרת Looker. המנגנון הזה מאפשר לשרת Looker להגדיר מזהי לקוח ומפתחות סודיים בצורה מאובטחת.
  • שרת ה-proxy של האחזור – ניגש לנקודת הקצה מהדפדפן של המשתמש. הפרוקסי הוא ממשק המשתמש של Looker.

בשני המקרים, צריך לציין את נקודת קצה ל-API החיצוני בexternal_api_urlsהרשאה של התוסף.

שרת proxy

בדוגמה הבאה מוצג שימוש בשרת proxy כדי לקבל אסימון גישה לשימוש ב-fetch proxy. צריך להגדיר את מזהה הלקוח והסוד שלו כמאפייני משתמש בתוסף. בדרך כלל, כשמגדירים את מאפיין המשתמש, ערך ברירת המחדל מוגדר כמזהה הלקוח או כסוד הלקוח.

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
    . . .
  }

צריך למפות את שם מאפיין המשתמש לתוסף. צריך להחליף את המקפים בקו תחתון, ואת התווים :: בקו תחתון יחיד.

לדוגמה, אם שם התוסף הוא my-extension::my-extension, מאפייני המשתמש שצריך להגדיר בדוגמה הקודמת יהיו:

my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'

שרת Proxy לאחזור

בדוגמה הבאה מוצג שימוש ב-fetch proxy. היא משתמשת באסימון הגישה מהדוגמה הקודמת של שרת Proxy.

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

מסגרת התוספים תומכת בשילוב עם ספקי OAuth. אפשר להשתמש ב-OAuth כדי לקבל אסימון גישה למשאב מסוים, למשל מסמך Google Sheets.

תצטרכו לציין את נקודת הקצה של שרת OAuth בextension oauth2_urls ההרשאה. יכול להיות שתצטרכו לציין כתובות URL נוספות בexternal_api_urls entitlement.

מסגרות התוספים תומכות בתהליכים הבאים:

  • זרם הענקת גישה משתמע
  • סוג הרשאה באמצעות קוד עם מפתח סודי
  • קוד אתגר וקוד אימות PKCE

התהליך הכללי הוא שחלון צאצא נפתח וטוען דף של שרת OAuth. שרת OAuth מאמת את המשתמש ומפנה אותו בחזרה לשרת Looker עם פרטים נוספים שאפשר להשתמש בהם כדי לקבל טוקן גישה.

זרם הענקת גישה משתמע:

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

סוג הרשאת קוד הרשאה עם מפתח סודי:

  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:

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 הוא שיטה לשימוש במופע Looker כסביבה לחשיפת תוספים, ורק תוספים, לקבוצה ייעודית של משתמשים. משתמש ספארטני שמנווט למופע Looker יוצג עם תהליך הכניסה שאדמין Looker הגדיר. אחרי שהמשתמש מאומת, מוצג לו תוסף בהתאם landing_page למאפיין המשתמש שלו, כמו שמוצג בהמשך. המשתמש יכול לגשת רק לתוספים, ולא לחלקים אחרים ב-Looker. אם למשתמש יש גישה לכמה תוספים, התוספים קובעים אם המשתמש יכול לעבור לתוספים אחרים באמצעות extensionSDK.updateLocation. יש שיטה ספציפית ב-Looker Extension SDK שמאפשרת למשתמש להתנתק ממופע Looker.

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

הגדרת משתמשי Spartan

כדי להגדיר משתמש ספארטני, חובה ליצור קבוצה בשם Extensions Only (תוספים בלבד).

אחרי שיוצרים את הקבוצה 'תוספים בלבד', עוברים לדף מאפייני משתמש בקטע אדמין ב-Looker ועורכים את מאפיין המשתמש landing_page. בוחרים בכרטיסייה Group Values (ערכי קבוצה) ומוסיפים את הקבוצה Extensions Only (תוספים בלבד). הערך צריך להיות /spartan/my_extension::my_extension/, כאשר my_extension::my_extension הוא מזהה התוסף. מעכשיו, כשהמשתמש הזה יתחבר לחשבון, הוא יועבר לתוסף הייעודי.

פיצול קוד

פיצול קוד הוא טכניקה שבה הקוד נדרש רק כשצריך אותו. בדרך כלל, חלקי קוד משויכים למסלולי React, כאשר כל מסלול מקבל חלק קוד משלו. ב-React, הפעולה הזו מתבצעת באמצעות הרכיבים Suspense ו-React.lazy. רכיב Suspense מציג רכיב חלופי בזמן שקטע הקוד נטען. ‫React.lazy אחראי לטעינת קטע הקוד.

הגדרת פיצול קוד:

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>

כך מטמיעים את הרכיב בטעינה מדורגת:

import { lazy } from 'react'

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

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

הרכיב מיושם באופן הבא. חובה לייצא את הרכיב כרכיב ברירת מחדל:

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

export default Comp1

Tree shaking

למרות שערכות ה-SDK של Looker תומכות כרגע ב-tree-shaking, הפונקציה הזו עדיין צריכה שיפור. אנחנו משנים את ערכות ה-SDK שלנו כל הזמן כדי לשפר את התמיכה ב-tree shaking. יכול להיות שחלק מהשינויים האלה יחייבו אתכם לבצע רפקטורינג בקוד כדי להפיק מהם תועלת, אבל אם זה נדרש, זה יתועד בהערות לגרסה.

כדי להשתמש ב-tree-shaking, המודול שבו אתם משתמשים צריך להיות מיוצא כ-esmodule, והפונקציות שאתם מייבאים צריכות להיות ללא תופעות לוואי. ‫Looker SDK for TypeScript/Javascript,‏ Looker SDK Runtime Library,‏ Looker UI Components,‏ Looker Extension SDK ו-Extension SDK for React עומדים בדרישות האלה.

בתוסף, משתמשים ב-Looker SDK 4.0, ומשתמשים ברכיב ExtensionProvider2 או ברכיב ExtensionProvider40 מתוך Extension SDK for React.

הקוד הבא מגדיר את ספק התוסף. תצטרכו לציין לספק את ה-SDK שאתם רוצים:

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;
  )
})

אסור להשתמש בסגנון הייבוא הבא בתוסף:

import * as lookerComponents from `@looker/components`

בדוגמה הקודמת, כל מה שמוגדר במודול נכלל. במקום זאת, מייבאים רק את הרכיבים שבאמת צריכים. לדוגמה:

import { Paragraph }  from `@looker/components`

מילון מונחים

  • פיצול קוד – טכניקה לטעינה מדורגת של JavaScript עד שבאמת צריך אותו. מומלץ שהחבילה של JavaScript שנטענת בהתחלה תהיה קטנה ככל האפשר. אפשר לעשות את זה באמצעות פיצול קוד. פונקציות שלא נדרשות באופן מיידי לא נטענות עד שבאמת צריך אותן.
  • IDE – סביבת פיתוח משולבת. כלי עריכה שמשמש ליצירה ולשינוי של תוסף. דוגמאות: Visual Studio Code,‏ Intellij ו-WebStorm.
  • סצנה – בדרך כלל צפייה בדף ב-Looker. הסצנות ממופות למסלולים ראשיים. לפעמים לסצנה מסוימת יהיו סצנות משנה שמשויכות למסלולי משנה בתוך המסלול הראשי.
  • טרנספילציה (Transpilation) – תהליך של לקיחת קוד מקור שנכתב בשפה אחת והפיכתו לשפה אחרת עם רמת הפשטה דומה. לדוגמה, TypeScript ל-JavaScript.