kejunmao / unplugin-preprocessor-directives Goto Github PK

View Code? Open in Web Editor NEW

46.0 2.0 3.0 186 KB

preprocessor directives for jsx,tsx,js,ts,html,css,vue and more

License: MIT License

HTML 1.60% TypeScript 98.02% JavaScript 0.38%

conditional-compilation directives esbuild preprocessor rollup unplugin vite webpack

unplugin-preprocessor-directives's Issues

Conflict with app.config.compilerOptions.whitespace = 'preserve', lost whitespace.

In Vue SFC file, with the following code

<template>
  <jy-form-dialog ref="form" v-model:entity="entity" v-bind="options" max-col="4">
        <jy-form-item label="输入控件配置说明" col="2">
          <pre>
{
  "tag": "jy-dict", //
  "data": {
    "props": {
      "type": "radio", // 显示类型：radio、单选按钮；checkbox、多选按钮；其他取值为下拉框
      "dict": "Common_YesNo", // 字典编码或者字典项列表如：["所属机构", "系统名称", "不显示名称" ]
      "dataType": "String" // 如果取值为字符串，需要指定为为String，否则会当做数值类型处理
    }
  }
}</pre
          >
        </jy-form-item>
  </jy-form-dialog>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'SettingDetail'
})
</script>

And in vite.config.ts file, use this plugin

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import PreprocessorDirectives from 'unplugin-preprocessor-directives/vite'

// https://vitejs.dev/config/
export default defineConfig((configEnv:any) => {
  return {
    plugins: [PreprocessorDirectives({ /* options */ }), vue()], // with PreprocessorDirectives plugin, the pre tag display not ok
    // plugins: [vue()] // use this line, the pre tag display ok
  }
})

I want to keep the whitespace in pre tag content for indentation display, if use PreprocessorDirectives plugin, the indentation lost.

I used following versions:
"vue": "^3.4.24",
"@vitejs/plugin-vue": "^5.0.4",
"unplugin-preprocessor-directives": "^1.0.3",
"vite": "^5.2.10",

Sourcemaps always report position 0

In this function the sourcemap positions are always returned as position 0. This breaks mapping back to the original source and coverage reporting.

unplugin-preprocessor-directives/src/core/context/index.ts

Line 88 in 667aca0

transformWithMap(code: string, _id: string) {

  transformWithMap(code: string, _id: string) {
    const generated = this.transform(code, _id)
    if (generated) {
      const ms = new MagicString(code, { filename: _id })
      ms.overwrite(0, code.length, generated)
      return {
        code: ms.toString(),
        map: ms.generateMap({ hires: true }),
      }
    }
  }

A simpler reproducible example (effectively the same code):

import MagicString from 'magic-string';

const code = `const answer = 42;\n\nconsole.log("The answer is", answer);`;
const generated = code;

const ms = new MagicString(code, { filename: 'test.ts' })
ms.overwrite(0, code.length, generated)
console.log(ms.generateMap({ hires: true }));

Returns:

SourceMap {
  version: 3,
  file: undefined,
  sources: [ '' ],
  sourcesContent: undefined,
  names: [],
  mappings: 'AAAA;AAAA'
}

AAAA is position 0 for both statements.

When using scss, files imported through @ import will not be converted

Such as:

However, this can work normally:

请教是否支持在vite+vue3下，在 template 里使用？

请教是否支持在vite+vue3下，在 template 里使用？比如

<template>
   #if SAAS
   <div>官方系统</div>
   #end

    #if OEM
   <div>定制化系统</div>
   #end
</template>

This plugin breaks vitest coverage report

When using this plugin and adding // #v-ifdef DEV and // #v-endif comments in my code, vitest marks all code as 100% covered (istanbul).

If I remove the directives, the coverage works again:

Similar issues can be found at:

unplugin/unplugin-vue-components#333
unplugin/unplugin-vue-components#219 (maybe related, this is referred to in the previous link)

~~This should be easily reproducible.~~

Here is a minimal reproduction: https://stackblitz.com/edit/vitest-dev-vitest-4tlh7n?file=src%2Findex.ts

Is there a workaround to solve this problem?

Cannot read properties of undefined (reading 'match') error when using comments without space before text

Hi,
after upgrading to version 1.0.0 (and also the latest 1.0.2) I'm getting the following error using the vite plugin (unplugin-preprocessor-directives/vite)

Cannot read properties of undefined (reading 'match')

After some testing, I found that this error seems to occur if a javascript comment does not contain a space after "//".
This comment creates an error : "//error comment", while this works without any issue "// working comment".
I've also created a playground demonstrating the issue at stackblitz:
https://stackblitz.com/edit/vitejs-vite-hy77nf?file=package.json,src%2FApp.vue
(Comment is in App.vue)

Thanks.

Edit: After rechecking stackblitz with Firefox I get an erorr saying "comment is undefined", Chrome shows the error above.

Import error with webpack

node:internal/modules/esm/resolve:853
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /Volumes/Extra/Code/conditional/node_modules/.pnpm/[email protected]/node_modules/unplugin-preprocessor-directives/dist/chunk-C3KB5XGL.js
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v20.11.1
 ELIFECYCLE  Command failed with exit code 1.
       Error The "beforeDevCommand" terminated with a non-zero status code.

nextjs config:

/** @type {import('next').NextConfig} */
import PreprocessorDirectives from 'unplugin-preprocessor-directives/webpack'

const nextConfig = {
    output: 'export',
    webpack: (config) => {
        config.plugins = config.plugins || []
        config.plugins.push(new PreprocessorDirectives({}))
        return config
    }
};

export default nextConfig;

In vue-cli5, plugin will conflict with html-webpack-plugin.

When I using this plugin with vue-cli5, vue-cli-service serve and vue-cli-service build will throw error:

Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/.pnpm/[email protected][email protected]/node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/.pnpm/[email protected]/node_modules/unplugin/dist/webpack/loaders/transform.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html lang="">
  |   <head>

I found html-webpack-plugin/lib/loader.js will check if there is any other loader, if exists it will return unmodified source, which cause error.
After some dig, I found add transformInclude hook and /\.html/ to plugin exclude config, unplugin will not create the loader which conflict with html-webpack-plugin and solve issue. But it also mean this plugin cant process html code. Maybe there is better way to fix this?

kejunmao / unplugin-preprocessor-directives Goto Github PK

unplugin-preprocessor-directives's Issues

Conflict with app.config.compilerOptions.whitespace = 'preserve', lost whitespace.

Sourcemaps always report position 0

When using scss, files imported through @ import will not be converted

请教是否支持在vite+vue3下，在 template 里使用？

This plugin breaks vitest coverage report

Cannot read properties of undefined (reading 'match') error when using comments without space before text

Import error with webpack

In vue-cli5, plugin will conflict with html-webpack-plugin.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent