Shadow dom prototype#346
Closed
timea-solid wants to merge 12 commits into
Closed
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prototypes a Shadow DOM–based implementation of the profile pane by converting key UI sections into custom elements with per-component styles, and updates the build/test setup to bundle CSS and support Shadow DOM rendering in Jest.
Changes:
- Refactors
ProfileViewand multiple cards (Profile/CV/Social/Stuff/Friends/Chat/QRCode) into custom elements using Shadow DOM andadoptedStyleSheets(with<style>fallbacks). - Introduces new global + component-scoped CSS and updates text constants used by UI buttons/messages.
- Replaces the build pipeline with Webpack (including a new dual-output
webpack.config.mjs) and updates tests to query within nested shadow roots.
Reviewed changes
Copilot reviewed 44 out of 46 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.dev.config.mjs | Dev bundling updates (CSS raw-loader, output filename, externals change). |
| webpack.config.mjs | New production build config emitting ESM + CJS bundles. |
| tsconfig.json | Adds TS plugin config and adjusts comments/typing config. |
| test/stuff.spec.ts | Updates test to locate Stuff section inside nested shadow roots. |
| test/SocialPresenter.spec.ts | Removes old presenter test file. |
| test/social.spec.ts | Updates Social test to query inside Shadow DOM. |
| test/qrcode.spec.ts | Updates QRCode test for Shadow DOM and async render. |
| test/profile-card.spec.ts | Updates ProfileCard tests for Shadow DOM structure. |
| test/friend-list.spec.ts | Updates Friend list tests to query inside Shadow DOM. |
| test/examples/testingsolidos.ttl | Updates example prefix URI. |
| test/examples/combined.ttl | Updates example prefix URI. |
| test/edit-profile.spec.ts | Makes edit-profile tests more robust and types delay helper. |
| test/cv.spec.ts | Updates CV tests for Shadow DOM + adds semantic assertions. |
| test/chat-with-me.spec.ts | Updates chat tests for Shadow DOM and shared text constants. |
| test/button-helpers.test.ts | Moves helper tests to buttonsHelper and adds coverage for login check helper. |
| test/add-me-to-your-friends.test.ts | Updates add-me tests to find buttons inside shadow roots. |
| test/add-me-to-your-friends-functions.test.ts | Removes duplicated checkIfAnyUserLoggedIn tests from this suite. |
| src/texts.ts | Adds/updates shared UI strings (QR caption, button labels). |
| src/styles/SocialCard.css | New Social card styling. |
| src/styles/QRCodeCard.css | New QRCode card styling. |
| src/styles/ProfileCard.css | New Profile card styling. |
| src/styles/global.css | Introduces global tokens/utilities and shared table/card styles. |
| src/styles/CVCard.css | New CV card styling. |
| src/styles/ChatWithMe.css | New Chat-with-me styling. |
| src/StuffPresenter.ts | Minor cleanup (consolidates destructuring, removes logging). |
| src/StuffCard.ts | Converts Stuff card to a Shadow DOM custom element and adopts global styles. |
| src/SocialPresenter.ts | Removes/guards logging. |
| src/SocialCard.ts | Converts Social card to a Shadow DOM custom element with scoped styles. |
| src/QRCodeCard.ts | Converts QRCode card to a Shadow DOM custom element rendering SVG. |
| src/ProfileView.ts | Converts ProfileView to a custom element assembling the page via Shadow DOM. |
| src/ProfileCard.ts | Converts ProfileCard to a Shadow DOM custom element and embeds QRCode. |
| src/presenter.ts | Minor formatting change. |
| src/index.ts | Renders <profile-view> custom element rather than lit-html template rendering. |
| src/FriendsPresenter.ts | New presenter that extracts friends from solid-ui attachment list output. |
| src/FriendList.ts | Converts FriendList to a Shadow DOM custom element using global styles. |
| src/editProfilePane/editProfile.view.ts | Comments out debug logging. |
| src/CVCard.ts | Converts CV card to a Shadow DOM custom element with semantic markup. |
| src/ChatWithMe.ts | Converts Chat-with-me to a Shadow DOM custom element using shared helpers. |
| src/buttonsHelper.ts | New shared helper utilities for button panes (error/success messages, login check). |
| src/baseStyles.ts | Removes old inline-style helper module. |
| src/addMeToYourFriendsHelper.ts | Removes old helper module in favor of buttonsHelper. |
| src/addMeToYourFriends.ts | Updates add-me pane to use shared helpers and new styling/structure. |
| src/0SAVED-CVCard.ts | Removes saved legacy CVCard file. |
| README.md | Removes “SolidOS” bullet from tech list. |
| package.json | Switches build to Webpack, updates entrypoints/exports, adds loaders/plugins. |
| package-lock.json | Lockfile updates for new build dependencies. |
| jest.config.mjs | Updates Jest transforms and maps CSS/TTL imports to mocks. |
| dev/index.ts | Ensures dev page loads global CSS and adds null checks for DOM IDs. |
| dev/index.html | Removes global script tags for rdflib/solid-* in dev HTML. |
| declarations.d.ts | Adds *.css module declaration. |
| CSS_CUSTOM_PROPERTIES.md | Adds documentation for global CSS variables. |
| babel.config.mjs | Removes inline-import plugin and configures CommonJS module transform for Jest. |
| mocks/fileMock.js | Updates mock export for CSS/TTL imports. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div class=${localStyles.details} role="text" ${label ? `aria-label="${label}: ${value}"` : ''}> | ||
| function Line(value, prefix: symbol | string = nothing, label: string = '') { | ||
| return value ? html` | ||
| <div class="details" role="text" ${label ? `aria-label="${label}: ${value}"` : ''}> |
Comment on lines
+35
to
+37
| async connectedCallback() { | ||
| // Attach shadow root | ||
| const shadow = this.attachShadow({ mode: 'open' }) |
Comment on lines
46
to
48
| externals: { | ||
| 'rdflib': '$rdf', | ||
| 'solid-ui': 'UI' | ||
| 'fs': 'null', | ||
| }, |
Comment on lines
+1
to
+8
| import glob from 'glob' | ||
| import path from 'path' | ||
| import TerserPlugin from 'terser-webpack-plugin' | ||
|
|
||
| const common = { | ||
| entry: './src/index.ts', | ||
| const entries = Object.fromEntries( | ||
| glob.sync('./src/**/*.ts').map(file => [ | ||
| path.relative('./src', file).replace(/\.ts$/, ''), | ||
| file | ||
| ]) |
Comment on lines
5
to
11
Comment on lines
48
to
51
| buttonContainer = context.dom.createElement('section') as HTMLDivElement | ||
| buttonContainer.setAttribute('class', localStyles.buttonSubSection) | ||
| buttonContainer.setAttribute('class', 'buttonSubSection') | ||
| buttonContainer.setAttribute('aria-labelledby', 'add-me-to-your-friends-button-section') |
Comment on lines
1
to
3
Comment on lines
67
to
96
| "devDependencies": { | ||
| "@babel/cli": "^7.28.3", | ||
| "@babel/core": "^7.26.7", | ||
| "@babel/preset-env": "^7.27.2", | ||
| "@babel/preset-typescript": "^7.27.1", | ||
| "@testing-library/dom": "^10.4.1", | ||
| "@testing-library/jest-dom": "^6.6.3", | ||
| "@types/jest": "^30.0.0", | ||
| "@typescript-eslint/parser": "^8.39.0", | ||
| "babel-jest": "^30.0.0", | ||
| "babel-loader": "^10.0.0", | ||
| "babel-plugin-inline-import": "^3.0.0", | ||
| "chat-pane": "^2.5.1-8a75927f", | ||
| "css-loader": "^7.1.2", | ||
| "chat-pane": "^3.0.0", | ||
| "eslint": "^9.33.0", | ||
| "html-webpack-plugin": "^5.6.3", | ||
| "identity-obj-proxy": "^3.0.0", | ||
| "jest": "^30.0.2", | ||
| "jest-environment-jsdom": "^30.0.2", | ||
| "jest-fetch-mock": "^3.0.3", | ||
| "jsdom": "^27.0.0", | ||
| "node-polyfill-webpack-plugin": "^4.1.0", | ||
| "raw-loader": "^4.0.2", | ||
| "rdflib": "^2.3.0", | ||
| "solid-logic": "^3.1.1-a44ca66", | ||
| "solid-ui": "^2.6.1-e78cbe5", | ||
| "style-loader": "^4.0.0", | ||
| "solid-logic": "^4.0.1", | ||
| "solid-ui": "^3.0.1", | ||
| "terser-webpack-plugin": "^5.3.14", | ||
| "ts-loader": "^9.5.4", | ||
| "typescript": "^5.9.2", | ||
| "typescript-plugin-css-modules": "^5.2.0", | ||
| "webpack": "^5.103.0", | ||
| "webpack-cli": "^6.0.1", | ||
| "webpack-dev-server": "^5.2.2" | ||
| } |
Comment on lines
67
to
71
| const me = authn.currentUser() | ||
| const store: LiveStore = context.session.store | ||
|
|
||
| if (checkIfAnyUserLoggedIn(me)) { | ||
| checkIfFriendExists(store, me, subject).then((friendExists) => { |
Member
Author
|
This was reopned just for documentation reference. |
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.
No description provided.