This plugin strips code tags from your source code.
npm add -D code-tag @hyrious/esbuild-plugin-code-tag
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));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.
-
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>`;
MIT @ hyrious