create-plasmic-app 0.0.136 → 0.0.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/cpa-out/gatsby-codegen-js/package.json +1 -1
  2. package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +3 -2
  3. package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +3 -2
  4. package/cpa-out/gatsby-codegen-ts/package.json +1 -1
  5. package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +12 -4
  6. package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +12 -4
  7. package/cpa-out/gatsby-loader-js/package.json +1 -1
  8. package/cpa-out/gatsby-loader-ts/package.json +1 -1
  9. package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +4 -11
  10. package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPageServer.jsx +1 -1
  11. package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +4 -11
  12. package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepageServer.jsx +1 -1
  13. package/cpa-out/nextjs-app-codegen-js/package.json +1 -1
  14. package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +6 -12
  15. package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicDynamicPageServer.tsx +10 -5
  16. package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +6 -12
  17. package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepageServer.tsx +10 -3
  18. package/cpa-out/nextjs-app-codegen-ts/package.json +1 -1
  19. package/cpa-out/nextjs-app-loader-js/package.json +1 -1
  20. package/cpa-out/nextjs-app-loader-ts/package.json +1 -1
  21. package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +3 -2
  22. package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +3 -2
  23. package/cpa-out/nextjs-pages-codegen-js/package.json +1 -1
  24. package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +13 -5
  25. package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +13 -5
  26. package/cpa-out/nextjs-pages-codegen-ts/package.json +1 -1
  27. package/cpa-out/nextjs-pages-loader-js/package.json +1 -1
  28. package/cpa-out/nextjs-pages-loader-ts/package.json +1 -1
  29. package/cpa-out/react-codegen-js/eslint.config.js +19 -10
  30. package/cpa-out/react-codegen-js/package.json +13 -12
  31. package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +3 -2
  32. package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +3 -2
  33. package/cpa-out/react-codegen-ts/eslint.config.js +15 -10
  34. package/cpa-out/react-codegen-ts/package.json +14 -15
  35. package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +12 -4
  36. package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +12 -4
  37. package/cpa-out/react-codegen-ts/src/vite-env.d.ts +1 -0
  38. package/cpa-out/tanstack-codegen-ts/package.json +18 -11
  39. package/cpa-out/tanstack-codegen-ts/src/components/Footer.tsx +44 -0
  40. package/cpa-out/tanstack-codegen-ts/src/components/Header.tsx +78 -0
  41. package/cpa-out/tanstack-codegen-ts/src/components/ThemeToggle.tsx +81 -0
  42. package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +12 -4
  43. package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +12 -4
  44. package/cpa-out/tanstack-codegen-ts/src/main.tsx +0 -1
  45. package/cpa-out/tanstack-codegen-ts/tsconfig.json +1 -0
  46. package/package.json +2 -2
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@plasmicapp/cli": "^0.1.359",
18
- "@plasmicapp/react-web": "^0.2.422",
18
+ "@plasmicapp/react-web": "^0.2.425",
19
19
  "gatsby": "^5.14.6",
20
20
  "gatsby-plugin-react-helmet": "^6.16.0",
21
21
  "react": "^18.2.0",
@@ -192,9 +192,10 @@ export const PlasmicDynamicPage = Object.assign(
192
192
  internalVariantProps: PlasmicDynamicPage__VariantProps,
193
193
  internalArgProps: PlasmicDynamicPage__ArgProps,
194
194
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
195
+ pageRoute: "/dynamic/[slug]",
195
196
  pagePath: "/dynamic/[slug]",
196
- searchParams: {},
197
- params: {}
197
+ params: {},
198
+ query: {}
198
199
  })
199
200
  }
200
201
  );
@@ -227,9 +227,10 @@ export const PlasmicHomepage = Object.assign(
227
227
  internalVariantProps: PlasmicHomepage__VariantProps,
228
228
  internalArgProps: PlasmicHomepage__ArgProps,
229
229
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
230
+ pageRoute: "/",
230
231
  pagePath: "/",
231
- searchParams: {},
232
- params: {}
232
+ params: {},
233
+ query: {}
233
234
  })
234
235
  }
235
236
  );
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@plasmicapp/cli": "^0.1.359",
19
- "@plasmicapp/react-web": "^0.2.422",
19
+ "@plasmicapp/react-web": "^0.2.425",
20
20
  "gatsby": "^5.14.6",
21
21
  "gatsby-plugin-react-helmet": "^6.16.0",
22
22
  "react": "^18.2.0",
@@ -85,11 +85,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
85
85
  });
86
86
  }
87
87
 
88
- export function generateDynamicMetadata($q: any, $ctx: any) {
88
+ export type PageCtx = {
89
+ pageRoute: string;
90
+ pagePath: string;
91
+ params: Record<string, string | string[] | undefined>;
92
+ query: Record<string, string | string[] | undefined>;
93
+ };
94
+
95
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
89
96
  return {
90
97
  openGraph: {},
91
98
  twitter: {
92
- card: "summary"
99
+ card: "summary" as const
93
100
  }
94
101
  };
95
102
  }
@@ -308,9 +315,10 @@ export const PlasmicDynamicPage = Object.assign(
308
315
  internalArgProps: PlasmicDynamicPage__ArgProps,
309
316
 
310
317
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
318
+ pageRoute: "/dynamic/[slug]",
311
319
  pagePath: "/dynamic/[slug]",
312
- searchParams: {},
313
- params: {}
320
+ params: {},
321
+ query: {}
314
322
  })
315
323
  }
316
324
  );
@@ -86,11 +86,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
86
86
  });
