update examples

Author: theKashey

examples/SSR/parcel-react-ssr/README.md

@@ -0,0 +1,6 @@
+__COMPLEX__ streamed SSR example
+
+- `yarn start` - simple `renderToString` SSR + used style extraction
+- `yarn start:stream` - complex `renderToStream` example
+ - if `stream-server/middleware` is used - all styles would be in HEAD
+ - if `stream-server/interleaved-middleware` is used - all styles would be _interleaved_ in result HTML

examples/SSR/parcel-react-ssr/stream-server/interleaved-middleware.js

@@ -70,8 +70,6 @@ export default function middleware(req, res) {
 
   MultiStream(streams).pipe(res);
 
-  const importedStream  =
-
   // start by piping react and styled transform stream
   htmlStream.pipe(styledStream);
   styledStream.on('end', () => {

examples/SSR/runtime-manifest/.babelrc

@@ -0,0 +1,3 @@
+{
+    "plugins": ["react-imported-component/babel"]
+}

examples/SSR/runtime-manifest/.circleci/config.yml

@@ -0,0 +1,13 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: debian:stretch
+    steps:
+      - checkout
+      - run:
+          name: Greeting
+          command: echo Hello, world.
+      - run:
+          name: Print the Current Time
+          command: date

examples/SSR/runtime-manifest/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+.cache
+dist

examples/SSR/runtime-manifest/README.md

@@ -0,0 +1,4 @@
+Example using `runtime chunk` or `manifest` to speed up chunk loading
+
+
+-- not complete!

examples/SSR/runtime-manifest/app/App.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #EEE;
+}

examples/SSR/runtime-manifest/app/App.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import Home from "./components/Home";
+import importedComponent, {ComponentLoader, loadableResource} from "react-imported-component";
+
+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"));
+
+const AnotherWrapped = importedComponent(
+  () => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
+    render(Component, state, props: { prop: number }) {
+      if (state.loading) {
+        return <span/>
+      }
+      return <div className="wrapped"><Component test={props.prop} p2={props.prop}/></div>
+    }
+  });
+//import Another from "./components/Another";
+
+// @ts-ignore
+// const importCss = () => im port("./App.css");
+
+export default function App() {
+  return (
+    <div>
+      [not-trackable]
+      <ComponentLoader
+        loadable={() => import("./components/Another")}
+      />
+      <ComponentLoader
+        loadable={loadableResource(() => import("./components/Another"))}
+      />
+      [/not-trackable]
+      [home]<Home/>[/home]
+      <Another test={42} p2={42}/>
+
+      <AnotherWrapped prop={24}/>
+
+      <Other1 test={42}/>
+      {0 && <Other2/>}
+      <Home/>
+    </div>
+  );
+}

examples/SSR/runtime-manifest/app/assets/favicon.ico

@@ -0,0 +1,30 @@
+import { rehydrateMarks } from "react-imported-component";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { configureStore } from "./store";
+import "./imported"; // eslint-disable-line
+
+import App from "./App";
+
+const preloadedState = window.__PRELOADED_STATE__;
+delete window.__PRELOADED_STATE__;
+
+const store = configureStore(preloadedState);
+
+const element = document.getElementById("app");
+
+const app = (
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
+);
+
+  rehydrateMarks().then(() => {
+    console.log(element.innerHTML);
+    ReactDOM.hydrate(app, element);
+    console.log(element.innerHTML);
+  });