Index props

packages/sitevision-scripts/template/web-react-typescript/src/index.tsx.template

@@ -11,21 +11,24 @@ import appData from '@sitevision/api/server/appData';
 {{#unless widget}}
   import App from './components/App';
 {{/unless}}
+import type { AppProperties } from './components/App/App';
 
 router.get('/', (req, res) => {
   const message = 'Hello, world!';
   const name = appData.get('name') as string;
 
+  const initialState: AppProperties = {
+    message,
+    name,
+  };
+
   {{#if clientRendering}}
     {{#if widget}}
-      res.agnosticRender('', {
+      res.agnosticRender('', initialState);
     {{else}}
-      res.agnosticRender(renderToString(<App message={message} name={name} />), {
+      res.agnosticRender(renderToString(<App {...initialState} />), initialState);
     {{/if}}
-        message,
-        name,
-      });
   {{else}}
-    res.send(renderToStaticMarkup(<App message={message} name={name} />));
+    res.send(renderToStaticMarkup(<App {...initialState} />));
   {{/if}}
 });

packages/sitevision-scripts/template/web-react-typescript/src/main.tsx.template

@@ -6,16 +6,12 @@ import * as React from 'react';
 {{/if}}
 
 import App from './components/App';
+import type { AppProperties } from './components/App/App';
 
-export default (initialState: any, el: HTMLElement) => {
+export default (initialState: AppProperties, el: HTMLElement) => {
   {{#if widget}}
-    createRoot(el).render(
-      <App message={initialState.message} name={initialState.name} />
-    );
+    createRoot(el).render(<App {...initialState} />);
   {{else}}
-    hydrateRoot(
-      el, 
-      <App message={initialState.message} name={initialState.name} />
-    );
+    hydrateRoot(el, <App {...initialState} />);
   {{/if}}
 };

packages/sitevision-scripts/template/web-react/src/index.js.template

@@ -16,16 +16,18 @@ router.get('/', (req, res) => {
   const message = 'Hello, world!';
   const name = appData.get('name');
 
+  const initialState = {
+    message,
+    name,
+  };
+
   {{#if clientRendering}}
     {{#if widget}}
-      res.agnosticRender('', {
+      res.agnosticRender('', initialState);
     {{else}}
-      res.agnosticRender(renderToString(<App message={message} name={name} />), {
+      res.agnosticRender(renderToString(<App {...initialState} />), initialState);
     {{/if}}
-        message,
-        name,
-      });
   {{else}}
-    res.send(renderToStaticMarkup(<App message={message} name={name} />));
+    res.send(renderToStaticMarkup(<App {...initialState} />));
   {{/if}}
 });

packages/sitevision-scripts/template/web-react/src/main.js.template

@@ -9,13 +9,8 @@ import App from './components/App';
 
 export default (initialState, el) => {
   {{#if widget}}
-    createRoot(el).render(
-      <App message={initialState.message} name={initialState.name} />
-    );
+    createRoot(el).render(<App {...initialState} />);
   {{else}}
-    hydrateRoot(
-      el, 
-      <App message={initialState.message} name={initialState.name} />
-    );
+    hydrateRoot(el, <App {...initialState} />);
   {{/if}}
 };