hmr: vue sfc update not using pug extractor

[tjk]

EDIT: See latest comment with tracing in second comment.

I can put together a minimal repro later unless this is expected?

(Refresh fixes the issue -- my stack is loosely based off vite/packages/playground/ssr-vue)

[tjk]

Okay after doing some tracing it looks like the pug extractor is not actually running when the SFC is changed so it doesn't find the proper token.

// vite.config.js
...
    Unocss({
      presets: [
        UnoPresetIcons(),
      ],
      extractors: [
        extractorPug(),
        extractorSplit,
      ],
    }),
...

On .vue file update, let's say the following change:

-.i-mdi-close.ml-1.text-grey-300.hover_text-grey-500
+.i-mdi-close-box.ml-1.text-grey-300.hover_text-grey-500

uno.generate does not see pug extracted tokens (just split), so for example:

tokens [
   ...
  '.i-mdi-close-box.ml-1.text-grey-300.hover_text-grey-500'
]

---

...
uno pug compile ~/filea.vue
uno pug compile ~/fileb.vue

12:12:44 PM [vite] hmr update ~/fileb.vue?vue&type=template&lang.js

(but no uno pug compile line)

---

Oh! might just be the regex in pug extractor -- _a.match(/\.vue$/)) -- should ignore query string??

So that is one part of the issue, but then the other part is because plugin-vue just emits the template with that query string...

[tjk]

So I'm not familiar enough with @vitejs/plugin-vue but it looks like (pug) extract should also handle .vue?vue&type=template&lang.js somehow (current just checks if module id ends with .vue or ends with .pug) -- but it doesn't know that the template has lang pug at that point.

[antfu]

I don't have a repo to play with, tried to fix it on 3d308a8, can you verify if it works for you? Thanks

[tjk]

It just emits the raw pug (template section of the sfc) so i'm not sure this will work because regexVueTemplate looks for <template lang="pug"> but let me try...

[tjk]

Also there might be something wrong with the npm publishing? built @unocss/extractor-pug @ 0.6.2 doesn't have the changes?

[tjk]

test % npm init -y
Wrote to /private/tmp/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

tj@tjk-mbp test % npm install --save @unocss/extractor-pug@0.6.2
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ @unocss/extractor-pug@0.6.2
added 1 package from 1 contributor and audited 1 package in 0.873s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

tj@tjk-mbp test % cat node_modules/@unocss/extractor-pug/dist/index.js
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
var regexVueTemplate = /<template.*?lang=['"]pug['"][^>]*?>\n([\s\S]*?\n)<\/template>/gm;
function extractorPug() {
  async function compile(code, id) {
    const Pug = await Promise.resolve().then(() => require("pug"));
    try {
      return Pug.compile(code, { filename: id })();
    } catch (e) {
    }
  }
  return {
    name: "pug",
    order: -1,
    async extract(ctx) {
      var _a, _b, _c;
      if ((_b = ctx.id) == null ? void 0 : _b.match(/\.vue$/)) {

[tjk]

Oh you have a syntax error I believe in that patch!

-      if (ctx.id?.match(/\.vue$/ || ctx.id?.match(/\.vue\?vue/))) {
+      if (ctx.id?.match(/\.vue$/) || ctx.id?.match(/\.vue\?vue/)) {

EDIT: Why doesn't tsup fail in that case...

EDIT 2: it was valid syntax just surprised typescript would not complain... maybe it detects the || short-circuits so match arg will always be a regex... kind of weird!

[davay42]

Pug support is very needed. I'm not skilled enough to contribute code, but I hope @tjk can figure it out soon. Thank you for the struggle!

[tjk]

Amazing!! I was starting on this patch... but taking it real slow. Thank you @antfu