Skip to content

Commit f140092

Browse files
ShaglockShaglock
authored
Fix broken link and add solid snapshots for cra test (#61)
Sorry I didn't update all the files and snapshots in previous MR. Fixed final broken link. Realized there is no solid snapshot tests so I added them similar to current react snapshots. I hope thats fine, let me know what you think.
1 parent 99cb96a commit f140092

File tree

6 files changed

+348
-108
lines changed

6 files changed

+348
-108
lines changed

‎templates/solid/base/README.md.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export const Route = createRootRoute({
154154
<% } %>
155155
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
156156
157-
More information on layouts can be found in the [Layouts documentation](hthttps://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
157+
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
158158
159159
## Data Fetching
160160

‎tests/cra.test.ts

Lines changed: 223 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,232 @@
1-
import { expect, test } from 'vitest'
1+
import { describe, expect, test } from 'vitest'
22

33
import { createApp } from '../src/create-app.js'
44
import { cleanupOutput, createTestEnvironment } from './test-utilities.js'
55

6-
test('code router in javascript on npm', async () => {
7-
const projectName = 'TEST'
8-
const { environment, output } = createTestEnvironment(projectName)
9-
await createApp(
10-
{
11-
addOns: false,
12-
framework: 'react',
13-
chosenAddOns: [],
14-
git: true,
15-
mode: 'code-router',
16-
packageManager: 'npm',
17-
projectName,
18-
tailwind: false,
19-
toolchain: 'none',
20-
typescript: false,
21-
variableValues: {},
22-
},
23-
{
24-
silent: true,
25-
environment,
26-
},
27-
)
28-
cleanupOutput(output)
29-
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
30-
'./snapshots/cra/cr-js-npm.json',
31-
)
32-
})
6+
describe('React Templates', () => {
7+
test('code router in javascript on npm', async () => {
8+
const projectName = 'TEST'
9+
const { environment, output } = createTestEnvironment(projectName)
10+
await createApp(
11+
{
12+
addOns: false,
13+
framework: 'react',
14+
chosenAddOns: [],
15+
git: true,
16+
mode: 'code-router',
17+
packageManager: 'npm',
18+
projectName,
19+
tailwind: false,
20+
toolchain: 'none',
21+
typescript: false,
22+
variableValues: {},
23+
},
24+
{
25+
silent: true,
26+
environment,
27+
},
28+
)
29+
cleanupOutput(output)
30+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
31+
'./snapshots/cra/cr-js-npm.json',
32+
)
33+
})
3334

34-
test('code router in typescript on npm', async () => {
35-
const projectName = 'TEST'
36-
const { environment, output } = createTestEnvironment(projectName)
37-
await createApp(
38-
{
39-
addOns: false,
40-
framework: 'react',
41-
chosenAddOns: [],
42-
git: true,
43-
mode: 'code-router',
44-
packageManager: 'npm',
45-
projectName,
46-
tailwind: false,
47-
toolchain: 'none',
48-
typescript: true,
49-
variableValues: {},
50-
},
51-
{
52-
silent: true,
53-
environment,
54-
},
55-
)
56-
cleanupOutput(output)
57-
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
58-
'./snapshots/cra/cr-ts-npm.json',
59-
)
60-
})
35+
test('code router in typescript on npm', async () => {
36+
const projectName = 'TEST'
37+
const { environment, output } = createTestEnvironment(projectName)
38+
await createApp(
39+
{
40+
addOns: false,
41+
framework: 'react',
42+
chosenAddOns: [],
43+
git: true,
44+
mode: 'code-router',
45+
packageManager: 'npm',
46+
projectName,
47+
tailwind: false,
48+
toolchain: 'none',
49+
typescript: true,
50+
variableValues: {},
51+
},
52+
{
53+
silent: true,
54+
environment,
55+
},
56+
)
57+
cleanupOutput(output)
58+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
59+
'./snapshots/cra/cr-ts-npm.json',
60+
)
61+
})
62+
63+
test('file router on npm', async () => {
64+
const projectName = 'TEST'
65+
const { environment, output } = createTestEnvironment(projectName)
66+
await createApp(
67+
{
68+
addOns: false,
69+
framework: 'react',
70+
chosenAddOns: [],
71+
git: true,
72+
mode: 'file-router',
73+
packageManager: 'npm',
74+
projectName,
75+
tailwind: false,
76+
toolchain: 'none',
77+
typescript: true,
78+
variableValues: {},
79+
},
80+
{
81+
silent: true,
82+
environment,
83+
},
84+
)
85+
cleanupOutput(output)
86+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
87+
'./snapshots/cra/fr-ts-npm.json',
88+
)
89+
})
6190

