milestone3m by bourgeoa · Pull Request #143 · SolidOS/source-pane

bourgeoa · 2026-04-16T11:11:50Z

responsice css

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

This reverts commit 29ffe34.

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

Copilot

Pull request overview

This PR appears aimed at making the source pane styling responsive by moving inline styling into CSS, and it additionally introduces a webpack/babel build + dev-server setup to bundle assets.

Changes:

Add responsive CSS for the source pane and switch from inline styles to CSS classes.
Introduce webpack configs (prod + dev) and Babel config to build/bundle the pane (including CSS handling).
Adjust tests to accommodate the new module export shape.

Reviewed changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
`src/sourcePane.js`	Converts to ESM, imports CSS, replaces inline style/visibility logic with CSS class toggles.
`src/styles/sourcePane.css`	Adds responsive layout rules and new state/visibility classes for the pane UI.
`webpack.module.rules.mjs`	Adds loader rules for JS/TS, CSS, CSS modules, and `.ttl` as `asset/source`.
`webpack.config.mjs`	Adds production bundling to `lib/` (normal + min UMD builds) and copies styles.
`webpack.dev.config.mjs`	Adds a dev-server config to run the pane locally with HTML template and polyfills.
`babel.config.mjs`	Adds preset-env + inline-import plugin configuration.
`package.json`	Adds sideEffects config for CSS, adds build/clean/start scripts, and adds webpack/babel/CSS tooling deps.
`test/sourcePane.test.js`	Attempts to handle default export when importing the pane module in tests.
`dev/index.js`	Adds a local dev entry to render the pane in the browser.
`dev/index.html`	Adds a simple dev HTML page/template for webpack dev-server.
`dev/dev-global.css`	Adds a large set of dev-only global styles/variables.
`dev/context.js`	Adds a reusable dev context stub for solid-logic/store.
`README.md`	Adds a “Generative AI usage” section.
`.gitignore`	Ignores `lib/` build output.

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

Copilot · 2026-04-16T11:18:03Z

  "main": "src/sourcePane.js",
  "files": [
    "/src",
    "README.md",
    "LICENSE"
  ],


The build now outputs bundles into lib/ (webpack config), but package.json still publishes only /src via the files allowlist and main still points at src/sourcePane.js. This means the published package will not include the built artifacts and consumers will still load the source entrypoint (which now imports CSS and uses ESM syntax). Either publish lib/ and point main/exports at it, or revert to shipping the source entry without requiring a build step.

Copilot · 2026-04-16T11:18:03Z

    const table = div.appendChild(dom.createElement('table'))
+    table.setAttribute('class', 'sourcePaneTable')
    const main = table.appendChild(dom.createElement('tr'))
+    main.setAttribute('class', 'sourcePaneMainCell')
    const statusRow = table.appendChild(dom.createElement('tr'))
+    statusRow.setAttribute('class', 'sourcePaneStatusRow')
    const controls = table.appendChild(dom.createElement('tr'))
-    controls.setAttribute('style', 'text-align: right;')
+    controls.setAttribute('class', 'sourcePaneControls sourcePaneControlsCell')

    const textArea = main.appendChild(dom.createElement('textarea'))
-    textArea.setAttribute('style', editStyle)
+    textArea.setAttribute('class', 'sourcePaneTextArea')


The DOM structure is invalid HTML table markup: <tr> elements are being used as containers for <textarea> and buttons without any <td>/<th> cells. This can break layout/accessibility, and it’s especially brittle now that flexbox styles are applied to .sourcePaneControls on a <tr>. Consider replacing the table-based layout with <div>s, or insert proper <td> elements and apply classes to the cells instead of the rows.

Copilot · 2026-04-16T11:18:04Z