87
87
  }
88
88
 
89
- export function generateDynamicMetadata($q: any, $ctx: any) {
89
+ export type PageCtx = {
90
+ pageRoute: string;
91
+ pagePath: string;
92
+ params: Record<string, string | string[] | undefined>;
93
+ query: Record<string, string | string[] | undefined>;
94
+ };
95
+
96
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
90
97
  return {
91
98
  openGraph: {},
92
99
  twitter: {
93
- card: "summary"
100
+ card: "summary" as const
94
101
  }
95
102
  };
96
103
  }
@@ -345,9 +352,10 @@ export const PlasmicHomepage = Object.assign(
345
352
  internalArgProps: PlasmicHomepage__ArgProps,
346
353
 
347
354
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
355
+ pageRoute: "/",
348
356
  pagePath: "/",
349
- searchParams: {},
350
- params: {}
357
+ params: {},
358
+ query: {}
351
359
  })
352
360
  }
353
361
  );
@@ -14,7 +14,7 @@
14
14
  "clean": "gatsby clean"
15
15
  },
16
16
  "dependencies": {
17
- "@plasmicapp/loader-gatsby": "^1.0.416",
17
+ "@plasmicapp/loader-gatsby": "^1.0.418",
18
18
  "gatsby": "^5.14.6",
19
19
  "gatsby-plugin-react-helmet": "^6.16.0",
20
20
  "react": "^18.2.0",
@@ -15,7 +15,7 @@
15
15
  "typecheck": "tsc --noEmit"
16
16
  },
17
17
  "dependencies": {
18
- "@plasmicapp/loader-gatsby": "^1.0.416",
18
+ "@plasmicapp/loader-gatsby": "^1.0.418",
19
19
  "gatsby": "^5.14.6",
20
20
  "gatsby-plugin-react-helmet": "^6.16.0",
21
21
  "react": "^18.2.0",
@@ -18,6 +18,7 @@ import {
18
18
  deriveRenderOpts
19
19
  } from "@plasmicapp/react-web";
20
20
  import { useDataEnv } from "@plasmicapp/host";
21
+ import { generateDynamicMetadata } from "./PlasmicDynamicPageServer"; // plasmic-import: AO44A-w7hh/rscServer
21
22
  import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
22
23
  import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
23
24
  import "@plasmicapp/react-web/lib/plasmic.css";
@@ -39,15 +40,6 @@ function wrapQueriesWithLoadingProxy($q) {
39
40
  });
40
41
  }
41
42
 
42
- export function generateDynamicMetadata($q, $ctx) {
43
- return {
44
- openGraph: {},
45
- twitter: {
46
- card: "summary"
47
- }
48
- };
49
- }
50
-
51
43
  createPlasmicElementProxy;
52
44
 
53
45
  export const PlasmicDynamicPage__VariantProps = new Array();
@@ -205,9 +197,10 @@ export const PlasmicDynamicPage = Object.assign(
205
197
  internalVariantProps: PlasmicDynamicPage__VariantProps,
206
198
  internalArgProps: PlasmicDynamicPage__ArgProps,
207
199
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
200
+ pageRoute: "/dynamic/[slug]",
208
201
  pagePath: "/dynamic/[slug]",
209
- searchParams: {},
210
- params: {}
202
+ params: {},
203
+ query: {}
211
204
  })
212
205
  }
213
206
  );
@@ -51,6 +51,6 @@ export async function makeAppRouterPageCtx({ params, searchParams }) {
51
51
  return ctx;
52
52
  }
53
53
 
54
- export async function PlasmicDynamicPageServer(props) {
54
+ export function PlasmicDynamicPageServer(props) {
55
55
  return <ClientDynamicPage {...props} />;
56
56
  }
@@ -19,6 +19,7 @@ import {
19
19
  hasVariant
20
20
  } from "@plasmicapp/react-web";
21
21
  import { useDataEnv } from "@plasmicapp/host";
22
+ import { generateDynamicMetadata } from "./PlasmicHomepageServer"; // plasmic-import: 6uuAAE1jiCew/rscServer
22
23
  import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
23
24
  import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
24
25
  import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
@@ -41,15 +42,6 @@ function wrapQueriesWithLoadingProxy($q) {
41
42
  });
42
43
  }
43
44
 
44
- export function generateDynamicMetadata($q, $ctx) {
45
- return {
46
- openGraph: {},
47
- twitter: {
48
- card: "summary"
49
- }
50
- };
51
- }
52
-
53
45
  createPlasmicElementProxy;
54
46
 
55
47
  export const PlasmicHomepage__VariantProps = new Array();
@@ -240,9 +232,10 @@ export const PlasmicHomepage = Object.assign(
240
232
  internalVariantProps: PlasmicHomepage__VariantProps,
241
233
  internalArgProps: PlasmicHomepage__ArgProps,
242
234
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
235
+ pageRoute: "/",
243
236
  pagePath: "/",
244
- searchParams: {},
245
- params: {}
237
+ params: {},
238
+ query: {}
246
239
  })
247
240
  }
248
241
  );
@@ -51,6 +51,6 @@ export async function makeAppRouterPageCtx({ params, searchParams }) {
51
51
  return ctx;
52
52
  }
53
53
 
