Skip to content

Storybook webpack to vite, add config helpers - #260

Closed
crysadrak wants to merge 6 commits into
mjancarik:migrate-2-changesetsfrom
crysadrak:storybook-webpack-2-vite
Closed

Storybook webpack to vite, add config helpers#260
crysadrak wants to merge 6 commits into
mjancarik:migrate-2-changesetsfrom
crysadrak:storybook-webpack-2-vite

Conversation

@crysadrak

@crysadrak crysadrak commented Feb 7, 2026

Copy link
Copy Markdown
Collaborator

add vanilla JS support and preview configuration helpers

  • Add createPreviewConfig helper for simplified Storybook setup
  • Add createVanillaRenderer for vanilla JavaScript widget rendering
  • Add comprehensive JSDoc documentation for all exported functions
  • Update documentation with Storybook 10 setup for both Preact and vanilla JS widgets
  • Include separate configuration examples for Preact and vanilla frameworks

BREAKING CHANGE: Remove ./webpack export from @merkur/preact.
Consumers importing @merkur/preact/webpack must migrate to @merkur/tool-webpack directly.

@crysadrak
crysadrak force-pushed the storybook-webpack-2-vite branch 2 times, most recently from 3faf46d to 55b029d Compare February 17, 2026 08:52
@crysadrak
crysadrak requested a review from Copilot March 5, 2026 18:44

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 6 comments.


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/__tests__/indexSpec.js Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread packages/preact/package.json
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js
Comment thread packages/preact/package.json
Comment thread website/docs/storybook-integration-into-merkur.md
Comment thread website/docs/storybook-integration-into-merkur.md Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/preact/package.json
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/preact/package.json:26

  • This PR removes the ./webpack export from @merkur/preact (and drops related peers). If @merkur/preact/webpack has external consumers, this is a breaking API change. Consider keeping a stub export that throws a clear migration error (or deprecating first), and/or documenting the migration path in release notes.
  "exports": {
    "./entries/client.js": "./entries/client.js",
    "./entries/server.js": "./entries/server.js",
    "./cli": "./cli/index.mjs",
    "./client": {
      "types": "./lib/client/client.d.ts",
      "import": "./lib/client/client.mjs",
      "require": "./lib/client/client.cjs"
    },
    "./server": {
      "types": "./lib/server/server.d.ts",
      "import": "./lib/server/server.mjs",
      "require": "./lib/server/server.cjs"
    }
  },

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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/preact/package.json:18

  • Removing the ./webpack export (and associated peer deps) from @merkur/preact is a breaking change for any consumers importing @merkur/preact/webpack. If this is intentional, it should be called out explicitly in release notes / migration docs and generally requires a semver-major bump (or at least a deprecation period).
  "exports": {
    "./entries/client.js": "./entries/client.js",
    "./entries/server.js": "./entries/server.js",
    "./cli": "./cli/index.mjs",
    "./client": {
      "types": "./lib/client/client.d.ts",
      "import": "./lib/client/client.mjs",

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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/__tests__/indexSpec.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/preact/package.json

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated
@crysadrak
crysadrak force-pushed the storybook-webpack-2-vite branch from c0634ab to 87c32b3 Compare March 19, 2026 12:48
@crysadrak
crysadrak requested a review from Copilot March 19, 2026 12:48

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
@crysadrak
crysadrak force-pushed the storybook-webpack-2-vite branch from 87c32b3 to 861be63 Compare March 19, 2026 13:13
@crysadrak
crysadrak requested a review from Copilot March 19, 2026 13:13

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
@crysadrak
crysadrak force-pushed the storybook-webpack-2-vite branch from 861be63 to 6a67058 Compare March 19, 2026 13:31

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

You can also share your feedback on Copilot code review. Take the survey.

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/__tests__/indexSpec.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/__tests__/indexSpec.js Outdated
Comment thread packages/create-widget/views/vanilla/template/src/views/ErrorView.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread website/docs/storybook-integration-into-merkur.md Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated 2 comments.


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

Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Comment thread packages/tool-storybook/src/index.js

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

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


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

Comment thread packages/tool-storybook/src/index.js
Comment thread packages/tool-storybook/src/index.js Outdated
Comment thread packages/tool-storybook/src/index.js
Comment thread website/docs/storybook-integration-into-merkur.md Outdated
Jiří Fencl added 6 commits March 24, 2026 09:42
…ncies

BREAKING CHANGE: The `./webpack` export has been removed along with
`@merkur/tool-webpack`, `babel-loader`, and `@babel/preset-react`
peer dependencies. Consumers using `@merkur/preact/webpack` should
migrate to the Vite/Storybook-based setup.
…iguration helpers

- Add createPreviewConfig helper for simplified Storybook setup
- Add createVanillaRenderer for vanilla JavaScript widget rendering
- Add comprehensive JSDoc documentation for all exported functions
- Update documentation with Storybook 9 setup for both Preact and vanilla JS widgets
- Include separate configuration examples for Preact and vanilla frameworks
Overhaul createWidgetLoader to correctly handle widget reuse across story
re-renders:
- await widget.unmount() before switching stories
- treat null/missing args.widget as an early-return { widget: null }
- preserve state and props keys that are absent from story args instead of
  forcing empty defaults
- branch on available widget APIs (setProps / setState) to avoid clobbering
  load()-generated state when reusing the same story
- clear stale state keys before calling setState (both setters present) so
  Storybook-provided state replaces rather than merges with load() output
- guard against missing component plugin with a descriptive error

Rewrite createVanillaRenderer with a per-widget WeakMap so multiple
concurrent stories don't share render references:
- add strict validation for options and ViewComponent
- throw descriptive errors for ambiguous or non-callable component entries
- guard string-key lookup to object-only ViewComponent maps
- normalize null state/props to {} before calling widget setters
- update(widget) now accepts the widget instance to target the correct
  container across multiple rendered widgets

Add widgetProperties name/version validation to createPreviewConfig.

Additional fixes:
- fix(create-widget): correct className → class in vanilla ErrorView template
- docs(storybook): update Storybook install commands to v9, switch to CSF3
  object format with shared render, use Preact automatic JSX runtime,
  clarify two component-passing patterns for createVanillaRenderer, remove
  redundant widget argument from onClick/onReset event handlers

Tests: expand suite with 30+ cases covering all new branches in
createWidgetLoader, createPreviewConfig, and createVanillaRenderer.
Comment thread packages/preact/README.md
We are using [Changesets](https://github.com/changesets/changesets) for versioning and releasing. To add a changeset describing your changes, run `npm run changeset` from the root of the monorepo.
Full documentation and setup guide at [merkur.js.org](https://merkur.js.org/docs/getting-started).

## Breaking Changes

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Shouldn't this be in a changeset instead of README?

I guess the version does not match anymore either, but if we put it in the changeset, it will be always correct.

* @param {Function} options.renderFn - Fallback render callback when no lifecycle update is available.
* @returns {Promise<{ widget: Object }>}
*/
async function updateExistingWidget({

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Can't we just re-render the component always (use mountNewWidget) as we used to?

What problem does this solve? This maybe looks like a bit of a performance optimisation?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants