Function reactHarness

src/artifacts/preview.ts:100–144

(src: string)

}

function reactHarness(src: string): string {
  const code = stripModuleSyntax(src);
  const comp = detectReactComponent(code);
  const head =
    `<script crossorigin src="${CDN.react}"></script>` +
    `<script crossorigin src="${CDN.reactDom}"></script>` +
    `<script src="${CDN.babel}"></script>`;

  // We expose the common hooks as bare names (useState, …) for convenience. But if the model's
  // OWN code already declares any of them — e.g. `const { useState } = React;` or a leftover
  // `import { useState }` that became a declaration — injecting our destructure too causes
  // "Identifier 'useState' has already been declared" and the whole render dies. So we only
  // declare the hooks the model didn't already bring into scope itself.
  const ALL_HOOKS = ['useState', 'useEffect', 'useRef', 'useMemo', 'useCallback', 'useReducer', 'useContext', 'useLayoutEffect'];
  const declares = (name: string): boolean => {
    // `const { … useState … } = React`  OR  `const useState = …`  OR `function useState`
    const inDestructure = new RegExp(`(?:const|let|var)\\s*\\{[^}]*\\b${name}\\b[^}]*\\}\\s*=`).test(code);
    const asBinding = new RegExp(`(?:const|let|var|function)\\s+${name}\\b`).test(code);
    return inDestructure || asBinding;
  };
  const hooksToInject = ALL_HOOKS.filter(h => !declares(h));
  const hookLine = hooksToInject.length
    ? `const { ${hooksToInject.join(', ')} } = React;\n`
    : '';

  // The component source + a bootstrap, both transpiled by Babel-in-the-browser.
  // Mount priority: an `export default` (captured as window.__art_default) wins, else the
  // detected named component, else a global named `App`. This covers named components,
  // `export default function Foo`, and anonymous `export default () => …`.
  const body =
    `<div id="__art_root"></div>` +
    `<script type="text/babel" data-presets="react">\n` +
    hookLine +
    `${code}\n` +
    `try {\n` +
    `  var __Art = (typeof window.__art_default !== 'undefined' && window.__art_default)\n` +
    `    || (typeof ${comp} !== 'undefined' ? ${comp} : (typeof App !== 'undefined' ? App : null));\n` +
    `  if (!__Art) throw new Error('No React component found to render (expected a component named ${comp} or a default export).');\n` +
    `  ReactDOM.createRoot(document.getElementById('__art_root')).render(React.createElement(__Art));\n` +
    `} catch (e) {\n` +
    `  document.getElementById('__art_root').innerHTML = '<pre class=\\'__art_text\\'>Render error: ' + (e && e.message) + '</pre>';\n` +
    `}\n` +
    `</script>`;
  return htmlShell(body, head);
}

function vueHarness(src: string): string {
  // Use vue3-sfc-loader to render a .vue single-file component straight from source text.