`st.markdown(":streamlit:")` doesn't work

whitphx commented 4 days ago

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Stlite App</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.73.0/build/stlite.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.73.0/build/stlite.js"></script>
    <script>
      stlite.mount(
        `
import streamlit as st

st.markdown(":streamlit:")
`,
        document.getElementById("root"),
      );
    </script>
  </body>
</html>

CleanShot 2024-11-19 at 00 38 48@2x

This feature was introduced in https://github.com/streamlit/streamlit/pull/9670, and this part needs a care for Stlite.

https://github.com/streamlit/streamlit/blob/1.40.1/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx#L475

Credit: @Sakatoku reported this bug.

whitphx commented 4 days ago

st.balloons() works because the images are loaded as Base64 string
st.snow() somehow works because the src URL is specified as absolute URLs... WHY?
- Because st.snow() images are *.png but the Streamlit logo is *.svg?

whitphx commented 4 days ago

https://github.com/whitphx/stlite/blob/1c65638d162d988c875d55944856dc8122ad0f59/packages/mountable/config/webpack.config.js#L368-L405 This build config difference?

Probably we should leave this issue until the next ver. of Streamlit is released that is built with a totally new build pipeline based on Vite.

whitphx / stlite

`st.markdown(":streamlit:")` doesn't work #1190