Skip to content

feat: add standalone browser bundle - #261

Merged
mridang merged 1 commit into
mainfrom
worktree-web-component-standalone
Jun 12, 2026
Merged

feat: add standalone browser bundle#261
mridang merged 1 commit into
mainfrom
worktree-web-component-standalone

Conversation

@mridang

@mridang mridang commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Adds a single self-contained standalone.mjs so the components work on a plain HTML page with just:

<script type="module" src=".../standalone.mjs"></script>

No import map or bundler needed — lit, liquidjs, dompurify, and lucide are bundled in. The normal @zitadel/components build is unchanged. Reachable via the ./standalone export and unpkg/jsdelivr.

@vercel

vercel Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nextgen Error Error Jun 12, 2026 1:57am

Request Review

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

@mridang must be a member of the zitadel team on Vercel to deploy.
- Click here to add @mridang to the team.
- If you initiated this build, request access.

Learn more about collaboration on Vercel and other options here.

chatgpt-codex-connector[bot]
chatgpt-codex-connector Bot reviewed Jun 11, 2026
View reviewed changes

@chatgpt-codex-connector chatgpt-codex-connector 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1ef2dc20d8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/components/package.json Outdated
@mridang
mridang force-pushed the worktree-web-component-standalone branch from 1ef2dc2 to 1f69531 Compare June 11, 2026 10:12
@mridang
mridang force-pushed the worktree-web-component-standalone branch from 1f69531 to 90b9e6a Compare June 11, 2026 10:14
@mridang mridang changed the title feat(components): add standalone browser bundle feat: add standalone browser bundle Jun 11, 2026
@mridang mridang self-assigned this Jun 11, 2026
@mridang
mridang requested a review from Copilot June 11, 2026 10:15
@mridang mridang added the enhancement New feature or request label Jun 11, 2026
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR adds a new “standalone” browser-friendly build artifact for @zitadel/components, intended to be loadable directly from a plain HTML page via <script type="module" src=".../standalone.mjs">, while keeping the existing library build behavior unchanged for bundler-based consumers.

Changes:

  • Extend the tsdown build to produce an additional self-contained dist/standalone.mjs bundle with third-party runtime deps inlined.
  • Expose the standalone bundle via package.json (./standalone export plus unpkg/jsdelivr entrypoints).
  • Add a changeset to publish this as a minor version update.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
packages/components/tsdown.config.ts Split build config into library vs. standalone builds; standalone inlines third-party deps.
packages/components/package.json Add unpkg/jsdelivr fields and a new ./standalone export.
.changeset/components-standalone-bundle.md Changeset describing the new standalone bundle as a minor feature.

