JupyterLite-like iframe embedding

[whitphx]

https://blog.jupyter.org/jupyter-everywhere-f8151c2cc6e8

[whitphx]

• Simple iframe embedding seems to be working as embedding the playground app <iframe src="https://whitphx.github.io/stlite/" > worked. This looks like a promising way.
  • React runtime may be duplicated, but it does not look like a big issue.
• Dynamic rendering of iframe ( #158 ) has some problems.
  • Custom component does not work.
  • Slider does not work (it seems that the mouseup event is not caught by the inner content)

[whitphx]

Package names:

• @stlite/sharing (private)
  • Hosted as a web service that accepts the files and requirements info via URL params and serves the app.
  • Can be embedded in an iframe
• @stlite/embed
  • A React app that only mounts an iframe embedding the sharing app and communicates its worker to dynamically change its contents.
  • @stlite/embed/react -> Reusable React component?

[whitphx]

If we use Vercel, we can use custom subdomains: https://vercel.com/blog/wildcard-domains , which is necessary for Service Worker.

[whitphx]

If we use Vercel, we should also try using NextJS instead of CRA so that SSR would be possible.

---

After a small prototyping, we found there are many problems to solve when taking this option with the current codebase.

• NextJS does not allow importing TypeScript files from outside the base directory by default. This restriction can be eased by setting experimental.externalDir option (https://github.com/vercel/next.js/pull/22867), however, it can leads to some issues ( https://github.com/vercel/next.js/issues/19928#issuecomment-741596557 ).
  • CRA also has the same restriction and we avoided it by overriding the babel config via CRACO or ejected config files.
  • We probably should solve this problem fundamentally by precompiling the streamlit-browser package as recommended at the NextJS thread.
• Even if we set experimental.externalDir: true, compiling the streamit-browser module under the NextJS setting emits some errors as below:

../../node_modules/katex/dist/katex.min.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ../../streamlit/frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

error - ../../streamlit/frontend/src/lib/baseconsts.ts (34:27) @ eval
error - ReferenceError: window is not defined
    at eval (webpack-internal:///../../streamlit/frontend/src/lib/baseconsts.ts:35:24)
    at Module.../../streamlit/frontend/src/lib/baseconsts.ts (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/pages/index.js:2079:1)
    at __webpack_require__ (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///../../streamlit/frontend/src/lib/log.ts:8:69)
    at Module.../../streamlit/frontend/src/lib/log.ts (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/pages/index.js:2123:1)
    at __webpack_require__ (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///../../streamlit/frontend/src/theme/utils.ts:39:69)
    at Module.../../streamlit/frontend/src/theme/utils.ts (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/pages/index.js:2420:1)
    at __webpack_require__ (/Users/whitphx/ghq/github.com/whitphx/stlite/packages/sharing/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///../../streamlit/frontend/src/theme/baseTheme/index.ts:7:64) {
  page: '/'
}
  32 |  * True when in development mode.
  33 |  */
> 34 | export const IS_DEV_ENV = +window.location.port === WWW_PORT_DEV
     |                           ^
  35 |
  36 | /**
  37 |  * Parameters for our fetch() requests.

• in turn, when we try to precompile the streamlit-browser, some errors occurs too:

(...)
src/autogen/proto.js:4:1 - error TS9005: Declaration emit for this file requires using private name 'WidgetStates'. An explicit type annotation may unblock declaration emit.

4 import * as $protobuf from "protobufjs/minimal";
  ~~~~~~

src/components/core/StreamlitDialog/styled-components.ts:87:14 - error TS4023: Exported variable 'StyledSmall' has or is using name 'TextProps' from external module "/Users/whitphx/ghq/github.com/whitphx/stlite/streamlit/frontend/src/components/shared/TextElements/Text" but cannot be named.

87 export const StyledSmall = styled(Small)(({ theme }) => ({
                ~~~~~~~~~~~

[whitphx]

So, at this point, we are going to create the sharing service with CRA, and will replace it with NextJS if possible.

• share.<hostname> -> CRA-based sharing service.
• share.<hostname>/edit -> NextJS based editor service.
• Probably, these 2 separate packages can be deployed to the same site (share.<hostname>) by using Vercel's multizone (TBC).

[whitphx]

stlite sharing can be directly embedded into another page through iframe!