Skip to content

build: add production package pipeline - #339

Merged
draedful merged 1 commit into
v2from
codex/stage-1-4-production-build
Aug 26, 2026
Merged

build: add production package pipeline#339
draedful merged 1 commit into
v2from
codex/stage-1-4-production-build

Conversation

@draedful

@draedful draedful commented Aug 26, 2026

Copy link
Copy Markdown
Collaborator

Related issues

Summary

  • build publishable ESM bundles for the root and React entrypoints, plus ESM/CJS Playwright entrypoints and explicit public styles
  • keep runtime dependencies external and generate Node ESM/CJS-compatible declarations
  • validate the exact packed tarball with publint, ATTW, isolated vanilla and React consumers, native imports, type fixtures, and browser smoke tests
  • organize package-contract checks and fixtures by responsibility and document their maintenance boundary
  • remove unused Storybook build aliases while keeping the command used by preview workflows

Testing

  • pnpm run typecheck
  • pnpm run lint
  • pnpm --filter @gravity-ui/graph run test:package-contract
  • pnpm run build-storybook

Summary by Sourcery

Establish a production package pipeline that publishes validated multi-environment bundles and verifies the exact packed package through isolated consumer projects.

New Features:

  • Publish ESM root and React bundles, dual-format Playwright entrypoints, generated declarations, and an explicit public stylesheet.
  • Add an installed-package contract pipeline covering packed artifacts, module resolution, types, runtime interoperability, isolated vanilla and React consumers, and browser smoke tests.

Bug Fixes:

  • Ensure CSS variable observation cleanup remains safe when the container has already been removed.
  • Fix public imports and declarations for production ESM and Node-compatible resolution.

Enhancements:

  • Consolidate production output generation into the canonical build command while keeping Storybook workflows functional.
  • Organize package-contract checks and consumer fixtures by responsibility, with maintenance guidance for public package changes.
  • Make React integration optional and prevent eager React coupling in non-React consumers.

Build:

  • Replace the previous publish-specific build steps with a unified production build that emits externalized ESM/CJS bundles, declarations, styles, and documentation.

CI:

  • Run the expanded package-contract suite in E2E CI and upload package-contract browser reports and screenshots.

Documentation:

  • Document public stylesheet imports in English and Russian usage guides and React documentation.
  • Document the package-contract suite's scope, structure, and maintenance responsibilities.

Tests:

  • Add artifact allowlist, publint, ATTW, native ESM/CommonJS, type-consumer, runtime, dependency-interoperability, and installed browser-consumer validation.

Chores:

  • Remove obsolete Storybook aliases and unused build helper dependencies.

@draedful
draedful requested a review from Antamansid as a code owner August 26, 2026 13:05
@sourcery-ai

sourcery-ai Bot commented Aug 26, 2026

Copy link
Copy Markdown

Reviewer's Guide

This PR establishes a production package pipeline that generates externally-linked ESM/CJS artifacts, declarations, styles, and docs, then validates the exact npm tarball through isolated consumer, module-resolution, type, runtime, and browser contract checks while aligning public imports and package-facing source APIs.

File-Level Changes

Change Details Files
Replaced the legacy publish/build chain with a canonical production bundler that emits browser ESM, dual-mode Playwright outputs, declarations, styles, and docs.
  • Bundle root and React entrypoints with esbuild and externalize runtime and peer dependencies.
  • Emit Playwright ESM and CJS files plus matching declaration variants and Node-compatible declaration specifiers.
  • Publish an explicit stylesheet entrypoint and remove stale build artifacts before generation.
  • Consolidate package scripts and update development, Storybook, typecheck, and publish workflows around the new build.
packages/graph/scripts/build.mjs
packages/graph/package.json
packages/graph/tsconfig.json
packages/graph/tsconfig.publish.json
packages/graph/src/styles.css
packages/graph/scripts/build-docs.mjs
package.json
CLAUDE.md
Expanded the package contract suite to validate the exact packed artifact across metadata, types, runtime loading, dependency isolation, and browser consumers.
  • Build once, pack once, and install the same tarball into isolated vanilla and React consumers.
  • Assert tarball contents, exports, typesVersions, optional peers, public CSS, publint, and ATTW compatibility.
  • Exercise native ESM/CJS imports, Playwright declarations, React absence from vanilla consumers, signal interoperability, and browser smoke scenarios.
  • Reorganize checks and fixtures by responsibility and document ownership and maintenance rules.
packages/graph/tests/package-contract/run.mjs
packages/graph/tests/package-contract/checks/artifact.mjs
packages/graph/tests/package-contract/checks/types.mjs
packages/graph/tests/package-contract/checks/runtime.mjs
packages/graph/tests/package-contract/checks/browser.mjs
packages/graph/tests/package-contract/utils.mjs
packages/graph/tests/package-contract/fixtures
packages/graph/tests/package-contract/README.md
packages/graph/scripts/check-playwright-consumer-types.mjs
.github/workflows/e2e.yml
Aligned public API usage, styles, and source typing with the new package boundaries and ESM build requirements.
  • Move useLayeredLayout to the React entrypoint and update Storybook and documentation imports.
  • Add public style imports to applications, Storybook, READMEs, and usage documentation.
  • Remove source path aliases and normalize type-only imports and inferred store types for published declarations.
  • Make CSS observer cleanup safe when the container has already been cleared.
