Skip to content

Commit 7509467

Browse files
KurtGokhanKurtGokhan
committed
add example
1 parent 184c52e commit 7509467

File tree

10 files changed

+54
-49
lines changed

10 files changed

+54
-49
lines changed

‎examples/vite/src/examples/main/article.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRef, useState } from 'react';
33
import { commentsQuery, editArticleMutation, useArticle } from './example';
44

55
export function ArticlePage() {
6-
const id = Number.parseInt(useParams({ from: '/main-example/$id' }).id);
6+
const id = Number.parseInt(useParams({ from: '/main/$id' }).id);
77
const nav = useNavigate();
88
const article = useArticle({ id });
99
const comments = commentsQuery.useQuery({ search: { articleId: id } });

‎examples/vite/src/examples/main/list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function AppCore() {
4444
<a>
4545
<h2
4646
className="link"
47-
onClick={() => nav({ to: '/main-example/$id', params: { id: String(article.id) } })}
47+
onClick={() => nav({ to: '/main/$id', params: { id: String(article.id) } })}
4848
onMouseOver={() => {
4949
if (!enablePrefetch) return;
5050
articleQuery.client.prefetch({ id: article.id });

‎examples/vite/src/routeTree.gen.ts‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212

1313
import { Route as rootRoute } from './routes/__root'
1414
import { Route as IndexImport } from './routes/index'
15-
import { Route as MainExampleIndexImport } from './routes/main-example/index'
16-
import { Route as MainExampleIdImport } from './routes/main-example/$id'
15+
import { Route as MainIndexImport } from './routes/main/index'
16+
import { Route as MainIdImport } from './routes/main/$id'
1717

1818
// Create/Update Routes
1919

@@ -23,15 +23,15 @@ const IndexRoute = IndexImport.update({
2323
getParentRoute: () => rootRoute,
2424
} as any)
2525

26-
const MainExampleIndexRoute = MainExampleIndexImport.update({
27-
id: '/main-example/',
28-
path: '/main-example/',
26+
const MainIndexRoute = MainIndexImport.update({
27+
id: '/main/',
28+
path: '/main/',
2929
getParentRoute: () => rootRoute,
3030
} as any)
3131

32-
const MainExampleIdRoute = MainExampleIdImport.update({
33-
id: '/main-example/$id',
34-
path: '/main-example/$id',
32+
const MainIdRoute = MainIdImport.update({
33+
id: '/main/$id',
34+
path: '/main/$id',
3535
getParentRoute: () => rootRoute,
3636
} as any)
3737

@@ -46,18 +46,18 @@ declare module '@tanstack/react-router' {
4646
preLoaderRoute: typeof IndexImport
4747
parentRoute: typeof rootRoute
4848
}
49-
'/main-example/$id': {
50-
id: '/main-example/$id'
51-
path: '/main-example/$id'
52-
fullPath: '/main-example/$id'
53-
preLoaderRoute: typeof MainExampleIdImport
49+
'/main/$id': {
50+
id: '/main/$id'
51+
path: '/main/$id'
52+
fullPath: '/main/$id'
53+
preLoaderRoute: typeof MainIdImport
5454
parentRoute: typeof rootRoute
5555
}
56-
'/main-example/': {
57-
id: '/main-example/'
58-
path: '/main-example'
59-
fullPath: '/main-example'
60-
preLoaderRoute: typeof MainExampleIndexImport
56+
'/main/': {
57+
id: '/main/'
58+
path: '/main'
59+
fullPath: '/main'
60+
preLoaderRoute: typeof MainIndexImport
6161
parentRoute: typeof rootRoute
6262
}
6363
}
@@ -67,42 +67,42 @@ declare module '@tanstack/react-router' {
6767

6868
export interface FileRoutesByFullPath {
6969
'/': typeof IndexRoute
70-
'/main-example/$id': typeof MainExampleIdRoute
71-
'/main-example': typeof MainExampleIndexRoute
70+
'/main/$id': typeof MainIdRoute
71+
'/main': typeof MainIndexRoute
7272
}
7373

7474
export interface FileRoutesByTo {
7575
'/': typeof IndexRoute
76-
'/main-example/$id': typeof MainExampleIdRoute
77-
'/main-example': typeof MainExampleIndexRoute
76+
'/main/$id': typeof MainIdRoute
77+
'/main': typeof MainIndexRoute
7878
}
7979

8080
export interface FileRoutesById {
8181
__root__: typeof rootRoute
8282
'/': typeof IndexRoute
83-
'/main-example/$id': typeof MainExampleIdRoute
84-
'/main-example/': typeof MainExampleIndexRoute
83+
'/main/$id': typeof MainIdRoute
84+
'/main/': typeof MainIndexRoute
8585
}
8686

8787
export interface FileRouteTypes {
8888
fileRoutesByFullPath: FileRoutesByFullPath
89-
fullPaths: '/' | '/main-example/$id' | '/main-example'
89+
fullPaths: '/' | '/main/$id' | '/main'
9090
fileRoutesByTo: FileRoutesByTo
91-
to: '/' | '/main-example/$id' | '/main-example'
92-
id: '__root__' | '/' | '/main-example/$id' | '/main-example/'
91+
to: '/' | '/main/$id' | '/main'
92+
id: '__root__' | '/' | '/main/$id' | '/main/'
9393
fileRoutesById: FileRoutesById
9494
}
9595

9696
export interface RootRouteChildren {
9797
IndexRoute: typeof IndexRoute
98-
MainExampleIdRoute: typeof MainExampleIdRoute
99-
MainExampleIndexRoute: typeof MainExampleIndexRoute
98+
MainIdRoute: typeof MainIdRoute
99+
MainIndexRoute: typeof MainIndexRoute
100100
}
101101

102102
const rootRouteChildren: RootRouteChildren = {
103103
IndexRoute: IndexRoute,
104-
MainExampleIdRoute: MainExampleIdRoute,
105-
MainExampleIndexRoute: MainExampleIndexRoute,
104+
MainIdRoute: MainIdRoute,
105+
MainIndexRoute: MainIndexRoute,
106106
}
107107

108108
export const routeTree = rootRoute
@@ -116,18 +116,18 @@ export const routeTree = rootRoute
116116
"filePath": "__root.tsx",
117117
"children": [
118118
"/",
119-
"/main-example/$id",
120-
"/main-example/"
119+
"/main/$id",
120+
"/main/"
121121
]
122122
},
123123
"/": {
124124
"filePath": "index.tsx"
125125
},
126-
"/main-example/$id": {
127-
"filePath": "main-example/$id.tsx"
126+
"/main/$id": {
127+
"filePath": "main/$id.tsx"
128128
},
129-
"/main-example/": {
130-
"filePath": "main-example/index.tsx"
129+
"/main/": {
130+
"filePath": "main/index.tsx"
131131
}
132132
}
133133
}

‎examples/vite/src/routes/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function AllExamples() {
1010
<div className="text-start mt-2">Click on the links to see the examples</div>
1111

1212
<div className="flex flex-col items-start mt-4">
13-
<Link to="/main-example" className="link">
13+
<Link to="/main" className="link">
1414
Main example
1515
</Link>
1616
</div>

examples/vite/src/routes/main-example/$id.tsx renamed to examples/vite/src/routes/main/$id.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createFileRoute } from '@tanstack/react-router';
22
import { ArticlePage } from 'src/examples/main/article';
33

4-
export const Route = createFileRoute('/main-example/$id')({
4+
export const Route = createFileRoute('/main/$id')({
55
component: ArticlePage,
66
});

examples/vite/src/routes/main-example/index.tsx renamed to examples/vite/src/routes/main/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createFileRoute } from '@tanstack/react-router';
22
import { MainExample } from 'src/examples/main/list';
33

4-
export const Route = createFileRoute('/main-example/')({
4+
export const Route = createFileRoute('/main/')({
55
component: MainExample,
66
});

‎examples/vite/tests/Render.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { render } from 'vitest-browser-react';
88
import '../src/index.css';
99
import 'src/examples/main/example';
1010

11-
const history = createMemoryHistory({ initialEntries: ['/main-example'] });
11+
const history = createMemoryHistory({ initialEntries: ['/main'] });
1212
const TestRenderer = () => <AppRouter history={history} />;
1313

1414
beforeEach(async () => {

‎examples/vite/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const isStackblitz = process.env.SHELL === '/bin/jsh';
1111
export default defineConfig({
1212
plugins: [TanStackRouterVite({ target: 'react', autoCodeSplitting: true }), react()],
1313
optimizeDeps: { exclude: ['tanstack-query-builder'] },
14-
server: { port: 3000 },
14+
server: { port: 3100 },
1515
resolve: {
1616
alias: {
1717
src: path.resolve(import.meta.dirname, 'src'),

‎website/docs/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ title: Introduction
1111
npm install tanstack-query-builder
1212
```
1313

14-
<Stackblitz embedId="KurtGokhan/tanstack-query-builder/tree/main/examples/vite" />
14+
<Stackblitz exampleId="main" />

‎website/src/components/Stackblitz/index.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
44
import React from 'react';
55

66
interface Props {
7-
embedId: 'string';
7+
embedId?: string;
88
exampleId?: string;
99
}
1010

@@ -41,15 +41,20 @@ function getStackblitzEl(projectId: string, exampleId?: string) {
4141
forceEmbedLayout: true,
4242
view: 'preview',
4343
height: '100%',
44-
openFile: exampleId ? `src/${exampleId}/example.tsx` : undefined,
44+
openFile: exampleId ? `src/examples/${exampleId}/example.tsx` : undefined,
4545
};
4646

4747
const isGithub = projectId.startsWith('KurtGokhan');
4848

4949
const embedFn = isGithub ? StackBlitzSDK.embedGithubProject : StackBlitzSDK.embedProjectId;
5050
const embedPromise = embedFn(el, projectId, opts);
5151

52-
embedPromise.then((p) => p.preview.setUrl(`/${exampleId || ''}`));
52+
embedPromise.then(async (p) => {
53+
try {
54+
await p.preview.getUrl();
55+
if (exampleId) p.preview.setUrl(`/${exampleId || ''}`);
56+
} catch (e) {}
57+
});
5358

5459
cache[projectId] = elParent;
5560
return elParent;
@@ -59,7 +64,7 @@ export function Stackblitz(props: Props) {
5964
return <BrowserOnly>{() => <StackblitzCore {...props} />}</BrowserOnly>;
6065
}
6166

62-
function StackblitzCore({ embedId, exampleId }: Props) {
67+
function StackblitzCore({ embedId = 'KurtGokhan/tanstack-query-builder/tree/main/examples/vite', exampleId = 'main' }: Props) {
6368
const el = getStackblitzEl(embedId, exampleId);
6469

6570
const ref = useCallback((node) => node?.appendChild(el), [el]);

0 commit comments

Comments
 (0)