@hyrious/esbuild-plugin-code-tag

This plugin strips code tags from your source code.

Install

npm add -D code-tag @hyrious/esbuild-plugin-code-tag

Usage

const { build } = require("esbuild");
const { codeTag } = require("@hyrious/esbuild-plugin-code-tag");

build({
  entryPoints: ["src/index.ts"],
  bundle: true,
  format: "esm",
  plugins: [codeTag()],
}).catch(() => process.exit(1));

Options

codeTag({
  filter: /\.(m?ts|[jt]sx)$/,
  tags: ["html", "css", "gql", "graphql", "md", "markdown", "sql"],
  dedent: [],
});

filter (default: /\.(m?ts|[jt]sx)$/)

A RegExp passed to onLoad() to match source codes, it is recommended to set a custom filter to skip files for better performance. By default it does not process .{js,mjs} files.

tags (default: ["html", "css", "gql", "graphql", "md", "markdown", "sql"])

An array of tags to be stripped. For example if you set tags to ["html", "css"], the following transform will happen:

console.log(html`
  <h2>Title</h2>
  <p>hello, world!</p>
`);

becomes

console.log(`
  <h2>Title</h2>
  <p>hello, world!</p>
`);

dedent (default: [])

Template literals after these tags will be de-indented. For example if you set dedent to ["html", "css"], the following transform will happen:

console.log(html`
  <h2>Title</h2>
  <p>hello, world!</p>
`);

becomes

console.log(`<h2>Title</h2>
<p>hello, world!</p>`);

By default dedent is empty, so that the default behavior will be the same as not having this plugin.

Caveats

• It does not support nested code tags, i.e.

  const fragment = html`
    <style>
      ${css`
        body {
          color: red;
        }
      `}
    </style>
  `;

  If you need to write code like above, you can move inner strings to another scope:

  const style = css`
    body {
      color: red;
    }
  `;
  const fragment = html`<style>${style}<style>`;

License

MIT @ hyrious