github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-04 01:00:21 +08:00
Code Projects Activity

feat(templates): updated react template to latest CRA implementation

Browse Source
This commit is contained in:
Tim Kipp 2020-08-29 22:59:22 -07:00 committed by Lea Anthony
parent 01a1288364
commit 9d5280d4d6
12 changed files with 82 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cmd/templates/create-react-app/frontend/package.json.template
View File

@ -5,8 +5,8 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"core-js": "^3.6.4", "core-js": "^3.6.4",
"react": "^16.13.0", "react": "^16.13.1",
"react-dom": "^16.13.0", "react-dom": "^16.13.1",
"wails-react-scripts": "3.0.1-2", "wails-react-scripts": "3.0.1-2",
"react-modal": "3.11.2", "react-modal": "3.11.2",
"@wailsapp/runtime": "^1.0.10" "@wailsapp/runtime": "^1.0.10"

BIN
cmd/templates/create-react-app/frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

17
cmd/templates/create-react-app/frontend/public/index.html
View File

@ -1,10 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -20,8 +23,9 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div> <div id="app"></div>
<!-- <!--
@ -34,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html>
</html>

BIN
cmd/templates/create-react-app/frontend/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
cmd/templates/create-react-app/frontend/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

10
cmd/templates/create-react-app/frontend/public/manifest.json
View File

@ -6,6 +6,16 @@
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
} }
], ],
"start_url": ".", "start_url": ".",

3
cmd/templates/create-react-app/frontend/public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

7
cmd/templates/create-react-app/frontend/src/App.css
View File

@ -3,11 +3,16 @@
} }
.App-logo { .App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;

63
cmd/templates/create-react-app/frontend/src/components/HelloWorld.js
View File

@ -1,48 +1,35 @@
import React from 'react'; import React, { useState } from 'react';
import Modal from 'react-modal'; import Modal from 'react-modal';
class HelloWorld extends React.Component { function HelloWorld() {
constructor(props, context) { const [showModal, setShowModal] = useState(false);
super(); const [result, setResult] = useState(null);
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this); const handleOpenModal = () => {
this.handleCloseModal = this.handleCloseModal.bind(this); setShowModal(true);
}
handleOpenModal () { window.backend.basic().then((result) => setResult(result));
this.setState({ showModal: true }); };
window.backend.basic().then(result => const handleCloseModal = () => {
this.setState({ setShowModal(false);
result };
})
);
}
handleCloseModal () { return (
this.setState({ showModal: false }); <div className="App">
} <button onClick={() => handleOpenModal()} type="button">
Hello
render() { </button>
const { result } = this.state; <Modal
return ( appElement={document.getElementById("app")}
<div className="App"> isOpen={showModal}
<button onClick={this.handleOpenModal} type="button"> contentLabel="Minimal Modal Example"
Hello >
</button>
<Modal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>
<p>{result}</p> <p>{result}</p>
<button onClick={this.handleCloseModal}>Close Modal</button> <button onClick={() => handleCloseModal()}>Close Modal</button>
</Modal> </Modal>
</div> </div>
); );
}
} }
export default HelloWorld; export default HelloWorld;

13
cmd/templates/create-react-app/frontend/src/index.js
View File

@ -3,9 +3,20 @@ import ReactDOM from 'react-dom';
import 'core-js/stable'; import 'core-js/stable';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker';
import * as Wails from '@wailsapp/runtime'; import * as Wails from '@wailsapp/runtime';
Wails.Init(() => { Wails.Init(() => {
ReactDOM.render(<App />, document.getElementById('app')); ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("app")
);
}); });
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

16
cmd/templates/create-react-app/frontend/src/serviceWorker.js
View File

@ -14,7 +14,7 @@ const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
) )
@ -100,7 +100,9 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl) fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => { .then(response => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
@ -128,8 +130,12 @@ function checkValidServiceWorker(swUrl, config) {
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready
registration.unregister(); .then(registration => {
}); registration.unregister();
})
.catch(error => {
console.error(error.message);
});
} }
} }

4
cmd/templates/create-react-app/template.json
View File

@ -1,8 +1,8 @@
{ {
"name": "React JS", "name": "React JS",
"version": "1.0.0", "version": "1.0.0",
"shortdescription": "Create React App v3 template", "shortdescription": "Create React App v4 template",
"description": "Create React App v3 standar tooling", "description": "Create React App v4 standard tooling",
"install": "npm install", "install": "npm install",
"build": "npm run build", "build": "npm run build",
"author": "bh90210 <ktc@pm.me>", "author": "bh90210 <ktc@pm.me>",