fix: export config at /config instead of /

Partly aligns with vike-react and vike-vue BREAKING CHANGE: Update Vike to `0.4.160` or above. BREAKING CHANGE: Replace `import vikeSolid from 'vike-solid'` with `import vikeSolid from 'vike-solid/config'`. (Typically in your `/pages/+config.h.js`.)
vikejs · Jan 28, 2024 · a1b2f68 · a1b2f68
1 parent 3d002f7
commit a1b2f68
Show file tree

Hide file tree

Showing 22 changed files with 157 additions and 68 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -10,7 +10,7 @@
     "node-fetch": "^3.3.2",
     "solid-js": "^1.7.11",
     "vike-solid": "^0.2.9",
-    "vike": "^0.4.159"
+    "vike": "^0.4.160"
   },
   "devDependencies": {
     "typescript": "^5.1.6"

diff --git a/examples/basic/pages/+config.h.ts b/examples/basic/pages/+config.h.ts
@@ -1,5 +1,5 @@
 import type { Config } from "vike/types";
-import vikeSolid from "vike-solid";
+import vikeSolid from "vike-solid/config";
 
 // Default config (can be overridden by pages)
 export default {

diff --git a/examples/ssr-spa/package.json b/examples/ssr-spa/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "solid-js": "^1.7.11",
     "vike-solid": "^0.2.9",
-    "vike": "^0.4.159"
+    "vike": "^0.4.160"
   },
   "devDependencies": {
     "typescript": "^5.1.6"

diff --git a/examples/ssr-spa/pages/+config.h.ts b/examples/ssr-spa/pages/+config.h.ts
@@ -1,5 +1,5 @@
 import type { Config } from "vike/types";
-import vikeSolid from "vike-solid";
+import vikeSolid from "vike-solid/config";
 import Layout from "../layouts/LayoutDefault";
 import Head from "./Head";
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vike-solid/renderer/+config.ts → vike-solid/+config.ts b/vike-solid/renderer/+config.ts → vike-solid/+config.ts
@@ -1,5 +1,7 @@
+export { config };
+
 import type { Config, ConfigEffect, PageContext } from "vike/types";
-import type { Component } from "./types.js";
+import type { Component } from "./types";
 
 // Depending on the value of `config.meta.ssr`, set other config options' `env`
 // accordingly.
@@ -26,7 +28,7 @@ const toggleSsrRelatedConfig: ConfigEffect = ({
   };
 };
 
-export default {
+const config = {
   // https://vike.dev/onRenderHtml
   onRenderHtml: "import:vike-solid/renderer/onRenderHtml:onRenderHtml",
   // https://vike.dev/onRenderClient
@@ -61,7 +63,7 @@ export default {
   },
 } satisfies Config;
 
-// We purposely define the ConfigVikeSolid interface in this file: that way we ensure it's always applied whenever the user `import vikeSolid from 'vike-solid'`
+// We purposely define the ConfigVikeSolid interface in this file: that way we ensure it's always applied whenever the user `import vikeSolid from 'vike-solid/config'`
 // https://vike.dev/pageContext#typescript
 declare global {
   namespace VikePackages {

diff --git a/vike-solid/README.md b/vike-solid/README.md
@@ -8,15 +8,85 @@ SolidJS integration for Vike, see [vike.dev/solid](https://vike.dev/solid).
 - [Documentation](https://vike.dev)
 - [Examples](https://github.com/vikejs/vike-solid/tree/main/examples)
 
-Implements:
-
-- [`useData()`](https://vike.dev/useData)
-- [`usePageContext()`](https://vike.dev/usePageContext)
-- [`Head`](https://vike.dev/head)
-- [`title`](https://vike.dev/head)
-- [`Layout`](https://vike.dev/Layout)
-- [`ClientOnly`](https://vike.dev/ClientOnly)
-- [`ssr`](https://vike.dev/ssr)
-- [`stream`](https://vike.dev/stream)
-- [`favicon`](https://vike.dev/head)
-- [`lang`](https://vike.dev/lang)
+## Introduction
+
+[UI framework Vike extensions](https://vike.dev/extensions) like `vike-solid`:
+
+- implement Vike Core [hooks](https://vike.dev/hooks) (e.g. [`onRenderHtml()`](https://vike.dev/onRenderHtml)) on your
+  behalf,
+- set Vike Core [settings](https://vike.dev/settings) on your behalf,
+- introduce new hooks for you to implement if needed,
+- introduce new settings for you to set if needed,
+- introduce new components and component hooks.
+
+## Scaffold new app
+
+Use [Bati](https://batijs.github.io/) to scaffold a Vike app using `vike-solid`.
+
+## Add to existing app
+
+To add `vike-solid` to an existing Vike app:
+
+1. Install the `vike-solid` npm package in your project:
+
+```bash
+npm install vike-solid
+```
+
+2. Extend your existing Vike config files with `vike-solid`:
+
+```diff
+ // /pages/+config.h.js
+
++import vikeSolid from 'vike-solid/config'
++
+ export default {
+   // Existing Vike Core settings
+   // ...
++
++  // New setting introduced by vike-solid:
++  title: 'My Vike + Solid App',
++
++  extends: vikeSolid
+ }
+```
+
+## Hooks
+
+`vike-solid` implements the [`onRenderHtml()`](https://vike.dev/onRenderHtml) and
+[`onRenderClient()`](https://vike.dev/onRenderClient) hooks on your behalf, which are essentially the glue code between
+Vike and Solid.
+
+## Settings
+
+`vike-solid` sets the following Vike Core settings on your behalf:
+
+- [`clientRouting=true`](https://vike.dev/clientRouting): Enable [Client Routing](https://vike.dev/client-routing).
+- [`hydrationCanBeAborted=true`](https://vike.dev/hydrationCanBeAborted): Solid allows the
+  [hydration](https://vike.dev/hydration) to be aborted.
+
+`vike-solid` introduces the following new settings:
+
+- [`Head`](https://vike.dev/head): **Component** Component to be rendered inside the `<head>` tag.
+- [`title`](https://vike.dev/head): **string** `<title>...</title>` tag.
+- [`favicon`](https://vike.dev/head): **string** `<link rel="icon" href="..." />` attribute.
+- [`lang`](https://vike.dev/lang): **string** `<html lang="...">` attribute.
+- [`ssr`](https://vike.dev/ssr): **boolean** Enable/disable Server-Side Rendering
+  ([SSR](https://vike.dev/render-modes)).
+- [`stream`](https://vike.dev/stream): **boolean** Enable/disable [HTML streaming](https://vike.dev/streaming).
+- [`Layout`](https://vike.dev/Layout): **Component** Wrapper for your [Page component](https://vike.dev/Page).
+
+## Component hooks
+
+`vike-solid` introduces the following new component hooks:
+
+- [`useData()`](https://vike.dev/useData): Access the data that is returned by a [`data()` hook](https://vike.dev/data)
+  from any component.
+- [`usePageContext()`](https://vike.dev/usePageContext): Access the [`pageContext` object](https://vike.dev/pageContext)
+  from any component.
+
+## Components
+
+`vike-solid` introduces the following new components:
+
+- [`ClientOnly`](https://vike.dev/ClientOnly): Wrapper to render and load a component only on the client-side.
diff --git a/vike-solid/components/useData.tsx b/vike-solid/components/useData.tsx
diff --git a/vike-solid/components/usePageContext.tsx b/vike-solid/components/usePageContext.tsx
diff --git a/vike-solid/hooks/useData.tsx b/vike-solid/hooks/useData.tsx
@@ -0,0 +1,14 @@
+export { useData };
+
+import { usePageContext } from "./usePageContext";
+
+/** Access `pageContext.data` from any SolidJS component
+ *
+ * See
+ * - https://vike.dev/data
+ * - https://vike.dev/pageContext-anywhere
+ */
+function useData<Data>(): Data {
+  const { data } = usePageContext() as any;
+  return data;
+}
diff --git a/vike-solid/hooks/usePageContext.tsx b/vike-solid/hooks/usePageContext.tsx
@@ -0,0 +1,14 @@
+export { usePageContext };
+
+import { useContext } from "solid-js";
+import { Context } from "../renderer/PageContextProvider";
+
+/** Access the pageContext from any SolidJS component */
+function usePageContext() {
+  const pageContext = useContext(Context);
+  if (!pageContext)
+    throw new Error(
+      "<PageContextProvider> is needed for being able to use usePageContext()"
+    );
+  return pageContext;
+}
diff --git a/vike-solid/main.ts b/vike-solid/main.ts
@@ -0,0 +1,5 @@
+// TODO/next-major-release: remove this file/export
+console.warn(
+  "[vike-solid][warning][deprecation] Replace `import vikeVue from 'vike-solid'` with `import vikeSolid from 'vike-solid/config'` (typically in your /pages/+config.h.js)"
+);
+export { config } from "./+config.js";
diff --git a/vike-solid/package.json b/vike-solid/package.json
@@ -13,7 +13,7 @@
   "peerDependencies": {
     "solid-js": "^1.8.7",
     "vite": "^4.4 || ^5.0.2",
-    "vike": "^0.4.159"
+    "vike": "^0.4.160"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
@@ -33,18 +33,22 @@
     "vike": "^0.4.160"
   },
   "exports": {
-    ".": "./dist/+config.js",
+    ".": "./dist/main.js",
+    "./config": "./dist/+config.js",
     "./vite": "./dist/vite-plugin-vike-solid.js",
     "./usePageContext": "./dist/usePageContext.js",
     "./useData": "./dist/useData.js",
     "./ClientOnly": "./dist/ClientOnly.js",
-    "./renderer/onRenderHtml": "./dist/+onRenderHtml.js",
-    "./renderer/onRenderClient": "./dist/+onRenderClient.js"
+    "./renderer/onRenderHtml": "./dist/onRenderHtml.js",
+    "./renderer/onRenderClient": "./dist/onRenderClient.js"
   },
   "typesVersions": {
     "*": {
       ".": [
-        "dist/renderer/+config.d.ts"
+        "dist/main.d.ts"
+      ],
+      "config": [
+        "dist/+config.d.ts"
       ],
       "vite": [
         "dist/vite-plugin-vike-solid.d.ts"
@@ -53,10 +57,10 @@
         "client.d.ts"
       ],
       "usePageContext": [
-        "dist/components/usePageContext.d.ts"
+        "dist/hooks/usePageContext.d.ts"
       ],
       "useData": [
-        "dist/components/useData.d.ts"
+        "dist/hooks/useData.d.ts"
       ],
       "ClientOnly": [
         "dist/components/ClientOnly.d.ts"
@@ -68,8 +72,8 @@
     "client.d.ts"
   ],
   "bin": "./cli/entry.js",
-  "main": "dist/+config.js",
-  "types": "dist/renderer/+config.d.ts",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
   "repository": "github:vikejs/vike-solid",
   "license": "MIT"
 }
diff --git a/vike-solid/renderer/PageContextProvider.tsx b/vike-solid/renderer/PageContextProvider.tsx
@@ -1,11 +1,10 @@
 export { PageContextProvider };
-export { usePageContext };
-export { useData };
+export { Context };
 
-import { useContext, createContext, type JSX } from "solid-js";
+import { createContext, type JSX } from "solid-js";
 import { type Store } from "solid-js/store";
 import type { PageContext } from "vike/types";
-import { getGlobalObject } from "./utils/getGlobalObject";
+import { getGlobalObject } from "../utils/getGlobalObject";
 
 const { Context } = getGlobalObject("PageContextProvider.ts", {
   Context: createContext<Store<PageContext>>(),
@@ -22,23 +21,3 @@ function PageContextProvider(props: {
     </Context.Provider>
   );
 }
-
-/** Access the pageContext from any SolidJS component */
-function usePageContext() {
-  const pageContext = useContext(Context);
-  if (!pageContext)
-    throw new Error(
-      "<PageContextProvider> is needed for being able to use usePageContext()"
-    );
-  return pageContext;
-}
-/** Access `pageContext.data` from any SolidJS component
- *
- * See
- * - https://vike.dev/data
- * - https://vike.dev/pageContext-anywhere
- */
-function useData<Data>(): Data {
-  const { data } = usePageContext() as any;
-  return data;
-}
diff --git a/vike-solid/renderer/getHeadSetting.ts b/vike-solid/renderer/getHeadSetting.ts
@@ -1,7 +1,7 @@
 export { getHeadSetting };
 
 import type { PageContext } from "vike/types";
-import { isCallable } from "./utils/isCallable.js";
+import { isCallable } from "../utils/isCallable.js";
 
 function getHeadSetting(
   headSetting: "title" | "favicon" | "lang",

diff --git a/vike-solid/renderer/getPageElement.tsx b/vike-solid/renderer/getPageElement.tsx
@@ -1,5 +1,6 @@
 import type { PageContext } from "vike/types";
-import { PageContextProvider, usePageContext } from "./PageContextProvider";
+import { PageContextProvider } from "./PageContextProvider";
+import { usePageContext } from "../hooks/usePageContext";
 import type { JSX } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import type { Store } from "solid-js/store";

diff --git a/vike-solid/renderer/+onRenderClient.tsx → vike-solid/renderer/onRenderClient.tsx b/vike-solid/renderer/+onRenderClient.tsx → vike-solid/renderer/onRenderClient.tsx
diff --git a/vike-solid/renderer/+onRenderHtml.tsx → vike-solid/renderer/onRenderHtml.tsx b/vike-solid/renderer/+onRenderHtml.tsx → vike-solid/renderer/onRenderHtml.tsx
diff --git a/vike-solid/rollup.config.js b/vike-solid/rollup.config.js
@@ -5,10 +5,11 @@ import { babel } from "@rollup/plugin-babel";
 export default [
   withSolid({
     input: [
-      "./renderer/+onRenderHtml.tsx",
-      "./renderer/+config.ts",
-      "./components/usePageContext.tsx",
-      "./components/useData.tsx",
+      "./renderer/onRenderHtml.tsx",
+      "./main.ts",
+      "./+config.ts",
+      "./hooks/usePageContext.tsx",
+      "./hooks/useData.tsx",
       "./components/ClientOnly.tsx",
       "./cli/index.ts",
     ],
@@ -17,19 +18,20 @@ export default [
   }),
   withSolid({
     input: [
-      "./renderer/+onRenderClient.tsx",
-      "./components/usePageContext.tsx",
-      "./components/useData.tsx",
+      "./renderer/onRenderClient.tsx",
+      "./hooks/usePageContext.tsx",
+      "./hooks/useData.tsx",
       "./cli/index.ts",
     ],
     ssr: false,
     external: ["vike/server", "vike/plugin"],
   }),
   {
     input: [
-      "./renderer/+config.ts",
-      "./components/usePageContext.tsx",
-      "./components/useData.tsx",
+      "./main.ts",
+      "./+config.ts",
+      "./hooks/usePageContext.tsx",
+      "./hooks/useData.tsx",
       "./components/ClientOnly.tsx",
       "./vite-plugin-vike-solid.ts",
     ],

diff --git a/vike-solid/renderer/types.ts → vike-solid/types/index.ts b/vike-solid/renderer/types.ts → vike-solid/types/index.ts
diff --git a/vike-solid/renderer/utils/getGlobalObject.ts → vike-solid/utils/getGlobalObject.ts b/vike-solid/renderer/utils/getGlobalObject.ts → vike-solid/utils/getGlobalObject.ts
diff --git a/vike-solid/renderer/utils/isCallable.ts → vike-solid/utils/isCallable.ts b/vike-solid/renderer/utils/isCallable.ts → vike-solid/utils/isCallable.ts