ui.html

<style>
  #app {
    margin: 0 8px;
  }
  .d-inline {
    display: inline-block;
    max-width: 50px;
  }
  .footer .button {
    display: inline-flex;
  }
  .icon-button {
    padding: 0;
  }
  .row {
    display: block;
    margin: 0 -8px;
    overflow: auto;
  }
  .col {
    padding: 8px;
    float: left;
    width: 50%;
  }
  .row.field > .col {
    padding: 16px;
    line-height: 18px;
  }
  .field select {
    display: block;
    max-width: 100%;
  }
  .step-fields {
    padding-bottom: 100px;
  }
  .label {
    margin-top: -1em;
  }
</style>
<link
  rel="stylesheet"
  href="https://unpkg.com/figma-plugin-ds@0.1.8/dist/figma-plugin-ds.css"
/>

<style>
  body {
    font-family: Inter, system-ui, roboto, sans-serif;
    font-size: 11px;
  }
  [v-cloak] {
    display: none;
  }
  .grid {
    overflow: auto;
    padding: 0 8px 8px;
  }
  label > .left + select {
    display: block;
    margin: 0 0 0 180px;
    width: 180px;
  }

  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: auto;
    padding: 16px;
  }
  .footer .btn + .btn {
    margin-left: 10px;
  }
  ol {
    margin-top: 0;
    padding-left: 20px;
  }
  li {
    line-height: 18px;
  }
  svg {
    vertical-align: top;
  }
  .step-msg {
    line-height: 200px;
    text-align: center;
    font-size: 15px;
  }
</style>

