liquidMethodMissing doesn't support object promises

[almousa1990]

Hi,

In attempt to implement a drop, i am trying to return an object from liquidMethodMissing method in order to lazily load objects.

For example:

class ProductsDrop extends Drop{
  constructor(api) {
      super()
  }
  async liquidMethodMissing(productHandle) {
      const product = this.api.getProductByHandle(productHandle)
      if (product) return product else return null
  }
}

and to call it as, for example: {{products['product handle'].name]}}

However, it seems that liquidMethodMissing supports only string type Promises.

  public liquidMethodMissing (key: string): Promise<string | undefined> | string | undefined {
    return undefined
  }

[harttle]

I'm not familiar with Shopify themes, can you provide a specific use case in template? I can update that type.

PS: maybe it also works as long as you convert your return value to any.

[almousa1990]

appreciate your prompt response. I wouldn't say it is specific to Shopify templates. You can refer to this use cases in liquid:
https://github.com/Shopify/liquid/wiki/Introduction-to-Drops

In my case, i would need to call nested properties of a drop, for example in the test cases we have:

  it('should read corresponding promise property', async function () {
    const html = await liquid.parseAndRender(`{{obj.name}}`, { obj: new PromiseDrop() })
    expect(html).to.equal('NAME')
  })

this works fine, because the liquidMethodMissing returns a string for name, but what if we need to render something like obj.name.first? or obj.addresses

[almousa1990]

More info in the issue, i don't think that the return type is the only issue here.

The drop implementation will return liquidMethodMissing in case the property wasn't present in the object, and will depending on the implementation, it might return a promise or a value.

However, getFromScope implementation doesn't support promises in path, for example, assume:

class ProductsDrop extends Drop{
  constructor(api) {
      super()
  }
  async liquidMethodMissing(handle) {
      const product = await this.api.getProductByHandle(handle)
      if (product) return product else return null // this returns a promise
  }
}

if we do:
const html = await liquid.parseAndRender({{products['some_product_handle'].name}}, { products: new ProductsDrop() })

the getFromScope will iterate the paths, the first iteration will resolve liquidMethodMissing with arg "some_product_handle" and returns a promise, second iteration will try to read the key (in above case is "name"), but will fail because the promise was not yet resolved.

[almousa1990]

I was able to resolve the issue by adding a simple condition to the readProperty function, i am not sure if it breaks something else!

export function readProperty (obj: Scope, key: string) {
  if (isNil(obj)) return obj
  obj = toLiquid(obj)
  if (obj instanceof Drop) {
    if (isFunction(obj[key])) return obj[key]()
    if (obj.hasOwnProperty(key)) return obj[key]
    return obj.liquidMethodMissing(key)
  }
// HERE
  if (obj instanceof Promise) {
        return obj.then(resolvedObj=>readProperty(resolvedObj, key))
  }
  if (key === 'size') return readSize(obj)
  if (key === 'first') return readFirst(obj)
  if (key === 'last') return readLast(obj)
  return obj[key]
}

[harttle]

Then it's a bug, we should fix it. Thank you for your work!

[harttle]

As we tried in #285, there's no easy way to implement. Basically we need change every and each property reading and expression evaluation to async. Let's see if there's more people need async liquidMethodMissing.