`SyntaxError` for components used directly and as objects

[stefanprobst]

when using namespaced components i'm getting a SyntaxError: Identifier has already been declared.

this is what i did:

import { compile, evaluate } from "xdm";
import * as runtime from "react/jsx-runtime.js";

main();

async function main() {
  const file = `
  <Hello>Text</Hello>

  <Hello.World>Text</Hello.World>
  `;
  await evaluate(file, { ...runtime });
  // const code = await compile(file);
  // console.log(String(code));
}

the compiled code has the following lines:

const _components = Object.assign({
  Hello: _missingComponent("Hello")
}, _props.components), {Hello, wrapper: MDXLayout, Hello} = _components;

[wooorm]

Ohhh interested! So you have both the identifier as a component, and as an object? That’s a bug, nice catch.

Do you also have the code that uses it? I can think of this but am wondering how you’re actually passing them?

const components = {Hello}

Hello.World = World

function Hello() {
  /* … */
}

function World() {
  /* … */
}

[stefanprobst]

yep exactly, a more real life example would be:

function Accordion(props) {
  /** */
}
function AccordionPanel(props) {
  /** */
}

Accordion.Panel = AccordionPanel

it's a pattern also used e.g. here

[wooorm]

Thanks for the report and info, fixed in 1.7.0!