Skip to content

Commit

Permalink
feat: change createProvider and createProviderGroup to resolve im…
Browse files Browse the repository at this point in the history 
…mediately (#113)
  • Loading branch information
@lars-berger
lars-berger authored Sep 28, 2024
1 parent c15e0cb commit b143842
Show file tree
Hide file tree
Showing 22 changed files with 208 additions and 198 deletions.
8 changes: 5 additions & 3 deletions examples/boilerplate-react-buildless/index.html
View file
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
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
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
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

0 comments on commit b143842

Please sign in to comment.