@salesforce/templates 65.2.0 → 65.3.0

package/lib/generators/webApplicationGenerator.d.ts

@@ -4,4 +4,7 @@ export default class WebApplicationGenerator extends BaseGenerator<WebApplicatio
     constructor(options: WebApplicationOptions);
     validateOptions(): void;
     generate(): Promise<void>;
+    private generateSharedMetadata;
+    private generateWebAppBasic;
+    private generateReactBasic;
 }

package/lib/generators/webApplicationGenerator.js

@@ -28,13 +28,53 @@ class WebApplicationGenerator extends baseGenerator_1.BaseGenerator {
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
             const { template, webappname } = this.options;
             const masterLabel = this.options.masterlabel || (0, kit_1.camelCaseToTitleCase)(webappname);
-            this.sourceRootWithPartialPath('webapp-basic');
             const webappDir = path.join(this.outputdir, webappname);
-            yield this.render(this.templatePath(`${template}.html`), this.destinationPath(path.join(webappDir, 'index.html')), { masterLabel });
-            yield this.render(this.templatePath('webapp.json'), this.destinationPath(path.join(webappDir, 'webapp.json')), {});
+            yield this.generateSharedMetadata(webappDir, webappname, masterLabel);
+            switch (template) {
+                case 'reactBasic':
+                    yield this.generateReactBasic(webappDir, webappname, masterLabel);
+                    break;
+                default:
+                    yield this.generateWebAppBasic(webappDir, masterLabel);
+            }
+        });
+    }
+    generateSharedMetadata(webappDir, webappname, masterLabel) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.sourceRootWithPartialPath('webapp-basic');
             yield this.render(this.templatePath('_webapplication.webApplication-meta.xml'), this.destinationPath(path.join(webappDir, `${webappname}.webApplication-meta.xml`)), { apiVersion: this.apiversion, masterLabel });
         });
     }
+    generateWebAppBasic(webappDir, masterLabel) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.sourceRootWithPartialPath('webapp-basic');
+            yield this.render(this.templatePath('index.html'), this.destinationPath(path.join(webappDir, 'index.html')), { masterLabel });
+            yield this.render(this.templatePath('webapp.json'), this.destinationPath(path.join(webappDir, 'webapp.json')), {});
+        });
+    }
+    generateReactBasic(webappDir, webappname, masterLabel) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.sourceRootWithPartialPath('reactBasic');
+            yield this.render(this.templatePath('index.html'), this.destinationPath(path.join(webappDir, 'index.html')), { masterLabel });
+            yield this.render(this.templatePath('webapp.json'), this.destinationPath(path.join(webappDir, 'webapp.json')), {});
+            yield this.render(this.templatePath('package.json'), this.destinationPath(path.join(webappDir, 'package.json')), { webappname });
+            yield this.render(this.templatePath('vite.config.ts'), this.destinationPath(path.join(webappDir, 'vite.config.ts')), {});
+            yield this.render(this.templatePath('tsconfig.json'), this.destinationPath(path.join(webappDir, 'tsconfig.json')), {});
+            yield this.render(this.templatePath('tsconfig.node.json'), this.destinationPath(path.join(webappDir, 'tsconfig.node.json')), {});
+            yield this.render(this.templatePath('tailwind.config.js'), this.destinationPath(path.join(webappDir, 'tailwind.config.js')), {});
+            yield this.render(this.templatePath('postcss.config.js'), this.destinationPath(path.join(webappDir, 'postcss.config.js')), {});
+            yield this.render(this.templatePath(path.join('src', 'main.tsx')), this.destinationPath(path.join(webappDir, 'src', 'main.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'App.tsx')), this.destinationPath(path.join(webappDir, 'src', 'App.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'routes.ts')), this.destinationPath(path.join(webappDir, 'src', 'routes.ts')), {});
+            yield this.render(this.templatePath(path.join('src', 'vite-env.d.ts')), this.destinationPath(path.join(webappDir, 'src', 'vite-env.d.ts')), {});
+            yield this.render(this.templatePath(path.join('src', 'components', 'Navigation.tsx')), this.destinationPath(path.join(webappDir, 'src', 'components', 'Navigation.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'pages', 'Home.tsx')), this.destinationPath(path.join(webappDir, 'src', 'pages', 'Home.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'pages', 'About.tsx')), this.destinationPath(path.join(webappDir, 'src', 'pages', 'About.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'pages', 'NotFound.tsx')), this.destinationPath(path.join(webappDir, 'src', 'pages', 'NotFound.tsx')), {});
+            yield this.render(this.templatePath(path.join('src', 'styles', 'global.css')), this.destinationPath(path.join(webappDir, 'src', 'styles', 'global.css')), {});
+            yield this.render(this.templatePath(path.join('src', 'test-setup', 'setup.ts')), this.destinationPath(path.join(webappDir, 'src', 'test-setup', 'setup.ts')), {});
+        });
+    }
 }
 exports.default = WebApplicationGenerator;
 //# sourceMappingURL=webApplicationGenerator.js.map

