Rocket Password Strength Pro

Rocket is currently in alpha – available with Datastar Pro.

Demo

Explanation #

This demo borrows the utility palette from the React vs. Backbone in 2025 article, and applies it at the page level, allowing the Rocket component stay markup and logic only. It reflects the discussion on Hacker News about keeping framework styles out of reusable components while still matching the reference design.

Approach	Payload Size (gzipped)	Notes
Rocket	Rocket + Datastar ≈ 15 KB	Utility CSS inlined once on the page. Component stays markup and computed signals.
Backbone	Backbone + Underscore + jQuery ≈ 46 KB	Imperative DOM updates mirror the article’s script.
React	React + ReactDOM ≈ 47 KB	JSX render loop matches the Tailwind utilities but assumes a bundler outside CodePen.

The Rocket flavor keeps the markup identical to the Backbone/React write-ups while shifting the reactive bits into a single computed signal. Framework payloads are in the same ballpark, but Rocket avoids the additional bundler step and keeps HTML as the source of truth.

Usage Example #

1<rocket-password-strength></rocket-password-strength>

Rocket Component #

 1<template data-rocket:rocket-password-strength
 2          data-props:password="string|="
 3>
 4  <script data-static>
 5    const requirements = [
 6      { label: '8+ characters', check: (pwd) => pwd.length >= 8 },
 7      { label: '12+ characters', check: (pwd) => pwd.length >= 12 },
 8      { label: 'Lowercase letter', check: (pwd) => /[a-z]/.test(pwd) },
 9      { label: 'Uppercase letter', check: (pwd) => /[A-Z]/.test(pwd) },
10      { label: 'Number', check: (pwd) => /\d/.test(pwd) },
11      { label: 'Special character', check: (pwd) => /[^a-zA-Z0-9]/.test(pwd) }
12    ];
13  </script>
14  <script>
15    const computeRows = (pwd) =>
16      requirements.map(({ label, check }) => ({
17        label,
18        met: check(pwd),
19      }))
20    effect(() => {
21      const pwd = ($$password ?? '').toString()
22      $$rows = computeRows(pwd)
23    })
24  </script>
25  <div class="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
26    <input class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
27           type="password"
28           data-bind="password"
29           placeholder="Test password strength" />
30    <ul class="space-y-2">
31      <li data-for="r in $$rows"
32          class="flex items-center gap-2">
33        <div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold"
34             data-class="{ 'bg-green-500 text-white': r.met, 'bg-gray-200 text-gray-400': !r.met }"
35             data-text="r.met ? '✓' : ''"></div>
36        <span class="text-sm"
37              data-class="{'text-green-600 font-medium': r.met, 'text-gray-500': !r.met }"
38              data-text="r.label"></span>
39      </li>
40    </ul>
41  </div>
42</template>