fix(vite): Change config for mantine and chakra to use export default (…

…#8639)

packages/cli/src/commands/setup/ui/libraries/chakra-ui.js

@@ -29,7 +29,8 @@ export function builder(yargs) {
 const CHAKRA_THEME_AND_COMMENTS = `\
 // This object will be used to override Chakra-UI theme defaults.
 // See https://chakra-ui.com/docs/styled-system/theming/theme for theming options
-module.exports = {}
+const theme = {}
+export default theme
 `
 
 export async function handler({ force, install }) {

packages/cli/src/commands/setup/ui/libraries/mantine.js

@@ -28,7 +28,8 @@ const ALL_MANTINE_PACKAGES = [
 const MANTINE_THEME_AND_COMMENTS = `\
 // This object will be used to override Mantine theme defaults.
 // See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
-module.exports = {}
+const theme = {}
+export default theme
 `
 
 export function builder(yargs) {

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/README.md

@@ -0,0 +1,13 @@
+
+```
+npx @redwoodjs/codemods@canary update-theme-config
+```
+# Update Theme Config
+Modifies the config files specifically for mantine and chakra-ui to use ESM syntax to export the theme.
+
+```diff
+// This is common JS lets get rid of it!
+- module.exports = {/**....your theme **/}
++ const theme = {/**....your theme **/}
++ export default theme
+```

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/default.input.js

@@ -0,0 +1,3 @@
+// This object will be used to override Mantine theme defaults.
+// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+module.exports = {}

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/default.output.js

@@ -0,0 +1,4 @@
+// This object will be used to override Mantine theme defaults.
+// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+const theme = {}
+export default theme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/identifierTheme.input.js

@@ -0,0 +1,5 @@
+const customTheme = {
+  bazinga: 'kittens'
+}
+
+module.exports = customTheme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/identifierTheme.output.js

@@ -0,0 +1,5 @@
+const customTheme = {
+  bazinga: 'kittens'
+}
+
+export default customTheme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__tests__/updateThemeConfig.test.ts

@@ -0,0 +1,9 @@
+describe('updateThemeConfig', () => {
+  it('Converts from module.exports to export default ', async () => {
+    await matchTransformSnapshot('updateThemeConfig', 'default')
+  })
+
+  it('Handles when config is an identifier', async () => {
+    await matchTransformSnapshot('updateThemeConfig', 'identifierTheme')
+  })
+})

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/updateThemeConfig.ts

@@ -0,0 +1,49 @@
+import type { FileInfo, API } from 'jscodeshift'
+
+export default function transform(file: FileInfo, api: API) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Find all module.exports assignments
+  root
+    .find(j.AssignmentExpression, {
+      left: {
+        type: 'MemberExpression',
+        object: { type: 'Identifier', name: 'module' },
+        property: { type: 'Identifier', name: 'exports' },
+      },
+    })
+    .forEach((path) => {
+      const configObject = path.value.right
+
+      let themeObjectName = 'theme'
+
+      if (j.Identifier.check(configObject)) {
+        // If it already is an identifier, reuse it
+        // modules.exports = theme -> export default theme
+        // Note that export default statement is added outside this if statement
+        themeObjectName = configObject.name
+
+        // Remove module.exports assignment
+        j(path).remove()
+      } else {
+        // Create const declaration with the exported object
+        const declaration = j.variableDeclaration('const', [
+          j.variableDeclarator(j.identifier(themeObjectName), configObject),
+        ])
+
+        // Replace module.exports assignment with the const declaration
+        // module.exports = {...} -> const theme = {...}
+        j(path).replaceWith(declaration)
+      }
+
+      // Add export default statement
+      const exportDefaultStatement = j.exportDefaultDeclaration(
+        j.identifier(themeObjectName)
+      )
+
+      j(path.parentPath).insertAfter(exportDefaultStatement)
+    })
+
+  return root.toSource()
+}

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/updateThemeConfig.yargs.ts

@@ -0,0 +1,28 @@
+import path from 'path'
+
+import fg from 'fast-glob'
+import task, { TaskInnerAPI } from 'tasuku'
+
+import { getPaths } from '@redwoodjs/project-config'
+
+import runTransform from '../../../lib/runTransform'
+
+export const command = 'update-theme-config'
+export const description =
+  '(v5.x.x->v6.x.x) Converts mantine and chakra UI configs to use ESM syntax'
+
+export const handler = () => {
+  task('Update Theme Config', async ({ setOutput }: TaskInnerAPI) => {
+    const targetPaths = fg.sync('{chakra,mantine}.config.{js,jsx,tsx,ts}', {
+      cwd: getPaths().web.config,
+      absolute: true,
+    })
+
+    await runTransform({
+      transformPath: path.join(__dirname, 'updateThemeConfig.js'),
+      targetPaths,
+    })
+
+    setOutput('All done! Run `yarn rw lint --fix` to prettify your code')
+  })
+}