@teleporthq/teleport-project-generator-next 0.43.45 → 0.43.46

package/__tests__/_helpers/rules-of-hooks.ts

@@ -0,0 +1,206 @@
+/**
+ * A minimal Rules-of-Hooks analyser for the React source the Next project
+ * generator emits as plain strings.
+ *
+ * Those component files are template literals, so TypeScript, ESLint and the
+ * react-hooks plugin never see them — a hook placed after an early `return`
+ * type-checks, lints and builds cleanly and then throws
+ * "Rendered more hooks than during the previous render" in the browser on the
+ * second render. `tq-countdown` shipped exactly that defect: its `targetDate`
+ * useMemo sat below the mounted-guard return, so the component rendered 7 hooks
+ * on the first pass and 8 on the next, crashing every page that embedded it.
+ *
+ * The two conditions checked here are the two that React enforces at runtime:
+ *   1. a hook may not run after a statement that can return early
+ *   2. a hook may not run inside a condition, loop or try block
+ *
+ * Hook calls inside NESTED functions (a `useEffect` callback, an event handler,
+ * a `.map()` body) belong to that inner function, not the component, so the walk
+ * deliberately stops at every function boundary.
+ */
+
+import { parse } from '@babel/parser'
+
+type Node = Record<string, unknown> & { type: string; loc?: { start: { line: number } } }
+
+const FUNCTION_TYPES = new Set([
+  'FunctionDeclaration',
+  'FunctionExpression',
+  'ArrowFunctionExpression',
+  'ObjectMethod',
+  'ClassMethod',
+])
+
+const CONTROL_FLOW_TYPES = new Set([
+  'IfStatement',
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'WhileStatement',
+  'DoWhileStatement',
+  'SwitchStatement',
+  'TryStatement',
+  'ConditionalExpression',
+  'LogicalExpression',
+])
+
+const HOOK_NAME = /^use[A-Z]/
+
+export type HookViolationKind = 'after-early-return' | 'conditional'
+
+export interface HookViolation {
+  kind: HookViolationKind
+  hook: string
+  /** Enclosing function name, or `<anonymous>`. */
+  fn: string
+  line: number
+}
+
+function isNode(value: unknown): value is Node {
+  return !!value && typeof value === 'object' && typeof (value as Node).type === 'string'
+}
+
+/** Every child node of `node`, in source order. */
+function childNodes(node: Node): Node[] {
+  const out: Node[] = []
+  for (const key of Object.keys(node)) {
+    if (key === 'loc' || key === 'leadingComments' || key === 'trailingComments') {
+      continue
+    }
+    const value = (node as Record<string, unknown>)[key]
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        if (isNode(entry)) {
+          out.push(entry)
+        }
+      }
+      continue
+    }
+    if (isNode(value)) {
+      out.push(value)
+    }
+  }
+  return out
+}
+
+function callName(node: Node): string | null {
+  if (node.type !== 'CallExpression') {
+    return null
+  }
+  const callee = node.callee as Node | undefined
+  if (!callee) {
+    return null
+  }
+  if (callee.type === 'Identifier') {
+    return String((callee as unknown as { name: string }).name)
+  }
+  // React.useMemo(...) — the hook is the property, not the object.
+  if (callee.type === 'MemberExpression') {
+    const property = (callee as unknown as { property?: Node }).property
+    if (property && property.type === 'Identifier') {
+      return String((property as unknown as { name: string }).name)
+    }
+  }
+  return null
+}
+
+/** Walks `node` and its descendants, stopping at nested function boundaries. */
+function walkOwnScope(
+  node: Node,
+  visit: (current: Node, insideControlFlow: boolean) => void,
+  insideControlFlow = false
+): void {
+  for (const child of childNodes(node)) {
+    if (FUNCTION_TYPES.has(child.type)) {
+      continue
+    }
+    const nested = insideControlFlow || CONTROL_FLOW_TYPES.has(child.type)
+    visit(child, insideControlFlow)
+    walkOwnScope(child, visit, nested)
+  }
+}
+
+/** True when `statement` can hand control back to the caller before the next statement runs. */
+function canReturnEarly(statement: Node): boolean {
+  if (statement.type === 'ReturnStatement' || statement.type === 'ThrowStatement') {
+    return true
+  }
+  let found = false
+  walkOwnScope(statement, (current) => {
+    if (current.type === 'ReturnStatement' || current.type === 'ThrowStatement') {
+      found = true
+    }
+  })
+  return found
+}
+
+function functionName(node: Node, parentName: string | null): string {
+  const id = (node as unknown as { id?: { name?: string } }).id
+  if (id && id.name) {
+    return id.name
+  }
+  return parentName ?? '<anonymous>'
+}
+
+function analyseFunction(node: Node, name: string, violations: HookViolation[]): void {
+  const body = (node as unknown as { body?: Node }).body
+  if (!body || body.type !== 'BlockStatement') {
+    return
+  }
+  const statements = ((body as unknown as { body?: Node[] }).body ?? []).filter(isNode)
+
+  let earlyReturnIndex = -1
+  for (let index = 0; index < statements.length; index++) {
+    if (canReturnEarly(statements[index])) {
+      earlyReturnIndex = index
+      break
+    }
+  }
+
+  statements.forEach((statement, index) => {
+    const inspect = (current: Node, insideControlFlow: boolean): void => {
+      const called = callName(current)
+      if (!called || !HOOK_NAME.test(called)) {
+        return
+      }
+      const line = current.loc ? current.loc.start.line : 0
+      if (insideControlFlow || CONTROL_FLOW_TYPES.has(statement.type)) {
+        violations.push({ kind: 'conditional', hook: called, fn: name, line })
+        return
+      }
+      if (earlyReturnIndex !== -1 && index > earlyReturnIndex) {
+        violations.push({ kind: 'after-early-return', hook: called, fn: name, line })
+      }
+    }
+    inspect(statement, false)
+    walkOwnScope(statement, inspect)
+  })
+}
+
+/**
+ * Returns every Rules-of-Hooks violation in `source`.
+ *
+ * `source` must be a complete ES module — the generators emit exactly that.
+ */
+export function findRulesOfHooksViolations(source: string): HookViolation[] {
+  const ast = parse(source, { sourceType: 'module', plugins: ['jsx'] }) as unknown as Node
+  const violations: HookViolation[] = []
+
+  const visit = (node: Node, inferredName: string | null): void => {
+    if (FUNCTION_TYPES.has(node.type)) {
+      analyseFunction(node, functionName(node, inferredName), violations)
+    }
+    for (const child of childNodes(node)) {
+      // `const TqCountdown = (props) => {...}` — carry the binding name onto the arrow.
+      let nextName: string | null = null
+      if (node.type === 'VariableDeclarator') {
+        const id = (node as unknown as { id?: { name?: string } }).id
+        nextName = id && id.name ? id.name : null
+      }
+      visit(child, nextName)
+    }
+  }
+
+  visit(ast, null)
+  return violations
+}