<div id="app" v-cloak>
  <div class="step step-msg step-loading" v-if="selection.loading">
    Select a component or a frame
  </div>
  <div class="step step-msg step-loading" v-if="step === 'loading'">
    Reading data from Airtable
  </div>
  <div
    class="step step-msg step-select"
    v-else-if="!selection.length"
    @click="checkSelection"
  >
    Select a component or a frame and click here
  </div>
  <div class="step step-msg step-texts" v-else-if="!texts.length">
    Selection must contain at least 1 <b>TEXT</b> layer
  </div>
  <form
    class="step step-fields"
    v-else-if="data.columns.length && !mappingConfirmed && !changeLink"
    @submit.prevent="apply"
  >
    <div class="row">
      <div class="col">
        <div class="section-title">Text node</div>
      </div>
      <div class="col">
        <div class="section-title">Airtable field</div>
      </div>
    </div>
    <label class="row field" v-for="text in config.mapping">
      <div class="col">
        <div class="node-name">{{text.name}}</div>
      </div>
      <div class="col">
        <select class="" v-model="text.airtableField">
          <option value="" selected>--- Select an Airtable field ---</option>
          <option v-for="col in textColumns">{{col.name}}</option>
        </select>
      </div>
    </label>
    <div v-if="imageColumns.length && config.images && config.images.length">
      <div class="row">
        <div class="col">
          <div class="section-title">Image node</div>
        </div>
        <div class="col">
          <div class="section-title">Airtable field</div>
        </div>
      </div>
      <label class="row field" v-for="text in config.images">
        <div class="col">
          <div class="node-name">{{text.name}}</div>
        </div>
        <div class="col">
          <select class="" v-model="text.airtableField">
            <option value="" selected>--- Select an Airtable field ---</option>
            <option v-for="col in imageColumns">{{col.name}}</option>
          </select>
        </div>
      </label>
    </div>
    <div class="footer">
      <button
        type="button"
        class="button button--secondary"
        @click.prevent="changeLink = true"
      >
        Change link
      </button>
      <button
        type="button"
        class="button button--primary"
        @click.prevent="mappingConfirmed = true"
      >
        Next
      </button>
    </div>
  </form>
  <form
    class="step step-fields"
    v-else-if="data.columns.length && !changeLink"
    @submit.prevent="apply"
  >
    <div class="row">
      <div class="col">
        <div class="section-title">Direction</div>
        <div class="grid">
          <div class="d-inline">
            <button
              type="button"
              @click="config.grid = ''"
              class="icon-button"
              :class="{'icon-button--selected': !config.grid }"
            >
              <div class="icon icon--layout-grid-rows"></div>
            </button>
          </div>
          <div class="d-inline">
            <button
              type="button"
              @click="config.grid = 'columns'"
              class="icon-button"
              :class="{'icon-button--selected': config.grid === 'columns' }"
            >
              <div class="icon icon--layout-grid-columns"></div>
            </button>
          </div>
          <div class="d-inline">
            <button
              type="button"
              @click="config.grid = 'grid'"
              class="icon-button"
              :class="{'icon-button--selected': config.grid === 'grid' }"
            >
              <div class="icon icon--layout-grid-uniform"></div>
            </button>
          </div>
        </div>
      </div>
      <div class="col" v-if="config.grid === 'grid'">
        <label class="input">
          <div class="section-title">Columns</div>
          <input
            type="number"
            class="input__field"
            v-model="config.columns"
            placeholder="Default: 3"
            min="1"
            max="100"
          />
        </label>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <label class="input">
          <div class="section-title">Spacing</div>
          <input
            type="number"
            class="input__field"
            v-model="config.spacing"
            placeholder="Default: 20px"
            min="0"
            max="1000"
          />
        </label>
      </div>
      <div class="col">
        <label class="input">
          <div class="section-title">Max items</div>
          <input
            type="number"
            class="input__field"
            v-model="config.limit"
            placeholder="Default: 100 items"
            min="1"
            max="1000"
          />
        </label>
      </div>
    </div>
    <div class="footer">
      <button
        type="button"
        class="button button--secondary"
        @click.prevent="mappingConfirmed = false"
      >
        Change field mapping
      </button>
      <button
        type="button"
        class="button button--primary"
        @click.prevent="postMessage('close')"
      >
        Done
      </button>
    </div>
  </form>
  <form @submit.prevent="submitURL" v-else>
    <div class="section-title">Getting started</div>
    <ol>
      <li>
        Go to <a href="https://airtable.com">airtable.com</a> and build or
        select your own table
      </li>
      <li>In your Airtable of choice, click ‘Share’</li>
      <li>Scroll down and click ‘Create a shared view’</li>
      <li>Click ‘Share the current view’</li>
      <li>Next, click ‘Create a shareable grid view’.</li>
      <li>Copy the link and paste it below.</li>
    </ol>
    <label class="input">
      <div class="section-title">Shared view link</div>
      <input
        class="input__field"
        type="text"
        v-model="url"
        placeholder="https://airtable.com/shr..."
        autofocus
        required
      />
      <span class="label" v-if="data.url === url"
        >Found {{data.rows.length}} rows and {{data.columns.length}}
        columns</span
      >
    </label>
    <div class="footer">
      <button
        type="button"
        class="button button--secondary"
        @click.prevent="url = 'https://airtable.com/shr0hyEnBae0AKKfQ'"
      >
        Example
      </button>
      &nbsp;
      <button
        type="submit"
        class="button button--primary"
        :disabled="!validURL"
      >
        Load Airtable data
      </button>
    </div>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
  const emptyArray = []
  const noData = { rows: emptyArray, columns: emptyArray, url: '' }
  const render = debounce(async state => {
    // console.log('render', state)
    const ok = await requestMessage('renderAirtable', state)
    if (ok === 'sync:selection') {
      app.checkSelection(true)
    }
    // console.log('rendered', ok)
  }, 200)
  const app = new Vue({
    el: '#app',
    data() {
      return {
        config: {
          grid: '',
          spacing: null,
          limit: null,
          columns: null,
          mapping: emptyArray,
          images: emptyArray,
        },
        mappingConfirmed: false,
        changeLink: false,
        data: noData,
        selection: emptyArray,
        step: '',
        url: '',
      }
    },
    computed: {
      validURL() {
        return this.url
      },
      texts() {
        return (this.selection[0] && this.selection[0].texts) || emptyArray
      },
      textColumns() {
        return this.data.columns.filter(col => !col.type.includes('ttachment'))
      },
      images() {
        return (this.selection[0] && this.selection[0].images) || emptyArray
      },
      imageColumns() {
        return this.data.columns.filter(col => col.type.includes('ttachment'))
      },
      rows() {
        if (!this.data.rows) {
          return emptyArray
        }
        return this.data.rows.map(row => {
          const out = {}
          this.data.columns.forEach(col => {
            out[col.name] =
              (row.cellValuesByColumnId && row.cellValuesByColumnId[col.id]) ||
              ''
          })
          return out
        })
      },
      state() {
        return {
          airtableConfig: this.config,
          airtableLink: this.url,
          airtableRows: this.rows,
        }
      },
    },
    methods: {
      postMessage,
      log() {
        postMessage('debug')
      },
      async checkSelection(noConfig) {
        this.selection = emptyArray
        this.selection.loading = true
        this.selection = await requestMessage('selection')

        if (noConfig) {
          return
        }

        if (!this.selection.length && this.data.rows.length) {
          console.log('selection no len')
          this.data = noData
          return
        }

        if (!this.texts.length && this.data.rows.length) {
          console.log('selection no text')
          this.data = noData
          return
        }

        // Get URL
        const withUrl = this.selection.find(s => s.airtableLink)
        if (!withUrl) {
          return
        }
        console.log('current airtableLink', withUrl.airtableLink)
        this.url = withUrl.airtableLink

        // Get data
        const withData = this.selection.find(s => s.airtableData)
        if (!withData) {
          return
        }
        console.log(
          'current airtableData rows',
          withData.airtableData.rows.length
        )
        this.data = withData.airtableData

        // Get data
        const withConfig = this.selection.find(s => s.airtableConfig)
        if (!withConfig) {
          return
        }
        console.log('current airtableConfig', inert(withConfig.airtableConfig))
        this.config = withConfig.airtableConfig
      },
      async submitURL() {
        // Fetch data from API
        this.step = 'loading'
        this.changeLink = false
        this.data = noData
        const data = await scrape(this.url)
        console.log('got', data.url)
        this.step = ''
        if (!data.rows.length) {
          return notify('could not fetch data from Airtable')
        }
        if (!data.columns.length) {
          return notify('could not fetch data from Airtable')
        }

        // Selection validation (deprecated?)
        if (!this.selection.length) {
          return msg('select', 'url')
        }
        const texts = this.selection[0].texts
        if (!texts || !texts.length) {
          return msg('texts', 'url')
        }

        // Prepare an empty mapping
        this.data = data
        this.config.mapping = inert(this.getMapping())
        this.config.images = inert(this.getImages())

        // Alright, let's remember for next time
        requestMessage('saveAirtableLink', this.url)
        requestMessage('saveAirtableData', this.data)
        // document.querySelector('#fields').innerHTML = texts
        //   .map(
        //     text =>
        //       `<label><div class="left">${text.name}</div><select><option value="" selected>--- Select an Airtable field ---</option>${options}</select></label>`
        //   )
        //   .join('')
      },
      async apply() {
        const v = this.state
        if (!v || !v.airtableLink || !v.airtableConfig.mapping.length) {
          return
        }

        // debounced
        render(v)
      },
      getMapping() {
        if (
          this.selection[0] &&
          this.selection[0].airtableConfig &&
          this.selection[0].airtableConfig.mapping
        ) {
          return this.selection[0].airtableConfig.mapping
        }
        return this.texts.map(t => {
          t.airtableField = ''
          return t
        })
      },
      getImages() {
        if (
          this.selection[0] &&
          this.selection[0].airtableConfig &&
          this.selection[0].airtableConfig.images
        ) {
          return this.selection[0].airtableConfig.images
        }
        return this.images.map(t => {
          t.airtableField = ''
          return t
        })
      },
    },
    mounted() {
      this.checkSelection()
    },
    watch: {
      rows() {
        this.apply()
      },
      config: {
        deep: true,
        handler(v) {
          this.apply()
        },
      },
    },
  })

  function notify(msg) {
    postMessage('notify', msg)
  }

  function postMessage(type, data) {
    const id = Math.random().toString(36)
    window.parent.postMessage({ pluginMessage: { id, type, data } }, '*')
    return id
  }

  function requestMessage(type, data) {
    return new Promise(resolve => {
      const id = postMessage('request:' + type, JSON.stringify(data))
      window.addEventListener('message', onmessage)
      function onmessage(evt) {
        const message = evt.data.pluginMessage
        if (message && message.id === id) {
          resolve(JSON.parse(message.data))
          // console.log('response message', message, JSON.parse(message.data))
          window.removeEventListener('message', onmessage)
        }
      }
    })
  }
  function responseMessage(msg, data) {
    window.parent.postMessage(
      {
        pluginMessage: {
          id: msg.id,
          type: msg.type.replace('request:', 'response:'),
          data: JSON.stringify(data),
        },
      },
      '*'
    )
  }
  function inert(data) {
    return JSON.parse(JSON.stringify(data))
  }
  function debounce(fn, wait) {
    var timeout
    return function () {
      const args = arguments
      clearTimeout(timeout)
      timeout = setTimeout(function () {
        fn.apply(this, args)
      }, wait || 1)
    }
  }

  function scrape(url) {
    if (ls(url)) {
      console.log('localStorage scrape')
      return ls(url)
    }
    return fetch(
      'https://airtable-shr.vercel.app/api?' +
        serialize({
          url,
        })
    )
      .then(r => r.json())
      .then(data => {
        if (data && data.data) {
          data = data.data
        }
        if (!data || !data.rows || !data.columns) {
          return noData
        }
        ls(url, data)
        return data
      })
      .catch(e => {
        e.message && notify(e.message)
        return noData
      })
      .then(data => {
        data.url = url
        return data
      })
  }
  function serialize(obj) {
    const str = []
    for (const p in obj) {
      if (obj.hasOwnProperty(p) && obj[p]) {
        str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
      }
    }
    return str.join('&')
  }
  function ls(key, value) {
    try {
      const storage =
        typeof localStorage !== 'undefined' ? localStorage : figma.clientStorage
      if (typeof value === 'undefined') {
        return JSON.parse(storage[key] || 'null')
      } else {
        storage[key] = JSON.stringify(value)
        return value
      }
    } catch (e) {}
  }
  function msg(id, after) {
    alert(id)
  }

  imageDownloadService()

  function imageDownloadService() {
    window.addEventListener('message', onmessage)
    async function onmessage(evt) {
      const msg = evt.data.pluginMessage
      if (msg && msg.type === 'request:downloadImage') {
        const url = JSON.parse(msg.data)
        responseMessage(msg, await urlToImage(url))
      }
    }
  }

  function urlToImage(imgUrl) {
    return fetch(imgUrl)
      .then(r => r.arrayBuffer())
      .then(a => {
        return Array.from(new Uint8Array(a))
      })
  }
</script>