54
- export async function PlasmicHomepageServer(props) {
54
+ export function PlasmicHomepageServer(props) {
55
55
  return <ClientHomepage {...props} />;
56
56
  }
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@plasmicapp/cli": "^0.1.359",
13
- "@plasmicapp/react-web": "^0.2.422",
13
+ "@plasmicapp/react-web": "^0.2.425",
14
14
  "next": "14.2.35",
15
15
  "react": "^18",
16
16
  "react-dom": "^18"
@@ -61,6 +61,8 @@ import {
61
61
  useGlobalActions
62
62
  } from "@plasmicapp/host";
63
63
 
64
+ import { generateDynamicMetadata, PageCtx } from "./PlasmicDynamicPageServer"; // plasmic-import: AO44A-w7hh/rscServer
65
+
64
66
  import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
65
67
  import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
66
68
  import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
@@ -85,15 +87,6 @@ function wrapQueriesWithLoadingProxy($q: any): any {
85
87
  });
86
88
  }
87
89
 
88
- export function generateDynamicMetadata($q: any, $ctx: any) {
89
- return {
90
- openGraph: {},
91
- twitter: {
92
- card: "summary"
93
- }
94
- };
95
- }
96
-
97
90
  createPlasmicElementProxy;
98
91
 
99
92
  export type PlasmicDynamicPage__VariantMembers = {};
@@ -155,7 +148,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
155
148
 
156
149
  const pageMetadata = generateDynamicMetadata(
157
150
  wrapQueriesWithLoadingProxy({}),
158
- $ctx
151
+ $ctx as PageCtx
159
152
  );
160
153
 
161
154
  const styleTokensClassNames = _useStyleTokens();
@@ -318,9 +311,10 @@ export const PlasmicDynamicPage = Object.assign(
318
311
  internalArgProps: PlasmicDynamicPage__ArgProps,
319
312
 
320
313
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
314
+ pageRoute: "/dynamic/[slug]",
321
315
  pagePath: "/dynamic/[slug]",
322
- searchParams: {},
323
- params: {}
316
+ params: {},
317
+ query: {}
324
318
  })
325
319
  }
326
320
  );
@@ -14,11 +14,18 @@ import { ClientDynamicPage } from "../../../app/dynamic/[slug]/page-client"; //
14
14
 
15
15
  const $$ = {};
16
16
 
17
- export function generateDynamicMetadata($q: any, $ctx: any) {
17
+ export type PageCtx = {
18
+ pageRoute: string;
19
+ pagePath: string;
20
+ params: Record<string, string | string[] | undefined>;
21
+ query: Record<string, string | string[] | undefined>;
22
+ };
23
+
24
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
18
25
  return {
19
26
  openGraph: {},
20
27
  twitter: {
21
- card: "summary"
28
+ card: "summary" as const
22
29
  }
23
30
  };
24
31
  }
@@ -70,8 +77,6 @@ export async function makeAppRouterPageCtx({
70
77
  export type PlasmicDynamicPageServerProps = DefaultDynamicPageProps &
71
78
  DynamicPageServerSkeletonProps;
72
79
 
73
- export async function PlasmicDynamicPageServer(
74
- props: PlasmicDynamicPageServerProps
75
- ) {
80
+ export function PlasmicDynamicPageServer(props: PlasmicDynamicPageServerProps) {
76
81
  return <ClientDynamicPage {...props} />;
77
82
  }
@@ -61,6 +61,8 @@ import {
61
61
  useGlobalActions
62
62
  } from "@plasmicapp/host";
63
63
 
64
+ import { generateDynamicMetadata, PageCtx } from "./PlasmicHomepageServer"; // plasmic-import: 6uuAAE1jiCew/rscServer
65
+
64
66
  import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
65
67
  import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
66
68
  import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
@@ -86,15 +88,6 @@ function wrapQueriesWithLoadingProxy($q: any): any {
86
88
  });
87
89
  }
88
90
 
89
- export function generateDynamicMetadata($q: any, $ctx: any) {
90
- return {
91
- openGraph: {},
92
- twitter: {
93
- card: "summary"
94
- }
95
- };
96
- }
97
-
98
91
  createPlasmicElementProxy;
99
92
 
100
93
  export type PlasmicHomepage__VariantMembers = {};
@@ -159,7 +152,7 @@ function PlasmicHomepage__RenderFunc(props: {
159
152
 
160
153
  const pageMetadata = generateDynamicMetadata(
161
154
  wrapQueriesWithLoadingProxy({}),
162
- $ctx
155
+ $ctx as PageCtx
163
156
  );
164
157
 
165
158
  const styleTokensClassNames = _useStyleTokens();
@@ -355,9 +348,10 @@ export const PlasmicHomepage = Object.assign(
355
348
  internalArgProps: PlasmicHomepage__ArgProps,
356
349
 
357
350
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
351
+ pageRoute: "/",
358
352
  pagePath: "/",
359
- searchParams: {},
360
- params: {}
353
+ params: {},
354
+ query: {}
361
355
  })
362
356
  }
363
357
  );
@@ -14,11 +14,18 @@ import { ClientHomepage } from "../../../app/page-client"; // plasmic-import: 6u
14
14
 
15
15
  const $$ = {};
16
16
 
17
- export function generateDynamicMetadata($q: any, $ctx: any) {
17
+ export type PageCtx = {
18
+ pageRoute: string;
19
+ pagePath: string;
20
+ params: Record<string, string | string[] | undefined>;
21
+ query: Record<string, string | string[] | undefined>;
22
+ };
23
+
24
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
18
25
  return {
19
26
  openGraph: {},
20
27
  twitter: {
21
- card: "summary"
28
+ card: "summary" as const
22
29
  }
23
30
  };
24
31
  }
