docs(demo): add the library-comparison counter demo - #70
Merged
Conversation
The comparison guide cites a counter measured in each library but the implementations lived nowhere in the repo. Add them, plus the benchmark that produces the guide's numbers, as a runnable demo example, and link the guide to it. - demo/examples/library-comparison/counters/*.mjs — the same minimal counter (one reactive `count` prop, click handler, re-render) in web-component-base, Elena, Lit, FAST, and vanilla HTMLElement. - index.html — all five running live side by side, with the methodology and the measured output table. - measure.mjs — bundles each counter with its library runtime (esbuild --bundle --minify --format=esm) and compresses with gzip (-9) / brotli (q11) via Node zlib; reproduces the guide's numbers deterministically. - Pin the three external libraries as demo devDependencies so the live demo and the benchmark resolve the same sources. - Link the demo from the comparison guide and add a landing-page card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TwF7mbKVnL14rJBLH3Jo71
…nter Every counter in this comparison needs JS to be reactive, so the marketing phrase was misleading. Describe what the code actually does instead: Elena's `html` has no inline event syntax, so the click handler is attached in `firstUpdated`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TwF7mbKVnL14rJBLH3Jo71
The comparison table described competitors with non-technical positioning language rather than facts. Make each neutral and column-appropriate: - Elena SSR: "HTML/CSS-first" -> "server-rendered markup + hydration utilities" (the slogan implied pre-JS behavior). - Lit backing: "huge ecosystem" -> "large ecosystem". - Elena backing: "design-system focus" (a use-case slogan that didn't answer the Backing/ecosystem column) -> "solo-authored". - WebC note: drop the editorializing "and solves it well". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TwF7mbKVnL14rJBLH3Jo71
✅ Deploy Preview for demo-wcb ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for web-component-io ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The comparison guide cites a counter measured in each library but the
implementations lived nowhere in the repo. Add them, plus the benchmark
that produces the guide's numbers, as a runnable demo example, and link
the guide to it.
counter (one reactive
countprop, click handler, re-render) inweb-component-base, Elena, Lit, FAST, and vanilla HTMLElement.
and the measured output table.
--bundle --minify --format=esm) and compresses with gzip (-9) / brotli
(q11) via Node zlib; reproduces the guide's numbers deterministically.
demo and the benchmark resolve the same sources.