fix: 優化 react-script 4 hot reload iframe 問題 (facebook/create-react-ap…

…p#11880)
acrool · Jan 26, 2022 · 897c19a · 897c19a
1 parent 173a8ed
commit 897c19a
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 214 deletions.
diff --git a/example/package.json b/example/package.json
@@ -1,18 +1,15 @@
 {
-  "name": "imreact-styled-grid-example",
+  "name": "react-styled-grid-example",
   "homepage": ".",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+    "lint:fix": "eslint ./src --fix"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
-    "@testing-library/react": "link:../node_modules/@testing-library/react",
-    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
     "@types/jest": "link:../node_modules/@types/jest",
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
@@ -26,21 +23,10 @@
     "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@types/styled-components": "5.1.15"
-  },
-  "eslintConfig": {
-    "extends": "react-app",
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "link:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
   "browserslist": {
     "production": [
@@ -53,5 +39,32 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ],
+    "rules": {
+      "quotes": [
+        "warn",
+        "single"
+      ],
+      "semi": [
+        "warn",
+        "always"
+      ],
+      "indent": [
+        "warn",
+        4
+      ],
+      "object-curly-spacing": [
+        "warn",
+        "never"
+      ],
+      "no-useless-escape": "off",
+      "import/no-anonymous-default-export": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-unused-vars": "off"
+    }
   }
 }
diff --git a/example/src/App.test.tsx b/example/src/App.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-  ReactDOM.unmountComponentAtNode(div)
-})
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -2,157 +2,167 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import {GridThemeProvider, Col, Row, Container, media} from 'imagine-react-styled-grid';
 