62-
test('file router on npm', async () => {
63-
const projectName = 'TEST'
64-
const { environment, output } = createTestEnvironment(projectName)
65-
await createApp(
66-
{
67-
addOns: false,
68-
framework: 'react',
69-
chosenAddOns: [],
70-
git: true,
71-
mode: 'file-router',
72-
packageManager: 'npm',
73-
projectName,
74-
tailwind: false,
75-
toolchain: 'none',
76-
typescript: true,
77-
variableValues: {},
78-
},
79-
{
80-
silent: true,
81-
environment,
82-
},
83-
)
84-
cleanupOutput(output)
85-
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
86-
'./snapshots/cra/fr-ts-npm.json',
87-
)
91+
test('file router with tailwind on npm', async () => {
92+
const projectName = 'TEST'
93+
const { environment, output } = createTestEnvironment(projectName)
94+
await createApp(
95+
{
96+
addOns: false,
97+
framework: 'react',
98+
chosenAddOns: [],
99+
git: true,
100+
mode: 'file-router',
101+
packageManager: 'npm',
102+
projectName,
103+
tailwind: true,
104+
toolchain: 'none',
105+
typescript: true,
106+
variableValues: {},
107+
},
108+
{
109+
silent: true,
110+
environment,
111+
},
112+
)
113+
cleanupOutput(output)
114+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
115+
'./snapshots/cra/fr-ts-tw-npm.json',
116+
)
117+
})
88118
})
89119

90-
test('file router with tailwind on npm', async () => {
91-
const projectName = 'TEST'
92-
const { environment, output } = createTestEnvironment(projectName)
93-
await createApp(
94-
{
95-
addOns: false,
96-
framework: 'react',
97-
chosenAddOns: [],
98-
git: true,
99-
mode: 'file-router',
100-
packageManager: 'npm',
101-
projectName,
102-
tailwind: true,
103-
toolchain: 'none',
104-
typescript: true,
105-
variableValues: {},
106-
},
107-
{
108-
silent: true,
109-
environment,
110-
},
111-
)
112-
cleanupOutput(output)
113-
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
114-
'./snapshots/cra/fr-ts-tw-npm.json',
115-
)
120+
describe('Solid Templates', () => {
121+
test('code router in javascript on npm', async () => {
122+
const projectName = 'TEST'
123+
const { environment, output } = createTestEnvironment(projectName)
124+
await createApp(
125+
{
126+
addOns: false,
127+
framework: 'solid',
128+
chosenAddOns: [],
129+
git: true,
130+
mode: 'code-router',
131+
packageManager: 'npm',
132+
projectName,
133+
tailwind: false,
134+
toolchain: 'none',
135+
typescript: false,
136+
variableValues: {},
137+
},
138+
{
139+
silent: true,
140+
environment,
141+
},
142+
)
143+
cleanupOutput(output)
144+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
145+
'./snapshots/cra/solid-cr-js-npm.json',
146+
)
147+
})
148+
149+
test('code router in typescript on npm', async () => {
150+
const projectName = 'TEST'
151+
const { environment, output } = createTestEnvironment(projectName)
152+
await createApp(
153+
{
154+
addOns: false,
155+
framework: 'solid',
156+
chosenAddOns: [],
157+
git: true,
158+
mode: 'code-router',
159+
packageManager: 'npm',
160+
projectName,
161+
tailwind: false,
162+
toolchain: 'none',
163+
typescript: true,
164+
variableValues: {},
165+
},
166+
{
167+
silent: true,
168+
environment,
169+
},
170+
)
171+
cleanupOutput(output)
172+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
173+
'./snapshots/cra/solid-cr-ts-npm.json',
174+
)
175+
})
176+
177+
test('file router on npm', async () => {
178+
const projectName = 'TEST'
179+
const { environment, output } = createTestEnvironment(projectName)
180+
await createApp(
181+
{
182+
addOns: false,
183+
framework: 'solid',
184+
chosenAddOns: [],
185+
git: true,
186+
mode: 'file-router',
187+
packageManager: 'npm',
188+
projectName,
189+
tailwind: false,
190+
toolchain: 'none',
191+
typescript: true,
192+
variableValues: {},
193+
},
194+
{
195+
silent: true,
196+
environment,
197+
},
198+
)
199+
cleanupOutput(output)
200+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
201+
'./snapshots/cra/solid-fr-ts-npm.json',
202+
)
203+
})
204+
205+
test('file router with tailwind on npm', async () => {
206+
const projectName = 'TEST'
207+
const { environment, output } = createTestEnvironment(projectName)
208+
await createApp(
209+
{
210+
addOns: false,
211+
framework: 'solid',
212+
chosenAddOns: [],
213+
git: true,
214+
mode: 'file-router',
215+
packageManager: 'npm',
216+
projectName,
217+
tailwind: true,
218+
toolchain: 'none',
219+
typescript: true,
220+
variableValues: {},
221+
},
222+
{
223+
silent: true,
224+
environment,
225+
},
226+
)
227+
cleanupOutput(output)
228+
await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
229+
'./snapshots/cra/solid-fr-ts-tw-npm.json',
230+
)
231+
})
116232
})

