create-waku 0.7.0-alpha.2 → 0.7.0-beta.0
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.
- package/package.json +1 -1
- package/template/01_counter/package.json +1 -1
- package/template/02_async/package.json +1 -1
- package/template/03_promise/package.json +1 -1
- package/template/04_callserver/package.json +1 -1
- package/template/05_mutation/package.json +1 -1
- package/template/06_nesting/package.json +1 -1
- package/template/07_router/package.json +1 -1
- package/template/07_router/src/components/Counter.tsx +1 -1
- package/template/07_router/src/components/HomeLayout.tsx +8 -8
- package/template/08_cookies/package.json +1 -1
- package/template/09_cssmodules/package.json +1 -1
- package/template/10_dynamicroute/package.json +1 -1
- package/template/10_dynamicroute/src/components/Counter.tsx +1 -1
- package/template/10_dynamicroute/src/routes/layout.tsx +5 -5
- package/template/11_form/package.json +1 -1
- package/template/12_css/package.json +4 -2
- package/template/12_css/src/components/App.tsx +2 -1
- package/template/12_css/vite.config.ts +15 -1
- package/template/13_path-alias/package.json +23 -0
- package/template/13_path-alias/src/components/App.tsx +15 -0
- package/template/13_path-alias/src/components/Counter.tsx +14 -0
- package/template/13_path-alias/src/entries.tsx +28 -0
- package/template/13_path-alias/src/main.tsx +17 -0
- package/template/13_path-alias/tsconfig.json +25 -0
- package/template/13_path-alias/tsconfig.node.json +8 -0
- package/template/13_path-alias/vite.config.ts +6 -0
package/package.json
CHANGED
|
@@ -20,7 +20,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
20
20
|
<ul>
|
|
21
21
|
<li>
|
|
22
22
|
<Link
|
|
23
|
-
|
|
23
|
+
to="/"
|
|
24
24
|
pending={<Pending isPending />}
|
|
25
25
|
notPending={<Pending isPending={false} />}
|
|
26
26
|
>
|
|
@@ -29,7 +29,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
29
29
|
</li>
|
|
30
30
|
<li>
|
|
31
31
|
<Link
|
|
32
|
-
|
|
32
|
+
to="/foo"
|
|
33
33
|
pending={<Pending isPending />}
|
|
34
34
|
notPending={<Pending isPending={false} />}
|
|
35
35
|
>
|
|
@@ -37,24 +37,24 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
37
37
|
</Link>
|
|
38
38
|
</li>
|
|
39
39
|
<li>
|
|
40
|
-
<Link
|
|
40
|
+
<Link to="/bar" unstable_prefetchOnEnter>
|
|
41
41
|
Bar
|
|
42
42
|
</Link>
|
|
43
43
|
</li>
|
|
44
44
|
<li>
|
|
45
|
-
<Link
|
|
45
|
+
<Link to="/baz">Baz</Link>
|
|
46
46
|
</li>
|
|
47
47
|
<li>
|
|
48
|
-
<Link
|
|
48
|
+
<Link to="/nested/foo">Nested / Foo</Link>
|
|
49
49
|
</li>
|
|
50
50
|
<li>
|
|
51
|
-
<Link
|
|
51
|
+
<Link to="/nested/bar">Nested / Bar</Link>
|
|
52
52
|
</li>
|
|
53
53
|
<li>
|
|
54
|
-
<Link
|
|
54
|
+
<Link to="/nested/baz">Nested / Baz</Link>
|
|
55
55
|
</li>
|
|
56
56
|
<li>
|
|
57
|
-
<Link
|
|
57
|
+
<Link to="/nested/qux">Nested / Qux</Link>
|
|
58
58
|
</li>
|
|
59
59
|
</ul>
|
|
60
60
|
{children}
|
|
@@ -20,7 +20,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
20
20
|
<ul>
|
|
21
21
|
<li>
|
|
22
22
|
<Link
|
|
23
|
-
|
|
23
|
+
to="/"
|
|
24
24
|
pending={<Pending isPending />}
|
|
25
25
|
notPending={<Pending isPending={false} />}
|
|
26
26
|
>
|
|
@@ -29,7 +29,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
29
29
|
</li>
|
|
30
30
|
<li>
|
|
31
31
|
<Link
|
|
32
|
-
|
|
32
|
+
to="/foo"
|
|
33
33
|
pending={<Pending isPending />}
|
|
34
34
|
notPending={<Pending isPending={false} />}
|
|
35
35
|
>
|
|
@@ -38,7 +38,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
38
38
|
</li>
|
|
39
39
|
<li>
|
|
40
40
|
<Link
|
|
41
|
-
|
|
41
|
+
to="/bar"
|
|
42
42
|
unstable_prefetchOnEnter
|
|
43
43
|
pending={<Pending isPending />}
|
|
44
44
|
notPending={<Pending isPending={false} />}
|
|
@@ -48,7 +48,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
48
48
|
</li>
|
|
49
49
|
<li>
|
|
50
50
|
<Link
|
|
51
|
-
|
|
51
|
+
to="/nested/baz"
|
|
52
52
|
pending={<Pending isPending />}
|
|
53
53
|
notPending={<Pending isPending={false} />}
|
|
54
54
|
>
|
|
@@ -57,7 +57,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
|
|
|
57
57
|
</li>
|
|
58
58
|
<li>
|
|
59
59
|
<Link
|
|
60
|
-
|
|
60
|
+
to="/nested/qux"
|
|
61
61
|
pending={<Pending isPending />}
|
|
62
62
|
notPending={<Pending isPending={false} />}
|
|
63
63
|
>
|
|
@@ -10,17 +10,19 @@
|
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@stylexjs/stylex": "0.4.1",
|
|
13
|
+
"@vanilla-extract/css": "1.14.0",
|
|
14
|
+
"classnames": "2.3.2",
|
|
13
15
|
"react": "18.3.0-canary-c5b937576-20231219",
|
|
14
16
|
"react-dom": "18.3.0-canary-c5b937576-20231219",
|
|
15
|
-
"waku": "0.19.0-
|
|
17
|
+
"waku": "0.19.0-beta.0"
|
|
16
18
|
},
|
|
17
19
|
"devDependencies": {
|
|
18
20
|
"@types/react": "18.2.46",
|
|
19
21
|
"@types/react-dom": "18.2.18",
|
|
20
|
-
"@vanilla-extract/css": "1.14.0",
|
|
21
22
|
"@vanilla-extract/vite-plugin": "3.9.3",
|
|
22
23
|
"typescript": "5.3.3",
|
|
23
24
|
"vite": "5.0.10",
|
|
25
|
+
"vite-plugin-commonjs": "0.10.1",
|
|
24
26
|
"vite-plugin-stylex": "0.4.1"
|
|
25
27
|
}
|
|
26
28
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
1
2
|
// @ts-expect-error no types
|
|
2
3
|
import styles from './App.module.css';
|
|
3
4
|
import './App.css';
|
|
@@ -9,7 +10,7 @@ const App = ({ name }: { name: string }) => {
|
|
|
9
10
|
return (
|
|
10
11
|
<div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
|
|
11
12
|
<title>Waku example</title>
|
|
12
|
-
<h1>Hello {name}!!</h1>
|
|
13
|
+
<h1 className={classNames('foo', 'bar')}>Hello {name}!!</h1>
|
|
13
14
|
<h1 className={styles.title}>Hello {name}!!</h1>
|
|
14
15
|
<h3 className={container}>This is a server component.</h3>
|
|
15
16
|
<Counter />
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import { defineConfig } from 'vite';
|
|
2
2
|
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
|
|
3
3
|
import styleX from 'vite-plugin-stylex';
|
|
4
|
+
import commonjs from 'vite-plugin-commonjs';
|
|
4
5
|
|
|
5
6
|
export default defineConfig({
|
|
6
7
|
ssr: {
|
|
7
8
|
external: ['@stylexjs/stylex'],
|
|
8
9
|
},
|
|
9
|
-
plugins: [
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin({ emitCssInSsr: true }),
|
|
12
|
+
styleX(),
|
|
13
|
+
// @ts-expect-error not callable FIXME why not callable?
|
|
14
|
+
commonjs({
|
|
15
|
+
filter(id: string) {
|
|
16
|
+
// `node_modules` is exclude by default, so we need to include it explicitly
|
|
17
|
+
// https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.10.1/src/index.ts#L141-L142
|
|
18
|
+
if (id.includes('node_modules/classnames')) {
|
|
19
|
+
return true;
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
}),
|
|
23
|
+
],
|
|
10
24
|
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "waku-example",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"private": true,
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "waku dev --with-ssr",
|
|
8
|
+
"build": "waku build --with-ssr",
|
|
9
|
+
"start": "waku start --with-ssr"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "18.3.0-canary-c5b937576-20231219",
|
|
13
|
+
"react-dom": "18.3.0-canary-c5b937576-20231219",
|
|
14
|
+
"waku": "0.19.0-beta.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@types/react": "18.2.46",
|
|
18
|
+
"@types/react-dom": "18.2.18",
|
|
19
|
+
"typescript": "5.3.3",
|
|
20
|
+
"vite": "5.0.10",
|
|
21
|
+
"vite-tsconfig-paths": "4.2.3"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Counter } from '@/components/Counter.js';
|
|
2
|
+
|
|
3
|
+
const App = ({ name }: { name: string }) => {
|
|
4
|
+
return (
|
|
5
|
+
<div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
|
|
6
|
+
<title>Waku example</title>
|
|
7
|
+
<h1>Hello {name}!!</h1>
|
|
8
|
+
<h3>This is a server component.</h3>
|
|
9
|
+
<Counter />
|
|
10
|
+
<div>{new Date().toISOString()}</div>
|
|
11
|
+
</div>
|
|
12
|
+
);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default App;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
|
|
5
|
+
export const Counter = () => {
|
|
6
|
+
const [count, setCount] = useState(0);
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
|
|
9
|
+
<p>Count: {count}</p>
|
|
10
|
+
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
|
|
11
|
+
<h3>This is a client component.</h3>
|
|
12
|
+
</div>
|
|
13
|
+
);
|
|
14
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { lazy } from 'react';
|
|
2
|
+
import { defineEntries } from 'waku/server';
|
|
3
|
+
import { Slot } from 'waku/client';
|
|
4
|
+
|
|
5
|
+
const App = lazy(() => import('@/components/App.js'));
|
|
6
|
+
|
|
7
|
+
export default defineEntries(
|
|
8
|
+
// renderEntries
|
|
9
|
+
async (input) => {
|
|
10
|
+
return {
|
|
11
|
+
App: <App name={input || 'Waku'} />,
|
|
12
|
+
};
|
|
13
|
+
},
|
|
14
|
+
// getBuildConfig
|
|
15
|
+
async () => [{ pathname: '/', entries: [{ input: '' }] }],
|
|
16
|
+
// getSsrConfig
|
|
17
|
+
async (pathname) => {
|
|
18
|
+
switch (pathname) {
|
|
19
|
+
case '/':
|
|
20
|
+
return {
|
|
21
|
+
input: '',
|
|
22
|
+
body: <Slot id="App" />,
|
|
23
|
+
};
|
|
24
|
+
default:
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { StrictMode } from 'react';
|
|
2
|
+
import { createRoot, hydrateRoot } from 'react-dom/client';
|
|
3
|
+
import { Root, Slot } from 'waku/client';
|
|
4
|
+
|
|
5
|
+
const rootElement = (
|
|
6
|
+
<StrictMode>
|
|
7
|
+
<Root>
|
|
8
|
+
<Slot id="App" />
|
|
9
|
+
</Root>
|
|
10
|
+
</StrictMode>
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
if (import.meta.env.WAKU_HYDRATE) {
|
|
14
|
+
hydrateRoot(document.body, rootElement);
|
|
15
|
+
} else {
|
|
16
|
+
createRoot(document.body).render(rootElement);
|
|
17
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"strict": true,
|
|
4
|
+
"target": "esnext",
|
|
5
|
+
"downlevelIteration": true,
|
|
6
|
+
"esModuleInterop": true,
|
|
7
|
+
"module": "nodenext",
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"noUncheckedIndexedAccess": true,
|
|
10
|
+
"exactOptionalPropertyTypes": true,
|
|
11
|
+
"types": ["react/experimental"],
|
|
12
|
+
"jsx": "react-jsx",
|
|
13
|
+
"outDir": "./dist",
|
|
14
|
+
"composite": true,
|
|
15
|
+
"paths": {
|
|
16
|
+
"@/*": ["./src/*"]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"include": ["./src"],
|
|
20
|
+
"references": [
|
|
21
|
+
{
|
|
22
|
+
"path": "./tsconfig.node.json"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|