Merge branch 'main' into vinxi-51-rpc-info

solidjs · Jan 28, 2024 · 7d12228 · 7d12228
2 parents e1658ff + 5d76739
commit 7d12228
Show file tree

Hide file tree

Showing 67 changed files with 2,373 additions and 799 deletions.
diff --git a/.changeset/README.md b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/.changeset/hip-hounds-tell.md b/.changeset/hip-hounds-tell.md
@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+fix #1278 wrong types for onBeforeResponse middleware
diff --git a/README.md b/README.md
@@ -4,9 +4,9 @@
 
 # SolidStart
 
-### Start has just entered a new Beta Phase ###
+### Start has just entered a new Beta Phase
 
-v0.4.x marks a significant change in the project. Please check the updated docs and example projects to see how things have changed. A summary of the chances can be found in the [RFC](https://github.com/solidjs/solid-start/discussions/1052).
+v0.4.x marks a significant change in the project. Please check the updated docs and example projects to see how things have changed. A summary of the changes can be found in the [RFC](https://github.com/solidjs/solid-start/discussions/1052).
 
 ------------------------------------
 
@@ -19,9 +19,9 @@ This is the home of the Solid app framework. This is still a **work in progress*
   - Server-side rendering (SSR)
   - Streaming SSR
   - Client-side rendering (CSR)
-  - Static Site Generation (SSG)
+  - Static site generation (SSG)
 - Streaming
-- Build optimizations with Code splitting, tree shaking and dead code elimination
+- Build optimizations with code splitting, tree shaking and dead code elimination
 - API Routes
 - Built on Web standards like Fetch, Streams, and WebCrypto
 - Adapters for deployment to all popular platforms
@@ -54,7 +54,7 @@ bun run dev
 
 ### Development
 
-You should use a node version manager [compatible with `.node-version`](https://stackoverflow.com/a/62978089/565877) ([asdf-vm](https://asdf-vm.com/) is a great option mac/linux users)
+You should use a Node.js version manager [compatible with `.node-version`](https://stackoverflow.com/a/62978089/565877) ([asdf-vm](https://asdf-vm.com/) is a great option macOS/Linux users)
 
 The monorepo uses `pnpm` as the package manager. To install `pnpm`, run the following command in your terminal.
 
@@ -67,9 +67,9 @@ Run `pnpm install` to install all the dependencies for the packages and examples
 <details>
 <summary><h4>Monorepo & <code>project.json</code> <code>"workspace"</code> support</h4></summary>
 
-If you are using Solid Start within a monorepo that takes advantage of the `package.json` `"workspaces"` property (e.g. [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)) with hoisted dependencies (the default for yarn), you must include `solid-start` within the optional `"nohoist"` (for yarn v2 or higher, see further down for instructions) workspaces property.
+If you are using SolidStart within a monorepo that takes advantage of the `package.json` `"workspaces"` property (e.g. [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)) with hoisted dependencies (the default for Yarn), you must include `solid-start` within the optional `"nohoist"` (for Yarn v2 or higher, see further down for instructions) workspaces property.
 
-- _In the following, "workspace root" refers to the root of your repository while "project root" refers to the root of a child package within your repository_
+- _In the following, "workspace root" refers to the root of your repository while "project root" refers to the root of a child package within your repository._
 
 For example, if specifying `"nohoist"` options from the workspace root (i.e. for all packages):
 

diff --git a/docs/app.tsx b/docs/app.tsx
@@ -59,10 +59,10 @@ const socials = [
 
 function SocialIcon(props) {
   return (
-    <li class="mx-2">
+    <li class="mx-1.5">
       <a href={props.href} rel="noopener" target="_blank">
         <span class="sr-only">{props.alt}</span>
-        <svg viewBox="0 0 24 24" class="h-6 opacity-60 transition hover:opacity-80 opacity-40">
+        <svg viewBox="0 0 24 24" class="h-6 transition hover:opacity-80 opacity-40">
           <path fill="currentColor" d={props.icon} />
         </svg>
       </a>
@@ -75,7 +75,7 @@ function Header() {
     <header class="relative z-10 col-span-3 col-start-1 row-start-1 flex px-8 py-2 shadow-md shadow-gray-100 md:z-50">
       <div class="flex w-full justify-between">
         <a href="/">
-          <div class="flex space-x-3">
+          <div class="flex space-x-3 translate-y-[-2px]">
             <img src="/logo.svg" class="h-9 w-9 scale-[0.94] translate-y-[2px] translate-x-[4px]" />
             <div class="mt-2 hidden text-xl uppercase md:block -translate-y-[1px]">
               <span class="tracking-wide">Solid</span>
@@ -252,7 +252,7 @@ export default function Root() {
           <input type="checkbox" class="peer hidden" name="sidebar-toggle" id="sidebar-toggle" />
 
           <label
-            class="bg-solid-medium reveal-delay fixed right-3 top-20 cursor-pointer rounded-lg text-white opacity-0 transition duration-500 peer-checked:rotate-90 md:hidden"
+            class="bg-solid-medium reveal-delay fixed right-10 top-[86px] cursor-pointer rounded-lg text-white opacity-0 transition ease-out duration-300 peer-checked:rotate-90 md:hidden"
             for="sidebar-toggle"
           >
             <svg class="h-7 w-7" viewBox="0 0 24 24" style="fill: none; stroke: currentcolor;">

diff --git a/docs/components/components.tsx b/docs/components/components.tsx
@@ -67,7 +67,7 @@ export const components = {
     <div>
       <Show when={props.filename?.length > 5}>
         <div
-          class={`px-3 py-1 w-full text-xs bg-slate-500 rounded-t text-slate-100 ${props.className}`}
+          class={`px-3 py-1 w-full text-xs bg-slate-700 font-mono rounded-t text-slate-300 ${props.className}`}
         >
           {props.filename}
         </div>

diff --git a/docs/components/index.css b/docs/components/index.css
@@ -63,6 +63,10 @@ pre {
   /* border: 1px solid #ddd; */
 }
 
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  border-radius: 0.25rem;
+}
+
 .dark .prose pre {
   border-color: #5d5d5d;
 }
@@ -82,16 +86,22 @@ pre {
 }
 
 .prose h2 {
-  margin-top: 100px;
+  margin-top: 80px;
   font-size: 1.7rem;
-  letter-spacing: 0.1px;
-  padding-bottom: 22px;
+  letter-spacing: 0.25px;
+  padding-bottom: 15px;
+  line-height: 1.6;
 }
 
+.prose h1 + h2, .prose h2 + h3, .prose h3 + h4 {
+  margin-top: 15px
+} 
+
 .prose h1 {
-  font-size: 1.8rem;
-  letter-spacing: 0.1px;
+  font-size: 2.2rem;
+  letter-spacing: 0.3px;
   padding-bottom: 22px;
+  line-height: 1.3;
 }
 
 .prose h3 {
@@ -370,7 +380,7 @@ h4 {
 }
 
 .snippet .line.highlight {
-  @apply bg-slate-50 bg-opacity-20;
+  @apply bg-slate-50 bg-opacity-[9%];
 }
 
 .line {
@@ -385,6 +395,10 @@ h4 {
   @apply overflow-x-scroll;
 }
 
+.prose pre code {
+  font-size: 1rem;
+}
+
 .not-prose :where(code):not(:where(pre *)) {
   @apply p-0.5;
 }

diff --git a/docs/routes/api/HttpStatusCode.md b/docs/routes/api/HttpStatusCode.md
@@ -53,7 +53,7 @@ You can throw errors from inside these fetchers. These will be caught by the nea
 
 Keep in mind, when streaming responses (`renderStream`), the HTTP Status can only be included if added before the stream first flushed. Be sure to add `deferStream` to any resources calls that need to be loaded before responding.
 
-```tsx twoslash {8,18-23} filename="routes/[house].tsx"
+```tsx twoslash {7,17-19, 15, 23} filename="routes/[house].tsx"
 import { Show, ErrorBoundary } from "solid-js";
 import { cache, createAsync } from "@solidjs/router";
 import { HttpStatusCode } from "@solidjs/start";

diff --git a/docs/routes/api/server.md b/docs/routes/api/server.md
@@ -30,7 +30,7 @@ const logHello = async (message: string) => {
 
 To create a function that only runs on the server, insert `"use server"` directive at the top of the function.
 
-```tsx twoslash {4-6}
+```tsx twoslash {2}
 const logHello = async (message: string) => {
   "use server";
   console.log(message);

diff --git a/docs/routes/core-concepts/actions.md b/docs/routes/core-concepts/actions.md
@@ -59,6 +59,7 @@ In many cases, after submitting data the server sends some data back as well. Us
 
 ```tsx twoslash
 import { action, useAction, useSubmission } from "@solidjs/router";
+
 const echo = action(async (message: string) => {
   await new Promise((resolve, reject) => setTimeout(resolve, 1000));
   return message;
@@ -120,7 +121,7 @@ Sometimes we need to make sure our action _only_ runs on the server. This is use
 
 To do this, put a `"use server";` directive in your action function:
 
-```tsx twoslash
+```tsx twoslash {4}
 import { action, redirect } from "@solidjs/router";
 
 const isAdmin = action(async (formData: FormData) => {

diff --git a/docs/routes/core-concepts/data-loading.mdx b/docs/routes/core-concepts/data-loading.mdx
@@ -7,16 +7,17 @@ active: true
 
 # Data loading
 
-What's a modern app without some data to power it. SolidStart aims to make it easy to load data from your data sources. It will help you keep your UI updated with your data. For most of your data requirements, you will likely be using the route to decide what data to load.
+What's a modern app without some data to power it? SolidStart aims to make it easy to load data from your data sources. It will help you keep your UI updated with your data. For most of your data requirements, you will likely be using the route to decide what data to load.
 
-The URL is the primary way of navigating around your app. SolidStart already has nested routing to help structure your app's UI in a hierarchical way, so that you can share layouts.
+The URL is the primary way of navigating around your app. SolidStart has nested routing to help structure your app's UI in a hierarchical way, so that you can share layouts.
 
 Solid has a [`createResource`][createResource] primitive that takes an async function and returns a [signal][signal] from it. It's a great starting place for your data needs. It integrates with [`Suspense`][Suspense] and [`ErrorBoundary`][ErrorBoundary] to help you manage your lifecycle. Let's take a look at how we can use this to load data from a third party API for our app.
 
-```tsx twoslash
+```tsx twoslash {6-9}
 import { For, createResource } from "solid-js";
 
 type Student = { name: string; house: string };
+
 export default function Page() {
   const [students] = createResource(async () => {
     const response = await fetch("https://hogwarts.deno.dev/students");
@@ -31,7 +32,7 @@ However, fetching inside your components can cause unnecessary waterfalls especi
 
 Libraries like Tanstack Query enable this but for the example below we will be using the data in APIs in `@solidjs/router`.
 
-```tsx twoslash filename="/routes/students.tsx"
+```tsx twoslash filename="/routes/students.tsx" {6, 9, 12}
 import { For } from "solid-js";
 import { createAsync, cache } from "@solidjs/router";
 
@@ -66,7 +67,7 @@ The primary advantage of being a full-stack Javascript framework is that its eas
 
 It could be database access, or internal APIs, etc. It could sit within your functions where you need to use your server. We use `"use server";` for this. It's a special comment that tells the bundler to create an RPC and not include the code in the client bundle .
 
-```tsx twoslash filename="/routes/students.tsx"
+```tsx twoslash filename="/routes/students.tsx" {7}
 const hogwarts = {
   students: {
     list() {

diff --git a/docs/routes/core-concepts/route-prerendering.mdx b/docs/routes/core-concepts/route-prerendering.mdx
@@ -3,10 +3,11 @@ section: core-concepts
 title: Route Pre-rendering
 order: 5
 ---
+# Route Pre-rendering
 
 It can be beneficial to render pages at build time instead of on demand. We can accomplish this by passing
 a prerender option to our SolidStart server. The simplest way to get started is pass a list of routes to be
-pre-rendererd to the `routes` option.
+pre-rendered to the `routes` option.
 
 ```js
 import { defineConfig } from "@solidjs/start/config";

diff --git a/docs/routes/core-concepts/state-management.mdx b/docs/routes/core-concepts/state-management.mdx
@@ -3,6 +3,7 @@ section: core-concepts
 title: State Management
 order: 100
 ---
+# State Management
 
 There are many different ways to store and manage state in a Solid Start app. In this section we will discuss some of the most common ways to manage state in a project.
 

diff --git a/examples/bare/package.json b/examples/bare/package.json
@@ -7,9 +7,9 @@
     "start": "vinxi start"
   },
   "dependencies": {
-    "@solidjs/start": "^0.4.8",
-    "solid-js": "^1.8.10",
-    "vinxi": "0.1.1"
+    "@solidjs/start": "^0.4.10",
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.1.6"
   },
   "engines": {
     "node": ">=18"

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.8",
-    "@solidjs/start": "^0.4.8",
-    "solid-js": "^1.8.10",
-    "vinxi": "0.1.1"
+    "@solidjs/router": "^0.10.10",
+    "@solidjs/start": "^0.4.10",
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.1.6"
   },
   "engines": {
     "node": ">=18"

diff --git a/examples/experiments/package.json b/examples/experiments/package.json
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.8",
-    "@solidjs/start": "^0.4.8",
-    "solid-js": "^1.8.10",
-    "vinxi": "0.1.1"
+    "@solidjs/router": "^0.10.10",
+    "@solidjs/start": "^0.4.10",
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.1.6"
   },
   "engines": {
     "node": ">=18"

diff --git a/examples/experiments/src/routes/index.tsx b/examples/experiments/src/routes/index.tsx
@@ -1,15 +1,22 @@
 import { Title } from "@solidjs/meta";
-import { clientOnly } from "@solidjs/start";
+import { json } from "@solidjs/router";
+import { clientOnly, GET } from "@solidjs/start";
 import Counter from "~/components/Counter";
 const BreaksOnServer = clientOnly(() => import("~/components/BreaksOnServer"));
 
-async function hello(name: string) {
+const hello = GET(async (name: string) => {
   "use server";
-  return "hello " + name;
-}
+  return json(
+    { hello: new Promise<string>(r => setTimeout(() => r(name), 1000)) },
+    { headers: { "cache-control": "max-age=60" } }
+  );
+});
 
 export default function Home() {
-  hello("John").then(console.log);
+  hello("John").then(async v => {
+    console.log(v);
+    console.log(await v.hello);
+  });
   return (
     <main>
       <Title>Hello World</Title>

diff --git a/examples/experiments/src/routes/漢字.tsx b/examples/experiments/src/routes/漢字.tsx
@@ -0,0 +1,3 @@
+export default function() {
+  return <section>漢字</section>
+}
diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -7,10 +7,10 @@
     "start": "vinxi start"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.8",
-    "@solidjs/start": "^0.4.8",
-    "solid-js": "^1.8.10",
-    "vinxi": "0.1.1"
+    "@solidjs/router": "^0.10.10",
+    "@solidjs/start": "^0.4.10",
+    "solid-js": "^1.8.12",
+    "vinxi": "^0.1.6"
   },
   "engines": {
     "node": ">=18"

diff --git a/examples/todomvc/.data/todos/counter b/examples/todomvc/.data/todos/counter
diff --git a/examples/todomvc/.data/todos/data b/examples/todomvc/.data/todos/data
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
@@ -7,11 +7,11 @@
     "start": "vinxi start"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.8",
-    "@solidjs/start": "^0.4.8",
-    "solid-js": "^1.8.10",
+    "@solidjs/router": "^0.10.10",
+    "@solidjs/start": "^0.4.10",
+    "solid-js": "^1.8.12",
     "unstorage": "1.10.1",
-    "vinxi": "0.1.1"
+    "vinxi": "^0.1.6"
   },
   "engines": {
     "node": ">=18"