Merge pull request #111 from vikejs/phonzammi/feat-vike-solid-query2

feat: new extension `vike-solid-query`

.gitignore

@@ -1,106 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-.idea/
+/node_modules/
+.pnpm-debug.log

CONTRIBUTING.md

@@ -5,7 +5,7 @@
 Build `vike-solid`:
 
 ```bash
-git clone git@github.com:vikejs/vike-solid
+git clone https://github.com/vikejs/vike-solid.git
 cd vike-solid/ && pnpm install
 pnpm build
 cd ../

README.md

@@ -0,0 +1,9 @@
+[Vike extensions](https://vike.dev/extensions) for [SolidJs](https://www.solidjs.com).
+
+- `vike-solid` (SolidJs integration)
+  - Docs: [vike.dev/vike-solid](https://vike.dev/vike-solid)
+  - Version history: [CHANGELOG.md](packages/vike-solid/CHANGELOG.md)
+  - Source code: [packages/vike-solid/](packages/vike-solid)
+
+> [!NOTE]
+> The source code is [small, simple, and highly polished](https://vike.dev/vike-solid#under-the-hood). Contributing is easy and welcome, see [CONTRIBUTING.md](CONTRIBUTING.md) to get started.

examples/full/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/full/package.json

@@ -10,7 +10,7 @@
     "node-fetch": "^3.3.2",
     "solid-js": "^1.8.21",
     "vike": "^0.4.191",
-    "vike-solid": "link:vike-solid"
+    "vike-solid": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.5.4",

examples/minimal/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/minimal/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "solid-js": "^1.8.21",
     "vike": "^0.4.191",
-    "vike-solid": "link:vike-solid"
+    "vike-solid": "workspace:*"
   },
   "devDependencies": {
     "vite": "^5.4.1"

examples/solid-query/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/solid-query/README.md

@@ -0,0 +1,8 @@
+Example of using `vike-solid-query`.
+
+```bash
+git clone [email protected]:vikejs/vike-solid
+cd vike-solid/examples/solid-query/
+npm install
+npm run dev
+```

examples/solid-query/layouts/style.css

@@ -0,0 +1,29 @@
+/* Links */
+a {
+  text-decoration: none;
+}
+#sidebar a {
+  padding: 2px 10px;
+  margin-left: -10px;
+}
+#sidebar a.is-active {
+  background-color: #eee;
+}
+
+/* Reset */
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Page Transition Anmiation */
+#page-content {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+body.page-is-transitioning #page-content {
+  opacity: 0;
+}

examples/solid-query/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "preview": "vite build && vite preview",
+    "test": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/solid-query": "5.52.2",
+    "node-fetch": "^3.3.2",
+    "solid-js": "^1.8.22",
+    "vike": "^0.4.191",
+    "vike-solid": "workspace:^",
+    "vike-solid-query": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2"
+  },
+  "type": "module"
+}

examples/solid-query/pages/+Head.tsx

@@ -0,0 +1,9 @@
+import logoUrl from "../assets/logo.svg";
+
+export function Head() {
+  return (
+    <>
+      <link rel="icon" href={logoUrl} />
+    </>
+  );
+}

examples/solid-query/pages/+Layout.tsx

@@ -0,0 +1,70 @@
+import "../layouts/style.css";
+import logoUrl from "../assets/logo.svg";
+import type { JSX } from "solid-js";
+
+export function Layout(props: { children?: JSX.Element }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        "max-width": "900px",
+        margin: "auto",
+      }}
+    >
+      <Sidebar>
+        <Logo />
+      </Sidebar>
+      <Content>{props.children}</Content>
+    </div>
+  );
+}
+
+function Sidebar(props: { children: JSX.Element }) {
+  return (
+    <div
+      id="sidebar"
+      style={{
+        padding: "20px",
+        "flex-shrink": 0,
+        display: "flex",
+        "flex-direction": "column",
+        "line-height": "1.8em",
+        "border-right": "2px solid #eee",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function Content(props: { children: JSX.Element }) {
+  return (
+    <div id="page-container">
+      <div
+        id="page-content"
+        style={{
+          padding: "20px",
+          "padding-bottom": "50px",
+          "min-height": "100vh",
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        "margin-top": "20px",
+        "margin-bottom": "10px",
+      }}
+    >
+      <a href="/">
+        <img src={logoUrl} height={64} width={64} />
+      </a>
+    </div>
+  );
+}

examples/solid-query/pages/+config.ts

@@ -0,0 +1,13 @@
+import vikeSolid from "vike-solid/config";
+import vikeSolidQuery from "vike-solid-query/config";
+import type { Config } from "vike/types";
+
+// Default config (can be overridden by pages)
+export default {
+  title: "My Vike + Solid App", // <title>
+
+  passToClient: ["routeParams"],
+  stream: true,
+  injectScriptsAt: "STREAM",
+  extends: [vikeSolid, vikeSolidQuery],
+} satisfies Config;

examples/solid-query/pages/index/+Page.tsx

@@ -0,0 +1,18 @@
+import { Counter } from "./Counter";
+import { Movies } from "./Movies";
+
+export function Page() {
+  return (
+    <>
+      <h1>My Vike + React app</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive while loading. <Counter />
+        </li>
+      </ul>
+      <Movies />
+    </>
+  );
+}

examples/solid-query/pages/index/@id/+Page.tsx

@@ -0,0 +1,8 @@
+import { usePageContext } from "vike-solid/usePageContext";
+import { Movie } from "./Movie";
+
+export function Page() {
+  const pageContext = usePageContext();
+  const id = pageContext.routeParams["id"];
+  return <Movie id={id} />;
+}