Comment thread packages/components/package.json Outdated
@mridang
mridang requested a review from Copilot June 11, 2026 10:57
@mridang
mridang force-pushed the worktree-web-component-standalone branch from 90b9e6a to 030daa9 Compare June 11, 2026 10:57
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@mridang
mridang requested review from bastionstack and Copilot June 11, 2026 11:02
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@mridang
mridang requested a review from Copilot June 11, 2026 11:06
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@mridang
mridang requested a review from Copilot June 11, 2026 11:51
Copilot AI reviewed Jun 11, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@mridang
feat: add standalone browser bundle
43f732a 
Inline lit/liquidjs/dompurify/lucide into a single dist/standalone.mjs so the
components load on a plain HTML page via <script type=module> with no import
map. The library build is unchanged; exposed via the ./standalone export and
unpkg/jsdelivr.
@mridang
mridang force-pushed the worktree-web-component-standalone branch from 17cebc1 to 43f732a Compare June 12, 2026 01:56
@mridang
mridang merged commit 09aa2b1 into main Jun 12, 2026
14 of 15 checks passed
@mridang
mridang deleted the worktree-web-component-standalone branch June 12, 2026 02:18
@zitadel-nextgen-release zitadel-nextgen-release Bot mentioned this pull request Jun 12, 2026
Merged
@mridang mridang mentioned this pull request Jun 12, 2026
Merged
peintnermax pushed a commit that referenced this pull request Jun 12, 2026
@mridang
feat: configure web components declaratively via HTML attributes (#266)
01aed1e 
Configure `<zitadel-login>` and `<zitadel-logout>` from HTML via
`project-id`, `proxy-path`, and `url` attributes, so they work on a
plain page with no JS and no `configureZitadel()`. The `project`
property and the global config still win, in that order.

Also fixes the standalone bundle from #261, which was built for Node and
emitted an `import "node:module"` that browsers reject. It now builds
for the browser, so `dist/standalone.mjs` loads as a plain module
script.

Verified with 150 unit tests and in a real browser.
fforootd pushed a commit that referenced this pull request Jun 12, 2026
@zitadel-nextgen-release @github-actions
chore: version packages (alpha) (#256)
17edaf8 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @zitadel/components@0.1.0-alpha.2

### Minor Changes

- [#266](#266)
[`01aed1e`](01aed1e)
Thanks [@mridang](https://github.com/mridang)! - Allow configuring
`<zitadel-login>` and `<zitadel-logout>` declaratively from HTML via
`project-id`, `proxy-path`, and `url` attributes, so the components work
on a plain page without JS or `configureZitadel()`. Configuration
resolves in this order, highest first: the `project` property, then the
`configureZitadel()` global, then the HTML attributes. The existing JS
paths still win — the attributes are the no-JS fallback.

Also fix the standalone bundle so it loads in a browser: it was built
for Node and emitted an `import "node:module"` that browsers cannot
resolve. It is now built for the browser, so `dist/standalone.mjs` is
genuinely self-contained.

- [#261](#261)
[`09aa2b1`](09aa2b1)
Thanks [@mridang](https://github.com/mridang)! - Add a standalone
browser bundle (`dist/standalone.mjs`) so the components work on a plain
HTML page via `<script type="module">` with no import map or bundler.
Exposed via the `./standalone` export and `unpkg`/`jsdelivr`.

### Patch Changes

- [#231](#231)
[`ce89c59`](ce89c59)
Thanks [@bastionstack](https://github.com/bastionstack)! - Tidy the web
components package: align README/AGENTS docs with the real SDK-config
API, adopt idiomatic Lit patterns (`classMap`, `live()`, `ifDefined`,
`@query`, a shared `emit()` helper), make post-step focus deterministic
via `updateComplete` instead of `requestAnimationFrame`, centralise
SDK/API resolution in a `resolveApi()` helper, correct the manifest
registry (e.g. `zl-passkey` `method` attribute), and expand unit/browser
test coverage.

- [#253](#253)
[`c097a5f`](c097a5f)
Thanks [@vitorbari](https://github.com/vitorbari)! - Add English labels
for the `givenName`, `familyName`, and `dateOfBirth`
  fields the default register step now collects.
## @zitadel/cli@0.1.0-alpha.2

### Patch Changes

- [#265](#265)
[`ceb74d5`](ceb74d5)
Thanks [@fforootd](https://github.com/fforootd)! - Derive alpha local
runtime images from the installed CLI version, pin generated SDK
dependencies to the same alpha train, and emit exact-version follow-up
commands for reproducible tester reports.

- [#255](#255)
[`ca53f61`](ca53f61)
Thanks [@fforootd](https://github.com/fforootd)! - Make doctor
local-runtime checks advisory for cloud setup, harden fresh Next.js
scaffolding, auto-install setup dependencies, normalize public follow-up
commands, and avoid assuming Next.js in local-runtime setup guidance.

- Updated dependencies
[[`b0094f4`](b0094f4)]:
  - @zitadel/api@0.1.0-alpha.2
## @zitadel/api@0.1.0-alpha.2

### Patch Changes

- [#268](#268)
[`b0094f4`](b0094f4)
Thanks [@mridang](https://github.com/mridang)! - Fix
`configureZitadel()` so its state survives when more than one copy of
`@zitadel/api/config` ends up loaded — the standalone components bundle
inlines its own copy, and dual-package hazards / duplicate
`node_modules` trees in a monorepo can load a second copy alongside the
app's. Previously each module instance held its own `let
currentProject`, so a `configureZitadel()` call in one was invisible to
`getZitadelConfig()` in another and the components silently saw no
config. The slot now lives on `globalThis` under a `Symbol.for(...)`
key, which the global symbol registry resolves to the same symbol
identity in every copy of the module evaluated in the same JS realm —
separate realms (iframes, Node `vm` contexts, worker threads) still have
their own registries.
## @zitadel/sdk-angular@0.1.0-alpha.2

### Patch Changes

- Updated dependencies
[[`b0094f4`](b0094f4),
[`ce89c59`](ce89c59),
[`01aed1e`](01aed1e),
[`09aa2b1`](09aa2b1),
[`c097a5f`](c097a5f)]:
  - @zitadel/api@0.1.0-alpha.2
  - @zitadel/components@0.1.0-alpha.2
## @zitadel/sdk-next@0.1.0-alpha.2

### Patch Changes

- Updated dependencies
[[`b0094f4`](b0094f4),
[`ce89c59`](ce89c59),
[`01aed1e`](01aed1e),
[`09aa2b1`](09aa2b1),
[`c097a5f`](c097a5f)]:
  - @zitadel/api@0.1.0-alpha.2
  - @zitadel/components@0.1.0-alpha.2
  - @zitadel/sdk-core@0.1.0-alpha.2
## @zitadel/sdk-nuxt@0.1.0-alpha.2

### Patch Changes

- Updated dependencies
[[`b0094f4`](b0094f4),
[`ce89c59`](ce89c59),
[`01aed1e`](01aed1e),
[`09aa2b1`](09aa2b1),
[`c097a5f`](c097a5f)]:
  - @zitadel/api@0.1.0-alpha.2
  - @zitadel/components@0.1.0-alpha.2
  - @zitadel/sdk-core@0.1.0-alpha.2
## @zitadel/sdk-react@0.1.0-alpha.2

### Patch Changes

- Updated dependencies
[[`b0094f4`](b0094f4),
[`ce89c59`](ce89c59),
[`01aed1e`](01aed1e),
[`09aa2b1`](09aa2b1),
[`c097a5f`](c097a5f)]:
  - @zitadel/api@0.1.0-alpha.2
  - @zitadel/components@0.1.0-alpha.2
  - @zitadel/sdk-core@0.1.0-alpha.2
## @zitadel/sdk-vue@0.1.0-alpha.2

### Patch Changes

- Updated dependencies
[[`b0094f4`](b0094f4),
[`ce89c59`](ce89c59),
[`01aed1e`](01aed1e),
[`09aa2b1`](09aa2b1),
[`c097a5f`](c097a5f)]:
  - @zitadel/api@0.1.0-alpha.2
  - @zitadel/components@0.1.0-alpha.2
  - @zitadel/sdk-core@0.1.0-alpha.2
## @zitadel/sdk-core@0.1.0-alpha.2

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@chatgpt-codex-connector chatgpt-codex-connector[bot] chatgpt-codex-connector[bot] left review comments
@bastionstack bastionstack bastionstack approved these changes

Assignees

@mridang mridang

Labels

enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mridang @bastionstack