@perspective-dev/viewer 4.0.0

package/src/rust/components/status_bar_counter.rs

@@ -0,0 +1,229 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use perspective_client::*;
+use yew::prelude::*;
+
+use crate::session::{Session, ViewStats};
+use crate::utils::{AddListener, ToFormattedString};
+
+#[derive(Properties, PartialEq)]
+pub struct StatusBarRowsCounterProps {
+    pub session: Session,
+}
+
+#[function_component]
+pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
+    let stats = use_state_eq(|| props.session.get_table_stats());
+    use_effect_with(
+        (props.session.clone(), stats.setter()),
+        |(session, set_stats)| {
+            let sub = session.stats_changed.add_listener({
+                clone!(session, set_stats);
+                move |_| set_stats.set(session.get_table_stats())
+            });
+
+            || drop(sub)
+        },
+    );
+
+    match props.session.get_table_stats() {
+        Some(
+            ViewStats {
+                num_table_cells: Some((tr, tc)),
+                num_view_cells: Some((vr, vc)),
+                is_group_by: true,
+                ..
+            }
+            | ViewStats {
+                num_table_cells: Some((tr, tc)),
+                num_view_cells: Some((vr, vc)),
+                is_filtered: true,
+                ..
+            },
+        ) if vc != tc => {
+            let vrows = vr.to_formatted_string();
+            let nrows = tr.to_formatted_string();
+            let vcols = vc.to_formatted_string();
+            let ncols = tc.to_formatted_string();
+            html! {
+                <span id="rows">
+                    { vrows }
+                    <span>{ format!(" ({}) x ", nrows) }</span>
+                    { vcols }
+                    <span>{ format!(" ({})", ncols) }</span>
+                </span>
+            }
+        },
+
+        Some(
+            ViewStats {
+                num_table_cells: Some((tr, _)),
+                num_view_cells: Some((vr, vc)),
+                is_group_by: true,
+                ..
+            }
+            | ViewStats {
+                num_table_cells: Some((tr, _)),
+                num_view_cells: Some((vr, vc)),
+                is_filtered: true,
+                ..
+            },
+        ) => {
+            let vrows = vr.to_formatted_string();
+            let nrows = tr.to_formatted_string();
+            let vcols = vc.to_formatted_string();
+            html! {
+                <span id="rows">{ vrows }<span>{ format!(" ({}) x ", nrows) }</span>{ vcols }</span>
+            }
+        },
+
+        Some(ViewStats {
+            num_table_cells: Some((_, tc)),
+            num_view_cells: Some((vr, vc)),
+            ..
+        }) if vc != tc => {
+            let vrows = vr.to_formatted_string();
+            let vcols = vc.to_formatted_string();
+            let ncols = tc.to_formatted_string();
+            html! {
+                <span id="rows">
+                    { vrows }
+                    <span>{ " x " }</span>
+                    { vcols }
+                    <span>{ format!(" ({})", ncols) }</span>
+                </span>
+            }
+        },
+
+        Some(ViewStats {
+            num_table_cells: Some((tr, tc)),
+            ..
+        }) => {
+            let nrows = tr.to_formatted_string();
+            let ncols = tc.to_formatted_string();
+            html! { <span id="rows">{ nrows }<span>{ " x " }</span>{ ncols }</span> }
+        },
+        Some(ViewStats {
+            num_table_cells: None,
+            ..
+        }) => html! { <span /> },
+        None => html! { <span /> },
+    }
+}
+
+// /// A label widget which displays a row count and a "projection" count, the
+// /// number of rows in the `View` which includes aggregate rows.
+// pub struct StatusBarRowsCounter {}
+
+// impl Component for StatusBarRowsCounter {
+//     type Message = ();
+//     type Properties = ();
+
+//     fn create(_ctx: &Context<Self>) -> Self {
+//         Self {}
+//     }
+
+//     fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
+//         false
+//     }
+
+//     fn view(&self, ctx: &Context<Self>) -> Html {
+//         match &ctx.props().stats {
+//             Some(
+//                 ViewStats {
+//                     num_table_cells: Some((tr, tc)),
+//                     num_view_cells: Some((vr, vc)),
+//                     is_group_by: true,
+//                     ..
+//                 }
+//                 | ViewStats {
+//                     num_table_cells: Some((tr, tc)),
+//                     num_view_cells: Some((vr, vc)),
+//                     is_filtered: true,
+//                     ..
+//                 },
+//             ) if vc != tc => {
+//                 let vrows = vr.to_formatted_string();
+//                 let nrows = tr.to_formatted_string();
+//                 let vcols = vc.to_formatted_string();
+//                 let ncols = tc.to_formatted_string();
+//                 html! {
+//                     <span id="rows">
+//                         { vrows }
+//                         <span>{ format!(" ({}) x ", nrows) }</span>
+//                         { vcols }
+//                         <span>{ format!(" ({})", ncols) }</span>
+//                     </span>
+//                 }
+//             },
+
+//             Some(
+//                 ViewStats {
+//                     num_table_cells: Some((tr, _)),
+//                     num_view_cells: Some((vr, vc)),
+//                     is_group_by: true,
+//                     ..
+//                 }
+//                 | ViewStats {
+//                     num_table_cells: Some((tr, _)),
+//                     num_view_cells: Some((vr, vc)),
+//                     is_filtered: true,
+//                     ..
+//                 },
+//             ) => {
+//                 let vrows = vr.to_formatted_string();
+//                 let nrows = tr.to_formatted_string();
+//                 let vcols = vc.to_formatted_string();
+//                 html! {
+//                     <span id="rows">
+//                         { vrows }
+//                         <span>{ format!(" ({}) x ", nrows) }</span>
+//                         { vcols }
+//                     </span>
+//                 }
+//             },
+
+//             Some(ViewStats {
+//                 num_table_cells: Some((_, tc)),
+//                 num_view_cells: Some((vr, vc)),
+//                 ..
+//             }) if vc != tc => {
+//                 let vrows = vr.to_formatted_string();
+//                 let vcols = vc.to_formatted_string();
+//                 let ncols = tc.to_formatted_string();
+//                 html! {
+//                     <span id="rows">
+//                         { vrows }
+//                         <span>{ " x " }</span>
+//                         { vcols }
+//                         <span>{ format!(" ({})", ncols) }</span>
+//                     </span>
+//                 }
+//             },
+
+//             Some(ViewStats {
+//                 num_table_cells: Some((tr, tc)),
+//                 ..
+//             }) => {
+//                 let nrows = tr.to_formatted_string();
+//                 let ncols = tc.to_formatted_string();
+//                 html! { <span id="rows">{ nrows }<span>{ " x " }</span>{
+// ncols }</span> }             },
+//             Some(ViewStats {
+//                 num_table_cells: None,
+//                 ..
+//             }) => html! { <span /> },
+//             None => html! { <span /> },
+//         }
+//     }
+// }

