Skip to content

Commit 45fc8e9

Browse files
theKasheytheKashey
committed
add CRA example
1 parent fe2e623 commit 45fc8e9

File tree

10 files changed

+179
-0
lines changed

10 files changed

+179
-0
lines changed

‎examples/CRA/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/CRA/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
*.log
3+
.cache
4+
dist
5+
yarn.lock

‎examples/CRA/async-imports.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
/* eslint-disable */
3+
/* tslint:disable */
4+
5+
// generated by react-imported-component, DO NOT EDIT
6+
import {assignImportedComponents} from 'react-imported-component/macro';
7+
8+
// all your imports are defined here
9+
// all, even the ones you tried to hide in comments (that's the cost of making a very fast parser)
10+
// to remove any import from here
11+
// 1) use magic comment `import(/* client-side */ './myFile')` - and it will disappear
12+
// 2) use file filter to ignore specific locations (refer to the README)
13+
14+
const applicationImports = assignImportedComponents([
15+
[() => import('./src/async'), '', './src/async', false],
16+
]);
17+
18+
export default applicationImports;
19+
20+
// @ts-ignore
21+
if (module.hot) {
22+
// these imports would make this module a parent for the imported modules.
23+
// but this is just a helper - so ignore(and accept!) all updates
24+
25+
// @ts-ignore
26+
module.hot.accept(() => null);
27+
}
28+

‎examples/CRA/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "create-react-app-example",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"react": "16.8.6",
9+
"react-dom": "16.8.6",
10+
"react-imported-component": "6.1.1",
11+
"react-scripts": "3.0.1"
12+
},
13+
"devDependencies": {
14+
"babel-jest": "^24.8.0",
15+
"typescript": "3.3.3"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test --env=jsdom",
21+
"eject": "react-scripts eject"
22+
},
23+
"browserslist": [
24+
">0.2%",
25+
"not dead",
26+
"not ie <= 11",
27+
"not op_mini all"
28+
]
29+
}

‎examples/CRA/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎examples/CRA/src/async-imports.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable */
2+
/* tslint:disable */
3+
4+
// generated by react-imported-component, DO NOT EDIT
5+
import { assignImportedComponents } from "react-imported-component/macro";
6+
7+
// all your imports are defined here
8+
// all, even the ones you tried to hide in comments (that's the cost of making a very fast parser)
9+
// to remove any import from here
10+
// 1) use magic comment `import(/* client-side */ './myFile')` - and it will disappear
11+
// 2) use file filter to ignore specific locations (refer to the README)
12+
13+
const applicationImports = assignImportedComponents([
14+
[() => import("./async"), "", "./async", false]
15+
]);
16+
17+
console.log("async imports called");
18+
19+
export default applicationImports;
20+
21+
// @ts-ignore
22+
if (module.hot) {
23+
// these imports would make this module a parent for the imported modules.
24+
// but this is just a helper - so ignore(and accept!) all updates
25+
26+
// @ts-ignore
27+
module.hot.accept(() => null);
28+
}

‎examples/CRA/src/async.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from 'react';
2+
3+
export default () => <div>loaded async!</div>

‎examples/CRA/src/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
// this import should enable import transpilation
5+
import "react-imported-component/macro";
6+
7+
import './async-imports';
8+
9+
import "./styles.css";
10+
import Load from "./load";
11+
12+
const Async = Load(() => import("./async"));
13+
14+
function App() {
15+
return (
16+
<div className="App">
17+
<h1>Hello CodeSandbox</h1>
18+
<h2>Start editing to see some magic happen!</h2>
19+
<Async />
20+
</div>
21+
);
22+
}
23+
24+
const rootElement = document.getElementById("root");
25+
ReactDOM.render(<App />, rootElement);

‎examples/CRA/src/load.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import { imported, lazy } from "react-imported-component/macro";
3+
4+
const Load = component => {
5+
if (!component) return;
6+
return imported(component, {
7+
LoadingComponent: () => <p>Loading</p>,
8+
ErrorComponent: () => <p>Error</p>
9+
});
10+
};
11+
12+
13+
export default Load;

‎examples/CRA/src/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.App {
2+
font-family: sans-serif;
3+
text-align: center;
4+
}

0 commit comments

Comments
 (0)