Skip to content

Commit fb4b469

Browse files
jherrjherr
committed
Moving to EJS
1 parent fb65b20 commit fb4b469

File tree

15 files changed

+200
-243
lines changed

15 files changed

+200
-243
lines changed

‎README.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,4 @@ pnpm i
1717
| `npx . app-js-tw --tailwind` | Creates a JavaScript app with Tailwind CSS |
1818
| `npx . app-ts-tw --template typescript --tailwind` | Creates a TypeScript app with Tailwind CSS |
1919

20-
You can also add `--tailwind` to the command to automatically add Tailwind CSS to the app.
21-
2220
There is also `--package-manager pnpm` that will use [pnpm](https://pnpm.io/) as the package manager (this supports `yarn`, `bun`, and `npm` as well).

‎project-template/README.md.ejs‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
# Example
1+
Welcome to your new TanStack app!
22

3-
To run this example:
3+
# Getting Started
4+
5+
To run this application:
46

57
```bash
68
<%= packageManager %> install
79
<%= packageManager %> start
810
```
911

12+
# Building For Production
13+
14+
To build this application for production:
15+
16+
```bash
17+
<%= packageManager %> run build
18+
```
19+
1020
## Styling
1121
<% if (tailwind) { %>
1222
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
@@ -173,23 +183,27 @@ export const Route = createFileRoute("/")({
173183
});
174184
175185
function App() {
176-
return (
177-
<div className="App">
178-
<header className="App-header">
179-
<img src={logo} className="App-logo" alt="logo" />
186+
return (<% if (tailwind) { %>
187+
<div className="text-center">
188+
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
189+
<img
190+
src={logo}
191+
className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
192+
alt="logo"
193+
/>
180194
<p>
181-
Edit <code>src/App.<%= jsx %></code> and save to reload.
195+
Edit <code>src/App.tsx</code> and save to reload.
182196
</p>
183197
<a
184-
className="App-link"
198+
className="text-[#61dafb] hover:underline"
185199
href="https://reactjs.org"
186200
target="_blank"
187201
rel="noopener noreferrer"
188202
>
189203
Learn React
190204
</a>
191205
<a
192-
className="App-link"
206+
className="text-[#61dafb] hover:underline"
193207
href="https://tanstack.com"
194208
target="_blank"
195209
rel="noopener noreferrer"
@@ -198,7 +212,32 @@ function App() {
198212
</a>
199213
</header>
200214
</div>
201-
);
215+
<% } else { %>
216+
<div className="App">
217+
<header className="App-header">
218+
<img src={logo} className="App-logo" alt="logo" />
219+
<p>
220+
Edit <code>src/App.tsx</code> and save to reload.
221+
</p>
222+
<a
223+
className="App-link"
224+
href="https://reactjs.org"
225+
target="_blank"
226+
rel="noopener noreferrer"
227+
>
228+
Learn React
229+
</a>
230+
<a
231+
className="App-link"
232+
href="https://tanstack.com"
233+
target="_blank"
234+
rel="noopener noreferrer"
235+
>
236+
Learn TanStack
237+
</a>
238+
</header>
239+
</div>
240+
<% } %> );
202241
}
203242
```
204243

‎project-template/index.html‎ renamed to ‎project-template/index.html.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
/>
1212
<link rel="apple-touch-icon" href="/logo192.png" />
1313
<link rel="manifest" href="/manifest.json" />
14-
<title>Create TanStack App</title>
14+
<title>Create TanStack App - <%= projectName %></title>
1515
</head>
1616
<body>
1717
<div id="app"></div>
18-
<script type="module" src="/src/main.jsx"></script>
18+
<script type="module" src="/src/main.<%= jsx %>"></script>
1919
</body>
2020
</html>

‎project-template/index.ts.html‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎project-template/src/App.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎project-template/src/App.tw.tsx‎ renamed to ‎project-template/src/App.tsx.ejs‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import logo from "./logo.svg";
2+
<% if (!tailwind) { %>
3+
import "./App.css";
4+
<% } %>
25

36
function App() {
4-
return (
7+
return (<% if (tailwind) { %>
58
<div className="text-center">
69
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
710
<img
@@ -10,7 +13,7 @@ function App() {
1013
alt="logo"
1114
/>
1215
<p>
13-
Edit <code>src/App.tsx</code> and save to reload.
16+
Edit <code>src/App.<%= jsx %></code> and save to reload.
1417
</p>
1518
<a
1619
className="text-[#61dafb] hover:underline"
@@ -30,7 +33,32 @@ function App() {
3033
</a>
3134
</header>
3235
</div>
33-
);
36+
<% } else { %>
37+
<div className="App">
38+
<header className="App-header">
39+
<img src={logo} className="App-logo" alt="logo" />
40+
<p>
41+
Edit <code>src/App.<%= jsx %></code> and save to reload.
42+
</p>
43+
<a
44+
className="App-link"
45+
href="https://reactjs.org"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
Learn React
50+
</a>
51+
<a
52+
className="App-link"
53+
href="https://tanstack.com"
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
>
57+
Learn TanStack
58+
</a>
59+
</header>
60+
</div>
61+
<% } %> );
3462
}
3563

3664
export default App;

‎project-template/src/main.jsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎project-template/src/main.tsx‎ renamed to ‎project-template/src/main.tsx.ejs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,17 @@ const router = createRouter({
3636
defaultPreload: "intent",
3737
scrollRestoration: true,
3838
});
39-
39+
<% if (typescript) { %>
4040
declare module "@tanstack/react-router" {
4141
interface Register {
4242
router: typeof router;
4343
}
4444
}
4545
4646
const rootElement = document.getElementById("app")!;
47-
if (!rootElement.innerHTML) {
47+
<% } else { %>
48+
const rootElement = document.getElementById("app");
49+
<% } %>if (!rootElement.innerHTML) {
4850
const root = ReactDOM.createRoot(rootElement);
4951
root.render(
5052
<StrictMode>

‎project-template/src/reportWebVitals.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎project-template/src/reportWebVitals.ts‎ renamed to ‎project-template/src/reportWebVitals.ts.ejs‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<% if (typescript) { %>
12
const reportWebVitals = (onPerfEntry?: () => void) => {
23
if (onPerfEntry && onPerfEntry instanceof Function) {
34
import("web-vitals").then(
@@ -11,5 +12,17 @@ const reportWebVitals = (onPerfEntry?: () => void) => {
1112
);
1213
}
1314
};
14-
15+
<% } else { %>
16+
const reportWebVitals = onPerfEntry => {
17+
if (onPerfEntry && onPerfEntry instanceof Function) {
18+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
19+
getCLS(onPerfEntry);
20+
getFID(onPerfEntry);
21+
getFCP(onPerfEntry);
22+
getLCP(onPerfEntry);
23+
getTTFB(onPerfEntry);
24+
});
25+
}
26+
};
27+
<% } %>
1528
export default reportWebVitals;

0 commit comments

Comments
 (0)