package/__tests__/emitted-components-rules-of-hooks.test.ts

@@ -0,0 +1,133 @@
+/**
+ * Every React component the Next project generator emits as a source STRING is
+ * invisible to TypeScript, ESLint and eslint-plugin-react-hooks. This suite is
+ * the only thing standing between a Rules-of-Hooks mistake in one of those
+ * templates and a runtime crash on every published page that uses it.
+ *
+ * Regression origin: `tq-countdown` computed its `targetDate` with `useMemo`
+ * BELOW the `if (!mounted) return …` guard. React counted 7 hooks on the first
+ * render and 8 on the second and threw "Rendered more hooks than during the
+ * previous render". The countdown lives in the Navigation component, so the
+ * whole site fell through to the error boundary — on localhost and on Vercel.
+ */
+
+import { findRulesOfHooksViolations } from './_helpers/rules-of-hooks'
+
+import { generateCountdownComponentCode } from '../src/countdown/component-generator'
+import { generateKanbanComponentCode } from '../src/kanban/component-generator'
+import { generateDragDropComponentCode } from '../src/drag-drop/component-generator'
+import { generateRichTextEditorComponentCode } from '../src/rich-text-editor/component-generator'
+import { generateMotionComponentCode } from '../src/widgets/motion-component'
+import { generateSignatureComponentCode } from '../src/widgets/signature-component'
+import { generateCategoriesFilterComponentCode } from '../src/widgets/categories-filter-component'
+import { generateCategoriesMegamenuComponentCode } from '../src/widgets/categories-megamenu-component'
+import { generateBarcodeComponentCode } from '../src/widgets/barcode-component'
+import { generateQrCodeComponentCode } from '../src/widgets/qrcode-component'
+import { generateEmojiPickerComponentCode } from '../src/widgets/emoji-picker-component'
+import { generateColorPickerComponentCode } from '../src/widgets/color-picker-component'
+import { generateFormFileInputComponentCode } from '../src/widgets/form-file-input-component'
+import { COLLAPSIBLE_TEXT_OVERFLOW_COMPONENT_SOURCE } from '../src/collapsible-text/collapsible-text-overflow-component'
+import { NAV_ACTIVE_LINK_COMPONENT_SOURCE } from '../src/nav-active-link/nav-active-link-component'
+import { TRACKER_COMPONENT_SOURCE } from '../src/analytics/tracker-component'
+
+const EMITTED_COMPONENTS: Array<[string, string]> = [
+  ['tq-countdown', generateCountdownComponentCode()],
+  ['tq-kanban', generateKanbanComponentCode()],
+  ['tq-drag-drop', generateDragDropComponentCode()],
+  ['rich-text-editor', generateRichTextEditorComponentCode()],
+  ['tq-motion', generateMotionComponentCode()],
+  ['tq-signature', generateSignatureComponentCode()],
+  ['tq-categories-filter', generateCategoriesFilterComponentCode()],
+  ['tq-categories-megamenu', generateCategoriesMegamenuComponentCode()],
+  ['tq-barcode', generateBarcodeComponentCode()],
+  ['tq-qrcode', generateQrCodeComponentCode()],
+  ['tq-emoji-picker', generateEmojiPickerComponentCode()],
+  ['tq-color-picker', generateColorPickerComponentCode()],
+  ['tq-form-file-input', generateFormFileInputComponentCode()],
+  ['tq-collapsible-text-overflow', COLLAPSIBLE_TEXT_OVERFLOW_COMPONENT_SOURCE],
+  ['nav-active-links', NAV_ACTIVE_LINK_COMPONENT_SOURCE],
+  ['analytics-tracker', TRACKER_COMPONENT_SOURCE],
+]
+
+describe('emitted React components obey the Rules of Hooks', () => {
+  it.each(EMITTED_COMPONENTS)(
+    '%s calls no hook conditionally or after an early return',
+    (_name, source) => {
+      const violations = findRulesOfHooksViolations(source)
+      expect(violations).toEqual([])
+    }
+  )
+
+  it('covers every component source the generator can emit', () => {
+    // A new widget added without a row here would ship unguarded.
+    expect(EMITTED_COMPONENTS).toHaveLength(16)
+  })
+})
+
+describe('the Rules-of-Hooks analyser itself', () => {
+  it('flags a hook placed after a conditional early return', () => {
+    const violations = findRulesOfHooksViolations(`
+      import React, { useState, useMemo } from 'react'
+      const Broken = ({ value }) => {
+        const [mounted, setMounted] = useState(false)
+        if (!mounted) {
+          return null
+        }
+        const doubled = useMemo(() => value * 2, [value])
+        return <span>{doubled}</span>
+      }
+      export default Broken
+    `)
+    expect(violations).toEqual([
+      { kind: 'after-early-return', hook: 'useMemo', fn: 'Broken', line: 8 },
+    ])
+  })
+
+  it('flags a hook called inside a condition', () => {
+    const violations = findRulesOfHooksViolations(`
+      import React, { useEffect } from 'react'
+      const Broken = ({ enabled }) => {
+        if (enabled) {
+          useEffect(() => {}, [])
+        }
+        return null
+      }
+      export default Broken
+    `)
+    expect(violations).toEqual([{ kind: 'conditional', hook: 'useEffect', fn: 'Broken', line: 5 }])
+  })
+
+  it('does not flag an early return INSIDE a hook callback', () => {
+    const violations = findRulesOfHooksViolations(`
+      import React, { useEffect, useMemo } from 'react'
+      const Fine = ({ mode, value }) => {
+        useEffect(() => {
+          if (mode !== 'numeric') {
+            return undefined
+          }
+          const id = setInterval(() => {}, 1000)
+          return () => clearInterval(id)
+        }, [mode])
+        const doubled = useMemo(() => value * 2, [value])
+        return <span>{doubled}</span>
+      }
+      export default Fine
+    `)
+    expect(violations).toEqual([])
+  })
+
+  it('does not flag hooks in a sibling component declared after one that returns early', () => {
+    const violations = findRulesOfHooksViolations(`
+      import React, { useState } from 'react'
+      const First = () => {
+        return null
+      }
+      const Second = () => {
+        const [value] = useState(0)
+        return <span>{value}</span>
+      }
+      export default Second
+    `)
+    expect(violations).toEqual([])
+  })
+})