@@ -70,6 +77,6 @@ export async function makeAppRouterPageCtx({
70
77
  export type PlasmicHomepageServerProps = DefaultHomepageProps &
71
78
  HomepageServerSkeletonProps;
72
79
 
73
- export async function PlasmicHomepageServer(props: PlasmicHomepageServerProps) {
80
+ export function PlasmicHomepageServer(props: PlasmicHomepageServerProps) {
74
81
  return <ClientHomepage {...props} />;
75
82
  }
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@plasmicapp/cli": "^0.1.359",
13
- "@plasmicapp/react-web": "^0.2.422",
13
+ "@plasmicapp/react-web": "^0.2.425",
14
14
  "next": "14.2.35",
15
15
  "react": "^18",
16
16
  "react-dom": "^18"
@@ -9,7 +9,7 @@
9
9
  "lint": "next lint"
10
10
  },
11
11
  "dependencies": {
12
- "@plasmicapp/loader-nextjs": "^1.0.454",
12
+ "@plasmicapp/loader-nextjs": "^1.0.456",
13
13
  "next": "14.2.35",
14
14
  "react": "^18",
15
15
  "react-dom": "^18"
@@ -9,7 +9,7 @@
9
9
  "lint": "next lint"
10
10
  },
11
11
  "dependencies": {
12
- "@plasmicapp/loader-nextjs": "^1.0.454",
12
+ "@plasmicapp/loader-nextjs": "^1.0.456",
13
13
  "next": "14.2.35",
14
14
  "react": "^18",
15
15
  "react-dom": "^18"
@@ -204,9 +204,10 @@ export const PlasmicDynamicPage = Object.assign(
204
204
  internalVariantProps: PlasmicDynamicPage__VariantProps,
205
205
  internalArgProps: PlasmicDynamicPage__ArgProps,
206
206
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
207
+ pageRoute: "/dynamic/[slug]",
207
208
  pagePath: "/dynamic/[slug]",
208
- searchParams: {},
209
- params: {}
209
+ params: {},
210
+ query: {}
210
211
  })
211
212
  }
212
213
  );
@@ -239,9 +239,10 @@ export const PlasmicHomepage = Object.assign(
239
239
  internalVariantProps: PlasmicHomepage__VariantProps,
240
240
  internalArgProps: PlasmicHomepage__ArgProps,
241
241
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
242
+ pageRoute: "/",
242
243
  pagePath: "/",
243
- searchParams: {},
244
- params: {}
244
+ params: {},
245
+ query: {}
245
246
  })
246
247
  }
247
248
  );
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@plasmicapp/cli": "^0.1.359",
13
- "@plasmicapp/react-web": "^0.2.422",
13
+ "@plasmicapp/react-web": "^0.2.425",
14
14
  "next": "14.2.35",
15
15
  "react": "^18",
16
16
  "react-dom": "^18"
@@ -83,11 +83,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
83
83
  });
84
84
  }
85
85
 
86
- export function generateDynamicMetadata($q: any, $ctx: any) {
86
+ export type PageCtx = {
87
+ pageRoute: string;
88
+ pagePath: string;
89
+ params: Record<string, string | string[] | undefined>;
90
+ query: Record<string, string | string[] | undefined>;
91
+ };
92
+
93
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
87
94
  return {
88
95
  openGraph: {},
89
96
  twitter: {
90
- card: "summary"
97
+ card: "summary" as const
91
98
  }
92
99
  };
93
100
  }
@@ -153,7 +160,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
153
160
 
154
161
  const pageMetadata = generateDynamicMetadata(
155
162
  wrapQueriesWithLoadingProxy({}),
156
- $ctx
163
+ $ctx as PageCtx
157
164
  );
158
165
 
159
166
  const styleTokensClassNames = _useStyleTokens();
@@ -316,9 +323,10 @@ export const PlasmicDynamicPage = Object.assign(
316
323
  internalArgProps: PlasmicDynamicPage__ArgProps,
317
324
 
318
325
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
326
+ pageRoute: "/dynamic/[slug]",
319
327
  pagePath: "/dynamic/[slug]",
320
- searchParams: {},
321
- params: {}
328
+ params: {},
329
+ query: {}
322
330
  })
323
331
  }
324
332
  );
@@ -84,11 +84,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
84
84
  });
85
85
  }
86
86
 
87
- export function generateDynamicMetadata($q: any, $ctx: any) {
87
+ export type PageCtx = {
88
+ pageRoute: string;
89
+ pagePath: string;
90
+ params: Record<string, string | string[] | undefined>;
91
+ query: Record<string, string | string[] | undefined>;
92
+ };
93
+
94
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
88
95
  return {
89
96
  openGraph: {},
90
97
  twitter: {
91
- card: "summary"
98
+ card: "summary" as const
92
99
  }
93
100
  };
94
101
  }
@@ -157,7 +164,7 @@ function PlasmicHomepage__RenderFunc(props: {
157
164
 
158
165
  const pageMetadata = generateDynamicMetadata(
159
166
  wrapQueriesWithLoadingProxy({}),
160
- $ctx
167
+ $ctx as PageCtx
161
168
  );
162
169
 
163
170
  const styleTokensClassNames = _useStyleTokens();
@@ -353,9 +360,10 @@ export const PlasmicHomepage = Object.assign(
353
360
  internalArgProps: PlasmicHomepage__ArgProps,
354
361
 
355
362
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
363
+ pageRoute: "/",
356
364
  pagePath: "/",
357
- searchParams: {},
358
- params: {}
365
+ params: {},
366
+ query: {}
359
367
  })
360
368
  }
