glzr-io · lars-berger · Sep 17, 2024 · Aug 21, 2024 · Aug 21, 2024 · Aug 21, 2024
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,7 @@ gen
 .DS_Store
 *.pem
 *.env
+examples/settings.json
 
 # Debug
 npm-debug.log*

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+link-workspace-packages=true
+prefer-workspace-packages=true
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -11,9 +11,7 @@
           "--manifest-path=./packages/desktop/Cargo.toml",
           "--no-default-features"
         ]
-      },
-      // Task for the `beforeDevCommand`, if used.
-      "preLaunchTask": "ui:dev"
+      }
     },
     {
       "type": "lldb",
@@ -25,9 +23,7 @@
           "--release",
           "--manifest-path=./packages/desktop/Cargo.toml"
         ]
-      },
-      // Task for the `beforeBuildCommand`, if used.
-      "preLaunchTask": "ui:build"
+      }
     }
   ]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -31,10 +31,9 @@ pnpm dev
 
 ## Architecture
 
-Zebar is split into 3 packages:
+Zebar is split into 2 packages:
 
 - `desktop` - a Tauri app which is a CLI that can spawn windows.
-- `client` - a SolidJS frontend which is spawned by Tauri on `zebar open <window_name>`.
 - `client-api` - business logic for communicating with Tauri.
 
 ### How to create a new provider?

diff --git a/examples/boilerplates/react-buildless/index.html b/examples/boilerplates/react-buildless/index.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" type="text/css" href="../../normalize.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react?dev",
+          "react-dom/client": "https://esm.sh/react-dom/client?dev",
+          "zebar": "https://esm.sh/zebar"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="text/babel" data-type="module">
+      import React, { useState, useEffect } from 'react';
+      import { createRoot } from 'react-dom/client';
+      import { init } from 'zebar';
+
+      const zebarCtx = await init();
+
+      const providers = await zebarCtx.createProviderGroup({
+        cpu: { type: 'cpu' },
+        battery: { type: 'battery' },
+        memory: { type: 'memory' },
+        weather: { type: 'weather' },
+      });
+
+      createRoot(document.getElementById('root')).render(<App />);
+
+      function App() {
+        const [output, setOutput] = useState(providers.outputMap);
+
+        useEffect(() => {
+          providers.onOutput(() => setOutput(providers.outputMap));
+        }, []);
+
+        return (
+          <div className="app">
+            <div className="chip">CPU usage: {output.cpu.usage}</div>
+            <div className="chip">
+              Battery charge: {output.battery?.chargePercent}
+            </div>
+            <div className="chip">Memory usage: {output.memory.usage}</div>
+            <div className="chip">
+              Weather temp: {output.weather?.celsiusTemp}
+            </div>
+          </div>
+        );
+      }
+    </script>
+  </body>
+</html>
diff --git a/examples/boilerplates/react-buildless/my-window.zebar.json b/examples/boilerplates/react-buildless/my-window.zebar.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "TODO",
+  "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"
+        }
+      }
+    ]
+  }
+}
diff --git a/examples/boilerplates/react-buildless/styles.css b/examples/boilerplates/react-buildless/styles.css
@@ -0,0 +1,23 @@
+body {
+  color: rgb(255 255 255 / 90%);
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.app {
+  text-align: center;
+}
+
+.chip {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgb(84, 66, 220);
+  margin-right: 4px;
+}
diff --git a/examples/boilerplates/solid-ts/.gitignore b/examples/boilerplates/solid-ts/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
diff --git a/examples/boilerplates/solid-ts/README.md b/examples/boilerplates/solid-ts/README.md
@@ -0,0 +1,22 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
diff --git a/examples/boilerplates/solid-ts/dist/index.html b/examples/boilerplates/solid-ts/dist/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Zebar</title>
+  </head>
+  <body>
+    <p>
+      Boilerplate for SolidJS with TypeScript. Run <code>npm i</code> and
+      <code>npm run dev</code> in the <code>solid-ts</code> directory to
+      run this example.
+    </p>
+  </body>
+</html>
diff --git a/packages/client/index.html → examples/boilerplates/solid-ts/index.html b/packages/client/index.html → examples/boilerplates/solid-ts/index.html
@@ -4,13 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="referrer" content="no-referrer" />
     <title>Zebar</title>
+    <link rel="stylesheet" type="text/css" href="../../normalize.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="zebar"></div>
-
-    <script src="/src/index.tsx" type="module"></script>
+    <div id="root"></div>
+    <script src="./src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/examples/boilerplates/solid-ts/my-window.zebar.json b/examples/boilerplates/solid-ts/my-window.zebar.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "TODO",
+  "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"
+        }
+      }
+    ]
+  }
+}
diff --git a/examples/boilerplates/solid-ts/package.json b/examples/boilerplates/solid-ts/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "solidjs-ts",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "solid-js": "1.8.11",
+    "zebar": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "vite": "5.0.11",
+    "vite-plugin-solid": "2.8.2"
+  }
+}
diff --git a/examples/boilerplates/solid-ts/src/index.css b/examples/boilerplates/solid-ts/src/index.css
@@ -0,0 +1,23 @@
+body {
+  color: rgb(255 255 255 / 90%);
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.app {
+  text-align: center;
+}
+
+.chip {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgb(84, 66, 220);
+  margin-right: 4px;
+}
diff --git a/examples/boilerplates/solid-ts/src/index.tsx b/examples/boilerplates/solid-ts/src/index.tsx
@@ -0,0 +1,33 @@
+/* @refresh reload */
+import './index.css';
+import { render } from 'solid-js/web';
+import { createStore } from 'solid-js/store';
+import { init } from 'zebar';
+
+const zebarCtx = await init();
+
+const providers = await zebarCtx.createProviderGroup({
+  cpu: { type: 'cpu' },
+  battery: { type: 'battery' },
+  memory: { type: 'memory' },
+  weather: { type: 'weather' },
+});
+
+render(() => <App />, document.getElementById('root')!);
+
+function App() {
+  const [output, setOutput] = createStore(providers.outputMap);
+
+  providers.onOutput(outputMap => setOutput(outputMap));
+
+  return (
+    <div class="app">
+      <div class="chip">CPU usage: {output.cpu.usage}</div>
+      <div class="chip">
+        Battery charge: {output.battery?.chargePercent}
+      </div>
+      <div class="chip">Memory usage: {output.memory.usage}</div>
+      <div class="chip">Weather temp: {output.weather?.celsiusTemp}</div>
+    </div>
+  );
+}
diff --git a/examples/boilerplates/solid-ts/tsconfig.json b/examples/boilerplates/solid-ts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true
+  }
+}
diff --git a/examples/boilerplates/solid-ts/vite.config.ts b/examples/boilerplates/solid-ts/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: { target: 'esnext' },
+  base: './',
+});