update solid-js to 2.0.0 next.14

babel.config.cjs

@@ -9,10 +9,10 @@ module.exports = {
  [
  "babel-plugin-jsx-dom-expressions",
  {
- moduleName: "solid-js/web",
+ moduleName: "@solidjs/web",
  contextToCustomElements: true,
  wrapConditionals: true,
- builtIns: ["For", "Show", "Switch", "Match", "Suspense", "SuspenseList", "Portal"]
+ builtIns: ["For", "Show", "Switch", "Match", "Loading", "Errored", "Portal"]
  }
  ]
  ]

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@solidjs/meta",
  "description": "Write meta tags to the document head",
- "version": "0.29.7",
+ "version": "0.30.0-next.0",
  "author": "Ryan Carniato",
  "license": "MIT",
  "repository": {
@@ -35,7 +35,8 @@
  "release": "pnpm build && changeset publish"
  },
  "peerDependencies": {
- "solid-js": ">=1.8.4"
+ "solid-js": ">=2.0.0-beta.0 <2.0.0",
+ "@solidjs/web": ">=2.0.0-beta.0 <2.0.0"
  },
  "devDependencies": {
  "@babel/cli": "^7.27.0",
@@ -44,15 +45,15 @@
  "@babel/preset-typescript": "7.27.0",
  "@changesets/cli": "^2.28.1",
  "@rollup/plugin-babel": "^6.0.4",
+ "@solidjs/web": "2.0.0-beta.14",
  "@testing-library/jest-dom": "^6.6.3",
- "@types/jest": "^29.5.14",
- "@vitest/browser": "^3.1.1",
- "babel-preset-solid": "^1.9.5",
+ "@vitest/browser": "^4.1.9",
+ "babel-preset-solid": "2.0.0-beta.14",
  "jsdom": "^26.0.0",
  "rimraf": "^6.0.1",
- "solid-js": "^1.9.5",
+ "solid-js": "2.0.0-beta.14",
  "typescript": "5.8.3",
- "vite-plugin-solid": "^2.11.6",
- "vitest": "^3.1.1"
+ "vite-plugin-solid": "^3.0.0-next.5",
+ "vitest": "^4.1.9"
  }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+ esbuild: true

src/index.tsx

@@ -1,15 +1,13 @@
 import {
- Component,
+type Component,
  createContext,
  createRenderEffect,
  createUniqueId,
- JSX,
- onCleanup,
- ParentComponent,
+ type ParentComponent,
  sharedConfig,
  useContext
 } from "solid-js";
-import { escape, isServer, spread, ssr, useAssets} from "solid-js/web";
+import { escape, isServer, spread, ssr, useAssets, type JSX } from "@solidjs/web";
 
 export const MetaContext = createContext<MetaContextType>();
 
@@ -58,7 +56,7 @@ const getTagKey = (tag: TagDescription, properties: string[]) => {
 };
 
 function initClientProvider() {
- if (!sharedConfig.context) {
+ if (!sharedConfig.hydrating) {
  const ssrTags = document.head.querySelectorAll(`[data-sm]`);
  // `forEach` on `NodeList` is not supported in Googlebot, so use a workaround
  Array.prototype.forEach.call(ssrTags, (ssrTag: Node) => ssrTag.parentNode!.removeChild(ssrTag));
@@ -192,15 +190,15 @@ function initServerProvider() {
  tags.push(tagDesc);
  return tags.length;
  },
- removeTag(tag: TagDescription, index: number) {}
+ removeTag(_tag: TagDescription, _index: number) {}
  };
 }
 
 export const MetaProvider: ParentComponent = props => {
  const actions = !isServer
  ? initClientProvider()
  : initServerProvider();
- return <MetaContext.Provider value={actions!}>{props.children}</MetaContext.Provider>;
+ return <MetaContext value={actions!}>{props.children}</MetaContext>;
 };
 
 const MetaTag = (
@@ -223,12 +221,14 @@ const MetaTag = (
 
 export function useHead(tagDesc: TagDescription) {
  const c = useContext(MetaContext);
- if (!c) throw new Error("<MetaProvider /> should be in the tree");
 
- createRenderEffect(() => {
- const index = c!.addTag(tagDesc);
- onCleanup(() => c!.removeTag(tagDesc, index));
- });
+ createRenderEffect(
+ () => tagDesc,
+ tag => {
+ const index = c.addTag(tag);
+ return () => c.removeTag(tag, index);
+ }
+ );
 }
 
 function renderTags(tags: Array<TagDescription>) {

test/index.spec.tsx

@@ -1,9 +1,8 @@
-/* @jsxImportSource solid-js */
-import { createSignal, getOwner, lazy } from "solid-js";
-import { hydrate, render, Show } from "solid-js/web";
+import { createSignal, flush, getOwner, lazy, Loading, Show } from "solid-js";
+import { hydrate, render } from "@solidjs/web";
 import { MetaProvider, Title, Style, Meta, Link, Base } from "../src";
 import { hydrationScript, removeScript } from "./hydration_script";
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { test, expect, beforeEach, afterEach } from "vitest";
 
 beforeEach(() => {
  document.head.innerHTML = "";
@@ -85,6 +84,7 @@ test("unmount middle child, should show only the last title", () => {
  );
  expect(document.head.innerHTML).toBe(snapshot);
  setVisible(false);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot);
  dispose();
 });
@@ -114,6 +114,7 @@ test("unmount last child, should show only the second last title", () => {
  );
  expect(document.head.innerHTML).toBe(snapshot1);
  setVisible(false);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot2);
  dispose();
 });
@@ -163,8 +164,10 @@ test("mounts and unmounts title", () => {
 
  expect(document.head.innerHTML).toBe(snapshot1);
  setVisible(true);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot2);
  setVisible(false);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot1);
  dispose();
 });
