Commit Graph
253 Commits
Author SHA1 Message Date
Oleg Isonen 3304819d7e feat: Add complete, client-compatible MCP output schemas (#5882)
## What changed\n\n- Define concrete output schemas for every public
runtime operation.\n- Expose output schemas through generated runtime
contracts and MCP tool discovery.\n- Validate runtime results against
their declared schemas, including mutation result envelopes.\n- Add
output contracts for project-session status, refresh, reset, Collection
insertion, and generated-preview tools.\n- Make every advertised MCP
output schema explicitly object-shaped for strict clients.\n- Keep
generated schema definitions at the correct root so local references
resolve during tool discovery.\n- Report the correct session operation
metadata for refresh and reset.\n- Preserve local workspace package
resolution when the local CLI builds a generated React Router
preview.\n\n## Why\n\nAgents could discover input requirements, but
several tools did not describe their returned data. Strict MCP clients
could also reject the complete tool catalog during reconnect because
output schemas were not consistently object-shaped or contained
unresolved local references.\n\n## User impact\n\n- Agents can plan
calls from complete input and output contracts.\n- MCP clients can fetch
the full Webstudio tool catalog without schema-validation failures.\n-
Agents can reliably parse and validate command results.\n- Local
generated previews continue to work for visual verification.\n\n##
Validation\n\n- Every public runtime operation has an output schema.\n-
Every advertised MCP output schema is object-shaped and has resolvable
local references.\n- A real stdio MCP client connected through the local
CLI and fetched 154 tools, including 119 valid output schemas.\n-
Runtime output contracts validate representative query and mutation
results.\n- A fresh subagent refreshed a real project session, built and
started the generated site, captured the target route with HTTP 200,
checked preview status, and stopped the server.\n- Focused project-build
tests, project-build and CLI typechecks, lint, formatting, and
generated-doc checks passed.\n
2026-07-15 12:13:14 +02:00
Oleg Isonen d186d24501 feat: Improve MCP project audits, visual verification, and dynamic content authoring (#5874)
This update helps AI agents understand, audit, and visually verify
Webstudio projects more reliably. It also adds clearer guidance for
expressions, Collections, screenshots, and responsive rendered audits.

### Audit complete projects

- Run one `audit` command across accessibility, SEO, security, assets,
styles, and performance.
- Audit the whole project or focus on a specific page, scope, or
severity.
- Receive stable findings with locations, explanations, and recommended
fixes.
- Continue large result sets through pagination without repeating
general guidance.

### Audit the rendered website

- Build and inspect the generated website, rather than relying only on
stored project data.
- Check every static page at representative mobile, tablet, and desktop
widths.
- Use one suitable viewport inside each configured breakpoint range.
- Reuse the same browser and resize pages between captures for
substantially faster audits.
- Process multiple pages concurrently while keeping resource use
bounded.
- Supply concrete examples for dynamic routes such as blog posts.
- Review and confirm unusually large screenshot plans before they run.

### Find visual and performance problems

Rendered audits can detect:

- Horizontal page overflow.
- Broken images.
- Images loaded eagerly below the fold.
- Images that are much larger than their rendered size.
- Render-blocking resources.
- Legacy font formats.
- Pages that fail to load or redirect somewhere unexpected.
- Pages captured before their layout becomes stable.

Detailed screenshots, measurements, failures, and timing evidence are
saved locally for further inspection.

### Capture generated pages directly

- Capture a project route with `webstudio screenshot --path /route`.
- Automatically generate and start a temporary production-style preview.
- Stop the temporary preview after the screenshot is captured.
- Return navigation, responsive layout, and page-size evidence with JSON
output.
- Allow external image domains needed by the generated preview.

### Reuse generated previews

- Cache generated preview builds when the project has not changed.
- Reuse preview dependencies across regenerations.
- Keep preview dependencies isolated from the user’s project
dependencies.
- Surface preview build and startup failures with useful diagnostic
output.
- Include local project assets in generated previews.

### Author Collections correctly

- Explain when Collection is required for arrays and objects.
- Guide agents to bind the complete iterable instead of one item or the
response wrapper.
- Explain how Collection repeats its children for every entry.
- Explain current-item and current-key scope.
- Preserve Webstudio’s generated Collection parameters.
- Guide agents to use stable values for repeated interactive components.

### Write expressions with fewer mistakes

- Add a dedicated `webstudio://project/expressions` reference.
- Document expression scope, supported syntax, and supported methods.
- Explain how resources, variables, Collections, actions, and `system`
values are accessed.
- Distinguish fixed values from runtime expressions.
- Provide valid examples for text, props, resource URLs, headers, query
parameters, and bodies.
- Warn agents that valid syntax does not guarantee that runtime data has
the expected shape.

### Improve agent discovery

- Make Collection and expression workflows discoverable through
`meta.guide`.
- Return Collection-specific instructions through `components.get`.
- Point relevant command schemas to the expression reference.
- Keep detailed guidance available without placing it in every tool
response.

### Improve audit reliability

- Report which rendered captures passed, found issues, failed, or were
skipped.
- Distinguish planning, preview, capture, and cleanup failures.
- Include actionable retry instructions with rendered failures.
- Preserve completed evidence when part of an audit fails.
- Detect stale or conflicting preview servers more clearly.
- Support cancellation and bounded capture timeouts.

### Improve packaged CLI verification

- Add a release-shaped CLI smoke test.
- Install the packed CLI in an isolated temporary project.
- Fail on peer-dependency warning floods.
- Verify preview, screenshots, MCP calls, rendered audits, and generated
assets.
- Confirm that generic React Router previews do not include Docker-only
image dependencies.
- Keep CLI and MCP stdout machine-readable while progress remains on
stderr.

## User Impact

Agents can now audit a real rendered Webstudio site, inspect responsive
behavior, find concrete visual and performance problems, and provide
evidence for their conclusions. They also receive much clearer
instructions when turning API data into repeated content or writing
dynamic expressions.
2026-07-14 13:52:09 +02:00
Oleg IsonenandClaude Fable 5 de23e2a888 chore: migrate toolchain to oxc (oxfmt, oxlint, rolldown-vite) and typeScript 7 (#5868)
## prettier -> oxfmt (0.58.0)

- .oxfmtrc.json generated with `oxfmt --migrate=prettier`: trailingComma
es5, printWidth 80 (oxfmt defaults to 100), sortPackageJson disabled,
.prettierignore patterns folded in (file deleted).
- ignorePatterns additionally exclude yml/yaml/toml/jsonc and
packages/cli/templates/** so oxfmt covers exactly the file set prettier
used to format (ts,tsx,js,json,css,md) and never touches user-facing
scaffolding artifacts.
- root `format` script, nano-staged pre-commit hook and the CI check
(`pnpm oxfmt --check`, replacing `prettier --cache --check` and its
actions/cache step — oxfmt checks the whole repo in ~0.7s) now run
oxfmt.
- every generator script that ran `prettier --write` on __generated__
output now runs `oxfmt` (css-data, icons, html-data, postgrest, sdk,
sdk-components-*, apps/builder tailwind preflight).
- the four scripts that used prettier's JS `format()` API write raw
source instead and their package.json scripts pipe the generated file
through the oxfmt CLI: project-build generate-docs +
generate-runtime-operation-contracts, cli generate-docs, apps/builder
generate-server-only-api-metadata. oxfmt rejects paths containing "..",
so cross-package generated files are formatted via a subshell cd into
the owning package.
- one-time reformat: oxfmt's canonical output differs from prettier on 8
repo source files (binary-operator continuation indent, import() call
wrapping, sub-pixel spacing of empty for-clauses); oxfmt honors existing
`// prettier-ignore` comments so intentional layouts are kept.
- prettier remains ONLY as a cli devDependency for the
prettier/standalone HTML normalizer inside html-to-jsx.test.ts, and
inside fixtures/ + packages/cli/templates/ (ships to scaffolded user
projects; out of scope here).
- editor config switched from esbenp.prettier-vscode to oxc.oxc-vscode
(devcontainer extension list, .vscode editor.defaultFormatter).

## oxlint 1.56 -> 1.73

- oxlint 1.73 rules-of-hooks special-cases hooks NAMED useEffectEvent:
their results may only be called from effects. Our
app/shared/hook-utils/effect-event.ts is a stable-callback helper
(useEvent pattern), intentionally called from event handlers and passed
as props. The rule is disabled via .oxlintrc.json overrides for the five
files doing this (product code untouched); note those files lose
hook-order linting entirely until the rule becomes configurable.

## TypeScript 5.8.2 -> 7.0.2 (native compiler)

- `tsc` is now the Go-based native binary; all `tsgo` script usages
(workspace packages and fixtures) renamed back to `tsc` and
@typescript/native-preview removed (the package is being phased out).
- fixes for TS7 changed defaults and stricter checks:
- `types` now defaults to [] -> base tsconfig sets "types": ["node"]
(restores the implicit-@types/node behavior of TS5).
- `rootDir` now defaults to ./ -> every tsconfig.dts.json sets
"rootDir": "./src" (TS5011 otherwise).
- import assertions removed -> cli/src/cli.ts uses `with { type: "json"
}` (TS2880).
- stricter isolatedDeclarations inference -> explicit annotations in
css-data bin/property-filter.ts (TS9010) and image image-dev.stories.tsx
(TS9013).
- declaration serialization limit -> project-build builder-runtime.ts
runtimeOperationContracts gets an explicit type (TS7056); the annotation
preserves the narrow RuntimeOperationId union.
- TS7 ships no stable programmatic API:
- react-sdk (component-generator tests drive the compiler API) aliases
its typescript devDependency to @typescript/typescript6@^6.0.2; its bin
is `tsc6`, so the package's typecheck still runs native TS7 tsc from the
workspace root.
- generate-arg-types keeps typescript 5.8.2 for react-docgen-typescript.
- fixtures/ and packages/cli/templates/ keep typescript 5.8.2
(user-facing); fixture scripts still work because plain `tsc` resolves
to their local dependency.

## vite -> rolldown-vite 7.3.1 (oxc bundler)

- global pnpm override `"vite": "npm:rolldown-vite@^7.3.1"`: the builder
app (remix v2 vite plugin works unmodified), every package vite build
and the storybook build now bundle on rolldown/oxc.
- vitest is scoped BACK to vanilla vite via `vitest>vite`,
`vite-node>vite` and `@vitest/mocker>vite` overrides because vitest
3.1's runner does not understand rolldown's SSR transform
(__vite_ssr_exportName__ ReferenceError in every suite).
- those overrides pin vite EXACTLY to 6.3.4: letting ^6.3.4 float to
6.4.3 breaks cli prebuild tests (dynamic import of a generated
app/routes/$.tsx fails to resolve under 6.4.3's loader).

## unrelated cleanup requested during review

- apps/builder commands.ts imports duplicate-tokens-group statically
instead of via dynamic import. The circular dependency the dynamic
import guarded against only exists through the command-panel barrel
(command-panel.tsx > groups/index.ts > commands-group.tsx >
commands.ts); importing the group module directly is cycle-free
(verified with madge), matching the neighboring wrap-group and
convert-group imports.

## verification

- pnpm lint, oxfmt --check: clean.
- pnpm -r typecheck (TS7 native) and pnpm dts: clean.
- pnpm -r test: all suites pass (builder 2093 tests, cli 630, react-sdk
45, project-build 11, ...).
- builder app build, full workspace build, cli build and storybook build
all succeed on rolldown-vite.

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-07-12 01:03:36 +02:00
Oleg Isonen d291e4b671 feat: Builder api runtime contracts guardrails for MCP (#5857)
This PR expands Webstudio MCP and CLI into a more complete agent
authoring interface. Agents can discover project capabilities, edit real
Webstudio content, use data/resources, verify visual output, and report
useful issues when workflows fail.

## MCP User Capabilities

- Create, update, duplicate, reorder, and delete pages.
- Create pages from templates and manage reusable page templates.
- Inspect project pages, instances, props, styles, assets, variables,
resources, and metadata.
- Insert Webstudio components and authored JSX fragments into pages.
- Edit text, props, styles, breakpoints, design tokens, and CSS
variables.
- Update page metadata, SEO fields, redirects, marketplace metadata, and
project settings.
- Create and use static data variables.
- Create and use dynamic resources fetched over HTTP.
- Use REST, GraphQL, and built-in system resources in authored pages.
- Bind data variables and resources to visible page content.
- Create resource-backed pages such as sitemap XML, structured SEO data,
and API-driven content sections.
- Preview current project state without requiring a publish step.
- Capture screenshots for visual verification.
- Verify responsive designs across desktop, tablet, and mobile
breakpoints.
- Use screenshot diff and OCR-style checks to inspect rendered output.
- Reset and refresh local MCP project state when needed.
- Discover available CLI/MCP commands from generated manuals.
- Use clearer examples for resources, data variables, JSX authoring,
previewing, and visual checks.
- Read marketplace product metadata without requiring a full project
snapshot.
- Get safer guidance when using low-level patch tools.
- Get a ready-to-copy Discord report template when MCP/CLI behavior is
confusing or broken.
2026-07-10 02:13:22 +02:00
Oleg Isonen 1ddf6b02c9 feat: API and CLI for everything (#5838)
Closes #5287
2026-07-01 01:20:50 +02:00
Oleg Isonen 82c3d83fd1 fix: optimize CLI import for large data amount (#5831)
## Summary

- Add CLI project import support from synced `.webstudio/data.json` into
another project via a destination share link.
- Move project bundle import/export contract into
`@webstudio-is/protocol`, including bundle versioning, staged upload
constants, schema validation, and fixture coverage.
- Upload project bundle data through staged TUS upload before calling
the import RPC to avoid request body limits.
- Upload referenced assets as binary files through the existing asset
upload route before importing asset rows.
- Add `--skip-assets` and `--ignore-version-check` import options.
- Add retry handling for transient missing imported asset files by
re-uploading only the reported missing assets.
- Share missing-asset import error formatting/parsing through protocol
to avoid duplicated string contracts.
- Preserve browser asset upload behavior while adding API upload
support.
- Normalize schema naming across the branch to lower-case names without
`Schema` suffix.
2026-06-23 18:50:01 +02:00
Oleg Isonen b67524bc09 fix: Fix published redirect generation (#5825) 2026-06-18 02:38:40 +02:00
Oleg Isonen bb46731243 fix: prevent self-hosted animation rerenders (#5813)
User reported:

The repeated animation issue has been fixed on Webstudio Cloud hosting,
but the bug still exists — and is actually even worse — on self-hosted
deployments, whether it's on Netlify or Vercel.

Animations sometimes play twice on the initial page load. They also
replay before navigating to another page and when clicking an anchor
link that points to a section on the same page.

Additionally, on the very first visit to the website, the first
interaction with Radix components causes all animations to replay again.
As far as I can tell, this no longer happens after assets are cached,
but the initial glitch is still noticeable and doesn't look very
polished from a user experience perspective.
2026-06-12 13:49:14 +02:00
Oleg Isonen c3d2fa7fa3 feat: Render current page state on links in preview mode (#5810)
Closes https://github.com/webstudio-is/webstudio/issues/5207
2026-06-11 21:11:11 +02:00
Oleg Isonen 2b06b2a987 fix: Fix current link state in static export (#5809)
Closes https://github.com/webstudio-is/webstudio/issues/3909

Current page state for links doesn't work with static export
2026-06-11 00:24:46 +02:00
Oleg Isonen 4d3cca74e2 fix: Enable greedy redirects (#5801)
Closes #5625

## Description

Fixes greedy redirects like:

```txt
/privat/* -> /*
2026-06-09 22:00:20 +02:00
Oleg Isonen bffc4597fe fix: Prevent outgoing page rerender during navigation (#5800)
**Description**

Prevents published pages from rerendering the outgoing generated page
during pending internal navigation.

React Router can rerender the current route while the next route loader
is pending. The generated `Page` was rendered directly inside that
route, so the entire outgoing page could rerender before the next page
appeared.

This adds a memoized `PageBoundary` keyed by `url`, so the generated
page only rerenders/remounts when the actual page URL changes. The SDK
context value is memoized by `resources`, preserving same-URL resource
updates without exposing the full page tree to unrelated
pending-navigation rerenders.

**Changes**
- Added `PageBoundary` to React Router and Remix/default HTML route
templates.
- Kept `key={url}` behavior for HTML Embed script reloads on dynamic
pages.
- Added regression tests for:
  - no outgoing page rerender while destination navigation is pending
  - same-URL resource changes still update generated page content
- Added Vitest setup for `sdk-components-react-router`.

**Verification**
```txt
pnpm --filter @webstudio-is/sdk-components-react-router test src/link.test.tsx
pnpm --filter @webstudio-is/sdk-components-react-router typecheck
pnpm --filter @webstudio-is/sdk-cli typecheck
```
2026-06-09 19:27:40 +02:00
d45d1b4274 feat: add plain text page support (#5783)
## Description

Adds support for plain text pages. Related to
https://github.com/webstudio-is/webstudio/issues/4257

This PR introduces `text` as a supported document type, stores plain
text page content in page metadata, and generates `text/plain` route
handlers for Remix and React Router templates.

It also limits HTML-specific Builder actions on text pages, excludes
XML/text pages from the generated static sitemap, and adds SDK coverage
for text document schema and sitemap behavior.

## Steps for reproduction

1. Create or edit a page in Builder.
2. Set the document type to `TEXT`.
3. Enter plain text content in page settings.
4. Build with a Remix or React Router template.
5. Open the generated text page URL, for example `/robots.txt`.
6. Expect the response body to contain the configured text content with
`Content-Type: text/plain; charset=utf-8`.
7. In Builder, expect HTML insert/wrap/convert/tag actions to be
unavailable for text pages.

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: shreyanshkotak <sk7739@nyu.edu>
Co-authored-by: Shrek <122366903+shreyanshkotak@users.noreply.github.com>
2026-05-30 12:10:39 +02:00
Oleg Isonen 16fa5ab0e3 feat: Basic authentication (#5779)
Closes https://github.com/webstudio-is/webstudio/issues/3991


Adds HTTP Basic Authentication support for published pages and
project-level `.wsauth` rules.

This introduces a new `@webstudio-is/wsauth` package that owns the
generic authentication format logic: parsing, validation, serialization,
route matching, resource generation, and request authentication. The
current supported method is `basic`, with the package structured so
additional auth methods can be added later.

Builder changes include:
- Page Settings now has an `Authentication` section for per-page Basic
Auth credentials.
- Project Settings now has an `Authentication` section for editing
`.wsauth` route rules.
- Page Settings was split into section-specific files with focused
tests.
- Auth UI shows Pro badges/info tooltips but remains editable.
- Publishing to custom domains is blocked on plans without `allowAuth`
when either page auth or project auth is configured.
- ProBadge now renders as a real pricing link and uses improved text
alignment.

Build/publish changes include:
- CLI prebuild generates and merges `.wsauth` entries.
- Published app templates enforce auth for HTML/XML routes.
- Generated auth resources are shared between build output and runtime.
2026-05-27 18:42:08 +02:00
Oleg Isonen 7a68357334 chore: rename fixtures/ssg to ssg-cloudflare-pages to prevent concurrent build race condition (#5662) 2026-03-26 01:30:24 +01:00
Oleg Isonen c66933bb18 fix: SSG template build does not generate static HTML files (#5654)
- Add 'vike prerender' to build script so prerendering runs after vite
build
- Move prerender: true from vite.config.ts to pages/+config.ts where
Vike reads it
- Remove prerender option from vike() plugin call in vite.config.ts

Fixes #5649
2026-03-23 17:36:21 +01:00
Oleg Isonen 2bf52cf0c1 chore: upgrade to Node 22 (#5603)
- Update engines.node in all package.json files
- Update .nvmrc to 22
- Update GitHub Actions workflows to node-version: 22
2026-02-05 10:25:17 +01:00
Oleg Isonen 5318d4f7a6 fix: Make WebHook forms work on Brave browser (#5590)
Brave Shields blocks our bot protection mechanism (matchMedia
fingerprinting detection), causing form submissions to silently fail.

- Added getBraveErrorHtml() in SDK that returns error message HTML
- Form component renders the error when Brave is detected

See: https://github.com/brave/brave-browser/issues/46541
2026-01-28 00:30:48 +01:00
Oleg Isonen fdee339de0 chore: Migrate to tsgo (#5578) 2026-01-20 17:25:12 +01:00
Oleg Isonen 33f720fb9f fix: Fix asset resource on published sites (#5565)
## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2026-01-15 18:26:32 +01:00
Bogdan Chadkin 883ac1eddc fix: fix redirects failing in SSG export (#5556)
Ref https://github.com/webstudio-is/webstudio/issues/5551

Redirects are supported in vike but never worked when SSG is generated
and actually failed the build. Extended ssg fixture with redirect to
catch this on CI.
2026-01-04 16:44:23 +03:00
Bogdan Chadkin 3fa0715560 fix: improve SSG output (#5555)
Ref https://github.com/webstudio-is/webstudio/issues/5389

1. **Title and meta tags (specified in page settings) are no longer
removed when page is loaded.** For this I switched to the same
components we use in cloud template.

2. **Avoid duplicating custom code**. Both server and client rendered
the same custom code and react instead of hydrating just duplicates
them. To fix this I removed custom code from client side so all scripts
and styles are rendered only once.

3. **Removed origin from og:image url.** Turns out it is not necessary
to have full url for og:image to work, all services are capable to
resolve url. We can remove it at least for static websites.

4. **SSG rendered fake url (https://url) in ld-json** which can have
unexpected results in search engines. Removed it, google should be able
to provide necessary url by itself.
2026-01-04 13:40:57 +03:00
zehjotkah c3847074cd fix: add current-date resource handler to CLI templates (#5439)
## Problem
The current-date system resource works in the Webstudio builder but
fails in published sites with "dateTime attribute is not set" errors.

## Root Cause
The CLI templates' `customFetch` functions handle the `sitemap.xml`
local resource but don't handle the `current-date` resource, causing
fetch requests to fail when sites are published.

## Solution
Added `current-date` handler to all CLI template `customFetch`
functions, following the same pattern as the existing `sitemap.xml`
handler.

## Changes
- Add current-date handler to Remix HTML/XML templates
- Add current-date handler to React Router HTML/XML templates  
- Add customFetch with current-date handler to SSG template
- Normalize dates to midnight UTC to prevent hydration mismatches

## Testing
The fix ensures that when the Time component uses `system.currentDate`,
it will work correctly in published sites, not just in the builder.
2025-11-04 18:11:50 +01:00
zehjotkah 1f2e7a25ee feat: add Current Date resource, system.pathname, and Time component custom formatting (#5434)
Closes https://github.com/webstudio-is/webstudio/issues/3510

## Summary

This PR adds a **Current Date** system resource, extends the `system`
object with a `pathname` property, and enhances the **Time component**
with custom date formatting capabilities to provide more flexibility and
prevent hydration errors.

### Key Features

1. **Current Date System Resource** - Provides normalized date/time
information that prevents React hydration errors
2. **System Pathname** - Adds `pathname` property directly to the
`system` object for easy access in expressions
3. **Time Component Custom Formatting** - Adds a `format` prop with
template tokens for flexible date/time display

## Motivation

These changes solve important use cases:

- **Current Date**: Prevents React hydration errors when displaying
dynamic dates (e.g., copyright years in footers). Previously, using `new
Date()` in expressions would cause server/client mismatch.
- **System Pathname**: Provides easy access to the current page path in
expressions without needing to parse the URL manually.
- **Custom Time Formatting**: Allows users to format dates with simple
templates (e.g., `YYYY-MM-DD`) without being limited to
`Intl.DateTimeFormat` options, and provides a simple way to exclude
specific date or time components to avoid hydration issues.

## Changes

### Current Date Resource
- Created
[`apps/builder/app/shared/$resources/current-date.server.ts`](apps/builder/app/shared/$resources/current-date.server.ts)
- Provides date fields: `year`, `month`, `day`, `iso`, `timestamp`
- All values normalized to midnight UTC (00:00:00.000Z) to prevent
hydration errors
- Registered in
[`rest.resources-loader.ts`](apps/builder/app/routes/rest.resources-loader.ts)
- Added to SystemResourceForm dropdown in UI

### System Pathname
- Added `pathname` property to
[`System`](packages/sdk/src/schema/pages.ts) type
- Updated [`system.ts`](apps/builder/app/shared/system.ts) to compute
and include pathname
- Normalized empty pathname to `'/'` for consistency
- Available in expressions as `system.pathname`

### Time Component Enhancements
- Added [`formatDate()`](packages/sdk-components-react/src/time.tsx:353)
function supporting template tokens:
  - `YYYY`, `YY` - year (4-digit, 2-digit)
  - `MM`, `M` - month (zero-padded, no padding)
  - `DD`, `D` - day (zero-padded, no padding)
  - `HH`, `H` - hours (zero-padded, no padding)
  - `mm`, `m` - minutes (zero-padded, no padding)
  - `ss`, `s` - seconds (zero-padded, no padding)
- Added `format` prop to
[`Time`](packages/sdk-components-react/src/time.tsx:386) component that
overrides `dateStyle`/`timeStyle` when provided
- Updated component logic to check for `format` prop first before
falling back to `Intl.DateTimeFormat`
- Added comprehensive tests for date formatting in
[`time.test.ts`](packages/sdk-components-react/src/time.test.ts)
- Updated component metadata in
[`time.ws.ts`](packages/sdk-components-react/src/time.ws.ts) to include
`format` in initialProps
- Example: `format="YYYY-MM-DD HH:mm:ss"` displays as "2025-11-03
18:47:25"

### Template & Fixture Updates
- Updated all CLI templates (defaults, react-router, SSG) to include
`pathname` in system objects
- Updated all fixture files (47 files total) to include `pathname` in
system objects
- All 694 tests passing
- All typecheck passing

## Usage

### Current Date Resource
Users can now add the Current Date resource from the Data Variables
panel:
1. Click + next to Data Variables
2. Select "System Resource"
3. Choose "Current Date" from the dropdown
4. Access in expressions:
   - `date.year` - for copyright year
   - `date.month` - current month (1-12)
   - `date.day` - current day (1-31)
   - `date.iso` - ISO 8601 string
   - `date.timestamp` - Unix timestamp

### System Pathname
Access the current page path directly:
- `system.pathname` - current page path (e.g., `/about`, `/blog/post-1`)

### Time Component Custom Format
Use the `format` prop for custom date/time display:
```jsx
<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD" />
// Displays: 2025-11-03

<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD HH:mm:ss" />
// Displays: 2025-11-03 18:47:25

<Time datetime="2025-11-03T18:47:25Z" format="M/D/YYYY" />
// Displays: 11/3/2025
```
Technical Notes
- Current Date values are normalized to midnight UTC to ensure
consistency throughout the day and prevent hydration mismatches
- The pathname property is computed from the request URL and normalized
to '/' when empty
- Custom format templates in the Time component are processed before
falling back to Intl.DateTimeFormat
- All changes are backward compatible
2025-11-03 23:17:53 +01:00
Bogdan Chadkin 0376075605 feat: cache resources (#5381)
Ref https://github.com/webstudio-is/webstudio/issues/4077

How it works

- Cache-Control opts in caching (Cache-Control: max-age=3600)
- cached response is matched by url, method and body
- cache is invalidated with Cache-Control change
- responses stored with the cache are not replicated across regions
- responses are not shared between projects

Link for testing
https://test-cache-hcevl.wstd.work/?message=hello
2025-08-25 17:12:20 +02:00
Bogdan Chadkin 4f7eb26b5f fix: avoid optimizing .ico in docker template (#5368)
IPX we use for image generation does not support .ico format and fails
to process it. Here I just skip image optimization for .ico and pass url
directly.
2025-08-12 01:33:59 +02:00
Bogdan Chadkin 0f13788fdb fix: support older browsers in docker template (#5346)
URL.canParse is very new method and need to be polyfilled. Docker is the
only place it is used.
2025-08-03 14:39:16 +02:00
Bogdan Chadkin 49bb819ab1 fix: support videos in self-hosted websites (#5340)
Ref
https://discord.com/channels/955905230107738152/955905231227609158/1400561168648638576

User tried to self hosted a website with video component which got
converted to /cgi/video which does not exist in self hosted targets.

Here moved the logic into own custom loader and fall back to original
url.
2025-08-03 02:12:42 +02:00
Jaya Krishna Namburu 36fdabb6c7 fix: default twitter og preview to use summary_large_image for bigger previews (#5188)
## Description

fixes #3104 

For forcing twitter to use large-card size. We need to set
`summary_large_image` meta tag in the header.

## Steps for reproduction

- Create a new project with a page.
- Set an image for the social image in the page settings.
- Deploy the site, and check the open graph preview using some of the
tools online


https://tweethunter.io/tweetpik/twitter-card-validator?url=https%3A%2F%2Fcelebrated-pony-026734.netlify.app%2F
<img width="811" alt="Screenshot 2025-05-06 at 8 41 02 PM"
src="https://github.com/user-attachments/assets/c1b0ad29-c0c1-49be-8106-a3f7ec6a1387"
/>



https://robolly.com/twitter-card-preview?url=https://celebrated-pony-026734.netlify.app

<img width="1176" alt="Screenshot 2025-05-06 at 8 40 57 PM"
src="https://github.com/user-attachments/assets/dcf59282-9f91-44fc-b775-87d4a2749e57"
/>


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
2025-05-08 15:34:20 +05:30
Jaya Krishna Namburu be6b5fa966 fix: og-image bug fix for local assets (#5184)
## Description

Currently when a project is exported using `cli` and the built using any
inbuilt templates. The `og:image` fails with local assets. As the cli is
not prefixing the `assetBaseUrl` to the image name. Which is failing to
load.

## Bug 
Deployed Url - https://og-image-bug.netlify.app/
Open GH -
https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fog-image-bug.netlify.app%2F
![Screenshot 2025-05-05 at 6 18
20 PM](https://github.com/user-attachments/assets/4e2f2739-0d9f-4254-98ec-cbb7310a2023)

### Fixed version
Deployed url - https://og-image-fix.netlify.app/
Open GH -
https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fog-image-fix.netlify.app%2F
![Screenshot 2025-05-05 at 6 19
06 PM](https://github.com/user-attachments/assets/932db416-91df-44e4-9576-3256a8d0d76a)

I am passing the `assetBaseUrl` to `ProjectSettingsMeta` inside the
`react-sdk`. And using it as prefix if defined.


## Steps for reproduction

- Create a project and add a page to it.
- Upload and use an image for the `SocialImage` section under Page
Settings.
- Deploy the site, and share it anywhere for the `og:image` to kick in
when shared.
2025-05-05 19:21:39 +04:00
Bogdan Chadkin a9c9573977 experimental: add react-router + cloudflare template (#5179)
Added react-router + cloudflare template to migrate our cloud
publishing.

This template does not support image optimization and intended only for
internal usage.
2025-05-02 19:17:49 +04:00
Bogdan Chadkin 63c54fcad6 refactor: upgrade remix and react-router (#5177)
This should fix a few vulnerabilities we get from react-router and vite
2025-05-02 00:35:20 +04:00
Bogdan Chadkin c8cbf482bf refactor: upgrade to vite 6 (#5172)
Got rid of "module" export condition everywhere.
Seems like it has very poor usage everywhere.
2025-05-01 10:32:18 +04:00
Ivan Starkov a068bc9ab4 experimental: Error support on components level (#5136)
## Description

Error toasts in components instead of failing

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2025-04-18 11:04:59 +04:00
Bogdan Chadkin 88e5119b02 feat: add project and date to published websites (#5114)
Added following attributes to html element

- data-ws-project
- data-ws-last-published

This should help debugging issues and webstudio discoverability

<img width="851" alt="image"
src="https://github.com/user-attachments/assets/a4572070-a6da-40ec-88cd-308ab7f7d22f"
/>
2025-04-10 17:23:13 +07:00
Bogdan Chadkin b1e373975d build: upgrade react-router and remix (#5106)
- security fixes
https://github.com/remix-run/remix/blob/main/CHANGELOG.md#v2164
- cloudflare support fixes
https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v750
2025-04-08 21:35:50 +07:00
Bogdan Chadkin 7a73f40889 refactor: upgrade react-router and remix (#5067)
Ref
https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v740
2025-03-28 18:16:31 +07:00
Bogdan Chadkin 5b3144d656 refactor: bump zod (#5035)
All three have minor feature updates

- zod
- zod-validation-error
- zod-to-json-schema
2025-03-25 00:17:05 +07:00
Ivan Starkov 35d0d7c8ac experimental: Breakpoint support for the Animation component (#5012)
## Description

https://animations.wstd.work/
Breakpoints Example

See on narrow screen animation is disabled.

<img width="699" alt="image"
src="https://github.com/user-attachments/assets/f464fdf3-f57a-4cf7-91a1-beb355f8a5bd"
/>



## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2025-03-18 23:30:17 +05:00
Bogdan Chadkin dd08852d43 build: upgrade typescript (#4991)
Upgraded to 5.8 and bumped all type definitions.
Enabled erasable syntax only flag and got rid from one case in
expression editor.
2025-03-13 11:21:00 +07:00
Bogdan Chadkin 8b526dc7e9 refactor: store webhook form action as resource (#4983)
Ref https://github.com/webstudio-is/webstudio/issues/4093

Here's refactoring to unlock resource UI in webhook form

Need to test in builder and on published site

1. Create webhook form in main and try to update it on this branch. So
legacy text prop should automatically migrate to resource.

2. New webhook form should create resource when type anything in action
prop
2025-03-13 11:02:44 +07:00
Ivan Starkov ca4b0f89bc experimental: Animation publishing (#4976)
## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2025-03-11 11:19:01 +05:00
Bogdan Chadkin 16258bb9b5 refactor: bump remix (#4972)
Upgraded legacy remix. The new version got vite 6 support so we could
upgrade it later.
2025-03-10 16:41:01 +07:00
Bogdan Chadkin dc9eb34289 refactor: bump react-router (#4961)
Upgrade react-router to 7.3

Removed unused dependencies in this version
https://github.com/remix-run/react-router/pull/13134
2025-03-07 16:47:59 +07:00
Bogdan Chadkin a344b34cf7 refactor: generate only asset name for published sites (#4947)
We don't really need anything from asset object on published sites
except the name to resolve the file.

Here got rid from Asset objects for favicon, fonts and backgrounds. This
should reduce client bundle where a lot of assets are used.
2025-03-05 20:54:34 +07:00
Bogdan Chadkin 238e300f6d refactor: simplify xml generation (#4942)
- got rid of svg hacks, suffix seems work well
- filtered data instead of generating empty components
- fixed sitemap in features fixture
2025-03-05 12:44:38 +07:00
Bogdan Chadkin 5fabe66c7f feat: add new vercel template based on react-router (#4825)
Had to add huge @vercel/react-router but it works now.
2025-02-13 17:02:48 +08:00
Bogdan Chadkin 196a3d3903 refactor: drop legacy netlify templates from CLI (#4833)
Remix will no longer be used for netlify. And less choice for user. Now
we have only netlify and ssg netlify templates.

<img width="374" alt="image"
src="https://github.com/user-attachments/assets/29d68ee9-afee-42a8-8e0b-90ffa7bb52de"
/>
2025-02-05 17:01:49 +07:00
Bogdan Chadkin b9f84e723c feat: add new netlify template (#4812)
- added netlify template for react-router based on
https://github.com/remix-run/react-router-templates/pull/40
- fixed images optimization on deployed site (legacy templates still
broken)
- added deploy script

Can be tested with `npx webstudio@0.0.0-c1d6247`

Gonna remove legacy netlify templates in separate PR

<img width="578" alt="image"
src="https://github.com/user-attachments/assets/2d19de74-36be-48a0-8511-9ce1665b755d"
/>
2025-02-02 12:37:47 +07:00
Bogdan Chadkin 65e9e80025 refactor: split docker template (#4809)
We want to migrate more templates to react-router
so here I split docker template into react-router and
react-router-docker. Image processing, dockerfile and node environment
are left as docker specifics.
2025-01-31 17:55:59 +07:00