Skip to content

Add @bquery/bquery/storybook template helpers for Storybook stories#63

Merged
JosunLP merged 9 commits intodevelopmentfrom
copilot/add-storybook-integration-helper
Mar 13, 2026
Merged

Add @bquery/bquery/storybook template helpers for Storybook stories#63
JosunLP merged 9 commits intodevelopmentfrom
copilot/add-storybook-integration-helper

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 13, 2026

Storybook stories for bQuery components currently need lit just to express boolean attributes and simple conditional fragments in Meta.render. This change adds a bQuery-native Storybook helper that keeps story templates string-based while matching Storybook's expected render output.

  • New Storybook entrypoint

    • Adds @bquery/bquery/storybook with:
      • storyHtml — tagged template helper returning string
      • when — conditional fragment helper for inline story composition
  • Story authoring behavior

    • Supports boolean attribute shorthand in Storybook templates:
      • ?disabled=${true}disabled
      • ?disabled=${false} → omitted
    • Preserves normal interpolation semantics for non-attribute values
    • Supports conditional fragments via callbacks, strings, and arrays
    • Sanitizes the final rendered HTML string by default while preserving Storybook-authored custom element tags and attribute names from the template
  • Security

    • All template parsing (tag name extraction, boolean attribute detection, attribute name collection) uses character-by-character string scanning instead of regex to prevent ReDoS (polynomial regular expression) vulnerabilities flagged by CodeQL
  • Public export/build wiring

    • Adds a ./storybook package export
    • Includes the new module in library build entries
    • Keeps the helpers scoped to the dedicated @bquery/bquery/storybook entrypoint rather than re-exporting them from the full bundle
  • Coverage

    • Adds focused tests for:
      • plain string template output
      • boolean attribute handling
      • multiline spacing preservation
      • conditional rendering with when
      • fallback branches
      • array fragment composition
      • preservation of Storybook-authored custom element markup
      • nested custom element tags and authored attributes
      • sanitization of dangerous interpolated markup
import { storyHtml, when } from '@bquery/bquery/storybook';

const meta = {
  render: (args) => storyHtml`
    <bq-button
      variant=${args.variant}
      ?disabled=${args.disabled}
    >
      ${when(args.loading, () => 'Loading…', args.label)}
    </bq-button>
  `,
};

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Copilot AI and others added 2 commits March 13, 2026 11:33
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Copilot AI changed the title [WIP] Add Storybook integration helper for bQuery components Add @bquery/bquery/storybook template helpers for Storybook stories Mar 13, 2026
Copilot AI requested a review from JosunLP March 13, 2026 11:37
@JosunLP JosunLP marked this pull request as ready for review March 13, 2026 11:38
Copilot AI review requested due to automatic review settings March 13, 2026 11:38
@github-actions github-actions bot added tests Chenges to the tests build Changes to the build and meta files labels Mar 13, 2026
Copy link
Copy Markdown
Contributor

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

Adds a new @bquery/bquery/storybook module providing string-based template helpers (storyHtml, when) for authoring Storybook stories without requiring lit, matching bQuery's existing boolean attribute shorthand pattern.

Changes:

  • New src/storybook/index.ts module with storyHtml tagged template and when conditional helper
  • Build/export wiring: package.json exports, vite entries, and full bundle re-exports
  • Test coverage for boolean attributes, conditional rendering, arrays, and fallback branches

Reviewed changes

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

Show a summary per file
File Description
src/storybook/index.ts New module with storyHtml and when helpers
tests/storybook.test.ts Tests covering core functionality
package.json Adds ./storybook export map entry
vite.config.ts Adds storybook to library build entries and aliases
src/full.ts Re-exports storybook helpers from full bundle

Copy link
Copy Markdown
Contributor

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

Adds a new @bquery/bquery/storybook module providing string-based template helpers (storyHtml, when) for authoring Storybook stories without requiring lit as a dependency.

Changes:

  • New src/storybook/index.ts module with storyHtml tagged template (boolean attribute shorthand support) and when conditional helper
  • Build/export wiring: package.json exports, vite entries, and full bundle re-exports
  • Focused test suite covering interpolation, boolean attributes, conditionals, and array fragments

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/storybook/index.ts New module with storyHtml and when helpers
tests/storybook.test.ts Tests for the new helpers
package.json Adds ./storybook export entry
vite.config.ts Adds storybook build entry
src/full.ts Re-exports storybook helpers from full bundle

@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

@copilot apply changes based on the comments in this thread

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 13, 2026

@copilot apply changes based on the comments in this thread

Addressed in 0a9a3a3: the Storybook helpers remain available from @bquery/bquery/storybook, but they are no longer re-exported from the full bundle, so the generic when name no longer leaks into @bquery/bquery/full. I also revalidated with build, targeted tests, and the full test suite.