361
369
  );
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@plasmicapp/cli": "^0.1.359",
13
- "@plasmicapp/react-web": "^0.2.422",
13
+ "@plasmicapp/react-web": "^0.2.425",
14
14
  "next": "14.2.35",
15
15
  "react": "^18",
16
16
  "react-dom": "^18"
@@ -9,7 +9,7 @@
9
9
  "lint": "next lint"
10
10
  },
11
11
  "dependencies": {
12
- "@plasmicapp/loader-nextjs": "^1.0.454",
12
+ "@plasmicapp/loader-nextjs": "^1.0.456",
13
13
  "next": "14.2.35",
14
14
  "react": "^18",
15
15
  "react-dom": "^18"
@@ -9,7 +9,7 @@
9
9
  "lint": "next lint"
10
10
  },
11
11
  "dependencies": {
12
- "@plasmicapp/loader-nextjs": "^1.0.454",
12
+ "@plasmicapp/loader-nextjs": "^1.0.456",
13
13
  "next": "14.2.35",
14
14
  "react": "^18",
15
15
  "react-dom": "^18"
@@ -1,18 +1,13 @@
1
1
  import js from '@eslint/js'
2
2
  import globals from 'globals'
3
+ import react from 'eslint-plugin-react'
3
4
  import reactHooks from 'eslint-plugin-react-hooks'
4
5
  import reactRefresh from 'eslint-plugin-react-refresh'
5
- import { defineConfig, globalIgnores } from 'eslint/config'
6
6
 
7
- export default defineConfig([
8
- globalIgnores(['dist']),
7
+ export default [
8
+ { ignores: ['dist'] },
9
9
  {
10
10
  files: ['**/*.{js,jsx}'],
11
- extends: [
12
- js.configs.recommended,
13
- reactHooks.configs.flat.recommended,
14
- reactRefresh.configs.vite,
15
- ],
16
11
  languageOptions: {
17
12
  ecmaVersion: 2020,
18
13
  globals: globals.browser,
@@ -22,8 +17,22 @@ export default defineConfig([
22
17
  sourceType: 'module',
23
18
  },
24
19
  },
20
+ settings: { react: { version: '18.3' } },
21
+ plugins: {
22
+ react,
23
+ 'react-hooks': reactHooks,
24
+ 'react-refresh': reactRefresh,
25
+ },
25
26
  rules: {
26
- 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27
+ ...js.configs.recommended.rules,
28
+ ...react.configs.recommended.rules,
29
+ ...react.configs['jsx-runtime'].rules,
30
+ ...reactHooks.configs.recommended.rules,
31
+ 'react/jsx-no-target-blank': 'off',
32
+ 'react-refresh/only-export-components': [
33
+ 'warn',
34
+ { allowConstantExport: true },
35
+ ],
27
36
  },
28
37
  },
29
- ])
38
+ ]
@@ -11,19 +11,20 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@plasmicapp/cli": "^0.1.359",
14
- "@plasmicapp/react-web": "^0.2.422",
15
- "react": "^19.2.0",
16
- "react-dom": "^19.2.0"
14
+ "@plasmicapp/react-web": "^0.2.425",
15
+ "react": "^18.3.1",
16
+ "react-dom": "^18.3.1"
17
17
  },
18
18
  "devDependencies": {
19
- "@eslint/js": "^9.39.1",
20
- "@types/react": "^19.2.7",
21
- "@types/react-dom": "^19.2.3",
22
- "@vitejs/plugin-react": "^5.1.1",
23
- "eslint": "^9.39.1",
24
- "eslint-plugin-react-hooks": "^7.0.1",
25
- "eslint-plugin-react-refresh": "^0.4.24",
26
- "globals": "^16.5.0",
27
- "vite": "^7.3.1"
19
+ "@eslint/js": "^9.13.0",
20
+ "@types/react": "^18.3.12",
21
+ "@types/react-dom": "^18.3.1",
22
+ "@vitejs/plugin-react": "^4.3.3",
23
+ "eslint": "^9.13.0",
24
+ "eslint-plugin-react": "^7.37.2",
25
+ "eslint-plugin-react-hooks": "^5.0.0",
26
+ "eslint-plugin-react-refresh": "^0.4.14",
27
+ "globals": "^15.11.0",
28
+ "vite": "^5.4.10"
28
29
  }
29
30
  }
@@ -182,9 +182,10 @@ export const PlasmicDynamicPage = Object.assign(
182
182
  internalVariantProps: PlasmicDynamicPage__VariantProps,
183
183
  internalArgProps: PlasmicDynamicPage__ArgProps,
184
184
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
185
+ pageRoute: "/dynamic/[slug]",
185
186
  pagePath: "/dynamic/[slug]",
186
- searchParams: {},
187
- params: {}
187
+ params: {},
188
+ query: {}
188
189
  })
189
190
  }
190
191
  );
@@ -217,9 +217,10 @@ export const PlasmicHomepage = Object.assign(
217
217
  internalVariantProps: PlasmicHomepage__VariantProps,
218
218
  internalArgProps: PlasmicHomepage__ArgProps,
219
219
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
220
+ pageRoute: "/",
220
221
  pagePath: "/",
221
- searchParams: {},
222
- params: {}
222
+ params: {},
223
+ query: {}
223
224
  })
224
225
  }
225
226
  );
@@ -3,21 +3,26 @@ import globals from 'globals'
3
3
  import reactHooks from 'eslint-plugin-react-hooks'
4
4
  import reactRefresh from 'eslint-plugin-react-refresh'