‎tests/snapshots/cra/solid-cr-js-npm.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"files": {
3+
".gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n",
4+
"/.vscode/settings.json": "{\n \"files.watcherExclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"search.exclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"files.readonlyInclude\": {\n \"**/routeTree.gen.ts\": true\n }\n}\n",
5+
"/public/manifest.json": "{\n \"short_name\": \"TanStack App\",\n \"name\": \"Create TanStack App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n",
6+
"/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
7+
"/src/App.css": "",
8+
"/src/App.jsx": "\nimport logo from \"./logo.svg\";\n\n\n\n\n\nfunction App() {\n return (\n <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n <img\n src={logo}\n class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/App.jsx</code> and save to reload.\n </p>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://solidjs.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn Solid\n </a>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </main>\n );\n}\n\n\nexport default App;\n\n",
9+
"/src/main.jsx": "import {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from \"@tanstack/solid-router\";\nimport { TanStackRouterDevtools } from \"@tanstack/solid-router-devtools\";\nimport { render } from 'solid-js/web'\n\n\nimport \"./styles.css\";\n\nimport App from \"./App.jsx\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n \n \n <Outlet />\n <TanStackRouterDevtools />\n \n \n </>\n ),\n});\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/\",\n component: App,\n});\n\nconst routeTree = rootRoute.addChildren([indexRoute]);\n\nconst router = createRouter({\n routeTree,\n defaultPreload: \"intent\",\n scrollRestoration: true,\n});\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: typeof router\n }\n}\n\nfunction MainApp() {\n return (\n <>\n <RouterProvider router={router} />\n </>\n )\n}\n\nconst rootElement = document.getElementById('app')\nif(rootElement) {\n render(() => <MainApp />, rootElement)\n}\n",
10+
"/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
11+
"README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.jsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.jsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/about\",\n component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.jsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.jsx` file. You can create that component in another file and import it into the `main.jsx` file, then use it in the `component` property of the `createRoute` call, like so:\n\n```tsx\nimport About from \"./components/About.jsx\";\n\nconst aboutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/about\",\n component: About,\n});\n```\n\nThat is how we have the `App` component set up with the home page.\n\nFor more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\n\nLayouts can be used to wrap the contents of the routes in menus, headers, footers, etc.\n\nThere is already a layout in the `src/main.jsx` file:\n\n```tsx\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nYou can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/people\",\n loader: async () => {\n const response = await fetch(\"https://swapi.dev/api/people\");\n return response.json();\n },\n component: () => {\n const data = peopleRoute.useLoaderData();\n return (\n <ul>\n {data.results.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n );\n },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
12+
"index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n <meta\n name=\"description\"\n content=\"Web site created using create-tsrouter-app\"\n />\n <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <title>Create TanStack App - app-ts</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n",
13+
"package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/router-plugin\": \"^1.109.2\",\n \"@tanstack/solid-router\": \"^1.110.0\",\n \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n \"solid-js\": \"^1.9.4\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.0.11\",\n \"vite-plugin-solid\": \"^2.11.2\"\n }\n}",
14+
"vite.config.js": "import { defineConfig } from 'vite'\n\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n solidPlugin(),\n tailwindcss(),\n ],\n})\n"
15+
},
16+
"commands": [
17+
{
18+
"command": "npm",
19+
"args": [
20+
"install"
21+
]
22+
},
23+
{
24+
"command": "git",
25+
"args": [
26+
"init"
27+
]
28+
}
29+
]
30+
}

0 commit comments

Comments
 (0)