package/src/rust/components/status_indicator.rs

@@ -0,0 +1,164 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use perspective_client::config::ViewConfigUpdate;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::model::UpdateAndRender;
+use crate::renderer::*;
+use crate::session::*;
+use crate::utils::*;
+use crate::*;
+
+#[derive(Clone, Default, Debug, PartialEq)]
+enum StatusIconState {
+    Loading,
+    Updating(u32),
+    Errored(String, String, &'static str),
+    Normal,
+
+    #[default]
+    Unititialized,
+}
+
+#[derive(Clone, Debug)]
+enum StatusIconStateAction {
+    Increment,
+    Decrement,
+    Load(Option<ViewStats>),
+    SetError(ApiError),
+}
+
+impl Reducible for StatusIconState {
+    type Action = StatusIconStateAction;
+
+    fn reduce(self: std::rc::Rc<Self>, action: Self::Action) -> std::rc::Rc<Self> {
+        let new_status = match (&*self, action.clone()) {
+            (StatusIconState::Updating(x), StatusIconStateAction::Increment) => {
+                Self::Updating(x + 1)
+            },
+            (StatusIconState::Updating(x), StatusIconStateAction::Decrement) if *x > 1 => {
+                Self::Updating(x - 1)
+            },
+            (_, StatusIconStateAction::Load(stats)) => {
+                if stats.and_then(|x| x.num_table_cells).is_some() {
+                    StatusIconState::Normal
+                } else {
+                    Self::Loading
+                }
+            },
+            (_, StatusIconStateAction::SetError(e)) => {
+                Self::Errored(e.message(), e.stacktrace(), e.kind())
+            },
+            (
+                StatusIconState::Loading,
+                StatusIconStateAction::Increment | StatusIconStateAction::Decrement,
+            ) => StatusIconState::Loading,
+            (_, StatusIconStateAction::Increment) => Self::Updating(1),
+            (_, StatusIconStateAction::Decrement) => StatusIconState::Normal,
+        };
+
+        new_status.into()
+    }
+}
+
+#[extend::ext]
+impl<T: Reducible + 'static> UseReducerDispatcher<T> {
+    fn callback<U>(&self, action: impl Fn(U) -> T::Action + 'static) -> Callback<U> {
+        let dispatcher = self.clone();
+        Callback::from(move |event| dispatcher.dispatch(action(event)))
+    }
+}
+
+#[derive(Clone, Properties, PartialEq)]
+pub struct StatusIndicatorProps {
+    pub session: Session,
+    pub renderer: Renderer,
+}
+
+derive_model!(Session, Renderer for StatusIndicatorProps);
+
+/// An indicator component which displays the current status of the perspective
+/// server as an icon. This indicator also functions as a button to invoke the
+/// reconnect callback when in an error state.
+#[function_component]
+pub fn StatusIndicator(props: &StatusIndicatorProps) -> Html {
+    let state = use_reducer_eq(|| {
+        if let Some(err) = props.session.get_error() {
+            StatusIconState::Errored(err.message(), err.stacktrace(), err.kind())
+        } else {
+            StatusIconState::Normal
+        }
+    });
+
+    use_effect_with(
+        (props.session.clone(), state.dispatcher()),
+        |(session, set_state)| {
+            let subs = [
+                session
+                    .table_errored
+                    .add_listener(set_state.callback(StatusIconStateAction::SetError)),
+                session
+                    .stats_changed
+                    .add_listener(set_state.callback(StatusIconStateAction::Load)),
+                session
+                    .view_config_changed
+                    .add_listener(set_state.callback(|_| StatusIconStateAction::Increment)),
+                session
+                    .view_created
+                    .add_listener(set_state.callback(|_| StatusIconStateAction::Decrement)),
+            ];
+
+            move || drop(subs)
+        },
+    );
+
+    let onclick = use_async_callback(
+        (props.clone(), state.clone()),
+        async move |_: MouseEvent, (props, state)| {
+            if let StatusIconState::Errored(..) = &**state {
+                props.session.reconnect().await?;
+                let cfg = ViewConfigUpdate::default();
+                props.update_and_render(cfg)?.await?;
+            }
+
+            Ok::<_, ApiError>(())
+        },
+    );
+
+    let class_name = match (&*state, props.session.is_reconnect()) {
+        (StatusIconState::Errored(..), true) => "errored",
+        (StatusIconState::Errored(..), false) => "errored disabled",
+        (StatusIconState::Normal, _) => "connected",
+        (StatusIconState::Updating(_), _) => "updating",
+        (StatusIconState::Loading, _) => "loading",
+        (StatusIconState::Unititialized, _) => "uninitialized",
+    };
+
+    html! {
+        <>
+            <div class="section">
+                <div id="status_reconnect" class={class_name} {onclick}>
+                    <span id="status" class={class_name} />
+                    <span id="status_updating" class={class_name} />
+                </div>
+                if let StatusIconState::Errored(err, stack, kind) = &*state {
+                    <div class="error-dialog">
+                        <div class="error-dialog-message">{ format!("{} {}", kind, err) }</div>
+                        <div class="error-dialog-stack">{ stack }</div>
+                    </div>
+                }
+            </div>
+        </>
+    }
+}

