lochie · UnvirtualHH · Mar 10, 2026
diff --git a/apps/solid-example/index.html b/apps/solid-example/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WebHaptics Solid Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/solid-example/package.json b/apps/solid-example/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "solid-example",
+  "private": true,
+  "version": "0.0.6",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.0",
+    "web-haptics": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}
diff --git a/apps/solid-example/src/App.tsx b/apps/solid-example/src/App.tsx
@@ -0,0 +1,19 @@
+import { useWebHaptics } from "web-haptics/solid";
+
+export default function App() {
+  const { trigger } = useWebHaptics();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        "justify-content": "center",
+        "align-items": "center",
+        height: "100vh",
+        "font-size": "2rem",
+      }}
+    >
+      <button onClick={() => trigger()}>Tap me</button>
+    </div>
+  );
+}
diff --git a/apps/solid-example/src/main.tsx b/apps/solid-example/src/main.tsx
@@ -0,0 +1,4 @@
+import { render } from "solid-js/web";
+import App from "./App";
+
+render(() => <App />, document.getElementById("root")!);
diff --git a/apps/solid-example/tsconfig.json b/apps/solid-example/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/apps/solid-example/vite.config.ts b/apps/solid-example/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solid()],
+});
diff --git a/packages/web-haptics/package.json b/packages/web-haptics/package.json
@@ -34,6 +34,11 @@
       "types": "./dist/svelte/index.d.ts",
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.js"
+    },
+    "./solid": {
+      "types": "./dist/solid/index.d.ts",
+      "import": "./dist/solid/index.mjs",
+      "require": "./dist/solid/index.js"
     }
   },
   "publishConfig": {
@@ -56,6 +61,8 @@
     "react",
     "vue",
     "svelte",
+    "solid",
+    "solidjs",
     "typescript"
   ],
   "bugs": {
@@ -73,7 +80,8 @@
     "react": ">=18",
     "react-dom": ">=18",
     "vue": ">=3",
-    "svelte": ">=4"
+    "svelte": ">=4",
+    "solid-js": ">=1.6"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -87,6 +95,9 @@
     },
     "svelte": {
       "optional": true
+    },
+    "solid-js": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -105,6 +116,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "solid-js": "^1.9.0",
     "svelte": "^4.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",

diff --git a/packages/web-haptics/src/solid/index.ts b/packages/web-haptics/src/solid/index.ts
@@ -0,0 +1 @@
+export { useWebHaptics } from "./useWebHaptics";
diff --git a/packages/web-haptics/src/solid/types.ts b/packages/web-haptics/src/solid/types.ts
@@ -0,0 +1,8 @@
+export type {
+  Vibration,
+  HapticPattern,
+  HapticPreset,
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
diff --git a/packages/web-haptics/src/solid/useWebHaptics.ts b/packages/web-haptics/src/solid/useWebHaptics.ts
@@ -0,0 +1,49 @@
+import { onMount, onCleanup, createEffect, on } from "solid-js";
+import { WebHaptics } from "../lib/web-haptics";
+import type {
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
+
+export function useWebHaptics(options?: () => WebHapticsOptions) {
+  let instance: WebHaptics | null = null;
+
+  onMount(() => {
+    instance = new WebHaptics(options?.());
+  });
+
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+
+  createEffect(
+    on(
+      () => options?.()?.debug,
+      (debug) => {
+        instance?.setDebug(debug ?? false);
+      },
+      { defer: true },
+    ),
+  );
+
+  createEffect(
+    on(
+      () => options?.()?.showSwitch,
+      (showSwitch) => {
+        instance?.setShowSwitch(showSwitch ?? false);
+      },
+      { defer: true },
+    ),
+  );
+
+  const trigger = (input?: HapticInput, opts?: TriggerOptions) =>
+    instance?.trigger(input, opts);
+
+  const cancel = () => instance?.cancel();
+
+  const isSupported = WebHaptics.isSupported;
+
+  return { trigger, cancel, isSupported };
+}
diff --git a/packages/web-haptics/tsup.config.ts b/packages/web-haptics/tsup.config.ts
@@ -64,6 +64,19 @@ export default defineConfig((options) => {
       esbuildPlugins: [aliasCorePlugin],
       minify: !options.watch,
     },
+    // Solid
+    {
+      entry: {
+        "solid/index": "src/solid/index.ts",
+      },
+      format: ["cjs", "esm"],
+      dts: true,
+      target: "es2022",
+      treeshake: true,
+      external: ["solid-js"],
+      esbuildPlugins: [aliasCorePlugin],
+      minify: !options.watch,
+    },
   ];
 
   return configs;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useWebHaptics } from "./useWebHaptics";