@wordpress/server-side-render 6.8.0 → 6.8.1-next.b8c8708f3.0
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/build/hook.js +86 -119
- package/build/hook.js.map +7 -1
- package/build/index.js +33 -36
- package/build/index.js.map +7 -1
- package/build/server-side-render.js +78 -150
- package/build/server-side-render.js.map +7 -1
- package/build-module/hook.js +51 -109
- package/build-module/hook.js.map +7 -1
- package/build-module/index.js +9 -20
- package/build-module/index.js.map +7 -1
- package/build-module/server-side-render.js +58 -140
- package/build-module/server-side-render.js.map +7 -1
- package/package.json +19 -12
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_i18n","_components","_data","_hook","_jsxRuntime","EMPTY_OBJECT","DefaultEmptyResponsePlaceholder","className","jsx","Placeholder","children","__","DefaultErrorResponsePlaceholder","message","errorMessage","sprintf","DefaultLoadingResponsePlaceholder","showLoader","setShowLoader","useState","useEffect","timeout","setTimeout","clearTimeout","jsxs","style","position","top","left","marginTop","marginLeft","Spinner","opacity","ServerSideRender","props","prevContentRef","useRef","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","restProps","content","status","error","useServerSideRender","current","RawHTML","ServerSideRenderWithPostId","urlQueryArgs","currentPostId","useSelect","select","postId","getCurrentPostId","newUrlQueryArgs","useMemo","post_id"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n * return (\n * <ServerSideRender\n * block=\"core/archives\"\n * attributes={ { showPostCounts: true } }\n * urlQueryArgs={ { customArg: 'value' } }\n * className=\"custom-class\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.block The identifier of the block to be serverside rendered.\n * @param {Object} props.attributes The block attributes to be sent to the server for rendering.\n * @param {string} [props.className] Additional classes to apply to the wrapper element.\n * @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.\n * @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.\n *\n * @return {JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/server-side-render.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n * return (\n * <ServerSideRender\n * block=\"core/archives\"\n * attributes={ { showPostCounts: true } }\n * urlQueryArgs={ { customArg: 'value' } }\n * className=\"custom-class\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.block The identifier of the block to be serverside rendered.\n * @param {Object} props.attributes The block attributes to be sent to the server for rendering.\n * @param {string} [props.className] Additional classes to apply to the wrapper element.\n * @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.\n * @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.\n *\n * @return {JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBE;AApBF,qBAMO;AACP,kBAA4B;AAC5B,wBAAqC;AACrC,kBAA0B;AAK1B,kBAAoC;AAEpC,MAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAI;AACzD,SACC,4CAAC,iCAAY,WACV,8BAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC,EAAE,SAAS,UAAU,GAAI;AAClE,QAAM,mBAAe;AAAA;AAAA,QAEpB,gBAAI,yBAA0B;AAAA,IAC9B;AAAA,EACD;AACA,SAAO,4CAAC,iCAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC,EAAE,SAAS,GAAI;AAC1D,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,gCAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,6CAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,sDAAC,6BAAQ;AAAA;AAAA,IACV;AAAA,IAED,4CAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAAQ;AACzC,QAAM,qBAAiB,uBAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,QAAI,iCAAqB,SAAU;AAGlE,gCAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,4CAAC,8BAA6B,GAAG,OAC9B,WAAC,CAAE,eAAe,WACnB,4CAAC,0BAAQ,WACN,yBAAe,SAClB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,4CAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,4CAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,4CAAC,0BAAQ,WAA0B,mBAAS;AACpD;AAuCO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAI;AACH,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAI9C,UAAM,SAAS,OAAQ,aAAc,GAAG,iBAAiB;AAMzD,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,sBAAkB,wBAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,4CAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/build-module/hook.js
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { addQueryArgs } from '@wordpress/url';
|
|
8
|
-
import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
|
|
9
|
-
export function rendererPath(block, attributes = null, urlQueryArgs = {}) {
|
|
1
|
+
import { debounce } from "@wordpress/compose";
|
|
2
|
+
import { useEffect, useState, useRef } from "@wordpress/element";
|
|
3
|
+
import apiFetch from "@wordpress/api-fetch";
|
|
4
|
+
import { addQueryArgs } from "@wordpress/url";
|
|
5
|
+
import { __experimentalSanitizeBlockAttributes } from "@wordpress/blocks";
|
|
6
|
+
function rendererPath(block, attributes = null, urlQueryArgs = {}) {
|
|
10
7
|
return addQueryArgs(`/wp/v2/block-renderer/${block}`, {
|
|
11
|
-
context:
|
|
12
|
-
...
|
|
13
|
-
attributes
|
|
14
|
-
} : {}),
|
|
8
|
+
context: "edit",
|
|
9
|
+
...null !== attributes ? { attributes } : {},
|
|
15
10
|
...urlQueryArgs
|
|
16
11
|
});
|
|
17
12
|
}
|
|
18
|
-
|
|
13
|
+
function removeBlockSupportAttributes(attributes) {
|
|
19
14
|
const {
|
|
20
15
|
backgroundColor,
|
|
21
16
|
borderColor,
|
|
@@ -40,116 +35,58 @@ export function removeBlockSupportAttributes(attributes) {
|
|
|
40
35
|
style: restStyles
|
|
41
36
|
};
|
|
42
37
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
* @typedef {Object} ServerSideRenderResponse
|
|
46
|
-
* @property {string} status - The current request status: 'idle', 'loading', 'success', or 'error'.
|
|
47
|
-
* @property {string} [content] - The rendered block content (available when status is 'success').
|
|
48
|
-
* @property {string} [error] - The error message (available when status is 'error').
|
|
49
|
-
*/
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* A hook for server-side rendering a preview of dynamic blocks to display in the editor.
|
|
53
|
-
*
|
|
54
|
-
* Handles fetching server-rendered previews for blocks, managing loading states,
|
|
55
|
-
* and automatically debouncing requests to prevent excessive API calls. It supports both
|
|
56
|
-
* GET and POST requests, with POST requests used for larger attribute payloads.
|
|
57
|
-
*
|
|
58
|
-
* @example
|
|
59
|
-
* Basic usage:
|
|
60
|
-
*
|
|
61
|
-
* ```jsx
|
|
62
|
-
* import { RawHTML } from '@wordpress/element';
|
|
63
|
-
* import { useServerSideRender } from '@wordpress/server-side-render';
|
|
64
|
-
*
|
|
65
|
-
* function MyServerSideRender( { attributes, block } ) {
|
|
66
|
-
* const { content, status, error } = useServerSideRender( {
|
|
67
|
-
* attributes,
|
|
68
|
-
* block,
|
|
69
|
-
* } );
|
|
70
|
-
*
|
|
71
|
-
* if ( status === 'loading' ) {
|
|
72
|
-
* return <div>Loading...</div>;
|
|
73
|
-
* }
|
|
74
|
-
*
|
|
75
|
-
* if ( status === 'error' ) {
|
|
76
|
-
* return <div>Error: { error }</div>;
|
|
77
|
-
* }
|
|
78
|
-
*
|
|
79
|
-
* return <RawHTML>{ content }</RawHTML>;
|
|
80
|
-
* }
|
|
81
|
-
* ```
|
|
82
|
-
*
|
|
83
|
-
* @param {Object} args The hook configuration object.
|
|
84
|
-
* @param {Object} args.attributes The block attributes to be sent to the server for rendering.
|
|
85
|
-
* @param {string} args.block The identifier of the block to be serverside rendered. Example: 'core/archives'.
|
|
86
|
-
* @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
|
|
87
|
-
* @param {string} [args.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'.
|
|
88
|
-
* @param {Object} [args.urlQueryArgs] Additional query arguments to append to the request URL.
|
|
89
|
-
*
|
|
90
|
-
* @return {ServerSideRenderResponse} The server-side render response object.
|
|
91
|
-
*/
|
|
92
|
-
export function useServerSideRender(args) {
|
|
93
|
-
var _sanitizedAttributes;
|
|
94
|
-
const [response, setResponse] = useState({
|
|
95
|
-
status: 'idle'
|
|
96
|
-
});
|
|
38
|
+
function useServerSideRender(args) {
|
|
39
|
+
const [response, setResponse] = useState({ status: "idle" });
|
|
97
40
|
const shouldDebounceRef = useRef(false);
|
|
98
41
|
const {
|
|
99
42
|
attributes,
|
|
100
43
|
block,
|
|
101
44
|
skipBlockSupportAttributes = false,
|
|
102
|
-
httpMethod =
|
|
45
|
+
httpMethod = "GET",
|
|
103
46
|
urlQueryArgs
|
|
104
47
|
} = args;
|
|
105
48
|
let sanitizedAttributes = attributes && __experimentalSanitizeBlockAttributes(block, attributes);
|
|
106
49
|
if (skipBlockSupportAttributes) {
|
|
107
50
|
sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
|
|
108
51
|
}
|
|
109
|
-
|
|
110
|
-
// If httpMethod is 'POST', send the attributes in the request body instead of the URL.
|
|
111
|
-
// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
|
|
112
|
-
const isPostRequest = 'POST' === httpMethod;
|
|
52
|
+
const isPostRequest = "POST" === httpMethod;
|
|
113
53
|
const urlAttributes = isPostRequest ? null : sanitizedAttributes;
|
|
114
54
|
const path = rendererPath(block, urlAttributes, urlQueryArgs);
|
|
115
|
-
const body = isPostRequest ? JSON.stringify({
|
|
116
|
-
attributes: (_sanitizedAttributes = sanitizedAttributes) !== null && _sanitizedAttributes !== void 0 ? _sanitizedAttributes : null
|
|
117
|
-
}) : undefined;
|
|
55
|
+
const body = isPostRequest ? JSON.stringify({ attributes: sanitizedAttributes ?? null }) : void 0;
|
|
118
56
|
useEffect(() => {
|
|
119
57
|
const controller = new AbortController();
|
|
120
|
-
const debouncedFetch = debounce(
|
|
121
|
-
{
|
|
122
|
-
|
|
123
|
-
status:
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
})
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
58
|
+
const debouncedFetch = debounce(
|
|
59
|
+
function() {
|
|
60
|
+
{
|
|
61
|
+
setResponse({ status: "loading" });
|
|
62
|
+
apiFetch({
|
|
63
|
+
path,
|
|
64
|
+
method: isPostRequest ? "POST" : "GET",
|
|
65
|
+
body,
|
|
66
|
+
headers: isPostRequest ? {
|
|
67
|
+
"Content-Type": "application/json"
|
|
68
|
+
} : {},
|
|
69
|
+
signal: controller.signal
|
|
70
|
+
}).then((res) => {
|
|
71
|
+
setResponse({
|
|
72
|
+
status: "success",
|
|
73
|
+
content: res ? res.rendered : ""
|
|
74
|
+
});
|
|
75
|
+
}).catch((error) => {
|
|
76
|
+
if (error.name === "AbortError") {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
setResponse({
|
|
80
|
+
status: "error",
|
|
81
|
+
error: error.message
|
|
82
|
+
});
|
|
83
|
+
}).finally(() => {
|
|
84
|
+
shouldDebounceRef.current = true;
|
|
146
85
|
});
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
152
|
-
}, shouldDebounceRef.current ? 500 : 0);
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
shouldDebounceRef.current ? 500 : 0
|
|
89
|
+
);
|
|
153
90
|
debouncedFetch();
|
|
154
91
|
return () => {
|
|
155
92
|
controller.abort();
|
|
@@ -158,4 +95,9 @@ export function useServerSideRender(args) {
|
|
|
158
95
|
}, [path, isPostRequest, body]);
|
|
159
96
|
return response;
|
|
160
97
|
}
|
|
161
|
-
|
|
98
|
+
export {
|
|
99
|
+
removeBlockSupportAttributes,
|
|
100
|
+
rendererPath,
|
|
101
|
+
useServerSideRender
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=hook.js.map
|
package/build-module/hook.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/hook.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nexport function removeBlockSupportAttributes( attributes ) {\n\tconst {\n\t\tbackgroundColor,\n\t\tborderColor,\n\t\tfontFamily,\n\t\tfontSize,\n\t\tgradient,\n\t\ttextColor,\n\t\tclassName,\n\t\t...restAttributes\n\t} = attributes;\n\n\tconst {\n\t\tborder,\n\t\tcolor,\n\t\telements,\n\t\tshadow,\n\t\tspacing,\n\t\ttypography,\n\t\t...restStyles\n\t} = attributes?.style || {};\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\n\n/**\n * @typedef {Object} ServerSideRenderResponse\n * @property {string} status - The current request status: 'idle', 'loading', 'success', or 'error'.\n * @property {string} [content] - The rendered block content (available when status is 'success').\n * @property {string} [error] - The error message (available when status is 'error').\n */\n\n/**\n * A hook for server-side rendering a preview of dynamic blocks to display in the editor.\n *\n * Handles fetching server-rendered previews for blocks, managing loading states,\n * and automatically debouncing requests to prevent excessive API calls. It supports both\n * GET and POST requests, with POST requests used for larger attribute payloads.\n *\n * @example\n * Basic usage:\n *\n * ```jsx\n * import { RawHTML } from '@wordpress/element';\n * import { useServerSideRender } from '@wordpress/server-side-render';\n *\n * function MyServerSideRender( { attributes, block } ) {\n * const { content, status, error } = useServerSideRender( {\n * attributes,\n * block,\n * } );\n *\n * if ( status === 'loading' ) {\n * return <div>Loading...</div>;\n * }\n *\n * if ( status === 'error' ) {\n * return <div>Error: { error }</div>;\n * }\n *\n * return <RawHTML>{ content }</RawHTML>;\n * }\n * ```\n *\n * @param {Object} args The hook configuration object.\n * @param {Object} args.attributes The block attributes to be sent to the server for rendering.\n * @param {string} args.block The identifier of the block to be serverside rendered. Example: 'core/archives'.\n * @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {string} [args.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'.\n * @param {Object} [args.urlQueryArgs] Additional query arguments to append to the request URL.\n *\n * @return {ServerSideRenderResponse} The server-side render response object.\n */\nexport function useServerSideRender( args ) {\n\tconst [ response, setResponse ] = useState( { status: 'idle' } );\n\tconst shouldDebounceRef = useRef( false );\n\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tskipBlockSupportAttributes = false,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t} = args;\n\n\tlet sanitizedAttributes =\n\t\tattributes &&\n\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\tif ( skipBlockSupportAttributes ) {\n\t\tsanitizedAttributes =\n\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t}\n\n\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\tconst isPostRequest = 'POST' === httpMethod;\n\tconst urlAttributes = isPostRequest ? null : sanitizedAttributes;\n\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\tconst body = isPostRequest\n\t\t? JSON.stringify( { attributes: sanitizedAttributes ?? null } )\n\t\t: undefined;\n\n\tuseEffect( () => {\n\t\tconst controller = new AbortController();\n\t\tconst debouncedFetch = debounce(\n\t\t\tfunction () {\n\t\t\t\t{\n\t\t\t\t\tsetResponse( { status: 'loading' } );\n\n\t\t\t\t\tapiFetch( {\n\t\t\t\t\t\tpath,\n\t\t\t\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t\t\t\t\tbody,\n\t\t\t\t\t\theaders: isPostRequest\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t\t} )\n\t\t\t\t\t\t.then( ( res ) => {\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'success',\n\t\t\t\t\t\t\t\tcontent: res ? res.rendered : '',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.catch( ( error ) => {\n\t\t\t\t\t\t\t// The request was aborted, do not update the response.\n\t\t\t\t\t\t\tif ( error.name === 'AbortError' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'error',\n\t\t\t\t\t\t\t\terror: error.message,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.finally( () => {\n\t\t\t\t\t\t\t// Debounce requests after first fetch.\n\t\t\t\t\t\t\tshouldDebounceRef.current = true;\n\t\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t},\n\t\t\tshouldDebounceRef.current ? 500 : 0\n\t\t);\n\n\t\tdebouncedFetch();\n\n\t\treturn () => {\n\t\t\tcontroller.abort();\n\t\t\tdebouncedFetch.cancel();\n\t\t};\n\t}, [ path, isPostRequest, body ] );\n\n\treturn response;\n}\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,gBAAgB;AACzB,SAAS,WAAW,UAAU,cAAc;AAC5C,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAE/C,SAAS,aAAc,OAAO,aAAa,MAAM,eAAe,CAAC,GAAI;AAC3E,SAAO,aAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BAA8B,YAAa;AAC1D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkDO,SAAS,oBAAqB,MAAO;AAC3C,QAAM,CAAE,UAAU,WAAY,IAAI,SAAU,EAAE,QAAQ,OAAO,CAAE;AAC/D,QAAM,oBAAoB,OAAQ,KAAM;AAExC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,cACA,sCAAuC,OAAO,UAAW;AAE1D,MAAK,4BAA6B;AACjC,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,YAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,iBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,mBAAU;AAAA,YACT;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAW;AAEpB,gBAAK,MAAM,SAAS,cAAe;AAClC;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO,MAAM;AAAA,YACd,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/build-module/index.js
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
4
|
-
import { ServerSideRenderWithPostId } from './server-side-render';
|
|
5
|
-
import { useServerSideRender } from './hook';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.
|
|
9
|
-
*
|
|
10
|
-
* @deprecated Use `ServerSideRender` non-default export instead.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```js
|
|
14
|
-
* import ServerSideRender from '@wordpress/server-side-render';
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
1
|
+
import { ServerSideRenderWithPostId } from "./server-side-render";
|
|
2
|
+
import { useServerSideRender } from "./hook";
|
|
17
3
|
const ServerSideRenderCompat = ServerSideRenderWithPostId;
|
|
18
4
|
ServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;
|
|
19
5
|
ServerSideRenderCompat.useServerSideRender = useServerSideRender;
|
|
20
|
-
|
|
21
|
-
export {
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
var index_default = ServerSideRenderCompat;
|
|
7
|
+
export {
|
|
8
|
+
ServerSideRenderWithPostId as ServerSideRender,
|
|
9
|
+
index_default as default,
|
|
10
|
+
useServerSideRender
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { ServerSideRenderWithPostId } from './server-side-render';\nimport { useServerSideRender } from './hook';\n\n/**\n * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.\n *\n * @deprecated Use `ServerSideRender` non-default export instead.\n *\n * @example\n * ```js\n * import ServerSideRender from '@wordpress/server-side-render';\n * ```\n */\nconst ServerSideRenderCompat = ServerSideRenderWithPostId;\nServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;\nServerSideRenderCompat.useServerSideRender = useServerSideRender;\n\nexport { ServerSideRenderWithPostId as ServerSideRender };\nexport { useServerSideRender };\nexport default ServerSideRenderCompat;\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAYpC,MAAM,yBAAyB;AAC/B,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,71 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import { useServerSideRender } from
|
|
13
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
RawHTML,
|
|
4
|
+
useEffect,
|
|
5
|
+
useState,
|
|
6
|
+
useRef,
|
|
7
|
+
useMemo
|
|
8
|
+
} from "@wordpress/element";
|
|
9
|
+
import { __, sprintf } from "@wordpress/i18n";
|
|
10
|
+
import { Placeholder, Spinner } from "@wordpress/components";
|
|
11
|
+
import { useSelect } from "@wordpress/data";
|
|
12
|
+
import { useServerSideRender } from "./hook";
|
|
14
13
|
const EMPTY_OBJECT = {};
|
|
15
|
-
function DefaultEmptyResponsePlaceholder({
|
|
16
|
-
className
|
|
17
|
-
}) {
|
|
18
|
-
return /*#__PURE__*/_jsx(Placeholder, {
|
|
19
|
-
className: className,
|
|
20
|
-
children: __('Block rendered as empty.')
|
|
21
|
-
});
|
|
14
|
+
function DefaultEmptyResponsePlaceholder({ className }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Placeholder, { className, children: __("Block rendered as empty.") });
|
|
22
16
|
}
|
|
23
|
-
function DefaultErrorResponsePlaceholder({
|
|
24
|
-
message,
|
|
25
|
-
className
|
|
26
|
-
}) {
|
|
17
|
+
function DefaultErrorResponsePlaceholder({ message, className }) {
|
|
27
18
|
const errorMessage = sprintf(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
});
|
|
19
|
+
// translators: %s: error message describing the problem
|
|
20
|
+
__("Error loading block: %s"),
|
|
21
|
+
message
|
|
22
|
+
);
|
|
23
|
+
return /* @__PURE__ */ jsx(Placeholder, { className, children: errorMessage });
|
|
34
24
|
}
|
|
35
|
-
function DefaultLoadingResponsePlaceholder({
|
|
36
|
-
children
|
|
37
|
-
}) {
|
|
25
|
+
function DefaultLoadingResponsePlaceholder({ children }) {
|
|
38
26
|
const [showLoader, setShowLoader] = useState(false);
|
|
39
27
|
useEffect(() => {
|
|
40
|
-
// Schedule showing the Spinner after 1 second.
|
|
41
28
|
const timeout = setTimeout(() => {
|
|
42
29
|
setShowLoader(true);
|
|
43
|
-
},
|
|
30
|
+
}, 1e3);
|
|
44
31
|
return () => clearTimeout(timeout);
|
|
45
32
|
}, []);
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
},
|
|
63
|
-
children: children
|
|
64
|
-
})]
|
|
65
|
-
});
|
|
33
|
+
return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
|
|
34
|
+
showLoader && /* @__PURE__ */ jsx(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
style: {
|
|
38
|
+
position: "absolute",
|
|
39
|
+
top: "50%",
|
|
40
|
+
left: "50%",
|
|
41
|
+
marginTop: "-9px",
|
|
42
|
+
marginLeft: "-9px"
|
|
43
|
+
},
|
|
44
|
+
children: /* @__PURE__ */ jsx(Spinner, {})
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsx("div", { style: { opacity: showLoader ? "0.3" : 1 }, children })
|
|
48
|
+
] });
|
|
66
49
|
}
|
|
67
|
-
|
|
68
|
-
const prevContentRef = useRef(
|
|
50
|
+
function ServerSideRender(props) {
|
|
51
|
+
const prevContentRef = useRef("");
|
|
69
52
|
const {
|
|
70
53
|
className,
|
|
71
54
|
EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
|
|
@@ -73,96 +56,30 @@ export function ServerSideRender(props) {
|
|
|
73
56
|
LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
|
|
74
57
|
...restProps
|
|
75
58
|
} = props;
|
|
76
|
-
const {
|
|
77
|
-
content,
|
|
78
|
-
status,
|
|
79
|
-
error
|
|
80
|
-
} = useServerSideRender(restProps);
|
|
81
|
-
|
|
82
|
-
// Store the previous successful HTML response to show while loading.
|
|
59
|
+
const { content, status, error } = useServerSideRender(restProps);
|
|
83
60
|
useEffect(() => {
|
|
84
61
|
if (content) {
|
|
85
62
|
prevContentRef.current = content;
|
|
86
63
|
}
|
|
87
64
|
}, [content]);
|
|
88
|
-
if (status ===
|
|
89
|
-
return
|
|
90
|
-
...props,
|
|
91
|
-
children: !!prevContentRef.current && /*#__PURE__*/_jsx(RawHTML, {
|
|
92
|
-
className: className,
|
|
93
|
-
children: prevContentRef.current
|
|
94
|
-
})
|
|
95
|
-
});
|
|
65
|
+
if (status === "loading") {
|
|
66
|
+
return /* @__PURE__ */ jsx(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ jsx(RawHTML, { className, children: prevContentRef.current }) });
|
|
96
67
|
}
|
|
97
|
-
if (status ===
|
|
98
|
-
return
|
|
99
|
-
...props
|
|
100
|
-
});
|
|
68
|
+
if (status === "success" && !content) {
|
|
69
|
+
return /* @__PURE__ */ jsx(EmptyResponsePlaceholder, { ...props });
|
|
101
70
|
}
|
|
102
|
-
if (status ===
|
|
103
|
-
return
|
|
104
|
-
message: error,
|
|
105
|
-
...props
|
|
106
|
-
});
|
|
71
|
+
if (status === "error") {
|
|
72
|
+
return /* @__PURE__ */ jsx(ErrorResponsePlaceholder, { message: error, ...props });
|
|
107
73
|
}
|
|
108
|
-
return
|
|
109
|
-
className: className,
|
|
110
|
-
children: content
|
|
111
|
-
});
|
|
74
|
+
return /* @__PURE__ */ jsx(RawHTML, { className, children: content });
|
|
112
75
|
}
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* A component that renders server-side content for blocks.
|
|
116
|
-
*
|
|
117
|
-
* Note: URL query will include the current post ID when applicable.
|
|
118
|
-
* This is useful for blocks that depend on the context of the current post for rendering.
|
|
119
|
-
*
|
|
120
|
-
* @example
|
|
121
|
-
* ```jsx
|
|
122
|
-
* import { ServerSideRender } from '@wordpress/server-side-render';
|
|
123
|
-
* // Legacy import for WordPress 6.8 and earlier
|
|
124
|
-
* // import { default as ServerSideRender } from '@wordpress/server-side-render';
|
|
125
|
-
*
|
|
126
|
-
* function Example() {
|
|
127
|
-
* return (
|
|
128
|
-
* <ServerSideRender
|
|
129
|
-
* block="core/archives"
|
|
130
|
-
* attributes={ { showPostCounts: true } }
|
|
131
|
-
* urlQueryArgs={ { customArg: 'value' } }
|
|
132
|
-
* className="custom-class"
|
|
133
|
-
* />
|
|
134
|
-
* );
|
|
135
|
-
* }
|
|
136
|
-
* ```
|
|
137
|
-
*
|
|
138
|
-
* @param {Object} props Component props.
|
|
139
|
-
* @param {string} props.block The identifier of the block to be serverside rendered.
|
|
140
|
-
* @param {Object} props.attributes The block attributes to be sent to the server for rendering.
|
|
141
|
-
* @param {string} [props.className] Additional classes to apply to the wrapper element.
|
|
142
|
-
* @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'
|
|
143
|
-
* @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.
|
|
144
|
-
* @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
|
|
145
|
-
* @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.
|
|
146
|
-
* @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.
|
|
147
|
-
* @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.
|
|
148
|
-
*
|
|
149
|
-
* @return {JSX.Element} The rendered server-side content.
|
|
150
|
-
*/
|
|
151
|
-
export function ServerSideRenderWithPostId({
|
|
76
|
+
function ServerSideRenderWithPostId({
|
|
152
77
|
urlQueryArgs = EMPTY_OBJECT,
|
|
153
78
|
...props
|
|
154
79
|
}) {
|
|
155
|
-
const currentPostId = useSelect(select => {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
// eslint-disable-next-line @wordpress/data-no-store-string-literals
|
|
159
|
-
const postId = select('core/editor')?.getCurrentPostId();
|
|
160
|
-
|
|
161
|
-
// For templates and template parts we use a custom ID format.
|
|
162
|
-
// Since they aren't real posts, we don't want to use their ID
|
|
163
|
-
// for server-side rendering. Since they use a string based ID,
|
|
164
|
-
// we can assume real post IDs are numbers.
|
|
165
|
-
return postId && typeof postId === 'number' ? postId : null;
|
|
80
|
+
const currentPostId = useSelect((select) => {
|
|
81
|
+
const postId = select("core/editor")?.getCurrentPostId();
|
|
82
|
+
return postId && typeof postId === "number" ? postId : null;
|
|
166
83
|
}, []);
|
|
167
84
|
const newUrlQueryArgs = useMemo(() => {
|
|
168
85
|
if (!currentPostId) {
|
|
@@ -173,9 +90,10 @@ export function ServerSideRenderWithPostId({
|
|
|
173
90
|
...urlQueryArgs
|
|
174
91
|
};
|
|
175
92
|
}, [currentPostId, urlQueryArgs]);
|
|
176
|
-
return
|
|
177
|
-
urlQueryArgs: newUrlQueryArgs,
|
|
178
|
-
...props
|
|
179
|
-
});
|
|
93
|
+
return /* @__PURE__ */ jsx(ServerSideRender, { urlQueryArgs: newUrlQueryArgs, ...props });
|
|
180
94
|
}
|
|
181
|
-
|
|
95
|
+
export {
|
|
96
|
+
ServerSideRender,
|
|
97
|
+
ServerSideRenderWithPostId
|
|
98
|
+
};
|
|
99
|
+
//# sourceMappingURL=server-side-render.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"names":["RawHTML","useEffect","useState","useRef","useMemo","__","sprintf","Placeholder","Spinner","useSelect","useServerSideRender","jsx","_jsx","jsxs","_jsxs","EMPTY_OBJECT","DefaultEmptyResponsePlaceholder","className","children","DefaultErrorResponsePlaceholder","message","errorMessage","DefaultLoadingResponsePlaceholder","showLoader","setShowLoader","timeout","setTimeout","clearTimeout","style","position","top","left","marginTop","marginLeft","opacity","ServerSideRender","props","prevContentRef","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","restProps","content","status","error","current","ServerSideRenderWithPostId","urlQueryArgs","currentPostId","select","postId","getCurrentPostId","newUrlQueryArgs","post_id"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n * return (\n * <ServerSideRender\n * block=\"core/archives\"\n * attributes={ { showPostCounts: true } }\n * urlQueryArgs={ { customArg: 'value' } }\n * className=\"custom-class\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.block The identifier of the block to be serverside rendered.\n * @param {Object} props.attributes The block attributes to be sent to the server for rendering.\n * @param {string} [props.className] Additional classes to apply to the wrapper element.\n * @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.\n * @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.\n *\n * @return {JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/server-side-render.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n * return (\n * <ServerSideRender\n * block=\"core/archives\"\n * attributes={ { showPostCounts: true } }\n * urlQueryArgs={ { customArg: 'value' } }\n * className=\"custom-class\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.block The identifier of the block to be serverside rendered.\n * @param {Object} props.attributes The block attributes to be sent to the server for rendering.\n * @param {string} [props.className] Additional classes to apply to the wrapper element.\n * @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.\n * @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.\n *\n * @return {JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
|
|
5
|
+
"mappings": "AAuBE,cA2BA,YA3BA;AApBF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,iBAAiB;AAK1B,SAAS,2BAA2B;AAEpC,MAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAI;AACzD,SACC,oBAAC,eAAY,WACV,aAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC,EAAE,SAAS,UAAU,GAAI;AAClE,QAAM,eAAe;AAAA;AAAA,IAEpB,GAAI,yBAA0B;AAAA,IAC9B;AAAA,EACD;AACA,SAAO,oBAAC,eAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC,EAAE,SAAS,GAAI;AAC1D,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,KAAM;AAEtD,YAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,qBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACV;AAAA,IAED,oBAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAAQ;AACzC,QAAM,iBAAiB,OAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,IAAI,oBAAqB,SAAU;AAGlE,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,oBAAC,8BAA6B,GAAG,OAC9B,WAAC,CAAE,eAAe,WACnB,oBAAC,WAAQ,WACN,yBAAe,SAClB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,oBAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,oBAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,oBAAC,WAAQ,WAA0B,mBAAS;AACpD;AAuCO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAI;AACH,QAAM,gBAAgB,UAAW,CAAE,WAAY;AAI9C,UAAM,SAAS,OAAQ,aAAc,GAAG,iBAAiB;AAMzD,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,kBAAkB,QAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,oBAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|