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..da4bd36 100644
--- a/examples/basic/package.json
+++ b/examples/basic/package.json
@@ -8,8 +8,8 @@
},
"dependencies": {
"node-fetch": "^3.3.2",
- "solid-js": "^1.8.16",
- "vike": "^0.4.168",
+ "solid-js": "^1.8.17",
+ "vike": "^0.4.177",
"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/layouts/LayoutDefault.tsx b/examples/basic/pages/+Layout.tsx
similarity index 88%
rename from examples/basic/layouts/LayoutDefault.tsx
rename to examples/basic/pages/+Layout.tsx
index 3b54daf..ffe5388 100644
--- a/examples/basic/layouts/LayoutDefault.tsx
+++ b/examples/basic/pages/+Layout.tsx
@@ -1,4 +1,4 @@
-import "./style.css";
+import "../layouts/style.css";
import logoUrl from "../assets/logo.svg";
import { Link } from "../components/Link.js";
import type { JSX } from "solid-js";
@@ -16,6 +16,9 @@ export function Layout(props: { children?: JSX.Element }) {
Welcome
Data Fetching
+ Without SSR
+ Nested Layout 1
+ Nested Layout 2
{props.children}
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.
+
+
+ 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.
+