package/lib/generators/webApplicationGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"webApplicationGenerator.js","sourceRoot":"","sources":["../../src/generators/webApplicationGenerator.ts"],"names":[],"mappings":";;;AAAA;;;;;GAKG;AACH,yCAAuD;AACvD,6BAA6B;AAC7B,kCAA8B;AAC9B,oCAAsC;AAEtC,mDAAgD;AAEhD,MAAqB,uBAAwB,SAAQ,6BAAoC;IACvF,YAAY,OAA8B;QACxC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;IAEM,eAAe;QACpB,kBAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAChD,kBAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAE9C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACrE,MAAM,IAAI,KAAK,CAAC,UAAG,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEY,QAAQ;;YACnB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YAC9C,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,IAAA,0BAAoB,EAAC,UAAU,CAAC,CAAC;YAE/D,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,CAAC;YAE/C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;YAExD,MAAM,IAAI,CAAC,MAAM,CACf,IAAI,CAAC,YAAY,CAAC,GAAG,QAAQ,OAAO,CAAC,EACrC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,EACxD,EAAE,WAAW,EAAE,CAChB,CAAC;YAEF,MAAM,IAAI,CAAC,MAAM,CACf,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,EACzD,EAAE,CACH,CAAC;YAEF,MAAM,IAAI,CAAC,MAAM,CACf,IAAI,CAAC,YAAY,CAAC,yCAAyC,CAAC,EAC5D,IAAI,CAAC,eAAe,CAClB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,UAAU,0BAA0B,CAAC,CAC9D,EACD,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAC7C,CAAC;QACJ,CAAC;KAAA;CACF;AA5CD,0CA4CC"}
+{"version":3,"file":"webApplicationGenerator.js","sourceRoot":"","sources":["../../src/generators/webApplicationGenerator.ts"],"names":[],"mappings":"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"}

package/lib/templates/reactBasic/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= masterLabel %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/lib/templates/reactBasic/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "<%= webappname %>",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode development",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.2.2",
+    "vite": "^7.0.0",
+    "vitest": "^4.0.6"
+  }
+}
+

package/lib/templates/reactBasic/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+

package/lib/templates/reactBasic/src/App.tsx

@@ -0,0 +1,25 @@
+import { Routes, Route } from 'react-router-dom';
+import Navigation from './components/Navigation';
+import { routes } from './routes';
+
+function App() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navigation />
+      <main className="flex-1">
+        <Routes>
+          {routes.map(route => (
+            <Route
+              key={route.path}
+              path={route.path}
+              element={<route.component />}
+            />
+          ))}
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default App;
+

package/lib/templates/reactBasic/src/components/Navigation.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { navItems } from '../routes';
+
+function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'opacity-0' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navItems.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export default Navigation;
+

package/lib/templates/reactBasic/src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
+

package/lib/templates/reactBasic/src/pages/About.tsx

@@ -0,0 +1,13 @@
+function About() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">About</h1>
+        <p className="text-lg text-gray-600">This is the about page.</p>
+      </div>
+    </div>
+  );
+}
+
+export default About;
+

package/lib/templates/reactBasic/src/pages/Home.tsx

@@ -0,0 +1,15 @@
+function Home() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
+

package/lib/templates/reactBasic/src/pages/NotFound.tsx

@@ -0,0 +1,21 @@
+import { Link } from 'react-router-dom';
+
+function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default NotFound;
+

package/lib/templates/reactBasic/src/routes.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react';
+import Home from './pages/Home';
+import About from './pages/About';
+import NotFound from './pages/NotFound';
+
+export interface RouteConfig {
+  path: string;
+  label: string;
+  component: ComponentType;
+  showInNav?: boolean;
+}
+
+export const routes: RouteConfig[] = [
+  { path: '/', label: 'Home', component: Home, showInNav: true },
+  { path: '/about', label: 'About', component: About, showInNav: true },
+  { path: '*', label: 'Not Found', component: NotFound, showInNav: false },
+];
+
+export const navItems = routes.filter(route => route.showInNav);
+

package/lib/templates/reactBasic/src/styles/global.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply antialiased;
+  }
+}
+

package/lib/templates/reactBasic/src/test-setup/setup.ts

@@ -0,0 +1,10 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+

package/lib/templates/reactBasic/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+

package/lib/templates/reactBasic/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+

package/lib/templates/reactBasic/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@styles/*": ["./src/styles/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+

package/lib/templates/reactBasic/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}
+

package/lib/templates/reactBasic/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { resolve } from 'path';
+
+export default defineConfig(() => {
+  return {
+    plugins: [react()],
+    base: '/',
+
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@components': path.resolve(__dirname, './src/components'),
+        '@pages': path.resolve(__dirname, './src/pages'),
+        '@styles': path.resolve(__dirname, './src/styles'),
+      },
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    },
+
+    build: {
+      outDir: resolve(__dirname, 'dist'),
+      assetsDir: 'assets',
+      sourcemap: false,
+    },
+
+    test: {
+      root: resolve(__dirname),
+      environment: 'happy-dom',
+      setupFiles: ['./src/test-setup/setup.ts'],
+      include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+      exclude: ['node_modules/', 'dist/'],
+    },
+  };
+});
+

package/lib/templates/reactBasic/webapp.json

@@ -0,0 +1,17 @@
+{
+  "outputDir": "dist",
+  "scripts": {
+    "dev": "npm run dev",
+    "build": "npm run build",
+    "previewUrl": "http://localhost:3000"
+  },
+  "routing": {
+    "rewrites": [
+      { "route": "/app/*", "rewrite": "pages/index.html" }
+    ],
+    "redirects": [],
+    "fallback": "pages/index.html",
+    "trailingSlash": "auto",
+    "fileBasedRouting": true
+  }
+}

package/lib/utils/types.d.ts

@@ -119,7 +119,7 @@ export interface StaticResourceOptions extends TemplateOptions {
 }
 export interface WebApplicationOptions extends TemplateOptions {
     webappname: string;
-    template: 'default';
+    template: 'default' | 'reactBasic';
     masterlabel?: string;
     internal?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/templates",
-  "version": "65.2.0",
+  "version": "65.3.0",
   "description": "Salesforce JS library for templates",
   "bugs": "https://github.com/forcedotcom/salesforcedx-templates/issues",
   "main": "lib/index.js",