Copy link
Copy Markdown
Contributor

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

Adds a @bquery/bquery/storybook entrypoint with storyHtml (tagged template supporting boolean attribute shorthand) and when (conditional fragment helper) for authoring Storybook stories without depending on lit.

Changes:

  • New src/storybook/index.ts module with storyHtml and when helpers
  • Package export, build entry, and alias wiring for ./storybook
  • Tests covering plain strings, boolean attributes, when(), and array fragments

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
src/storybook/index.ts New module with storyHtml tagged template and when conditional helper
tests/storybook.test.ts Tests for the new helpers
package.json Adds ./storybook export map entry
vite.config.ts Adds storybook to build entries and aliases

@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

@copilot apply changes based on the comments in this thread

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 13, 2026

@copilot apply changes based on the comments in this thread

Clarified this based on 0a9a3a3: the intended API is to keep the Storybook helpers available only from @bquery/bquery/storybook, not from the full bundle. There wasn’t an additional code change to make here beyond that implementation; the follow-up is just aligning the PR description/status with the shipped behavior.

@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

@copilot CodeQL meldet schwere Sicherheitsprobleme

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

@copilot es gibt weitere CodeQL probleme

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 13, 2026

@copilot CodeQL meldet schwere Sicherheitsprobleme

In 45f30b1 habe ich storyHtml gegen die gemeldete XSS-/CodeQL-Klasse gehärtet: Die finale Storybook-Ausgabe wird jetzt sanitisiert, während die im Template definierten Custom Elements und Attribute erhalten bleiben. Die gezielten Storybook-Checks laufen lokal durch, und codeql_checker meldet für die aktuellen Änderungen jetzt 0 JavaScript-Alerts. Keine UI-Änderung in diesem Fix.

@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

die CodeQL Action schlägt weiterhin fehl @copilot

Copy link
Copy Markdown
Contributor

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

Adds a new @bquery/bquery/storybook entrypoint providing storyHtml and when helpers for authoring Storybook stories without depending on lit, using string-based templates with boolean attribute shorthand and built-in sanitization.

Changes:

  • New src/storybook/index.ts module with storyHtml tagged template and when conditional helper
  • Build/export wiring in package.json and vite.config.ts for the new entrypoint
  • Comprehensive test suite in tests/storybook.test.ts

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
src/storybook/index.ts New module with storyHtml and when helpers, template parsing, and sanitization
tests/storybook.test.ts Tests covering interpolation, boolean attributes, when(), arrays, sanitization
package.json Adds ./storybook export map entry
vite.config.ts Adds storybook entry to library build and aliases

@JosunLP
Copy link
Copy Markdown
Collaborator

JosunLP commented Mar 13, 2026

@copilot apply changes based on the comments in this thread

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

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

Adds a new @bquery/bquery/storybook entrypoint with storyHtml and when helpers for authoring Storybook stories using string-based templates, avoiding the need for lit as a dependency.

Changes:

  • New src/storybook/index.ts module with storyHtml tagged template (boolean attribute shorthand, sanitization) and when conditional helper
  • Package export map, Vite build entries updated to include the new ./storybook entrypoint
  • Comprehensive test coverage in tests/storybook.test.ts

Reviewed changes

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

File Description
src/storybook/index.ts New module with storyHtml and when helpers, template parsing, and sanitization
tests/storybook.test.ts Tests for template output, boolean attributes, when, arrays, sanitization
package.json Adds ./storybook export mapping
vite.config.ts Adds storybook entry to library build

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 13, 2026

@copilot es gibt weitere CodeQL probleme

Die beiden CodeQL ReDoS-Alerts (polynomial regex backtracking in CUSTOM_ELEMENT_TAG_PATTERN und BOOLEAN_ATTRIBUTE_PATTERN) sind behoben. Alle Regex-basierten Parser wurden durch zeichenweise String-Scanner ersetzt, die in linearer Zeit laufen. CodeQL meldet jetzt 0 Alerts. Commits: 23a9569, ce606e3, c5e6565.

@JosunLP JosunLP merged commit 81c4876 into development Mar 13, 2026
10 of 11 checks passed
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 13, 2026

die CodeQL Action schlägt weiterhin fehl @copilot

Der aktuelle CodeQL-Status ist inzwischen grün. Auf copilot/add-storybook-integration-helper ist der neueste CodeQL-Workflow 23075033097 für c5e6565 erfolgreich, und der PR-Check CodeQL (67033576383) steht ebenfalls auf success. Die vorherige Failure war ein älterer/staler Check.

@copilot apply changes based on the comments in this thread

Bereits erledigt in ce606e3: Das JSDoc-Beispiel in src/storybook/index.ts wurde auf das tatsächlich sanitisierte Ergebnis (disabled="") angepasst. Weitere Code-Änderungen waren in dem Thread nicht mehr nötig.

