Package Exports

@onflow/util-template
@onflow/util-template/dist/template.js
@onflow/util-template/dist/template.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@onflow/util-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

template

Utility to help with string interop in SDK and FCL

Usage

import {templar} from "onflow/template"

const template = templar`
From: ${o => o.from}
To: ${o => o.to}
Message: ${o => o.msg}
`

const letter = template({
  from: "Bob the Builder",
  to: "Postman Pat",
  msg: "Please pick up your black and white cat.",
})

// prettier-ignore
assert( letter, `
From: Bob the Builder
To: Postman Pat
Message: Please pick up your black and white cat.
`)

import {templar} from "@onflow/template"

const template1 = templar`
a: ${o => o.a}
b: ${o => o.b}
`

const template2 = templar`
x: ${o => o.x}
y: ${o => o.y}
`

const template3 = templar`
${template1}
${template2}
oh hello!
${template1}
${template2}
`

const rawr = template3({a: "A", b: "B", x: "X", y: "Y"})

// prettier-ignore
assert(rawr, `
a: A
b: B
x: X
y: Y
oh hello!
a: A
b: B
x: X
y: Y
`)

Examples

Role your own graphql libary

// gql.js
import {templar} from "@onflow/template"

export const gql = templar

export const gqlr = (...args) => (opts = {}) => {
  const params = opts.params || {}
  const headers = opts.headers || {}
  const endpoint = opts.endpoint || ""

  return fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify({
      query: gql(...args)(params),
    }),
  }).then(d => d.json())
}

// somewhere-else.js
import React, {useEffect, useState} from "react"
import {gqlr, gql} from "./gql"

const USER = gql`
  fragment USER on User {
    username
  }
`

const query = gqlr`
  query {
    me { ...USER }
  }
  ${USER}
`

export const Username = () => {
  const [username, setUsername] = useState(null)

  useEffect(() => {
    query({
      endpoint: "http://...",
      headers: {authorization: "bearer ..."},
    }).then(response => setUsername(response.data.me.username))
  }, [])

  return username == null ? null : username
}

Role your own pipeline thing?

const pipe = (fns = []) => token => {
  return fns.reduce((token, fn) => fn(token), token)
}

const param = (key, value) => token => {
  token.params = token.parms || {}
  token.params[key] = value
  return token
}

const script = (...args) => token => {
  token.type = "script"
  token.value = templar(...args)(token.params)
  return token
}

const query = (...args) => token => {
  token.type = "query"
  token.value = templar(...args)(token.parms)
  return token
}

const desc = (...args) => token => {
  token.description = templar(...args)(token.params)
  return token
}

const rawr = pipe([
  param("msg", "woot woot im a boot"),
  script`
    pub fun main() {
      log("msg: ${o => o.msg}")
    }
  `,
  desc`
    the message: ${o => o.msg}
  `,
])

assert(rawr, {
  params: {
    msg: "woot woot im a boot",
  },
  type: "script",
  code: `
    pub fun main() {
      log("msg: woot woot im a boot")
    }
  `,
  descrition: `
    the message: woot woot im a boot
  `,
})