{"id":15495827,"url":"https://github.com/kejunmao/unplugin-preprocessor-directives","last_synced_at":"2025-05-08T21:30:26.633Z","repository":{"id":192962126,"uuid":"687428920","full_name":"KeJunMao/unplugin-preprocessor-directives","owner":"KeJunMao","description":"preprocessor directives for jsx,tsx,js,ts,html,css,vue and more","archived":false,"fork":false,"pushed_at":"2024-05-30T07:00:35.000Z","size":186,"stargazers_count":81,"open_issues_count":5,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-09T02:03:05.563Z","etag":null,"topics":["conditional-compilation","directives","esbuild","preprocessor","rollup","unplugin","vite","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KeJunMao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-05T10:44:23.000Z","updated_at":"2025-01-14T22:59:27.000Z","dependencies_parsed_at":"2024-10-24T23:25:06.810Z","dependency_job_id":"eaf1623c-d185-4c92-b613-a6ff0c710ac8","html_url":"https://github.com/KeJunMao/unplugin-preprocessor-directives","commit_stats":{"total_commits":60,"total_committers":1,"mean_commits":60.0,"dds":0.0,"last_synced_commit":"667aca04e39db449f4fe533e10f22d1dc7054735"},"previous_names":["kejunmao/unplugin-preprocessor-directives"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeJunMao%2Funplugin-preprocessor-directives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeJunMao%2Funplugin-preprocessor-directives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeJunMao%2Funplugin-preprocessor-directives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeJunMao%2Funplugin-preprocessor-directives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeJunMao","download_url":"https://codeload.github.com/KeJunMao/unplugin-preprocessor-directives/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238044095,"owners_count":19407128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-compilation","directives","esbuild","preprocessor","rollup","unplugin","vite","webpack"],"created_at":"2024-10-02T08:19:48.905Z","updated_at":"2025-02-10T02:10:13.456Z","avatar_url":"https://github.com/KeJunMao.png","language":"TypeScript","readme":"\u003cimg src=\"assets/logo.svg\" alt=\"logo\" width=\"100\" height=\"100\" align=\"right\" /\u003e\n\n# unplugin-preprocessor-directives\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![github stars][github-stars-src]][github-stars-href]\n[![bundle][bundle-src]][bundle-href]\n[![License][license-src]][license-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n\nEnglish | [简体中文](./README.zh-cn.md)\n\n\u003e[!IMPORTANT]\n\u003e If you like this project, please consider giving it a star ⭐️. Your support will help this project become a part of the [unplugin organization](https://github.com/unplugin/.github/issues/5)!\n\n## Install\n\n```bash\nnpm i unplugin-preprocessor-directives\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport PreprocessorDirectives from 'unplugin-preprocessor-directives/vite'\n\nexport default defineConfig({\n  plugins: [\n    PreprocessorDirectives({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport PreprocessorDirectives from 'unplugin-preprocessor-directives/rollup'\n\nexport default {\n  plugins: [\n    PreprocessorDirectives({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-preprocessor-directives/webpack')({ /* options */ })\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    ['unplugin-preprocessor-directives/nuxt', { /* options */ }],\n  ],\n})\n```\n\n\u003e This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-preprocessor-directives/webpack')({ /* options */ }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport PreprocessorDirectives from 'unplugin-preprocessor-directives/esbuild'\n\nbuild({\n  plugins: [PreprocessorDirectives()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRspack (⚠️ experimental)\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rspack.config.js\nmodule.exports = {\n  plugins: [\n    require('unplugin-preprocessor-directives/rspack')({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Usage\n\n### Defining symbols\n\nYou use the following two preprocessor directives to define or undefine symbols for conditional compilation:\n\n- `#define`: Define a symbol.\n- `#undef`: Undefine a symbol.\n\nYou use `#define` to define a symbol. When you use the symbol as the expression that's passed to the `#if` directive, the expression will evaluate to `true`, as the following example shows:\n\n```ts\n// #define VERBOSE\n\n// #if VERBOSE\nconsole.log('Verbose output version')\n// #endif\n```\n\n### Conditional compilation\n\n- `#if`: Opens a conditional compilation, where code is compiled only if the specified symbol is defined and evaluated to true.\n- `#elif`: Closes the preceding conditional compilation and opens a new conditional compilation based on if the specified symbol is defined and evaluated to true.\n- `#else`: Closes the preceding conditional compilation and opens a new conditional compilation if the previous specified symbol isn't defined or evaluated to false.\n- `#endif`: Closes the preceding conditional compilation.\n\n\u003e [!NOTE]\n\u003e By default, use vite's `loadEnv` function to load environment variables based on `process.env.NODE_ENV` and compile symbols as conditions.\n\n```ts\n// src/index.ts\n\n// #if DEV\nconsole.log('Debug version')\n// #endif\n\n// #if !MYTEST\nconsole.log('MYTEST is not defined or false')\n// #endif\n```\n\nYou can use the operators `==` (equality) and `!=` (inequality) to test for the bool values `true` or `false`. `true` means the symbol is defined. The statement `#if DEBUG` has the same meaning as `#if (DEBUG == true)`. You can use the `\u0026\u0026` (and), `||` (or), and `!` (not) operators to evaluate whether multiple symbols have been defined. You can also group symbols and operators with parentheses.\n\n```ts\nclass MyClass {\n  constructor() {\n    // #if (DEBUG \u0026\u0026 MYTEST)\n    console.log('DEBUG and MYTEST are defined')\n    // #elif (DEBUG==false \u0026\u0026 !MYTEST)\n    console.log('DEBUG and MYTEST are not defined')\n    // #endif\n  }\n}\n```\n### Error and warning and info messages\n\nYou instruct the compiler to generate user-defined compiler errors and warnings and informational messages.\n\n- `#error`: Generates an error.\n- `#warning`: Generates a warning.\n- `#info`: Generates an informational message.\n\n```ts\n// #error this is an error message\n// #warning this is a warning message\n// #info this is an info message\n```\n## Custom directive\n\nYou can used `defineDirective` to define your own directive.\n\nTaking the built-in directive as an example:\n\n```ts\nexport const MessageDirective = defineDirective\u003cMessageToken, MessageStatement\u003e(context =\u003e ({\n  lex(comment) {\n    return simpleMatchToken(comment, /#(error|warning|info)\\s*(.*)/)\n  },\n  parse(token) {\n    if (token.type === 'error' || token.type === 'warning' || token.type === 'info') {\n      this.current++\n      return {\n        type: 'MessageStatement',\n        kind: token.type,\n        value: token.value,\n      }\n    }\n  },\n  transform(node) {\n    if (node.type === 'MessageStatement') {\n      switch (node.kind) {\n        case 'error':\n          context.logger.error(node.value, { timestamp: true })\n          break\n        case 'warning':\n          context.logger.warn(node.value, { timestamp: true })\n          break\n        case 'info':\n          context.logger.info(node.value, { timestamp: true })\n          break\n      }\n      return createProgramNode()\n    }\n  },\n  generate(node, comment) {\n    if (node.type === 'MessageStatement' \u0026\u0026 comment)\n      return `${comment.start} #${node.kind} ${node.value} ${comment.end}`\n  },\n}))\n```\n\n### `enforce: 'pre' | 'post'`\n\nExecution priority of directives\n\n- `pre`: Execute as early as possible\n- `post`: Execute as late as possible\n\n[npm-version-src]: https://img.shields.io/npm/v/unplugin-preprocessor-directives?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[npm-version-href]: https://npmjs.com/package/unplugin-preprocessor-directives\n[npm-downloads-src]: https://img.shields.io/npm/dw/unplugin-preprocessor-directives?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[npm-downloads-href]: https://npmjs.com/package/unplugin-preprocessor-directives\n[github-stars-src]: https://img.shields.io/github/stars/kejunmao/unplugin-preprocessor-directives?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[github-stars-href]: https://github.com/kejunmao/unplugin-preprocessor-directives\n[bundle-src]: https://img.shields.io/bundlephobia/minzip/unplugin-preprocessor-directives?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[bundle-href]: https://bundlephobia.com/result?p=unplugin-preprocessor-directives\n[license-src]: https://img.shields.io/github/license/kejunmao/unplugin-preprocessor-directives.svg?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[license-href]: https://github.com/kejunmao/unplugin-preprocessor-directives/blob/main/LICENSE\n[jsdocs-src]: https://img.shields.io/badge/jsDocs.io-reference-18181B?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[jsdocs-href]: https://www.jsdocs.io/package/unplugin-preprocessor-directives\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkejunmao%2Funplugin-preprocessor-directives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkejunmao%2Funplugin-preprocessor-directives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkejunmao%2Funplugin-preprocessor-directives/lists"}