Skip to content

Commit

Permalink
add fast refresh example to react/preact templates (#1188)
Browse files Browse the repository at this point in the history
  • Loading branch information
@FredKSchott
FredKSchott authored Oct 2, 2020
1 parent f2279c8 commit 55bbc83
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 40 deletions.
10 changes: 9 additions & 1 deletion create-snowpack-app/app-template-preact/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
.App {
text-align: center;
}
.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}

.App-header {
background-color: #282c34;
Expand All @@ -20,7 +28,7 @@
.App-logo {
height: 40vmin;
pointer-events: none;
margin-bottom: 1rem;
margin-bottom: 3rem;
animation: App-logo-spin infinite 1.6s ease-in-out alternate;
}
@keyframes App-logo-spin {
Expand Down
24 changes: 16 additions & 8 deletions create-snowpack-app/app-template-preact/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
import { h } from 'preact';
import { useState } from 'preact/hooks';
import logo from './logo.png';
import './App.css';

function App() {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1000);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.jsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://preactjs.com"
target="_blank"
rel="noopener noreferrer"
>
Learn Preact
</a>
<p>
Page has been open for <code>{count}</code> seconds.
</p>
<p>
<a
className="App-link"
href="https://preactjs.com"
target="_blank"
rel="noopener noreferrer"
>
Learn Preact
</a>
</p>
</header>
</div>
);
Expand Down
8 changes: 8 additions & 0 deletions create-snowpack-app/app-template-react-typescript/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
.App {
text-align: center;
}
.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}

.App-logo {
height: 40vmin;
Expand Down
25 changes: 16 additions & 9 deletions create-snowpack-app/app-template-react-typescript/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
import React from 'react';
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

interface AppProps {}

function App({}: AppProps) {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1000);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>
Page has been open for <code>{count}</code> seconds.
</p>
<p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</p>
</header>
</div>
);
Expand Down
9 changes: 8 additions & 1 deletion create-snowpack-app/app-template-react/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
.App {
text-align: center;
}

