chord: changing integration strategy

Author: jherr

src/add-ons.ts

@@ -35,26 +35,10 @@ export type AddOn = {
   description: string
   link: string
   templates: Array<string>
-  main?: Array<{
-    imports: Array<string>
-    initialize: Array<string>
-    providers: Array<{
-      open: string
-      close: string
-    }>
-  }>
-  layout?: {
-    imports: Array<string>
-    jsx: string
-  }
   routes: Array<{
     url: string
     name: string
   }>
-  userUi?: {
-    import: string
-    jsx: string
-  }
   directory: string
   packageAdditions: {
     dependencies?: Record<string, string>

src/create-app.ts

@@ -41,6 +41,13 @@ function createCopyFiles(targetDir: string) {
   }
 }
 
+function jsSafeName(name: string) {
+  return name
+    .split(/[^a-zA-Z0-9]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
 function createTemplateFile(
   projectName: string,
   options: Required<Options>,
@@ -73,7 +80,14 @@ function createTemplateFile(
     }
 
     const template = await readFile(resolve(templateDir, file), 'utf-8')
-    let content = render(template, templateValues)
+    let content = ''
+    try {
+      content = render(template, templateValues)
+    } catch (error) {
+      console.error(chalk.red(`EJS error in file ${file}`))
+      console.error(error)
+      process.exit(1)
+    }
     const target = targetFileName ?? file.replace('.ejs', '')
 
     if (target.endsWith('.ts') || target.endsWith('.tsx')) {
@@ -300,33 +314,6 @@ export async function createApp(options: Required<Options>) {
 
   copyFiles(templateDirBase, ['./src/logo.svg'])
 
-  // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-  if (options.mode === FILE_ROUTER) {
-    await templateFile(
-      templateDirRouter,
-      './src/routes/__root.tsx.ejs',
-      './src/routes/__root.tsx',
-    )
-    await templateFile(
-      templateDirBase,
-      './src/App.tsx.ejs',
-      './src/routes/index.tsx',
-    )
-  } else {
-    await templateFile(
-      templateDirBase,
-      './src/App.tsx.ejs',
-      options.typescript ? undefined : './src/App.jsx',
-    )
-    if (options.framework === 'react') {
-      await templateFile(
-        templateDirBase,
-        './src/App.test.tsx.ejs',
-        options.typescript ? undefined : './src/App.test.jsx',
-      )
-    }
-  }
-
   // Setup the main, reportWebVitals and index.html files
   if (!isAddOnEnabled('start') && options.framework === 'react') {
     if (options.typescript) {
@@ -410,19 +397,70 @@ export async function createApp(options: Required<Options>) {
     }
   }
 
+  const integrations: Array<{
+    type: 'layout' | 'provider' | 'header-user'
+    name: string
+    path: string
+  }> = []
+  if (existsSync(resolve(targetDir, 'src/integrations'))) {
+    for (const integration of readdirSync(
+      resolve(targetDir, 'src/integrations'),
+    )) {
+      const integrationName = jsSafeName(integration)
+      if (
+        existsSync(
+          resolve(targetDir, 'src/integrations', integration, 'layout.tsx'),
+        )
+      ) {
+        integrations.push({
+          type: 'layout',
+          name: `${integrationName}Layout`,
+          path: `integrations/${integration}/layout`,
+        })
+      }
+      if (
+        existsSync(
+          resolve(targetDir, 'src/integrations', integration, 'provider.tsx'),
+        )
+      ) {
+        integrations.push({
+          type: 'provider',
+          name: `${integrationName}Provider`,
+          path: `integrations/${integration}/provider`,
+        })
+      }
+      if (
+        existsSync(
+          resolve(
+            targetDir,
+            'src/integrations',
+            integration,
+            'header-user.tsx',
+          ),
+        )
+      ) {
+        integrations.push({
+          type: 'header-user',
+          name: `${integrationName}Header`,
+          path: `integrations/${integration}/header-user`,
+        })
+      }
+    }
+  }
+
+  console.log(integrations)
+
   const routes: Array<{
     path: string
     name: string
   }> = []
   if (existsSync(resolve(targetDir, 'src/routes'))) {
     for (const file of readdirSync(resolve(targetDir, 'src/routes'))) {
       const name = file.replace(/\.tsx?|\.jsx?/, '')
+      const safeRouteName = jsSafeName(name)
       routes.push({
         path: `./routes/${name}`,
-        name: name
-          .split('.')
-          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-          .join(''),
+        name: safeRouteName,
       })
     }
   }
@@ -436,6 +474,7 @@ export async function createApp(options: Required<Options>) {
         './src/main.tsx',
         {
           routes,
+          integrations,
         },
       )
     } else {
@@ -445,16 +484,50 @@ export async function createApp(options: Required<Options>) {
         './src/main.jsx',
         {
           routes,
+          integrations,
         },
       )
     }
   }
 
+  // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
+  if (options.mode === FILE_ROUTER) {
+    await templateFile(
+      templateDirRouter,
+      './src/routes/__root.tsx.ejs',
+      './src/routes/__root.tsx',
+      {
+        integrations,
+      },
+    )
+    await templateFile(
+      templateDirBase,
+      './src/App.tsx.ejs',
+      './src/routes/index.tsx',
+    )
+  } else {
+    await templateFile(
+      templateDirBase,
+      './src/App.tsx.ejs',
+      options.typescript ? undefined : './src/App.jsx',
+    )
+    if (options.framework === 'react') {
+      await templateFile(
+        templateDirBase,
+        './src/App.test.tsx.ejs',
+        options.typescript ? undefined : './src/App.test.jsx',
+      )
+    }
+  }
+
   if (routes.length > 0) {
     await templateFile(
       templateDirBase,
       './src/components/Header.tsx.ejs',
       './src/components/Header.tsx',
+      {
+        integrations,
+      },
     )
   }
 

templates/react/add-on/clerk/assets/src/integrations/clerk/header-user.tsx

@@ -0,0 +1,19 @@
+import {
+  SignedIn,
+  SignInButton,
+  SignedOut,
+  UserButton,
+} from '@clerk/clerk-react'
+
+export default function HeaderUser() {
+  return (
+    <>
+      <SignedIn>
+        <UserButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </>
+  )
+}

templates/react/add-on/clerk/assets/src/integrations/clerk/provider.tsx

@@ -0,0 +1,18 @@
+import { ClerkProvider } from '@clerk/clerk-react'
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Add your Clerk Publishable Key to the .env.local file')
+}
+
+export default function AppClerkProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      {children}
+    </ClerkProvider>
+  )
+}

templates/react/add-on/clerk/info.json

@@ -4,22 +4,6 @@
   "phase": "add-on",
   "templates": ["file-router"],
   "link": "https://clerk.com",
-  "main": {
-    "imports": ["import { ClerkProvider } from '@clerk/clerk-react'"],
-    "initialize": [
-      "const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\nif (!PUBLISHABLE_KEY) {\n  throw new Error('Add your Clerk Publishable Key to the .env.local file');\n}"
-    ],
-    "providers": [
-      {
-        "open": "<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl=\"/\">",
-        "close": "</ClerkProvider>"
-      }
-    ]
-  },
-  "userUi": {
-    "import": "import { SignedIn, SignInButton, SignedOut, UserButton } from '@clerk/clerk-react'",
-    "jsx": "<SignedIn><UserButton /></SignedIn><SignedOut><SignInButton /></SignedOut>"
-  },
   "routes": [
     {
       "url": "/demo/clerk",

templates/react/add-on/convex/assets/src/integrations/convex/provider.tsx

@@ -0,0 +1,20 @@
+import { ConvexProvider } from 'convex/react'
+import { ConvexQueryClient } from '@convex-dev/react-query'
+
+const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL
+if (!CONVEX_URL) {
+  console.error('missing envar CONVEX_URL')
+}
+const convexQueryClient = new ConvexQueryClient(CONVEX_URL)
+
+export default function AppConvexProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ConvexProvider client={convexQueryClient.convexClient}>
+      {children}
+    </ConvexProvider>
+  )
+}

templates/react/add-on/convex/info.json

@@ -4,21 +4,6 @@
   "link": "https://convex.dev",
   "phase": "add-on",
   "templates": ["file-router"],
-  "main": {
-    "imports": [
-      "import { ConvexProvider } from 'convex/react'",
-      "import { ConvexQueryClient } from '@convex-dev/react-query'"
-    ],
-    "initialize": [
-      "const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!\nif (!CONVEX_URL) {\n  console.error(\"missing envar CONVEX_URL\");\n}\nconst convexQueryClient = new ConvexQueryClient(CONVEX_URL);"
-    ],
-    "providers": [
-      {
-        "open": "<ConvexProvider client={convexQueryClient.convexClient}>",
-        "close": "</ConvexProvider>"
-      }
-    ]
-  },
   "routes": [
     {
       "url": "/demo/convex",

templates/react/add-on/store/assets/src/routes/demo.store.page1.tsx.ejs

@@ -3,7 +3,7 @@ import { useStore } from '@tanstack/react-store'
 
 import { store } from '../lib/demo-store'
 <% if (codeRouter) { %>
-  import type { RootRoute } from '@tanstack/react-router'
+import type { RootRoute } from '@tanstack/react-router'
 <% } else { %>
 export const Route = createFileRoute('/demo/store/page1')({
   component: StorePage1,

templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+export default function LayoutAddition() {
+  return <ReactQueryDevtools buttonPosition="bottom-right" />
+}

templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx

@@ -0,0 +1,9 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}