vikejs · magne4000 · Oct 21, 2024 · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,13 +20,16 @@ jobs:
         cmd:
           - pnpm run test:e2e
           - pnpm run test:types
+          - pnpm run lint
         # `exclude` docs & alternatives:
         # - https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstrategymatrixexclude
         # - https://stackoverflow.com/questions/68994484/how-to-skip-a-configuration-of-a-matrix-with-github-actions/68994907#68994907
         # - https://stackoverflow.com/questions/66025220/paired-values-in-github-actions-matrix/68940067#68940067
         exclude:
           - os: windows-latest
             cmd: pnpm run test:types
+          - os: windows-latest
+            cmd: pnpm run lint
 
     steps:
       - uses: actions/checkout@v4

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,34 @@
+import pluginSolid from "eslint-plugin-solid/configs/typescript";
+import pluginTypescript from "typescript-eslint";
+
+export default pluginTypescript.config(
+  {
+    files: [
+      "packages/**/*.ts",
+      "packages/**/*.tsx",
+      "packages/**/*.js",
+      "packages/**/*.jsx",
+      "packages/**/*.mts",
+      "packages/**/*.cts",
+      "examples/**/*.ts",
+      "examples/**/*.tsx",
+      "examples/**/*.js",
+      "examples/**/*.jsx",
+      "examples/**/*.mts",
+      "examples/**/*.cts",
+    ],
+  },
+  {
+    ignores: ["**/dist/"],
+  },
+  ...pluginTypescript.configs.recommended,
+  pluginSolid,
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-namespace": 0,
+      "@typescript-eslint/no-unsafe-function-type": 0,
+      "@typescript-eslint/no-unused-vars": [1, { argsIgnorePattern: "^_" }],
+    },
+  },
+);
diff --git a/examples/full/pages/images/+Page.tsx b/examples/full/pages/images/+Page.tsx
@@ -25,22 +25,23 @@ function Page() {
   );
 }
 
