🩹 fix(minor): fix ts/vue error (#2623)

- Fix: HMR error in projects using `@roots/bud-vue` and `@roots/bud-typescript`. - Test: Add e2e tests for `examples/vue-3` and `examples/vue-typescript` ## Type of change **PATCH: backwards compatible change**
roots · Jul 23, 2024 · c57a3ba · c57a3ba
1 parent b91cc42
commit c57a3ba
Show file tree

Hide file tree

Showing 15 changed files with 655 additions and 105 deletions.
diff --git a/examples/css-module/package.json b/examples/css-module/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "devDependencies": {
     "@roots/bud": "workspace:*",
+    "@roots/bud-postcss": "workspace:*",
     "@roots/bud-tailwindcss": "workspace:*"
   }
 }
diff --git a/examples/vue-typescript/package.json b/examples/vue-typescript/package.json
@@ -6,6 +6,10 @@
   "browserslist": [
     "extends @roots/browserslist-config"
   ],
+  "dependencies": {
+    "typescript": "5.5.3",
+    "vue": "3.4.33"
+  },
   "devDependencies": {
     "@roots/bud": "workspace:*",
     "@roots/bud-sass": "workspace:*",

diff --git a/examples/vue-typescript/src/index.ts b/examples/vue-typescript/src/index.ts
@@ -2,4 +2,4 @@ import {createApp} from 'vue'
 import App from './App.vue'
 
 const app = createApp(App)
-app.mount('#app')
+app.mount('#root')
diff --git a/sources/@roots/bud-build/src/config/module.ts b/sources/@roots/bud-build/src/config/module.ts
@@ -13,9 +13,9 @@ export const module: Factory<`module`> = async ({
   path,
 }) =>
   filter(`build.module`, {
-    noParse: getNoParse(filter),
+    noParse: filter(`build.module.noParse`, undefined),
     rules: getRules({filter, path, rules}),
-    unsafeCache: getUnsafeCache(filter),
+    unsafeCache: filter(`build.module.unsafeCache`, undefined),
   })
 
 /**
@@ -33,7 +33,7 @@ const getRules = ({filter, path, rules}: Props): Array<RuleSetRule> => {
         ? {
             oneOf: [
               rules[`inline-image`]?.toWebpack?.(),
-              rules.image.toWebpack?.(),
+              rules.image?.toWebpack?.(),
             ].filter(Boolean),
             test: filter(`pattern.image`),
           }
@@ -43,7 +43,7 @@ const getRules = ({filter, path, rules}: Props): Array<RuleSetRule> => {
         ? {
             oneOf: [
               rules[`inline-font`]?.toWebpack?.(),
-              rules.font.toWebpack(),
+              rules.font?.toWebpack?.(),
             ].filter(Boolean),
             test: filter(`pattern.font`),
           }
@@ -53,65 +53,45 @@ const getRules = ({filter, path, rules}: Props): Array<RuleSetRule> => {
         ? {
             oneOf: [
               rules[`inline-svg`]?.toWebpack?.(),
-              rules.svg.toWebpack(),
+              rules.svg?.toWebpack?.(),
             ].filter(Boolean),
             test: filter(`pattern.svg`),
           }
         : undefined,
     ]),
-    {
-      oneOf: [
-        ...filter(`build.module.rules.oneOf`, [
-          ...getDefinedRules({rules}),
-          ...makeIssuerRuleSet({filter, path, rules}),
-        ]),
-      ].filter(Boolean),
-    },
+
+    ...filter(`build.module.rules.oneOf`, [
+      ...makeDefinedRuleSet({rules}),
+      ...makeIssuerRuleSet({filter, path, rules}),
+    ]).filter(Boolean),
+
     ...filter(`build.module.rules.after`, []),
   ].filter(Boolean)
 }
 
 /**
- * Get the standard rules defined in the bud config, extensions, etc.
+ * Make defined rule set
  */
-const getDefinedRules = ({rules}: Partial<Props>) => {
-  return [
-    ...Object.entries(rules)
-      .filter(([key, _]) => {
-        return !DEFINED.includes(key) && !RESOURCES.includes(key)
-      })
-      .map(([_, value]) => value),
-    ...DEFINED.map(key => rules[key]),
-  ]
+const makeDefinedRuleSet = ({rules}: {rules: Props['rules']}) => {
+  return Object.entries(rules)
+    .filter(
+      ([key]) =>
+        ![
+          `font`,
+          `image`,
+          `inline-font`,
+          `inline-image`,
+          `inline-svg`,
+          `svg`,
+        ].includes(key),
+    )
+    .map(([, rule]) => rule)
     .filter(Boolean)
-    .map(rule => (`toWebpack` in rule ? rule.toWebpack() : rule))
+    .map(rule => {
+      return `toWebpack` in rule ? rule.toWebpack() : rule
+    })
 }
 
-const RESOURCES = [
-  `image`,
-  `font`,
-  `svg`,
-  `inline-font`,
-  `inline-image`,
-  `inline-svg`,
-]
-
-const DEFINED = [
-  `csv`,
-  `toml`,
-  `yml`,
-  `json`,
-  `html`,
-  `webp`,
-  `css-module`,
-  `css`,
-  `sass-module`,
-  `sass`,
-  `vue`,
-  `js`,
-  `ts`,
-]
-
 /**
  * Get rules for css and css-module imports issued by non-css files.
  */
@@ -152,13 +132,3 @@ const makeIssuerRuleSet = ({filter, path, rules}: Props) => {
 
   return results
 }
-
-const getNoParse = (filter: Props[`filter`]) =>
-  filter(`build.module.noParse`, undefined)
-
-/**
- * By leaving undefined, webpack will strongly cache parsed modules from node_modules
- * but leave the rest. This is the default behavior.
- */
-const getUnsafeCache = (filter: Props[`filter`]) =>
-  filter(`build.module.unsafeCache`, undefined)
diff --git a/sources/@roots/bud-build/src/items/index.ts b/sources/@roots/bud-build/src/items/index.ts
@@ -10,8 +10,8 @@ export const css: Factory<Item> = async ({makeItem}) =>
   makeItem({
     ident: `css`,
     loader: `css`,
-    options: {modules: false},
   }).setOptions(({hooks: {filter}}) => ({
+    modules: false,
     sourceMap: isBoolean(filter(`build.devtool`))
       ? filter(`build.devtool`)
       : true,

diff --git a/sources/@roots/bud-build/src/rules/css.module.ts b/sources/@roots/bud-build/src/rules/css.module.ts
@@ -3,7 +3,7 @@ import type {Factory} from '@roots/bud-build/registry'
 const cssModule: Factory = async ({filter, makeRule, path}) =>
   makeRule()
     .setTest(filter(`pattern.cssModule`))
-    .setInclude([() => path(`@src`)])
+    .setInclude([({path}) => path(`@src`)])
     .setUse([`precss`, `css-module`])
 
 export {cssModule as default}
diff --git a/sources/@roots/bud-framework/src/bootstrap/index.ts b/sources/@roots/bud-framework/src/bootstrap/index.ts
@@ -89,7 +89,7 @@ export const bootstrap = async (bud: Bud) => {
       'location.@modules': bud.context.paths.modules,
       'location.@src': bud.context.paths.input,
       'location.@storage': bud.context.paths.storage,
-      'pattern.css': /(?!.*\.module)\.css$/,
+      'pattern.css': /^(?!.*\.module\.css$).*\.css$/,
       'pattern.cssModule': /\.module\.css$/,
       'pattern.csv': /\.(csv|tsv)$/,
       'pattern.font': /\.(ttf|otf|eot|woff2?|ico)$/,
@@ -100,8 +100,8 @@ export const bootstrap = async (bud: Bud) => {
       'pattern.json5': /\.json5$/,
       'pattern.md': /\.md$/,
       'pattern.modules': /(node_modules|bower_components|vendor)/,
-      'pattern.sass': /(?!.*\.module)\.(scss|sass)$/,
-      'pattern.sassModule': /\.module\.(scss|sass)$/,
+      'pattern.sass': /^(?!.*\.module\.s[ac]ss$).*\.s[ac]ss$/,
+      'pattern.sassModule': /\.module\.s[ac]ss$/,
       'pattern.svg': /\.svg$/,
       'pattern.toml': /\.toml$/,
       'pattern.ts': /\.(m?tsx?)$/,

diff --git a/sources/@roots/bud-postcss/src/extension/index.ts b/sources/@roots/bud-postcss/src/extension/index.ts
@@ -120,16 +120,16 @@ class BudPostCss extends BudPostCssOptionsApi {
         }),
       })
 
-    build.rules.css.setUse((items = []) => [...items, `postcss`])
-    build.rules[`css-module`]?.setUse((items = []) => [
-      ...items,
-      `postcss`,
-    ])
+    build.rules.css.setUse((items = []) =>
+      items.includes(`postcss`) ? items : [...items, `postcss`],
+    )
+    build.rules[`css-module`]?.setUse((items = []) =>
+      items.includes(`postcss`) ? items : [...items, `postcss`],
+    )
 
     const config = Object.values(context.files).find(
       file => file?.name?.includes(`postcss`) && file?.module,
     )
-
     if (config) {
       this.logger.log(
         `PostCSS configuration is being overridden by project configuration file.`,
@@ -192,7 +192,7 @@ class BudPostCss extends BudPostCssOptionsApi {
       ...omit(this.options, [`plugins`, `order`, `postcssOptions`]),
       plugins: this.get(`order`).map(this.getPlugin).filter(Boolean),
     })
-      .filter(([k, v]) => !isUndefined(v))
+      .filter(([, v]) => !isUndefined(v))
       .reduce((a, [k, v]) => ({...a, [k]: v}), {})
 
     this.logger.info(`postcss options`, options)

diff --git a/sources/@roots/bud-support/src/json5/index.ts b/sources/@roots/bud-support/src/json5/index.ts
@@ -1,3 +1 @@
-import * as json5 from 'json5'
-
-export default json5
+export {default} from 'json5'
diff --git a/sources/@roots/bud-vue/src/extension.ts b/sources/@roots/bud-vue/src/extension.ts
@@ -6,7 +6,6 @@ import {join} from 'node:path'
 import {Extension} from '@roots/bud-framework/extension'
 import {
   bind,
-  dependsOnOptional,
   expose,
   label,
   options,
@@ -32,7 +31,6 @@ interface Options {
   version: `^3`,
 })
 @expose(`vue`)
-@dependsOnOptional([`@roots/bud-postcss`, `@roots/bud-sass`])
 export default class BudVue extends Extension<
   Options,
   WebpackPluginInstance
@@ -192,41 +190,42 @@ export default class BudVue extends Extension<
     const style = await this.resolve(`vue-style-loader`, import.meta.url)
     if (!style) return this.logger.error(`vue-style-loader not found`)
 
-    bud.hooks.on(`build.resolveLoader.alias`, (aliases = {}) => ({
-      ...aliases,
-      [`vue-loader`]: loader,
-      [`vue-style-loader`]: style,
-    }))
+    bud.hooks
+      .on(`build.resolveLoader.alias`, (aliases = {}) => ({
+        ...aliases,
+        [`vue-loader`]: loader,
+        [`vue-style-loader`]: style,
+      }))
+      .hooks.on(`build.resolve.extensions`, (extensions = new Set()) =>
+        extensions.add(`.vue`),
+      )
 
     bud.build
       .setLoader(`vue`, loader)
       .setLoader(`vue-style`, style)
       .setItem(`vue`, {ident: `vue`, loader: `vue`})
       .setItem(`vue-style`, {ident: `vue-style`, loader: `vue-style`})
 
-    await bud.hooks
-      .on(`build.resolve.extensions`, (extensions = new Set()) =>
-        extensions.add(`.vue`),
-      )
-      .hooks.on(`build.module.rules.before`, (rules = []) => [
-        ...rules,
-        {
-          include: [bud.path(`@src`)],
-          test: bud.hooks.filter(`pattern.vue`),
-          use: [bud.build.items.vue.toWebpack()],
-        },
-      ])
-      .extensions.add({
-        label: `vue-loader`,
-        make: async () => {
-          const {VueLoaderPlugin} = await this.import(
-            `vue-loader`,
-            import.meta.url,
-            {raw: true},
-          )
-          return new VueLoaderPlugin()
-        },
-      })
+    bud.hooks.on(`build.module.rules.before`, (rules = []) => [
+      ...rules,
+      {
+        include: [bud.path(`@src`)],
+        test: bud.hooks.filter(`pattern.vue`),
+        use: [bud.build.items.vue.toWebpack()],
+      },
+    ])
+
+    await bud.extensions.add({
+      label: `vue-loader`,
+      make: async () => {
+        const {VueLoaderPlugin} = await this.import(
+          `vue-loader`,
+          import.meta.url,
+          {raw: true},
+        )
+        return new VueLoaderPlugin()
+      },
+    })
   }
 
   /**