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 ( +
+
+ 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.{" "}
+
+ 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 ( + <> +
+
+ 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.
+ {" "}
+
+ + The scroll position is preserved when navigating the nested layout. + +
++ 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 ( + <> +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 ( + <> ++ "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 ( + <> ++ {[ + "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 ( + <> +