oc-template-react-compiler 10.0.1 → 10.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-react-compiler",
-  "version": "10.0.1",
+  "version": "10.1.1",
   "description": "Compiler for the React OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "oc-template-react": "^4.2.0",
-    "oc-vite-compiler": "^5.0.0",
+    "oc-vite-compiler": "^5.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

package/scaffold/src/package.json

@@ -26,8 +26,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "jsdom": "^21.1.1",
-    "oc-server": "^3.0.0",
-    "oc-template-react-compiler": "^10.0.0",
+    "oc-server": "^3.1.0",
+    "oc-template-react-compiler": "^10.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "5.1.3",

package/scaffold/src/src/App.tsx

@@ -6,6 +6,7 @@ import logo from '../public/logo.png';
 type AdditionalData = ActionOutput<'funFact'>;
 
 const App: React.FC<InitialData> = (props: InitialData) => {
+  // These come from the server.ts handler return value
   const { firstName, lastName, born, hobbies } = props;
   const [additionalData, setAdditionalData] = useState<AdditionalData | null>(
     null
@@ -15,6 +16,8 @@ const App: React.FC<InitialData> = (props: InitialData) => {
   const getFunFact = async () => {
     setError('');
     try {
+      // Call server action with type safety
+      // serverClient provides autocomplete and type checking
       const data = await serverClient.funFact({ year: born });
       setAdditionalData(data);
     } catch (err) {
@@ -28,6 +31,7 @@ const App: React.FC<InitialData> = (props: InitialData) => {
 
   return (
     <div className={styles.container}>
+      {/* Static assets are imported from ../public/ */}
       <img width="50" height="50" src={logo} alt="Logo" />
       <h1 style={{ margin: '0 0 20px 0' }}>
         Hello, <span style={{ textDecoration: 'underline' }}>{firstName}</span>{' '}
@@ -47,4 +51,5 @@ const App: React.FC<InitialData> = (props: InitialData) => {
   );
 };
 
+// Default export is required for OC build process
 export default App;

package/scaffold/src/src/server.ts

@@ -12,19 +12,24 @@ const yearsFunFactDatabase: Record<number, string> = {
 };
 
 async function getUser(userId: number) {
+  if (userId < 0 || userId >= userDatabase.length) {
+    throw new Error(`User with ID ${userId} not found`);
+  }
   return userDatabase[userId];
 }
 
 async function getFunFact(year: number) {
-  return yearsFunFactDatabase[year];
+  return yearsFunFactDatabase[year] || `No fun fact available for year ${year}`;
 }
 
+// Export the server instance - this is required for OC
 export const server = new Server({
   development: {
-    // Echo console logs from the browser to the server
+    // Enable console logs from browser to server for debugging
     console: true,
   },
 })
+  //Define URL parameters that can be passed to your component
   .withParameters({
     userId: {
       default: 1,
@@ -34,15 +39,23 @@ export const server = new Server({
       type: 'number',
     },
   })
-  .handler(async (params) => {
+  // Main handler - returns initial data for component rendering
+  // This runs when the component is first loaded
+  .handler(async (params, ctx) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);
 
     if (firstName === 'Invalid') {
+      // Return undefined to prevent rendering
       return;
     }
 
+    // Set cache headers when same params produce same result
+    // This improves performance by reducing server load
+    ctx.setHeader('Cache-Control', 'max-age=300'); // Cache for 5 minutes
+
+    // Return data that will be passed as props to React component
     return {
       firstName,
       lastName,
@@ -50,15 +63,17 @@ export const server = new Server({
       hobbies: user.hobbies,
     };
   })
+  // Actions are server endpoints that the client can call
+  // Use these for user interactions, form submissions, etc.
   .action('funFact', async (params: { year: number }) => {
     const { year } = params;
     const funFact = await getFunFact(year);
-
     return {
       funFact,
     };
   });
 
+// This enables automatic type inference between server and client
 declare module 'oc-server' {
   interface Register {
     server: typeof server;