From a1b2f686a12195c8413dd8b4290148b078b6d642 Mon Sep 17 00:00:00 2001 From: Aurelien Lourot Date: Sun, 28 Jan 2024 13:52:11 +0100 Subject: [PATCH] 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`.) --- examples/basic/package.json | 2 +- examples/basic/pages/+config.h.ts | 2 +- examples/ssr-spa/package.json | 2 +- examples/ssr-spa/pages/+config.h.ts | 2 +- pnpm-lock.yaml | 4 +- vike-solid/{renderer => }/+config.ts | 8 +- vike-solid/README.md | 94 ++++++++++++++++--- vike-solid/components/useData.tsx | 1 - vike-solid/components/usePageContext.tsx | 1 - vike-solid/hooks/useData.tsx | 14 +++ vike-solid/hooks/usePageContext.tsx | 14 +++ vike-solid/main.ts | 5 + vike-solid/package.json | 22 +++-- vike-solid/renderer/PageContextProvider.tsx | 27 +----- vike-solid/renderer/getHeadSetting.ts | 2 +- vike-solid/renderer/getPageElement.tsx | 3 +- ...+onRenderClient.tsx => onRenderClient.tsx} | 0 .../{+onRenderHtml.tsx => onRenderHtml.tsx} | 0 vike-solid/rollup.config.js | 22 +++-- .../{renderer/types.ts => types/index.ts} | 0 .../{renderer => }/utils/getGlobalObject.ts | 0 vike-solid/{renderer => }/utils/isCallable.ts | 0 22 files changed, 157 insertions(+), 68 deletions(-) rename vike-solid/{renderer => }/+config.ts (96%) delete mode 100644 vike-solid/components/useData.tsx delete mode 100644 vike-solid/components/usePageContext.tsx create mode 100644 vike-solid/hooks/useData.tsx create mode 100644 vike-solid/hooks/usePageContext.tsx create mode 100644 vike-solid/main.ts rename vike-solid/renderer/{+onRenderClient.tsx => onRenderClient.tsx} (100%) rename vike-solid/renderer/{+onRenderHtml.tsx => onRenderHtml.tsx} (100%) rename vike-solid/{renderer/types.ts => types/index.ts} (100%) rename vike-solid/{renderer => }/utils/getGlobalObject.ts (100%) rename vike-solid/{renderer => }/utils/isCallable.ts (100%) diff --git a/examples/basic/package.json b/examples/basic/package.json index a290687..9ea5772 100644 --- 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 index f411494..2114188 100644 --- 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 index 20d73b9..7eb5013 100644 --- 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 index 92dfd6f..cda4955 100644 --- 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 index ed5777b..b7e5364 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,7 +20,7 @@ importers: specifier: ^1.7.11 version: 1.8.12 vike: - specifier: ^0.4.159 + specifier: ^0.4.160 version: 0.4.160(vite@5.0.12) vike-solid: specifier: link:../../vike-solid @@ -36,7 +36,7 @@ importers: specifier: ^1.7.11 version: 1.8.12 vike: - specifier: ^0.4.159 + specifier: ^0.4.160 version: 0.4.160(vite@5.0.12) vike-solid: specifier: link:../../vike-solid diff --git a/vike-solid/renderer/+config.ts b/vike-solid/+config.ts similarity index 96% rename from vike-solid/renderer/+config.ts rename to vike-solid/+config.ts index 88d4e6b..1dc96a3 100644 --- a/vike-solid/renderer/+config.ts +++ b/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 index cc1e039..f52489b 100644 --- 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 `` tag. +- [`title`](https://vike.dev/head): **string** `...` tag. +- [`favicon`](https://vike.dev/head): **string** `` attribute. +- [`lang`](https://vike.dev/lang): **string** `` 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 deleted file mode 100644 index 6a579dd..0000000 --- a/vike-solid/components/useData.tsx +++ /dev/null @@ -1 +0,0 @@ -export { useData } from "../renderer/PageContextProvider"; diff --git a/vike-solid/components/usePageContext.tsx b/vike-solid/components/usePageContext.tsx deleted file mode 100644 index 7e0d58a..0000000 --- a/vike-solid/components/usePageContext.tsx +++ /dev/null @@ -1 +0,0 @@ -export { usePageContext } from "../renderer/PageContextProvider"; diff --git a/vike-solid/hooks/useData.tsx b/vike-solid/hooks/useData.tsx new file mode 100644 index 0000000..fe6a8a5 --- /dev/null +++ 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 { + const { data } = usePageContext() as any; + return data; +} diff --git a/vike-solid/hooks/usePageContext.tsx b/vike-solid/hooks/usePageContext.tsx new file mode 100644 index 0000000..a57da33 --- /dev/null +++ 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( + " is needed for being able to use usePageContext()" + ); + return pageContext; +} diff --git a/vike-solid/main.ts b/vike-solid/main.ts new file mode 100644 index 0000000..41e2ae4 --- /dev/null +++ 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 index 06f7bee..8b362c1 100644 --- 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 index 85395e3..d95d549 100644 --- 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>(), @@ -22,23 +21,3 @@ function PageContextProvider(props: { ); } - -/** Access the pageContext from any SolidJS component */ -function usePageContext() { - const pageContext = useContext(Context); - if (!pageContext) - throw new Error( - " 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 { - const { data } = usePageContext() as any; - return data; -} diff --git a/vike-solid/renderer/getHeadSetting.ts b/vike-solid/renderer/getHeadSetting.ts index fbe47e8..a10e37e 100644 --- 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 index 3b9c3e4..80c6422 100644 --- 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 b/vike-solid/renderer/onRenderClient.tsx similarity index 100% rename from vike-solid/renderer/+onRenderClient.tsx rename to vike-solid/renderer/onRenderClient.tsx diff --git a/vike-solid/renderer/+onRenderHtml.tsx b/vike-solid/renderer/onRenderHtml.tsx similarity index 100% rename from vike-solid/renderer/+onRenderHtml.tsx rename to vike-solid/renderer/onRenderHtml.tsx diff --git a/vike-solid/rollup.config.js b/vike-solid/rollup.config.js index a0aa877..a6305bd 100644 --- 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,9 +18,9 @@ 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, @@ -27,9 +28,10 @@ export default [ }), { 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 b/vike-solid/types/index.ts similarity index 100% rename from vike-solid/renderer/types.ts rename to vike-solid/types/index.ts diff --git a/vike-solid/renderer/utils/getGlobalObject.ts b/vike-solid/utils/getGlobalObject.ts similarity index 100% rename from vike-solid/renderer/utils/getGlobalObject.ts rename to vike-solid/utils/getGlobalObject.ts diff --git a/vike-solid/renderer/utils/isCallable.ts b/vike-solid/utils/isCallable.ts similarity index 100% rename from vike-solid/renderer/utils/isCallable.ts rename to vike-solid/utils/isCallable.ts