whitphx / stlite

In-browser Streamlit šŸŽˆšŸš€
https://edit.share.stlite.net
Apache License 2.0
1.25k stars 65 forks source link

Precompile streamlit-browser package #203

Closed whitphx closed 4 months ago

whitphx commented 2 years ago

Currently we configured some packages to directly import the TypeScript files from the streamlit-browser package at /streamlit/frontend/src by using CRACO or overriding the ejected config file, however, obviously it violates the default configuration of Create-React-App. NextJS also has this restriction and we encountered it at https://github.com/whitphx/stlite/issues/68#issuecomment-1236484736 and found that this designed is intended to avoid many potential problems. To follow this standard, we should change the strategy to precompile the TS files in /streamlit/frontend/src and import the transpiled JS files from other packages.


To do it simply, just changing tsconfig.json as below

     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
-    "noEmit": true,
+    "noEmit": false,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es5"
+    "target": "es5",
+    "outDir": "./out",
+    "declaration": true
   },
   "include": ["src"]
 }

and running yarn tsc failed with the errors following:

(...)
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 }) => ({
                ~~~~~~~~~~~

Found 111 errors in 3 files.

We have to deal with it.

whitphx commented 2 years ago

Option: to create a new package packages/streamlit-browser that imports the TS files from /streamlit/frontend/src and transpile and export them. Only this package needs importing external files, however, other packages can use the precompiled code from this package.

whitphx commented 4 months ago

Now the Streamlit's frontend is split into lib and app, and lib behaves like what this issue suggests. app doesn't, but it's an intended design of it.