Skip to content

Conversation

@bennypowers
Copy link
Member

What I did

  1. fix the server-side slot controller's hasSlotted and isEmpty methods
  2. adds unit tests for the server-side slot controller

Testing Instructions

  1. ideally this should be tested in RHDS, as we don't yet do SSR on pfe-dot-org

Notes to Reviewers

  1. This is one part of a two-part fix for docs: correctly generate default slot ssr hints RedHat-UX/red-hat-design-system#2336

@changeset-bot
Copy link

changeset-bot bot commented Apr 20, 2025

🦋 Changeset detected

Latest commit: f8ad960

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/pfe-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@bennypowers bennypowers requested a review from Copilot April 20, 2025 05:16
@bennypowers bennypowers enabled auto-merge (squash) April 20, 2025 05:16
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes the server-side SlotController's handling of slot state, particularly for determining if slots are empty, and introduces improved unit test coverage for both default and named slots.

  • Updated test fixtures to use simplified custom element names for both client and server versions of the SlotController.
  • Modified SlotController.getSlotted() and hasSlotted() to correctly handle cases when no slot names are provided.
  • Added extensive unit tests covering various SSR hint attributes and different content scenarios.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
core/pfe-core/controllers/test/slot-controller.spec.ts Updated test custom element names and expanded tests for both default and named slot behaviors, including SSR hint attributes.
core/pfe-core/controllers/slot-controller-server.ts Adjusted the getSlotted() signature and enhanced hasSlotted() logic to handle default slot scenarios when called with no arguments.
.changeset/shaky-things-beg.md Documented the slot controller fix in the changeset.
Comments suppressed due to low confidence (1)

core/pfe-core/controllers/test/slot-controller.spec.ts:260

  • Consider adding test cases where multiple slot names are passed to hasSlotted() and getSlotted() to ensure that the combined behavior of checking several slots works as expected.
element = await fixture(html`<test-slot-controller-server ssr-hint-has-slotted="a"><p slot="a">element</p></test-slot-controller-server>`);

@github-actions
Copy link
Contributor

github-actions bot commented Apr 20, 2025

✅ Commitlint tests passed!

More Info
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "fix(core): fix SlotController.isEmpty()"
}

1 similar comment
@github-actions
Copy link
Contributor

✅ Commitlint tests passed!

More Info
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "fix(core): fix SlotController.isEmpty()"
}

@netlify
Copy link

netlify bot commented Apr 20, 2025

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 6bfe3b8
😎 Deploy Preview https://deploy-preview-2906--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions bot added the AT passed Automated testing has passed label Apr 20, 2025
@github-actions

This comment has been minimized.

@github-actions
Copy link
Contributor

SSR Test Run for 6bfe3b8: Report

Copy link
Contributor

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bennypowers I was trying to validate this and as having hard time when I try and run tests I get:

pfe-core git:(fix/core/is-empty-slot-ssr-null) npm run test                                                               

> @patternfly/pfe-core@5.0.1 test
> wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js

Error while running tests:
Error: Cannot resolve tsconfig at path: /Users/sspriggs/Sites/_patternfly/patternfly-elements/core/pfe-core/tsconfig.esbuild.json
    at _parseTsconfig (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/get-tsconfig/dist/index.cjs:7:7230)
    at parseTsconfig (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/get-tsconfig/dist/index.cjs:7:8319)
    at EsbuildPlugin.serverStart (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@web/dev-server-esbuild/dist/EsbuildPlugin.js:36:75)
    at DevServer.start (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@web/dev-server-core/dist/server/DevServer.js:53:86)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async TestRunnerServer.start (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@web/test-runner-core/dist/server/TestRunnerServer.js:53:9)
    at async TestRunner.start (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@web/test-runner-core/dist/runner/TestRunner.js:56:13)
    at async startTestRunner (/Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@web/test-runner/dist/startTestRunner.js:46:9)


Chromium: |                              | 0/1 test files | 0 passed, 0 failed

I also tried to copy the build artifacts over the RHDS and wasn't getting the output I'd expect. I'd appreciate a run through of how you are validating this locally.

@bennypowers
Copy link
Member Author

bennypowers commented May 23, 2025

npm ci
npm test
npm run build
npm pack -w @patternfly/pfe-core

... extract contents of tarball to rhds, then in that dir
check out the branch from RedHat-UX/red-hat-design-system#2336

npm run docs

and check to see if tile, codeblock, audioplayer, announcement, card, and alert (i.e. elements using isEmpty) ssr up.

for example, tile elements with text nodes (in body slot) should have ssr hints for body slot generated by 11ty, and should render properly client-side as well

Copy link
Contributor

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, after much mucking about, I verified that the tests are indeed running and passing. I also had to ensure a good cleaning of RHDS before dropping in the artifact.

With that said, I can confirm that it looks good to go!

@bennypowers bennypowers merged commit ce5b27b into main May 23, 2025
17 checks passed
@bennypowers bennypowers deleted the fix/core/is-empty-slot-ssr-null branch May 23, 2025 18:39
@bennypowers
Copy link
Member Author

Thanks for doing this review, @zeroedin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants