diff --git a/.changeset/jsx-tokenizer-solid2-migration.md b/.changeset/jsx-tokenizer-solid2-migration.md new file mode 100644 index 000000000..ad399a847 --- /dev/null +++ b/.changeset/jsx-tokenizer-solid2-migration.md @@ -0,0 +1,26 @@ +--- +"@solid-primitives/jsx-tokenizer": major +--- + +Migrate to Solid.js v2.0 (beta.10) + +## Breaking Changes + +**Peer dependencies**: `solid-js@^2.0.0-beta.10` and `@solidjs/web@^2.0.0-beta.10` are now required. + +### API changes + +- `isServer` is now imported from `@solidjs/web` (not `solid-js/web`) +- `JSX` types are now imported from `@solidjs/web` +- `ResolvedJSXElement` type renamed to `ResolvedElement` (from `solid-js`) in `resolveTokens` overloads +- `renderToString` in SSR tests moved to `@solidjs/web` + +### Usage changes + +- `createEffect` now requires the split compute/apply form — update any `createEffect` calls in consuming code +- Context is now its own provider: `` replaces `` +- `classList` is replaced by the `class` object/array form + +### Vitest config + +- Added `moduleName: "@solidjs/web"` to the shared vitest config `solid` option so JSX transforms target `@solidjs/web` instead of the removed `solid-js/web` subpath. This affects all packages with `.tsx` test files. diff --git a/configs/vitest.config.ts b/configs/vitest.config.ts index 33c93a4e4..78a788131 100644 --- a/configs/vitest.config.ts +++ b/configs/vitest.config.ts @@ -23,7 +23,7 @@ export default defineConfig(({ mode }) => { // https://github.com/solidjs/solid-refresh/issues/29 hot: false, // For testing SSR we need to do a SSR JSX transform - solid: { generate: testSSR ? "ssr" : "dom", omitNestedClosingTags: false }, + solid: { generate: testSSR ? "ssr" : "dom", omitNestedClosingTags: false, moduleName: "@solidjs/web" }, }), ], test: { diff --git a/packages/jsx-tokenizer/README.md b/packages/jsx-tokenizer/README.md index aae49a85e..9b9024d97 100644 --- a/packages/jsx-tokenizer/README.md +++ b/packages/jsx-tokenizer/README.md @@ -124,7 +124,7 @@ function Tabs(props: { children: (Tab: Component<{ value: T }>) => JSX.Elemen return (
    - {token =>
  • {token.data}
  • } + {token =>
  • {token.data}
  • }
); @@ -163,13 +163,14 @@ import { resolveTokens } from "@solid-primitives/jsx-tokenizer"; const tokens = resolveTokens(tokenizer, () => props.children); -createEffect(() => { - tokens().forEach(token => { +createEffect( + () => tokens(), + tokens => { // token is a function that returns the JSX Element fallback // token.data is the data returned by the tokenData function - console.log(token.data); - }); -}); + tokens.forEach(token => console.log(token.data)); + } +); // the return value of resolveTokens can be used in JSX (will render the fallback JSX Elements) return <>{els()}; @@ -188,17 +189,20 @@ const els = resolveTokens(tokenizer, () => props.children, { includeJSXElements: true, }); -createEffect(() => { - els().forEach(el => { - if (!isToken(tokenizer, el)) { - // el is a normal JSX Element - return; - } - // token is a function that returns the JSX Element fallback - // token.data is the data returned by the tokenData function - console.log(token.data); - }); -}); +createEffect( + () => els(), + els => { + els.forEach(el => { + if (!isToken(tokenizer, el)) { + // el is a normal JSX Element + return; + } + // token is a function that returns the JSX Element fallback + // token.data is the data returned by the tokenData function + console.log(el.data); + }); + } +); // the return value of resolveTokens can be used in JSX return <>{els()}; @@ -221,7 +225,7 @@ Since `resolveTokens` is eagerly resolving the JSX structure, if you want to pro ```tsx function ParentComponent(props) { return ( - + {untrack(() => { const tokens = resolveTokens(tokenizer, () => props.children); @@ -229,7 +233,7 @@ function ParentComponent(props) { return <>{tokens()}; })} - +
); } ``` @@ -243,13 +247,13 @@ For example, [`@solidjs/router`](https://github.com/solidjs/solid-router) which function App() { return ( - + {/* component prop is not rendered immediately, it is rendered within as later time, so the context will not be available in Home component */} - + ); } @@ -262,11 +266,11 @@ function Home() { // do this instead function App() { return ( - + - + ); } ``` diff --git a/packages/jsx-tokenizer/package.json b/packages/jsx-tokenizer/package.json index 34c53cba7..beda40c92 100644 --- a/packages/jsx-tokenizer/package.json +++ b/packages/jsx-tokenizer/package.json @@ -1,6 +1,6 @@ { "name": "@solid-primitives/jsx-tokenizer", - "version": "1.1.3", + "version": "2.0.0", "description": "A primitive to tokenize your solid-components to enable custom parsing.", "author": "Vincent Van Dijck ", "contributors": [ @@ -59,9 +59,11 @@ "@solid-primitives/utils": "workspace:^" }, "peerDependencies": { - "solid-js": "^1.6.12" + "@solidjs/web": "^2.0.0-beta.10", + "solid-js": "^2.0.0-beta.10" }, "devDependencies": { - "solid-js": "^1.9.7" + "@solidjs/web": "2.0.0-beta.10", + "solid-js": "2.0.0-beta.10" } } diff --git a/packages/jsx-tokenizer/src/index.ts b/packages/jsx-tokenizer/src/index.ts index a7c337b2c..274c25a19 100644 --- a/packages/jsx-tokenizer/src/index.ts +++ b/packages/jsx-tokenizer/src/index.ts @@ -3,11 +3,10 @@ import { type Component, createComponent, createMemo, - type JSX, DEV, - type ResolvedJSXElement, + type ResolvedElement, } from "solid-js"; -import { isServer } from "solid-js/web"; +import { isServer, type JSX } from "@solidjs/web"; import type { NoInfer, Many } from "@solid-primitives/utils"; import { asArray } from "@solid-primitives/utils"; @@ -178,7 +177,7 @@ export function resolveTokens( options: { includeJSXElements: true; }, -): Accessor<(TokenElement | ResolvedJSXElement)[]>; +): Accessor<(TokenElement | ResolvedElement)[]>; export function resolveTokens[]>( tokenizers: TTokenizers, @@ -194,7 +193,7 @@ export function resolveTokens[]>( options: { includeJSXElements: true; }, -): Accessor<(TokenElement> | ResolvedJSXElement)[]>; +): Accessor<(TokenElement> | ResolvedElement)[]>; export function resolveTokens( tokenizers: Many>, @@ -202,7 +201,7 @@ export function resolveTokens( options?: { includeJSXElements?: boolean; }, -): Accessor<(TokenElement | ResolvedJSXElement)[]> { +): Accessor<(TokenElement | ResolvedElement)[]> { const symbols = new Set(asArray(tokenizers).map(p => p[$TOKENIZER])); const children = createMemo(fn); return createMemo(() => getResolvedTokens([], children(), symbols, options?.includeJSXElements)); diff --git a/packages/jsx-tokenizer/test/index.test.tsx b/packages/jsx-tokenizer/test/index.test.tsx index ee3b1bbd4..105f69b36 100644 --- a/packages/jsx-tokenizer/test/index.test.tsx +++ b/packages/jsx-tokenizer/test/index.test.tsx @@ -1,4 +1,4 @@ -import { children, createRoot, createSignal, Show } from "solid-js"; +import { children, createRoot, createSignal, flush, Show } from "solid-js"; import { describe, expect, it } from "vitest"; import { createTokenizer, @@ -70,24 +70,27 @@ describe("jsx-tokenizer", () => { }); it("handled reactive children", () => { - createRoot(() => { - const [show, setShow] = createSignal(true); + const [show, setShow] = createSignal(true); - const tokens = resolveTokens(parser1, () => ( + const { tokens, dispose } = createRoot(dispose => ({ + tokens: resolveTokens(parser1, () => ( <> - )); + )), + dispose, + })); - expect(tokens()).toHaveLength(2); + expect(tokens()).toHaveLength(2); - setShow(false); + setShow(false); + flush(); + expect(tokens()).toHaveLength(1); - expect(tokens()).toHaveLength(1); - }); + dispose(); }); it("should render tokens", () => { diff --git a/packages/jsx-tokenizer/test/server.test.tsx b/packages/jsx-tokenizer/test/server.test.tsx index 9383ce3e2..a7a1292c6 100644 --- a/packages/jsx-tokenizer/test/server.test.tsx +++ b/packages/jsx-tokenizer/test/server.test.tsx @@ -1,4 +1,4 @@ -import { renderToString } from "solid-js/web"; +import { renderToString } from "@solidjs/web"; import { describe, expect, it } from "vitest"; import { createTokenizer, createToken, resolveTokens } from "../src/index.js"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 726871879..969145597 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -477,9 +477,12 @@ importers: specifier: workspace:^ version: link:../utils devDependencies: + '@solidjs/web': + specifier: 2.0.0-beta.10 + version: 2.0.0-beta.10(solid-js@2.0.0-beta.10) solid-js: - specifier: ^1.9.7 - version: 1.9.7 + specifier: 2.0.0-beta.10 + version: 2.0.0-beta.10 packages/keyboard: dependencies: @@ -2366,36 +2369,42 @@ packages: engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm-musl@2.5.1': resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==} engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [musl] '@parcel/watcher-linux-arm64-glibc@2.5.1': resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm64-musl@2.5.1': resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [musl] '@parcel/watcher-linux-x64-glibc@2.5.1': resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-x64-musl@2.5.1': resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [musl] '@parcel/watcher-wasm@2.3.0': resolution: {integrity: sha512-ejBAX8H0ZGsD8lSICDNyMbSEtPMWgDL0WFCt/0z7hyf5v8Imz4rAM8xY379mBsECkq/Wdqa5WEDLqtjZ+6NxfA==} @@ -2506,36 +2515,42 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17': resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [musl] '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17': resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17': resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] + libc: [glibc] '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17': resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-x64-musl@1.0.0-rc.17': resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [musl] '@rolldown/binding-openharmony-arm64@1.0.0-rc.17': resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==} @@ -2672,56 +2687,67 @@ packages: resolution: {integrity: sha512-gTJ/JnnjCMc15uwB10TTATBEhK9meBIY+gXP4s0sHD1zHOaIh4Dmy1X9wup18IiY9tTNk5gJc4yx9ctj/fjrIw==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.43.0': resolution: {integrity: sha512-ZJ3gZynL1LDSIvRfz0qXtTNs56n5DI2Mq+WACWZ7yGHFUEirHBRt7fyIk0NsCKhmRhn7WAcjgSkSVVxKlPNFFw==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.43.0': resolution: {integrity: sha512-8FnkipasmOOSSlfucGYEu58U8cxEdhziKjPD2FIa0ONVMxvl/hmONtX/7y4vGjdUhjcTHlKlDhw3H9t98fPvyA==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.43.0': resolution: {integrity: sha512-KPPyAdlcIZ6S9C3S2cndXDkV0Bb1OSMsX0Eelr2Bay4EsF9yi9u9uzc9RniK3mcUGCLhWY9oLr6er80P5DE6XA==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loongarch64-gnu@4.43.0': resolution: {integrity: sha512-HPGDIH0/ZzAZjvtlXj6g+KDQ9ZMHfSP553za7o2Odegb/BEfwJcR0Sw0RLNpQ9nC6Gy8s+3mSS9xjZ0n3rhcYg==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-powerpc64le-gnu@4.43.0': resolution: {integrity: sha512-gEmwbOws4U4GLAJDhhtSPWPXUzDfMRedT3hFMyRAvM9Mrnj+dJIFIeL7otsv2WF3D7GrV0GIewW0y28dOYWkmw==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.43.0': resolution: {integrity: sha512-XXKvo2e+wFtXZF/9xoWohHg+MuRnvO29TI5Hqe9xwN5uN8NKUYy7tXUG3EZAlfchufNCTHNGjEx7uN78KsBo0g==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.43.0': resolution: {integrity: sha512-ruf3hPWhjw6uDFsOAzmbNIvlXFXlBQ4nk57Sec8E8rUxs/AI4HD6xmiiasOOx/3QxS2f5eQMKTAwk7KHwpzr/Q==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.43.0': resolution: {integrity: sha512-QmNIAqDiEMEvFV15rsSnjoSmO0+eJLoKRD9EAa9rrYNwO/XRCtOGM3A5A0X+wmG+XRrw9Fxdsw+LnyYiZWWcVw==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.43.0': resolution: {integrity: sha512-jAHr/S0iiBtFyzjhOkAics/2SrXE092qyqEg96e90L3t9Op8OTzS6+IX0Fy5wCt2+KqeHAkti+eitV0wvblEoQ==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.43.0': resolution: {integrity: sha512-3yATWgdeXyuHtBhrLt98w+5fKurdqvs8B53LaoKD7P7H7FKOONLsBVMNl9ghPQZQuYcceV5CDyPfyfGpMWD9mQ==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.43.0': resolution: {integrity: sha512-wVzXp2qDSCOpcBCT5WRWLmpJRIzv23valvcTwMHEobkjippNf+C3ys/+wf07poPkeNix0paTNemB2XrHr2TnGw==} @@ -5208,24 +5234,28 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}