#171 Source Card Content by SharonStrats · Pull Request #178 · SolidOS/source-pane

SharonStrats · 2026-06-04T06:54:08Z

Included

Typescript: Converted to typescript
Structure: Restructured/refactored the code to match the new design.
CSS: Configured babel to work like solid-ui for styles - PostCSS for web components.
Web Component: Created the SourceCard as a web component following the design-system web components, in order to use context, consumer implementing PR feedback a SourceProvider web component was also created.
CodeMirror: Integrated CodeMirror6 as the code editor.
Lazy Loading: lazy loaded the SourceEditor - see below for instructions to get this working in mashlib.
CodeMirror Extensions: Configured extensions linenumbers, history - enables the Undo and Redo state-tracking buffers, drawselection - allows you to safely style your text highlight color in dark themes using, linewrapping - Forces long lines of code to automatically wrap horizontally within the boundary of the editor container., keyboard actions - standard keyboard shortcuts like arrow key navigation, Home, End, PageUp, and PageDown and system commands for undo (Ctrl+Z / Cmd+Z) and redo (Ctrl+Y / Cmd+Y / Shift+Cmd+Z) directly to the history() buffer.
Configured languages: turtle, sparql, ntriples, xml, json, n3 (supported with the turtle language), JavaScript, html and css
Tests

Still need to do

export the web component class from solid-ui and use that instead of the copied version.

Getting lazy loading to work on mashlib
Note: there is more than one file currently added to pivot, browser.html, mash.css, mashlib.js, mashlib.min.js....

needed to add esm to source-pane
mashlib webpack: output: chunkFilename: '[name].js',
mashlib webpack: optimization: splitChunks: false - so that all the code stays in the one source-editor.js file, otherwise webpack splits out the codemirror code into it's own file (which means we'd need to maintain 2 additional chunk files instead of just the 1)
pivot configuration: config/customize-me.ori.json - add the source-editor.js and source-editor.js.map files just like mashlib etc. (2 entries)
Note: after discussion in meeting we are now adding the whole dist folder to pivot/css so we could do without the splitChunk optimization setting or the comment in the card adding the filename. I'll leave them for now.

AI was used to for the Header which will be rewritten in another ticket Prompt: Make the lit html and the dom manipulation work together in Header.ts Co-authored-by: Model GPT5.4 <copilot@github.com>

will see about exporting it from solid-ui later

Copilot

Pull request overview

This PR modernizes the Source Pane by migrating the implementation from a legacy DOM/textarea approach to a Lit + TypeScript component structure, introducing a CodeMirror 6-based editor, and updating the build pipeline and tests accordingly.

Changes:

Replaced src/sourcePane.js with a new Lit-rendered src/sourcePane.ts plus supporting modules (Header, helpers, StatusSection, types).
Added a CodeMirror-backed SourceEditor and a source-editor-card web component with Lit CSS module styling.
Updated Webpack/Babel/PostCSS setup for TypeScript + Lit decorators + *.styles.css, and refreshed/added Jest tests.

Reviewed changes

Copilot reviewed 26 out of 29 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
webpack.module.rules.mjs	Adds `lit-css-loader` rule for `*.styles.css` and adjusts CSS rule exclusions.
webpack.config.mjs	Switches webpack entry to TypeScript source pane entry and removes copy step.
tsconfig.json	Introduces TS project configuration for the new TypeScript code.
test/sourcePane.test.js	Refactors tests to assert control visibility classes and edit behavior.
test/sourceEditorCard.test.js	Adds tests for the SourceEditorCard component (mocking editor + helpers).
test/sourceEditor.test.js	Adds tests for the CodeMirror-backed SourceEditor (via module mocks).
test/helpers.test.js	Adds unit tests for helper functions (headers parsing, fetch/metadata, UI toggling).
src/types.ts	Adds shared metadata/state types for the pane.
src/StatusSection.ts	Adds a Lit-rendered status/error section with show/clear helpers.
src/StatusSection.css	Styles status section visibility and error message presentation.
src/sourcePane.ts	New TypeScript Lit-based pane entry and render implementation.
src/sourcePane.js	Removes legacy textarea-based implementation.
src/sourcePane.css	Updates layout/styling to match the new component structure.
src/SourceEditor.ts	Adds CodeMirror 6-based editor wrapper with language selection.
src/primitives/WebComponent.ts	Adds a LitElement base with ElementInternals “states” support.
src/helpers.ts	Extracts shared behaviors: response header parsing, syntax checking, control toggling, content fetch.
src/Header.ts	Implements header controls (Edit/Compact/Save) for the new UI.
src/debug.ts	Adds centralized log/warn/error helpers.
src/components/sourceEditor/SourceEditorCard.ts	Adds the `source-editor-card` Lit web component integrating fetch + editor initialization.
src/components/sourceEditor/SourceEditorCard.styles.css	Adds Lit CSS-module styles for the editor card presentation.
src/compactableFormats.ts	Extracts compactable content-type map into its own module.
package.json	Adds CodeMirror deps and build tooling for TS + Lit decorators + PostCSS/Tailwind + lit-css-loader.
package-lock.json	Lockfile updates for newly added dependencies.
jest.config.mjs	Broadens the ESM transform allowlist for Lit packages.
dev/index.js	Updates the dev target URI used when rendering the pane locally.
declarations.d.ts	Adds typings for `.styles.css` and generic `.css` imports.
config/postcss.mjs	Adds PostCSS pipeline (Tailwind PostCSS plugin) for lit-css-loader transforms.
config/babel.mjs	Adds Babel options/overrides for Lit decorators usage in selected paths.
babel.config.mjs	Enables TypeScript preset and Lit decorators overrides in Babel config.

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

