platform: Correct isSafari, add isBrave

solidjs-community · Sep 6, 2023 · 1b286ba · 1b286ba
1 parent 2612bdc
commit 1b286ba
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/.changeset/friendly-laws-scream.md b/.changeset/friendly-laws-scream.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/platform": minor
+---
+
+Correct `isSafari`, add `isBrave`
diff --git a/packages/platform/README.md b/packages/platform/README.md
@@ -16,6 +16,8 @@ A set of const boolean variables identifying device and browser type.
 ```bash
 npm install @solid-primitives/platform
 # or
+pnpm add @solid-primitives/platform
+# or
 yarn add @solid-primitives/platform
 ```
 
@@ -33,6 +35,10 @@ if (isWebKit) {
 }
 ```
 
+> **Note:** This package is tree-shakable, all unused variables will be removed from the bundle.
+
+> **Note:** On the server, all variables will be `false`.
+
 ## List of variables
 
 ### Device
@@ -71,6 +77,8 @@ if (isWebKit) {
 
 - `isChrome` — Browser is Chrome
 
+- `isBrave` — Browser is Brave
+
 ### Rendering Engine
 
 - `isGecko` — Browser using Gecko Rendering Engine

diff --git a/packages/platform/dev/index.tsx b/packages/platform/dev/index.tsx
@@ -8,19 +8,14 @@ const App: Component = () => {
       <div class="wrapper-v">
         <h4>Platform:</h4>
         <ul>
-          {Object.entries(platform).map(([name, value]) => {
-            return (
-              <li>
-                <h5
-                  style={{
-                    color: value ? "green" : "red",
-                  }}
-                >
-                  {name.substring(2)}
-                </h5>
-              </li>
-            );
-          })}
+          {Object.entries(platform).map(([name, value]) => (
+            <li>
+              <h5
+                class={value ? "text-green-500" : "text-red-500"}
+                textContent={name.substring(2)}
+              />
+            </li>
+          ))}
         </ul>
       </div>
     </div>

diff --git a/packages/platform/src/index.ts b/packages/platform/src/index.ts
@@ -2,7 +2,7 @@ import { isServer } from "solid-js/web";
 
 const w = isServer ? { document: {}, navigator: { userAgent: "" } } : (window as any);
 const n = w.navigator;
-const ua = isServer ? "" : n.userAgent;
+const ua = n.userAgent;
 
 //
 // Devices
@@ -48,8 +48,7 @@ export const isOpera: boolean =
 
 /** Browser is Safari */
 export const isSafari: boolean =
-  /*#__PURE__*/ /constructor/i.test(w.HTMLElement) ||
-  w.safari?.pushNotification + "" === "[object SafariRemoteNotification]";
+  n.vendor && n.vendor.includes("Apple") && ua && !ua.includes("CriOS") && !ua.includes("FxiOS");
 
 /** Browser is Internet Explorer 6-11 */
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -64,6 +63,9 @@ export const isEdge: boolean = /*#__PURE__*/ /Edg/.test(ua) && isChromium;
 /** Browser is Chrome */
 export const isChrome: boolean = isChromium && n.vendor === "Google Inc." && !isOpera && !isEdge;
 
+/** Browser is Brave */
+export const isBrave: boolean = n.brave && n.brave.isBrave && n.brave.isBrave.name === "isBrave";
+
 //
 // Rendering Engines
 //