@JosunLP JosunLP deleted the copilot/add-storybook-integration-helper branch March 13, 2026 23:46
Copilot stopped work on behalf of JosunLP due to an error March 13, 2026 23:46
JosunLP added a commit that referenced this pull request Mar 15, 2026
* Add `bool()` support for boolean attributes in component templates (#55)

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Add typed state generics to component definitions (#56)

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Pass attribute change metadata to component `updated()` hooks (#58)

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Add per-component sanitizer overrides for component render output (#57)

* Initial plan

* feat: add per-component sanitizer options

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: clarify component sanitizer baseline

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: warn about sensitive component sanitizer opts

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* test: cover sanitizer allowTags overrides

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* perf: precompute component sanitizer allowlists

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Signed-off-by: Jonas Pfalzgraf <info@josunlp.de>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Pass previous props into component `beforeUpdate` (#59)

* Initial plan

* Add previous props to beforeUpdate hook

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Refine beforeUpdate old props implementation

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Fix beforeUpdate typing regressions

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Signed-off-by: Jonas Pfalzgraf <info@josunlp.de>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Add explicit signal subscriptions to `component()` renders (#60)

* Initial plan

* feat: add component signal subscriptions

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* chore: document signal subscription tracking

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: address signal integration review feedback

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: tighten component signal typing

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: resolve eslint failure in component signal test

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: handle reconnect lifecycle and signal effect errors

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: preserve reconnect signal wiring after hook errors

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: skip beforeUpdate for signal rerenders

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Signed-off-by: Jonas Pfalzgraf <info@josunlp.de>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Add trusted sanitized fragments for `safeHtml` composition (#61)

* Initial plan

* feat: add trusted safeHtml fragment support

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* chore: finalize trusted safeHtml support

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: address trusted safeHtml review feedback

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: fix second trusted safeHtml review follow-up

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* refactor: split trusted html helpers from sanitizer

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* refactor: tighten trusted html branding

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: tighten trusted html internals

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Signed-off-by: Jonas Pfalzgraf <info@josunlp.de>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Co-authored-by: Jonas Pfalzgraf <info@josunlp.de>

* Reuse component shadow-root style nodes across re-renders (#62)

* Initial plan

* fix: reuse component style element on rerender

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* chore: finalize component style reuse fix

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* test: tighten style reuse regression assertions

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Add `@bquery/bquery/storybook` template helpers for Storybook stories (#63)

* Initial plan

* feat: add storybook template helper

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: clarify storybook when fallback behavior

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: keep storybook helpers out of full bundle

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: sanitize storybook helper output

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* test: tighten storybook helper security coverage

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* feat: enhance storyHtml with improved boolean attribute handling and sanitization tests

* fix: update storyHtml example to reflect correct boolean attribute output

* fix: defensive tag delimiter and parser comments per code review

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* chore: release version 1.6.0

- Update CHANGELOG.md for version 1.6.0 release notes including added features, changes, fixes, and security improvements.
- Enhance README.md to document new boolean attribute helpers and Storybook integration.
- Update bun.lock to reflect dependency upgrades for Storybook and happy-dom.
- Modify definition.md to include new Storybook helpers and component state management features.
- Revise components.md to demonstrate new boolean attribute handling and typed state in components.
- Update getting-started.md with Storybook authoring examples and improved module descriptions.
- Enhance security.md to clarify sanitization practices and introduce trusted fragment handling.
- Revise index.md to highlight new Storybook helpers in the feature list.
- Update llms.txt to reflect the new version 1.6.0.
- Bump version in package.json to 1.6.0 and update devDependencies for Storybook.

* Address review feedback for test setup, test type coverage, and component state keys (#65)

* Initial plan

* Address review feedback for test typing and setup

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Finalize review feedback fixes

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Export component state key type

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Default component state key generic

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* Tighten component/state update semantics and Storybook attribute sanitization (#66)

* Initial plan

* fix review follow-up for state updates and storybook sanitization

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix storybook attribute value scanning

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix storybook interpolation boundary parsing

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs align storybook attribute scan jsdoc

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Signed-off-by: Jonas Pfalzgraf <info@josunlp.de>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
JosunLP added a commit that referenced this pull request Mar 27, 2026
…#63)

* Initial plan

* feat: add storybook template helper

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* docs: clarify storybook when fallback behavior

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: keep storybook helpers out of full bundle

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* fix: sanitize storybook helper output

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* test: tighten storybook helper security coverage

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

* feat: enhance storyHtml with improved boolean attribute handling and sanitization tests

* fix: update storyHtml example to reflect correct boolean attribute output

* fix: defensive tag delimiter and parser comments per code review

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

build Changes to the build and meta files tests Chenges to the tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants