Milestone3m [WiP] by timea-solid · Pull Request #739 · SolidOS/solid-ui

timea-solid · 2026-04-13T07:31:25Z

This is an artificial branch for test ci only. Actual work is done on milestone2k. -> DO NOT ADD any change or feedback here!
Changes allowed are ONLY for test branch building purposes.

Any code logic should be commented on: #740

Copilot

Pull request overview

This PR introduces a new set of Lit-based “v2” Web Components (header + auth buttons) and wires them into the build/test pipeline so they can be consumed via package subpath exports (solid-ui/components/*).

Changes:

Add Lit Web Components: <solid-ui-header>, <solid-ui-login-button>, <solid-ui-signup-button> plus READMEs and unit tests.
Update webpack to emit per-component bundles under dist/components/<component>/index.* and update package.json subpath exports accordingly.
Adjust Jest/TypeScript test configuration and update existing unit snapshots.

Reviewed changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
webpack.config.mjs	Builds multiple entrypoints and emits component bundles under `dist/components/*`.
tsconfig.test.json	Includes `src/*/.test.ts` in the test TS project.
test/unit/index.test.ts	Updates index export contract test.
test/unit/header/snapshots/index.test.ts.snap	Snapshot updates for legacy header DOM output.
test/helpers/setup.ts	Minor cleanup in test setup.
src/v2/components/header/Header.ts	New Lit-based header component implementation.
src/v2/components/header/index.ts	Registers `<solid-ui-header>` and exports types.
src/v2/components/header/README.md	Documents header component usage and API.
src/v2/components/header/header.test.ts	Adds unit tests for the new header component.
src/v2/components/loginButton/LoginButton.ts	New Lit-based login button with popup flow.
src/v2/components/loginButton/index.ts	Registers `<solid-ui-login-button>`.
src/v2/components/loginButton/README.md	Documents login button component usage and API.
src/v2/components/signupButton/SignupButton.ts	New Lit-based signup button.
src/v2/components/signupButton/index.ts	Registers `<solid-ui-signup-button>`.
src/v2/components/signupButton/README.md	Documents signup button component usage and API.
src/utils/headerFooterHelpers.ts	Changes `ns` import and tweaks `getPod()` behavior.
src/pad.ts	Formatting / string quoting adjustments.
src/footer/index.ts	Refactors footer link creation and styling placement.
src/acl/access-groups.ts	Minor string concatenation tweak.
scripts/build-component-dts.mjs	Adds a postbuild script to generate `dist/components/*` type wrappers.
README.md	Adds top-level documentation for Web Components and build pipeline.
package.json	Adds subpath exports for components and adjusts build scripts/deps.
jest.config.mjs	Expands transform ignore patterns for Lit packages + CSS mock mapping.
babel.config.mjs	Enables `allowDeclareFields` for TS preset (needed for `declare`).
mocks/styleMock.js	Adds Jest mock for CSS imports.

Comments suppressed due to low confidence (1)

webpack.config.mjs:33

With multiple new entrypoints (header, loginButton, signupButton) sharing the same output.library.name: 'UI', loading more than one of the emitted UMD bundles via script tags will overwrite window.UI (last bundle wins). Consider omitting the global name for component bundles or using a per-entry library name to avoid clobbering the main UI global.

const common = {
  entry: {
    main: './src/index.ts',
    header: './src/v2/components/header/index.ts',
    loginButton: './src/v2/components/loginButton/index.ts',
    signupButton: './src/v2/components/signupButton/index.ts'
  },
  output: {
    path: path.resolve(process.cwd(), 'dist'),
    library: {
      name: 'UI',
      type: 'umd'
    },

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

scripts/build-component-dts.mjs

src/utils/headerFooterHelpers.ts

test/unit/index.test.ts

Copilot · 2026-04-13T07:39:22Z

src/v2/components/header/header.test.ts

+    expect(brandLink?.href).toContain('/home')
+
+    const authButtons = shadow?.querySelectorAll('.auth-button')
+    expect(authButtons).toHaveLength(2)
+


The header component’s logged-out template renders <solid-ui-login-button> / <solid-ui-signup-button> and does not include any elements with the .auth-button class, so these queries will return an empty NodeList and the assertions will fail. Update the selectors/assertions to target the custom elements (or their shadow parts) instead of .auth-button.

Copilot · 2026-04-13T07:39:22Z

src/v2/components/header/header.test.ts

+    const shadow = header.shadowRoot
+    const authButtons = shadow?.querySelectorAll('.auth-button')
+    const loginButton = authButtons?.[0] as HTMLButtonElement
+    const signUpLink = authButtons?.[1] as HTMLAnchorElement
+
+    expect(authButtons).toHaveLength(2)
+    expect(loginButton.textContent?.trim()).toBe('Log in')
+    expect(signUpLink.textContent?.trim()).toBe('Sign Up')
+
+    loginButton.click()
+
+    expect(authActionSelected).toHaveBeenCalledWith({
+      role: 'login',
+      item: { label: 'Log in', action: 'login' }
+    })
+  })


This test clicks the first “login button” and expects an auth-action-select event immediately. In the component implementation, auth-action-select is dispatched only when the nested <solid-ui-login-button> emits login-success (i.e. after a successful login flow), not on click. The test should simulate/dispatch login-success on the nested element (or adjust expectations) to match the actual behavior.

Copilot · 2026-04-13T07:39:24Z

test/unit/header/__snapshots__/index.test.ts.snap

          <li
-            style="border-bottom: solid 1px #000000;"
+            class="headerUserMenuListItem"
          >
            <a
+              class="headerUserMenuLink"
              href="https://reflectechblog.wordpress.com/"
-              style="background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none;"
+              id="headerUserMenuLink"
            />


The rendered markup includes multiple elements with the same id="headerUserMenuLink" within the same banner. Duplicate IDs make the DOM invalid and can break getElementById/CSS targeting. Prefer removing these IDs or generating unique IDs per instance/menu item.

Copilot · 2026-04-13T07:39:24Z

package.json

  "dependencies": {
    "@noble/curves": "^2.0.1",
    "@noble/hashes": "^2.0.1",
+    "copy-webpack-plugin": "^14.0.0",
    "escape-html": "^1.0.3",
+    "lit": "^3.3.2",
    "mime-types": "^3.0.2",
-    "pane-registry": "^3.0.2",
+    "pane-registry": "^3.1.0",
    "solid-namespace": "^0.5.4",
    "uuid": "^13.0.0"


copy-webpack-plugin was added as a runtime dependency, but it isn’t referenced anywhere in the repo (including webpack.config.mjs). If it’s not needed for the build, it should be removed to avoid pulling in an extra dependency tree (and its Node engine constraints) unnecessarily.

Copilot · 2026-04-13T07:39:24Z

package.json

  "description": "UI library for Solid applications",
  "main": "dist/solid-ui.js",
  "types": "dist/index.d.ts",
-  "sideEffects": false,
  "exports": {
    ".": {


Removing "sideEffects": false disables tree-shaking for the entire package. If this was done to preserve custom-element registration side effects, consider using a sideEffects allowlist (e.g. only the component entrypoints) so consumers can still tree-shake the rest of the library.

Copilot · 2026-04-13T07:39:25Z

src/v2/components/loginButton/LoginButton.ts

+  declare label: string
+  declare theme: 'light' | 'dark'
+  declare issuerUrl: string
+  declare _popupOpen: boolean
+  declare _issuerInputValue: string
+
+  private _errorMsg = ''
+
+  constructor () {
+    super()
+    this.label = 'Log In'
+    this.issuerUrl = ''
+    this._popupOpen = false
+    this._issuerInputValue = ''
+  }


theme is declared as 'light' | 'dark' but is never initialized in the constructor, so at runtime it can be undefined when the component is used standalone. Either initialize this.theme = 'light' (to match the documented default) or widen the type to include undefined/absence to keep TS types accurate.

Copilot · 2026-04-13T07:39:25Z

src/v2/components/signupButton/SignupButton.ts

+
+  constructor () {
+    super()
+    this.label = 'Sign Up'


theme is declared as 'light' | 'dark' but isn’t initialized, so standalone usage yields theme === undefined at runtime. To match the README’s default 'light' and keep typings correct, initialize this.theme = 'light' or allow undefined in the type.

Suggested change

this.label = 'Sign Up'

this.label = 'Sign Up'

this.theme = 'light'

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…o milestone2k

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>

…l Ui

…o milestone2k

timea-solid and others added 14 commits March 31, 2026 10:39

started updating header style

48f81f7

Merge branch 'main' into milestone2k

d935375

header component

e3158d4

fixed web cmponents distribution

dd5b22d

login and signup web components wired in header

274ae77

close to final design

d041d1d

help menu render depends on layout

1ed16ed

minor layout conditional css

3bc2412

propagate logout

9699fae

css improvement of loggedin header button

9046dfd

Support path-based pod roots in header and footer helpers

a88cb70

lint

0257e35

update pane-registry

884c8c0

navigation-toggle

00d1cd7

Copilot AI review requested due to automatic review settings April 13, 2026 07:31

Copilot started reviewing on behalf of timea-solid April 13, 2026 07:32 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

timea-solid and others added 3 commits April 13, 2026 10:48

Update scripts/build-component-dts.mjs

626fd49

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/utils/headerFooterHelpers.ts

12b426a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update test/unit/index.test.ts

9d4d657

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

timea-solid changed the title ~~Milestone3m~~ Milestone3m [WiP] Apr 13, 2026

timea-solid and others added 9 commits April 13, 2026 11:05

fix tests

1b0c781

better watch

c124a18

Potential fix for pull request finding

2f8d31d

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fixed global UI problem

9b1ea92

improved readme

a07b23e

Potential fix for pull request finding

56f778f

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

remove unused copy-webpack-plugin

7451cc5

align readme with defaults

4e607fa

Merge branch 'milestone2k' of https://github.com/solidos/solid-ui int…

440a20e

…o milestone2k

timea-solid and others added 12 commits April 13, 2026 12:57

updated lock file for node 24

d5bf92e

improved readme

fea7473

fix typo in readme

b0a11eb

fix issuer URL input

4d43fd6

Fix Escape key handling in LoginButton popup to work regardless of focus

74f3502

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>

leave UI global variable untouched, web components not added to globa…

a8b9a09

…l Ui

added login and signup tests

8f6afc8

Merge branch 'milestone2k' of https://github.com/solidos/solid-ui int…

48b1b8b

…o milestone2k

build improvements

0016dbe

Merge branch 'main' into milestone2k

5c1c9c1

improve code based on claude PR reviews

ffc854a

improved watch

6410a72

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Milestone3m [WiP]#739

Milestone3m [WiP]#739
timea-solid wants to merge 38 commits intomainfrom
milestone3m

timea-solid commented Apr 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Copilot AI Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	this.label = 'Sign Up'
	this.label = 'Sign Up'
	this.theme = 'light'

Conversation

timea-solid commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

timea-solid commented Apr 13, 2026 •

edited

Loading