-function Image({ src, author }: { src: string; author: string }) {
+function Image(props: { src: string; author: string }) {
   return (
     <>
-      <img src={src} height={48} style={{ "vertical-align": "middle", "margin-left": "10px" }} />
+      <img src={props.src} height={48} style={{ "vertical-align": "middle", "margin-left": "10px" }} />
       <Head>
         <script
           type="application/ld+json"
+          // eslint-disable-next-line solid/no-innerhtml
           innerHTML={JSON.stringify({
             "@context": "https://schema.org/",
-            contentUrl: { src },
+            contentUrl: { src: props.src },
             creator: {
               "@type": "Person",
-              name: author,
+              name: props.author,
             },
           })}
-        ></script>
+        />
       </Head>
     </>
   );

diff --git a/examples/full/pages/index/+Page.tsx b/examples/full/pages/index/+Page.tsx
@@ -15,7 +15,7 @@ const ClientOnlyCounterSlow = clientOnly(async () => {
 function Page() {
   return (
     <>
-      <Config image={image}></Config>
+      <Config image={image} />
       <h1>My Vike + Solid App</h1>
       This page is:
       <ul>

diff --git a/examples/full/pages/star-wars/index/+Page.tsx b/examples/full/pages/star-wars/index/+Page.tsx
@@ -9,7 +9,7 @@ export default function Page() {
       <h1>Star Wars Movies</h1>
       <ol>
         <For each={movies}>
-          {(movie, i) => (
+          {(movie) => (
             <li>
               <a href={`/star-wars/${movie.id}`}>{movie.title}</a> ({movie.release_date})
             </li>

diff --git a/examples/full/pages/starship/+Layout.tsx b/examples/full/pages/starship/+Layout.tsx
@@ -43,7 +43,7 @@ function Layout(props: FlowProps) {
 }
 
 function Link(props: any) {
-  return <a style={{ marginRight: 10, ...props.style }} {...props} />;
+  return <a style={{ 'margin-right': '10', ...props.style }} {...props} />;
 }
 
 function Counter() {

diff --git a/examples/minimal/pages/Layout.jsx b/examples/minimal/pages/Layout.jsx
@@ -1,6 +1,6 @@
 import "./Layout.css";
 
-export function Layout({ children }) {
+export function Layout(props) {
   return (
     <PageLayout>
       <Sidebar>
@@ -11,12 +11,12 @@ export function Layout({ children }) {
           About
         </a>
       </Sidebar>
-      <Content>{children}</Content>
+      <Content>{props.children}</Content>
     </PageLayout>
   );
 }
 
-function PageLayout({ children }) {
+function PageLayout(props) {
   return (
     <div
       style={{
@@ -25,12 +25,12 @@ function PageLayout({ children }) {
         margin: "auto",
       }}
     >
-      {children}
+      {props.children}
     </div>
   );
 }
 
-function Sidebar({ children }) {
+function Sidebar(props) {
   return (
     <div
       style={{
@@ -43,12 +43,12 @@ function Sidebar({ children }) {
         "line-height": "1.8em",
       }}
     >
-      {children}
+      {props.children}
     </div>
   );
 }
 
-function Content({ children }) {
+function Content(props) {
   return (
     <div
       style={{
@@ -58,7 +58,7 @@ function Content({ children }) {
         "min-height": "100vh",
       }}
     >
-      {children}
+      {props.children}
     </div>
   );
 }
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "format": "pnpm run format:biome",
     "format:biome": "biome format --write .",
     "format:check": "biome format . || (echo 'Fix formatting by running `$ pnpm run -w format`.' && exit 1)",
+    "========= Lint": "",
+    "lint": "eslint .",
     "========= Release": "",
     "release": "cd ./packages/vike-solid/ && pnpm run release",
     "release:minor": "cd ./packages/vike-solid/ && pnpm run release:minor",
@@ -32,7 +34,11 @@
     "@biomejs/biome": "^1.9.4",
     "@brillout/test-e2e": "^0.5.36",
     "@brillout/test-types": "^0.1.15",
-    "playwright": "^1.48.1"
+    "eslint": "^9.13.0",
+    "eslint-plugin-solid": "^0.14.3",
+    "playwright": "^1.48.1",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.10.0"
   },
-  "packageManager": "pnpm@9.12.2"
+  "packageManager": "pnpm@9.4.0"
 }
diff --git a/packages/vike-solid/helpers/clientOnly.tsx b/packages/vike-solid/helpers/clientOnly.tsx
@@ -1,9 +1,10 @@
 import {
   type Component,
   type ComponentProps,
+  type JSX,
+  type Setter,
   createMemo,
   createSignal,
-  type JSX,
   onMount,
   sharedConfig,
   splitProps,
@@ -16,20 +17,34 @@ import { isServer } from "solid-js/web";
  * Load and render a component only on the client-side.
  * @see {@link https://vike.dev/clientOnly}
  */
-export function clientOnly<T extends Component<any>>(fn: () => Promise<{ default: T } | T>) {
-  if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
+export function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{ default: T } | T>,
+  options: { lazy?: boolean } = {},
+) {
+  if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => <>{props.fallback}</>;
 
   const [comp, setComp] = createSignal<T>();
-  fn().then((m) => setComp(() => ("default" in m ? m.default : m)));
+  if (!options.lazy) {
+    load(fn, setComp);
+  }
+  // eslint-disable-next-line solid/reactivity
   return (props: ComponentProps<T>) => {
     let Comp: T | undefined;
     let m: boolean;
     const [, rest] = splitProps(props, ["fallback"]);
+    if (options.lazy) {
+      load(fn, setComp);
+    }
     if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
     const [mounted, setMounted] = createSignal(!sharedConfig.context);
     onMount(() => setMounted(true));
+    // eslint-disable-next-line solid/reactivity
     return createMemo(
       () => ((Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))),
-    );
+    ) as unknown as JSX.Element;
   };
 }
+
+function load<T>(fn: () => Promise<{ default: T } | T>, setComp: Setter<T>) {
+  fn().then((m) => setComp(() => ("default" in (m as object) ? (m as any).default : m)));
+}
diff --git a/packages/vike-solid/hooks/usePageContext.tsx b/packages/vike-solid/hooks/usePageContext.tsx
@@ -1,7 +1,7 @@
 export { usePageContext };
 export { PageContextProvider };
 
-import { createContext, useContext, type JSX } from "solid-js";
+import { type JSX, createContext, useContext } from "solid-js";
 import { type Store } from "solid-js/store";
 import type { PageContext } from "vike/types";
 import { getGlobalObject } from "../utils/getGlobalObject.js";
@@ -15,6 +15,7 @@ function PageContextProvider(props: {
   children: JSX.Element;
 }) {
   const { solidContext } = globalContext;
+  // eslint-disable-next-line solid/reactivity
   return <solidContext.Provider value={props.pageContext}>{props.children}</solidContext.Provider>;
 }
 

diff --git a/packages/vike-solid/integration/getPageElement.tsx b/packages/vike-solid/integration/getPageElement.tsx
@@ -46,7 +46,7 @@ function Wrapper(props: { children: JSX.Element }) {
     });
   };
 
-  return renderWrappers();
+  return <>{renderWrappers()}</>;
 }
 
 function Page() {

diff --git a/packages/vike-solid/integration/onRenderHtml.tsx b/packages/vike-solid/integration/onRenderHtml.tsx
@@ -46,7 +46,7 @@ async function getPageHtml(pageContext: PageContextServer & PageContextInternal)
   const userAgent: string | undefined =
     pageContext.headers?.["user-agent"] ||
     // TODO/eventually: remove old way of acccessing the User Agent header.
-    // @ts-ignore
+    // @ts-expect-error Property 'userAgent' does not exist on type
     pageContext.userAgent;
 
   if (pageContext.Page) {

diff --git a/packages/vike-solid/utils/getGlobalObject.ts b/packages/vike-solid/utils/getGlobalObject.ts
@@ -3,7 +3,7 @@ export function getGlobalObject<T extends Record<string, unknown> = never>(
   key: `${string}.ts`,
   defaultValue: T,
 ): T {
-  // @ts-ignore
+  // @ts-expect-error Property '_vike_solid' does not exist on type 'typeof globalThis'
   const globalObjectsAll = (globalThis[projectKey] = globalThis[projectKey] || {});
   const globalObject = (globalObjectsAll[key] = globalObjectsAll[key] || defaultValue);
   return globalObject;
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ function Wrapper(props: { children: JSX.Element }) { @@
         });
       };
-      return renderWrappers();
+      return <>{renderWrappers()}</>;
     }
     function Page() {
@@ Expand Down @@