Merge pull request #168 from dev-five-git/fix-webpack-issue

Add include

Author: owjs3901

.changeset/short-files-poke.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/vite-plugin": patch
+---
+
+Add include

packages/react/README.md

@@ -143,7 +143,7 @@ You can use responsive and pseudo selector.
 // Responsive with Selector
 <Box _hover={{bg: ["red", "blue"]}}/>
 
-// Same
+// Another way
 <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 
 ```

packages/vite-plugin/src/__tests__/plugin.test.ts

@@ -298,6 +298,46 @@ describe('devupUIPlugin', () => {
     expect((plugin as any).apply({}, { command: 'build' })).toBe(true)
   })
 
+  it('should include', () => {
+    const devupPath = 'devup.json'
+    const interfacePath = '.df'
+    const cssFile = join(_dirname, 'devup-ui.css')
+    const libPackage = '@devup-ui/react'
+    const plugin = DevupUI({
+      package: libPackage,
+      cssFile,
+      devupPath,
+      interfacePath,
+      include: ['@devup/product-system'],
+    })
+    vi.mocked(codeExtract).mockReturnValue({
+      css: 'css code',
+      code: 'code',
+    } as any)
+    ;(plugin as any).transform('code', 'node_modules/@devup/test/dist/index.js')
+    expect(codeExtract).toBeCalledTimes(0)
+    ;(plugin as any).transform(
+      'code',
+      'node_modules/@devup/product-system/dist/index.js',
+    )
+    expect(codeExtract).toHaveBeenCalledWith(
+      'node_modules/@devup/product-system/dist/index.js',
+      'code',
+      libPackage,
+      cssFile,
+    )
+    ;(plugin as any).transform(
+      'code',
+      'C:/devfive/minions-front/apps/vendor/node_modules/.vite/deps/@devup_product-system.js?v=63f19272',
+    )
+    expect(codeExtract).toHaveBeenCalledWith(
+      'C:/devfive/minions-front/apps/vendor/node_modules/.vite/deps/@devup_product-system.js?v=63f19272',
+      'code',
+      libPackage,
+      cssFile,
+    )
+  })
+
   describe('basic', () => {
     const devupPath = 'devup.json'
     const interfacePath = '.df'

packages/vite-plugin/src/plugin.ts

@@ -19,10 +19,11 @@ export interface DevupUIPluginOptions {
   interfacePath: string
   extractCss: boolean
   debug: boolean
+  include: string[]
 }
 
 function writeDataFiles(
-  options: Omit<DevupUIPluginOptions, 'extractCss' | 'debug'>,
+  options: Omit<DevupUIPluginOptions, 'extractCss' | 'debug' | 'include'>,
 ) {
   if (!existsSync(options.interfacePath)) mkdirSync(options.interfacePath)
   if (existsSync(options.devupPath)) {
@@ -56,6 +57,7 @@ export function DevupUI({
   cssFile = resolve(interfacePath, 'devup-ui.css'),
   extractCss = true,
   debug = false,
+  include = [],
 }: Partial<DevupUIPluginOptions> = {}): PluginOption {
   setDebug(debug)
   try {
@@ -128,8 +130,17 @@ export function DevupUI({
     enforce: 'pre',
     async transform(code, id) {
       if (!extractCss) return
-      if (id.includes('node_modules')) return
-      if (!/\.(tsx|ts|js|mjs|jsx)$/i.test(id)) return
+
+      if (
+        include.length
+          ? new RegExp(
+              `node_modules(?!(.*${include.join('|').replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
+            ).test(id)
+          : id.includes('node_modules')
+      ) {
+        return
+      }
+      if (!/\.(tsx|ts|js|mjs|jsx)$/i.test(id.split('?')[0])) return
 
       const { code: retCode, css } = codeExtract(id, code, libPackage, cssFile)