A fake template literal tag to trick syntax highlighters, linters and formatters into action.
npm install fake-tagA fake template literal tag to trick syntax highlighters, linters and formatters into action. Interpolations and escapes are tested.
For Node.js, to install fake-tag with npm, run:
``sh`
npm install fake-tag
For Deno and browsers, an example import map:
`json`
{
"imports": {
"fake-tag": "https://unpkg.com/fake-tag@5.0.0/fakeTag.mjs"
}
}
Then, import and use the template literal tag fakeTag.
Tagging a GraphQL SDL string with gql:
`js
import gql from "fake-tag";
const typeDefs = gql
"A foo."
type Foo {
"The \Foo\ ID."
id: ID!
};`
Supported runtime environments:
- Node.js versions ^14.17.0 || ^16.0.0 || >= 18.0.0.> 0.5%, not OperaMini all, not dead
- Deno.
- Browsers matching the Browserslist query .
Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:
- compilerOptions.allowJs should be true.compilerOptions.maxNodeModuleJsDepth
- should be reasonably large, e.g. 10.compilerOptions.module
- should be "node16" or "nodenext".
The npm package fake-tag features optimal JavaScript module design. These ECMAScript modules are exported via the package.json field exports:
A comment tag looks like this:
`js
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.
This may be temptingly simple:
`js
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:
`diffFoo
"A foo."
type Foo {
- "The ID."Foo\
+ "The \ ID."``
id: ID!
}