.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}
.App-logo {
height: 40vmin;
pointer-events: none;
Expand Down
23 changes: 15 additions & 8 deletions create-snowpack-app/app-template-react/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,28 @@ import logo from './logo.svg';
import './App.css';

function App() {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1000);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.jsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>
Page has been open for <code>{count}</code> seconds.
</p>
<p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</p>
</header>
</div>
);
Expand Down
67 changes: 54 additions & 13 deletions test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7298,6 +7298,14 @@ exports[`create-snowpack-app app-template-preact: _dist_/App.css 1`] = `
".App {
text-align: center;
}
.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
Expand All @@ -7314,7 +7322,7 @@ exports[`create-snowpack-app app-template-preact: _dist_/App.css 1`] = `
.App-logo {
height: 40vmin;
pointer-events: none;
margin-bottom: 1rem;
margin-bottom: 3rem;
animation: App-logo-spin infinite 1.6s ease-in-out alternate;
}
@keyframes App-logo-spin {
Expand All @@ -7329,7 +7337,7 @@ exports[`create-snowpack-app app-template-preact: _dist_/App.css 1`] = `

exports[`create-snowpack-app app-template-preact: _dist_/App.css.proxy.js 1`] = `
"
const code = \\".App { text-align: center;}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}.App-logo { height: 40vmin; pointer-events: none; margin-bottom: 1rem; animation: App-logo-spin infinite 1.6s ease-in-out alternate;}@keyframes App-logo-spin { from { transform: scale(1); } to { transform: scale(1.06); }}\\";
const code = \\".App { text-align: center;}.App code { background: #FFF3; padding: 4px 8px; border-radius: 4px;}.App p { margin: 0.4rem;}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}.App-logo { height: 40vmin; pointer-events: none; margin-bottom: 3rem; animation: App-logo-spin infinite 1.6s ease-in-out alternate;}@keyframes App-logo-spin { from { transform: scale(1); } to { transform: scale(1.06); }}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
Expand All @@ -7339,9 +7347,12 @@ document.head.appendChild(styleEl);"

exports[`create-snowpack-app app-template-preact: _dist_/App.js 1`] = `
"import { h } from '../web_modules/preact.js';
import { useState } from '../web_modules/preact/hooks.js';
import logo from './logo.png.proxy.js';
import './App.css.proxy.js';
function App() {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1000);
return h(\\"div\\", {
className: \\"App\\"
}, h(\\"header\\", {
Expand All @@ -7350,12 +7361,12 @@ function App() {
src: logo,
className: \\"App-logo\\",
alt: \\"logo\\"
}), h(\\"p\\", null, \\"Edit \\", h(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), h(\\"a\\", {
}), h(\\"p\\", null, \\"Edit \\", h(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), h(\\"p\\", null, \\"Page has been open for \\", h(\\"code\\", null, count), \\" seconds.\\"), h(\\"p\\", null, h(\\"a\\", {
className: \\"App-link\\",
href: \\"https://preactjs.com\\",
target: \\"_blank\\",
rel: \\"noopener noreferrer\\"
}, \\"Learn Preact\\")));
}, \\"Learn Preact\\"))));
}
export default App;"
`;
Expand Down Expand Up @@ -7412,6 +7423,7 @@ Array [
"web_modules/import-map.json",
"web_modules/preact.js",
"web_modules/preact/devtools.js",
"web_modules/preact/hooks.js",
]
`;

Expand Down Expand Up @@ -7445,7 +7457,8 @@ exports[`create-snowpack-app app-template-preact: web_modules/import-map.json 1`
"{
\\"imports\\": {
\\"preact\\": \\"./preact.js\\",
\\"preact/devtools\\": \\"./preact/devtools.js\\"
\\"preact/devtools\\": \\"./preact/devtools.js\\",
\\"preact/hooks\\": \\"./preact/hooks.js\\"
}
}"
`;
Expand All @@ -7457,12 +7470,26 @@ exports[`create-snowpack-app app-template-preact: web_modules/preact/devtools.js
\\"undefined\\"!=typeof window&&window.__PREACT_DEVTOOLS__&&window.__PREACT_DEVTOOLS__.attachPreact(\\"10.4.8\\",n,{Fragment:p,Component:d});"
`;

exports[`create-snowpack-app app-template-preact: web_modules/preact/hooks.js 1`] = `
"import { n } from '../common/preact.module-XXXXXXXX.js';
var t,u,r,o=0,i=[],c=n.__r,f=n.diffed,e=n.__c,a=n.unmount;function v(t,r){n.__h&&n.__h(u,t,o||r),o=0;var i=u.__H||(u.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m(n){return o=1,p(k,n)}function p(n,r,o){var i=v(t++,2);return i.t=n,i.__c||(i.__c=u,i.__=[o?o(r):k(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}]),i.__}function q(){i.some(function(t){if(t.__P)try{t.__H.__h.forEach(b),t.__H.__h.forEach(g),t.__H.__h=[];}catch(u){return t.__H.__h=[],n.__e(u,t.__v),!0}}),i=[];}n.__r=function(n){c&&c(n),t=0;var r=(u=n.__c).__H;r&&(r.__h.forEach(b),r.__h.forEach(g),r.__h=[]);},n.diffed=function(t){f&&f(t);var u=t.__c;u&&u.__H&&u.__H.__h.length&&(1!==i.push(u)&&r===n.requestAnimationFrame||((r=n.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),x&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);x&&(t=requestAnimationFrame(u));})(q));},n.__c=function(t,u){u.some(function(t){try{t.__h.forEach(b),t.__h=t.__h.filter(function(n){return !n.__||g(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],n.__e(r,t.__v);}}),e&&e(t,u);},n.unmount=function(t){a&&a(t);var u=t.__c;if(u&&u.__H)try{u.__H.__.forEach(b);}catch(t){n.__e(t,u.__v);}};var x=\\"function\\"==typeof requestAnimationFrame;function b(n){\\"function\\"==typeof n.u&&n.u();}function g(n){n.u=n.__();}function k(n,t){return \\"function\\"==typeof t?t(n):t}
export { m as useState };"
`;

exports[`create-snowpack-app app-template-react: __snowpack__/env.js 1`] = `"export default {\\"MODE\\":\\"production\\",\\"NODE_ENV\\":\\"production\\"};"`;

exports[`create-snowpack-app app-template-react: _dist_/App.css 1`] = `
".App {
text-align: center;
}
.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}
.App-logo {
height: 40vmin;
pointer-events: none;
Expand Down Expand Up @@ -7497,7 +7524,7 @@ exports[`create-snowpack-app app-template-react: _dist_/App.css 1`] = `

exports[`create-snowpack-app app-template-react: _dist_/App.css.proxy.js 1`] = `
"
const code = \\".App { text-align: center;}.App-logo { height: 40vmin; pointer-events: none;}@media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; }}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}\\";
const code = \\".App { text-align: center;}.App code { background: #FFF3; padding: 4px 8px; border-radius: 4px;}.App p { margin: 0.4rem;}.App-logo { height: 40vmin; pointer-events: none;}@media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; }}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
Expand All @@ -7510,6 +7537,8 @@ exports[`create-snowpack-app app-template-react: _dist_/App.js 1`] = `
import logo2 from \\"./logo.svg.proxy.js\\";
import \\"./App.css.proxy.js\\";
function App2() {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1e3);
return /* @__PURE__ */ React.createElement(\\"div\\", {
className: \\"App\\"
}, /* @__PURE__ */ React.createElement(\\"header\\", {
Expand All @@ -7518,12 +7547,12 @@ function App2() {
src: logo2,
className: \\"App-logo\\",
alt: \\"logo\\"
}), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"a\\", {
}), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Page has been open for \\", /* @__PURE__ */ React.createElement(\\"code\\", null, count), \\" seconds.\\"), /* @__PURE__ */ React.createElement(\\"p\\", null, /* @__PURE__ */ React.createElement(\\"a\\", {
className: \\"App-link\\",
href: \\"https://reactjs.org\\",
target: \\"_blank\\",
rel: \\"noopener noreferrer\\"
}, \\"Learn React\\")));
}, \\"Learn React\\"))));
}
export default App2;"
`;
Expand Down Expand Up @@ -7977,6 +8006,14 @@ exports[`create-snowpack-app app-template-react-typescript: _dist_/App.css 1`] =
".App {
text-align: center;
}
.App code {
background: #FFF3;
padding: 4px 8px;
border-radius: 4px;
}
.App p {
margin: 0.4rem;
}
.App-logo {
height: 40vmin;
pointer-events: none;
Expand Down Expand Up @@ -8011,7 +8048,7 @@ exports[`create-snowpack-app app-template-react-typescript: _dist_/App.css 1`] =

exports[`create-snowpack-app app-template-react-typescript: _dist_/App.css.proxy.js 1`] = `
"
const code = \\".App { text-align: center;}.App-logo { height: 40vmin; pointer-events: none;}@media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; }}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}\\";
const code = \\".App { text-align: center;}.App code { background: #FFF3; padding: 4px 8px; border-radius: 4px;}.App p { margin: 0.4rem;}.App-logo { height: 40vmin; pointer-events: none;}@media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; }}.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}.App-link { color: #61dafb;}@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
Expand All @@ -8020,10 +8057,12 @@ document.head.appendChild(styleEl);"
`;

exports[`create-snowpack-app app-template-react-typescript: _dist_/App.js 1`] = `
"import React from \\"../web_modules/react.js\\";
"import React, {useState} from \\"../web_modules/react.js\\";
import logo2 from \\"./logo.svg.proxy.js\\";
import \\"./App.css.proxy.js\\";
function App2({}) {
const [count, setCount] = useState(0);
setTimeout(() => setCount(count + 1), 1e3);
return /* @__PURE__ */ React.createElement(\\"div\\", {
className: \\"App\\"
}, /* @__PURE__ */ React.createElement(\\"header\\", {
Expand All @@ -8032,12 +8071,12 @@ function App2({}) {
src: logo2,
className: \\"App-logo\\",
alt: \\"logo\\"
}), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.tsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"a\\", {
}), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.tsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Page has been open for \\", /* @__PURE__ */ React.createElement(\\"code\\", null, count), \\" seconds.\\"), /* @__PURE__ */ React.createElement(\\"p\\", null, /* @__PURE__ */ React.createElement(\\"a\\", {
className: \\"App-link\\",
href: \\"https://reactjs.org\\",
target: \\"_blank\\",
rel: \\"noopener noreferrer\\"
}, \\"Learn React\\")));
}, \\"Learn React\\"))));
}
export default App2;"
`;
Expand Down Expand Up @@ -8139,7 +8178,9 @@ exports[`create-snowpack-app app-template-react-typescript: web_modules/import-m

exports[`create-snowpack-app app-template-react-typescript: web_modules/react.js 1`] = `
"import { r as react } from './common/index-XXXXXXXX.js';
export { r as default } from './common/index-XXXXXXXX.js';"
export { r as default } from './common/index-XXXXXXXX.js';
var useState = react.useState;
export { useState };"
`;

exports[`create-snowpack-app app-template-react-typescript: web_modules/react-dom.js 1`] = `
Expand Down

1 comment on commit 55bbc83

@vercel
Copy link

@vercel vercel bot commented on 55bbc83 Oct 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.