@@ -190,8 +193,10 @@ test("hydrates and unmounts title", () => {
 
  expect(document.head.innerHTML).toBe(snapshot1);
  setVisible(true);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot2);
  setVisible(false);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot1);
  dispose();
  removeScript();
@@ -219,9 +224,11 @@ test("switches between titles", async () => {
  () => (
  <MetaProvider>
  <Title>Static</Title>
- <Show when={visible()} fallback={<Comp2 />}>
- <Comp1 />
- </Show>
+ <Loading fallback={null}>
+ <Show when={visible()} fallback={<Comp2 />}>
+ <Comp1 />
+ </Show>
+ </Loading>
  </MetaProvider>
  ),
  div
@@ -230,6 +237,7 @@ test("switches between titles", async () => {
  await new Promise(resolve => setTimeout(resolve, 1));
  expect(document.head.innerHTML).toBe(snapshot1);
  setVisible(false);
+ flush();
  await new Promise(resolve => setTimeout(resolve, 1));
  expect(document.head.innerHTML).toBe(snapshot2);
  dispose();
@@ -268,14 +276,18 @@ test("renders only the last meta with the same name", () => {
  expect(document.head.innerHTML).toBe(snapshot1);
  // mount first
  setVisible1(true);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot2);
  // mount second
  setVisible2(true);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot3);
  // unmount second
  setVisible2(false);
+ flush();
  // unmount first
  setVisible1(false);
+ flush();
  expect(document.head.innerHTML).toBe(snapshot1);
  dispose();
 });
@@ -322,15 +334,15 @@ test("throws error if head tag is rendered without MetaProvider", () => {
  expect(() => {
  let div = document.createElement("div");
  render(() => <Style>{`body {}`}</Style>, div);
- }).toThrowError(/<MetaProvider \/> should be in the tree/);
+ }).toThrowError(/Context must either be created with a default value/);
 });
 
 test("doesn't create any effect on removal", () => {
  let div = document.createElement("div");
 
  const [show, setShow] = createSignal(true);
  const showAndTest = () => {
- expect(getOwner()?.owner).toBeTruthy();
+ expect(getOwner()?._parent).toBeTruthy();
  return show();
  };
 
@@ -348,6 +360,7 @@ test("doesn't create any effect on removal", () => {
  );
 
  setShow(false);
+ flush();
  dispose();
 });
 

tsconfig.json

@@ -6,7 +6,7 @@
  "moduleResolution": "bundler",
  "strict": true,
  "jsx": "preserve",
- "jsxImportSource": "solid-js"
+ "jsxImportSource": "@solidjs/web"
  },
  "include": [
  "./src"

tsconfig.test.json

@@ -6,7 +6,7 @@
  "strict": true,
  "lib": ["dom", "esnext", "dom.iterable"],
  "jsx": "preserve",
- "jsxImportSource": "solid-js"
+ "jsxImportSource": "@solidjs/web"
  },
  "include": [
  "./test"