5
5
  import tseslint from 'typescript-eslint'
6
- import { defineConfig, globalIgnores } from 'eslint/config'
7
6
 
8
- export default defineConfig([
9
- globalIgnores(['dist']),
7
+ export default tseslint.config(
8
+ { ignores: ['dist'] },
10
9
  {
10
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
11
  files: ['**/*.{ts,tsx}'],
12
- extends: [
13
- js.configs.recommended,
14
- tseslint.configs.recommended,
15
- reactHooks.configs.flat.recommended,
16
- reactRefresh.configs.vite,
17
- ],
18
12
  languageOptions: {
19
13
  ecmaVersion: 2020,
20
14
  globals: globals.browser,
21
15
  },
16
+ plugins: {
17
+ 'react-hooks': reactHooks,
18
+ 'react-refresh': reactRefresh,
19
+ },
20
+ rules: {
21
+ ...reactHooks.configs.recommended.rules,
22
+ 'react-refresh/only-export-components': [
23
+ 'warn',
24
+ { allowConstantExport: true },
25
+ ],
26
+ },
22
27
  },
23
- ])
28
+ )
@@ -11,22 +11,21 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@plasmicapp/cli": "^0.1.359",
14
- "@plasmicapp/react-web": "^0.2.422",
15
- "react": "^19.2.0",
16
- "react-dom": "^19.2.0"
14
+ "@plasmicapp/react-web": "^0.2.425",
15
+ "react": "^18.3.1",
16
+ "react-dom": "^18.3.1"
17
17
  },
18
18
  "devDependencies": {
19
- "@eslint/js": "^9.39.1",
20
- "@types/node": "^24.10.1",
21
- "@types/react": "^19.2.7",
22
- "@types/react-dom": "^19.2.3",
23
- "@vitejs/plugin-react": "^5.1.1",
24
- "eslint": "^9.39.1",
25
- "eslint-plugin-react-hooks": "^7.0.1",
26
- "eslint-plugin-react-refresh": "^0.4.24",
27
- "globals": "^16.5.0",
28
- "typescript": "~5.9.3",
29
- "typescript-eslint": "^8.48.0",
30
- "vite": "^7.3.1"
19
+ "@eslint/js": "^9.13.0",
20
+ "@types/react": "^18.3.12",
21
+ "@types/react-dom": "^18.3.1",
22
+ "@vitejs/plugin-react": "^4.3.3",
23
+ "eslint": "^9.13.0",
24
+ "eslint-plugin-react-hooks": "^5.0.0",
25
+ "eslint-plugin-react-refresh": "^0.4.14",
26
+ "globals": "^15.11.0",
27
+ "typescript": "~5.6.2",
28
+ "typescript-eslint": "^8.11.0",
29
+ "vite": "^5.4.10"
31
30
  }
32
31
  }
@@ -79,11 +79,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
79
79
  });
80
80
  }
81
81
 
82
- export function generateDynamicMetadata($q: any, $ctx: any) {
82
+ export type PageCtx = {
83
+ pageRoute: string;
84
+ pagePath: string;
85
+ params: Record<string, string | string[] | undefined>;
86
+ query: Record<string, string | string[] | undefined>;
87
+ };
88
+
89
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
83
90
  return {
84
91
  openGraph: {},
85
92
  twitter: {
86
- card: "summary"
93
+ card: "summary" as const
87
94
  }
88
95
  };
89
96
  }
@@ -292,9 +299,10 @@ export const PlasmicDynamicPage = Object.assign(
292
299
  internalArgProps: PlasmicDynamicPage__ArgProps,
293
300
 
294
301
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
302
+ pageRoute: "/dynamic/[slug]",
295
303
  pagePath: "/dynamic/[slug]",
296
- searchParams: {},
297
- params: {}
304
+ params: {},
305
+ query: {}
298
306
  })
299
307
  }
300
308
  );
@@ -80,11 +80,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
80
80
  });
81
81
  }
82
82
 
83
- export function generateDynamicMetadata($q: any, $ctx: any) {
83
+ export type PageCtx = {
84
+ pageRoute: string;
85
+ pagePath: string;
86
+ params: Record<string, string | string[] | undefined>;
87
+ query: Record<string, string | string[] | undefined>;
88
+ };
89
+
90
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
84
91
  return {
85
92
  openGraph: {},
86
93
  twitter: {
87
- card: "summary"
94
+ card: "summary" as const
88
95
  }
89
96
  };
90
97
  }
@@ -329,9 +336,10 @@ export const PlasmicHomepage = Object.assign(
329
336
  internalArgProps: PlasmicHomepage__ArgProps,
330
337
 
331
338
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
339
+ pageRoute: "/",
332
340
  pagePath: "/",
333
- searchParams: {},
334
- params: {}
341
+ params: {},
342
+ query: {}
335
343
  })
336
344
  }
337
345
  );
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
@@ -13,12 +13,12 @@
13
13
  },
14
14
  "dependencies": {
15
15
  "@plasmicapp/cli": "^0.1.359",
16
- "@plasmicapp/react-web": "^0.2.422",
16
+ "@plasmicapp/react-web": "^0.2.425",
17
17
  "@tailwindcss/vite": "^4.1.18",
18
- "@tanstack/react-devtools": "^0.7.0",
18
+ "@tanstack/react-devtools": "latest",
19
19
  "@tanstack/react-query": "^5.90.21",
20
- "@tanstack/react-router": "^1.132.0",
21
- "@tanstack/react-router-devtools": "^1.132.0",
20
+ "@tanstack/react-router": "latest",
21
+ "@tanstack/react-router-devtools": "latest",
22
22
  "@tanstack/router-plugin": "^1.132.0",
23
23
  "lucide-react": "^0.545.0",
24
24
  "react": "^19.2.0",
@@ -26,18 +26,25 @@
26
26
  "tailwindcss": "^4.1.18"
27
27
  },