package/src/rust/components/string_column_style.rs

@@ -0,0 +1,186 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::prelude::*;
+use yew::*;
+
+use super::form::color_selector::*;
+use super::modal::{ModalLink, SetModalLink};
+use super::style::LocalStyle;
+use crate::components::form::select_field::SelectEnumField;
+use crate::config::*;
+use crate::utils::WeakScope;
+use crate::*;
+
+pub enum StringColumnStyleMsg {
+    Reset(StringColumnStyleConfig),
+    FormatChanged(Option<FormatMode>),
+    ColorModeChanged(Option<StringColorMode>),
+    ColorChanged(String),
+    ColorReset,
+}
+
+#[derive(Properties)]
+pub struct StringColumnStyleProps {
+    pub config: Option<StringColumnStyleConfig>,
+    pub default_config: StringColumnStyleDefaultConfig,
+
+    #[prop_or_default]
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+
+    #[prop_or_default]
+    weak_link: WeakScope<StringColumnStyle>,
+}
+
+impl ModalLink<StringColumnStyle> for StringColumnStyleProps {
+    fn weak_link(&self) -> &'_ WeakScope<StringColumnStyle> {
+        &self.weak_link
+    }
+}
+
+impl PartialEq for StringColumnStyleProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+/// A component for the style form control for [`String`] columns.
+pub struct StringColumnStyle {
+    config: StringColumnStyleConfig,
+    default_config: StringColumnStyleDefaultConfig,
+}
+
+impl StringColumnStyle {
+    /// When this config has changed, we must signal the wrapper element.
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        let update = Some(self.config.clone()).filter(|x| x != &StringColumnStyleConfig::default());
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridStringStyle(update));
+    }
+
+    /// Generate a color selector component for a specific `StringColorMode`
+    /// variant.
+    fn color_select_row(&self, ctx: &Context<Self>, mode: &StringColorMode, title: &str) -> Html {
+        let on_color = ctx.link().callback(StringColumnStyleMsg::ColorChanged);
+        let color = self
+            .config
+            .color
+            .clone()
+            .unwrap_or_else(|| self.default_config.color.to_owned());
+
+        let color_props = props!(ColorProps {
+            title: title.to_owned(),
+            on_color,
+            is_modified: color != self.default_config.color,
+            color,
+            on_reset: ctx.link().callback(|_| StringColumnStyleMsg::ColorReset)
+        });
+
+        if &self.config.string_color_mode == mode {
+            html! { <div class="row"><ColorSelector ..color_props /></div> }
+        } else {
+            html! {}
+        }
+    }
+}
+
+impl Component for StringColumnStyle {
+    type Message = StringColumnStyleMsg;
+    type Properties = StringColumnStyleProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            config: ctx.props().config.clone().unwrap_or_default(),
+            default_config: ctx.props().default_config.clone(),
+        }
+    }
+
+    // Always re-render when config changes.
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        let mut new_config = ctx.props().config.clone().unwrap_or_default();
+        if self.config != new_config {
+            std::mem::swap(&mut self.config, &mut new_config);
+            true
+        } else {
+            false
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            StringColumnStyleMsg::Reset(config) => {
+                self.config = config;
+                true
+            },
+            StringColumnStyleMsg::FormatChanged(val) => {
+                self.config.format = val.unwrap_or_default();
+                self.dispatch_config(ctx);
+                true
+            },
+            StringColumnStyleMsg::ColorModeChanged(mode) => {
+                self.config.string_color_mode = mode.unwrap_or_default();
+                self.dispatch_config(ctx);
+                true
+            },
+            StringColumnStyleMsg::ColorChanged(color) => {
+                self.config.color = Some(color);
+                self.dispatch_config(ctx);
+                true
+            },
+            StringColumnStyleMsg::ColorReset => {
+                self.config.color = Some(self.default_config.color.clone());
+                self.dispatch_config(ctx);
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let format_mode_selected = self.config.format;
+        let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
+        let selected_color_mode = self.config.string_color_mode;
+        let color_mode_changed = ctx.link().callback(StringColumnStyleMsg::ColorModeChanged);
+        let color_controls = match selected_color_mode {
+            StringColorMode::Foreground => {
+                self.color_select_row(ctx, &StringColorMode::Foreground, "foreground-label")
+            },
+            StringColorMode::Background => {
+                self.color_select_row(ctx, &StringColorMode::Background, "background-label")
+            },
+            StringColorMode::Series => {
+                self.color_select_row(ctx, &StringColorMode::Series, "series-label")
+            },
+            StringColorMode::None => html! {},
+        };
+
+        html! {
+            <>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="string-column-style-container">
+                    <SelectEnumField<FormatMode>
+                        label="format"
+                        on_change={format_mode_changed}
+                        current_value={format_mode_selected}
+                    />
+                    <SelectEnumField<StringColorMode>
+                        label="color"
+                        on_change={color_mode_changed}
+                        current_value={selected_color_mode}
+                    />
+                    { color_controls }
+                </div>
+            </>
+        }
+    }
+}

