@teleporthq/teleport-plugin-common 0.42.35 → 0.43.0

package/__tests__/node-handlers/node-to-jsx/index.ts

@@ -16,8 +16,13 @@ describe('generateJSXSyntax', () => {
     dependencies: {},
     propDefinitions: uidl.propDefinitions || {},
     stateDefinitions: uidl.stateDefinitions || {},
+    globalStateDefinitions: {},
     nodesLookup: {},
     windowImports: {},
+    localeReferences: [],
+    globalReferences: [],
+    globalStateReferences: [],
+    hoistedConstants: [],
   }
 
   const options: JSXGenerationOptions = {
@@ -104,4 +109,163 @@ describe('generateJSXSyntax', () => {
       expect((nameAttr.value as types.StringLiteral).value).toBe('hole')
     })
   })
+
+  describe('renderingConditions on elements', () => {
+    it('wraps the element with a logical `&&` when renderingConditions are set', () => {
+      const ownerContainer = elementNode('container', {}, [])
+      ownerContainer.content.renderingConditions = {
+        reference: {
+          type: 'dynamic',
+          content: {
+            referenceType: 'state',
+            id: 'profileViewer',
+            refPath: ['currentUserId'],
+          },
+        },
+        condition: {
+          conditions: [
+            {
+              operation: '===',
+              operand: {
+                type: 'dynamic',
+                content: {
+                  referenceType: 'local',
+                  id: 'id',
+                  refPath: ['id'],
+                },
+              },
+            },
+          ],
+        },
+      } as never
+
+      const wrappingParent = elementNode('container', {}, [ownerContainer])
+      const detailsParams: JSXGenerationParams = {
+        ...params,
+        globalReferences: [],
+        detailsPageExposeAsName: 'User',
+      }
+      const result = generateJSXSyntax(wrappingParent, detailsParams, options)
+
+      const expressionChild = result.children[0] as types.JSXExpressionContainer
+      expect(expressionChild.type).toBe('JSXExpressionContainer')
+
+      const logical = expressionChild.expression as types.LogicalExpression
+      expect(logical.type).toBe('LogicalExpression')
+      expect(logical.operator).toBe('&&')
+
+      // The wrapped content is the original <container/>.
+      const wrappedContent = logical.right as types.JSXElement
+      expect(wrappedContent.type).toBe('JSXElement')
+      expect((wrappedContent.openingElement.name as types.JSXIdentifier).name).toBe('container')
+    })
+  })
+
+  describe('navlink href via differentiatorValue', () => {
+    // The navlink attribute flow is exercised end-to-end in the resolver tests;
+    // here we only confirm that an `expr`-typed attribute which mentions
+    // `currentUser` registers a global reference so useGlobalContext() is wired
+    // up downstream.
+    it('tracks currentUser as a global reference when emitted via an expr attr', () => {
+      const linkWithDifferentiatorHref = elementNode('a', {
+        href: {
+          type: 'expr',
+          content: '`/profile/' + '$' + '{' + 'currentUser?.id}' + '`',
+        },
+      })
+      const localParams: JSXGenerationParams = {
+        ...params,
+        globalReferences: [],
+      }
+      generateJSXSyntax(linkWithDifferentiatorHref, localParams, options)
+      expect(localParams.globalReferences).toContain('currentUser')
+    })
+  })
+
+  describe('plan v15 Layer 4 — codegen safety net for junk attrs and corrupt values', () => {
+    // Suppress the console.warn that fires when junk attrs are dropped so
+    // the test runner output stays clean. Reset between tests.
+    let warnSpy: jest.SpyInstance | null = null
+    beforeEach(() => {
+      warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+    afterEach(() => {
+      warnSpy?.mockRestore()
+    })
+
+    const attributeNames = (el: types.JSXElement): string[] =>
+      el.openingElement.attributes
+        .filter((a): a is types.JSXAttribute => a.type === 'JSXAttribute')
+        .map((a) => (a.name as types.JSXIdentifier).name)
+
+    it('drops junk-name attribute true="true"', () => {
+      const node = elementNode('div', {
+        true: { type: 'static', content: 'true' },
+        class: { type: 'static', content: 'kept' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      const names = attributeNames(result)
+      expect(names).not.toContain('true')
+      expect(names).toContain('class')
+    })
+
+    it('drops junk-name attribute false="false"', () => {
+      const node = elementNode('div', {
+        false: { type: 'static', content: 'false' },
+        class: { type: 'static', content: 'kept' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      expect(attributeNames(result)).not.toContain('false')
+    })
+
+    it('drops numeric-name attributes (e.g. 0="x")', () => {
+      const node = elementNode('div', {
+        '0': { type: 'static', content: 'x' },
+        class: { type: 'static', content: 'kept' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      expect(attributeNames(result)).not.toContain('0')
+    })
+
+    it('drops null and undefined name attrs', () => {
+      const node = elementNode('div', {
+        null: { type: 'static', content: 'x' },
+        undefined: { type: 'static', content: 'y' },
+        class: { type: 'static', content: 'kept' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      const names = attributeNames(result)
+      expect(names).not.toContain('null')
+      expect(names).not.toContain('undefined')
+    })
+
+    it('drops entity-escaped binding markers in static attr values (&#123;)', () => {
+      const node = elementNode('tq-if', {
+        condition: { type: 'static', content: '&#123;&#123;state.X&#125;&#125;' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      expect(attributeNames(result)).not.toContain('condition')
+    })
+
+    it('drops static attr values with truncated `{{` (no closing `}}`)', () => {
+      const node = elementNode('tq-if', {
+        condition: { type: 'static', content: '{{state.isMobileMenuOpen' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      expect(attributeNames(result)).not.toContain('condition')
+    })
+
+    it('preserves well-formed static attrs (no false positives)', () => {
+      const node = elementNode('div', {
+        class: { type: 'static', content: 'foo' },
+        'data-config': { type: 'static', content: '{"k":1}' },
+        condition: { type: 'static', content: '{{state.X}}' },
+      } as never)
+      const result = generateJSXSyntax(node, params, options) as types.JSXElement
+      const names = attributeNames(result)
+      expect(names).toContain('class')
+      expect(names).toContain('data-config')
+      expect(names).toContain('condition')
+    })
+  })
 })

package/__tests__/node-handlers/node-to-jsx/url-search-params-expression.ts

@@ -0,0 +1,59 @@
+import generator from '@babel/generator'
+import { createDynamicValueExpression } from '../../../src/node-handlers/node-to-jsx/utils'
+import type { JSXGenerationOptions } from '../../../src/node-handlers/node-to-jsx/types'
+import type { UIDLDynamicReference } from '@teleporthq/teleport-types'
+
+const gen = (ast: unknown): string => generator(ast as never).code
+
+const buildOptions = (
+  prefixMap: Record<string, string> = { urlSearchParams: 'router.query' },
+  registry?: Record<string, { defaultValue?: string }>
+): JSXGenerationOptions => {
+  return {
+    dynamicReferencePrefixMap: prefixMap,
+    dependencyHandling: 'import',
+    stateHandling: 'mutation',
+    slotHandling: 'native',
+    ...(registry ? { urlSearchParamsRegistry: registry } : {}),
+  } as unknown as JSXGenerationOptions
+}
+
+const buildRef = (key: string): UIDLDynamicReference => ({
+  type: 'dynamic',
+  content: {
+    referenceType: 'urlSearchParams',
+    id: key,
+    refPath: [key],
+  },
+})
+
+describe('createDynamicValueExpression — urlSearchParams', () => {
+  it('emits router.query.<key> for Next.js generators', () => {
+    const ast = createDynamicValueExpression(buildRef('category'), buildOptions())
+    expect(gen(ast)).toBe('router.query?.category')
+  })
+
+  it('appends a nullish-coalescing default from the registry', () => {
+    const ast = createDynamicValueExpression(
+      buildRef('category'),
+      buildOptions({ urlSearchParams: 'router.query' }, { category: { defaultValue: 'food' } })
+    )
+    expect(gen(ast)).toBe('router.query?.category ?? "food"')
+  })
+
+  it('honors a custom prefix for static generators', () => {
+    const ast = createDynamicValueExpression(
+      buildRef('category'),
+      buildOptions({ urlSearchParams: '__urlSearchParams' })
+    )
+    expect(gen(ast)).toBe('__urlSearchParams?.category')
+  })
+
+  it('uses refPath[0] when no registry default is set and key has no fallback', () => {
+    const ast = createDynamicValueExpression(
+      buildRef('minPrice'),
+      buildOptions({ urlSearchParams: 'router.query' })
+    )
+    expect(gen(ast)).toBe('router.query?.minPrice')
+  })
+})

package/__tests__/node-handlers/node-to-jsx/utils.ts

@@ -1,7 +1,10 @@
+import generate from '@babel/generator'
 import {
   createBinaryExpression,
   createConditionIdentifier,
+  createStateChangeStatement,
 } from '../../../src/node-handlers/node-to-jsx/utils'
+import { UIDLStateDefinition, UIDLStateModifierEvent } from '@teleporthq/teleport-types'
 import { dynamicNode } from '@teleporthq/teleport-uidl-builders'
 import {
   JSXGenerationParams,
@@ -122,8 +125,14 @@ describe('createConditionIdentifier', () => {
         defaultValue: false,
       },
     },
+    globalStateDefinitions: {},
     dependencies: {},
     nodesLookup: {},
+    windowImports: {},
+    localeReferences: [],
+    globalReferences: [],
+    globalStateReferences: [],
+    hoistedConstants: [],
   }
 
   const options: JSXGenerationOptions = {
@@ -174,8 +183,216 @@ describe('createConditionIdentifier', () => {
     expect(result.type).toBe('string')
   })
 
+  it('resolves a page-root local reference against the details-page exposeAs name', () => {
+    const node = dynamicNode('local', 'id', ['id'])
+    const detailsOptions = {
+      ...options,
+      dynamicReferencePrefixMap: {
+        prop: 'props',
+        state: '',
+        local: '',
+      },
+      detailsPageExposeAsName: 'User',
+    }
+    const result = createConditionIdentifier(node, params, detailsOptions)
+
+    expect(result.key).toBe('User.id')
+    expect(result.prefix).toBe('props')
+    expect(result.type).toBe('string')
+  })
+
+  it('keeps repeater semantics for local refs inside a loop', () => {
+    const node = dynamicNode('local', 'item', ['type'])
+    const detailsInsideLoopOptions = {
+      ...options,
+      localIdentifier: 'item',
+      detailsPageExposeAsName: 'User',
+    }
+    const result = createConditionIdentifier(node, params, detailsInsideLoopOptions)
+
+    expect(result.key).toBe('type')
+    expect(result.prefix).toBe('item')
+  })
+
   it('throws an error for unknown reference type', () => {
     const node = dynamicNode('locale', 'title')
     expect(() => createConditionIdentifier(node, params, options)).toThrowError()
   })
 })
+
+describe('createStateChangeStatement — plan v14 type-aware emitter', () => {
+  // We render each AST back to source so the assertions read like the code
+  // the React component would actually contain.
+  const render = (stmt: ReturnType<typeof createStateChangeStatement>): string => {
+    if (!stmt) {
+      return ''
+    }
+    return generate(stmt).code.replace(/[\s;]+$/g, '')
+  }
+
+  const hooksOptions: JSXGenerationOptions = {
+    stateHandling: 'hooks',
+    dynamicReferencePrefixMap: { prop: '', state: '', local: '' },
+  }
+
+  const stateDefs = (
+    overrides: Record<string, UIDLStateDefinition>
+  ): Record<string, UIDLStateDefinition> => ({
+    isOpen: { type: 'boolean', defaultValue: false },
+    activeStep: { type: 'number', defaultValue: 1 },
+    quizAnswers: { type: 'object', defaultValue: {} },
+    tags: { type: 'array', defaultValue: [] },
+    selectedSkinType: { type: 'string', defaultValue: '' },
+    ...overrides,
+  })
+
+  it('toggles a boolean state with !x (existing behaviour preserved)', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'isOpen',
+      newState: '$toggle',
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setIsOpen(!isOpen)')
+  })
+
+  it('refuses to toggle a numeric state (no setter emitted)', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: '$toggle',
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('refuses to toggle an object state (no setter emitted)', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'quizAnswers',
+      newState: '$toggle',
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('refuses to overwrite object state with a primitive', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'quizAnswers',
+      newState: 'oily',
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('writes a literal value to a numeric state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: 2,
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setActiveStep(2)')
+  })
+
+  it('writes a literal value to a string state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'selectedSkinType',
+      newState: 'Oily',
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setSelectedSkinType("Oily")')
+  })
+
+  it('emits a functional setter for $increment on numeric state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: { type: '$increment' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setActiveStep(prev => prev + 1)')
+  })
+
+  it('emits a functional setter for $decrement with custom delta', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: { type: '$decrement', delta: 2 },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setActiveStep(prev => prev - 2)')
+  })
+
+  it('honors negative delta on $increment as a decrement', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: { type: '$increment', delta: -2 },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setActiveStep(prev => prev - 2)')
+  })
+
+  it('refuses $increment on non-numeric state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'selectedSkinType',
+      newState: { type: '$increment' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('emits a $patch setter for an object state with a path', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'quizAnswers',
+      newState: { type: '$patch', path: 'skinType', value: 'Oily' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setQuizAnswers(prev => ({\n  ...prev,\n  skinType: "Oily"\n}))')
+  })
+
+  it('refuses $patch when the state is not declared as object', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'activeStep',
+      newState: { type: '$patch', path: 'foo', value: 'bar' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('emits an $append setter for an array state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'tags',
+      newState: { type: '$append', value: 'sale' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(render(stmt)).toBe('setTags(prev => [...prev, "sale"])')
+  })
+
+  it('refuses $append when the state is not declared as array', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'quizAnswers',
+      newState: { type: '$append', value: 'x' },
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+
+  it('refuses a stateChange targeting an undeclared state', () => {
+    const event: UIDLStateModifierEvent = {
+      type: 'stateChange',
+      modifies: 'doesNotExist',
+      newState: 1,
+    }
+    const stmt = createStateChangeStatement(event, stateDefs({}), hooksOptions)
+    expect(stmt).toBeNull()
+  })
+})

package/__tests__/utils/ast-utils.ts

@@ -8,7 +8,11 @@ import {
   convertValueToLiteral,
   objectToObjectExpression,
   addRawAttributeToJSXTag,
+  collectGlobalReferencesFromObjectStates,
+  createStateHookAST,
+  sanitizeExprContent,
 } from '../../src/utils/ast-utils'
+import generator from '@babel/generator'
 import ParsedASTNode from '../../src/utils/parsed-ast'
 import { createJSXTag } from '../../src/builders/ast-builders'
 import * as types from '@babel/types'
@@ -284,3 +288,134 @@ describe('objectToObjectExpression', () => {
     })
   })
 })
+
+describe('collectGlobalReferencesFromObjectStates', () => {
+  it('resolves refPath-style global references (no explicit id) via GLOBAL_REF_ID_MAP', () => {
+    const stateDefinitions = {
+      profileViewer: {
+        type: 'object',
+        defaultValue: {
+          currentUserId: {
+            type: 'dynamic',
+            content: {
+              referenceType: 'global',
+              refPath: ['Current User', 'id'],
+            },
+          },
+        },
+      },
+    }
+    const refs = collectGlobalReferencesFromObjectStates(stateDefinitions as never)
+    expect(refs).toContain('currentUser')
+  })
+
+  it('resolves id-style global references untouched', () => {
+    const stateDefinitions = {
+      cartViewer: {
+        type: 'object',
+        defaultValue: {
+          itemCount: {
+            type: 'dynamic',
+            content: { referenceType: 'global', id: 'cart', refPath: ['items', 'length'] },
+          },
+        },
+      },
+    }
+    const refs = collectGlobalReferencesFromObjectStates(stateDefinitions as never)
+    expect(refs).toContain('cart')
+  })
+})
+
+describe('createStateHookAST – urlSearchParamBinding', () => {
+  const codeOf = (node: types.Node) => generator(node).code
+
+  it('emits plain useState(defaultValue) when no binding is declared', () => {
+    const decl = createStateHookAST('openPanel', {
+      type: 'boolean',
+      defaultValue: false,
+    })
+    expect(codeOf(decl)).toBe('const [openPanel, setOpenPanel] = useState(false);')
+  })
+
+  it('seeds useState from window.location.search falling back to the declared default', () => {
+    // Deliberately uses `window.location.search` rather than `router.query`
+    // because on SSG pages `router.query` is empty on the first render and
+    // only hydrates after `router.isReady` flips — past that, `useState`'s
+    // initializer has already captured the fallback default. Direct reads
+    // from `window.location.search` are synchronously available on both
+    // direct loads and client-side navigations.
+    const decl = createStateHookAST('products_detail_panel_item_id', {
+      type: 'string',
+      defaultValue: '',
+      urlSearchParamBinding: { key: 'products_detail_panel_item_id' },
+    })
+    expect(codeOf(decl)).toBe(
+      'const [products_detail_panel_item_id, setProductsDetailPanelItemId] = useState((typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("products_detail_panel_item_id") : null) ?? "");'
+    )
+  })
+
+  it('falls back to a non-empty static default when the param is absent', () => {
+    const decl = createStateHookAST('category', {
+      type: 'string',
+      defaultValue: 'all',
+      urlSearchParamBinding: { key: 'category' },
+    })
+    expect(codeOf(decl)).toBe(
+      'const [category, setCategory] = useState((typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("category") : null) ?? "all");'
+    )
+  })
+
+  it('ignores urlSearchParamBinding with an empty key (defensive)', () => {
+    const decl = createStateHookAST('foo', {
+      type: 'string',
+      defaultValue: 'x',
+      urlSearchParamBinding: { key: '' },
+    })
+    expect(codeOf(decl)).toBe('const [foo, setFoo] = useState("x");')
+  })
+
+  it('prefers dataSourceBinding over urlSearchParamBinding when both are declared', () => {
+    const decl = createStateHookAST('mixed', {
+      type: 'string',
+      defaultValue: 'fallback',
+      dataSourceBinding: { dataSourceId: 'ds', refPath: [] },
+      urlSearchParamBinding: { key: 'mixed' },
+    })
+    // dataSourceBinding path short-circuits: props.mixed !== undefined ? props.mixed : "fallback"
+    expect(codeOf(decl)).toBe(
+      'const [mixed, setMixed] = useState(props.mixed !== undefined ? props.mixed : "fallback");'
+    )
+  })
+})
+
+describe('sanitizeExprContent', () => {
+  const originalWarn = console.warn
+  beforeEach(() => {
+    console.warn = jest.fn()
+  })
+  afterEach(() => {
+    console.warn = originalWarn
+  })
+
+  it('passes through well-formed expressions unchanged', () => {
+    const expr = '`/profile/' + '$' + '{' + 'currentUser?.id}' + '`'
+    expect(sanitizeExprContent(expr, 'href')).toBe(expr)
+    expect((console.warn as jest.Mock).mock.calls.length).toBe(0)
+  })
+
+  it('repairs the /profile/${} My Profile navlink pattern', () => {
+    const expr = '`/profile/' + '$' + '{}' + '`'
+    expect(sanitizeExprContent(expr, 'href')).toBe(
+      '`/profile/' + '$' + '{' + 'currentUser?.id}' + '`'
+    )
+    expect((console.warn as jest.Mock).mock.calls.length).toBe(1)
+  })
+
+  it('repairs generic empty ${} with an empty-string placeholder', () => {
+    const expr = '`/unknown/' + '$' + '{}' + '/edit`'
+    expect(sanitizeExprContent(expr, 'href')).toBe(
+      '`/unknown/' + '$' + '{' + "'" + "'" + '}' + '/edit`'
+    )
+    expect((console.warn as jest.Mock).mock.calls.length).toBe(1)
+  })
+})