Open
Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is a WIP step toward introducing Lit-based Web Components (v2) into solid-ui, starting with a new <solid-ui-header> plus login/signup button components, and updating the build + package export layout to ship them as subpath exports.
Changes:
- Add Lit-based v2 components:
header,loginButton,signupButton, including READMEs and custom-element registration entrypoints. - Update webpack to emit per-component bundles under
dist/components/<component>/index.*and updatepackage.jsonsubpath exports. - Update Jest/Babel/TS test config to accommodate Lit + in-src tests, and adjust some unit tests/snapshots.
Reviewed changes
Copilot reviewed 23 out of 24 changed files in this pull request and generated 14 comments.
Show a summary per file
| File | Description |
|---|---|
webpack.config.mjs |
Switch to multi-entry build; emit component bundles to dist/components/... |
tsconfig.test.json |
Include in-source *.test.ts files for test typechecking |
test/unit/index.test.ts |
Update expected src/index.ts public exports |
test/unit/header/__snapshots__/index.test.ts.snap |
Snapshot updates for legacy header DOM output |
src/v2/components/signupButton/SignupButton.ts |
New Lit SignupButton component |
src/v2/components/signupButton/README.md |
Documentation for signup button component |
src/v2/components/signupButton/index.ts |
Register/export solid-ui-signup-button |
src/v2/components/loginButton/LoginButton.ts |
New Lit LoginButton w/ Solid OIDC flow + popup |
src/v2/components/loginButton/README.md |
Documentation for login button component |
src/v2/components/loginButton/index.ts |
Register/export solid-ui-login-button |
src/v2/components/header/Header.ts |
New Lit Header component that composes login/signup buttons |
src/v2/components/header/README.md |
Documentation for header component |
src/v2/components/header/index.ts |
Register/export solid-ui-header + related types |
src/v2/components/header/header.test.ts |
New unit tests for v2 header (currently mismatched to implementation) |
src/utils/headerFooterHelpers.ts |
Adjust namespace import to avoid src/index coupling |
scripts/build-component-dts.mjs |
Postbuild script to generate dist/components/*/index.d.ts wrappers (partial) |
README.md |
Add “Web Components” section + component build pipeline notes |
package.json |
Add component subpath exports; add deps; hook postbuild d.ts wrapper script |
jest.config.mjs |
Update transforms for Lit packages + CSS module mapping |
babel.config.mjs |
Allow declare class fields for TS (Lit-friendly) |
__mocks__/styleMock.js |
Jest mock for CSS imports |
Comments suppressed due to low confidence (1)
webpack.config.mjs:4
CopyPluginis imported but never used in this webpack config. This adds an unused dependency/import and can confuse future maintainers; either wire the plugin intoplugins(if you intended to copy assets) or remove the import (and the dependency if it’s not needed elsewhere).
import path from 'path'
import TerserPlugin from 'terser-webpack-plugin'
const externalsBase = {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is a WIP step toward re-architecting solid-ui into independently distributable Lit-based web components, with a build pipeline that emits per-component bundles and exposes them via package subpath exports.
Changes:
- Add new v2 Lit components (
solid-ui-header,solid-ui-login-button,solid-ui-signup-button) with component-level READMEs and a header unit test. - Update the build/distribution pipeline to emit per-component bundles and generate
dist/components/*/index.d.tswrapper declarations, then expose components viapackage.jsonexports. - Update tooling/config to support Lit + component tests (webpack multi-entry, Jest config, Babel TS declare fields, tsconfig test includes), plus a few small helper/style/string cleanups.
Reviewed changes
Copilot reviewed 23 out of 24 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.mjs | Switch to multi-entry build and emit per-component bundles under dist/components/*. |
| tsconfig.test.json | Include source-located *.test.ts files in the test TS project. |
| test/helpers/setup.ts | Minor cleanup in Jest setup. |
| src/v2/components/signupButton/SignupButton.ts | New Lit-based signup button component. |
| src/v2/components/signupButton/README.md | Usage + API docs for signup button. |
| src/v2/components/signupButton/index.ts | Registers <solid-ui-signup-button> custom element and exports class. |
| src/v2/components/loginButton/README.md | Usage + API docs for login button. |
| src/v2/components/loginButton/LoginButton.ts | New Lit-based login button with IDP selection popup + OIDC login flow wiring. |
| src/v2/components/loginButton/index.ts | Registers <solid-ui-login-button> custom element and exports class. |
| src/v2/components/header/README.md | Usage + API docs for new header component. |
| src/v2/components/header/index.ts | Registers <solid-ui-header> custom element and exports types/classes. |
| src/v2/components/header/Header.ts | New Lit-based header integrating login + signup components and menus. |
| src/v2/components/header/header.test.ts | Unit tests for <solid-ui-header> behavior and rendering. |
| src/utils/headerFooterHelpers.ts | Update getPod() heuristics for databrowser shell routing. |
| src/pad.ts | Formatting/string literal consistency adjustments. |
| src/footer/index.ts | Ensure consistent footer styling and simplify link construction. |
| src/acl/access-groups.ts | Minor string concatenation cleanup. |
| scripts/build-component-dts.mjs | Generate dist/components/*/index.d.ts wrappers for subpath exports. |
| README.md | Document web component exports and build pipeline; add AI usage section. |
| package.json | Add component subpath exports + build steps to generate component .d.ts wrappers; add deps for Lit/build. |
| jest.config.mjs | Allow transforming Lit deps + mock CSS imports in tests. |
| babel.config.mjs | Enable TS declare fields support for Lit-style class declarations. |
| mocks/styleMock.js | Jest mock to satisfy CSS imports during tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Agent-Logs-Url: https://github.com/SolidOS/solid-ui/sessions/f1601da9-e96e-4f6f-abc0-31ad9f363929 Co-authored-by: timea-solid <4144203+timea-solid@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This WIP PR advances the “solid-ui v2” re-architecture toward Lit-based Web Components by introducing independently consumable component entrypoints (header + auth buttons) and updating the build/test/tooling to ship them as subpath exports.
Changes:
- Added Lit Web Components for
solid-ui-header,solid-ui-login-button, andsolid-ui-signup-button(plus READMEs + unit tests). - Updated webpack/package exports/build scripts to emit per-component bundles and corresponding
.d.tswrappers underdist/components/*. - Adjusted Jest/TS/Babel configuration to support Lit + in-
srctest files and TypeScriptdeclarefields.
Reviewed changes
Copilot reviewed 25 out of 26 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
webpack.config.mjs |
Multi-entry build to emit main bundle plus per-component bundles (UMD + ESM). |
tsconfig.test.json |
Includes src/**/*.test.ts in test TS project. |
test/helpers/setup.ts |
Test environment globals setup for jsdom/undici + worker_threads. |
src/v2/components/signupButton/SignupButton.ts |
New Lit signup button component. |
src/v2/components/signupButton/SignupButton.test.ts |
Unit tests for signup button element + click behavior. |
src/v2/components/signupButton/README.md |
Public docs for signup button usage/API. |
src/v2/components/signupButton/index.ts |
Registers <solid-ui-signup-button> and re-exports types. |
src/v2/components/loginButton/README.md |
Public docs for login button usage/API. |
src/v2/components/loginButton/LoginButton.ts |
New Lit login button with IDP popup + OIDC flow integration. |
src/v2/components/loginButton/LoginButton.test.ts |
Unit tests for login button element + popup wiring. |
src/v2/components/loginButton/index.ts |
Registers <solid-ui-login-button> and re-exports types. |
src/v2/components/header/README.md |
Public docs for header component usage/API. |
src/v2/components/header/index.ts |
Registers <solid-ui-header> and re-exports types. |
src/v2/components/header/Header.ts |
New Lit header component integrating login/signup components and menus. |
src/v2/components/header/header.test.ts |
Unit tests for header behavior across auth/layout/theme states. |
src/utils/headerFooterHelpers.ts |
Updated getPod() logic to better handle databrowser shell routes. |
src/pad.ts |
String/formatting adjustments (quote + spacing normalization). |
src/footer/index.ts |
Refactor of footer “Powered by” link creation/styling. |
src/acl/access-groups.ts |
Minor string concatenation change. |
scripts/build-component-dts.mjs |
Generates per-component dist/components/*/index.d.ts wrappers. |
README.md |
Adds “Web Components” section + build pipeline docs + AI usage note. |
package.json |
Adds subpath exports for components; build/watch updates; adds deps (lit, loaders); bumps pane-registry. |
package-lock.json |
Lockfile updates for new deps/bumps. |
jest.config.mjs |
Updates transform allowlist for Lit packages + CSS module mapping. |
babel.config.mjs |
Enables allowDeclareFields for TS declare class fields. |
__mocks__/styleMock.js |
Jest mock for CSS imports. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - `layout`: `desktop` or `mobile`. Mobile layout hides the brand logo link and does not render the help menu. | ||
| - `theme`: `light` or `dark`. | ||
| - `authState`: `logged-out` or `logged-in`. | ||
| - `loginAction`: object with a `label` for the login button. When `authState` is `logged-out` this is rendered as a `<solid-ui-login-button>` which handles the full OIDC flow; supplying a `url` instead opts out of the built-in flow and renders a plain link. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is a WIP step toward re-architecting solid-ui as Lit-based Web Components, adding independently consumable component entrypoints (Header, Login Button, Signup Button) and updating the build/test pipeline to support component bundles + types.
Changes:
- Added Lit Web Components for
solid-ui-header,solid-ui-login-button, andsolid-ui-signup-button, including READMEs and Jest tests. - Updated webpack to build multiple entrypoints and emit per-component bundles under
dist/components/<name>/, while keeping the legacyUIUMD global for the main bundle. - Added subpath exports + a post-build script to generate
dist/components/<name>/index.d.tswrappers; updated Jest/Babel config for Lit and CSS handling.
Reviewed changes
Copilot reviewed 25 out of 26 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.mjs | Multi-entry bundling for main + component entrypoints; per-entry output filenames for component bundles. |
| tsconfig.test.json | Expands test TS include patterns to cover src/**/*.test.ts. |
| test/helpers/setup.ts | Minor cleanup in Node test setup around worker_threads globals. |
| src/v2/components/signupButton/SignupButton.ts | New Lit SignupButton component opening a configured signup URL. |
| src/v2/components/signupButton/SignupButton.test.ts | Adds Jest coverage for custom element registration and click behavior. |
| src/v2/components/signupButton/README.md | Documents the signup button API, theming, and build output paths. |
| src/v2/components/signupButton/index.ts | Registers <solid-ui-signup-button> and re-exports the class. |
| src/v2/components/loginButton/README.md | Documents login button usage, API, popup behavior, and build outputs. |
| src/v2/components/loginButton/LoginButton.ts | New Lit LoginButton implementing Solid OIDC login popup flow via solid-logic. |
| src/v2/components/loginButton/LoginButton.test.ts | Adds Jest coverage for element registration and popup label/input wiring. |
| src/v2/components/loginButton/index.ts | Registers <solid-ui-login-button> and re-exports the class. |
| src/v2/components/header/README.md | Documents the new header component API, slots, auth modes, and build pipeline. |
| src/v2/components/header/index.ts | Registers <solid-ui-header> and re-exports types/classes. |
| src/v2/components/header/Header.ts | New Lit Header component composing login/signup buttons and account/help menus. |
| src/v2/components/header/header.test.ts | Adds Jest coverage for header rendering, auth state transitions, layout/theme behavior, and help menu list rendering. |
| src/utils/headerFooterHelpers.ts | Updates getPod() logic to better detect databrowser shell pod roots vs static pages. |
| src/pad.ts | Formatting/string-literal cleanup (quote style consistency). |
| src/footer/index.ts | Refactors footer controller info block construction to reduce duplication. |
| src/acl/access-groups.ts | Minor string construction change in an error message. |
| scripts/build-component-dts.mjs | New script generating per-component dist/components/<name>/index.d.ts re-export wrappers. |
| README.md | Adds “Web Components” documentation and a “Generative AI usage” section. |
| package.json | Adds component subpath exports; wires postbuild script; adds Lit and watch script changes; adds css/style loaders. |
| package-lock.json | Lockfile updates for new/updated dependencies (Lit, loaders, and transitive bumps). |
| jest.config.mjs | Updates transforms/ignore patterns for Lit packages; maps CSS imports to a Jest mock. |
| babel.config.mjs | Enables allowDeclareFields for TS transform (needed for declare class fields patterns). |
| mocks/styleMock.js | Jest mock module for CSS imports. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - `layout`: `desktop` or `mobile`. Mobile layout hides the brand logo link and does not render the help menu. | ||
| - `theme`: `light` or `dark`. | ||
| - `authState`: `logged-out` or `logged-in`. | ||
| - `loginAction`: object with a `label` for the login button. When `authState` is `logged-out` this is rendered as a `<solid-ui-login-button>` which handles the full OIDC flow; supplying a `url` instead opts out of the built-in flow and renders a plain link. |
TallTed
reviewed
Apr 13, 2026
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.
This work is work in progress to: