1import { rocket } from 'datastar'
 2
 3const qrCreator = (
 4  await import('https://cdn.jsdelivr.net/npm/[email protected]/+esm')
 5).default
 6
 7const isHex = (value) => /^#[\da-f]{6}$/i.test(String(value ?? ''))
 8const getErrorText = ({ text, size, colorDark, colorLight }) =>
 9  [
10    !text && 'Text is required',
11    (size < 50 || size > 1000) && 'Size must be 50-1000px',
12    (!isHex(colorDark) || !isHex(colorLight)) &&
13      'Colors must be valid hex codes',
14  ]
15    .filter(Boolean)
16    .join(', ')
17
18rocket('qr-code', {
19  props: ({ string, number, oneOf }) => ({
20    text: string.trim.default('Hello World'),
21    size: number.clamp(50, 1000).default(200),
22    errorLevel: oneOf('L', 'M', 'Q', 'H').default('L'),
23    colorDark: string.trim.upper.prefix('#').maxLength(7).default('#000000'),
24    colorLight: string.trim.upper.prefix('#').maxLength(7).default('#FFFFFF'),
25  }),
26  onFirstRender({ refs, observeProps, props }) {
27    const renderQR = () => {
28      if (!(refs.canvas instanceof HTMLCanvasElement) || getErrorText(props))
29        return
30      qrCreator.render(
31        {
32          text: props.text,
33          radius: 0,
34          ecLevel: props.errorLevel,
35          fill: props.colorDark,
36          background: props.colorLight,
37          size: props.size,
38        },
39        refs.canvas,
40      )
41    }
42
43    renderQR()
44    observeProps(renderQR)
45  },
46  render: ({ html, props: { text, size, colorDark, colorLight } }) => html`
47    <style>
48      :host {
49        display: inline-flex;
50        width: ${size}px;
51        height: ${size}px;
52        align-items: center;
53        justify-content: center;
54        position: relative;
55      }
56
57      canvas {
58        display: block;
59      }
60
61      .qr-error {
62        font-weight: bold;
63        text-align: center;
64      }
65    </style>
66
67    ${
68      getErrorText({ text, size, colorDark, colorLight })
69        ? html`<div class="qr-error">${getErrorText({ text, size, colorDark, colorLight })}</div>`
70        : html`<canvas data-ref:canvas data-ignore-morph></canvas>`
71    
72}
73  `,
74})