Copilot

Pull request overview

Copilot reviewed 27 out of 30 changed files in this pull request and generated 5 comments.

NoelDeMartin

I see this is just a draft, so I'm not reviewing everything, but I left some comments for the WIP.

NoelDeMartin · 2026-06-08T07:33:52Z

+// copied from solid-ui for now so I can follow same structure as other webcomponets
+// i think we need to export this, but want to talk to team


Yes, this should be imported from solid-ui. We could also migrate this package to use Vite like I am doing in SolidOS/solid-ui#787, but you can wait until that is merged for both.

the WebComponent isn't currently exported. I think I'll fix this in another ticket.

NoelDeMartin · 2026-06-08T07:34:49Z

+
+/* The base styles were copied from google 
+   highlighting was modified to fit our design and needs */
+const darkTheme = EditorView.theme({


Are we supporting dark themes? I know we wanted to support it at some point, but until we support it everywhere I don't think it's a good idea to start adding it to some components and others not.

I was struggling with this a bit as I believe this editor dark theme belongs in the light theme for mashlib. I'll clarify at the meeting. I think I should name it something else.

NoelDeMartin · 2026-06-08T07:44:18Z

+  @property({ attribute: false })
+  accessor store!: LiveStore
+
+  @property({ attribute: false })
+  accessor subject!: NamedNode


I'm not sure that we should be using this type of attributes, because this only works with Lit so they won't be reusable web components. Still, I'm aware that this source pane doesn't have to be reusable as a web component... But I'm sure we'll run into similar issues with the other components.

In this case, though, I think it should be possible to obtain the store from some globals or the logged in session, right? Check out how we're using @lit/context in the solid-ui package, in particular how the auth session is obtained (we should probably introduce a Store getter in the interface, or create another context for that).

And the subject couldn't just be a string?

I added the context/consumer and changed subject to a string. I then convert it to a NamedNode when using with fetching etc.

Currently there is no auth in source-pane. I wanted to add it when working on the header because I'm thinking that the edit button shouldn't allow editing unless the user has the access (currently it lets you edit and then errors when you save).

Hopefully I did this correctly. I can change it if not.

NoelDeMartin · 2026-06-08T07:47:06Z

+    }
+  }
+
+  function renderStatusSection() {


Is this new code, or has it been copied from before? Looking at the code, I think this existed before but was created using imperative APIs (createElement, etc.). If we're going to migrate it, I think we should use the new web components pattern. If it's just been moved from an existing file as-is, then I think it's ok to leave it like this for now.

Yeah i copied it over, i'm going to change it and the header over to web components in other tickets.

Update: I realized it was the error message block widget originally. I added the render function so the messages sit at the bottom of the page. I still think I should handle creating a web component and style it in another ticket. I created one now.

Prompt: Add tests for the current editor flow in SourceEditor, SourceEditorCard, and helpers. Cover initialization, read-only toggling, replace-content behavior, metadata/header handling, and the pane button visibility logic. Remove or replace any skipped tests that are now stale. Keep the tests focused on the current implementation, not the old textarea-based flow. After editing, run the test suite and fix any failing assertions. Co-authored-by: GPT-5.4 mini <gpt-5.4-mini@openai.com>

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

Prompt: setup typescript linting Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Prompt: help me determine why lazy loading is not working when rolled up into mashlib Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

basic implementation will extend further when working on the header

remove custom theme and add vscode themes

timea-solid · 2026-06-11T08:36:23Z

Only comment I have - pls do not make this PR very large. Better split in multiple PRs.

SharonStrats · 2026-06-11T18:44:14Z

Good point. I'll stop adding anything else now after I push up my current work and just create tickets for anything that's left.

Copilot

Pull request overview

Copilot reviewed 30 out of 33 changed files in this pull request and generated 9 comments.

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

Prompt: gave the feedback from copilot (very long can look in PR) for testing feedback and sideEffects Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats · 2026-06-11T21:14:03Z

  ],
  optimization: {
    minimize: true,
+    splitChunks: false,


We could actually do without this now that the whole dist folder is added to pivot and css. Even if set here though mashlib will still split in 2 chunks if the setting isn't turned on there as well.

SharonStrats · 2026-06-11T21:15:49Z

+      return
+    }
+    try {
+      const { SourceEditor } = await import(/* webpackChunkName: "source-editor" */ './SourceEditor')


Since we expose the whole dist folder we also don't need to add the comment because it won't matter what the file name is. Wondering if I should delete it or if it matters?

SolidOS#171 modernize codebase

82c7531

SharonStrats self-assigned this Jun 4, 2026

SharonStrats added the enhancement New feature or request label Jun 4, 2026

SharonStrats added this to SolidOS NLNet UI Jun 4, 2026

SharonStrats moved this to In progress in SolidOS NLNet UI Jun 4, 2026

SharonStrats linked an issue Jun 4, 2026 that may be closed by this pull request

overall Card and content display #171

Open

SharonStrats added 6 commits June 6, 2026 19:39

SolidOS#171 First pass refactor to match new design

cac3f76

AI was used to for the Header which will be rewritten in another ticket Prompt: Make the lit html and the dom manipulation work together in Header.ts Co-authored-by: Model GPT5.4 <copilot@github.com>

Brought over webcomponent from solid-ui

09c552d

will see about exporting it from solid-ui later

SolidOS#171 basic web component

b704221

fix babel config warnings

c3f4f53

SolidOS#171 remove cancel button

89eeb04

SolidOS#171 create and configure editor plus match design

d8fb855

SharonStrats requested a review from Copilot June 7, 2026 07:24

Copilot started reviewing on behalf of SharonStrats June 7, 2026 07:24 View session

Copilot AI reviewed Jun 7, 2026

View reviewed changes

SharonStrats requested a review from Copilot June 7, 2026 07:50

Copilot started reviewing on behalf of SharonStrats June 7, 2026 07:50 View session

Copilot AI reviewed Jun 7, 2026

View reviewed changes

Comment thread src/helpers.ts Outdated

Comment thread src/Header.ts Outdated

Comment thread src/StatusSection.ts Outdated

Comment thread src/StatusSection.ts Outdated

Comment thread src/components/sourceEditor/SourceEditor.ts Outdated

SharonStrats requested review from NoelDeMartin, bourgeoa and timea-solid June 7, 2026 20:01

NoelDeMartin reviewed Jun 8, 2026

View reviewed changes

SharonStrats and others added 6 commits June 9, 2026 06:46

Potential fix for pull request finding

7c63181

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

implement copilot suggestions

e3adbf6

Potential fix for pull request finding

5319223

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

copilot suggestions

9370b86

lazy load editor

2b18c87

SharonStrats force-pushed the feat/card-content branch from 196b46e to 2b18c87 Compare June 8, 2026 20:47

implement PR feedback

6842e6f

Improve build tsc linting and babel

11c03c6

Prompt: setup typescript linting Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats force-pushed the feat/card-content branch from 5a2634e to 11c03c6 Compare June 9, 2026 00:50

SharonStrats and others added 7 commits June 9, 2026 13:26

SolidOS#171 add esm to make lazy loading work in mashlib

b228aa4

Prompt: help me determine why lazy loading is not working when rolled up into mashlib Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

minor styling updates

6ecf3bd

SolidOS#171 show card only when editor is ready

446c89f

run cjs with testing

6911050

SolidOS#171 add state similar to design-system in solid-ui

09dc420

basic implementation will extend further when working on the header

remove theme comment

b08b03c

SolidOS#171 theme changes

0b31d74

remove custom theme and add vscode themes

SharonStrats force-pushed the feat/card-content branch from 4d569dd to 0b31d74 Compare June 10, 2026 21:05

SolidOS#171 implement dirty and editing state

3c2ad8a

SharonStrats requested a review from Copilot June 11, 2026 20:05

Copilot started reviewing on behalf of SharonStrats June 11, 2026 20:06 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

SharonStrats moved this from In progress to In review in SolidOS NLNet UI Jun 11, 2026

SharonStrats marked this pull request as ready for review June 11, 2026 20:14

SharonStrats and others added 3 commits June 12, 2026 06:17

Potential fix for pull request finding

4dc22f7

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

cleanup code

cd7e53d

Implement copilot suggestions for tests and package json

c88ad04

Prompt: gave the feedback from copilot (very long can look in PR) for testing feedback and sideEffects Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats commented Jun 11, 2026

View reviewed changes

		// copied from solid-ui for now so I can follow same structure as other webcomponets
		// i think we need to export this, but want to talk to team

Conversation

SharonStrats commented Jun 4, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NoelDeMartin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SharonStrats Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

timea-solid commented Jun 11, 2026

Uh oh!

SharonStrats commented Jun 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

SharonStrats commented Jun 4, 2026 •

edited

Loading

SharonStrats Jun 8, 2026 •

edited

Loading