Feature/docs page#1791
Merged
Merged
Conversation
Refines the homepage hero section layout and typography. Defers the playground component by removing the placeholder. Unifies all static assets into docs/src/assets as the Single Source of Truth, removing duplications and the temporary packages/assets workspace.
Externalizes code snippets from browser.mdx to docs/src/examples/browser/ for testability. Adds missing 'astro' dependency to docs/package.json to fix build error.
Externalizes code snippets from desktop.mdx and react.mdx to docs/src/examples/ for testability and consistency with browser.mdx.
|
Contributor
WalkthroughAdds a new Astro-based documentation site under Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Updates astro dependency to the latest version to ensure compatibility and access to recent features.
Contributor
Package Stats on
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (12)
docs/src/examples/browser/hello-world.html (1)
13-18: Consider a strategy for version management in examples.The example uses a hardcoded version
@stlite/browser@0.85.1. Documentation examples with hardcoded versions can become outdated quickly, potentially misleading users to use old versions.Consider one of these approaches:
- Use a version placeholder (e.g.,
@VERSION@) that gets replaced during docs build- Add a comment indicating users should check for the latest version
- Use a CDN tag that points to latest (if available and stable)
Example with comment:
+ <!-- Replace 0.85.1 with the latest version from https://www.npmjs.com/package/@stlite/browser --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.css" />docs/src/examples/desktop/package.json (1)
23-23: Inconsistent dependency versioning.The
electrondependency uses an exact version34.3.0without a caret (^), while other dependencies like@stlite/desktopandelectron-builderuse caret ranges. This inconsistency may be intentional for Electron stability, but it should be explicitly documented or made consistent.If the exact Electron version is intentional (for stability/compatibility), consider adding a comment:
"devDependencies": { "@stlite/desktop": "^0.79.5", "cross-env": "^7.0.3", + // Pinned to exact version for stability "electron": "34.3.0", "electron-builder": "^25.1.8" },docs/src/styles/custom.css (2)
57-69: White background on logos may not work for all designs.Applying a white background to all sponsor logos (line 61) could cause issues for logos that are designed with white backgrounds or white elements, as they might not be visible or look awkward.
Consider:
- Using a very light gray background (
#f8f8f8) instead of pure white- Adding a subtle border to provide definition
- Allowing individual logo customization via additional classes
.sponsor-logo { display: block; object-fit: contain; - /* Ensure visibility on dark mode - add white bg and padding */ - background-color: #ffffff; + /* Ensure visibility on dark mode - add light bg and padding */ + background-color: #f8f8f8; padding: 10px; border-radius: 8px; + border: 1px solid #e0e0e0; transition: transform 0.2s; }
21-32: Consider using increased selector specificity as an alternative to !important for dark mode button styling.The dark mode button styling uses multiple
!importantdeclarations. While Starlight's CSS custom properties support theming for general colors, there's no dedicated property for button styling. However, instead of!important, try increasing selector specificity with approaches like[data-theme='dark'] .sl-link-button.primary:is(.primary)to override framework styles without!important. If specificity proves insufficient after testing, document why!importantis necessary for future maintainers.docs/README.md (3)
5-7: Add language identifier to fenced code block.The fenced code block is missing a language identifier, which improves syntax highlighting and accessibility.
-``` +```bash npm create astro@latest -- --template starlight--- `12-12`: **Consider simplifying "Inside of" to "Inside".** The phrase "Inside of" can be simplified to "Inside" for more concise documentation. ```diff -Inside of your Astro + Starlight project, you'll see the following folders and files: +Inside your Astro + Starlight project, you'll see the following folders and files:
15-26: Add language identifier to fenced code block.The directory tree code block is missing a language identifier. Use
textorplaintextfor better rendering.-``` +```text . ├── public/ ├── src/docs/src/examples/react/App.tsx (2)
18-20: Consider omitting optional empty arrays for cleaner code.If
archives,requirements, andprebuiltPackageNamesdefault to empty arrays, they can be omitted from the configuration object to reduce boilerplate.files: { "streamlit_app.py": { data: ` import streamlit as st st.write("Hello from Stlite + React!") `, }, }, - archives: [], - requirements: [], - prebuiltPackageNames: [], wheelUrls, });
24-24: Handle potential null element more safely.Using the non-null assertion operator (
!) assumes the element with id"root"always exists. If the element is missing at runtime, this will throw an error.-createRoot(document.getElementById("root")!).render( +const rootElement = document.getElementById("root"); +if (!rootElement) { + throw new Error("Root element not found"); +} +createRoot(rootElement).render( <React.StrictMode> <StliteAppWithToast kernel={kernel} />docs/src/content/docs/react.mdx (1)
61-67: Consider adding a cross-reference link to @stlite/browser documentation.Line 67 mentions "See the
StliteKernelOptionsin@stlite/browserdocumentation" but doesn't provide a link. Adding an internal link would improve navigation.**Options:** -See the `StliteKernelOptions` in `@stlite/browser` documentation (conceptually similar, though typed strictly in TypeScript). The key difference is `wheelUrls` which should be imported from `@stlite/react/vite-utils` to ensure correct asset loading with Vite. +See the `StliteKernelOptions` in the [`@stlite/browser` documentation](/browser#mountoptions) (conceptually similar, though typed strictly in TypeScript). The key difference is `wheelUrls` which should be imported from `@stlite/react/vite-utils` to ensure correct asset loading with Vite.docs/src/content/docs/index.mdx (2)
30-35: Consider moving inline styles to the custom CSS file.The inline style block hiding the default title could be moved to
docs/src/styles/custom.cssfor better separation of concerns and maintainability.Move this style rule to
src/styles/custom.css:/* Hide the default Starlight title on the splash page */ h1#_top { display: none !important; }And remove the inline
<style>tag from this file.
53-73: External sponsor logo URLs may break if sources change.The sponsor logos are loaded from external URLs. If these URLs change or become unavailable, the logos will break. Consider:
- Downloading and hosting logos locally in
src/assets/- Adding alt text that's more descriptive
- Implementing fallback handling
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (11)
docs/package-lock.jsonis excluded by!**/package-lock.jsondocs/src/assets/desktop/stlite-desktop-banner-outlined.svgis excluded by!**/*.svgdocs/src/assets/desktop/stlite-desktop-banner.svgis excluded by!**/*.svgdocs/src/assets/favicon.svgis excluded by!**/*.svgdocs/src/assets/stlite-dark.svgis excluded by!**/*.svgdocs/src/assets/stlite-github.inkscape.svgis excluded by!**/*.svgdocs/src/assets/stlite-sharing-ogp.inkscape.svgis excluded by!**/*.svgdocs/src/assets/stlite-sharing.inkscape.svgis excluded by!**/*.svgdocs/src/assets/stlite.inkscape.svgis excluded by!**/*.svgdocs/src/assets/stlite.svgis excluded by!**/*.svgyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (24)
docs/.gitignore(1 hunks)docs/.vscode/extensions.json(1 hunks)docs/.vscode/launch.json(1 hunks)docs/README.md(1 hunks)docs/astro.config.mjs(1 hunks)docs/package.json(1 hunks)docs/src/content.config.ts(1 hunks)docs/src/content/docs/browser.mdx(1 hunks)docs/src/content/docs/desktop.mdx(1 hunks)docs/src/content/docs/index.mdx(1 hunks)docs/src/content/docs/react.mdx(1 hunks)docs/src/examples/browser/hello-world.html(1 hunks)docs/src/examples/browser/install-packages.js(1 hunks)docs/src/examples/browser/mount.html(1 hunks)docs/src/examples/browser/multipage.js(1 hunks)docs/src/examples/browser/shared-worker.html(1 hunks)docs/src/examples/browser/shared-worker.js(1 hunks)docs/src/examples/desktop/app.py(1 hunks)docs/src/examples/desktop/package.json(1 hunks)docs/src/examples/react/App.tsx(1 hunks)docs/src/examples/react/vite.config.ts(1 hunks)docs/src/styles/custom.css(1 hunks)docs/tsconfig.json(1 hunks)package.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{js,jsx,ts,tsx,json,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Follow Prettier formatting (2 spaces, trailing commas, semicolons by default) as enforced by the project's configuration
Files:
docs/src/examples/browser/install-packages.jsdocs/src/styles/custom.cssdocs/src/examples/desktop/package.jsondocs/src/examples/react/vite.config.tsdocs/src/examples/browser/shared-worker.jsdocs/package.jsondocs/src/examples/browser/multipage.jsdocs/tsconfig.jsonpackage.jsondocs/src/content.config.tsdocs/src/examples/react/App.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace ESLint configs for linting
Files:
docs/src/examples/browser/install-packages.jsdocs/src/examples/react/vite.config.tsdocs/src/examples/browser/shared-worker.jsdocs/src/examples/browser/multipage.jsdocs/src/content.config.tsdocs/src/examples/react/App.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use camelCase for JavaScript/TypeScript variable and function names
Always use async/await for asynchronous operations instead of promises with.then()
Prefix unused variables with underscore (e.g.,_unused) instead of leaving them as-is
Files:
docs/src/examples/browser/install-packages.jsdocs/src/examples/react/vite.config.tsdocs/src/examples/browser/shared-worker.jsdocs/src/examples/browser/multipage.jsdocs/src/content.config.tsdocs/src/examples/react/App.tsx
{.prettierrc,**/*.{md,json,ts,tsx,js,jsx}}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier with 2-space indentation, semicolons enabled, trailing commas for ES5, and 80-character line width
Files:
docs/src/examples/browser/install-packages.jsdocs/src/examples/desktop/package.jsondocs/src/examples/react/vite.config.tsdocs/README.mddocs/src/examples/browser/shared-worker.jsdocs/package.jsondocs/src/examples/browser/multipage.jsdocs/tsconfig.jsonpackage.jsondocs/src/content.config.tsdocs/src/examples/react/App.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Preferinterfacefor defining object shapes in TypeScript
Import external dependencies before workspace packages, which come before relative imports in TypeScript files
Export types with.d.tsextension and useexport typefor type-only exports
Files:
docs/src/examples/react/vite.config.tsdocs/src/content.config.tsdocs/src/examples/react/App.tsx
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Use kebab-case for utility and non-component TypeScript filenames
Files:
docs/src/examples/react/vite.config.tsdocs/src/content.config.ts
package.json
📄 CodeRabbit inference engine (CLAUDE.md)
Use yarn workspaces defined in root
package.jsonwithyarn@4.5.3and Node.js>=22
Files:
package.json
**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.py: Use snake_case for Python module and function names
Use PascalCase for Python class names
Useasyncio.sleep()instead oftime.sleep()in Python code for Pyodide compatibility
Usest.write_stream()with async generators for non-blocking streaming output in Stlite apps
Files:
docs/src/examples/desktop/app.py
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use PascalCase for React component filenames
Files:
docs/src/examples/react/App.tsx
🧠 Learnings (32)
📓 Common learnings
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/**/*.{ts,tsx} : Use `stlite/common` package for shared TypeScript types and utilities across all packages
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to packages/browser/e2e-tests/**/*.{ts,tsx,js,jsx} : Browser E2E scenarios live in `packages/browser/e2e-tests`; extend them when touching mounting, requirements parsing, or iframe messaging
Applied to files:
docs/src/examples/browser/install-packages.js
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Reference upstream UI in `streamlit/frontend/app` when customizing `browser`, `sharing`, and `desktop`; consume other `streamlit/frontend/*` packages directly
Applied to files:
docs/src/examples/browser/install-packages.jsdocs/src/examples/browser/shared-worker.htmldocs/src/content/docs/desktop.mdxdocs/src/content/docs/browser.mdxdocs/src/content/docs/react.mdxdocs/src/examples/browser/multipage.jspackage.jsondocs/src/examples/react/App.tsxdocs/src/examples/browser/hello-world.htmldocs/src/examples/browser/mount.html
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/{kernel,browser,react,desktop}/**/*.{ts,tsx} : Use `path-browserify` for cross-platform path handling in browser/worker code instead of Node.js `path` module
Applied to files:
docs/src/examples/browser/install-packages.js
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/browser/**/*.ts : Use `idbfsMountpoints` option to enable persistent file storage across page reloads in Stlite apps
Applied to files:
docs/src/examples/browser/install-packages.jsdocs/src/content/docs/browser.mdx
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to packages/*/dist,packages/**/.make : Keep `packages/*/dist` and `.make` out of commits
Applied to files:
docs/.gitignore
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/*/CHANGELOG.md : Update CHANGELOG.md for user-facing changes via `yarn changeset` instead of manual edits
Applied to files:
docs/.gitignoredocs/README.mdpackage.json
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Workspace organization: `packages/` hosts Yarn workspaces with `browser`, `sharing`, and `desktop` as user apps; `react` is a React library; `kernel` is the Pyodide core; `sharing-editor` is the editor client; and `common`, `sharing-common`, `devutils` are support utilities
Applied to files:
docs/.gitignoredocs/src/content/docs/react.mdxpackage.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/{browser,react,desktop,sharing,sharing-editor}/vite.config.ts : Use Vite in library mode with `formats: ["es"]` for all user-facing packages
Applied to files:
docs/src/examples/react/vite.config.ts
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/{kernel,react,browser,desktop,sharing,sharing-editor}/vite.config.ts : Use `vitejs/plugin-react` with Emotion Babel plugin for styling in React packages
Applied to files:
docs/src/examples/react/vite.config.tsdocs/src/content/docs/react.mdx
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/{browser,react,desktop}/vite.config.ts : Use `rollup-plugin-visualizer` to analyze bundle sizes after adding new dependencies
Applied to files:
docs/src/examples/react/vite.config.ts
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to eslint.config.mjs : Use ESLint with flat config format (`eslint.config.mjs`) with TypeScript, React, and React Hooks plugins
Applied to files:
docs/src/examples/react/vite.config.ts
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/**/*.{ts,tsx} : Use `stlite/common` package for shared TypeScript types and utilities across all packages
Applied to files:
docs/src/examples/react/vite.config.tsdocs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/kernel/**/*.{ts,test.ts} : Test both Dedicated Worker and SharedWorker code paths when modifying kernel worker logic
Applied to files:
docs/src/examples/browser/shared-worker.htmldocs/src/examples/browser/shared-worker.js
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to streamlit/frontend/app/**/* : Do not modify the upstream `streamlit/frontend/app`; other imported packages in `streamlit/frontend/` can be edited
Applied to files:
docs/src/examples/browser/shared-worker.htmldocs/src/content/docs/desktop.mdxpackage.jsondocs/src/examples/desktop/app.pydocs/src/examples/browser/hello-world.htmldocs/src/examples/browser/mount.html
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/*/README.md : Document API changes and breaking changes in package-specific README.md files
Applied to files:
docs/README.mddocs/src/content/docs/react.mdx
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/kernel/**/*.test.ts : Use `vitest/web-worker` plugin for testing Web Worker and SharedWorker code paths
Applied to files:
docs/src/examples/browser/shared-worker.js
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/*/tsconfig*.json : Maintain separate `tsconfig.src.json` and `tsconfig.test.json` for source and test compilation respectively
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to **/*.{ts,tsx} : Export types with `.d.ts` extension and use `export type` for type-only exports
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to tsconfig*.json : Configure TypeScript compilation with `target: ESNext`, `module: ESNext`, `moduleResolution: bundler`, and `strict: true`
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to tsconfig*.json : Use TypeScript project references (`composite: true`) with root `tsconfig.json` for build ordering
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-10-24T13:35:30.896Z
Learnt from: whitphx
Repo: whitphx/stlite PR: 1611
File: packages/browser/tsconfig.json:13-13
Timestamp: 2025-10-24T13:35:30.896Z
Learning: TypeScript's tsconfig.json files use JSON-with-Comments (JSONC) format, which allows both line comments (using //) and trailing commas. These are not syntax errors and should not be flagged.
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use workspace ESLint configs for linting
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to **/*.{js,jsx,ts,tsx,json,css,scss} : Follow Prettier formatting (2 spaces, trailing commas, semicolons by default) as enforced by the project's configuration
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to **/*.{ts,tsx} : Import external dependencies before workspace packages, which come before relative imports in TypeScript files
Applied to files:
docs/tsconfig.jsonpackage.json
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to **/*.test.{ts,tsx} : Keep test specs beside components with naming convention `Component.test.tsx`
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Co-locate test files with source files using `*.test.ts`, `*.test.tsx`, `*.spec.ts`, or `*.spec.tsx` naming convention
Applied to files:
docs/tsconfig.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to package.json : Use yarn workspaces defined in root `package.json` with `yarn4.5.3` and Node.js `>=22`
Applied to files:
package.json
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to **/*.py : Use `st.write_stream()` with async generators for non-blocking streaming output in Stlite apps
Applied to files:
docs/src/examples/desktop/app.py
📚 Learning: 2025-12-08T07:43:57.409Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.409Z
Learning: Applies to packages/kernel/py/**/*.py : Do not import `streamlit.web` module; use `stlite_lib.server.Server` instead
Applied to files:
docs/src/examples/desktop/app.pydocs/src/examples/react/App.tsxdocs/src/examples/browser/mount.html
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Use Vitest and Vitest directly inside each app workspace for testing and development (e.g., `yarn workspace stlite/browser start` or `yarn workspace stlite/browser test`)
Applied to files:
docs/src/examples/react/App.tsx
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Applies to streamlit/component-lib/**/*.test.{js,jsx,ts,tsx} : Legacy Streamlit component tests under `streamlit/component-lib` use Jest; run `yarn test` there when editing widgets or protocol glue
Applied to files:
docs/src/examples/react/App.tsx
🪛 LanguageTool
docs/README.md
[style] ~12-~12: This phrase is redundant. Consider using “Inside”.
Context: ...le. Have fun! ## 🚀 Project Structure Inside of your Astro + Starlight project, you'll ...
(OUTSIDE_OF)
🪛 markdownlint-cli2 (0.18.1)
docs/README.md
5-5: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
15-15: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (python)
- GitHub Check: build-sharing-editor
- GitHub Check: test-stlite-lib
🔇 Additional comments (19)
docs/.vscode/extensions.json (1)
1-4: LGTM!The VS Code extension recommendations are appropriate for an Astro-based documentation site.
docs/src/examples/desktop/app.py (1)
1-3: LGTM!Simple, correct example demonstrating Stlite Desktop integration.
docs/src/examples/browser/shared-worker.html (1)
1-3: LGTM!Appropriate documentation snippet demonstrating the shared-worker attribute usage.
docs/.gitignore (1)
1-21: LGTM!Comprehensive and appropriate gitignore rules for an Astro-based documentation site.
docs/src/examples/browser/hello-world.html (1)
22-25: LGTM!The embedded Python code correctly demonstrates a simple Streamlit app with proper use of
st.text_inputandst.write.docs/src/examples/desktop/package.json (2)
28-31: LGTM!The
stlite.desktopconfiguration correctly references theapp.pyfile that exists in the same directory.
21-21: The @stlite/desktop and @stlite/browser versions in the examples are intentionally maintained by the project as part of official documentation templates. These versions are not outdated; they reflect the project's deliberate strategy of using stable reference versions in examples rather than always chasing the latest releases.Likely an incorrect or invalid review comment.
docs/src/styles/custom.css (1)
1-19: LGTM!The CSS custom property setup for theming is well-structured and properly handles both light and dark modes with appropriate color values.
docs/.vscode/launch.json (1)
5-5: No action needed. The relative path./node_modules/.bin/astro devis correct for a folder-specific launch configuration. VS Code resolves variables and paths in launch.json relative to the folder they belong to, so this configuration will work correctly whetherdocs/is opened as a standalone folder or as part of a multi-root workspace. The current setup follows standard monorepo practices and does not require documentation or modification.docs/src/examples/browser/shared-worker.js (1)
1-7: LGTM! Documentation example is clear and follows the expected pattern.The example effectively demonstrates the SharedWorker mounting option. The placeholder comment at line 4 appropriately indicates where additional configuration would go in a complete implementation.
docs/src/examples/browser/multipage.js (1)
1-16: LGTM! Multipage example correctly demonstrates the file structure and mounting pattern.The example properly showcases:
- Streamlit's multipage naming convention with emoji prefixes
- The pages/ subdirectory pattern
- Inline Python file content using template literals
docs/tsconfig.json (1)
1-5: LGTM! TypeScript configuration is appropriate for the Astro documentation site.The configuration correctly extends Astro's strict preset and includes generated type definitions. This is the expected setup for an Astro documentation workspace.
package.json (1)
8-9: LGTM! Workspace addition correctly integrates the new docs site.The "docs" workspace is properly added to the workspaces array, maintaining consistency with the existing workspace structure and following the project's conventions.
docs/src/content/docs/desktop.mdx (1)
1-126: LGTM! Comprehensive documentation for the desktop package.The documentation is well-structured and covers all essential aspects:
- Quick start with clear step-by-step instructions
- Configuration options with practical examples
- File system features (IndexedDB and NodeJS worker modes)
- Appropriate warnings about limitations
The import paths and example code snippets are consistent with the related example files in the PR.
docs/src/examples/browser/install-packages.js (1)
1-10: LGTM! Example clearly demonstrates package installation via requirements.The example effectively showcases how to specify Python package dependencies using the
requirementsoption. The placeholder in thefilesobject appropriately focuses attention on the key feature being demonstrated.docs/src/examples/react/vite.config.ts (1)
1-8: LGTM! Vite configuration correctly sets up the React example.The configuration properly:
- Follows import ordering conventions (external dependencies before workspace packages)
- Includes both required plugins in the correct order
- Provides a minimal, clear example for documentation purposes
docs/src/content.config.ts (1)
1-7: LGTM! Proper Astro + Starlight content configuration.The content collection configuration correctly uses Starlight's
docsLoader()anddocsSchema()to set up the docs collection. This follows the recommended pattern for Astro v5 with Starlight integration.docs/src/content/docs/browser.mdx (1)
8-103: Comprehensive documentation for @stlite/browser.The documentation thoroughly covers installation, usage patterns, advanced features, and API reference. The structure is clear with practical examples imported from working code files.
docs/astro.config.mjs (1)
20-25: No issues identified. The sidebar configuration correctly useslinkfor external/arbitrary URLs andslugfor internal documentation references. This mixed usage is supported and intentional per Starlight's API design.
Contributor
Bundle visualizer reports for
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 25 out of 36 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Package Stats on
|
Contributor
Bundle visualizer reports for
|
Contributor
|
Deployment completed successfully (log). Importable URLs:
import { StliteApp, createKernel } from "https://621f25a3.stlite-react-preview.pages.dev/stlite.js";
import "https://621f25a3.stlite-react-preview.pages.dev/stlite.css"; |
Contributor
|
Deployment completed successfully (log).
|
Contributor
|
Deployment completed successfully (log).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stlite Browser preview</title>
<link rel="stylesheet" href="https://a2c50d21.stlite-browser-preview.pages.dev/stlite.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import { mount } from "https://a2c50d21.stlite-browser-preview.pages.dev/stlite.js"
mount(
{
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
st.write("Hello world")
`,
},
requirements: [],
},
document.getElementById("root"),
);
</script>
</body>
</html> |
Contributor
Package Stats on
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.github/workflows/test-build.yml (1)
727-763: Consider adding job dependencies.The
build-docsjob lacks aneedsclause, unlike all other build jobs in this workflow (e.g.,build-browser,build-react,build-desktop). This means it will run independently without waiting for any test jobs to complete.If the docs build depends on any code or tests passing, add appropriate dependencies. Otherwise, if docs are completely independent of the codebase tests, this may be intentional.
Apply this diff if docs should wait for basic initialization:
build-docs: if: ${{ ! failure() }} # This job should run even if the depending jobs are skipped, but not when those jobs failed. + needs: [set-build-info]Or add more comprehensive dependencies if docs depend on test outcomes:
build-docs: if: ${{ ! failure() }} + needs: [set-build-info, test-build-common]
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.github/workflows/postbuild.yml(1 hunks).github/workflows/test-build.yml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (12)
- GitHub Check: test-desktop (ubuntu-latest)
- GitHub Check: test-sharing-editor
- GitHub Check: test-desktop (windows-latest)
- GitHub Check: test-sharing
- GitHub Check: test-sharing-common
- GitHub Check: test-build-common
- GitHub Check: test-browser
- GitHub Check: test-stlite-lib
- GitHub Check: test-react
- GitHub Check: test-kernel
- GitHub Check: build-docs
- GitHub Check: spellcheck
🔇 Additional comments (1)
.github/workflows/postbuild.yml (1)
713-740: LGTM!The notification job correctly posts the docs preview URL to the PR. The implementation follows the established pattern from browser/react preview notifications.
Contributor
Bundle visualizer reports for
|
Contributor
|
Deployment completed successfully (log). Importable URLs:
import { StliteApp, createKernel } from "https://94ccf2f9.stlite-react-preview.pages.dev/stlite.js";
import "https://94ccf2f9.stlite-react-preview.pages.dev/stlite.css"; |
Contributor
|
Deployment completed successfully (log).
|
Contributor
|
Deployment completed successfully (log).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stlite Browser preview</title>
<link rel="stylesheet" href="https://1a029db2.stlite-browser-preview.pages.dev/stlite.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import { mount } from "https://1a029db2.stlite-browser-preview.pages.dev/stlite.js"
mount(
{
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
st.write("Hello world")
`,
},
requirements: [],
},
document.getElementById("root"),
);
</script>
</body>
</html> |
Contributor
Package Stats on
|
Contributor
Bundle visualizer reports for
|
Contributor
|
Deployment completed successfully (log). Importable URLs:
import { StliteApp, createKernel } from "https://ceda760a.stlite-react-preview.pages.dev/stlite.js";
import "https://ceda760a.stlite-react-preview.pages.dev/stlite.css"; |
Contributor
|
Deployment completed successfully (log).
|
Contributor
|
Deployment completed successfully (log).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stlite Browser preview</title>
<link rel="stylesheet" href="https://52771098.stlite-browser-preview.pages.dev/stlite.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import { mount } from "https://52771098.stlite-browser-preview.pages.dev/stlite.js"
mount(
{
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
st.write("Hello world")
`,
},
requirements: [],
},
document.getElementById("root"),
);
</script>
</body>
</html> |
This was referenced Jan 10, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.