@common-stack/components-pro 6.0.1-alpha.0 → 6.0.2-alpha.2
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/lib/slot-fill/bubbles-virtually/slot.js +1 -1
- package/lib/slot-fill/bubbles-virtually/use-merge-refs.d.ts +44 -0
- package/lib/slot-fill/bubbles-virtually/use-merge-refs.js +120 -0
- package/lib/slot-fill/bubbles-virtually/use-merge-refs.js.map +1 -0
- package/lib/slot-fill/utils/replaceServerFills.js +4 -2
- package/lib/slot-fill/utils/replaceServerFills.js.map +1 -1
- package/package.json +3 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default,{forwardRef,useContext,useRef,useLayoutEffect}from'react';import
|
|
1
|
+
import React__default,{forwardRef,useContext,useRef,useLayoutEffect}from'react';import useMergeRefs from'./use-merge-refs.js';import SlotFillContext from'./slot-fill-context.js';function Slot({ name, fillProps = {}, as: Component = 'div', ...props }, forwardedRef) {
|
|
2
2
|
const { registerSlot, unregisterSlot, ...registry } = useContext(SlotFillContext);
|
|
3
3
|
const ref = useRef();
|
|
4
4
|
useLayoutEffect(() => {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Merges refs into one ref callback.
|
|
3
|
+
*
|
|
4
|
+
* It also ensures that the merged ref callbacks are only called when they
|
|
5
|
+
* change (as a result of a `useCallback` dependency update) OR when the ref
|
|
6
|
+
* value changes, just as React does when passing a single ref callback to the
|
|
7
|
+
* component.
|
|
8
|
+
*
|
|
9
|
+
* As expected, if you pass a new function on every render, the ref callback
|
|
10
|
+
* will be called after every render.
|
|
11
|
+
*
|
|
12
|
+
* If you don't wish a ref callback to be called after every render, wrap it
|
|
13
|
+
* with `useCallback( callback, dependencies )`. When a dependency changes, the
|
|
14
|
+
* old ref callback will be called with `null` and the new ref callback will be
|
|
15
|
+
* called with the same value.
|
|
16
|
+
*
|
|
17
|
+
* To make ref callbacks easier to use, you can also pass the result of
|
|
18
|
+
* `useRefEffect`, which makes cleanup easier by allowing you to return a
|
|
19
|
+
* cleanup function instead of handling `null`.
|
|
20
|
+
*
|
|
21
|
+
* It's also possible to _disable_ a ref (and its behaviour) by simply not
|
|
22
|
+
* passing the ref.
|
|
23
|
+
*
|
|
24
|
+
* ```jsx
|
|
25
|
+
* const ref = useRefEffect( ( node ) => {
|
|
26
|
+
* node.addEventListener( ... );
|
|
27
|
+
* return () => {
|
|
28
|
+
* node.removeEventListener( ... );
|
|
29
|
+
* };
|
|
30
|
+
* }, [ ...dependencies ] );
|
|
31
|
+
* const otherRef = useRef();
|
|
32
|
+
* const mergedRefs useMergeRefs( [
|
|
33
|
+
* enabled && ref,
|
|
34
|
+
* otherRef,
|
|
35
|
+
* ] );
|
|
36
|
+
* return <div ref={ mergedRefs } />;
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @template {import('react').Ref<any>} TRef
|
|
40
|
+
* @param {Array<TRef>} refs The refs to be merged.
|
|
41
|
+
*
|
|
42
|
+
* @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
|
|
43
|
+
*/
|
|
44
|
+
export default function useMergeRefs(refs: any): (value: any) => void;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import {useRef,useLayoutEffect,useCallback}from'@wordpress/element';// THIS IS COPIED FROM https://github.com/WordPress/gutenberg/blob/7498ac2ed444e7737086e95d7da7ff2229fda3fe/packages/compose/src/hooks/use-merge-refs/index.js
|
|
2
|
+
// DATE: August 20, 2024
|
|
3
|
+
/**
|
|
4
|
+
* WordPress dependencies
|
|
5
|
+
*/
|
|
6
|
+
/* eslint-disable jsdoc/valid-types */
|
|
7
|
+
/**
|
|
8
|
+
* @template T
|
|
9
|
+
* @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef
|
|
10
|
+
*/
|
|
11
|
+
/* eslint-enable jsdoc/valid-types */
|
|
12
|
+
/**
|
|
13
|
+
* @template T
|
|
14
|
+
* @param {import('react').Ref<T>} ref
|
|
15
|
+
* @param {T} value
|
|
16
|
+
*/
|
|
17
|
+
function assignRef(ref, value) {
|
|
18
|
+
if (typeof ref === 'function') {
|
|
19
|
+
ref(value);
|
|
20
|
+
}
|
|
21
|
+
else if (ref && ref.hasOwnProperty('current')) {
|
|
22
|
+
/* eslint-disable jsdoc/no-undefined-types */
|
|
23
|
+
/** @type {import('react').MutableRefObject<T>} */ (ref).current =
|
|
24
|
+
value;
|
|
25
|
+
/* eslint-enable jsdoc/no-undefined-types */
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Merges refs into one ref callback.
|
|
30
|
+
*
|
|
31
|
+
* It also ensures that the merged ref callbacks are only called when they
|
|
32
|
+
* change (as a result of a `useCallback` dependency update) OR when the ref
|
|
33
|
+
* value changes, just as React does when passing a single ref callback to the
|
|
34
|
+
* component.
|
|
35
|
+
*
|
|
36
|
+
* As expected, if you pass a new function on every render, the ref callback
|
|
37
|
+
* will be called after every render.
|
|
38
|
+
*
|
|
39
|
+
* If you don't wish a ref callback to be called after every render, wrap it
|
|
40
|
+
* with `useCallback( callback, dependencies )`. When a dependency changes, the
|
|
41
|
+
* old ref callback will be called with `null` and the new ref callback will be
|
|
42
|
+
* called with the same value.
|
|
43
|
+
*
|
|
44
|
+
* To make ref callbacks easier to use, you can also pass the result of
|
|
45
|
+
* `useRefEffect`, which makes cleanup easier by allowing you to return a
|
|
46
|
+
* cleanup function instead of handling `null`.
|
|
47
|
+
*
|
|
48
|
+
* It's also possible to _disable_ a ref (and its behaviour) by simply not
|
|
49
|
+
* passing the ref.
|
|
50
|
+
*
|
|
51
|
+
* ```jsx
|
|
52
|
+
* const ref = useRefEffect( ( node ) => {
|
|
53
|
+
* node.addEventListener( ... );
|
|
54
|
+
* return () => {
|
|
55
|
+
* node.removeEventListener( ... );
|
|
56
|
+
* };
|
|
57
|
+
* }, [ ...dependencies ] );
|
|
58
|
+
* const otherRef = useRef();
|
|
59
|
+
* const mergedRefs useMergeRefs( [
|
|
60
|
+
* enabled && ref,
|
|
61
|
+
* otherRef,
|
|
62
|
+
* ] );
|
|
63
|
+
* return <div ref={ mergedRefs } />;
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* @template {import('react').Ref<any>} TRef
|
|
67
|
+
* @param {Array<TRef>} refs The refs to be merged.
|
|
68
|
+
*
|
|
69
|
+
* @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
|
|
70
|
+
*/
|
|
71
|
+
function useMergeRefs(refs) {
|
|
72
|
+
const element = useRef();
|
|
73
|
+
const isAttached = useRef(false);
|
|
74
|
+
const didElementChange = useRef(false);
|
|
75
|
+
/* eslint-disable jsdoc/no-undefined-types */
|
|
76
|
+
/** @type {import('react').MutableRefObject<TRef[]>} */
|
|
77
|
+
/* eslint-enable jsdoc/no-undefined-types */
|
|
78
|
+
const previousRefs = useRef([]);
|
|
79
|
+
const currentRefs = useRef(refs);
|
|
80
|
+
// Update on render before the ref callback is called, so the ref callback
|
|
81
|
+
// always has access to the current refs.
|
|
82
|
+
currentRefs.current = refs;
|
|
83
|
+
// If any of the refs change, call the previous ref with `null` and the new
|
|
84
|
+
// ref with the node, except when the element changes in the same cycle, in
|
|
85
|
+
// which case the ref callbacks will already have been called.
|
|
86
|
+
useLayoutEffect(() => {
|
|
87
|
+
if (didElementChange.current === false &&
|
|
88
|
+
isAttached.current === true) {
|
|
89
|
+
refs.forEach((ref, index) => {
|
|
90
|
+
const previousRef = previousRefs.current[index];
|
|
91
|
+
if (ref !== previousRef) {
|
|
92
|
+
assignRef(previousRef, null);
|
|
93
|
+
assignRef(ref, element.current);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
previousRefs.current = refs;
|
|
98
|
+
}, refs);
|
|
99
|
+
// No dependencies, must be reset after every render so ref callbacks are
|
|
100
|
+
// correctly called after a ref change.
|
|
101
|
+
useLayoutEffect(() => {
|
|
102
|
+
didElementChange.current = false;
|
|
103
|
+
});
|
|
104
|
+
// There should be no dependencies so that `callback` is only called when
|
|
105
|
+
// the node changes.
|
|
106
|
+
return useCallback((value) => {
|
|
107
|
+
// Update the element so it can be used when calling ref callbacks on a
|
|
108
|
+
// dependency change.
|
|
109
|
+
assignRef(element, value);
|
|
110
|
+
didElementChange.current = true;
|
|
111
|
+
isAttached.current = value !== null;
|
|
112
|
+
// When an element changes, the current ref callback should be called
|
|
113
|
+
// with the new element and the previous one with `null`.
|
|
114
|
+
const refsToAssign = value ? currentRefs.current : previousRefs.current;
|
|
115
|
+
// Update the latest refs.
|
|
116
|
+
for (const ref of refsToAssign) {
|
|
117
|
+
assignRef(ref, value);
|
|
118
|
+
}
|
|
119
|
+
}, []);
|
|
120
|
+
}export{useMergeRefs as default};//# sourceMappingURL=use-merge-refs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-merge-refs.js","sources":["../../../src/slot-fill/bubbles-virtually/use-merge-refs.tsx"],"sourcesContent":[null],"names":[],"mappings":"oEAAA;AAEA;AAEA;;AAEG;AAGH;AACA;;;AAGG;AACH;AAEA;;;;AAIG;AACH,SAAS,SAAS,CAAE,GAAG,EAAE,KAAK,EAAA;AAC7B,IAAA,IAAK,OAAO,GAAG,KAAK,UAAU,EAAG;QAChC,GAAG,CAAE,KAAK,CAAE,CAAC;KACb;SAAM,IAAK,GAAG,IAAI,GAAG,CAAC,cAAc,CAAE,SAAS,CAAE,EAAG;;AAEpD,2DAAmD,CAAE,GAAG,EAAG,OAAO;AACjE,YAAA,KAAK,CAAC;;KAEP;AACF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;AACqB,SAAA,YAAY,CAAE,IAAI,EAAA;AACzC,IAAA,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;AACzB,IAAA,MAAM,UAAU,GAAG,MAAM,CAAE,KAAK,CAAE,CAAC;AACnC,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAE,KAAK,CAAE,CAAC;;;;AAIzC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAE,EAAE,CAAE,CAAC;AAClC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAE,IAAI,CAAE,CAAC;;;AAInC,IAAA,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;;;;IAK3B,eAAe,CAAE,MAAK;AACrB,QAAA,IACC,gBAAgB,CAAC,OAAO,KAAK,KAAK;AAClC,YAAA,UAAU,CAAC,OAAO,KAAK,IAAI,EAC1B;YACD,IAAI,CAAC,OAAO,CAAE,CAAE,GAAG,EAAE,KAAK,KAAK;gBAC9B,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAE,KAAK,CAAE,CAAC;AAClD,gBAAA,IAAK,GAAG,KAAK,WAAW,EAAG;AAC1B,oBAAA,SAAS,CAAE,WAAW,EAAE,IAAI,CAAE,CAAC;AAC/B,oBAAA,SAAS,CAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAE,CAAC;iBAClC;AACF,aAAC,CAAE,CAAC;SACJ;AAED,QAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;KAC5B,EAAE,IAAI,CAAE,CAAC;;;IAIV,eAAe,CAAE,MAAK;AACrB,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;AAClC,KAAC,CAAE,CAAC;;;AAIJ,IAAA,OAAO,WAAW,CAAE,CAAE,KAAK,KAAK;;;AAG/B,QAAA,SAAS,CAAE,OAAO,EAAE,KAAK,CAAE,CAAC;AAE5B,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;AAChC,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;;;AAIpC,QAAA,MAAM,YAAY,GAAG,KAAK,GAAG,WAAW,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;;AAGxE,QAAA,KAAM,MAAM,GAAG,IAAI,YAAY,EAAG;AACjC,YAAA,SAAS,CAAE,GAAG,EAAE,KAAK,CAAE,CAAC;SACxB;KACD,EAAE,EAAE,CAAE,CAAC;AACT"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import*as cheerio from'cheerio'
|
|
1
|
+
import*as cheerio from'cheerio';/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
/* eslint-disable no-param-reassign */
|
|
3
|
+
/**
|
|
2
4
|
* Replace the wrapped dom element with `[data-slot-name]` to its children,
|
|
3
5
|
* setting attrib [data-slot-name] same as parent.
|
|
4
6
|
*
|
|
@@ -13,7 +15,7 @@ const replaceServerFills = (htmlContent, fills) => {
|
|
|
13
15
|
$(`[data-slot-name=slot-${name}]`).each((i, node) => {
|
|
14
16
|
const search = $(node).prop('outerHTML');
|
|
15
17
|
node.children.forEach((child) => {
|
|
16
|
-
child.attribs['data-slot-name'] =
|
|
18
|
+
child.attribs['data-slot-name'] = `slot-${name}`;
|
|
17
19
|
});
|
|
18
20
|
const replace = $(node).html() || '';
|
|
19
21
|
newContent = newContent.replace(search, replace);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"replaceServerFills.js","sources":["../../../src/slot-fill/utils/replaceServerFills.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"replaceServerFills.js","sources":["../../../src/slot-fill/utils/replaceServerFills.ts"],"sourcesContent":[null],"names":[],"mappings":"gCAAA;AACA;AAEA;;;;;;;AAOG;MACU,kBAAkB,GAAG,CAAC,WAAmB,EAAE,KAAe,KAAI;IACvE,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,UAAU,GAAG,WAAW,CAAC;AAE7B,IAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACnB,QAAA,CAAC,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAAA,CAAA,CAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,KAAI;YAChD,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;gBAC3B,KAAoC,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAC;AACrF,aAAC,CAAC,CAAC;YACH,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;YACrC,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACrD,SAAC,CAAC,CAAC;AACP,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,UAAU,CAAC;AACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@common-stack/components-pro",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.2-alpha.2",
|
|
4
4
|
"description": "browser plugin for git",
|
|
5
5
|
"homepage": "https://github.com/cdmbase/fullstack-pro#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -30,12 +30,11 @@
|
|
|
30
30
|
"watch": "npm run build:lib:watch"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@wordpress/compose": "^6.30.0",
|
|
34
33
|
"@wordpress/element": "^5.30.0",
|
|
35
34
|
"@wordpress/hooks": "^3.53.0",
|
|
36
35
|
"@wordpress/is-shallow-equal": "^4.53.0",
|
|
37
36
|
"@wordpress/warning": "^2.53.0",
|
|
38
|
-
"cheerio": "^1.0.0
|
|
37
|
+
"cheerio": "^1.0.0",
|
|
39
38
|
"history-with-query": "^4.10.4",
|
|
40
39
|
"sort-keys": "^4.1.0",
|
|
41
40
|
"valtio": "^1.7.0"
|
|
@@ -53,5 +52,5 @@
|
|
|
53
52
|
"typescript": {
|
|
54
53
|
"definition": "lib/index.d.ts"
|
|
55
54
|
},
|
|
56
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "3d13ba346c1d248c87c53ef1c95037ca83f0b5d1"
|
|
57
56
|
}
|