feat: 实现 Home 组件

packages/home/component.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  Redirect
+} from 'react-router-dom';
+
+const AnimationExample = () => (
+  <Router basename="/home">
+    <Route
+      render={({ location }) => (
+        <div style={{position: 'relative', height: '100%'}}>
+          <Route
+            exact
+            path="/"
+            render={() => <Redirect to="/hsl/10/90/50" />}
+          />
+
+          <ul style={styles.nav}>
+            <NavLink to="/hsl/10/90/50">Red</NavLink>
+            <NavLink to="/hsl/120/100/40">Green</NavLink>
+            <NavLink to="/rgb/33/150/243">Blue</NavLink>
+            <NavLink to="/rgb/240/98/146">Pink</NavLink>
+          </ul>
+
+          <div style={styles.content}>
+            <TransitionGroup>
+              {/* no different than other usage of
+                CSSTransition, just make sure to pass
+                `location` to `Switch` so it can match
+                the old location as it animates out
+              */}
+              <CSSTransition key={location.key} classNames="fade" timeout={300}>
+                <Switch location={location}>
+                  <Route exact path="/hsl/:h/:s/:l" component={HSL} />
+                  <Route exact path="/rgb/:r/:g/:b" component={RGB} />
+                  {/* Without this `Route`, we would get errors during
+                    the initial transition from `/` to `/hsl/10/90/50`
+                  */}
+                  <Route render={() => <div>Not Found</div>} />
+                </Switch>
+              </CSSTransition>
+            </TransitionGroup>
+          </div>
+        </div>
+      )}
+    />
+  </Router>
+);
+
+const NavLink = props => (
+  <li style={styles.navItem}>
+    <Link {...props} style={{ color: "inherit" }} />
+  </li>
+);
+
+const HSL = ({ match: { params } }) => (
+  <div
+    style={{
+      ...styles.fill,
+      ...styles.hsl,
+      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
+    }}
+  >
+    hsl({params.h}, {params.s}%, {params.l}%)
+  </div>
+);
+
+const RGB = ({ match: { params } }) => (
+  <div
+    style={{
+      ...styles.fill,
+      ...styles.rgb,
+      background: `rgb(${params.r}, ${params.g}, ${params.b})`
+    }}
+  >
+    rgb({params.r}, {params.g}, {params.b})
+  </div>
+);
+
+const styles = {};
+
+styles.fill = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0
+};
+
+styles.content = {
+  ...styles.fill,
+  top: "40px",
+  textAlign: "center"
+};
+
+styles.nav = {
+  padding: 0,
+  margin: 0,
+  position: "absolute",
+  top: 0,
+  height: "40px",
+  width: "100%",
+  display: "flex"
+};
+
+styles.navItem = {
+  textAlign: "center",
+  flex: 1,
+  listStyleType: "none",
+  padding: "10px"
+};
+
+styles.hsl = {
+  ...styles.fill,
+  color: "white",
+  paddingTop: "20px",
+  fontSize: "30px"
+};
+
+styles.rgb = {
+  ...styles.fill,
+  color: "white",
+  paddingTop: "20px",
+  fontSize: "30px"
+};
+
+export default AnimationExample;

packages/home/home.app.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SingleSpaReact from 'single-spa-react';
+import Home from './component';
+
+function domElementGetter() {
+  return document.getElementById('home');
+}
+
+const reactLifecycles = SingleSpaReact({
+  React,
+  React,
+  rootComponent: Home,
+  domElementGetter,
+});
+
+export const bootstrap = [
+  reactLifecycles.bootstrap,
+];
+
+export const mount = [
+  reactLifecycles.mount,
+];
+
+export const unmount = [
+  reactLifecycles.unmount,
+];