Skip to content

Commit c900bdd

Browse files
devlocodevloco
committed
3.4.0 Update Templates
1 parent 7144c10 commit c900bdd

File tree

9 files changed

+242
-273
lines changed

9 files changed

+242
-273
lines changed

‎packages/cra-template-wptheme-typescript/template/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
3333

3434
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3535

36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
36+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
3737

3838
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
3939

‎packages/cra-template-wptheme-typescript/template/src/App.tsx

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import logo from "./logo.svg";
3+
import "./App.css";
44

5-
const App = () => {
6-
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>react-src/src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
23-
);
5+
function App() {
6+
return (
7+
<div className="App">
8+
<header className="App-header">
9+
<img src={logo} className="App-logo" alt="logo" />
10+
<p>
11+
Edit <code>react-src/src/App.tsx</code> and save to reload.
12+
</p>
13+
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
14+
Learn React
15+
</a>
16+
</header>
17+
</div>
18+
);
2419
}
2520

2621
export default App;

‎packages/cra-template-wptheme-typescript/template/src/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
// import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
import * as serviceWorker from "./serviceWorker";
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
ReactDOM.render(<App />, document.getElementById("root"));
88

99
// If you want your app to work offline and load faster, you can change
1010
// unregister() to register() below. Note this comes with some pitfalls.
1111
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
// serviceWorker.unregister();
12+
serviceWorker.unregister();

‎packages/cra-template-wptheme-typescript/template/src/serviceWorker.ts

Lines changed: 97 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -11,135 +11,123 @@
1111
// opt-in, read https://bit.ly/CRA-PWA
1212

1313
const isLocalhost = Boolean(
14-
window.location.hostname === 'localhost' ||
15-
// [::1] is the IPv6 localhost address.
16-
window.location.hostname === '[::1]' ||
17-
// 127.0.0.0/8 are considered localhost for IPv4.
18-
window.location.hostname.match(
19-
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20-
)
14+
window.location.hostname === "localhost" ||
15+
// [::1] is the IPv6 localhost address.
16+
window.location.hostname === "[::1]" ||
17+
// 127.0.0.0/8 are considered localhost for IPv4.
18+
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
2119
);
2220

2321
type Config = {
24-
onSuccess?: (registration: ServiceWorkerRegistration) => void;
25-
onUpdate?: (registration: ServiceWorkerRegistration) => void;
22+
onSuccess?: (registration: ServiceWorkerRegistration) => void;
23+
onUpdate?: (registration: ServiceWorkerRegistration) => void;
2624
};
2725

2826
export function register(config?: Config) {
29-
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30-
// The URL constructor is available in all browsers that support SW.
31-
const publicUrl = new URL(
32-
process.env.PUBLIC_URL,
33-
window.location.href
34-
);
35-
if (publicUrl.origin !== window.location.origin) {
36-
// Our service worker won't work if PUBLIC_URL is on a different origin
37-
// from what our page is served on. This might happen if a CDN is used to
38-
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
39-
return;
40-
}
27+
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
28+
// The URL constructor is available in all browsers that support SW.
29+
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
30+
if (publicUrl.origin !== window.location.origin) {
31+
// Our service worker won't work if PUBLIC_URL is on a different origin
32+
// from what our page is served on. This might happen if a CDN is used to
33+
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
34+
return;
35+
}
4136

42-
window.addEventListener('load', () => {
43-
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
37+
window.addEventListener("load", () => {
38+
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
4439

45-
if (isLocalhost) {
46-
// This is running on localhost. Let's check if a service worker still exists or not.
47-
checkValidServiceWorker(swUrl, config);
40+
if (isLocalhost) {
41+
// This is running on localhost. Let's check if a service worker still exists or not.
42+
checkValidServiceWorker(swUrl, config);
4843

49-
// Add some additional logging to localhost, pointing developers to the
50-
// service worker/PWA documentation.
51-
navigator.serviceWorker.ready.then(() => {
52-
console.log(
53-
'This web app is being served cache-first by a service ' +
54-
'worker. To learn more, visit https://bit.ly/CRA-PWA'
55-
);
44+
// Add some additional logging to localhost, pointing developers to the
45+
// service worker/PWA documentation.
46+
navigator.serviceWorker.ready.then(() => {
47+
console.log("This web app is being served cache-first by a service " + "worker. To learn more, visit https://bit.ly/CRA-PWA");
48+
});
49+
} else {
50+
// Is not localhost. Just register service worker
51+
registerValidSW(swUrl, config);
52+
}
5653
});
57-
} else {
58-
// Is not localhost. Just register service worker
59-
registerValidSW(swUrl, config);
60-
}
61-
});
62-
}
54+
}
6355
}
6456

