@teleporthq/teleport-project-generator-next 0.43.44 → 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/__tests__/state-data-source-runtime-user-fetch.test.ts

@@ -0,0 +1,268 @@
+import generator from '@babel/generator'
+import * as types from '@babel/types'
+import { createStateDataSourcePlugin } from '../src/state-data-source-plugin'
+
+// Regression guard for the "Characters page renders empty lists" defect
+// (GuildForge run, examples/uidl-samples/project.json): page states bound to a
+// data source with a `{{Current User.*}}` query were silently dropped — no
+// getStaticProps fetch is possible (the placeholder only resolves at runtime)
+// and nothing else populated them, so every list bound to such a state stayed
+// empty forever. The plugin must instead emit an API route + a client-side
+// useEffect fetch keyed on the signed-in user.
+
+const DS_ID = '8e4bd2e9-1ceb-41ee-91ea-6f2aca94076e'
+
+const USER_QUERY =
+  "SELECT id, user_id, name FROM characters WHERE (user_id = '{{Current User.id}}' OR user_id IS NULL) ORDER BY name ASC LIMIT 20"
+
+const makeState = (query?: string) => ({
+  type: 'array',
+  defaultValue: [] as unknown[],
+  dataSourceBinding: {
+    dataSourceId: DS_ID,
+    refPath: ['characters'],
+  },
+  ...(query ? { query } : {}),
+})
+
+const makeJsxComponentChunk = () => ({
+  type: 'AST',
+  fileType: 'js',
+  name: 'jsx-component',
+  linkAfter: [] as string[],
+  content: types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('Characters'),
+      types.arrowFunctionExpression(
+        [],
+        types.blockStatement([types.returnStatement(types.nullLiteral())])
+      )
+    ),
+  ]),
+})
+
+const makeStructure = (
+  stateDefinitions: Record<string, unknown>,
+  { auth = true, dynamicRouteAttribute }: { auth?: boolean; dynamicRouteAttribute?: string } = {}
+) => ({
+  uidl: {
+    name: 'Characters',
+    stateDefinitions,
+    node: { type: 'element', content: { elementType: 'container' } },
+    outputOptions: {
+      folderPath: [] as string[],
+      ...(dynamicRouteAttribute && { dynamicRouteAttribute }),
+    },
+  },
+  chunks: [makeJsxComponentChunk()] as any[],
+  dependencies: {} as Record<string, unknown>,
+  options: {
+    dataSources: {
+      [DS_ID]: {
+        id: DS_ID,
+        type: 'teleport',
+        config: {},
+      },
+    },
+    extractedResources: {} as Record<string, unknown>,
+    ...(auth ? { auth: { provider: 'teleport' } } : {}),
+  },
+})
+
+const componentCode = (structure: { chunks: any[] }): string => {
+  const chunk = structure.chunks.find((c) => c.name === 'jsx-component')
+  return generator(chunk.content as types.Node).code
+}
+
+describe('state-data-source-plugin runtime {{Current User.*}} fetch', () => {
+  const plugin = createStateDataSourcePlugin()
+
+  it('emits an API route + useEffect fetch for a Current-User-bound state', async () => {
+    const structure = makeStructure({ charactersResults: makeState(USER_QUERY) })
+
+    const result = await plugin(structure as any)
+
+    // API route extracted under pages/api/page-state with the parameterized query
+    const resources = result.options.extractedResources as Record<
+      string,
+      { path: string[]; content: string }
+    >
+    const routeKeys = Object.keys(resources).filter((k) => k.startsWith('pages/api/page-state/'))
+    expect(routeKeys).toHaveLength(1)
+    const route = resources[routeKeys[0]]
+    expect(route.path).toEqual(['pages', 'api', 'page-state'])
+    expect(route.content).toContain('user_id = $1')
+    expect(route.content).toContain('const { currentUserId } = req.query')
+    expect(route.content).not.toContain('{{Current User.id}}')
+
+    // Client-side effect wired to the signed-in user
+    const code = componentCode(result as any)
+    expect(code).toContain('const __pageStateCtx = useGlobalContext()')
+    expect(code).toContain('useEffect(')
+    expect(code).toContain('__pageStateCtx?.currentUser')
+    expect(code).toContain('encodeURIComponent(__user?.id ?? "")')
+    expect(code).toContain('setCharactersResults(Array.isArray(__data) ? __data : [])')
+    expect(code).toContain('/api/page-state/')
+
+    // Hook + context imports registered
+    expect(result.dependencies.useEffect).toBeDefined()
+    expect(result.dependencies.useGlobalContext).toBeDefined()
+
+    // No getStaticProps fetch was emitted for the runtime state
+    const gsp = result.chunks.find((c: any) => c.name === 'getStaticProps')
+    if (gsp) {
+      expect(generator(gsp.content as types.Node).code).not.toContain('charactersResults')
+    }
+  })
+
+  it('shares one fetch effect between states with identical queries and keeps distinct queries apart', async () => {
+    const structure = makeStructure({
+      charactersResults: makeState(USER_QUERY),
+      mirror: makeState(USER_QUERY),
+      mainSpotlight: makeState(
+        "SELECT id FROM characters WHERE user_id = '{{Current User.id}}' AND is_main = TRUE LIMIT 1"
+      ),
+    })
+
+    const result = await plugin(structure as any)
+
+    const routeKeys = Object.keys(result.options.extractedResources as object).filter((k) =>
+      k.startsWith('pages/api/page-state/')
+    )
+    expect(routeKeys).toHaveLength(2)
+
+    const code = componentCode(result as any)
+    // Shared group: both setters inside the same effect
+    expect(code).toContain('setCharactersResults(')
+    expect(code).toContain('setMirror(')
+    expect(code).toContain('setMainSpotlight(')
+    expect(code.match(/useEffect\(/g)).toHaveLength(2)
+  })
+
+  it('does nothing for such states when the project has no authentication', async () => {
+    const structure = makeStructure({ charactersResults: makeState(USER_QUERY) }, { auth: false })
+
+    const result = await plugin(structure as any)
+
+    expect(Object.keys(result.options.extractedResources as object)).toHaveLength(0)
+    const code = componentCode(result as any)
+    expect(code).not.toContain('useEffect(')
+    expect(result.dependencies.useEffect).toBeUndefined()
+  })
+
+  it('still skips queries with placeholders other than {{Current User.*}}', async () => {
+    const structure = makeStructure({
+      detailRows: makeState("SELECT * FROM events WHERE id = '{{Current Page Entity.id}}'"),
+    })
+
+    const result = await plugin(structure as any)
+
+    expect(Object.keys(result.options.extractedResources as object)).toHaveLength(0)
+    expect(componentCode(result as any)).not.toContain('useEffect(')
+  })
+
+  it('emits a route-param-driven fetch for a {{Current Page Entity.id}} query on a details page', async () => {
+    // GuildForge guild-details regression: guildMemberships was bound to an
+    // entity-scoped query; the binding was silently dropped so the members
+    // list stayed empty in the generated app while the GUI editor (which
+    // resolves the binding itself) showed it populated.
+    const entityQuery =
+      'SELECT m.id, u.name FROM memberships m LEFT JOIN users u ON m.user_id = u.id ' +
+      "WHERE m.guild_id = '{{Current Page Entity.id}}' ORDER BY u.name ASC"
+    const structure = makeStructure(
+      {
+        guildMemberships: {
+          ...makeState(entityQuery),
+          dataSourceBinding: { dataSourceId: DS_ID, refPath: [] },
+        },
+      },
+      { dynamicRouteAttribute: 'id' }
+    )
+
+    const result = await plugin(structure as any)
+
+    const resources = result.options.extractedResources as Record<string, { content: string }>
+    const routeKeys = Object.keys(resources).filter((k) => k.startsWith('pages/api/page-state/'))
+    expect(routeKeys).toHaveLength(1)
+    expect(resources[routeKeys[0]].content).toContain('m.guild_id = $1')
+    expect(resources[routeKeys[0]].content).toContain('const { currentPageEntityId } = req.query')
+
+    const code = componentCode(result as any)
+    expect(code).toContain('const __pageStateRouter = useRouter()')
+    expect(code).toContain('__pageStateRouter.query?.["id"]')
+    expect(code).toContain('encodeURIComponent(__entityId)')
+    expect(code).toContain('setGuildMemberships(Array.isArray(__data) ? __data : [])')
+    // Entity-only query must not require auth context
+    expect(code).not.toContain('__pageStateCtx')
+    expect(result.dependencies.useRouter).toBeDefined()
+    expect(result.dependencies.useGlobalContext).toBeUndefined()
+  })
+
+  it('works without authentication when the query only uses {{Current Page Entity.id}}', async () => {
+    const entityQuery = "SELECT * FROM memberships WHERE guild_id = '{{Current Page Entity.id}}'"
+    const structure = makeStructure(
+      { members: makeState(entityQuery) },
+      { auth: false, dynamicRouteAttribute: 'id' }
+    )
+
+    const result = await plugin(structure as any)
+    expect(
+      Object.keys(result.options.extractedResources as object).filter((k) =>
+        k.startsWith('pages/api/page-state/')
+      )
+    ).toHaveLength(1)
+    expect(componentCode(result as any)).toContain('useEffect(')
+  })
+
+  it('skips a {{Current Page Entity.id}} query on a non-details page (no route param)', async () => {
+    const entityQuery = "SELECT * FROM memberships WHERE guild_id = '{{Current Page Entity.id}}'"
+    const structure = makeStructure({ members: makeState(entityQuery) })
+
+    const result = await plugin(structure as any)
+    expect(Object.keys(result.options.extractedResources as object)).toHaveLength(0)
+    expect(componentCode(result as any)).not.toContain('useEffect(')
+  })
+
+  it('combines user and entity tokens in one fetch with both guards', async () => {
+    const mixedQuery =
+      "SELECT * FROM memberships WHERE guild_id = '{{Current Page Entity.id}}' " +
+      "AND user_id = '{{Current User.id}}'"
+    const structure = makeStructure(
+      { myMembership: makeState(mixedQuery) },
+      { dynamicRouteAttribute: 'id' }
+    )
+
+    const result = await plugin(structure as any)
+
+    const resources = result.options.extractedResources as Record<string, { content: string }>
+    const routeKey = Object.keys(resources).find((k) => k.startsWith('pages/api/page-state/'))!
+    expect(resources[routeKey].content).toContain('guild_id = $1')
+    expect(resources[routeKey].content).toContain('user_id = $2')
+    expect(resources[routeKey].content).toContain('currentPageEntityId, currentUserId')
+
+    const code = componentCode(result as any)
+    expect(code).toContain('const __pageStateCtx = useGlobalContext()')
+    expect(code).toContain('const __pageStateRouter = useRouter()')
+    expect(code).toContain('if (!__user) return')
+    expect(code).toContain('if (!__entityId) return')
+  })
+
+  it('keeps build-time states in getStaticProps while runtime states get effects', async () => {
+    const structure = makeStructure({
+      allGuilds: makeState('SELECT * FROM guilds ORDER BY name ASC'),
+      myCharacters: makeState(USER_QUERY),
+    })
+
+    const result = await plugin(structure as any)
+
+    const gsp = result.chunks.find((c: any) => c.name === 'getStaticProps')
+    expect(gsp).toBeDefined()
+    const gspCode = generator(gsp.content as types.Node).code
+    expect(gspCode).toContain('allGuilds')
+    expect(gspCode).not.toContain('myCharacters')
+
+    const code = componentCode(result as any)
+    expect(code).toContain('setMyCharacters(')
+    expect(code).not.toContain('setAllGuilds(')
+  })
+})

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"}

package/dist/cjs/state-data-source-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state-data-source-plugin.d.ts","sourceRoot":"","sources":["../../src/state-data-source-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAQvB,MAAM,4BAA4B,CAAA;AAohBnC,eAAO,MAAM,2BAA2B,EAAE,sBAAsB,CAAC,EAAE,CAyJlE,CAAA"}
+{"version":3,"file":"state-data-source-plugin.d.ts","sourceRoot":"","sources":["../../src/state-data-source-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAQvB,MAAM,4BAA4B,CAAA;AA0/BnC,eAAO,MAAM,2BAA2B,EAAE,sBAAsB,CAAC,EAAE,CAkKlE,CAAA"}