+}
+
+.sourcePaneControlHidden {
+  visibility: collapse;


.sourcePaneControlHidden uses visibility: collapse, which is only well-defined for table rows/columns; for buttons/other elements behavior is inconsistent and it also preserves layout space (problematic with the new flex layout and gap). Prefer a more reliable hiding strategy such as display: none (or a hidden attribute) if you need the control removed from layout.

Suggested change

visibility: collapse;

display: none;

Copilot · 2026-04-16T11:18:04Z

  "version": "3.0.2",
  "description": "Solid-compatible Panes: Source editor",
+  "sideEffects": [
+    "*.css"


sideEffects is set to ".css", which only matches CSS files at the package root. The imported stylesheet lives under src/styles/, so Webpack/tree-shaking may incorrectly drop it in production builds. Use a recursive glob (e.g. "**/.css" or "src/**/*.css") or explicitly list the actual CSS path(s).

Suggested change

"*.css"

"**/*.css"

Copilot · 2026-04-16T11:18:04Z

+    "clean": "rm -rf lib",
+    "build": "npm run clean && npm run build-dist",
+    "build-dist": "webpack --progress",


This PR’s title is "responsive css", but it also introduces a new build pipeline (webpack/babel), changes the package’s entrypoints, and changes module format. If the intent is only styling, consider splitting the tooling/packaging changes into a separate PR; otherwise, please update the PR description/title to reflect the broader scope.

Copilot · 2026-04-16T11:18:04Z

+import * as $rdf from 'rdflib'
+import * as UI from 'solid-ui'
+import * as mime from 'mime-types'
+import './styles/sourcePane.css'

-module.exports = {
+const pane = {


src/sourcePane.js has been converted to ESM (import/export default) and now imports a CSS file. Since package.json does not set type: "module" and main points at this file, Node/Jest/CommonJS consumers will fail to load it (syntax error / unknown CSS import). Decide on a supported distribution format and align the package entrypoints accordingly (e.g., keep this file CommonJS, or switch the package to ESM and add a CJS wrapper/build output for require(), and ensure CSS is either bundled or documented as a separate import).

Copilot · 2026-04-16T11:18:05Z

+const paneModule = require('../src/sourcePane')
+const pane = paneModule.default || paneModule


require('../src/sourcePane') will not work if src/sourcePane.js is ESM (and it now imports a CSS file). Jest currently has no ESM/CSS transform or moduleNameMapper for CSS, so the test suite will fail to load the module. Either keep src/sourcePane.js CommonJS for the published entry and tests, or update the package/Jest configuration to run ESM and stub CSS imports.

Copilot · 2026-04-16T11:18:05Z

+  document.getElementById('app').replaceWith(app)
+} catch (err) {
+  console.error('Error rendering pane:', err)
+  document.getElementById('app').innerHTML = `<p style="color:red;">Error: ${err.message}</p>`


err.message is interpolated into innerHTML in the dev page. If an error message contains user-controlled content (e.g., derived from a remote response), this can lead to HTML injection even in local dev. Prefer setting textContent (or constructing DOM nodes) instead of using innerHTML for error rendering.

Suggested change

document.getElementById('app').innerHTML = `<p style="color:red;">Error: ${err.message}</p>`

const appElement = document.getElementById('app')

const errorParagraph = document.createElement('p')

errorParagraph.style.color = 'red'

errorParagraph.textContent = `Error: ${err.message}`

appElement.textContent = ''

appElement.appendChild(errorParagraph)

SharonStrats and others added 30 commits March 13, 2026 10:42

add production webpack

8c0a4b1

add module rules for consolidation

e705244

added dev webpack

a52f55c

added webpack dep

99a82ef

change from issue to source

4ce3d97

updated package json to new build

624497c

setup dev environment to test styling

b51285f

added sourcePane styles

a082213

changed path in test file

9542700

fixed tests

4a867d3

Potential fix for pull request finding

f26b7b6

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

Potential fix for pull request finding

2af4583

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

Potential fix for pull request finding

83b4678

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

Potential fix for pull request finding

150fb4c

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

fixed merge conflict

25a3950

generative ai msg

b64a878

update style to use var

54fd7e2

changed back to sourcePane file

a1afa31

revert src

94765b1

revert back package adn del prod webpack

1600293

chng require to import

98b23be

fix file in test

d42c555

fixed test file name

4b655d8

restore prod webpack

721d4ff

Potential fix for pull request finding

4f7e1ea

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

make test work with new build

46355b3

change prod build back

74f1e05

json lock

298f847

lock file

331bc6b

removed lib from gitignore

045933b

SharonStrats and others added 14 commits March 17, 2026 13:22

removed css sideeffects from package

202c629

removed unused packages

da5d0a8

new lock

973a4c0

lib cleanup

daf8580

merged main

ca49f3e

fix: regenerate lockfile for npm 11 ci compatibility

1cc5090

added package manager to package json

29ffe34

Revert "added package manager to package json"

d25d6c7

This reverts commit 29ffe34.

package lock

06ed8b0

merged with dev branch

dec7c81

Update webpack.config.mjs

0c2abef

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

Update README.md

9a9cdd9

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

package misses during merge

127437a

responsive css

c6c9d60

Copilot AI review requested due to automatic review settings April 16, 2026 11:11

Copilot started reviewing on behalf of bourgeoa April 16, 2026 11:12 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

mock css

22526c3

bourgeoa changed the title ~~responsive css~~ milestone3m Apr 16, 2026

Copilot comments

7b15e63

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

milestone3m#143

milestone3m#143
bourgeoa wants to merge 46 commits intomainfrom
milestone3m

bourgeoa commented Apr 16, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const paneModule = require('../src/sourcePane')
		const pane = paneModule.default \|\| paneModule

-  document.getElementById('app').innerHTML = `<p style="color:red;">Error: ${err.message}</p>`
+  const appElement = document.getElementById('app')
+  const errorParagraph = document.createElement('p')
+  errorParagraph.style.color = 'red'
+  errorParagraph.textContent = `Error: ${err.message}`
+  appElement.textContent = ''
+  appElement.appendChild(errorParagraph)

Conversation

bourgeoa commented Apr 16, 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!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bourgeoa commented Apr 16, 2026 •

edited

Loading