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"
+  }
+}