refactor(packages/lazy-fn-vite-plugin): add filter to avoid processing unrelated files (#227)

packages/lazy-fn-vite-plugin/src/index.ts

@@ -1,7 +1,8 @@
 import { transformSync } from '@babel/core'
 import type { PluginItem as BabelPluginItem } from '@babel/core'
 import * as BabelTypes from '@babel/types'
-import type { Plugin as VitePlugin, Rollup } from 'vite'
+import { createFilter } from 'vite'
+import type { Plugin as VitePlugin, Rollup, FilterPattern } from 'vite'
 
 import {
   TUONO_MAIN_PACKAGE,
@@ -118,11 +119,23 @@ const TurnLazyIntoStaticImport: BabelPluginItem = {
   },
 }
 
-export function LazyLoadingPlugin(): VitePlugin {
+interface LazyLoadingPluginOptions {
+  include: FilterPattern
+}
+
+export function LazyLoadingPlugin(
+  options: LazyLoadingPluginOptions,
+): VitePlugin {
+  const { include } = options
+
+  const filter = createFilter(include)
+
   return {
     name: 'vite-plugin-tuono-lazy-loading',
     enforce: 'pre',
-    transform(code, _id, opts): Rollup.TransformResult {
+    transform(code, id, opts): Rollup.TransformResult {
+      if (!filter(id)) return
+
       /**
        * @todo we should exclude non tsx files from this transformation
        *       this might benefit build time avoiding running `includes` on non-tsx files.

packages/lazy-fn-vite-plugin/tests/transpileSource.test.ts

@@ -14,7 +14,10 @@ type ViteTransformHandler = Exclude<
 
 // Create a type-safe transform method
 function getTransform(): (...args: Parameters<ViteTransformHandler>) => string {
-  return LazyLoadingPlugin().transform as never
+  /** @warning Keep in sync with {@link createBaseViteConfigFromTuonoConfig} */
+  const pluginFilesInclude = /\.(jsx|js|mdx|md|tsx|ts)$/
+
+  return LazyLoadingPlugin({ include: pluginFilesInclude }).transform as never
 }
 
 describe('"dynamic" sources', async () => {
@@ -23,7 +26,9 @@ describe('"dynamic" sources', async () => {
   describe.each(folderNames)('%s', async (folderName) => {
     const testDirPath = `${process.cwd()}/tests/sources/${folderName}`
 
-    const sourceRaw = await fs.readFile(`${testDirPath}/source.tsx`, 'utf-8')
+    const sourceFilePath = `${testDirPath}/source.tsx`
+
+    const sourceRaw = await fs.readFile(sourceFilePath, 'utf-8')
     /**
      * When adding `packages/lazy-fn-vite-plugin/tests/sources/dynamic-only` only
      * the test involving that fixture were broken on Windows... but not the one in the other fixtures:
@@ -39,7 +44,7 @@ describe('"dynamic" sources', async () => {
 
     it('should generate file for client', async () => {
       const pluginTransform = getTransform()
-      const clientBundle = pluginTransform(source, 'id')
+      const clientBundle = pluginTransform(source, sourceFilePath)
 
       const expectedClientSrc = `${testDirPath}/client.expected.tsx`
 
@@ -51,7 +56,9 @@ describe('"dynamic" sources', async () => {
 
     it('should generate file for server', async () => {
       const pluginTransform = getTransform()
-      const serverBundle = pluginTransform(source, 'id', { ssr: true })
+      const serverBundle = pluginTransform(source, sourceFilePath, {
+        ssr: true,
+      })
 
       const expectedServerSrc = `${testDirPath}/server.expected.tsx`
 
@@ -62,3 +69,26 @@ describe('"dynamic" sources', async () => {
     })
   })
 })
+
+describe('not valid file should not be processed', () => {
+  const notValidFiles: Array<string> = [
+    'src/styles/module.css',
+    'src/pages/file-without-ext',
+    'src/pages/file-with-invalid-ext',
+    'src/components/fileWithInvalidExt',
+    'src/components/sidebar/sidebar-link.module.css',
+  ]
+
+  it.each(notValidFiles)('"%s"', (fileName) => {
+    const pluginTransform = getTransform()
+
+    const code = [
+      "import { createRoute, dynamic } from 'tuono'",
+      "const IndexImport = dynamic(() => import('./../src/routes/index'))",
+    ].join('\n')
+
+    const result = pluginTransform(code, fileName)
+
+    expect(result).toBeUndefined()
+  })
+})

packages/tuono/src/build/index.ts

@@ -17,6 +17,12 @@ const VITE_PORT = 3001
 function createBaseViteConfigFromTuonoConfig(
   tuonoConfig: TuonoConfig,
 ): InlineConfig {
+  /**
+   * @warning Keep in sync with {@link LazyLoadingPlugin} tests:
+   * packages/lazy-fn-vite-plugin/tests/transpileSource.test.ts
+   */
+  const pluginFilesInclude = /\.(jsx|js|mdx|md|tsx|ts)$/
+
   const viteBaseConfig: InlineConfig = {
     root: '.tuono',
     logLevel: 'silent',
@@ -41,10 +47,10 @@ function createBaseViteConfigFromTuonoConfig(
        * seem broken.
        */
       // @ts-expect-error see above comment
-      react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
+      react({ include: pluginFilesInclude }),
 
       ViteFsRouter(),
-      LazyLoadingPlugin(),
+      LazyLoadingPlugin({ include: pluginFilesInclude }),
     ],
   }