feat: rename windows -> widgets; add json schema for configs (#110)

glzr-io · Sep 27, 2024 · 052e490 · 052e490
1 parent be18d9f
commit 052e490
Show file tree

Hide file tree

Showing 44 changed files with 715 additions and 956 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ When Zebar is first launched, a set of default widget configs are generated to `
 
 To create a new widget, simply copy its config file into the `%userprofile%/.glzr/zebar` directory.
 
-Widgets are powered by native webviews (_similar_ to Electron, but less resource heavy). Every widget has its own config file and a corresponding HTML file for the markup and styling of the window. This is an ordinary HTML file, so any frontend framework (React, Angular, Vue, etc.) can be used.
+Widgets are powered by native webviews (_similar_ to Electron, but less resource heavy). Every widget has its own config file and a corresponding HTML file for the markup and styling of the widget. This is an ordinary HTML file, so any frontend framework (React, Angular, Vue, etc.) can be used.
 
 Zebar exposes various system information (refered to as "providers") which can be used and displayed by your frontend. This includes stats like CPU usage, battery info, various window manager integrations, and lots more.
 
@@ -134,7 +134,7 @@ No config options.
 | `allWorkspaces` | Workspaces across all monitors.        | `Workspace[]` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `allMonitors` | All monitors.        | `Monitor[]` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `focusedMonitor` | Monitor that currently has focus.        | `Monitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
-| `currentMonitor` | Monitor that is nearest to this Zebar window.        | `Monitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
+| `currentMonitor` | Monitor that is nearest to this Zebar widget.        | `Monitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `focusedContainer` | Container that currently has focus (on any monitor).        | `Container` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `tilingDirection` | Tiling direction of the focused container.        | `TilingDirection` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `bindingModes` | Active binding modes;        | `BindingModeConfig[]` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
@@ -268,7 +268,7 @@ No config options.
 | `allWorkspaces` | Workspaces across all monitors.        | `KomorebiWorkspace[]` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `allMonitors` | All monitors.        | `KomorebiMonitor[]` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 | `focusedMonitor` | Monitor that currently has focus.        | `KomorebiMonitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
-| `currentMonitor` | Monitor that is nearest to this Zebar window.        | `KomorebiMonitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
+| `currentMonitor` | Monitor that is nearest to this Zebar widget.        | `KomorebiMonitor` | <img src="https://github.com/glzr-io/zebar/assets/34844898/568e90c8-cd32-49a5-a17f-ab233d41f1aa" alt="microsoft icon" width="24"> |
 
 
 ### Weather

diff --git a/examples/boilerplates/react-buildless/index.html b/examples/boilerplates/react-buildless/index.html
@@ -24,11 +24,9 @@
     <script type="text/babel" data-type="module">
       import React, { useState, useEffect } from 'react';
       import { createRoot } from 'react-dom/client';
-      import { init } from 'zebar';
+      import * as zebar from 'zebar';
 
-      const zebarCtx = await init();
-
-      const providers = await zebarCtx.createProviderGroup({
+      const providers = await zebar.createProviderGroup({
         cpu: { type: 'cpu' },
         battery: { type: 'battery' },
         memory: { type: 'memory' },

diff --git a/examples/boilerplates/react-buildless/my-window.zebar.json b/examples/boilerplates/react-buildless/my-window.zebar.json
@@ -1,23 +1,21 @@
 {
-  "$schema": "TODO",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./index.html",
-  "launchOptions": {
-    "zOrder": "normal",
-    "shownInTaskbar": false,
-    "focused": false,
-    "resizable": false,
-    "transparent": false,
-    "placements": [
-      {
-        "anchor": "top_left",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "width": "100%",
-        "height": "40px",
-        "monitorSelection": {
-          "type": "all"
-        }
+  "zOrder": "normal",
+  "shownInTaskbar": false,
+  "focused": false,
+  "resizable": false,
+  "transparent": false,
+  "defaultPlacements": [
+    {
+      "anchor": "top_left",
+      "offsetX": "0px",
+      "offsetY": "0px",
+      "width": "100%",
+      "height": "40px",
+      "monitorSelection": {
+        "type": "all"
       }
-    ]
-  }
+    }
+  ]
 }
diff --git a/examples/boilerplates/solid-ts/my-window.zebar.json b/examples/boilerplates/solid-ts/my-window.zebar.json
@@ -1,23 +1,21 @@
 {
-  "$schema": "TODO",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./dist/index.html",
-  "launchOptions": {
-    "zOrder": "normal",
-    "shownInTaskbar": false,
-    "focused": false,
-    "resizable": false,
-    "transparent": false,
-    "placements": [
-      {
-        "anchor": "top_left",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "width": "100%",
-        "height": "40px",
-        "monitorSelection": {
-          "type": "all"
-        }
+  "zOrder": "normal",
+  "shownInTaskbar": false,
+  "focused": false,
+  "resizable": false,
+  "transparent": false,
+  "defaultPlacements": [
+    {
+      "anchor": "top_left",
+      "offsetX": "0px",
+      "offsetY": "0px",
+      "width": "100%",
+      "height": "40px",
+      "monitorSelection": {
+        "type": "all"
       }
-    ]
-  }
+    }
+  ]
 }
diff --git a/examples/boilerplates/solid-ts/src/index.tsx b/examples/boilerplates/solid-ts/src/index.tsx
@@ -2,11 +2,9 @@
 import './index.css';
 import { render } from 'solid-js/web';
 import { createStore } from 'solid-js/store';
-import { init } from 'zebar';
+import * as zebar from 'zebar';
 
-const zebarCtx = await init();
-
-const providers = await zebarCtx.createProviderGroup({
+const providers = await zebar.createProviderGroup({
   cpu: { type: 'cpu' },
   battery: { type: 'battery' },
   memory: { type: 'memory' },

diff --git a/examples/starter/vanilla.html b/examples/starter/vanilla.html
@@ -24,11 +24,9 @@
     <script type="text/babel" data-type="module">
       import React, { useState, useEffect } from 'react';
       import { createRoot } from 'react-dom/client';
-      import { init } from 'zebar';
+      import * as zebar from 'zebar';
 
-      const zebarCtx = await init();
-
-      const providers = await zebarCtx.createProviderGroup({
+      const providers = await zebar.createProviderGroup({
         network: { type: 'network' },
         cpu: { type: 'cpu' },
         date: { type: 'date', formatting: 'EEE d MMM t' },

diff --git a/examples/starter/vanilla.zebar.json b/examples/starter/vanilla.zebar.json
@@ -1,23 +1,21 @@
 {
-  "$schema": "TODO",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./vanilla.html",
-  "launchOptions": {
-    "zOrder": "normal",
-    "shownInTaskbar": false,
-    "focused": false,
-    "resizable": false,
-    "transparent": false,
-    "placements": [
-      {
-        "anchor": "top_left",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "width": "100%",
-        "height": "40px",
-        "monitorSelection": {
-          "type": "all"
-        }
+  "zOrder": "normal",
+  "shownInTaskbar": false,
+  "focused": false,
+  "resizable": false,
+  "transparent": false,
+  "defaultPlacements": [
+    {
+      "anchor": "top_left",
+      "offsetX": "0px",
+      "offsetY": "0px",
+      "width": "100%",
+      "height": "40px",
+      "monitorSelection": {
+        "type": "all"
       }
-    ]
-  }
+    }
+  ]
 }
diff --git a/examples/starter/with-glazewm.html b/examples/starter/with-glazewm.html
@@ -24,11 +24,9 @@
     <script type="text/babel" data-type="module">
       import React, { useState, useEffect } from 'react';
       import { createRoot } from 'react-dom/client';
-      import { init } from 'zebar';
+      import * as zebar from 'zebar';
 
-      const zebarCtx = await init();
-
-      const providers = await zebarCtx.createProviderGroup({
+      const providers = await zebar.createProviderGroup({
         network: { type: 'network' },
         glazewm: { type: 'glazewm' },
         cpu: { type: 'cpu' },

diff --git a/examples/starter/with-glazewm.zebar.json b/examples/starter/with-glazewm.zebar.json
@@ -1,23 +1,21 @@
 {
-  "$schema": "TODO",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./with-glazewm.html",
-  "launchOptions": {
-    "zOrder": "normal",
-    "shownInTaskbar": false,
-    "focused": false,
-    "resizable": false,
-    "transparent": false,
-    "placements": [
-      {
-        "anchor": "top_left",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "width": "100%",
-        "height": "40px",
-        "monitorSelection": {
-          "type": "all"
-        }
+  "zOrder": "normal",
+  "shownInTaskbar": false,
+  "focused": false,
+  "resizable": false,
+  "transparent": false,
+  "defaultPlacements": [
+    {
+      "anchor": "top_left",
+      "offsetX": "0px",
+      "offsetY": "0px",
+      "width": "100%",
+      "height": "40px",
+      "monitorSelection": {
+        "type": "all"
       }
-    ]
-  }
+    }
+  ]
 }
diff --git a/examples/starter/with-komorebi.html b/examples/starter/with-komorebi.html
@@ -24,11 +24,9 @@
     <script type="text/babel" data-type="module">
       import React, { useState, useEffect } from 'react';
       import { createRoot } from 'react-dom/client';
-      import { init } from 'zebar';
+      import * as zebar from 'zebar';
 
-      const zebarCtx = await init();
-
-      const providers = await zebarCtx.createProviderGroup({
+      const providers = await zebar.createProviderGroup({
         network: { type: 'network' },
         komorebi: { type: 'komorebi' },
         cpu: { type: 'cpu' },

diff --git a/examples/starter/with-komorebi.zebar.json b/examples/starter/with-komorebi.zebar.json
@@ -1,23 +1,21 @@
 {
-  "$schema": "TODO",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
   "htmlPath": "./with-komorebi.html",
-  "launchOptions": {
-    "zOrder": "normal",
-    "shownInTaskbar": false,
-    "focused": false,
-    "resizable": false,
-    "transparent": false,
-    "placements": [
-      {
-        "anchor": "top_left",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "width": "100%",
-        "height": "40px",
-        "monitorSelection": {
-          "type": "all"
-        }
+  "zOrder": "normal",
+  "shownInTaskbar": false,
+  "focused": false,
+  "resizable": false,
+  "transparent": false,
+  "defaultPlacements": [
+    {
+      "anchor": "top_left",
+      "offsetX": "0px",
+      "offsetY": "0px",
+      "width": "100%",
+      "height": "40px",
+      "monitorSelection": {
+        "type": "all"
       }
-    ]
-  }
+    }
+  ]
 }
diff --git a/packages/client-api/src/desktop/current-window.ts b/packages/client-api/src/desktop/current-window.ts