28
28
  "devDependencies": {
29
- "@tanstack/devtools-vite": "^0.3.11",
30
- "@tanstack/router-plugin": "^1.132.0",
31
- "@testing-library/dom": "^10.4.0",
32
- "@testing-library/react": "^16.2.0",
29
+ "@tailwindcss/typography": "^0.5.16",
30
+ "@tanstack/devtools-vite": "latest",
31
+ "@tanstack/router-plugin": "latest",
32
+ "@testing-library/dom": "^10.4.1",
33
+ "@testing-library/react": "^16.3.0",
33
34
  "@types/node": "^22.10.2",
34
35
  "@types/react": "^19.2.0",
35
36
  "@types/react-dom": "^19.2.0",
36
- "@vitejs/plugin-react": "^5.0.4",
37
- "jsdom": "^27.0.0",
37
+ "@vitejs/plugin-react": "^5.1.4",
38
+ "jsdom": "^28.1.0",
38
39
  "typescript": "^5.7.2",
39
- "vite": "^7.1.7",
40
+ "vite": "^7.3.1",
40
41
  "vite-tsconfig-paths": "^5.1.4",
41
42
  "vitest": "^3.0.5"
43
+ },
44
+ "pnpm": {
45
+ "onlyBuiltDependencies": [
46
+ "esbuild",
47
+ "lightningcss"
48
+ ]
42
49
  }
43
50
  }
@@ -0,0 +1,44 @@
1
+ export default function Footer() {
2
+ const year = new Date().getFullYear()
3
+
4
+ return (
5
+ <footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
6
+ <div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
7
+ <p className="m-0 text-sm">
8
+ &copy; {year} Your name here. All rights reserved.
9
+ </p>
10
+ <p className="island-kicker m-0">Built with TanStack Start</p>
11
+ </div>
12
+ <div className="mt-4 flex justify-center gap-4">
13
+ <a
14
+ href="https://x.com/tan_stack"
15
+ target="_blank"
16
+ rel="noreferrer"
17
+ className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
18
+ >
19
+ <span className="sr-only">Follow TanStack on X</span>
20
+ <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
21
+ <path
22
+ fill="currentColor"
23
+ d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
24
+ />
25
+ </svg>
26
+ </a>
27
+ <a
28
+ href="https://github.com/TanStack"
29
+ target="_blank"
30
+ rel="noreferrer"
31
+ className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
32
+ >
33
+ <span className="sr-only">Go to TanStack GitHub</span>
34
+ <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
35
+ <path
36
+ fill="currentColor"
37
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
38
+ />
39
+ </svg>
40
+ </a>
41
+ </div>
42
+ </footer>
43
+ )
44
+ }
@@ -0,0 +1,78 @@
1
+ import { Link } from '@tanstack/react-router'
2
+ import ThemeToggle from './ThemeToggle'
3
+
4
+ export default function Header() {
5
+ return (
6
+ <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
7
+ <nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
8
+ <h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
9
+ <Link
10
+ to="/"
11
+ className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
12
+ >
13
+ <span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
14
+ TanStack Start
15
+ </Link>
16
+ </h2>
17
+
18
+ <div className="ml-auto flex items-center gap-1.5 sm:ml-0 sm:gap-2">
19
+ <a
20
+ href="https://x.com/tan_stack"
21
+ target="_blank"
22
+ rel="noreferrer"
23
+ className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
24
+ >
25
+ <span className="sr-only">Follow TanStack on X</span>
26
+ <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
27
+ <path
28
+ fill="currentColor"
29
+ d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
30
+ />
31
+ </svg>
32
+ </a>
33
+ <a
34
+ href="https://github.com/TanStack"
35
+ target="_blank"
36
+ rel="noreferrer"
37
+ className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
38
+ >
39
+ <span className="sr-only">Go to TanStack GitHub</span>
40
+ <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
41
+ <path
42
+ fill="currentColor"
43
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
44
+ />
45
+ </svg>
46
+ </a>
47
+
48
+ <ThemeToggle />
49
+ </div>
50
+
51
+ <div className="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
52
+ <Link
53
+ to="/"
54
+ className="nav-link"
55
+ activeProps={{ className: 'nav-link is-active' }}
56
+ >
57
+ Home
58
+ </Link>
59
+ <Link
60
+ to="/about"
61
+ className="nav-link"
62
+ activeProps={{ className: 'nav-link is-active' }}
63
+ >
64
+ About
65
+ </Link>
66
+ <a
67
+ href="https://tanstack.com/start/latest/docs/framework/react/overview"
68
+ className="nav-link"
69
+ target="_blank"
70
+ rel="noreferrer"
71
+ >
72
+ Docs
73
+ </a>
74
+ </div>
75
+ </nav>
76
+ </header>
77
+ )
78
+ }
@@ -0,0 +1,81 @@
1
+ import { useEffect, useState } from 'react'
2
+
3
+ type ThemeMode = 'light' | 'dark' | 'auto'
4
+
5
+ function getInitialMode(): ThemeMode {
6
+ if (typeof window === 'undefined') {
7
+ return 'auto'
8
+ }
9
+
10
+ const stored = window.localStorage.getItem('theme')
11
+ if (stored === 'light' || stored === 'dark' || stored === 'auto') {
12
+ return stored
13
+ }
14
+
15
+ return 'auto'
16
+ }
17
+
18
+ function applyThemeMode(mode: ThemeMode) {
19
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
20
+ const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode
21
+
22
+ document.documentElement.classList.remove('light', 'dark')
23
+ document.documentElement.classList.add(resolved)
24
+
25
+ if (mode === 'auto') {
26
+ document.documentElement.removeAttribute('data-theme')
27
+ } else {
28
+ document.documentElement.setAttribute('data-theme', mode)
29
+ }
30
+
31
+ document.documentElement.style.colorScheme = resolved
32
+ }
33
+
34
+ export default function ThemeToggle() {
35
+ const [mode, setMode] = useState<ThemeMode>('auto')
36
+
37
+ useEffect(() => {
38
+ const initialMode = getInitialMode()
39
+ setMode(initialMode)
40
+ applyThemeMode(initialMode)
41
+ }, [])
42
+
43
+ useEffect(() => {
44
+ if (mode !== 'auto') {
45
+ return
46
+ }
47
+
48
+ const media = window.matchMedia('(prefers-color-scheme: dark)')
49
+ const onChange = () => applyThemeMode('auto')
50
+
51
+ media.addEventListener('change', onChange)
52
+ return () => {
53
+ media.removeEventListener('change', onChange)
54
+ }
55
+ }, [mode])
56
+
57
+ function toggleMode() {
58
+ const nextMode: ThemeMode =
59
+ mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'
60
+ setMode(nextMode)
61
+ applyThemeMode(nextMode)
62
+ window.localStorage.setItem('theme', nextMode)
63
+ }
64
+
65
+ const label =
66
+ mode === 'auto'
67
+ ? 'Theme mode: auto (system). Click to switch to light mode.'
68
+ : `Theme mode: ${mode}. Click to switch mode.`
69
+
70
+ return (
71
+ <button
72
+ type="button"
73
+ onClick={toggleMode}
74
+ aria-label={label}
75
+ title={label}
76
+ className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
77
+ >
78
+ {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
79
+ </button>
80
+ )
81
+ }
@@ -83,11 +83,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
83
83
  });
