chore(rwfw): Add force optimise to vite.config when running project:s…

…ync (#8688)

* chore(rwfw): Add force optimise to vite.config when running project:sync

* Update comment

tasks/framework-tools/frameworkSyncToProject.mjs

@@ -22,7 +22,9 @@ import {
   addDependenciesToPackageJson,
   copyFrameworkFilesToProject,
   fixProjectBinaries,
+  resolveViteConfigPath,
 } from './lib/project.mjs'
+import modifyViteConfigToForceOptimize from './lib/viteConfig.mjs'
 
 const IGNORE_EXTENSIONS = ['.DS_Store']
 
@@ -136,12 +138,24 @@ async function main() {
       'utf-8'
     )
 
+    const viteConfigPath = resolveViteConfigPath(redwoodProjectPath)
+    let viteConfigContents
+
+    if (viteConfigPath) {
+      viteConfigContents = fs.readFileSync(viteConfigPath, 'utf-8')
+      const newViteConfig = modifyViteConfigToForceOptimize(viteConfigContents)
+
+      fs.writeFileSync(viteConfigPath, newViteConfig)
+    }
+
     if (options.cleanUp) {
       logStatus('Setting up clean up on SIGINT or process exit...')
 
       const cleanUp = createCleanUp({
         redwoodProjectPackageJsonPath,
         redwoodProjectPackageJson,
+        viteConfigPath,
+        viteConfigContents,
       })
 
       process.on('SIGINT', cleanUp)
@@ -267,6 +281,8 @@ function logError(m) {
 function createCleanUp({
   redwoodProjectPackageJsonPath,
   redwoodProjectPackageJson,
+  viteConfigPath,
+  viteConfigContents,
 }) {
   let cleanedUp = false
 
@@ -275,10 +291,14 @@ function createCleanUp({
       return
     }
 
-    logStatus("Restoring the Redwood project's package.json...")
+    logStatus("Restoring the Redwood project's package.json & vite config...")
 
     fs.writeFileSync(redwoodProjectPackageJsonPath, redwoodProjectPackageJson)
 
+    if (viteConfigPath && viteConfigContents) {
+      fs.writeFileSync(viteConfigPath, viteConfigContents)
+    }
+
     console.log(
       [
         '',

tasks/framework-tools/lib/project.mjs

@@ -148,3 +148,21 @@ export async function copyFrameworkFilesToProject(
     }
   }
 }
+
+/**
+ *
+ * @param {string} projectPath
+ * @returns {string | null}
+ */
+export function resolveViteConfigPath(projectPath) {
+  const jsViteConfigPath = path.join(projectPath, 'web/vite.config.js')
+  const tsViteConfigPath = path.join(projectPath, 'web/vite.config.ts')
+
+  if (fs.existsSync(jsViteConfigPath)) {
+    return jsViteConfigPath
+  } else if (fs.existsSync(tsViteConfigPath)) {
+    return tsViteConfigPath
+  } else {
+    return null
+  }
+}

tasks/framework-tools/lib/viteConfig.mjs

@@ -0,0 +1,90 @@
+// @Note: babel is cjs modules, so we need to do these strange imports
+import babelGenerate from '@babel/generator'
+const generate = babelGenerate.default
+import * as babelParser from '@babel/parser'
+import babelTraverse from '@babel/traverse'
+const traverse = babelTraverse.default
+import * as babelTypes from '@babel/types'
+
+/**
+ * This function will take contents of vite.config.js/ts and add optimizeDeps.force property to the viteConfig object
+ *
+ * @param {string} code
+ * @param {string[]} excludeValue
+ * @returns {string}
+ * **/
+function modifyViteConfigToForceOptimize(code) {
+  const ast = babelParser.parse(code, {
+    sourceType: 'module',
+    plugins: ['typescript'],
+  })
+
+  traverse(ast, {
+    VariableDeclaration(path) {
+      const { node } = path
+
+      if (
+        // @NOTE: this can be improved by finding what object to modify
+        // based on what gets passed to defineConfig
+        babelTypes.isIdentifier(node.declarations[0].id) &&
+        node.declarations[0].id.name === 'viteConfig'
+      ) {
+        const properties = node.declarations[0].init.properties || []
+        let optimizeDepsProp = null
+
+        for (const prop of properties) {
+          if (
+            babelTypes.isObjectProperty(prop) &&
+            babelTypes.isIdentifier(prop.key) &&
+            prop.key.name === 'optimizeDeps'
+          ) {
+            optimizeDepsProp = prop
+            break
+          }
+        }
+
+        if (optimizeDepsProp) {
+          if (
+            babelTypes.isObjectExpression(optimizeDepsProp.value) &&
+            Array.isArray(optimizeDepsProp.value.properties)
+          ) {
+            const forceProp = optimizeDepsProp.value.properties.find(
+              (prop) =>
+                babelTypes.isObjectProperty(prop) &&
+                babelTypes.isIdentifier(prop.key) &&
+                prop.key.name === 'force'
+            )
+
+            if (forceProp) {
+              forceProp.value = babelTypes.booleanLiteral(true)
+            } else {
+              optimizeDepsProp.value.properties.push(
+                babelTypes.objectProperty(
+                  babelTypes.identifier('force'),
+                  babelTypes.booleanLiteral(true)
+                )
+              )
+            }
+          }
+        } else {
+          const forceProp = babelTypes.objectProperty(
+            babelTypes.identifier('force'),
+            babelTypes.booleanLiteral(true)
+          )
+
+          optimizeDepsProp = babelTypes.objectProperty(
+            babelTypes.identifier('optimizeDeps'),
+            babelTypes.objectExpression([forceProp])
+          )
+
+          properties.push(optimizeDepsProp)
+        }
+      }
+    },
+  })
+
+  const modifiedCode = generate(ast).code
+  return modifiedCode
+}
+
+export default modifyViteConfigToForceOptimize