bling/examples/astro-solid-router/src/app/root.tsx at 5cf3bd544013e384aa3d221d2cfd7eed13922411 · TanStack/bling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { server$, import$, secret$, redirect } from '@tanstack/bling'
import { createSignal, lazy, Show, Suspense, useContext } from 'solid-js'
import { HydrationScript, NoHydration } from 'solid-js/web'
import { manifestContext } from './manifest'
import { Link, Outlet, RouteDefinition, useRouteData } from '@solidjs/router'
import { useAction, useLoader } from './data'

const sayHello = server$(() => console.log('Hello world'))

const LazyHello3 = lazy(() =>
  import$({
    default: () => {
      return (
        <>
          <button onClick={() => sayHello()}>Split up</button>
        </>
      )
    },
  }),
)

const inlineSecret = secret$('I am an inline server secret!')

export function App() {
  console.log(
    'Do you know the inline server secret?',
    inlineSecret ?? 'Not even.',
  )

  const [state, setState] = createSignal(0)

  return (
    <html>
      <head>
        <title>Hello World</title>
      </head>
      <body>
        <div>Hello world</div>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Suspense fallback={'loading'}>
          <Outlet />
        </Suspense>
        <button onClick={() => setState((s) => s + 1)}>{state}</button>
        <Scripts />
      </body>
    </html>
  )
}

function Scripts() {
  const manifest = useContext(manifestContext)
  return (
    <NoHydration>
      <HydrationScript />
      {import.meta.env.DEV ? (
        <>
          <script type="module" src="/@vite/client" $ServerOnly></script>
          <script
            type="module"
            src="/src/app/entry-client.tsx"
            $ServerOnly
          ></script>
        </>
      ) : (
        <>
          <script
            type="module"
            src={manifest['entry-client']}
            $ServerOnly
          ></script>
        </>
      )}
    </NoHydration>
  )
}

let count = 0

const increment = server$(async () => {
  count = count + 1
  return redirect('/about')
})

export const routes = [
  {
    path: '/',
    component: App,
    children: [
      {
        path: '',
        component: lazy(() => import$({ default: () => <div>Home</div> })),
      },
      {
        path: 'about',
        data: () => {
          return useLoader(server$(() => ({ count })))
        },
        component: lazy(() =>
          import$({
            default: () => {
              const routeData: any = useRouteData()
              const [action, submit] = useAction(increment)
              return (
                <div>
                  About <Show when={routeData()}>{routeData().count}</Show>
                  <Suspense fallback={'loading'}>
                    <LazyHello3 />
                  </Suspense>
                  <button onClick={() => submit()}>Increment</button>
                </div>
              )
            },
          }),
        ),
      },
    ],
  },
] satisfies RouteDefinition[]