84
84
  }
85
85
 
86
- export function generateDynamicMetadata($q: any, $ctx: any) {
86
+ export type PageCtx = {
87
+ pageRoute: string;
88
+ pagePath: string;
89
+ params: Record<string, string | string[] | undefined>;
90
+ query: Record<string, string | string[] | undefined>;
91
+ };
92
+
93
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
87
94
  return {
88
95
  openGraph: {},
89
96
  twitter: {
90
- card: "summary"
97
+ card: "summary" as const
91
98
  }
92
99
  };
93
100
  }
@@ -313,9 +320,10 @@ export const PlasmicDynamicPage = Object.assign(
313
320
  internalArgProps: PlasmicDynamicPage__ArgProps,
314
321
 
315
322
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
323
+ pageRoute: "/dynamic/[slug]",
316
324
  pagePath: "/dynamic/[slug]",
317
- searchParams: {},
318
- params: {}
325
+ params: {},
326
+ query: {}
319
327
  })
320
328
  }
321
329
  );
@@ -84,11 +84,18 @@ function wrapQueriesWithLoadingProxy($q: any): any {
84
84
  });
85
85
  }
86
86
 
87
- export function generateDynamicMetadata($q: any, $ctx: any) {
87
+ export type PageCtx = {
88
+ pageRoute: string;
89
+ pagePath: string;
90
+ params: Record<string, string | string[] | undefined>;
91
+ query: Record<string, string | string[] | undefined>;
92
+ };
93
+
94
+ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
88
95
  return {
89
96
  openGraph: {},
90
97
  twitter: {
91
- card: "summary"
98
+ card: "summary" as const
92
99
  }
93
100
  };
94
101
  }
@@ -351,9 +358,10 @@ export const PlasmicHomepage = Object.assign(
351
358
  internalArgProps: PlasmicHomepage__ArgProps,
352
359
 
353
360
  pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
361
+ pageRoute: "/",
354
362
  pagePath: "/",
355
- searchParams: {},
356
- params: {}
363
+ params: {},
364
+ query: {}
357
365
  })
358
366
  }
359
367
  );
@@ -1,4 +1,3 @@
1
- import React from 'react'
2
1
  import ReactDOM from 'react-dom/client'
3
2
  import { RouterProvider, createRouter } from '@tanstack/react-router'
4
3
  import { routeTree } from './routeTree.gen'
@@ -6,6 +6,7 @@
6
6
  "module": "ESNext",
7
7
  "baseUrl": ".",
8
8
  "paths": {
9
+ "#/*": ["./src/*"],
9
10
  "@/*": ["./src/*"]
10
11
  },
11
12
  "lib": ["ES2022", "DOM", "DOM.Iterable"],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-plasmic-app",
3
- "version": "0.0.136",
3
+ "version": "0.0.137",
4
4
  "description": "Create Plasmic-powered React apps",
5
5
  "main": "./dist/lib.js",
6
6
  "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
47
47
  "validate-npm-package-name": "^3.0.0",
48
48
  "yargs": "^16.2.0"
49
49
  },
50
- "gitHead": "1b5025833480c30a67137ad81b8008c4719b1730"
50
+ "gitHead": "0f7c4954ca621261810ce9bcf074ccb86cf3f0e9"
51
51
  }