️💥 feat: Update scaffolding to handle react router and new structure (#155)

Author: enZane

packages/create-drupal-decoupled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octahedroid/create-drupal-decoupled",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "packageManager": "[email protected]",
   "description": "Scaffold the integration with Drupal in a decoupled frontend",
   "keywords": [

packages/create-drupal-decoupled/src/constants.ts

@@ -1,21 +1,22 @@
-export const SUPPORTED_FRONTENDS = ['remix', 'next'] as const
+export const SUPPORTED_FRONTENDS = ['remix', 'next', 'react-router'] as const
 
 export type SupportedFrontend = (typeof SUPPORTED_FRONTENDS)[number]
 
 export const FRONTEND_MACHINE_NAME_TO_READABLE_NAME: Record<
   SupportedFrontend,
-  Capitalize<SupportedFrontend>
+  string
 > = {
   remix: 'Remix',
   next: 'Next',
+  'react-router': 'React-Router',
 } as const
 
-export function getFrontendReadableName(
-  frontendName: SupportedFrontend
-) {
+export function getFrontendReadableName(frontendName: SupportedFrontend) {
   return FRONTEND_MACHINE_NAME_TO_READABLE_NAME[frontendName]
 }
 
-export function isSupportedFrontend(frontend: string): frontend is SupportedFrontend {
+export function isSupportedFrontend(
+  frontend: string
+): frontend is SupportedFrontend {
   return SUPPORTED_FRONTENDS.includes(frontend as SupportedFrontend)
-}
+}

packages/create-drupal-decoupled/src/helpers/files/shared.ts

@@ -0,0 +1,27 @@
+export const DrupalClientFile = {
+  targetPath: 'app/utils',
+  sourcePath: 'shared',
+  fileName: 'client.server.ts',
+  operation: 'create',
+} satisfies FilesConfig
+
+export const DrupalAuthFile = {
+  targetPath: 'app/utils',
+  sourcePath: 'shared',
+  fileName: 'auth.server.ts',
+  operation: 'create',
+} satisfies FilesConfig
+
+export const TailwindCSSFile = {
+  targetPath: 'app',
+  sourcePath: 'shared',
+  fileName: 'tailwind.css',
+  operation: 'update',
+} satisfies FilesConfig
+
+export const EnvFile = {
+  targetPath: '.',
+  sourcePath: 'shared',
+  fileName: '.env.example',
+  operation: 'create',
+} satisfies FilesConfig

packages/create-drupal-decoupled/src/helpers/files/types.d.ts

@@ -0,0 +1,25 @@
+type SourcePath = `${SupportedFrontend}-graphql` | 'shared'
+
+type DeleteFileConfig = {
+  targetPath: string
+  fileName: string
+  operation: 'delete'
+}
+
+type CreateFileConfig = {
+  targetPath: string
+  sourcePath: SourcePath
+  fileName: string
+  rename?: string
+  sanitize?: (content: string) => string
+  operation: 'create' | 'update'
+}
+
+type FilesConfig = DeleteFileConfig | CreateFileConfig
+
+type ScaffoldFilesPerFrontend = Record<
+  SupportedFrontend,
+  {
+    files: FilesConfig[]
+  }
+>

packages/create-drupal-decoupled/src/helpers/scaffolding.ts

@@ -1,81 +1,141 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import type { SupportedFrontend } from 'src/constants'
-
-type SourcePath = `${SupportedFrontend}-graphql` | 'shared'
-
-type FilesConfig = {
-  targetPath: string
-  sourcePath: SourcePath
-  fileName: string
-  rename?: string
-}
-
-type ScaffoldFilesPerFrontend = Record<
-  SupportedFrontend,
-  {
-    files: FilesConfig[]
-  }
->
+import {
+  DrupalAuthFile,
+  DrupalClientFile,
+  EnvFile,
+  TailwindCSSFile,
+} from './files/shared'
 
 const SCAFFOLD_FILES_PER_FRONTEND: Readonly<ScaffoldFilesPerFrontend> = {
   remix: {
     files: [
+      DrupalClientFile,
+      DrupalAuthFile,
+      EnvFile,
       {
-        targetPath: 'app/utils/drupal',
-        sourcePath: 'shared',
-        fileName: 'client.server.ts',
+        ...EnvFile,
+        rename: '.env',
+        operation: 'update',
       },
       {
-        targetPath: 'app/utils/drupal',
+        targetPath: 'app',
+        sourcePath: 'remix-graphql',
+        fileName: 'tailwind.css',
+        operation: 'update',
+      },
+      {
+        targetPath: 'app/utils',
         sourcePath: 'remix-graphql',
         fileName: 'calculate-path.server.ts',
+        operation: 'create',
       },
       {
         targetPath: 'app/routes',
         sourcePath: 'remix-graphql',
         fileName: '$.tsx',
+        operation: 'create',
       },
       {
-        targetPath: 'app',
-        sourcePath: 'shared',
-        fileName: 'tailwind.css',
-      },
-      {
-        targetPath: '.',
-        sourcePath: 'shared',
-        fileName: '.env.example',
+        targetPath: 'app/routes',
+        sourcePath: 'remix-graphql',
+        fileName: '$.tsx',
+        rename: '_index.tsx',
+        operation: 'update',
       },
     ],
   },
   next: {
     files: [
       {
-        targetPath: 'utils/drupal',
-        sourcePath: 'shared',
-        fileName: 'client.server.ts',
+        ...DrupalClientFile,
+        targetPath: '/utils',
         rename: 'client.ts',
+        sanitize: (fileContent: string) =>
+          fileContent.replace(
+            "import { getToken } from './auth.server'",
+            "import { getToken } from './auth'"
+          ),
+      },
+      {
+        ...DrupalAuthFile,
+        targetPath: '/utils',
+        rename: 'auth.ts',
+      },
+      {
+        ...TailwindCSSFile,
+        rename: 'globals.css',
       },
+      EnvFile,
       {
-        targetPath: 'utils/drupal',
+        ...EnvFile,
+        rename: '.env.local',
+        operation: 'update',
+      },
+      {
+        targetPath: 'utils',
         sourcePath: 'next-graphql',
         fileName: 'calculate-path.ts',
+        operation: 'create',
       },
       {
-        targetPath: 'app/[...slug]',
+        targetPath: 'app/[[...slug]]',
         sourcePath: 'next-graphql',
         fileName: 'page.tsx',
+        operation: 'create',
       },
       {
+        operation: 'delete',
         targetPath: 'app',
-        sourcePath: 'shared',
-        fileName: 'tailwind.css',
-        rename: 'globals.css',
+        fileName: 'page.tsx',
+      },
+    ],
+  },
+  'react-router': {
+    files: [
+      DrupalClientFile,
+      DrupalAuthFile,
+      EnvFile,
+      {
+        ...EnvFile,
+        rename: '.env',
+        operation: 'update',
       },
       {
-        targetPath: '.',
+        ...TailwindCSSFile,
+        rename: 'app.css',
+        operation: 'update',
+      },
+      {
+        targetPath: 'app/utils',
         sourcePath: 'shared',
-        fileName: '.env.example',
+        fileName: 'metatags.ts',
+        operation: 'create',
+      },
+      {
+        targetPath: 'app',
+        sourcePath: 'react-router-graphql',
+        fileName: 'routes.ts',
+        operation: 'update',
+      },
+      {
+        targetPath: 'app/routes',
+        sourcePath: 'react-router-graphql',
+        fileName: '$.tsx',
+        operation: 'create',
+      },
+      {
+        targetPath: 'app/routes',
+        fileName: 'home.tsx',
+        operation: 'delete',
+      },
+      {
+        targetPath: 'app/utils',
+        sourcePath: 'react-router-graphql',
+        fileName: 'calculatePath.ts',
+        rename: 'routes.ts',
+        operation: 'create',
       },
     ],
   },
@@ -85,13 +145,65 @@ export function isJavascriptProject(projectPath: string) {
   return fs.existsSync(path.join(projectPath, 'package.json'))
 }
 
+// Validate if the project
+export function isValidFramework(
+  projectPath: string,
+  frontend: SupportedFrontend
+) {
+  const packageJsonPath = path.join(projectPath, 'package.json')
+  if (!fs.existsSync(packageJsonPath)) {
+    return false
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
+  const dependencies = packageJson.dependencies || {}
+  const devDependencies = packageJson.devDependencies || {}
+
+  if (frontend === 'next') {
+    return Boolean(dependencies['next'])
+  }
+
+  if (frontend === 'remix') {
+    return Boolean(devDependencies['@remix-run/dev'])
+  }
+
+  if (frontend === 'react-router') {
+    return Boolean(devDependencies['@react-router/dev'])
+  }
+
+  return false
+}
+
+export function updateGitignore(
+  frontend: SupportedFrontend,
+  projectPath: string
+) {
+  const gitignorePath = path.join(projectPath, '.gitignore')
+  const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8')
+  const envFileName = frontend === 'next' ? '.env*' : '.env'
+
+  if (!gitignoreContent.includes(envFileName)) {
+    fs.appendFileSync(gitignorePath, `\n${envFileName}\n`)
+  }
+}
+
 export function scaffoldFrontend(
   frontend: SupportedFrontend,
   projectPath: string
 ) {
   const frontendFiles = SCAFFOLD_FILES_PER_FRONTEND[frontend].files
 
-  return frontendFiles.map(({ targetPath, sourcePath, fileName, rename }) => {
+  return frontendFiles.map((config) => {
+    const { operation, fileName, targetPath } = config
+
+    if (operation === 'delete') {
+      const filePath = path.join(projectPath, targetPath, fileName)
+      if (fs.existsSync(filePath)) {
+        fs.rmSync(filePath, { recursive: true, force: true })
+      }
+      return `Deleted ${targetPath === '.' ? '' : `${targetPath}/`}${fileName}`
+    }
+    const { sourcePath, rename, sanitize } = config
     const name = rename || fileName
 
     const templatePath = path.join(__dirname, 'templates', sourcePath, fileName)
@@ -101,10 +213,17 @@ export function scaffoldFrontend(
       targetPath,
       name
     )
-
     fs.mkdirSync(path.dirname(destinationPath), { recursive: true })
-    fs.copyFileSync(templatePath, destinationPath)
 
-    return `${targetPath === '.' ? '' : `${targetPath}/`}${name}`
+    let fileContent = fs.readFileSync(templatePath, 'utf-8')
+
+    if (sanitize) {
+      fileContent = sanitize(fileContent)
+    }
+
+    fs.writeFileSync(destinationPath, fileContent)
+
+    const message = operation === 'update' ? 'Updated' : 'Created'
+    return `${message} ${targetPath === '.' ? '' : `${targetPath}/`}${name}`
   })
 }