packages/graph/src/react-components/index.ts
packages/graph/src/plugins/layered/index.ts
packages/graph/src/react-components/elk/hooks/useElk.ts
packages/graph/src/store/block/selectors.ts
packages/graph/src/store/group/GroupsList.ts
packages/graph/src/plugins/cssVariables/CSSVariablesLayer.ts
apps/e2e/entry.ts
apps/e2e/react-entry.ts
apps/storybook/.storybook/preview.tsx
apps/storybook/src/stories/plugins/layered/layered.stories.tsx
packages/graph/README.md
packages/graph/README-ru.md
packages/graph/docs/react/usage.md
packages/graph/jest.config.ts

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@gravity-ui-bot

Copy link
Copy Markdown
Contributor

Preview is ready.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="packages/graph/jest.config.ts" line_range="6" />
<code_context>
   testPathIgnorePatterns: ["/node_modules/", "/build/"],
   testEnvironment: "jsdom",
-  setupFiles: ["<rootDir>/setupJest.js", "jest-canvas-mock"],
+  setupFiles: ["<rootDir>/setupJest.cjs", "jest-canvas-mock"],
   transformIgnorePatterns: [],
   moduleNameMapper: {
</code_context>
<issue_to_address>
**issue (bug_risk):** Jest now loads `setupJest.cjs` and maps CSS to `styleMock.cjs`, but this diff does not add or rename those files. Unit tests therefore fail during configuration with module-not-found errors.

**Triggers:** When the repository still contains the previously referenced `setupJest.js` and `__mocks__/styleMock.js` files.

**Suggested fix:** Rename the files to `.cjs` or keep the existing `.js` paths and add compatible CommonJS handling for the package's ESM mode.
</issue_to_address>

### Comment 2
<location path="packages/graph/src/plugins/layered/index.ts" line_range="1-2" />
<code_context>
-export { useLayeredLayout } from "./hooks/useLayeredLayout";
-export type { UseLayeredLayoutParams } from "./hooks/useLayeredLayout";
 export { layoutGraph, DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from "./layout";
 export type { LayoutGraphParams } from "./layout";
</code_context>
<issue_to_address>
**issue (bug_risk):** The public root export of `useLayeredLayout` and `UseLayeredLayoutParams` is removed, so existing consumers importing the hook from `@gravity-ui/graph` fail to compile or resolve after upgrading to this patch release.

**Triggers:** When an existing consumer imports `useLayeredLayout` from the root package entrypoint.

**Suggested fix:** Preserve the root re-export for compatibility, or make the breaking entrypoint move an explicitly versioned API change and update the package version accordingly.
</issue_to_address>

Sourcery assessment

Needs a human reviewer. 2 findings to address first, and a faulty build or export map can publish a package that downstream projects cannot import, type-check, bundle, or run, and promoting runtime dependencies changes what consumers install. Reverting the repository restores the pipeline but does not repair an already published broken package; affected consumers need a corrected release.

Blocking findings: packages/graph/jest.config.ts:6, packages/graph/src/plugins/layered/index.ts:2


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

testPathIgnorePatterns: ["/node_modules/", "/build/"],
testEnvironment: "jsdom",
setupFiles: ["<rootDir>/setupJest.js", "jest-canvas-mock"],
setupFiles: ["<rootDir>/setupJest.cjs", "jest-canvas-mock"],

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Jest now loads setupJest.cjs and maps CSS to styleMock.cjs, but this diff does not add or rename those files. Unit tests therefore fail during configuration with module-not-found errors.

Triggers: When the repository still contains the previously referenced setupJest.js and __mocks__/styleMock.js files.

Suggested fix: Rename the files to .cjs or keep the existing .js paths and add compatible CommonJS handling for the package's ESM mode.

Comment on lines -1 to -2
export { useLayeredLayout } from "./hooks/useLayeredLayout";
export type { UseLayeredLayoutParams } from "./hooks/useLayeredLayout";

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): The public root export of useLayeredLayout and UseLayeredLayoutParams is removed, so existing consumers importing the hook from @gravity-ui/graph fail to compile or resolve after upgrading to this patch release.

Triggers: When an existing consumer imports useLayeredLayout from the root package entrypoint.

Suggested fix: Preserve the root re-export for compatibility, or make the breaking entrypoint move an explicitly versioned API change and update the package version accordingly.

@draedful draedful linked an issue Aug 26, 2026 that may be closed by this pull request
8 tasks
@draedful
draedful merged commit a2db580 into v2 Aug 26, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Stage 1.4] Normalize the production build and export map

2 participants