From b1ffd3fe121e719de55f8f16f7734c746d6658b7 Mon Sep 17 00:00:00 2001 From: Blankeos Date: Sun, 16 Jun 2024 23:47:06 +0800 Subject: [PATCH] add nested layout example --- examples/basic/components/Counter.tsx | 10 ++ examples/basic/package.json | 2 +- examples/basic/pages/+Layout.ts | 1 - examples/basic/pages/+Layout.tsx | 76 +++++++++ examples/basic/pages/+config.ts | 2 +- examples/basic/pages/stardust/+Layout.tsx | 55 +++++++ examples/basic/pages/stardust/+Page.tsx | 15 ++ examples/basic/pages/starship/+Layout.tsx | 150 ++++++++++++++++++ examples/basic/pages/starship/+Page.tsx | 15 ++ .../basic/pages/starship/reviews/+Page.tsx | 17 ++ examples/basic/pages/starship/spec/+Page.tsx | 18 +++ examples/basic/pages/without-ssr/+Page.tsx | 21 +++ examples/basic/pages/without-ssr/+config.ts | 7 + pnpm-lock.yaml | 80 +++++++++- 14 files changed, 458 insertions(+), 11 deletions(-) create mode 100644 examples/basic/components/Counter.tsx delete mode 100644 examples/basic/pages/+Layout.ts create mode 100644 examples/basic/pages/+Layout.tsx create mode 100644 examples/basic/pages/stardust/+Layout.tsx create mode 100644 examples/basic/pages/stardust/+Page.tsx create mode 100644 examples/basic/pages/starship/+Layout.tsx create mode 100644 examples/basic/pages/starship/+Page.tsx create mode 100644 examples/basic/pages/starship/reviews/+Page.tsx create mode 100644 examples/basic/pages/starship/spec/+Page.tsx create mode 100644 examples/basic/pages/without-ssr/+Page.tsx create mode 100644 examples/basic/pages/without-ssr/+config.ts diff --git a/examples/basic/components/Counter.tsx b/examples/basic/components/Counter.tsx new file mode 100644 index 0000000..b8653ea --- /dev/null +++ b/examples/basic/components/Counter.tsx @@ -0,0 +1,10 @@ +import { createSignal } from "solid-js"; + +export function Counter() { + const [count, setCount] = createSignal(0); + return ( + + ); +} diff --git a/examples/basic/package.json b/examples/basic/package.json index 6c70d8b..47d2f66 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -9,7 +9,7 @@ "dependencies": { "node-fetch": "^3.3.2", "solid-js": "^1.8.16", - "vike": "^0.4.168", + "vike": "^0.4.176", "vike-solid": "link:vike-solid" }, "devDependencies": { diff --git a/examples/basic/pages/+Layout.ts b/examples/basic/pages/+Layout.ts deleted file mode 100644 index cd4125b..0000000 --- a/examples/basic/pages/+Layout.ts +++ /dev/null @@ -1 +0,0 @@ -export { Layout } from "../layouts/LayoutDefault"; diff --git a/examples/basic/pages/+Layout.tsx b/examples/basic/pages/+Layout.tsx new file mode 100644 index 0000000..ffe5388 --- /dev/null +++ b/examples/basic/pages/+Layout.tsx @@ -0,0 +1,76 @@ +import "../layouts/style.css"; +import logoUrl from "../assets/logo.svg"; +import { Link } from "../components/Link.js"; +import type { JSX } from "solid-js"; + +export function Layout(props: { children?: JSX.Element }) { + return ( +
+ + + Welcome + Data Fetching + Without SSR + Nested Layout 1 + Nested Layout 2 + + {props.children} +
+ ); +} + +function Sidebar(props: { children: JSX.Element }) { + return ( + + ); +} + +function Content(props: { children: JSX.Element }) { + return ( +
+
+ {props.children} +
+
+ ); +} + +function Logo() { + return ( +
+ + + +
+ ); +} diff --git a/examples/basic/pages/+config.ts b/examples/basic/pages/+config.ts index 2114188..d92b6fe 100644 --- a/examples/basic/pages/+config.ts +++ b/examples/basic/pages/+config.ts @@ -1,5 +1,5 @@ -import type { Config } from "vike/types"; import vikeSolid from "vike-solid/config"; +import type { Config } from "vike/types"; // Default config (can be overridden by pages) export default { diff --git a/examples/basic/pages/stardust/+Layout.tsx b/examples/basic/pages/stardust/+Layout.tsx new file mode 100644 index 0000000..67bd9e4 --- /dev/null +++ b/examples/basic/pages/stardust/+Layout.tsx @@ -0,0 +1,55 @@ +export { Layout }; + +import { createSignal, FlowProps } from "solid-js"; + +function Layout(props: FlowProps) { + return ( + <> +

Star Dust ✨

+

+ + This page uses the layout /pages/+Layout.tsx with a + nested layout /pages/stardust/+Layout.tsx. + +

+

+ This merely tests if Solid detects a "change" in the layout array + despite being the same length. +

+

+ State is preserved upon navigating within the nested layout.{" "} + +

+
+
+ {props.children} +
+ + ); +} + +function Link(props: any) { + // We set `keep-scroll-position` to tell Vike to preserve the current scroll position + return ( + + ); +} + +function Counter() { + const [count, setCount] = createSignal(0); + return ( + + ); +} diff --git a/examples/basic/pages/stardust/+Page.tsx b/examples/basic/pages/stardust/+Page.tsx new file mode 100644 index 0000000..a8c585b --- /dev/null +++ b/examples/basic/pages/stardust/+Page.tsx @@ -0,0 +1,15 @@ +export { Page }; + +function Page() { + return ( + <> +

Overview

+

+ Star Dust is a revolutionary new technology that has the potential to + change the way we explore and settle the vast expanse of our galaxy. By + radically reducing the cost of sending payloads to space, Star Dust is + helping SpaceX to achieve financial prosperity. +

+ + ); +} diff --git a/examples/basic/pages/starship/+Layout.tsx b/examples/basic/pages/starship/+Layout.tsx new file mode 100644 index 0000000..9ea9f95 --- /dev/null +++ b/examples/basic/pages/starship/+Layout.tsx @@ -0,0 +1,150 @@ +export { Layout }; + +import { createSignal, FlowProps } from "solid-js"; + +function Layout(props: FlowProps) { + return ( + <> +

Starship 🚀

+

+ + This page uses the layout /pages/+Layout.tsx with a + nested layout /pages/starship/+Layout.tsx. + +

+

+ + State is preserved upon navigating within the nested layout. Click on + the counter then on the links below: observe how the counter state is + preserved. + {" "} + +

+
+
+ Overview{" "} + Reviews{" "} + Tech Spec +
+
+ {props.children} +
+
+

+ + The scroll position is preserved when navigating the nested layout. + +

+ + + ); +} + +function Link(props: any) { + // We set `keep-scroll-position` to tell Vike to preserve the current scroll position + return ( + + ); +} + +function Counter() { + const [count, setCount] = createSignal(0); + return ( + + ); +} + +function DummyText() { + return ( + <> +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. +

+

+ In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam + dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. + Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean + leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam + lorem ante, dapibus in, viverra quis, feugiat a, tellus. +

+

+ Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus + eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing + sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, + hendrerit id, lorem. +

+

+ Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros + faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec + sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue + velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate + eleifend sapien. +

+

+ Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. + Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit + fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et + ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. + Nam pretium turpis et arcu. +

+

+ Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, + ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, + consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus + ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat + pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. +

+

+ Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, + pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in + justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec + neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. + Curabitur ligula sapien, tincidunt non, euismod vitae, posuere + imperdiet, leo. +

+

+ Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis + vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus + velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit + erat euismod orci, ac placerat dolor lectus quis orci. Phasellus + consectetuer vestibulum elit. +

+

+ Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. + Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque + posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, + nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. + Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam + sagittis. +

+

+ Suspendisse pulvinar, augue ac venenatis condimentum, sem libero + volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; + Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas + vestibulum mollis diam. Pellentesque ut neque. +

+ + ); +} diff --git a/examples/basic/pages/starship/+Page.tsx b/examples/basic/pages/starship/+Page.tsx new file mode 100644 index 0000000..635f60c --- /dev/null +++ b/examples/basic/pages/starship/+Page.tsx @@ -0,0 +1,15 @@ +export { Page }; + +function Page() { + return ( + <> +

Overview

+

The Starship will, at term, repalce all SpaceX's rocket models.

+

The mission: Make life multi planetary.

+

+ Starship drastically reduces the cost of sending payload to space, + ensuring SpaceX's financial prosperity. +

+ + ); +} diff --git a/examples/basic/pages/starship/reviews/+Page.tsx b/examples/basic/pages/starship/reviews/+Page.tsx new file mode 100644 index 0000000..86c09f8 --- /dev/null +++ b/examples/basic/pages/starship/reviews/+Page.tsx @@ -0,0 +1,17 @@ +export { Page }; + +function Page() { + return ( + <> +

Reviews

+

+ "The Starship brought me and my family to Mars safely." -- Anonymous + Family +

+

+ "A handful of Starships was enough to set up SkyNet. It worked like a + charm." -- Skynet Research +

+ + ); +} diff --git a/examples/basic/pages/starship/spec/+Page.tsx b/examples/basic/pages/starship/spec/+Page.tsx new file mode 100644 index 0000000..95568b9 --- /dev/null +++ b/examples/basic/pages/starship/spec/+Page.tsx @@ -0,0 +1,18 @@ +export { Page }; + +function Page() { + return ( + <> +

Spec

+ 
+        {[
+          "HEIGHT                  50 m / 164 ft",
+          "DIAMETER                9 m / 30 ft",
+          "PROPELLANT CAPACITY     1200 t / 2.6 Mlb",
+          "THRUST                  1500 tf / 3.2Mlbf",
+          "PAYLOAD CAPACITY        100-150 t orbit dependent",
+        ].join("\n")}
+
+ + ); +} diff --git a/examples/basic/pages/without-ssr/+Page.tsx b/examples/basic/pages/without-ssr/+Page.tsx new file mode 100644 index 0000000..c176c51 --- /dev/null +++ b/examples/basic/pages/without-ssr/+Page.tsx @@ -0,0 +1,21 @@ +export default Page; + +import { Counter } from "../../components/Counter"; + +function Page() { + // Will be printed only in the browser: + console.log("Rendering page without SSR"); + + return ( + <> +

Without SSR

+ This page is rendered only in the browser: + + + ); +} diff --git a/examples/basic/pages/without-ssr/+config.ts b/examples/basic/pages/without-ssr/+config.ts new file mode 100644 index 0000000..16c70ed --- /dev/null +++ b/examples/basic/pages/without-ssr/+config.ts @@ -0,0 +1,7 @@ +import type { Config } from 'vike/types' + +export default { + // https://vike.dev/ssr + ssr: false, + title: 'No SSR' +} satisfies Config diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d514d4e..bff1c83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,8 +20,8 @@ importers: specifier: ^1.8.16 version: 1.8.16 vike: - specifier: ^0.4.168 - version: 0.4.168(vite@5.2.9(@types/node@18.17.4)) + specifier: ^0.4.176 + version: 0.4.176(vite@5.2.9(@types/node@20.14.2)) vike-solid: specifier: link:../../vike-solid version: link:../../vike-solid @@ -31,7 +31,7 @@ importers: version: 5.4.5 vite: specifier: ^5.2.9 - version: 5.2.9(@types/node@18.17.4) + version: 5.2.9(@types/node@20.14.2) examples/ssr-spa: dependencies: @@ -40,7 +40,7 @@ importers: version: 1.8.16 vike: specifier: ^0.4.168 - version: 0.4.168(vite@5.2.9(@types/node@18.17.4)) + version: 0.4.168(vite@5.2.9(@types/node@20.14.2)) vike-solid: specifier: link:../../vike-solid version: link:../../vike-solid @@ -50,7 +50,7 @@ importers: version: 5.4.5 vite: specifier: ^5.2.9 - version: 5.2.9(@types/node@18.17.4) + version: 5.2.9(@types/node@20.14.2) vike-solid: dependencies: @@ -1448,6 +1448,9 @@ packages: '@types/node@18.17.4': resolution: {integrity: sha512-ATL4WLgr7/W40+Sp1WnNTSKbgVn6Pvhc/2RHAdt8fl6NsQyp4oPCi2eKcGOvA494bwf1K/W6nGgZ9TwDqvpjdw==} + '@types/node@20.14.2': + resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==} + '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -1456,6 +1459,11 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + acorn@8.12.0: + resolution: {integrity: sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==} + engines: {node: '>=0.4.0'} + hasBin: true + ansi-styles@3.2.1: resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} engines: {node: '>=4'} @@ -1604,6 +1612,9 @@ packages: es-module-lexer@1.5.0: resolution: {integrity: sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==} + es-module-lexer@1.5.3: + resolution: {integrity: sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==} + esbuild@0.19.12: resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} engines: {node: '>=12'} @@ -2081,6 +2092,9 @@ packages: ufo@1.3.2: resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==} + undici-types@5.26.5: + resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + unicode-canonical-property-names-ecmascript@2.0.0: resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==} engines: {node: '>=4'} @@ -3494,10 +3508,17 @@ snapshots: '@types/node@18.17.4': {} + '@types/node@20.14.2': + dependencies: + undici-types: 5.26.5 + optional: true + '@types/resolve@1.20.2': {} acorn@8.11.3: {} + acorn@8.12.0: {} + ansi-styles@3.2.1: dependencies: color-convert: 1.9.3 @@ -3662,6 +3683,8 @@ snapshots: es-module-lexer@1.5.0: {} + es-module-lexer@1.5.3: {} + esbuild@0.19.12: optionalDependencies: '@esbuild/aix-ppc64': 0.19.12 @@ -4184,6 +4207,9 @@ snapshots: ufo@1.3.2: {} + undici-types@5.26.5: + optional: true + unicode-canonical-property-names-ecmascript@2.0.0: {} unicode-match-property-ecmascript@2.0.0: @@ -4203,7 +4229,7 @@ snapshots: validate-html-nesting@1.2.2: {} - vike@0.4.168(vite@5.2.9(@types/node@18.17.4)): + vike@0.4.168(vite@5.2.9(@types/node@20.14.2)): dependencies: '@brillout/import': 0.2.3 '@brillout/json-serializer': 0.5.8 @@ -4217,9 +4243,13 @@ snapshots: fast-glob: 3.3.2 sirv: 2.0.4 source-map-support: 0.5.21 - vite: 5.2.9(@types/node@18.17.4) + vite: 5.2.9(@types/node@20.14.2) +<<<<<<< HEAD vike@0.4.176(vite@5.3.1(@types/node@18.17.4)): +======= + vike@0.4.176(vite@5.2.13(@types/node@18.17.4)): +>>>>>>> 86906ac (add nested layout example) dependencies: '@brillout/import': 0.2.3 '@brillout/json-serializer': 0.5.10 @@ -4236,7 +4266,28 @@ snapshots: source-map-support: 0.5.21 vite: 5.3.1(@types/node@18.17.4) +<<<<<<< HEAD vite-plugin-solid@2.10.2(solid-js@1.8.17)(vite@5.3.1(@types/node@18.17.4)): +======= + vike@0.4.176(vite@5.2.9(@types/node@20.14.2)): + dependencies: + '@brillout/import': 0.2.3 + '@brillout/json-serializer': 0.5.10 + '@brillout/picocolors': 1.0.13 + '@brillout/require-shim': 0.1.2 + '@brillout/vite-plugin-server-entry': 0.4.6 + acorn: 8.12.0 + cac: 6.7.14 + es-module-lexer: 1.5.3 + esbuild: 0.19.12 + fast-glob: 3.3.2 + semver: 7.6.2 + sirv: 2.0.4 + source-map-support: 0.5.21 + vite: 5.2.9(@types/node@20.14.2) + + vite-plugin-solid@2.10.2(solid-js@1.8.17)(vite@5.2.13(@types/node@18.17.4)): +>>>>>>> 86906ac (add nested layout example) dependencies: '@babel/core': 7.24.7 '@types/babel__core': 7.20.5 @@ -4249,15 +4300,28 @@ snapshots: transitivePeerDependencies: - supports-color +<<<<<<< HEAD vite@5.2.9(@types/node@18.17.4): +======= + vite@5.2.13(@types/node@18.17.4): dependencies: esbuild: 0.20.2 postcss: 8.4.38 - rollup: 4.14.3 + rollup: 4.18.0 optionalDependencies: '@types/node': 18.17.4 fsevents: 2.3.3 + vite@5.2.9(@types/node@20.14.2): +>>>>>>> 86906ac (add nested layout example) + dependencies: + esbuild: 0.20.2 + postcss: 8.4.38 + rollup: 4.14.3 + optionalDependencies: + '@types/node': 20.14.2 + fsevents: 2.3.3 + vite@5.3.1(@types/node@18.17.4): dependencies: esbuild: 0.21.5