fake-tag

A fake template literal tag to trick syntax highlighters, linters and formatters into action.

Usage no npm install needed!

<script type="module">
  import fakeTag from 'https://cdn.skypack.dev/fake-tag';
</script>

README

fake-tag

npm version CI status

A fake template literal tag to trick syntax highlighters, linters and formatters into action. Interpolations and escapes are tested.

Setup

To install with npm, run:

npm install fake-tag

API

function fakeTag

A fake template literal tag that doesn’t do anything except return the tagged template string. Import and use the fake tag with the required name, e.g. gql.

Parameter Type Description
literals Array Template string literals.
expressions …* Template string expressions.

Returns: string — The tagged template string.

Examples

How to import.

import fakeTag from 'fake-tag';

How to require.

const fakeTag = require('fake-tag');

Tagging a GraphQL SDL string with gql.

import gql from 'fake-tag';

const typeDefs = gql`
  "A foo."
  type Foo {
    "The \`Foo\` ID."
    id: ID!
  }
`;

FAQ

Why not comment tags?

A comment tag looks like this:

const QUERY = /* GraphQL */ `
  {
    foo
  }
`;

They are far superior to a fake tag:

  • No dependency to manage.
  • No inconvenient imports.
  • No bundle size bloat.
  • No runtime overhead.

Unfortunately not all tools support them yet. prettier has since v1.13.0, but eslint-plugin-graphql at v3.1.0 still doesn’t.

Why not String.raw?

This may be temptingly simple:

const gql = String.raw;
const QUERY = gql`
  {
    foo
  }
`;

However, it doesn’t unescape characters. For the usage example, if you console.log(typeDefs) before and after replacing the import with const gql = String.raw you will see the difference in the type description markdown:

    "A foo."
    type Foo {
-     "The `Foo` ID."
+     "The \`Foo\` ID."
      id: ID!
    }