fix(website): Strip multiline imports in playground transformCode (#4031)

* fix(website): Strip multiline imports in playground transformCode

Prettier-wrapped import { … } from blocks were only partially removed,
leaving orphan } from '…' syntax that broke GraphQL live previews.
Also include Playground tests in the ReactDOM Jest project.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(website): Match side-effect imports in transformCode

Require whitespace or a from-clause before the module string so
import './setup' is stripped like other static imports.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(ci): Persist Playground tests without breaking CircleCI workspace

CircleCI attach_workspace omits website/, so a hard-coded Jest root
failed validation. Only add the Playground root when present, and
persist that path so ReactDOM CI still runs transformCode/codeModel.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ntucker

.circleci/config.yml

@@ -130,6 +130,8 @@ jobs:
             - project/node_modules
             - project/packages
             - project/scripts
+            # Playground unit tests (transformCode, codeModel); rest of website omitted
+            - project/website/src/components/Playground
             - project/.yarnrc.yml
             - project/babel.config.js
             - project/eslint.config.mjs

jest.config.js

@@ -1,6 +1,7 @@
 process.env.ANANSI_JEST_BABELCONFIG = 'babel.config.js';
 process.env.ANANSI_JEST_TSCONFIG = 'tsconfig.test.json';
 
+const fs = require('fs');
 const path = require('path');
 
 const baseConfig = {
@@ -56,11 +57,24 @@ const packages = [
   'test',
 ];
 
+// CircleCI persist_to_workspace omits most of website/; only include this root
+// when the tree is present (full checkout / when CI persists Playground).
+const playgroundRoot = path.join(
+  __dirname,
+  'website/src/components/Playground',
+);
+const reactDomRoots = [
+  ...packages.map(pkgName => `<rootDir>/packages/${pkgName}/src`),
+  ...(fs.existsSync(playgroundRoot) ?
+    ['<rootDir>/website/src/components/Playground']
+  : []),
+];
+
 const projects = [
   {
     ...baseConfig,
     rootDir: __dirname,
-    roots: packages.map(pkgName => `<rootDir>/packages/${pkgName}/src`),
+    roots: reactDomRoots,
     displayName: 'ReactDOM',
     setupFiles: ['<rootDir>/scripts/testSetup.js'],
     testEnvironment: 'jsdom',

website/src/components/Playground/__tests__/transformCode.test.ts

@@ -0,0 +1,105 @@
+/// <reference types="jest" />
+
+import transformCode from '../transformCode';
+
+describe('transformCode', () => {
+  test('removes Prettier multiline imports', () => {
+    expect(
+      transformCode(
+        `import {
+  GQLEntity,
+  GQLEndpoint,
+} from '@data-client/graphql';
+const x = 1;`,
+      ),
+    ).toBe('const x = 1;');
+  });
+
+  test('removes type-bearing and relative imports', () => {
+    expect(
+      transformCode(
+        `import { type Post, PostResource } from './resources';
+render(PostResource);`,
+      ),
+    ).toBe('render(PostResource);');
+  });
+
+  test('removes side-effect and import-type statements', () => {
+    expect(
+      transformCode(
+        `import './setup'
+import type { User } from './types'
+const user: User = value;`,
+      ),
+    ).toBe('const user: User = value;');
+  });
+
+  test('strips export prefixes from declarations', () => {
+    expect(
+      transformCode(
+        `export type User = { id: string };
+export const user = {} as User;
+export default function App() {}`,
+      ),
+    ).toBe(
+      `type User = { id: string };
+const user = {} as User;
+function App() {}`,
+    );
+  });
+
+  test('removes export lists and re-exports', () => {
+    expect(
+      transformCode(
+        `const X = 1;
+export { X };
+export type { User };
+export { Y } from './y';
+export * from './z';`,
+      ),
+    ).toBe('const X = 1;\n');
+  });
+
+  test('keeps GraphQL resource bodies after multiline import strip', () => {
+    const input = `import {
+  GQLEndpoint,
+  GQLEntity,
+  Collection,
+} from '@data-client/graphql';
+
+const gql = new GQLEndpoint('/');
+
+export class User extends GQLEntity {
+  name = '';
+}
+
+export const UserResource = {
+  get: gql.query(\`query GetUser($id: ID!) { user(id: $id) { id } }\`, { user: User }),
+};`;
+
+    const output = transformCode(input);
+    expect(output).not.toMatch(/\bfrom\b/);
+    expect(output).toContain("const gql = new GQLEndpoint('/');");
+    expect(output).toContain('class User extends GQLEntity');
+    expect(output).toContain('const UserResource =');
+    expect(output.trimStart().startsWith('GQLEndpoint')).toBe(false);
+  });
+
+  test('does not strip import.meta usage', () => {
+    expect(
+      transformCode(
+        `const url = import.meta.url;
+const x = 'value';`,
+      ),
+    ).toBe(
+      `const url = import.meta.url;
+const x = 'value';`,
+    );
+  });
+
+  test('removes namespace re-exports', () => {
+    expect(transformCode(`export * as ns from './x';\nconst y = 1;`)).toBe(
+      'const y = 1;',
+    );
+  });
+});

website/src/components/Playground/transformCode.ts

@@ -1,4 +1,22 @@
-const transformCode = (code: string) => {
-  return code.replaceAll(/^(import.+$|export (default )?)/gm, '');
-};
-export default transformCode;
+/**
+ * Strip ESM import/export wrappers so concatenated playground documents can run
+ * under react-live (scope provides package imports; earlier files provide locals).
+ *
+ * Order matters: remove complete import / export-list declarations first, then
+ * strip `export` prefixes from remaining declarations. That keeps Prettier
+ * multiline imports from leaving orphan `} from '…'` syntax.
+ */
+const STATIC_IMPORT =
+  /^[ \t]*import(?!\s*\(|\.)(?:(?:[\s\S]*?\bfrom\s*)|\s+)["'][^"'\r\n]+["']\s*;?[ \t]*(?:\/\/[^\r\n]*)?(?:\r?\n|$)/gm;
+
+const EXPORT_LIST =
+  /^[ \t]*export\s+(?:type\s+)?(?:\{[\s\S]*?\}|\*(?:\s+as\s+\w+)?)\s*(?:from\s*["'][^"'\r\n]+["'])?\s*;?[ \t]*(?:\/\/[^\r\n]*)?(?:\r?\n|$)/gm;
+
+const EXPORT_PREFIX = /^[ \t]*export[ \t]+(?:default[ \t]+)?/gm;
+
+export default function transformCode(code: string): string {
+  return code
+    .replaceAll(STATIC_IMPORT, '')
+    .replaceAll(EXPORT_LIST, '')
+    .replaceAll(EXPORT_PREFIX, '');
+}