@webiny/website-builder-sdk 6.4.0-beta.3 → 6.4.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ContentSdk.d.ts +1 -0
- package/ContentSdk.js +1 -1
- package/ContentSdk.js.map +1 -1
- package/ElementFactory.js +4 -1
- package/ElementFactory.js.map +1 -1
- package/PreviewDocument.d.ts +1 -0
- package/PreviewDocument.js +3 -0
- package/PreviewDocument.js.map +1 -1
- package/PreviewSdk.d.ts +2 -1
- package/PreviewSdk.js +5 -2
- package/PreviewSdk.js.map +1 -1
- package/StylesBindingsProcessor.js +3 -2
- package/StylesBindingsProcessor.js.map +1 -1
- package/Theme.js +1 -0
- package/Theme.js.map +1 -1
- package/defaultBreakpoints.js +23 -3
- package/defaultBreakpoints.js.map +1 -1
- package/package.json +7 -6
- package/types/WebsiteBuilderTheme.d.ts +7 -0
- package/types.d.ts +1 -0
package/ContentSdk.d.ts
CHANGED
package/ContentSdk.js
CHANGED
|
@@ -43,7 +43,7 @@ class ContentSdk {
|
|
|
43
43
|
let liveSdk = new LiveSdk(dataProvider);
|
|
44
44
|
if (config.preview && !environment.isEditing()) {
|
|
45
45
|
this.isPreview = true;
|
|
46
|
-
liveSdk = new PreviewSdk(dataProvider, liveSdk);
|
|
46
|
+
liveSdk = new PreviewSdk(dataProvider, liveSdk, config.previewParams);
|
|
47
47
|
}
|
|
48
48
|
const theme = Theme.from(config.theme ?? {});
|
|
49
49
|
if (environment.isClient()) viewportManager.setBreakpoints(theme.breakpoints);
|
package/ContentSdk.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentSdk.js","sources":["../src/ContentSdk.ts"],"sourcesContent":["import type {\n Component,\n IContentSdk,\n ListPagesOptions,\n ListPagesResult,\n PublicPage,\n PublicRedirect,\n ResolvedComponent\n} from \"~/types.js\";\nimport { environment } from \"./Environment.js\";\nimport { LiveSdk } from \"./LiveSdk.js\";\nimport { EditingSdk } from \"./EditingSdk.js\";\nimport { ComponentResolver, type ResolveElementParams } from \"~/ComponentResolver.js\";\nimport { PreviewSdk } from \"./PreviewSdk.js\";\nimport { componentRegistry } from \"~/ComponentRegistry.js\";\nimport { ApiClient } from \"~/dataProviders/ApiClient.js\";\nimport { DefaultDataProvider } from \"~/dataProviders/DefaultDataProvider.js\";\nimport type { WebsiteBuilderThemeInput } from \"./types/WebsiteBuilderTheme.js\";\nimport { Theme } from \"./Theme.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\nimport type { IRedirects } from \"~/IRedirects.js\";\nimport { RedirectsProvider } from \"~/dataProviders/RedirectsProvider.js\";\n\nexport type ApiConfig = {\n apiKey: string;\n apiHost: string;\n apiTenant: string;\n};\n\nexport type ContentSDKConfig = ApiConfig & {\n preview?: boolean;\n theme?: WebsiteBuilderThemeInput;\n};\n\nclass InternalContentSdk implements IContentSdk, IRedirects {\n private activeSdk: IContentSdk;\n private editingSdk: EditingSdk | undefined;\n private redirectsProvider: IRedirects;\n\n constructor(redirectsProvider: IRedirects, liveSdk: LiveSdk, editingSdk?: EditingSdk) {\n this.redirectsProvider = redirectsProvider;\n this.activeSdk = editingSdk ?? liveSdk;\n this.editingSdk = editingSdk;\n }\n\n getEditingSdk() {\n return this.editingSdk;\n }\n\n async getPage(path: string): Promise<PublicPage | null> {\n return this.activeSdk.getPage(path);\n }\n\n listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n return this.activeSdk.listPages(options);\n }\n\n getAllRedirects(): Promise<Map<string, PublicRedirect>> {\n return this.redirectsProvider.getAllRedirects();\n }\n\n getRedirectByPath(path: string): Promise<PublicRedirect | undefined> {\n return this.redirectsProvider.getRedirectByPath(path);\n }\n}\n\nexport class ContentSdk implements IContentSdk, IRedirects {\n protected sdk?: InternalContentSdk;\n private isPreview = false;\n private lastConfig: any;\n\n public init(config: ContentSDKConfig, afterInit?: () => void): void {\n const configHash = JSON.stringify(config);\n if (this.lastConfig && this.lastConfig === configHash) {\n return;\n }\n\n this.lastConfig = configHash;\n const apiClient = new ApiClient(config.apiHost, config.apiKey, config.apiTenant);\n\n const dataProvider = new DefaultDataProvider({ apiClient });\n\n let liveSdk: IContentSdk = new LiveSdk(dataProvider);\n\n if (config.preview && !environment.isEditing()) {\n this.isPreview = true;\n liveSdk = new PreviewSdk(dataProvider, liveSdk);\n }\n\n const theme = Theme.from(config.theme ?? {});\n\n if (environment.isClient()) {\n viewportManager.setBreakpoints(theme.breakpoints);\n }\n\n let editingSdk;\n if (environment.isEditing()) {\n editingSdk = new EditingSdk(liveSdk, theme);\n }\n\n this.sdk = new InternalContentSdk(\n new RedirectsProvider(apiClient),\n liveSdk as LiveSdk,\n editingSdk\n );\n\n if (typeof afterInit === \"function\") {\n afterInit();\n }\n }\n\n public getEditingSdk() {\n this.assertInitialized();\n return this.sdk.getEditingSdk();\n }\n\n public getPage(path: string) {\n this.assertInitialized();\n return this.sdk.getPage(path);\n }\n\n public listPages(options?: ListPagesOptions) {\n this.assertInitialized();\n return this.sdk.listPages(options);\n }\n\n public async getAllRedirects() {\n this.assertInitialized();\n return this.sdk.getAllRedirects();\n }\n\n getRedirectByPath(path: string): Promise<PublicRedirect | undefined> {\n this.assertInitialized();\n return this.sdk.getRedirectByPath(path);\n }\n\n registerComponent(blueprint: Component): void {\n this.assertInitialized();\n componentRegistry.register(blueprint);\n }\n\n resolveElement(params: ResolveElementParams): ResolvedComponent[] | null {\n this.assertInitialized();\n return new ComponentResolver(componentRegistry).resolve(params);\n }\n\n isEditing() {\n return environment.isEditing();\n }\n\n isPreviewing() {\n return this.isPreview;\n }\n\n private assertInitialized(): asserts this is this & {\n sdk: IContentSdk;\n } {\n if (!this.sdk) {\n throw new Error(`ContentSdk has not been initialized!`);\n }\n }\n}\n\nexport const contentSdk = new ContentSdk();\n"],"names":["InternalContentSdk","redirectsProvider","liveSdk","editingSdk","path","options","ContentSdk","config","afterInit","configHash","JSON","apiClient","ApiClient","dataProvider","DefaultDataProvider","LiveSdk","environment","PreviewSdk","theme","Theme","viewportManager","EditingSdk","RedirectsProvider","blueprint","componentRegistry","params","ComponentResolver","Error","contentSdk"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ContentSdk.js","sources":["../src/ContentSdk.ts"],"sourcesContent":["import type {\n Component,\n IContentSdk,\n ListPagesOptions,\n ListPagesResult,\n PublicPage,\n PublicRedirect,\n ResolvedComponent\n} from \"~/types.js\";\nimport { environment } from \"./Environment.js\";\nimport { LiveSdk } from \"./LiveSdk.js\";\nimport { EditingSdk } from \"./EditingSdk.js\";\nimport { ComponentResolver, type ResolveElementParams } from \"~/ComponentResolver.js\";\nimport { PreviewSdk } from \"./PreviewSdk.js\";\nimport { componentRegistry } from \"~/ComponentRegistry.js\";\nimport { ApiClient } from \"~/dataProviders/ApiClient.js\";\nimport { DefaultDataProvider } from \"~/dataProviders/DefaultDataProvider.js\";\nimport type { WebsiteBuilderThemeInput } from \"./types/WebsiteBuilderTheme.js\";\nimport { Theme } from \"./Theme.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\nimport type { IRedirects } from \"~/IRedirects.js\";\nimport { RedirectsProvider } from \"~/dataProviders/RedirectsProvider.js\";\n\nexport type ApiConfig = {\n apiKey: string;\n apiHost: string;\n apiTenant: string;\n};\n\nexport type ContentSDKConfig = ApiConfig & {\n preview?: boolean;\n previewParams?: string;\n theme?: WebsiteBuilderThemeInput;\n};\n\nclass InternalContentSdk implements IContentSdk, IRedirects {\n private activeSdk: IContentSdk;\n private editingSdk: EditingSdk | undefined;\n private redirectsProvider: IRedirects;\n\n constructor(redirectsProvider: IRedirects, liveSdk: LiveSdk, editingSdk?: EditingSdk) {\n this.redirectsProvider = redirectsProvider;\n this.activeSdk = editingSdk ?? liveSdk;\n this.editingSdk = editingSdk;\n }\n\n getEditingSdk() {\n return this.editingSdk;\n }\n\n async getPage(path: string): Promise<PublicPage | null> {\n return this.activeSdk.getPage(path);\n }\n\n listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n return this.activeSdk.listPages(options);\n }\n\n getAllRedirects(): Promise<Map<string, PublicRedirect>> {\n return this.redirectsProvider.getAllRedirects();\n }\n\n getRedirectByPath(path: string): Promise<PublicRedirect | undefined> {\n return this.redirectsProvider.getRedirectByPath(path);\n }\n}\n\nexport class ContentSdk implements IContentSdk, IRedirects {\n protected sdk?: InternalContentSdk;\n private isPreview = false;\n private lastConfig: any;\n\n public init(config: ContentSDKConfig, afterInit?: () => void): void {\n const configHash = JSON.stringify(config);\n if (this.lastConfig && this.lastConfig === configHash) {\n return;\n }\n\n this.lastConfig = configHash;\n const apiClient = new ApiClient(config.apiHost, config.apiKey, config.apiTenant);\n\n const dataProvider = new DefaultDataProvider({ apiClient });\n\n let liveSdk: IContentSdk = new LiveSdk(dataProvider);\n\n if (config.preview && !environment.isEditing()) {\n this.isPreview = true;\n liveSdk = new PreviewSdk(dataProvider, liveSdk, config.previewParams);\n }\n\n const theme = Theme.from(config.theme ?? {});\n\n if (environment.isClient()) {\n viewportManager.setBreakpoints(theme.breakpoints);\n }\n\n let editingSdk;\n if (environment.isEditing()) {\n editingSdk = new EditingSdk(liveSdk, theme);\n }\n\n this.sdk = new InternalContentSdk(\n new RedirectsProvider(apiClient),\n liveSdk as LiveSdk,\n editingSdk\n );\n\n if (typeof afterInit === \"function\") {\n afterInit();\n }\n }\n\n public getEditingSdk() {\n this.assertInitialized();\n return this.sdk.getEditingSdk();\n }\n\n public getPage(path: string) {\n this.assertInitialized();\n return this.sdk.getPage(path);\n }\n\n public listPages(options?: ListPagesOptions) {\n this.assertInitialized();\n return this.sdk.listPages(options);\n }\n\n public async getAllRedirects() {\n this.assertInitialized();\n return this.sdk.getAllRedirects();\n }\n\n getRedirectByPath(path: string): Promise<PublicRedirect | undefined> {\n this.assertInitialized();\n return this.sdk.getRedirectByPath(path);\n }\n\n registerComponent(blueprint: Component): void {\n this.assertInitialized();\n componentRegistry.register(blueprint);\n }\n\n resolveElement(params: ResolveElementParams): ResolvedComponent[] | null {\n this.assertInitialized();\n return new ComponentResolver(componentRegistry).resolve(params);\n }\n\n isEditing() {\n return environment.isEditing();\n }\n\n isPreviewing() {\n return this.isPreview;\n }\n\n private assertInitialized(): asserts this is this & {\n sdk: IContentSdk;\n } {\n if (!this.sdk) {\n throw new Error(`ContentSdk has not been initialized!`);\n }\n }\n}\n\nexport const contentSdk = new ContentSdk();\n"],"names":["InternalContentSdk","redirectsProvider","liveSdk","editingSdk","path","options","ContentSdk","config","afterInit","configHash","JSON","apiClient","ApiClient","dataProvider","DefaultDataProvider","LiveSdk","environment","PreviewSdk","theme","Theme","viewportManager","EditingSdk","RedirectsProvider","blueprint","componentRegistry","params","ComponentResolver","Error","contentSdk"],"mappings":"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"}
|
package/ElementFactory.js
CHANGED
|
@@ -115,7 +115,10 @@ class ElementFactory {
|
|
|
115
115
|
}
|
|
116
116
|
getComponentManifest(componentName) {
|
|
117
117
|
const manifest = this.components[componentName];
|
|
118
|
-
if (!manifest)
|
|
118
|
+
if (!manifest) {
|
|
119
|
+
const registered = Object.keys(this.components).join(", ");
|
|
120
|
+
throw new Error(`Component "${componentName}" not registered. Registered components: ${registered}`);
|
|
121
|
+
}
|
|
119
122
|
return manifest;
|
|
120
123
|
}
|
|
121
124
|
createElement(componentName, parentId, slot) {
|
package/ElementFactory.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementFactory.js","sources":["../src/ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n DocumentElement,\n ComponentManifest,\n InputValueBinding,\n StyleValueBinding,\n CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n ComponentManifestToAstConverter,\n type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n display: \"flex\",\n flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n componentName: string;\n parentId: string;\n slot: string;\n index?: number;\n bindings?: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n overrides?: {\n [breakpoint: string]: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n };\n };\n };\n}\n\ninterface GenerateOperationsParams {\n element: DocumentElement;\n inputsAst: InputAstNode[];\n operations: ElementFactoryOperations;\n bindings: {\n inputs: Record<string, any>;\n styles: Record<string, any>;\n overrides: {\n [breakpoint: string]: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n };\n };\n };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n elementId: string;\n inputsAst: InputAstNode[];\n bindings: {\n inputs: Record<string, any>;\n styles: Record<string, any>;\n };\n operations: ElementFactoryOperations;\n ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n addElement: (element: DocumentElement) => IDocumentOperation;\n addToParent: (element: DocumentElement, index?: number) => IDocumentOperation;\n setInputBinding: (\n elementId: string,\n bindingPath: string,\n binding: InputValueBinding\n ) => IDocumentOperation;\n setStyleBinding: (\n elementId: string,\n bindingPath: string,\n binding: StyleValueBinding\n ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n addElement: (element: DocumentElement) => {\n return new DocumentOperations.AddElement(element);\n },\n addToParent: (element: DocumentElement, index?: number) => {\n return new DocumentOperations.AddToParent(element, index);\n },\n setInputBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n },\n setStyleBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n }\n};\n\nexport class ElementFactory {\n constructor(private components: Record<string, ComponentManifest>) {}\n\n public createElementFromComponent({\n componentName,\n parentId,\n slot,\n index,\n bindings\n }: ElementFactoryCreateElementParams) {\n const { element, componentManifest, inputsAst } = this.createElement(\n componentName,\n parentId,\n slot\n );\n\n const documentOps: IDocumentOperation[] = [\n defaultOperations.addElement(element),\n defaultOperations.addToParent(element, index)\n ];\n\n documentOps.push(\n ...this.generateOperations({\n element,\n inputsAst,\n bindings: {\n inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n styles: withDefaultStyles(\n bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n ),\n overrides: bindings?.overrides ?? {}\n },\n operations: defaultOperations\n })\n );\n\n return { element, operations: documentOps };\n }\n\n public generateOperations({\n element,\n inputsAst,\n bindings,\n operations\n }: GenerateOperationsParams): IDocumentOperation[] {\n const ops = this.generateOperationsFromBindings({\n elementId: element.id,\n inputsAst,\n bindings,\n operations,\n ignoreDefaultValues: false\n });\n\n if (bindings.overrides) {\n for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n ops.push(\n ...this.generateOperationsFromBindings({\n elementId: element.id,\n inputsAst,\n bindings: {\n inputs: overrides.inputs ?? {},\n styles: overrides.styles ?? {}\n },\n operations: {\n ...operations,\n setInputBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetInputBindingOverride(\n elementId,\n bindingPath,\n binding,\n breakpoint\n );\n },\n setStyleBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetStyleBindingOverride(\n elementId,\n bindingPath,\n binding,\n breakpoint\n );\n }\n },\n ignoreDefaultValues: true\n })\n );\n }\n }\n\n return ops;\n }\n\n private generateOperationsFromBindings({\n elementId,\n inputsAst,\n bindings,\n operations,\n ignoreDefaultValues\n }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n const inputData = bindings.inputs;\n const traverser = new ComponentInputTraverser(inputsAst);\n\n const ops: IDocumentOperation[] = [];\n\n traverser.traverse(inputData, (node, path, value) => {\n const isCreateElement = value?.action === \"CreateElement\";\n const isList = node.list;\n const isObject = node.type === \"object\";\n\n if (isCreateElement) {\n const factory = new ElementFactory(this.components);\n const newElement = factory.createElementFromComponent({\n componentName: value.params.component,\n // undefined index = append to end of the slot array\n index: isList ? undefined : 0,\n slot: path,\n parentId: elementId,\n bindings: value.params\n });\n\n const newElementId = newElement.element.id;\n\n ops.push(...newElement.operations);\n\n if (isList) {\n // For list slots, AddToParent already manages the static array.\n // We only set metadata here.\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n type: node.type,\n translatable: node.input.translatable,\n list: node.list\n })\n );\n } else {\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n static: newElementId,\n type: node.type,\n translatable: node.input.translatable,\n list: node.list\n })\n );\n }\n } else if (isObject && isList) {\n return;\n } else {\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n static: ignoreDefaultValues\n ? undefined\n : (value ?? node.input.defaultValue),\n type: node.type,\n list: node.list,\n translatable: node.input.translatable\n })\n );\n }\n });\n\n // Process styles\n for (const key in bindings.styles) {\n ops.push(\n operations.setStyleBinding(elementId, key, {\n static: bindings.styles[key]\n })\n );\n }\n\n return ops;\n }\n\n private getComponentManifest(componentName: string): ComponentManifest {\n const manifest = this.components[componentName];\n if (!manifest) {\n throw new Error(`Component \"${componentName}\" not registered.`);\n }\n\n return manifest;\n }\n\n private createElement(componentName: string, parentId: string, slot: string) {\n const element: DocumentElement = {\n type: \"Webiny/Element\",\n id: generateElementId(),\n parent: { id: parentId, slot },\n component: { name: componentName }\n };\n\n const componentManifest = this.getComponentManifest(componentName);\n const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n return {\n element,\n inputsAst,\n componentManifest\n };\n }\n}\n"],"names":["defaultStyles","withDefaultStyles","styles","defaultOperations","element","DocumentOperations","index","elementId","bindingPath","binding","ElementFactory","components","componentName","parentId","slot","bindings","componentManifest","inputsAst","documentOps","operations","ops","breakpoint","overrides","Object","ignoreDefaultValues","inputData","traverser","ComponentInputTraverser","node","path","value","isCreateElement","isList","isObject","factory","newElement","undefined","newElementId","generateElementId","key","manifest","Error","ComponentManifestToAstConverter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElementFactory.js","sources":["../src/ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n DocumentElement,\n ComponentManifest,\n InputValueBinding,\n StyleValueBinding,\n CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n ComponentManifestToAstConverter,\n type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n display: \"flex\",\n flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n componentName: string;\n parentId: string;\n slot: string;\n index?: number;\n bindings?: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n overrides?: {\n [breakpoint: string]: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n };\n };\n };\n}\n\ninterface GenerateOperationsParams {\n element: DocumentElement;\n inputsAst: InputAstNode[];\n operations: ElementFactoryOperations;\n bindings: {\n inputs: Record<string, any>;\n styles: Record<string, any>;\n overrides: {\n [breakpoint: string]: {\n inputs?: Record<string, any>;\n styles?: Record<string, any>;\n };\n };\n };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n elementId: string;\n inputsAst: InputAstNode[];\n bindings: {\n inputs: Record<string, any>;\n styles: Record<string, any>;\n };\n operations: ElementFactoryOperations;\n ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n addElement: (element: DocumentElement) => IDocumentOperation;\n addToParent: (element: DocumentElement, index?: number) => IDocumentOperation;\n setInputBinding: (\n elementId: string,\n bindingPath: string,\n binding: InputValueBinding\n ) => IDocumentOperation;\n setStyleBinding: (\n elementId: string,\n bindingPath: string,\n binding: StyleValueBinding\n ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n addElement: (element: DocumentElement) => {\n return new DocumentOperations.AddElement(element);\n },\n addToParent: (element: DocumentElement, index?: number) => {\n return new DocumentOperations.AddToParent(element, index);\n },\n setInputBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n },\n setStyleBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n }\n};\n\nexport class ElementFactory {\n constructor(private components: Record<string, ComponentManifest>) {}\n\n public createElementFromComponent({\n componentName,\n parentId,\n slot,\n index,\n bindings\n }: ElementFactoryCreateElementParams) {\n const { element, componentManifest, inputsAst } = this.createElement(\n componentName,\n parentId,\n slot\n );\n\n const documentOps: IDocumentOperation[] = [\n defaultOperations.addElement(element),\n defaultOperations.addToParent(element, index)\n ];\n\n documentOps.push(\n ...this.generateOperations({\n element,\n inputsAst,\n bindings: {\n inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n styles: withDefaultStyles(\n bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n ),\n overrides: bindings?.overrides ?? {}\n },\n operations: defaultOperations\n })\n );\n\n return { element, operations: documentOps };\n }\n\n public generateOperations({\n element,\n inputsAst,\n bindings,\n operations\n }: GenerateOperationsParams): IDocumentOperation[] {\n const ops = this.generateOperationsFromBindings({\n elementId: element.id,\n inputsAst,\n bindings,\n operations,\n ignoreDefaultValues: false\n });\n\n if (bindings.overrides) {\n for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n ops.push(\n ...this.generateOperationsFromBindings({\n elementId: element.id,\n inputsAst,\n bindings: {\n inputs: overrides.inputs ?? {},\n styles: overrides.styles ?? {}\n },\n operations: {\n ...operations,\n setInputBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetInputBindingOverride(\n elementId,\n bindingPath,\n binding,\n breakpoint\n );\n },\n setStyleBinding: (elementId, bindingPath, binding) => {\n return new DocumentOperations.SetStyleBindingOverride(\n elementId,\n bindingPath,\n binding,\n breakpoint\n );\n }\n },\n ignoreDefaultValues: true\n })\n );\n }\n }\n\n return ops;\n }\n\n private generateOperationsFromBindings({\n elementId,\n inputsAst,\n bindings,\n operations,\n ignoreDefaultValues\n }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n const inputData = bindings.inputs;\n const traverser = new ComponentInputTraverser(inputsAst);\n\n const ops: IDocumentOperation[] = [];\n\n traverser.traverse(inputData, (node, path, value) => {\n const isCreateElement = value?.action === \"CreateElement\";\n const isList = node.list;\n const isObject = node.type === \"object\";\n\n if (isCreateElement) {\n const factory = new ElementFactory(this.components);\n const newElement = factory.createElementFromComponent({\n componentName: value.params.component,\n // undefined index = append to end of the slot array\n index: isList ? undefined : 0,\n slot: path,\n parentId: elementId,\n bindings: value.params\n });\n\n const newElementId = newElement.element.id;\n\n ops.push(...newElement.operations);\n\n if (isList) {\n // For list slots, AddToParent already manages the static array.\n // We only set metadata here.\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n type: node.type,\n translatable: node.input.translatable,\n list: node.list\n })\n );\n } else {\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n static: newElementId,\n type: node.type,\n translatable: node.input.translatable,\n list: node.list\n })\n );\n }\n } else if (isObject && isList) {\n return;\n } else {\n ops.push(\n operations.setInputBinding(elementId, path, {\n id: generateElementId(),\n static: ignoreDefaultValues\n ? undefined\n : (value ?? node.input.defaultValue),\n type: node.type,\n list: node.list,\n translatable: node.input.translatable\n })\n );\n }\n });\n\n // Process styles\n for (const key in bindings.styles) {\n ops.push(\n operations.setStyleBinding(elementId, key, {\n static: bindings.styles[key]\n })\n );\n }\n\n return ops;\n }\n\n private getComponentManifest(componentName: string): ComponentManifest {\n const manifest = this.components[componentName];\n if (!manifest) {\n const registered = Object.keys(this.components).join(\", \");\n throw new Error(\n `Component \"${componentName}\" not registered. Registered components: ${registered}`\n );\n }\n\n return manifest;\n }\n\n private createElement(componentName: string, parentId: string, slot: string) {\n const element: DocumentElement = {\n type: \"Webiny/Element\",\n id: generateElementId(),\n parent: { id: parentId, slot },\n component: { name: componentName }\n };\n\n const componentManifest = this.getComponentManifest(componentName);\n const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n return {\n element,\n inputsAst,\n componentManifest\n };\n }\n}\n"],"names":["defaultStyles","withDefaultStyles","styles","defaultOperations","element","DocumentOperations","index","elementId","bindingPath","binding","ElementFactory","components","componentName","parentId","slot","bindings","componentManifest","inputsAst","documentOps","operations","ops","breakpoint","overrides","Object","ignoreDefaultValues","inputData","traverser","ComponentInputTraverser","node","path","value","isCreateElement","isList","isObject","factory","newElement","undefined","newElementId","generateElementId","key","manifest","registered","Error","ComponentManifestToAstConverter"],"mappings":"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"}
|
package/PreviewDocument.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare class PreviewDocument {
|
|
2
2
|
readonly props: Record<string, string>;
|
|
3
3
|
private constructor();
|
|
4
|
+
static createFromParams(params: string): PreviewDocument;
|
|
4
5
|
static createFromWindow(): PreviewDocument;
|
|
5
6
|
static createFromHeaders(): Promise<PreviewDocument>;
|
|
6
7
|
matches(params: Record<string, string>): boolean;
|
package/PreviewDocument.js
CHANGED
|
@@ -9,6 +9,9 @@ class PreviewDocument {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
|
+
static createFromParams(params) {
|
|
13
|
+
return new PreviewDocument("wb", new URLSearchParams(params));
|
|
14
|
+
}
|
|
12
15
|
static createFromWindow() {
|
|
13
16
|
const query = new URLSearchParams(window.location.search);
|
|
14
17
|
return new PreviewDocument("wb", query);
|
package/PreviewDocument.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewDocument.js","sources":["../src/PreviewDocument.ts"],"sourcesContent":["import { getHeadersProvider } from \"./headersProvider.js\";\n\nexport class PreviewDocument {\n public readonly props: Record<string, string>;\n\n private constructor(prefix: string, query: URLSearchParams) {\n this.props = {};\n query.forEach((value, key) => {\n if (key.startsWith(prefix + \".\")) {\n const strippedKey = key.slice(prefix.length + 1); // +1 for the dot\n this.props[strippedKey] = value as string;\n }\n });\n }\n\n static createFromWindow(): PreviewDocument {\n const query = new URLSearchParams(window.location.search);\n return new PreviewDocument(\"wb\", query);\n }\n\n static async createFromHeaders(): Promise<PreviewDocument> {\n const headersProvider = getHeadersProvider();\n const headers = await headersProvider();\n const previewFromHeaders = headers.get(\"X-Preview-Params\");\n\n return new PreviewDocument(\"wb\", new URLSearchParams(previewFromHeaders ?? \"\"));\n }\n\n matches(params: Record<string, string>) {\n for (const [key, value] of Object.entries(params)) {\n if (this.props[key] !== value) {\n return false;\n }\n }\n return true;\n }\n\n getId() {\n return this.props.id;\n }\n}\n"],"names":["PreviewDocument","prefix","query","value","key","strippedKey","URLSearchParams","window","headersProvider","getHeadersProvider","headers","previewFromHeaders","
|
|
1
|
+
{"version":3,"file":"PreviewDocument.js","sources":["../src/PreviewDocument.ts"],"sourcesContent":["import { getHeadersProvider } from \"./headersProvider.js\";\n\nexport class PreviewDocument {\n public readonly props: Record<string, string>;\n\n private constructor(prefix: string, query: URLSearchParams) {\n this.props = {};\n query.forEach((value, key) => {\n if (key.startsWith(prefix + \".\")) {\n const strippedKey = key.slice(prefix.length + 1); // +1 for the dot\n this.props[strippedKey] = value as string;\n }\n });\n }\n\n static createFromParams(params: string): PreviewDocument {\n return new PreviewDocument(\"wb\", new URLSearchParams(params));\n }\n\n static createFromWindow(): PreviewDocument {\n const query = new URLSearchParams(window.location.search);\n return new PreviewDocument(\"wb\", query);\n }\n\n static async createFromHeaders(): Promise<PreviewDocument> {\n const headersProvider = getHeadersProvider();\n const headers = await headersProvider();\n const previewFromHeaders = headers.get(\"X-Preview-Params\");\n\n return new PreviewDocument(\"wb\", new URLSearchParams(previewFromHeaders ?? \"\"));\n }\n\n matches(params: Record<string, string>) {\n for (const [key, value] of Object.entries(params)) {\n if (this.props[key] !== value) {\n return false;\n }\n }\n return true;\n }\n\n getId() {\n return this.props.id;\n }\n}\n"],"names":["PreviewDocument","prefix","query","value","key","strippedKey","params","URLSearchParams","window","headersProvider","getHeadersProvider","headers","previewFromHeaders","Object"],"mappings":";AAEO,MAAMA;IAGT,YAAoBC,MAAc,EAAEC,KAAsB,CAAE;QACxD,IAAI,CAAC,KAAK,GAAG,CAAC;QACdA,MAAM,OAAO,CAAC,CAACC,OAAOC;YAClB,IAAIA,IAAI,UAAU,CAACH,SAAS,MAAM;gBAC9B,MAAMI,cAAcD,IAAI,KAAK,CAACH,OAAO,MAAM,GAAG;gBAC9C,IAAI,CAAC,KAAK,CAACI,YAAY,GAAGF;YAC9B;QACJ;IACJ;IAEA,OAAO,iBAAiBG,MAAc,EAAmB;QACrD,OAAO,IAAIN,gBAAgB,MAAM,IAAIO,gBAAgBD;IACzD;IAEA,OAAO,mBAAoC;QACvC,MAAMJ,QAAQ,IAAIK,gBAAgBC,OAAO,QAAQ,CAAC,MAAM;QACxD,OAAO,IAAIR,gBAAgB,MAAME;IACrC;IAEA,aAAa,oBAA8C;QACvD,MAAMO,kBAAkBC;QACxB,MAAMC,UAAU,MAAMF;QACtB,MAAMG,qBAAqBD,QAAQ,GAAG,CAAC;QAEvC,OAAO,IAAIX,gBAAgB,MAAM,IAAIO,gBAAgBK,sBAAsB;IAC/E;IAEA,QAAQN,MAA8B,EAAE;QACpC,KAAK,MAAM,CAACF,KAAKD,MAAM,IAAIU,OAAO,OAAO,CAACP,QACtC,IAAI,IAAI,CAAC,KAAK,CAACF,IAAI,KAAKD,OACpB,OAAO;QAGf,OAAO;IACX;IAEA,QAAQ;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE;IACxB;AACJ"}
|
package/PreviewSdk.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import type { IContentSdk, IDataProvider, ListPagesOptions, ListPagesResult, Pub
|
|
|
2
2
|
export declare class PreviewSdk implements IContentSdk {
|
|
3
3
|
private liveSdk;
|
|
4
4
|
private dataProvider;
|
|
5
|
-
|
|
5
|
+
private previewParams;
|
|
6
|
+
constructor(dataProvider: IDataProvider, liveSdk: IContentSdk, previewParams?: string);
|
|
6
7
|
getPage(path: string): Promise<PublicPage | null>;
|
|
7
8
|
listPages(options?: ListPagesOptions): Promise<ListPagesResult>;
|
|
8
9
|
}
|
package/PreviewSdk.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { PreviewDocument } from "./PreviewDocument.js";
|
|
2
|
+
import { environment } from "./Environment.js";
|
|
2
3
|
class PreviewSdk {
|
|
3
|
-
constructor(dataProvider, liveSdk){
|
|
4
|
+
constructor(dataProvider, liveSdk, previewParams){
|
|
4
5
|
this.liveSdk = liveSdk;
|
|
5
6
|
this.dataProvider = dataProvider;
|
|
7
|
+
this.previewParams = previewParams;
|
|
6
8
|
}
|
|
7
9
|
async getPage(path) {
|
|
8
|
-
|
|
10
|
+
let previewDocument;
|
|
11
|
+
previewDocument = this.previewParams ? PreviewDocument.createFromParams(this.previewParams) : environment.isClient() ? PreviewDocument.createFromWindow() : await PreviewDocument.createFromHeaders();
|
|
9
12
|
if (!previewDocument.matches({
|
|
10
13
|
type: "page",
|
|
11
14
|
path
|
package/PreviewSdk.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewSdk.js","sources":["../src/PreviewSdk.ts"],"sourcesContent":["import type {\n IContentSdk,\n IDataProvider,\n ListPagesOptions,\n ListPagesResult,\n PublicPage\n} from \"~/types.js\";\nimport { PreviewDocument } from \"~/PreviewDocument.js\";\n\nexport class PreviewSdk implements IContentSdk {\n private liveSdk: IContentSdk;\n private dataProvider: IDataProvider;\n\n constructor(dataProvider: IDataProvider, liveSdk: IContentSdk) {\n this.liveSdk = liveSdk;\n this.dataProvider = dataProvider;\n }\n\n async getPage(path: string): Promise<PublicPage | null> {\n
|
|
1
|
+
{"version":3,"file":"PreviewSdk.js","sources":["../src/PreviewSdk.ts"],"sourcesContent":["import type {\n IContentSdk,\n IDataProvider,\n ListPagesOptions,\n ListPagesResult,\n PublicPage\n} from \"~/types.js\";\nimport { PreviewDocument } from \"~/PreviewDocument.js\";\nimport { environment } from \"./Environment.js\";\n\nexport class PreviewSdk implements IContentSdk {\n private liveSdk: IContentSdk;\n private dataProvider: IDataProvider;\n private previewParams: string | undefined;\n\n constructor(dataProvider: IDataProvider, liveSdk: IContentSdk, previewParams?: string) {\n this.liveSdk = liveSdk;\n this.dataProvider = dataProvider;\n this.previewParams = previewParams;\n }\n\n async getPage(path: string): Promise<PublicPage | null> {\n let previewDocument: PreviewDocument;\n\n if (this.previewParams) {\n // Params were passed directly via init config (server-side SSR path).\n previewDocument = PreviewDocument.createFromParams(this.previewParams);\n } else if (environment.isClient()) {\n previewDocument = PreviewDocument.createFromWindow();\n } else {\n previewDocument = await PreviewDocument.createFromHeaders();\n }\n\n if (!previewDocument.matches({ type: \"page\", path })) {\n return this.liveSdk.getPage(path);\n }\n return this.dataProvider.getPageById(previewDocument.getId());\n }\n\n async listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n return this.liveSdk.listPages(options);\n }\n}\n"],"names":["PreviewSdk","dataProvider","liveSdk","previewParams","path","previewDocument","PreviewDocument","environment","options"],"mappings":";;AAUO,MAAMA;IAKT,YAAYC,YAA2B,EAAEC,OAAoB,EAAEC,aAAsB,CAAE;QACnF,IAAI,CAAC,OAAO,GAAGD;QACf,IAAI,CAAC,YAAY,GAAGD;QACpB,IAAI,CAAC,aAAa,GAAGE;IACzB;IAEA,MAAM,QAAQC,IAAY,EAA8B;QACpD,IAAIC;QAIAA,kBAFA,IAAI,CAAC,aAAa,GAEAC,gBAAgB,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAC9DC,YAAY,QAAQ,KACTD,gBAAgB,gBAAgB,KAEhC,MAAMA,gBAAgB,iBAAiB;QAG7D,IAAI,CAACD,gBAAgB,OAAO,CAAC;YAAE,MAAM;YAAQD;QAAK,IAC9C,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAACA;QAEhC,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAACC,gBAAgB,KAAK;IAC9D;IAEA,MAAM,UAAUG,OAA0B,EAA4B;QAClE,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAACA;IAClC;AACJ"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import set from "lodash/set.js";
|
|
2
2
|
import unset from "lodash/unset.js";
|
|
3
|
+
import { toJS } from "mobx";
|
|
3
4
|
import { InheritedValueResolver } from "./InheritedValueResolver.js";
|
|
4
5
|
import { StylesUpdater } from "./StylesUpdater.js";
|
|
5
6
|
class StylesBindingsProcessor {
|
|
@@ -35,11 +36,11 @@ class StylesBindingsProcessor {
|
|
|
35
36
|
}
|
|
36
37
|
getBaseStyles() {
|
|
37
38
|
const baseStyles = {
|
|
38
|
-
styles: structuredClone(this.rawBindings.styles) ?? {},
|
|
39
|
+
styles: structuredClone(toJS(this.rawBindings.styles)) ?? {},
|
|
39
40
|
overrides: {}
|
|
40
41
|
};
|
|
41
42
|
if (this.rawBindings.overrides) {
|
|
42
|
-
for (const [bp, overrides] of Object.entries(this.rawBindings.overrides))if (overrides.styles) set(baseStyles, `overrides.${bp}.styles`, structuredClone(this.rawBindings.overrides[bp].styles));
|
|
43
|
+
for (const [bp, overrides] of Object.entries(this.rawBindings.overrides))if (overrides.styles) set(baseStyles, `overrides.${bp}.styles`, structuredClone(toJS(this.rawBindings.overrides[bp].styles)));
|
|
43
44
|
}
|
|
44
45
|
return baseStyles;
|
|
45
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StylesBindingsProcessor.js","sources":["../src/StylesBindingsProcessor.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport unset from \"lodash/unset.js\";\nimport type { DocumentElementBindings, DocumentElementStyleBindings } from \"~/types.js\";\nimport { InheritedValueResolver } from \"~/InheritedValueResolver.js\";\nimport { StylesUpdater } from \"./StylesUpdater.js\";\n\ntype DeepBindings = Record<string, any>;\n\nexport type ElementStylesBindings = {\n styles: DocumentElementStyleBindings;\n overrides: {\n [breakpoint: string]: {\n styles: DocumentElementStyleBindings;\n };\n };\n};\n\n/**\n * Handles deep-to-flat and flat-to-deep conversion of style bindings,\n * with breakpoint inheritance awareness.\n */\nexport class StylesBindingsProcessor {\n private breakpoints: string[];\n private rawBindings: DocumentElementBindings;\n private elementId: string;\n\n constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings) {\n this.elementId = elementId;\n this.breakpoints = breakpoints;\n this.rawBindings = rawBindings;\n }\n\n /**\n * Converts flat style bindings into deep styles object (removes `.static`).\n */\n public toDeepStyles(styles: DocumentElementBindings[\"styles\"] = {}): DeepBindings {\n const result: DeepBindings = {};\n Object.keys(styles).forEach(key => {\n // @ts-expect-error Style keys cannot be indexed with a string.\n result[key] = styles[key].static;\n });\n return result;\n }\n\n /**\n * Flattens deep styles object into flat bindings with `.static` wrappers.\n * Skips overrides where the value matches inherited parent breakpoint.\n */\n public createUpdate(styles: DeepBindings, currentBreakpoint: string) {\n const rebuilt = this.getBaseStyles();\n const valueResolver = new InheritedValueResolver(this.breakpoints, breakpoint => {\n if (this.isBaseBreakpoint(breakpoint)) {\n return this.rawBindings.styles;\n }\n return this.rawBindings?.overrides?.[breakpoint]?.styles;\n });\n\n // Collect original keys for the breakpoint\n const originalStyles = this.isBaseBreakpoint(currentBreakpoint)\n ? this.rawBindings.styles || {}\n : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};\n\n const newKeys = new Set(Object.keys(styles));\n const originalKeys = Object.keys(originalStyles);\n\n // Remove keys that no longer exist\n for (const key of originalKeys) {\n if (!newKeys.has(key)) {\n if (this.isBaseBreakpoint(currentBreakpoint)) {\n unset(rebuilt, `styles.${key}`);\n } else {\n unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n }\n }\n }\n\n for (const [key, value] of Object.entries(styles)) {\n if (this.isBaseBreakpoint(currentBreakpoint)) {\n set(rebuilt, `styles.${key}.static`, value);\n } else {\n const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);\n\n if (value !== inheritedValue) {\n set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);\n } else {\n unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n }\n }\n }\n\n return new StylesUpdater(this.elementId, rebuilt);\n }\n\n private getBaseStyles(): ElementStylesBindings {\n const baseStyles: ElementStylesBindings = {\n styles: structuredClone(this.rawBindings.styles) ?? {},\n overrides: {}\n };\n\n // Clone existing overrides if present, to avoid losing breakpoint overrides\n if (this.rawBindings.overrides) {\n for (const [bp, overrides] of Object.entries(this.rawBindings.overrides)) {\n if (overrides.styles) {\n set(\n baseStyles,\n `overrides.${bp}.styles`,\n structuredClone(this.rawBindings.overrides[bp].styles)\n );\n }\n }\n }\n\n return baseStyles;\n }\n\n private isBaseBreakpoint(name: string): boolean {\n return this.breakpoints.indexOf(name) === 0;\n }\n}\n"],"names":["StylesBindingsProcessor","elementId","breakpoints","rawBindings","styles","result","Object","key","currentBreakpoint","rebuilt","valueResolver","InheritedValueResolver","breakpoint","originalStyles","newKeys","Set","originalKeys","unset","value","set","inheritedValue","StylesUpdater","baseStyles","structuredClone","bp","overrides","name"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StylesBindingsProcessor.js","sources":["../src/StylesBindingsProcessor.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport unset from \"lodash/unset.js\";\nimport { toJS } from \"mobx\";\nimport type { DocumentElementBindings, DocumentElementStyleBindings } from \"~/types.js\";\nimport { InheritedValueResolver } from \"~/InheritedValueResolver.js\";\nimport { StylesUpdater } from \"./StylesUpdater.js\";\n\ntype DeepBindings = Record<string, any>;\n\nexport type ElementStylesBindings = {\n styles: DocumentElementStyleBindings;\n overrides: {\n [breakpoint: string]: {\n styles: DocumentElementStyleBindings;\n };\n };\n};\n\n/**\n * Handles deep-to-flat and flat-to-deep conversion of style bindings,\n * with breakpoint inheritance awareness.\n */\nexport class StylesBindingsProcessor {\n private breakpoints: string[];\n private rawBindings: DocumentElementBindings;\n private elementId: string;\n\n constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings) {\n this.elementId = elementId;\n this.breakpoints = breakpoints;\n this.rawBindings = rawBindings;\n }\n\n /**\n * Converts flat style bindings into deep styles object (removes `.static`).\n */\n public toDeepStyles(styles: DocumentElementBindings[\"styles\"] = {}): DeepBindings {\n const result: DeepBindings = {};\n Object.keys(styles).forEach(key => {\n // @ts-expect-error Style keys cannot be indexed with a string.\n result[key] = styles[key].static;\n });\n return result;\n }\n\n /**\n * Flattens deep styles object into flat bindings with `.static` wrappers.\n * Skips overrides where the value matches inherited parent breakpoint.\n */\n public createUpdate(styles: DeepBindings, currentBreakpoint: string) {\n const rebuilt = this.getBaseStyles();\n const valueResolver = new InheritedValueResolver(this.breakpoints, breakpoint => {\n if (this.isBaseBreakpoint(breakpoint)) {\n return this.rawBindings.styles;\n }\n return this.rawBindings?.overrides?.[breakpoint]?.styles;\n });\n\n // Collect original keys for the breakpoint\n const originalStyles = this.isBaseBreakpoint(currentBreakpoint)\n ? this.rawBindings.styles || {}\n : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};\n\n const newKeys = new Set(Object.keys(styles));\n const originalKeys = Object.keys(originalStyles);\n\n // Remove keys that no longer exist\n for (const key of originalKeys) {\n if (!newKeys.has(key)) {\n if (this.isBaseBreakpoint(currentBreakpoint)) {\n unset(rebuilt, `styles.${key}`);\n } else {\n unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n }\n }\n }\n\n for (const [key, value] of Object.entries(styles)) {\n if (this.isBaseBreakpoint(currentBreakpoint)) {\n set(rebuilt, `styles.${key}.static`, value);\n } else {\n const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);\n\n if (value !== inheritedValue) {\n set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);\n } else {\n unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n }\n }\n }\n\n return new StylesUpdater(this.elementId, rebuilt);\n }\n\n private getBaseStyles(): ElementStylesBindings {\n const baseStyles: ElementStylesBindings = {\n styles: structuredClone(toJS(this.rawBindings.styles)) ?? {},\n overrides: {}\n };\n\n // Clone existing overrides if present, to avoid losing breakpoint overrides\n if (this.rawBindings.overrides) {\n for (const [bp, overrides] of Object.entries(this.rawBindings.overrides)) {\n if (overrides.styles) {\n set(\n baseStyles,\n `overrides.${bp}.styles`,\n structuredClone(toJS(this.rawBindings.overrides[bp].styles))\n );\n }\n }\n }\n\n return baseStyles;\n }\n\n private isBaseBreakpoint(name: string): boolean {\n return this.breakpoints.indexOf(name) === 0;\n }\n}\n"],"names":["StylesBindingsProcessor","elementId","breakpoints","rawBindings","styles","result","Object","key","currentBreakpoint","rebuilt","valueResolver","InheritedValueResolver","breakpoint","originalStyles","newKeys","Set","originalKeys","unset","value","set","inheritedValue","StylesUpdater","baseStyles","structuredClone","toJS","bp","overrides","name"],"mappings":";;;;;AAsBO,MAAMA;IAKT,YAAYC,SAAiB,EAAEC,WAAqB,EAAEC,WAAoC,CAAE;QACxF,IAAI,CAAC,SAAS,GAAGF;QACjB,IAAI,CAAC,WAAW,GAAGC;QACnB,IAAI,CAAC,WAAW,GAAGC;IACvB;IAKO,aAAaC,SAA4C,CAAC,CAAC,EAAgB;QAC9E,MAAMC,SAAuB,CAAC;QAC9BC,OAAO,IAAI,CAACF,QAAQ,OAAO,CAACG,CAAAA;YAExBF,MAAM,CAACE,IAAI,GAAGH,MAAM,CAACG,IAAI,CAAC,MAAM;QACpC;QACA,OAAOF;IACX;IAMO,aAAaD,MAAoB,EAAEI,iBAAyB,EAAE;QACjE,MAAMC,UAAU,IAAI,CAAC,aAAa;QAClC,MAAMC,gBAAgB,IAAIC,uBAAuB,IAAI,CAAC,WAAW,EAAEC,CAAAA;YAC/D,IAAI,IAAI,CAAC,gBAAgB,CAACA,aACtB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM;YAElC,OAAO,IAAI,CAAC,WAAW,EAAE,WAAW,CAACA,WAAW,EAAE;QACtD;QAGA,MAAMC,iBAAiB,IAAI,CAAC,gBAAgB,CAACL,qBACvC,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,IAC5B,IAAI,CAAC,WAAW,EAAE,WAAW,CAACA,kBAAkB,EAAE,UAAU,CAAC;QAEnE,MAAMM,UAAU,IAAIC,IAAIT,OAAO,IAAI,CAACF;QACpC,MAAMY,eAAeV,OAAO,IAAI,CAACO;QAGjC,KAAK,MAAMN,OAAOS,aACd,IAAI,CAACF,QAAQ,GAAG,CAACP,MACT,IAAI,CAAC,gBAAgB,CAACC,qBACtBS,MAAMR,SAAS,CAAC,OAAO,EAAEF,KAAK,IAE9BU,MAAMR,SAAS,CAAC,UAAU,EAAED,kBAAkB,QAAQ,EAAED,KAAK;QAKzE,KAAK,MAAM,CAACA,KAAKW,MAAM,IAAIZ,OAAO,OAAO,CAACF,QACtC,IAAI,IAAI,CAAC,gBAAgB,CAACI,oBACtBW,IAAIV,SAAS,CAAC,OAAO,EAAEF,IAAI,OAAO,CAAC,EAAEW;aAClC;YACH,MAAME,iBAAiBV,cAAc,iBAAiB,CAACH,KAAKC;YAE5D,IAAIU,UAAUE,gBACVD,IAAIV,SAAS,CAAC,UAAU,EAAED,kBAAkB,QAAQ,EAAED,IAAI,OAAO,CAAC,EAAEW;iBAEpED,MAAMR,SAAS,CAAC,UAAU,EAAED,kBAAkB,QAAQ,EAAED,KAAK;QAErE;QAGJ,OAAO,IAAIc,cAAc,IAAI,CAAC,SAAS,EAAEZ;IAC7C;IAEQ,gBAAuC;QAC3C,MAAMa,aAAoC;YACtC,QAAQC,gBAAgBC,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,MAAM,CAAC;YAC3D,WAAW,CAAC;QAChB;QAGA,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,EAC1B;YAAA,KAAK,MAAM,CAACC,IAAIC,UAAU,IAAIpB,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,EACnE,IAAIoB,UAAU,MAAM,EAChBP,IACIG,YACA,CAAC,UAAU,EAAEG,GAAG,OAAO,CAAC,EACxBF,gBAAgBC,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS,CAACC,GAAG,CAAC,MAAM;QAGtE;QAGJ,OAAOH;IACX;IAEQ,iBAAiBK,IAAY,EAAW;QAC5C,OAAO,AAAmC,MAAnC,IAAI,CAAC,WAAW,CAAC,OAAO,CAACA;IACpC;AACJ"}
|
package/Theme.js
CHANGED
package/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.js","sources":["../src/Theme.ts"],"sourcesContent":["import deepMerge from \"deepmerge\";\nimport type {\n Breakpoint,\n WebsiteBuilderTheme,\n WebsiteBuilderThemeInput\n} from \"~/types/WebsiteBuilderTheme.js\";\nimport { defaultBreakpoints } from \"~/defaultBreakpoints.js\";\n\nexport class Theme {\n static from(input: WebsiteBuilderThemeInput): WebsiteBuilderTheme {\n const { custom = {}, ...builtInOverrides } = input?.breakpoints ?? {};\n\n const mergedBreakpoints = deepMerge.all([\n {},\n defaultBreakpoints,\n builtInOverrides,\n custom\n ]) as WebsiteBuilderThemeInput[\"breakpoints\"];\n\n const breakpoints: Breakpoint[] = [];\n Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint]) => {\n breakpoints.push({\n name,\n ...(breakpoint as Omit<Breakpoint, \"name\">)\n });\n });\n\n return {\n css: input.css,\n fonts: input.fonts,\n breakpoints: breakpoints.sort((a, b) => b.maxWidth - a.maxWidth),\n colors: input?.colors ?? [],\n typography: {\n ...input?.typography\n }\n };\n }\n}\n"],"names":["Theme","input","custom","builtInOverrides","mergedBreakpoints","deepMerge","defaultBreakpoints","breakpoints","Object","name","breakpoint","a","b"],"mappings":";;AAQO,MAAMA;IACT,OAAO,KAAKC,KAA+B,EAAuB;QAC9D,MAAM,EAAEC,SAAS,CAAC,CAAC,EAAE,GAAGC,kBAAkB,GAAGF,OAAO,eAAe,CAAC;QAEpE,MAAMG,oBAAoBC,UAAAA,GAAa,CAAC;YACpC,CAAC;YACDC;YACAH;YACAD;SACH;QAED,MAAMK,cAA4B,EAAE;QACpCC,OAAO,OAAO,CAACJ,qBAAqB,CAAC,GAAG,OAAO,CAAC,CAAC,CAACK,MAAMC,WAAW;YAC/DH,YAAY,IAAI,CAAC;gBACbE;gBACA,GAAIC,UAAU;YAClB;QACJ;QAEA,OAAO;YACH,KAAKT,MAAM,GAAG;YACd,OAAOA,MAAM,KAAK;YAClB,aAAaM,YAAY,IAAI,CAAC,CAACI,GAAGC,IAAMA,EAAE,QAAQ,GAAGD,EAAE,QAAQ;YAC/D,QAAQV,OAAO,UAAU,EAAE;YAC3B,YAAY;gBACR,GAAGA,OAAO,UAAU;YACxB;QACJ;IACJ;AACJ"}
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../src/Theme.ts"],"sourcesContent":["import deepMerge from \"deepmerge\";\nimport type {\n Breakpoint,\n WebsiteBuilderTheme,\n WebsiteBuilderThemeInput\n} from \"~/types/WebsiteBuilderTheme.js\";\nimport { defaultBreakpoints } from \"~/defaultBreakpoints.js\";\n\nexport class Theme {\n static from(input: WebsiteBuilderThemeInput): WebsiteBuilderTheme {\n const { custom = {}, ...builtInOverrides } = input?.breakpoints ?? {};\n\n const mergedBreakpoints = deepMerge.all([\n {},\n defaultBreakpoints,\n builtInOverrides,\n custom\n ]) as WebsiteBuilderThemeInput[\"breakpoints\"];\n\n const breakpoints: Breakpoint[] = [];\n Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint]) => {\n breakpoints.push({\n name,\n ...(breakpoint as Omit<Breakpoint, \"name\">)\n });\n });\n\n return {\n css: input.css,\n fonts: input.fonts,\n fontSizes: input.fontSizes,\n breakpoints: breakpoints.sort((a, b) => b.maxWidth - a.maxWidth),\n colors: input?.colors ?? [],\n typography: {\n ...input?.typography\n }\n };\n }\n}\n"],"names":["Theme","input","custom","builtInOverrides","mergedBreakpoints","deepMerge","defaultBreakpoints","breakpoints","Object","name","breakpoint","a","b"],"mappings":";;AAQO,MAAMA;IACT,OAAO,KAAKC,KAA+B,EAAuB;QAC9D,MAAM,EAAEC,SAAS,CAAC,CAAC,EAAE,GAAGC,kBAAkB,GAAGF,OAAO,eAAe,CAAC;QAEpE,MAAMG,oBAAoBC,UAAAA,GAAa,CAAC;YACpC,CAAC;YACDC;YACAH;YACAD;SACH;QAED,MAAMK,cAA4B,EAAE;QACpCC,OAAO,OAAO,CAACJ,qBAAqB,CAAC,GAAG,OAAO,CAAC,CAAC,CAACK,MAAMC,WAAW;YAC/DH,YAAY,IAAI,CAAC;gBACbE;gBACA,GAAIC,UAAU;YAClB;QACJ;QAEA,OAAO;YACH,KAAKT,MAAM,GAAG;YACd,OAAOA,MAAM,KAAK;YAClB,WAAWA,MAAM,SAAS;YAC1B,aAAaM,YAAY,IAAI,CAAC,CAACI,GAAGC,IAAMA,EAAE,QAAQ,GAAGD,EAAE,QAAQ;YAC/D,QAAQV,OAAO,UAAU,EAAE;YAC3B,YAAY;gBACR,GAAGA,OAAO,UAAU;YACxB;QACJ;IACJ;AACJ"}
|
package/defaultBreakpoints.js
CHANGED
|
@@ -2,21 +2,41 @@ const defaultBreakpoints = {
|
|
|
2
2
|
desktop: {
|
|
3
3
|
title: "Desktop",
|
|
4
4
|
description: "Desktop styles apply at all breakpoints, unless they're edited at a lower breakpoint. Start your styling here.",
|
|
5
|
-
icon:
|
|
5
|
+
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6
|
+
<path d="M13.3333 12C14.0667 12 14.6667 11.4 14.6667 10.6666V3.99996C14.6667 3.26663 14.0667 2.66663 13.3333 2.66663H2.66667C1.93333 2.66663 1.33333 3.26663 1.33333 3.99996V10.6666C1.33333 11.4 1.93333 12 2.66667 12H0V13.3333H16V12H13.3333ZM2.66667 3.99996H13.3333V10.6666H2.66667V3.99996Z" fill="#59626D"/>
|
|
7
|
+
</svg>`,
|
|
6
8
|
minWidth: 0,
|
|
7
9
|
maxWidth: 4000
|
|
8
10
|
},
|
|
9
11
|
tablet: {
|
|
10
12
|
title: "Tablet",
|
|
11
13
|
description: "Styles added here will apply at 991px and below, unless they're edited at a smaller breakpoint.",
|
|
12
|
-
icon:
|
|
14
|
+
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
15
|
+
<g clip-path="url(#clip0_6424_8826)">
|
|
16
|
+
<path d="M12.666 0H3.33268C2.41268 0 1.66602 0.746667 1.66602 1.66667V14.3333C1.66602 15.2533 2.41268 16 3.33268 16H12.666C13.586 16 14.3327 15.2533 14.3327 14.3333V1.66667C14.3327 0.746667 13.586 0 12.666 0ZM7.99935 15.3333C7.44602 15.3333 6.99935 14.8867 6.99935 14.3333C6.99935 13.78 7.44602 13.3333 7.99935 13.3333C8.55268 13.3333 8.99935 13.78 8.99935 14.3333C8.99935 14.8867 8.55268 15.3333 7.99935 15.3333ZM12.9993 12.6667H2.99935V2H12.9993V12.6667Z" fill="#9DA4B0"/>
|
|
17
|
+
</g>
|
|
18
|
+
<defs>
|
|
19
|
+
<clipPath id="clip0_6424_8826">
|
|
20
|
+
<rect width="16" height="16" fill="white"/>
|
|
21
|
+
</clipPath>
|
|
22
|
+
</defs>
|
|
23
|
+
</svg>`,
|
|
13
24
|
minWidth: 0,
|
|
14
25
|
maxWidth: 991
|
|
15
26
|
},
|
|
16
27
|
mobile: {
|
|
17
28
|
title: "Mobile",
|
|
18
29
|
description: "Styles added here will apply at 430px and below.",
|
|
19
|
-
icon:
|
|
30
|
+
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
31
|
+
<g clip-path="url(#clip0_6405_34405)">
|
|
32
|
+
<path d="M11.333 0.673293L4.66634 0.666626C3.93301 0.666626 3.33301 1.26663 3.33301 1.99996V14C3.33301 14.7333 3.93301 15.3333 4.66634 15.3333H11.333C12.0663 15.3333 12.6663 14.7333 12.6663 14V1.99996C12.6663 1.26663 12.0663 0.673293 11.333 0.673293ZM11.333 12.6666H4.66634V3.33329H11.333V12.6666Z" fill="#9DA4B0"/>
|
|
33
|
+
</g>
|
|
34
|
+
<defs>
|
|
35
|
+
<clipPath id="clip0_6405_34405">
|
|
36
|
+
<rect width="16" height="16" fill="white"/>
|
|
37
|
+
</clipPath>
|
|
38
|
+
</defs>
|
|
39
|
+
</svg>`,
|
|
20
40
|
minWidth: 0,
|
|
21
41
|
maxWidth: 430
|
|
22
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultBreakpoints.js","sources":["../src/defaultBreakpoints.ts"],"sourcesContent":["import type { WebsiteBuilderThemeInput } from \"~/types/WebsiteBuilderTheme.js\";\n\nexport const defaultBreakpoints: NonNullable<WebsiteBuilderThemeInput[\"breakpoints\"]> = {\n desktop: {\n title: \"Desktop\",\n description: `Desktop styles apply at all breakpoints, unless they're edited at a lower breakpoint. Start your styling here.`,\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"
|
|
1
|
+
{"version":3,"file":"defaultBreakpoints.js","sources":["../src/defaultBreakpoints.ts"],"sourcesContent":["import type { WebsiteBuilderThemeInput } from \"~/types/WebsiteBuilderTheme.js\";\n\nexport const defaultBreakpoints: NonNullable<WebsiteBuilderThemeInput[\"breakpoints\"]> = {\n desktop: {\n title: \"Desktop\",\n description: `Desktop styles apply at all breakpoints, unless they're edited at a lower breakpoint. Start your styling here.`,\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M13.3333 12C14.0667 12 14.6667 11.4 14.6667 10.6666V3.99996C14.6667 3.26663 14.0667 2.66663 13.3333 2.66663H2.66667C1.93333 2.66663 1.33333 3.26663 1.33333 3.99996V10.6666C1.33333 11.4 1.93333 12 2.66667 12H0V13.3333H16V12H13.3333ZM2.66667 3.99996H13.3333V10.6666H2.66667V3.99996Z\" fill=\"#59626D\"/>\n</svg>`,\n minWidth: 0,\n maxWidth: 4000\n },\n tablet: {\n title: \"Tablet\",\n description: `Styles added here will apply at 991px and below, unless they're edited at a smaller breakpoint.`,\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_6424_8826)\">\n <path d=\"M12.666 0H3.33268C2.41268 0 1.66602 0.746667 1.66602 1.66667V14.3333C1.66602 15.2533 2.41268 16 3.33268 16H12.666C13.586 16 14.3327 15.2533 14.3327 14.3333V1.66667C14.3327 0.746667 13.586 0 12.666 0ZM7.99935 15.3333C7.44602 15.3333 6.99935 14.8867 6.99935 14.3333C6.99935 13.78 7.44602 13.3333 7.99935 13.3333C8.55268 13.3333 8.99935 13.78 8.99935 14.3333C8.99935 14.8867 8.55268 15.3333 7.99935 15.3333ZM12.9993 12.6667H2.99935V2H12.9993V12.6667Z\" fill=\"#9DA4B0\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_6424_8826\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>`,\n minWidth: 0,\n maxWidth: 991\n },\n mobile: {\n title: \"Mobile\",\n description: `Styles added here will apply at 430px and below.`,\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_6405_34405)\">\n <path d=\"M11.333 0.673293L4.66634 0.666626C3.93301 0.666626 3.33301 1.26663 3.33301 1.99996V14C3.33301 14.7333 3.93301 15.3333 4.66634 15.3333H11.333C12.0663 15.3333 12.6663 14.7333 12.6663 14V1.99996C12.6663 1.26663 12.0663 0.673293 11.333 0.673293ZM11.333 12.6666H4.66634V3.33329H11.333V12.6666Z\" fill=\"#9DA4B0\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_6405_34405\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>`,\n minWidth: 0,\n maxWidth: 430\n }\n};\n"],"names":["defaultBreakpoints"],"mappings":"AAEO,MAAMA,qBAA2E;IACpF,SAAS;QACL,OAAO;QACP,aAAa;QACb,MAAM,CAAC;;MAET,CAAC;QACC,UAAU;QACV,UAAU;IACd;IACA,QAAQ;QACJ,OAAO;QACP,aAAa;QACb,MAAM,CAAC;;;;;;;;;MAST,CAAC;QACC,UAAU;QACV,UAAU;IACd;IACA,QAAQ;QACJ,OAAO;QACP,aAAa;QACb,MAAM,CAAC;;;;;;;;;MAST,CAAC;QACC,UAAU;QACV,UAAU;IACd;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/website-builder-sdk",
|
|
3
|
-
"version": "6.4.0-beta.
|
|
3
|
+
"version": "6.4.0-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,13 +29,12 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/deep-equal": "1.0.4",
|
|
31
31
|
"@types/is-hotkey": "0.1.10",
|
|
32
|
-
"@webiny/build-tools": "6.4.0-beta.
|
|
32
|
+
"@webiny/build-tools": "6.4.0-beta.4",
|
|
33
33
|
"typescript": "6.0.3",
|
|
34
|
-
"vitest": "4.1.
|
|
34
|
+
"vitest": "4.1.7"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
|
-
"access": "public"
|
|
38
|
-
"directory": "dist"
|
|
37
|
+
"access": "public"
|
|
39
38
|
},
|
|
40
39
|
"adio": {
|
|
41
40
|
"ignore": {
|
|
@@ -44,5 +43,7 @@
|
|
|
44
43
|
]
|
|
45
44
|
}
|
|
46
45
|
},
|
|
47
|
-
"
|
|
46
|
+
"webiny": {
|
|
47
|
+
"publishFrom": "dist"
|
|
48
|
+
}
|
|
48
49
|
}
|
|
@@ -11,6 +11,7 @@ export type WebsiteBuilderTheme = {
|
|
|
11
11
|
fonts?: string[];
|
|
12
12
|
breakpoints: Breakpoint[];
|
|
13
13
|
colors: ColorStyle[];
|
|
14
|
+
fontSizes?: FontSizes;
|
|
14
15
|
typography: Typography;
|
|
15
16
|
};
|
|
16
17
|
type KnownKeys = "desktop" | "tablet" | "mobile";
|
|
@@ -33,6 +34,7 @@ export type TypographyStyle = {
|
|
|
33
34
|
className: string;
|
|
34
35
|
};
|
|
35
36
|
export type Typography = Record<string, TypographyStyle[]>;
|
|
37
|
+
export type FontSizes = string[];
|
|
36
38
|
export type WebsiteBuilderThemeInput = {
|
|
37
39
|
/**
|
|
38
40
|
* CSS to include in the editor.
|
|
@@ -42,6 +44,11 @@ export type WebsiteBuilderThemeInput = {
|
|
|
42
44
|
* Fonts to load when the editor loads.
|
|
43
45
|
*/
|
|
44
46
|
fonts?: string[];
|
|
47
|
+
/**
|
|
48
|
+
* Font sizes to use in the editor.
|
|
49
|
+
* Define this if you want to see a font size dropdown in the editor.
|
|
50
|
+
*/
|
|
51
|
+
fontSizes?: FontSizes;
|
|
45
52
|
/**
|
|
46
53
|
* {
|
|
47
54
|
* title: "Desktop",
|
package/types.d.ts
CHANGED