Merge pull request #77 from dev-five-git/webpack-hmr

Upgrade webpack hmr

Author: owjs3901

.changeset/curly-readers-check.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/webpack-plugin": patch
+---
+
+Upgrade webpack hmr

packages/webpack-plugin/src/__tests__/css-loader.test.ts

@@ -1,16 +1,19 @@
-import { getCss } from '@devup-ui/wasm'
+import { resolve } from 'node:path'
 
 import devupUICssLoader from '../css-loader'
 
-vi.mock('@devup-ui/wasm')
+vi.mock('node:path')
 
 describe('devupUICssLoader', () => {
   it('should invoke callback', () => {
-    vi.mocked(getCss).mockReturnValue('css')
     const callback = vi.fn()
+    const addContextDependency = vi.fn()
+    vi.mocked(resolve).mockReturnValue('resolved')
     devupUICssLoader.bind({
       callback,
-    } as any)(Buffer.from(''), '')
-    expect(callback).toBeCalledWith(null, 'css')
+      addContextDependency,
+    } as any)(Buffer.from('data'), '')
+    expect(callback).toBeCalledWith(null, Buffer.from('data'))
+    expect(addContextDependency).toBeCalledWith('resolved')
   })
 })

packages/webpack-plugin/src/css-loader.ts

@@ -1,7 +1,9 @@
-import { getCss } from '@devup-ui/wasm'
+import { resolve } from 'node:path'
+
 import type { RawLoaderDefinitionFunction } from 'webpack'
 
-const devupUICssLoader: RawLoaderDefinitionFunction = function () {
-  this.callback(null, getCss())
+const devupUICssLoader: RawLoaderDefinitionFunction = function (a) {
+  this.addContextDependency(resolve(this.rootContext, 'src'))
+  this.callback(null, a)
 }
 export default devupUICssLoader

packages/webpack-plugin/src/loader.ts

@@ -23,7 +23,6 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
       callback(null, source)
       return
     }
-    this.addDependency(cssFile)
 
     try {
       const { code, css } = codeExtract(

packages/webpack-plugin/src/plugin.ts

@@ -103,30 +103,34 @@ export class DevupUIWebpackPlugin {
       writeFileSync(this.options.cssFile, '', { encoding: 'utf-8' })
     }
 
-    compiler.options.module.rules.push({
-      test: this.options.cssFile,
-      use: [
-        {
-          loader: createRequire(import.meta.url).resolve(
-            '@devup-ui/webpack-plugin/css-loader',
-          ),
-        },
-      ],
-    })
+    compiler.options.module.rules.push(
+      {
+        test: /\.(tsx|ts|js|mjs|jsx)$/,
+        exclude: /node_modules/,
+        enforce: 'pre',
+        use: [
+          {
+            loader: createRequire(import.meta.url).resolve(
+              '@devup-ui/webpack-plugin/loader',
+            ),
+            options: {
+              plugin: this,
+            },
+          },
+        ],
+      },
+      {
+        test: this.options.cssFile,
+        enforce: 'post',
 
-    compiler.options.module.rules.push({
-      test: /\.(tsx|ts|js|mjs|jsx)$/,
-      exclude: /node_modules/,
-      use: [
-        {
-          loader: createRequire(import.meta.url).resolve(
-            '@devup-ui/webpack-plugin/loader',
-          ),
-          options: {
-            plugin: this,
+        use: [
+          {
+            loader: createRequire(import.meta.url).resolve(
+              '@devup-ui/webpack-plugin/css-loader',
+            ),
           },
-        },
-      ],
-    })
+        ],
+      },
+    )
   }
 }