package/src/rust/components/style/local_style.rs

@@ -0,0 +1,35 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::prelude::*;
+
+use super::style_cache::*;
+
+#[derive(Properties)]
+pub struct LocalStyleProps {
+    pub href: (&'static str, &'static str),
+}
+
+impl PartialEq for LocalStyleProps {
+    fn eq(&self, _other: &Self) -> bool {
+        true
+    }
+}
+
+#[function_component(LocalStyle)]
+pub fn local_style(props: &LocalStyleProps) -> Html {
+    if let Some(cache) = use_context::<StyleCache>() {
+        cache.add_style(props.href.0, props.href.1);
+    }
+
+    html! {}
+}

package/src/rust/components/style/mod.rs

@@ -0,0 +1,52 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! A micro-framework for associating local CSS snippets with `yew::Component`s
+//! in a Custom Element's `ShadowRoot`.
+//!
+//! Embedding a `<LocalStyle>` element will only create the underlying `<style>`
+//! tag once (when `Component::view()` is called the first time), even if
+//! multiple copies of the `Component` exist in the tree.
+//!
+//! # Example
+//!
+//! ```
+//! html! {
+//!     <StyleProvider>
+//!         <LocalStyle href={ css!("my-style") } />
+//!         <h1>{ "I am styled!" }</h1>
+//!     </StyleProvider>
+//! }
+//! ```
+
+mod local_style;
+mod style_cache;
+mod style_provider;
+
+pub use local_style::LocalStyle;
+pub use style_provider::StyleProvider;
+
+#[macro_export]
+macro_rules! css {
+    ($name:expr) => {{
+        (
+            $name,
+            include_str!(concat!(env!("OUT_DIR"), "/css/", $name, ".css")),
+        )
+    }};
+    ($path:expr, $name:expr) => {{
+        (
+            $name,
+            include_str!(concat!(env!("OUT_DIR"), "/", $path, "/", $name, ".css")),
+        )
+    }};
+}