Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: change createProvider and createProviderGroup to resolve immediately #113

Merged
merged 3 commits into from
Sep 28, 2024
Merged

feat: change createProvider and createProviderGroup to resolve immediately #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c3409b
feat: change `createProvider` and `createProviderGroup` to be synchro…
lars-berger Sep 28, 2024
27daf4f
feat: change weather provider to fetch ip on rust side
lars-berger Sep 28, 2024
edf1174
feat: update examples with new `createProviderGroup` api
lars-berger Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions examples/boilerplate-react-buildless/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
import { createRoot } from 'https://esm.sh/react-dom@18/client?dev';
import * as zebar from 'https://esm.sh/zebar@2';

const providers = await zebar.createProviderGroup({
const providers = zebar.createProviderGroup({
cpu: { type: 'cpu' },
battery: { type: 'battery' },
memory: { type: 'memory' },
Expand All @@ -46,11 +46,13 @@

return (
<div className="app">
<div className="chip">CPU usage: {output.cpu.usage}</div>
<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">
Memory usage: {output.memory?.usage}
</div>
<div className="chip">
Weather temp: {output.weather?.celsiusTemp}
</div>
Expand Down
8 changes: 3 additions & 5 deletions examples/boilerplate-solid-ts/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import { render } from 'solid-js/web';
import { createStore } from 'solid-js/store';
import * as zebar from 'zebar';

const providers = await zebar.createProviderGroup({
const providers = zebar.createProviderGroup({
cpu: { type: 'cpu' },
battery: { type: 'battery' },
memory: { type: 'memory' },
weather: { type: 'weather' },
keyboard: { type: 'keyboard' },
});

render(() => <App />, document.getElementById('root')!);
Expand All @@ -21,12 +20,11 @@ function App() {

return (
<div class="app">
<div class="chip">Keyboard: {output.keyboard.layout}</div>
<div class="chip">CPU usage: {output.cpu.usage}</div>
<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">Memory usage: {output.memory?.usage}</div>
<div class="chip">Weather temp: {output.weather?.celsiusTemp}</div>
</div>
);
Expand Down
66 changes: 35 additions & 31 deletions examples/starter/vanilla.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
import { createRoot } from 'https://esm.sh/react-dom@18/client?dev';
import * as zebar from 'https://esm.sh/zebar@2';

const providers = await zebar.createProviderGroup({
const providers = zebar.createProviderGroup({
network: { type: 'network' },
cpu: { type: 'cpu' },
date: { type: 'date', formatting: 'EEE d MMM t' },
Expand All @@ -47,23 +47,23 @@
}, []);

// Get icon to show for current network status.
function getNetworkIcon() {
switch (output.network.defaultInterface?.type) {
function getNetworkIcon(networkOutput) {
switch (networkOutput.defaultInterface?.type) {
case 'ethernet':
return <i className="nf nf-md-ethernet_cable"></i>;
case 'wifi':
if (output.network.defaultGateway?.signalStrength >= 80) {
if (networkOutput.defaultGateway?.signalStrength >= 80) {
return <i className="nf nf-md-wifi_strength_4"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 65
networkOutput.defaultGateway?.signalStrength >= 65
) {
return <i className="nf nf-md-wifi_strength_3"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 40
networkOutput.defaultGateway?.signalStrength >= 40
) {
return <i className="nf nf-md-wifi_strength_2"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 25
networkOutput.defaultGateway?.signalStrength >= 25
) {
return <i className="nf nf-md-wifi_strength_1"></i>;
} else {
Expand All @@ -77,21 +77,21 @@
}

// Get icon to show for how much of the battery is charged.
function getBatteryIcon() {
if (output.battery.chargePercent > 90)
function getBatteryIcon(batteryOutput) {
if (batteryOutput.chargePercent > 90)
return <i className="nf nf-fa-battery_4"></i>;
if (output.battery.chargePercent > 70)
if (batteryOutput.chargePercent > 70)
return <i className="nf nf-fa-battery_3"></i>;
if (output.battery.chargePercent > 40)
if (batteryOutput.chargePercent > 40)
return <i className="nf nf-fa-battery_2"></i>;
if (output.battery.chargePercent > 20)
if (batteryOutput.chargePercent > 20)
return <i className="nf nf-fa-battery_1"></i>;
return <i className="nf nf-fa-battery_0"></i>;
}

// Get icon to show for current weather status.
function getWeatherIcon() {
switch (output.weather.status) {
function getWeatherIcon(weatherOutput) {
switch (weatherOutput.status) {
case 'clear_day':
return <i className="nf nf-weather-day_sunny"></i>;
case 'clear_night':
Expand Down Expand Up @@ -125,46 +125,50 @@
<i className="logo nf nf-fa-windows"></i>
</div>

<div className="center">{output.date.formatted}</div>
<div className="center">{output.date?.formatted}</div>

<div className="right">
{output.network && (
<div className="network">
{getNetworkIcon()}
{getNetworkIcon(output.network)}
{output.network.defaultGateway?.ssid}
</div>
)}

<div className="memory">
<i className="nf nf-fae-chip"></i>
{Math.round(output.memory.usage)}%
</div>
{output.memory && (
<div className="memory">
<i className="nf nf-fae-chip"></i>
{Math.round(output.memory.usage)}%
</div>
)}

<div className="cpu">
<i className="nf nf-oct-cpu"></i>
{output.cpu && (
<div className="cpu">
<i className="nf nf-oct-cpu"></i>

{/* Change the text color if the CPU usage is high. */}
<span
className={output.cpu.usage > 85 ? 'high-usage' : ''}
>
{Math.round(output.cpu.usage)}%
</span>
</div>
{/* Change the text color if the CPU usage is high. */}
<span
className={output.cpu.usage > 85 ? 'high-usage' : ''}
>
{Math.round(output.cpu.usage)}%
</span>
</div>
)}

{output.battery && (
<div className="battery">
{/* Show icon for whether battery is charging. */}
{output.battery.isCharging && (
<i className="nf nf-md-power_plug charging-icon"></i>
)}
{getBatteryIcon()}
{getBatteryIcon(output.battery)}
{Math.round(output.battery.chargePercent)}%
</div>
)}

{output.weather && (
<div className="weather">
{getWeatherIcon()}
{getWeatherIcon(output.weather)}
{Math.round(output.weather.celsiusTemp)}°C
</div>
)}
Expand Down
68 changes: 36 additions & 32 deletions examples/starter/with-glazewm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
import { createRoot } from 'https://esm.sh/react-dom@18/client?dev';
import * as zebar from 'https://esm.sh/zebar@2';

const providers = await zebar.createProviderGroup({
const providers = zebar.createProviderGroup({
network: { type: 'network' },
glazewm: { type: 'glazewm' },
cpu: { type: 'cpu' },
Expand All @@ -48,23 +48,23 @@
}, []);

// Get icon to show for current network status.
function getNetworkIcon() {
switch (output.network.defaultInterface?.type) {
function getNetworkIcon(networkOutput) {
switch (networkOutput.defaultInterface?.type) {
case 'ethernet':
return <i className="nf nf-md-ethernet_cable"></i>;
case 'wifi':
if (output.network.defaultGateway?.signalStrength >= 80) {
if (networkOutput.defaultGateway?.signalStrength >= 80) {
return <i className="nf nf-md-wifi_strength_4"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 65
networkOutput.defaultGateway?.signalStrength >= 65
) {
return <i className="nf nf-md-wifi_strength_3"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 40
networkOutput.defaultGateway?.signalStrength >= 40
) {
return <i className="nf nf-md-wifi_strength_2"></i>;
} else if (
output.network.defaultGateway?.signalStrength >= 25
networkOutput.defaultGateway?.signalStrength >= 25
) {
return <i className="nf nf-md-wifi_strength_1"></i>;
} else {
Expand All @@ -78,21 +78,21 @@
}

// Get icon to show for how much of the battery is charged.
function getBatteryIcon() {
if (output.battery.chargePercent > 90)
function getBatteryIcon(batteryOutput) {
if (batteryOutput.chargePercent > 90)
return <i className="nf nf-fa-battery_4"></i>;
if (output.battery.chargePercent > 70)
if (batteryOutput.chargePercent > 70)
return <i className="nf nf-fa-battery_3"></i>;
if (output.battery.chargePercent > 40)
if (batteryOutput.chargePercent > 40)
return <i className="nf nf-fa-battery_2"></i>;
if (output.battery.chargePercent > 20)
if (batteryOutput.chargePercent > 20)
return <i className="nf nf-fa-battery_1"></i>;
return <i className="nf nf-fa-battery_0"></i>;
}

// Get icon to show for current weather status.
function getWeatherIcon() {
switch (output.weather.status) {
function getWeatherIcon(weatherOutput) {
switch (weatherOutput.status) {
case 'clear_day':
return <i className="nf nf-weather-day_sunny"></i>;
case 'clear_night':
Expand Down Expand Up @@ -143,7 +143,7 @@
)}
</div>

<div className="center">{output.date.formatted}</div>
<div className="center">{output.date?.formatted}</div>

<div className="right">
{output.glazewm && (
Expand All @@ -160,49 +160,53 @@
<button
className={`tiling-direction nf ${output.glazewm.tilingDirection === 'horizontal' ? 'nf-md-swap_horizontal' : 'nf-md-swap_vertical'}`}
onClick={() =>
output.glazewm.runCommand(`toggle-tiling-direction`)
output.glazewm.runCommand('toggle-tiling-direction')
}
></button>
</>
)}

{output.network && (
<div className="network">
{getNetworkIcon()}
{getNetworkIcon(output.network)}
{output.network.defaultGateway?.ssid}
</div>
)}

<div className="memory">
<i className="nf nf-fae-chip"></i>
{Math.round(output.memory.usage)}%
</div>
{output.memory && (
<div className="memory">
<i className="nf nf-fae-chip"></i>
{Math.round(output.memory.usage)}%
</div>
)}

<div className="cpu">
<i className="nf nf-oct-cpu"></i>
{output.cpu && (
<div className="cpu">
<i className="nf nf-oct-cpu"></i>

{/* Change the text color if the CPU usage is high. */}
<span
className={output.cpu.usage > 85 ? 'high-usage' : ''}
>
{Math.round(output.cpu.usage)}%
</span>
</div>
{/* Change the text color if the CPU usage is high. */}
<span
className={output.cpu.usage > 85 ? 'high-usage' : ''}
>
{Math.round(output.cpu.usage)}%
</span>
</div>
)}

{output.battery && (
<div className="battery">
{/* Show icon for whether battery is charging. */}
{output.battery.isCharging && (
<i className="nf nf-md-power_plug charging-icon"></i>
)}
{getBatteryIcon()}
{getBatteryIcon(output.battery)}
{Math.round(output.battery.chargePercent)}%
</div>
)}

{output.weather && (
<div className="weather">
{getWeatherIcon()}
{getWeatherIcon(output.weather)}
{Math.round(output.weather.celsiusTemp)}°C
</div>
)}
Expand Down
Loading