6557
function registerValidSW(swUrl: string, config?: Config) {
66-
navigator.serviceWorker
67-
.register(swUrl)
68-
.then(registration => {
69-
registration.onupdatefound = () => {
70-
const installingWorker = registration.installing;
71-
if (installingWorker == null) {
72-
return;
73-
}
74-
installingWorker.onstatechange = () => {
75-
if (installingWorker.state === 'installed') {
76-
if (navigator.serviceWorker.controller) {
77-
// At this point, the updated precached content has been fetched,
78-
// but the previous service worker will still serve the older
79-
// content until all client tabs are closed.
80-
console.log(
81-
'New content is available and will be used when all ' +
82-
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83-
);
58+
navigator.serviceWorker
59+
.register(swUrl)
60+
.then((registration) => {
61+
registration.onupdatefound = () => {
62+
const installingWorker = registration.installing;
63+
if (installingWorker == null) {
64+
return;
65+
}
66+
installingWorker.onstatechange = () => {
67+
if (installingWorker.state === "installed") {
68+
if (navigator.serviceWorker.controller) {
69+
// At this point, the updated precached content has been fetched,
70+
// but the previous service worker will still serve the older
71+
// content until all client tabs are closed.
72+
console.log("New content is available and will be used when all " + "tabs for this page are closed. See https://bit.ly/CRA-PWA.");
8473

85-
// Execute callback
86-
if (config && config.onUpdate) {
87-
config.onUpdate(registration);
88-
}
89-
} else {
90-
// At this point, everything has been precached.
91-
// It's the perfect time to display a
92-
// "Content is cached for offline use." message.
93-
console.log('Content is cached for offline use.');
74+
// Execute callback
75+
if (config && config.onUpdate) {
76+
config.onUpdate(registration);
77+
}
78+
} else {
79+
// At this point, everything has been precached.
80+
// It's the perfect time to display a
81+
// "Content is cached for offline use." message.
82+
console.log("Content is cached for offline use.");
9483

95-
// Execute callback
96-
if (config && config.onSuccess) {
97-
config.onSuccess(registration);
98-
}
99-
}
100-
}
101-
};
102-
};
103-
})
104-
.catch(error => {
105-
console.error('Error during service worker registration:', error);
106-
});
84+
// Execute callback
85+
if (config && config.onSuccess) {
86+
config.onSuccess(registration);
87+
}
88+
}
89+
}
90+
};
91+
};
92+
})
93+
.catch((error) => {
94+
console.error("Error during service worker registration:", error);
95+
});
10796
}
10897

10998
function checkValidServiceWorker(swUrl: string, config?: Config) {
110-
// Check if the service worker can be found. If it can't reload the page.
111-
fetch(swUrl, {
112-
headers: { 'Service-Worker': 'script' }
113-
})
114-
.then(response => {
115-
// Ensure service worker exists, and that we really are getting a JS file.
116-
const contentType = response.headers.get('content-type');
117-
if (
118-
response.status === 404 ||
119-
(contentType != null && contentType.indexOf('javascript') === -1)
120-
) {
121-
// No service worker found. Probably a different app. Reload the page.
122-
navigator.serviceWorker.ready.then(registration => {
123-
registration.unregister().then(() => {
124-
window.location.reload();
125-
});
126-
});
127-
} else {
128-
// Service worker found. Proceed as normal.
129-
registerValidSW(swUrl, config);
130-
}
99+
// Check if the service worker can be found. If it can't reload the page.
100+
fetch(swUrl, {
101+
headers: { "Service-Worker": "script" }
131102
})
132-
.catch(() => {
133-
console.log(
134-
'No internet connection found. App is running in offline mode.'
135-
);
136-
});
103+
.then((response) => {
104+
// Ensure service worker exists, and that we really are getting a JS file.
105+
const contentType = response.headers.get("content-type");
106+
if (response.status === 404 || (contentType != null && contentType.indexOf("javascript") === -1)) {
107+
// No service worker found. Probably a different app. Reload the page.
108+
navigator.serviceWorker.ready.then((registration) => {
109+
registration.unregister().then(() => {
110+
window.location.reload();
111+
});
112+
});
113+
} else {
114+
// Service worker found. Proceed as normal.
115+
registerValidSW(swUrl, config);
116+
}
117+
})
118+
.catch(() => {
119+
console.log("No internet connection found. App is running in offline mode.");
120+
});
137121
}
138122

139123
export function unregister() {
140-
if ('serviceWorker' in navigator) {
141-
navigator.serviceWorker.ready.then(registration => {
142-
registration.unregister();
143-
});
144-
}
124+
if ("serviceWorker" in navigator) {
125+
navigator.serviceWorker.ready
126+
.then((registration) => {
127+
registration.unregister();
128+
})
129+
.catch((error) => {
130+
console.error(error.message);
131+
});
132+
}
145133
}

‎packages/cra-template-wptheme/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cra-template-wptheme",
3-
"version": "3.3.1-wp.1",
3+
"version": "3.4.0-wp.1",
44
"keywords": [
55
"wordpress",
66
"create-react-app",

‎packages/cra-template-wptheme/template/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
3333

3434
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3535

36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
36+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
3737

3838
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
3939

‎packages/cra-template-wptheme/template/src/App.js

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import logo from "./logo.svg";
3+
import "./App.css";
44

55
function App() {
6-
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>react-src/src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
23-
);
6+
return (
7+
<div className="App">
8+
<header className="App-header">
9+
<img src={logo} className="App-logo" alt="logo" />
10+
<p>
11+
Edit <code>react-src/src/App.js</code> and save to reload.
12+
</p>
13+
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
14+
Learn React
15+
</a>
16+
</header>
17+
</div>
18+
);
2419
}
2520

2621
export default App;

‎packages/cra-template-wptheme/template/src/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
// import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
import * as serviceWorker from "./serviceWorker";
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
ReactDOM.render(<App />, document.getElementById("root"));
88

99
// If you want your app to work offline and load faster, you can change
1010
// unregister() to register() below. Note this comes with some pitfalls.
1111
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
// serviceWorker.unregister();
12+
serviceWorker.unregister();

0 commit comments

Comments
 (0)