update TS SSR example

Author: theKashey

examples/SSR/typescript-react/app/App.tsx

@@ -1,38 +1,40 @@
 import * as React from "react";
-import {Helmet} from "react-helmet";
-//import { Switch, Route, Redirect } from "react-router-dom";
 import Home from "./components/Home";
 import importedComponent, {ComponentLoader, loadableResource} from "react-imported-component";
 
-const Another = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"));
+const Another = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
+  LoadingComponent: () => <div>loading</div>
+});
 const Other1 = importedComponent(() => import(/* webpackChunkName: "namedChunk-1" */"./components/Other"));
 const Other2 = importedComponent(() => import(/* webpackChunkName: "namedChunk-1" */"./components/OtherTween"));
 
-importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
-  render(Component, state) {
-    if (state.state === "loading") {
+const AnotherWrapped = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
+  render(Component, state, props: {prop: number}) {
+    if (state === "loading") {
       return <span/>
     }
-    return <div><Component/></div>
+    return <div className="wrapped"><Component test={props.prop} p2={props.prop}/></div>
   }
 });
 //import Another from "./components/Another";
 
 export default function App() {
   return (
     <div>
+      [not-trackable]
       <ComponentLoader
         loadable={() => import('./components/Another')}
       />
       <ComponentLoader
         loadable={loadableResource(() => import('./components/Another'))}
       />
-      <Helmet defaultTitle="Hello World!">
-        <meta charSet="utf-8"/>
-      </Helmet>
-      <Home/>
-      <Another/>
-      <Other1/>
+      [/not-trackable]
+      [home]<Home/>[/home]
+      <Another test={42} p2={42}/>
+      [
+      <AnotherWrapped prop={24}/>
+      ]
+      <Other1 test={42}/>
       <Other2/>
       <Home/>
     </div>

examples/SSR/typescript-react/app/client.tsx

@@ -1,5 +1,5 @@
 import { rehydrateMarks } from "react-imported-component";
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
@@ -14,6 +14,7 @@ delete window.__PRELOADED_STATE__;
 const store = configureStore(preloadedState);
 
 const element = document.getElementById("app");
+
 const app = (
   <Provider store={store}>
     <BrowserRouter>
@@ -23,5 +24,7 @@ const app = (
 );
 
   rehydrateMarks().then(() => {
+    console.log(element.innerHTML);
     ReactDOM.hydrate(app, element);
+    console.log(element.innerHTML);
   });

examples/SSR/typescript-react/app/components/Another.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 
-const Another = () => <a>Another!</a>;
+const Another:React.SFC<{test: number, p2: number}> = () => <a>Another!</a>;
 export default Another;

examples/SSR/typescript-react/app/components/Other.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
-const Another = () => <a>Other!</a>;
+const Another:React.SFC<{test: number}> = () => <a>Other!</a>;
 export default Another;

examples/SSR/typescript-react/app/components/OtherTween.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 
-const Another = () => <a>Other!</a>;
+const Another: React.SFC = () => <a>Other!</a>;
 export default Another;

examples/SSR/typescript-react/app/imported.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */ 
     import {assignImportedComponents} from 'react-imported-component';
     const applicationImports = {
-      0: () => import(/* webpackChunkName: namedChunk-0 */'./components/Another'),
+      0: () => import('./components/Another'),
 1: () => import(/* webpackChunkName: "namedChunk-1" */'./components/Other'),
 2: () => import(/* webpackChunkName: "namedChunk-1" */'./components/OtherTween'),
     };