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 aa8296b..d7ce5c0 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: @@ -98,8 +98,8 @@ importers: specifier: ^5.4.5 version: 5.4.5 vike: - specifier: ^0.4.174 - version: 0.4.174(vite@5.2.13(@types/node@18.17.4)) + specifier: ^0.4.176 + version: 0.4.176(vite@5.2.13(@types/node@18.17.4)) vite: specifier: ^5.2.13 version: 5.2.13(@types/node@18.17.4) @@ -1310,6 +1310,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==} @@ -1318,6 +1321,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'} @@ -1466,6 +1474,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'} @@ -1938,6 +1949,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'} @@ -1974,8 +1988,8 @@ packages: react-streaming: optional: true - vike@0.4.174: - resolution: {integrity: sha512-RgicUKxcm6SsOoyJWx3W853qvS8vigZjdKc2OzrGMxSfmvwHAzWtYO69MELWB8jZRDmALwDOuzCpmHUV2n2fbw==} + vike@0.4.176: + resolution: {integrity: sha512-myaTgwzeNOeC/ZrNrrJrPbzJrTNj/d/sTD1h7oXaqYUdNEaYDAJrZBWerIZXPRyDfH6GW+Mxby4bTthAq3Uovw==} engines: {node: '>=18.0.0'} hasBin: true peerDependencies: @@ -3282,10 +3296,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 @@ -3450,6 +3471,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 @@ -3946,6 +3969,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: @@ -3965,7 +3991,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 @@ -3979,9 +4005,9 @@ 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) - vike@0.4.174(vite@5.2.13(@types/node@18.17.4)): + vike@0.4.176(vite@5.2.13(@types/node@18.17.4)): dependencies: '@brillout/import': 0.2.3 '@brillout/json-serializer': 0.5.10 @@ -3998,6 +4024,23 @@ snapshots: source-map-support: 0.5.21 vite: 5.2.13(@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)): dependencies: '@babel/core': 7.24.7 @@ -4020,13 +4063,13 @@ snapshots: '@types/node': 18.17.4 fsevents: 2.3.3 - vite@5.2.9(@types/node@18.17.4): + vite@5.2.9(@types/node@20.14.2): dependencies: esbuild: 0.20.2 postcss: 8.4.38 rollup: 4.14.3 optionalDependencies: - '@types/node': 18.17.4 + '@types/node': 20.14.2 fsevents: 2.3.3 vitefu@0.2.5(vite@5.2.13(@types/node@18.17.4)):