feat: module federation, new ai example

Author: jherr

src/add-ons.ts

@@ -34,6 +34,7 @@ export type AddOn = {
   name: string
   description: string
   link: string
+  templates: Array<string>
   main?: Array<{
     imports: Array<string>
     initialize: Array<string>
@@ -78,6 +79,7 @@ function isDirectory(path: string): boolean {
 
 export async function getAllAddOns(
   framework: Framework,
+  template: string,
 ): Promise<Array<AddOn>> {
   const addOns: Array<AddOn> = []
 
@@ -95,6 +97,11 @@ export async function getAllAddOns(
     )) {
       const filePath = resolve(addOnsBase, dir, 'info.json')
       const fileContent = await readFile(filePath, 'utf-8')
+      const info = JSON.parse(fileContent)
+
+      if (!info.templates.includes(template)) {
+        continue
+      }
 
       let packageAdditions: Record<string, string> = {}
       if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
@@ -109,9 +116,9 @@ export async function getAllAddOns(
       }
 
       addOns.push({
+        ...info,
         id: dir,
         type,
-        ...JSON.parse(fileContent),
         directory: resolve(addOnsBase, dir),
         packageAdditions,
         readme,
@@ -125,11 +132,12 @@ export async function getAllAddOns(
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
 export async function finalizeAddOns(
   framework: Framework,
+  template: string,
   chosenAddOnIDs: Array<string>,
 ): Promise<Array<AddOn>> {
   const finalAddOnIDs = new Set(chosenAddOnIDs)
 
-  const addOns = await getAllAddOns(framework)
+  const addOns = await getAllAddOns(framework, template)
 
   for (const addOnID of finalAddOnIDs) {
     const addOn = addOns.find((a) => a.id === addOnID)

src/options.ts

@@ -203,10 +203,10 @@ export async function promptForOptions(
   }
 
   // Select any add-ons
-  const allAddOns = await getAllAddOns(options.framework)
+  const allAddOns = await getAllAddOns(options.framework, options.mode)
   const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
   let selectedAddOns: Array<string> = []
-  if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+  if (options.typescript && cliOptions.addOns && addOns.length > 0) {
     const value = await multiselect({
       message: 'What add-ons would you like for your project:',
       options: addOns.map((addOn) => ({
@@ -217,21 +217,17 @@ export async function promptForOptions(
       required: false,
     })
 
-    if (isCancel(selectedAddOns)) {
+    if (isCancel(value)) {
       cancel('Operation cancelled.')
       process.exit(0)
     }
-    selectedAddOns = value as Array<string>
+    selectedAddOns = value
   }
 
   // Select any examples
   const examples = allAddOns.filter((addOn) => addOn.type === 'example')
   let selectedExamples: Array<string> = []
-  if (
-    options.mode === FILE_ROUTER &&
-    cliOptions.addOns &&
-    examples.length > 0
-  ) {
+  if (options.typescript && cliOptions.addOns && examples.length > 0) {
     const value = await multiselect({
       message: 'Would you like any examples?',
       options: examples.map((addOn) => ({
@@ -250,10 +246,11 @@ export async function promptForOptions(
   }
 
   if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-    options.chosenAddOns = await finalizeAddOns(options.framework, [
-      ...selectedAddOns,
-      ...selectedExamples,
-    ])
+    options.chosenAddOns = await finalizeAddOns(
+      options.framework,
+      options.mode,
+      [...selectedAddOns, ...selectedExamples],
+    )
     options.tailwind = true
   } else {
     options.chosenAddOns = []

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

@@ -2,6 +2,7 @@
   "name": "Clerk",
   "description": "Add Clerk authentication to your application.",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://clerk.com",
   "main": {
     "imports": ["import { ClerkProvider } from '@clerk/clerk-react'"],

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

@@ -3,6 +3,7 @@
   "description": "Add the Convex database to your application.",
   "link": "https://convex.dev",
   "phase": "add-on",
+  "templates": ["file-router"],
   "main": {
     "imports": [
       "import { ConvexProvider } from 'convex/react'",

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

@@ -2,6 +2,7 @@
   "name": "Form",
   "description": "TansStack Form",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://tanstack.com/form/latest",
   "routes": [
     {

templates/react/add-on/module-federation/assets/module-federation.config.js.ejs

@@ -0,0 +1,31 @@
+import packageJSON from './package.json'
+
+function remoteConfig(name, url) {
+  return {
+    type: 'module',
+    name,
+    entry: url,
+    entryGlobalName: 'remote',
+    shareScope: 'default',
+  }
+}
+
+export default {
+  filename: 'remoteEntry.js',
+  name: '<%= projectName %>',
+  exposes: {
+    './DemoMfComponent': './src/demo-mf-component.tsx',
+    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
+  },
+  remotes: {},
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['react-dom'],
+    },
+  },
+}

templates/react/add-on/module-federation/assets/src/demo-mf-component.tsx

@@ -0,0 +1,3 @@
+export function DemoMfComponent() {
+  return <div>Demo Mf Component</div>
+}

templates/react/add-on/module-federation/assets/src/demo-mf-self-contained.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+function App() {
+  return <div>Hello from self-contained module federation</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<App />)
+}

templates/react/add-on/module-federation/info.json

@@ -0,0 +1,7 @@
+{
+  "name": "Module Federation",
+  "description": "Module Federation",
+  "phase": "add-on",
+  "templates": ["code-router"],
+  "link": "https://module-federation.io/"
+}

templates/react/add-on/module-federation/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@module-federation/vite": "^1.1.9"
+  }
+}

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

@@ -2,5 +2,6 @@
   "name": "Netlify",
   "description": "Netlify deployment setup",
   "link": "https://docs.netlify.com",
-  "phase": "add-on"
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"]
 }

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

@@ -3,6 +3,7 @@
   "phase": "setup",
   "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
   "link": "https://sentry.com/",
+  "templates": ["file-router"],
   "routes": [
     {
       "url": "/demo/sentry/bad-server-func",

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

@@ -2,6 +2,7 @@
   "name": "Shadcn",
   "description": "Add Shadcn UI to your application.",
   "phase": "add-on",
+  "templates": ["file-router", "code-router"],
   "link": "https://ui.shadcn.com/",
   "command": {
     "command": "npx",

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

@@ -3,6 +3,7 @@
   "phase": "setup",
   "description": "Add TanStack Start for SSR, API endpoints, and more.",
   "link": "https://tanstack.com/start/latest",
+  "templates": ["file-router"],
   "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
   "routes": [
     {

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

@@ -3,6 +3,7 @@
   "description": "Add TanStack Store to your application.",
   "phase": "add-on",
   "link": "https://tanstack.com/store/latest",
+  "templates": ["file-router"],
   "routes": [
     {
       "url": "/demo/store/page1",

templates/react/add-on/tanstack-query/info.json

@@ -2,6 +2,7 @@
   "name": "TanStack Query",
   "description": "Integrate TanStack Query into your application.",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://tanstack.com/query/latest",
   "main": {
     "imports": [

templates/react/base/vite.config.js.ejs

@@ -2,14 +2,15 @@ import { defineConfig } from "vite";
 import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
-import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-<% } %><% if (addOnEnabled.shadcn) { %>
-import { resolve } from "path";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
+import {federation} from "@module-federation/vite";<% } %><% if (addOnEnabled.shadcn) { %>
+import { resolve } from "path";<% } %><% if (addOnEnabled['module-federation']) { %>
+import federationConfig from "./module-federation.config.js";
 <% } %>
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [<% if(fileRouter) { %>TanStackRouterVite(), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %>],
+  plugins: [<% if(fileRouter) { %>TanStackRouterVite(), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
   test: {
     globals: true,
     environment: "jsdom",

templates/react/example/ai-chat/assets/.env.local.append

@@ -2,6 +2,7 @@
   "name": "TanStack Chat",
   "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Antrhopic Sonnet, chat history and custom prompts.",
   "phase": "example",
+  "templates": ["file-router"],
   "link": "",
   "routes": [
     {

templates/react/example/ai-chat/assets/src/routes/example.ai-chat.tsx.ejs

@@ -3,6 +3,7 @@
   "description": "TansStack Form",
   "phase": "add-on",
   "link": "https://tanstack.com/form/latest",
+  "templates": ["file-router"],
   "routes": [
     {
       "url": "/demo/form",