package/dist/cjs/countdown/component-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-generator.d.ts","sourceRoot":"","sources":["../../../src/countdown/component-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,8BAA8B,QAAO,MA0JjD,CAAA"}
+{"version":3,"file":"component-generator.d.ts","sourceRoot":"","sources":["../../../src/countdown/component-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,8BAA8B,QAAO,MA4JjD,CAAA"}

package/dist/cjs/countdown/component-generator.js

@@ -15,7 +15,7 @@ exports.generateCountdownComponentCode = void 0;
  * to the live countdown — so hydration matches and ticking starts client-side.
  */
 var generateCountdownComponentCode = function () {
-    return "import React, { useState, useEffect, useMemo } from 'react'\nimport Countdown, { zeroPad } from 'react-countdown'\n\nconst ALL_UNITS = ['days', 'hours', 'minutes', 'seconds']\nconst DEFAULT_LABELS = { days: 'Days', hours: 'Hours', minutes: 'Minutes', seconds: 'Seconds' }\n\nconst parseCsv = (value) =>\n  typeof value === 'string' ? value.split(',').map((s) => s.trim()).filter(Boolean) : []\n\nconst resolveUnits = (units) => {\n  const parsed = parseCsv(units).filter((u) => ALL_UNITS.indexOf(u) !== -1)\n  return parsed.length > 0 ? parsed : ALL_UNITS\n}\n\nconst resolveLabels = (units, labels) => {\n  const raw = parseCsv(labels)\n  return units.map((u, i) => raw[i] || DEFAULT_LABELS[u] || u)\n}\n\nconst wrapperStyle = (format) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: format === 'inline' ? 0 : 16,\n  fontVariantNumeric: 'tabular-nums',\n})\n\nconst renderSegments = (segments, format) => {\n  if (format === 'inline') {\n    return (\n      <div className=\"tq-countdown tq-countdown-inline\" style={wrapperStyle('inline')}>\n        <span className=\"tq-countdown-value\">{segments.map((s) => s.value).join(':')}</span>\n      </div>\n    )\n  }\n  return (\n    <div className=\"tq-countdown tq-countdown-blocks\" style={wrapperStyle('blocks')}>\n      {segments.map((s, i) => (\n        <div\n          key={i}\n          className=\"tq-countdown-unit\"\n          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n        >\n          <span className=\"tq-countdown-value\" style={{ fontSize: '2em', fontWeight: 700, lineHeight: 1 }}>\n            {s.value}\n          </span>\n          {s.label ? (\n            <span className=\"tq-countdown-label\" style={{ fontSize: '0.75em', opacity: 0.7 }}>\n              {s.label}\n            </span>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst dateSegments = (timeDelta, units, labels) => {\n  const showDays = units.indexOf('days') !== -1\n  const hours = showDays ? timeDelta.hours : timeDelta.days * 24 + timeDelta.hours\n  const byUnit = {\n    days: timeDelta.days,\n    hours: hours,\n    minutes: timeDelta.minutes,\n    seconds: timeDelta.seconds,\n  }\n  return units.map((unit, i) => ({ value: zeroPad(byUnit[unit] != null ? byUnit[unit] : 0), label: labels[i] || '' }))\n}\n\nconst TqCountdown = ({\n  mode = 'date',\n  target,\n  from = '100',\n  to = '0',\n  format = 'blocks',\n  units,\n  labels,\n  onComplete = 'keep-zero',\n  completeMessage = '',\n  ...rest\n}) => {\n  const [mounted, setMounted] = useState(false)\n  const [numericStart] = useState(() => Date.now())\n  const [now, setNow] = useState(() => Date.now())\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  // Numeric mode ticks via its own interval.\n  useEffect(() => {\n    if (mode !== 'numeric') {\n      return undefined\n    }\n    const id = setInterval(() => setNow(Date.now()), 1000)\n    return () => clearInterval(id)\n  }, [mode])\n\n  const resolvedUnits = useMemo(() => resolveUnits(units), [units])\n  const resolvedLabels = useMemo(() => resolveLabels(resolvedUnits, labels), [resolvedUnits, labels])\n\n  // Deterministic placeholder (zeros) for SSR + first paint, so hydration matches.\n  if (!mounted) {\n    const zeros =\n      mode === 'numeric'\n        ? [{ value: String(from), label: resolvedLabels[0] || '' }]\n        : resolvedUnits.map((u, i) => ({ value: '00', label: resolvedLabels[i] || '' }))\n    return <div {...rest}>{renderSegments(zeros, format)}</div>\n  }\n\n  if (mode === 'numeric') {\n    const fromN = parseFloat(from) || 0\n    const toN = parseFloat(to) || 0\n    const elapsed = Math.max(0, Math.floor((now - numericStart) / 1000))\n    const current = fromN > toN ? Math.max(toN, fromN - elapsed) : Math.min(toN, fromN + elapsed)\n    const completed = current === toN\n    if (completed && onComplete === 'hide') {\n      return <div {...rest} />\n    }\n    if (completed && onComplete === 'show-message') {\n      return (\n        <div {...rest}>\n          <span className=\"tq-countdown-complete\">{completeMessage}</span>\n        </div>\n      )\n    }\n    return <div {...rest}>{renderSegments([{ value: String(current), label: resolvedLabels[0] || '' }], format)}</div>\n  }\n\n  const renderer = ({ days, hours, minutes, seconds, completed }) => {\n    if (completed && onComplete === 'hide') {\n      return <span className=\"tq-countdown-complete\" />\n    }\n    if (completed && onComplete === 'show-message') {\n      return <span className=\"tq-countdown-complete\">{completeMessage}</span>\n    }\n    const segments = dateSegments({ days, hours, minutes, seconds }, resolvedUnits, resolvedLabels)\n    return renderSegments(segments, format)\n  }\n\n  const targetDate = useMemo(() => {\n    const d = new Date(target)\n    return isNaN(d.getTime()) ? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) : d\n  }, [target])\n\n  return (\n    <div {...rest}>\n      <Countdown date={targetDate} renderer={renderer} overtime={false} />\n    </div>\n  )\n}\n\nexport default TqCountdown\n";
+    return "import React, { useState, useEffect, useMemo } from 'react'\nimport Countdown, { zeroPad } from 'react-countdown'\n\nconst ALL_UNITS = ['days', 'hours', 'minutes', 'seconds']\nconst DEFAULT_LABELS = { days: 'Days', hours: 'Hours', minutes: 'Minutes', seconds: 'Seconds' }\n\nconst parseCsv = (value) =>\n  typeof value === 'string' ? value.split(',').map((s) => s.trim()).filter(Boolean) : []\n\nconst resolveUnits = (units) => {\n  const parsed = parseCsv(units).filter((u) => ALL_UNITS.indexOf(u) !== -1)\n  return parsed.length > 0 ? parsed : ALL_UNITS\n}\n\nconst resolveLabels = (units, labels) => {\n  const raw = parseCsv(labels)\n  return units.map((u, i) => raw[i] || DEFAULT_LABELS[u] || u)\n}\n\nconst wrapperStyle = (format) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: format === 'inline' ? 0 : 16,\n  fontVariantNumeric: 'tabular-nums',\n})\n\nconst renderSegments = (segments, format) => {\n  if (format === 'inline') {\n    return (\n      <div className=\"tq-countdown tq-countdown-inline\" style={wrapperStyle('inline')}>\n        <span className=\"tq-countdown-value\">{segments.map((s) => s.value).join(':')}</span>\n      </div>\n    )\n  }\n  return (\n    <div className=\"tq-countdown tq-countdown-blocks\" style={wrapperStyle('blocks')}>\n      {segments.map((s, i) => (\n        <div\n          key={i}\n          className=\"tq-countdown-unit\"\n          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n        >\n          <span className=\"tq-countdown-value\" style={{ fontSize: '2em', fontWeight: 700, lineHeight: 1 }}>\n            {s.value}\n          </span>\n          {s.label ? (\n            <span className=\"tq-countdown-label\" style={{ fontSize: '0.75em', opacity: 0.7 }}>\n              {s.label}\n            </span>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst dateSegments = (timeDelta, units, labels) => {\n  const showDays = units.indexOf('days') !== -1\n  const hours = showDays ? timeDelta.hours : timeDelta.days * 24 + timeDelta.hours\n  const byUnit = {\n    days: timeDelta.days,\n    hours: hours,\n    minutes: timeDelta.minutes,\n    seconds: timeDelta.seconds,\n  }\n  return units.map((unit, i) => ({ value: zeroPad(byUnit[unit] != null ? byUnit[unit] : 0), label: labels[i] || '' }))\n}\n\nconst TqCountdown = ({\n  mode = 'date',\n  target,\n  from = '100',\n  to = '0',\n  format = 'blocks',\n  units,\n  labels,\n  onComplete = 'keep-zero',\n  completeMessage = '',\n  ...rest\n}) => {\n  const [mounted, setMounted] = useState(false)\n  const [numericStart] = useState(() => Date.now())\n  const [now, setNow] = useState(() => Date.now())\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  // Numeric mode ticks via its own interval.\n  useEffect(() => {\n    if (mode !== 'numeric') {\n      return undefined\n    }\n    const id = setInterval(() => setNow(Date.now()), 1000)\n    return () => clearInterval(id)\n  }, [mode])\n\n  const resolvedUnits = useMemo(() => resolveUnits(units), [units])\n  const resolvedLabels = useMemo(() => resolveLabels(resolvedUnits, labels), [resolvedUnits, labels])\n  // Every hook must run on EVERY render: the mounted-guard and the numeric-mode\n  // branch below both return early, so a hook placed after them would only run\n  // on some renders (\"Rendered more hooks than during the previous render\").\n  const targetDate = useMemo(() => {\n    const d = new Date(target)\n    return isNaN(d.getTime()) ? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) : d\n  }, [target])\n\n  // Deterministic placeholder (zeros) for SSR + first paint, so hydration matches.\n  if (!mounted) {\n    const zeros =\n      mode === 'numeric'\n        ? [{ value: String(from), label: resolvedLabels[0] || '' }]\n        : resolvedUnits.map((u, i) => ({ value: '00', label: resolvedLabels[i] || '' }))\n    return <div {...rest}>{renderSegments(zeros, format)}</div>\n  }\n\n  if (mode === 'numeric') {\n    const fromN = parseFloat(from) || 0\n    const toN = parseFloat(to) || 0\n    const elapsed = Math.max(0, Math.floor((now - numericStart) / 1000))\n    const current = fromN > toN ? Math.max(toN, fromN - elapsed) : Math.min(toN, fromN + elapsed)\n    const completed = current === toN\n    if (completed && onComplete === 'hide') {\n      return <div {...rest} />\n    }\n    if (completed && onComplete === 'show-message') {\n      return (\n        <div {...rest}>\n          <span className=\"tq-countdown-complete\">{completeMessage}</span>\n        </div>\n      )\n    }\n    return <div {...rest}>{renderSegments([{ value: String(current), label: resolvedLabels[0] || '' }], format)}</div>\n  }\n\n  const renderer = ({ days, hours, minutes, seconds, completed }) => {\n    if (completed && onComplete === 'hide') {\n      return <span className=\"tq-countdown-complete\" />\n    }\n    if (completed && onComplete === 'show-message') {\n      return <span className=\"tq-countdown-complete\">{completeMessage}</span>\n    }\n    const segments = dateSegments({ days, hours, minutes, seconds }, resolvedUnits, resolvedLabels)\n    return renderSegments(segments, format)\n  }\n\n  return (\n    <div {...rest}>\n      <Countdown date={targetDate} renderer={renderer} overtime={false} />\n    </div>\n  )\n}\n\nexport default TqCountdown\n";
 };
 exports.generateCountdownComponentCode = generateCountdownComponentCode;
 //# sourceMappingURL=component-generator.js.map

package/dist/cjs/countdown/component-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-generator.js","sourceRoot":"","sources":["../../../src/countdown/component-generator.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;GAYG;AACI,IAAM,8BAA8B,GAAG;IAC5C,OAAO,29JAwJR,CAAA;AACD,CAAC,CAAA;AA1JY,QAAA,8BAA8B,kCA0J1C"}
+{"version":3,"file":"component-generator.js","sourceRoot":"","sources":["../../../src/countdown/component-generator.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;GAYG;AACI,IAAM,8BAA8B,GAAG;IAC5C,OAAO,6sKA0JR,CAAA;AACD,CAAC,CAAA;AA5JY,QAAA,8BAA8B,kCA4J1C"}