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

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

Open
whitphx opened this issue Nov 18, 2024 · 2 comments
Open

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

whitphx opened this issue Nov 18, 2024 · 2 comments

Comments

@whitphx
Copy link
Owner

whitphx commented Nov 18, 2024 •
edited
Loading 

<!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 streamlit/streamlit#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
Copy link
Owner Author

whitphx commented Nov 18, 2024 •
edited
Loading

  • 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
Copy link
Owner Author

whitphx commented Nov 18, 2024

stlite/packages/mountable/config/webpack.config.js

Lines 368 to 405 in 1c65638

// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: imageInlineSizeLimit,
},
},
},
{
test: /\.svg$/,
use: [
{
loader: require.resolve('@svgr/webpack'),
options: {
prettier: false,
svgo: false,
svgoConfig: {
plugins: [{ removeViewBox: false }],
},
titleProp: true,
ref: true,
},
},
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash].[ext]',
},
},
],
issuer: {
and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
},
},

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@whitphx