Updates to Experimental features and bug fixes (#960)

* feat: internal-fetch more powerful * fix (scss): fix scss/sass support for dev inline styles * add example movies * example(movies): add more routes for /movie and /tv * example(movies): add more pages * movies demo * fix(islands): css, prefetching, default A island * enable islands for app * clean up logging * fix movies * bug fix: nested routing in islands server router * css assets for islands router * feat: persisted islands!! * experiment: updated movies app to use folder-based routing * app layout as layout.tsx * remove logging * layout support * movies example: use folder based routing * Added PersonInfo and ExternalLinks components * Removed v tags from vue and added conditional renderings of elements * Added in conditional to not render ListingCarousel if items does not have length * Added debounce to the search for movies * Added more details and formatting to MovieInfo and Hero * Removed stray console.log * cleanup * move PersonInfo inside route and use unplugin icons * example(movies): fix external links and image sizes * movies: fix styles scss import * fix some implementation details for islands * workers adapter seed function * notes with server-components demo * example(notes): remove delay * only preload used islands * examples(note): move components to directory * fix: navigate not changing url state * example(movies): fix search param feature * a fix * notes example update * experimental islands mutation * multiple JSX slots * islands -> server components * islands -> example * fix * Created Poster component to add 3d effect to Posters * Fix splitProps * Update islands path from env manifest. Update vite plugin transform and load functions for islands. * Add solid logo to nav bar. * fix islands build with use client * add dark mode toggle * notes example cleanup * cleanup client components * Added Netlify adapter * Remove workspace reference * export things from root properly * fix server-routing, use partial rendering on the server * fix movie example * Small css improvements * Update paths for island transforms in vite plugin in dev mode. * Update paths for island references in islandsManifest generation in bin.cjs. * Add images to movies details page. * fix stuff * fix auto detect adapter for now * clean up logs * clean up data fetching * fix route actions * fix merge * fix islands * mounting fix * fix islands inside islands * prisma example * package json fixes * Update broken paths on Windows in dev mode. Add missing if statement in internalFetch. Change server-router to use useRequest instead of useServerContext. * fix typescript and new durable object API * fix notes durable object example * migrate notes to server components * in progress: fix types (cloudlfare durable objects are fucked up) * typescript jump and bug fixes * ignore vite compiled configs * ssr configurable with `render` entry * islands type fixes * notes * cleanup manifest code * fix islands router * fix islands stuff * remove nprogress * fix adapters * better images for movies demo * setup for streaming, fix accessibility * add back loading indicator * small tweak to loader * movies updates * fix dev and build * fix DEBUG * fix tests * fix SPA client build failing because of whitespace in path (#926) * RouteAction returns undefined in case of error (#927) * docs/fix-trpc-example (#931) Co-authored-by: Ryan Carniato <[email protected]> * Update createRouteAction.md (#939) yer I love open source * fix(data): update Form types in createRouteAction.tsx (#936) Co-authored-by: Ryan Carniato <[email protected]> * 0.2.27 * remove layout support * remove more layouts * fix lock * fix bad merge on server functions * fix notes demo * bump example versions * fix types * possibly temp fix for tests until find better solution * try deno specific internalFetch * better deno fix * fix missing reference * fix internalFetch * fixup cloudflare internalFetch * add cloudflare internal fetch early exit * update Solid to 1.7.9 (fix movies demo) * normalize entries, fix docs * fix docs build errors --------- Co-authored-by: Nikhil Saraf <[email protected]> Co-authored-by: Maxi Ferreira <[email protected]> Co-authored-by: TannerScadden <[email protected]> Co-authored-by: Muhammad Zaki <[email protected]> Co-authored-by: Paolo Ricciuti <[email protected]> Co-authored-by: dev-rb <[email protected]> Co-authored-by: David Di Biase <[email protected]> Co-authored-by: Davide <[email protected]> Co-authored-by: Vladimir Kutepov <[email protected]> Co-authored-by: Jordan Gibbings <[email protected]> Co-authored-by: Felix Zeller <[email protected]> Co-authored-by: Casey Baggz <[email protected]>
solidjs · Aug 8, 2023 · 7caeca4 · 7caeca4
1 parent 443955f
commit 7caeca4
Show file tree

Hide file tree

Showing 238 changed files with 11,421 additions and 3,665 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,5 @@ netlify
 # miniflare cache
 .mf
 .vercel
+
+vite.config.ts.timestamp*
diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
@@ -17,7 +17,7 @@ export function useTableOfContents() {
   );
 }
 
-export default function TableOfContents() {
+export function TableOfContents() {
   const headings = useTableOfContents();
 
   return (

diff --git a/components/components.tsx b/components/components.tsx
@@ -1,9 +1,8 @@
 import { Title as MetaTitle } from "@solidjs/meta";
 import { createUniqueId, mergeProps, Show } from "solid-js";
-import { unstable_island } from "solid-start";
 import "tippy.js/dist/tippy.css";
 import A from "./A";
-const Tooltip = unstable_island(() => import("./tooltip"));
+import Tooltip from "./tooltip";
 
 export const components = {
   strong: props => <span class="font-bold">{props.children}</span>,

diff --git a/components/docs.ts b/components/docs.ts
diff --git a/docs.root.tsx b/docs.root.tsx
@@ -2,6 +2,7 @@
 import { createMemo, For, Show, Suspense } from "solid-js";
 import { MDXProvider } from "solid-mdx";
 import {
+  A,
   Body,
   FileRoutes,
   Head,
@@ -11,15 +12,11 @@ import {
   Routes,
   Scripts,
   Stylesheet,
-  Title,
-  unstable_island
+  Title
 } from "solid-start";
 import { ErrorBoundary } from "solid-start/error-boundary";
 import "./components/index.css";
 
-const IslandA = unstable_island(() => import("./components/A"));
-const TableOfContents = unstable_island(() => import("./components/TableOfContents"));
-
 export const mods = /*#__PURE__*/ import.meta.glob<
   true,
   any,
@@ -132,6 +129,7 @@ function Nav() {
         order: number;
         subsection: string;
         href: string;
+        frontMatter: any;
       }[] & { subsection?: Set<string>; title?: string; order?: number };
     } = {};
 
@@ -198,15 +196,15 @@ function Nav() {
                         <For each={r.filter(i => i.subsection === s)}>
                           {({ title, path, href, frontMatter }) => (
                             <li class="ml-2">
-                              <IslandA
+                              <A
                                 activeClass="text-primary"
                                 inactiveClass="text-gray-500"
                                 href={href}
                               >
                                 <span class="block ml-4 pb-2 text-sm break-words hover:text-gray-500 dark:hover:text-gray-300">
                                   {title}
                                 </span>
-                              </IslandA>
+                              </A>
                             </li>
                           )}
                         </For>
@@ -217,13 +215,9 @@ function Nav() {
                   <For each={r.filter(i => !i.subsection)}>
                     {({ title, path, href, frontMatter }) => (
                       <li class="ml-2">
-                        <IslandA
-                          activeClass="text-primary"
-                          inactiveClass="text-gray-500"
-                          href={href}
-                        >
+                        <A activeClass="text-primary" inactiveClass="text-gray-500" href={href}>
                           <span>{title}</span>
-                        </IslandA>
+                        </A>
                       </li>
                     )}
                   </For>
@@ -233,11 +227,11 @@ function Nav() {
               <For each={r}>
                 {({ title, path, href, frontMatter }) => (
                   <li class="ml-2" classList={{ "text-slate-300": !frontMatter.active }}>
-                    <IslandA activeClass="text-primary" inactiveClass="text-gray-500" href={href}>
+                    <A activeClass="text-primary" inactiveClass="text-gray-500" href={href}>
                       <span class="block dark:text-gray-300 py-1 text-md font-semibold break-words hover:text-gray-400 dark:hover:text-gray-400">
                         {title}
                       </span>
-                    </IslandA>
+                    </A>
                   </li>
                 )}
               </For>
@@ -250,7 +244,7 @@ function Nav() {
 }
 
 import { components } from "./components/components";
-import { useTableOfContents } from "./components/TableOfContents";
+import { TableOfContents, useTableOfContents } from "./components/TableOfContents";
 
 export default function Root() {
   return (
@@ -319,9 +313,9 @@ export default function Root() {
                                           "ml-4": h.depth === 3
                                         }}
                                       >
-                                        <IslandA class="border-0 no-underline" href={`#${h.slug}`}>
+                                        <A class="border-0 no-underline" href={`#${h.slug}`}>
                                           {h.text}
-                                        </IslandA>
+                                        </A>
                                       </li>
                                     )}
                                   </For>

diff --git a/docs/core-concepts/data-loading.mdx b/docs/core-concepts/data-loading.mdx
@@ -195,6 +195,7 @@ export default function HouseLayout(props: ParentProps) {
   return <><Outlet /></>;
 }
 
+
 // @filename: routes/[house]/students.tsx
 import { RouteDataArgs, Outlet } from "solid-start";
 import { ParentProps } from 'solid-js';
@@ -224,7 +225,7 @@ import { createContext } from 'solid-js';
 const RouteContext = createContext<{ data: any }>({ data: null });
 
 // ---cut---
-import { useLocation, useNavigate } from "solid-start";
+import { useLocation, useNavigate, RouteDataArgs } from "solid-start";
 import { 
   default as HouseLayout, 
   routeData as getHouseLayoutData 
@@ -245,9 +246,9 @@ function Routes() {
     params: { house: 'gryffindor' }
   }
 
-  const houseLayoutData = getHouseLayoutData({ ...args, data: null });
-  const studentsLayoutData = getStudentsLayoutData({ ...args, data: houseLayoutData });
-  const studentsData = getStudentsLayoutData({ ...args, data: studentsLayoutData  });
+  const houseLayoutData = getHouseLayoutData({ ...args, data: null } as RouteDataArgs);
+  const studentsLayoutData = getStudentsLayoutData({ ...args, data: houseLayoutData } as RouteDataArgs);
+  const studentsData = getStudentsLayoutData({ ...args, data: studentsLayoutData  } as RouteDataArgs);
 
   return (
     <RouteContext.Provider value={{ data: houseLayoutData }}>

diff --git a/examples/bare/package.json b/examples/bare/package.json
@@ -7,19 +7,19 @@
   },
   "type": "module",
   "devDependencies": {
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.16.19",
     "esbuild": "^0.14.54",
-    "postcss": "^8.4.21",
-    "solid-start-node": "^0.2.19",
-    "typescript": "^4.9.4",
+    "postcss": "^8.4.26",
+    "solid-start-node": "^0.2.29",
+    "typescript": "^4.9.5",
     "vite": "^4.4.6"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.28.2",
+    "@solidjs/meta": "^0.28.5",
     "@solidjs/router": "^0.8.2",
     "solid-js": "^1.7.9",
     "solid-start": "^0.2.31",
-    "undici": "^5.15.1"
+    "undici": "^5.22.1"
   },
   "engines": {
     "node": ">=16.8"

diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -8,19 +8,19 @@
   "type": "module",
   "main": "./dist/index.js",
   "devDependencies": {
-    "@types/babel__core": "^7.20.0",
-    "@types/node": "^18.11.18",
+    "@types/babel__core": "^7.20.1",
+    "@types/node": "^18.16.19",
     "esbuild": "^0.14.54",
-    "solid-start-node": "^0.2.19",
-    "typescript": "^4.9.4",
+    "solid-start-node": "^0.2.29",
+    "typescript": "^4.9.5",
     "vite": "^4.4.6"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.28.2",
+    "@solidjs/meta": "^0.28.5",
     "@solidjs/router": "^0.8.2",
     "solid-js": "^1.7.9",
     "solid-start": "^0.2.31",
-    "undici": "^5.15.1"
+    "undici": "^5.22.1"
   },
   "engines": {
     "node": ">=16"

diff --git a/examples/movies/.gitignore b/examples/movies/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+# Keep environment variables out of version control
+.env*
+.db
diff --git a/examples/movies/README.md b/examples/movies/README.md
@@ -0,0 +1,23 @@
+# solid-movies
+
+This was adapted from the Nuxt version: https://github.com/tastejs/nuxt-movies
+
+A SolidStart Movies application using [The Movie Database (TMDb)](https://developers.themoviedb.org/3) API. Built using [Solid](https://github.com/solidjs/solid) and [SolidStart](https://github.com/solidjs/solid-start). Our version is built by the Solid team.
+
+## Quick setup
+
+1. Take a copy of `.env.sample` and re-name to `.env`
+2. Get your [TMDb](https://developers.themoviedb.org/3) API key
+3. Get your [YouTube](https://developers.google.com/youtube/v3/getting-started) API key (optional, used for video data)
+4. Enter the details into the `.env` file
+
+## Running
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+```
+
diff --git a/examples/movies/package.json b/examples/movies/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "example-movies",
+  "scripts": {
+    "dev": "solid-start dev",
+    "build": "solid-start build",
+    "start": "solid-start start"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@iconify/json": "^2.2.90",
+    "sass": "^1.63.6",
+    "solid-start-node": "^0.2.30",
+    "typescript": "^4.9.5",
+    "unplugin-icons": "^0.14.15",
+    "vite": "^4.4.6"
+  },
+  "dependencies": {
+    "@solid-primitives/scheduled": "1.1.0",
+    "@solidjs/meta": "^0.28.5",
+    "@solidjs/router": "^0.8.2",
+    "nprogress": "^0.2.0",
+    "solid-heroicons": "^3.2.4",
+    "solid-js": "^1.7.9",
+    "solid-start": "^0.2.30",
+    "solid-start-netlify": "^0.2.30",
+    "undici": "^5.22.1"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}
diff --git a/examples/movies/public/README.md b/examples/movies/public/README.md
@@ -0,0 +1,12 @@
+# STATIC
+
+This directory contains your static files.
+Each file inside this directory is mapped to /.
+
+Example: /static/robots.txt is mapped as /robots.txt.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#static
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
diff --git a/examples/movies/public/favicon.ico b/examples/movies/public/favicon.ico
diff --git a/examples/movies/public/icon-medium.png b/examples/movies/public/icon-medium.png
diff --git a/examples/movies/public/icon.png b/examples/movies/public/icon.png
diff --git a/examples/movies/public/solidjs.svg b/examples/movies/public/solidjs.svg
diff --git a/examples/movies/src/assets/README.md b/examples/movies/src/assets/README.md
@@ -0,0 +1,3 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.