-import 'imagine-react-styled-grid/dist/index.css'
+import 'imagine-react-styled-grid/dist/index.css';
 
 
 function App() {
-  const defaultTheme = {
-    gridColumns: 24,
-    gridGutterWidth: 15,
-    gridBreakpoints: {
-      xs: 0,
-      sm: 576,
-      md: 768,
-      lg: 992,
-      xl: 1200,
-      xxl: 1540,
-    },
-    containerMaxWidths: {
-      sm: 540,
-      md: 720,
-      lg: 960,
-      xl: 1140,
-      xxl: 1540,
-    },
-    gridGutterWidthMedia: {
-      sm: 15,
-      md: 15,
-      lg: 15,
-      xl: 15,
-      xxl: 15,
-    }
-  };
-
-  /**
+    const defaultTheme = {
+        gridColumns: 24,
+        gridGutterWidth: 15,
+        gridBreakpoints: {
+            xs: 0,
+            sm: 576,
+            md: 768,
+            lg: 992,
+            xl: 1200,
+            xxl: 1540,
+        },
+        containerMaxWidths: {
+            sm: 540,
+            md: 720,
+            lg: 960,
+            xl: 1140,
+            xxl: 1540,
+        },
+        gridGutterWidthMedia: {
+            sm: 15,
+            md: 15,
+            lg: 15,
+            xl: 15,
+            xxl: 15,
+        }
+    };
+
+    /**
    * Nav
    */
-  const renderNav = () => {
-    return <Nav className="mb-5">
-      <NavContainer className="px-5 d-flex">
-        <NavbarBrand>Start Bootstrap</NavbarBrand>
-
-        <NavbarNav className="ml-auto my-0 d-none d-md-flex">
-          <NavItem>
-            <NavLink href="#!" isActive>Home</NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink href="#!">About</NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink href="#!">Contact</NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink href="#!">Services</NavLink>
-          </NavItem>
-
-        </NavbarNav>
-      </NavContainer>
-    </Nav>;
-  };
-
-  /**
+    const renderNav = () => {
+        return <Nav className="mb-5">
+            <Container className="px-5 d-flex">
+                <NavbarBrand>Start Bootstrap</NavbarBrand>
+
+                <NavbarNav className="ml-auto my-0 d-none d-md-flex">
+                    <NavItem>
+                        <NavLink href="#!" isActive>Home</NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink href="#!">About</NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink href="#!">Contact</NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink href="#!">Services</NavLink>
+                    </NavItem>
+
+                </NavbarNav>
+            </Container>
+        </Nav>;
+    };
+
+
+    /**
+     * Header
+     */
+    const renderHeader = () => {
+        return <Container>
+            <Row>
+                <Col lg={14}>
+                    <img className="img-fluid mb-4 mb-lg-0 round" src="https://dummyimage.com/900x400/dee2e6/6c757d.jpg" alt="sample-img"/>
+                </Col>
+                <Col lg={10}>
+                    <Title>Business Name or Tagline</Title>
+                    <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
+                    <a href="#!">Call to Action!</a>
+
+                    <StyledCol className="mt-3">Test Styled(Col)</StyledCol>
+                </Col>
+            </Row>
+
+        </Container>;
+    };
+
+    /**
    * News
    */
-  const renderNews = () => {
-    return <Container>
+    const renderNews = () => {
+        return <Container>
 
-      <NewCard className="my-5 py-4 text-center">
-        <CardBody>
-          <p>This call to action card is a great place to showcase some important information or display a clever tagline!
-          </p>
-          <p>https://startbootstrap.github.io/startbootstrap-small-business/
-          </p>
-
-        </CardBody>
-      </NewCard>
-
-    </Container>;
-  };
-
-  /**
-   * Header
-   */
-  const renderHeader = () => {
-    return <Container>
-      <Row>
-        <Col lg={14}>
-          <img className="img-fluid mb-4 mb-lg-0 round" src="https://dummyimage.com/900x400/dee2e6/6c757d.jpg" alt="sample-img"/>
-        </Col>
-        <Col lg={10}>
-          <Title>Business Name or Tagline</Title>
-          <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
-          <a href="#!">Call to Action!</a>
-        </Col>
-      </Row>
-    </Container>;
-  };
-
-  /**
-   * Card List
-   */
-  const renderCardList = () => {
-    const texts = [
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.',
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.,',
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.',
-    ];
-
-      return (<Container>
-        <Row>
-          {texts.map((text, index) => {
-            return <Col md={8} key={`card_${index}`} className="mb-5">
-              <Card className="h-100">
+            <NewCard className="my-5 py-4 text-center">
                 <CardBody>
-                  <CardTitle>Card One</CardTitle>
-                  <CardText>{text}</CardText>
-                </CardBody>
-                <CardFooter>
-                  <a href="#!">More Info</a>
-                </CardFooter>
-              </Card>
-            </Col>;
-          })}
+                    <p>This call to action card is a great place to showcase some important information or display a clever tagline!
+                    </p>
+                    <p>https://startbootstrap.github.io/startbootstrap-small-business/
+                    </p>
 
-        </Row>
-      </Container>);
+                </CardBody>
+            </NewCard>
 
-  };
+        </Container>;
+    };
 
 
-  /**
+    /**
+   * Card List
+   */
+    const renderCardList = () => {
+        const texts = [
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.',
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.,',
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.',
+        ];
+
+        return (<Container>
+            <Row>
+                {texts.map((text, index) => {
+                    return <Col md={8} key={`card_${index}`} className="mb-5">
+                        <Card className="h-100">
+                            <CardBody>
+                                <CardTitle>Card One</CardTitle>
+                                <CardText>{text}</CardText>
+                            </CardBody>
+                            <CardFooter>
+                                <a href="#!">More Info</a>
+                            </CardFooter>
+                        </Card>
+                    </Col>;
+                })}
+
+            </Row>
+        </Container>);
+
+    };
+
+
+    /**
    * Footer
    */
-  const renderFooter = () => {
-    return <Footer className="py-5">
-      <Container className="px-4 px-lg-5"><p className="m-0 text-center">Copyright © Your Website 2022</p></Container>
-    </Footer>
-  };
-
-
-  return (
-    <GridThemeProvider gridTheme={defaultTheme}>
-      {renderNav()}
-      {renderHeader()}
-      {renderNews()}
-      {renderCardList()}
-      {renderFooter()}
-    </GridThemeProvider>
-  );
+    const renderFooter = () => {
+        return <Footer className="py-5">
+            <Container className="px-4 px-lg-5"><p className="m-0 text-center">Copyright © Your Website 2022</p></Container>
+        </Footer>;
+    };
+
+
+    return (
+        <GridThemeProvider gridTheme={defaultTheme}>
+            {renderNav()}
+            {renderHeader()}
+            {renderNews()}
+            {renderCardList()}
+            {renderFooter()}
+        </GridThemeProvider>
+    );
 }
 
 export default App;
 
 
+const StyledCol =styled(Col)`
+  border: dotted 1px #bdbdbd;
+`;
+
+
 const Footer = styled.footer`
   background-color: rgb(33, 37, 41);
   color: #97e4ff;