#171 Source Card Content

[SharonStrats]

Included

• Typescript: Converted to typescript
• Structure: Restructured/refactored the code to match the new design.
• 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
• 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

[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]

I skimmed the changes, added a couple of suggestions for improvements but I don't think I found any big issue.

[NoelDeMartin]

I'm not sure this is a good idea, I'd just write normal imports wherever these components are necessary.

[SharonStrats]

I'll have to test this as i had to do this to get the chunking to work with vite for some reason but i can try again

[NoelDeMartin]

I think this can be replaced by the helpers in solidos-toolkit (and improve them if they are missing some functionality).

[SharonStrats]

Once I complete the whole project i will take a look at the tests again.

[NoelDeMartin]

I'm adding another review since I meant to do a "comment", not "request changes". Not sure why that didn't work :/.

[NoelDeMartin]

Trying again after resolving all the comments from my "request changes" review... If this still doesn't appear as a comment I don't know what else to do 😅. Sorry for the noise.

I tried to approve it a couple of times but it was stuck with "request changes"... Hopefully this will work (dismissing the review).