mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-04 11:09:07 +09:00
Bogdan Chadkin
9e23dc9580
Ref https://github.com/webstudio-is/webstudio/issues/2647 Here refactored overflow UI to update "overflow-x" and "overflow-y" longhands instead of "overflow" shorthand. Removed "overflow" from advanced panel suggestions. Added support for expanding overflow shorthand for webflow copy paste. And implemented very basic migrations utility which always run after data is loaded from server and sends patch for expanding overflow longhands. Patch is not sent when no properties are modified. Though eventually we will need to support versioning to avoid executing old migrations. <img width="279" alt="Screenshot 2024-06-18 at 19 33 21" src="https://github.com/webstudio-is/webstudio/assets/5635476/ce44385e-3316-4e34-bc9c-5f790cbdcd4f">
94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import type { Asset, WebstudioData } from "@webstudio-is/sdk";
|
|
import type { Build, MarketplaceProduct } from "@webstudio-is/project-build";
|
|
import {
|
|
$assets,
|
|
$breakpoints,
|
|
$dataSources,
|
|
$instances,
|
|
$marketplaceProduct,
|
|
$pages,
|
|
$props,
|
|
$resources,
|
|
$styleSourceSelections,
|
|
$styleSources,
|
|
$styles,
|
|
} from "./nano-states";
|
|
|
|
export type BuilderData = WebstudioData & {
|
|
marketplaceProduct: undefined | MarketplaceProduct;
|
|
};
|
|
|
|
export const getBuilderData = (): BuilderData => {
|
|
const pages = $pages.get();
|
|
if (pages === undefined) {
|
|
throw Error(`Cannot get webstudio data with empty pages`);
|
|
}
|
|
return {
|
|
pages,
|
|
instances: $instances.get(),
|
|
props: $props.get(),
|
|
dataSources: $dataSources.get(),
|
|
resources: $resources.get(),
|
|
breakpoints: $breakpoints.get(),
|
|
styleSourceSelections: $styleSourceSelections.get(),
|
|
styleSources: $styleSources.get(),
|
|
styles: $styles.get(),
|
|
assets: $assets.get(),
|
|
marketplaceProduct: $marketplaceProduct.get(),
|
|
};
|
|
};
|
|
|
|
export const setBuilderData = (data: BuilderData) => {
|
|
$assets.set(data.assets);
|
|
$instances.set(data.instances);
|
|
$dataSources.set(data.dataSources);
|
|
$resources.set(data.resources);
|
|
// props should be after data sources to compute logic
|
|
$props.set(data.props);
|
|
$pages.set(data.pages);
|
|
$styleSources.set(data.styleSources);
|
|
$styleSourceSelections.set(data.styleSourceSelections);
|
|
$breakpoints.set(data.breakpoints);
|
|
$styles.set(data.styles);
|
|
$marketplaceProduct.set(data.marketplaceProduct);
|
|
};
|
|
|
|
export const loadBuilderData = async ({
|
|
projectId,
|
|
signal,
|
|
}: {
|
|
projectId: string;
|
|
signal: AbortSignal;
|
|
}) => {
|
|
const currentUrl = new URL(location.href);
|
|
const authToken = currentUrl.searchParams.get("authToken");
|
|
const url = new URL(`/rest/data/${projectId}`, currentUrl.origin);
|
|
if (authToken) {
|
|
url.searchParams.set("authToken", authToken);
|
|
}
|
|
const response = await fetch(url, { signal });
|
|
if (response.ok) {
|
|
const data = (await response.json()) as {
|
|
assets: Asset[];
|
|
build: Build;
|
|
marketplaceProduct: undefined | MarketplaceProduct;
|
|
};
|
|
const { assets, build } = data;
|
|
return {
|
|
version: build.version,
|
|
assets: new Map(assets.map((asset) => [asset.id, asset])),
|
|
instances: new Map(build.instances),
|
|
dataSources: new Map(build.dataSources),
|
|
resources: new Map(build.resources),
|
|
props: new Map(build.props),
|
|
pages: build.pages,
|
|
styleSources: new Map(build.styleSources),
|
|
styleSourceSelections: new Map(build.styleSourceSelections),
|
|
breakpoints: new Map(build.breakpoints),
|
|
styles: new Map(build.styles),
|
|
marketplaceProduct: build.marketplaceProduct,
|
|
} satisfies BuilderData & { version: number };
|
|
}
|
|
throw Error("Unable to load builder data");
|
|
};
|