@teambit/react.ui.component-highlighter 0.0.0-916f9ba350a2e70675bb2a77285205397c3c2bb6 → 0.0.0-dea43cdb30f863386b0716b1f23f4a7b3a6abf6a
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/dist/hover-highlighter/bubble-to-component.d.ts +5 -0
- package/dist/hover-highlighter/bubble-to-component.js +13 -0
- package/dist/hover-highlighter/bubble-to-component.js.map +1 -1
- package/dist/{preview-1758903691684.js → preview-1760636955086.js} +6 -6
- package/hover-highlighter/bubble-to-component.tsx +13 -0
- package/package.json +6 -6
|
@@ -15,5 +15,10 @@ type BubblingOptions = {
|
|
|
15
15
|
export declare function bubbleToComponent(element: HTMLElement | null, { elementRule, componentRule, propagateSameParents }?: BubblingOptions): {
|
|
16
16
|
element: HTMLElement;
|
|
17
17
|
components: ReactComponentMetaHolder[];
|
|
18
|
+
} | {
|
|
19
|
+
element: any;
|
|
20
|
+
components: {
|
|
21
|
+
__bit_component: any;
|
|
22
|
+
}[];
|
|
18
23
|
};
|
|
19
24
|
export {};
|
|
@@ -6,6 +6,19 @@ const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@t
|
|
|
6
6
|
const rule_matcher_1 = require("../rule-matcher");
|
|
7
7
|
/** go up the dom tree until reaching a react bit component */
|
|
8
8
|
function bubbleToComponent(element, { elementRule, componentRule, propagateSameParents = true } = {}) {
|
|
9
|
+
var _a, _b, _c, _d, _e;
|
|
10
|
+
// check if the element is rendered in Vue
|
|
11
|
+
if (element === null || element === void 0 ? void 0 : element.__vnode) {
|
|
12
|
+
const vueComp = (_b = (_a = element.__vnode) === null || _a === void 0 ? void 0 : _a.ctx) === null || _b === void 0 ? void 0 : _b.type;
|
|
13
|
+
const comp = vueComp === null || vueComp === void 0 ? void 0 : vueComp.__bit_component;
|
|
14
|
+
const compEl = (_e = (_d = (_c = element.__vnode) === null || _c === void 0 ? void 0 : _c.ctx) === null || _d === void 0 ? void 0 : _d.ctx) === null || _e === void 0 ? void 0 : _e.$el;
|
|
15
|
+
if (compEl && comp) {
|
|
16
|
+
return {
|
|
17
|
+
element: compEl,
|
|
18
|
+
components: [{ [react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]: comp }],
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
9
22
|
let current = bubbleToFirstComponent(element, elementRule, componentRule);
|
|
10
23
|
if (!propagateSameParents)
|
|
11
24
|
return current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bubble-to-component.js","sourceRoot":"","sources":["../../hover-highlighter/bubble-to-component.tsx"],"names":[],"mappings":";;AAqBA,
|
|
1
|
+
{"version":3,"file":"bubble-to-component.js","sourceRoot":"","sources":["../../hover-highlighter/bubble-to-component.tsx"],"names":[],"mappings":";;AAqBA,8CAiCC;AAtDD,oFAAiF;AACjF,oJAI6E;AAC7E,kDAAmG;AAcnG,8DAA8D;AAC9D,SAAgB,iBAAiB,CAC/B,OAA2B,EAC3B,EAAE,WAAW,EAAE,aAAa,EAAE,oBAAoB,GAAG,IAAI,KAAsB,EAAE;;IAEjF,0CAA0C;IAC1C,IAAK,OAAe,aAAf,OAAO,uBAAP,OAAO,CAAU,OAAO,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,MAAA,MAAC,OAAe,CAAC,OAAO,0CAAE,GAAG,0CAAE,IAAI,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAC;QACtC,MAAM,MAAM,GAAG,MAAA,MAAA,MAAC,OAAe,CAAC,OAAO,0CAAE,GAAG,0CAAE,GAAG,0CAAE,GAAG,CAAC;QACvD,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,OAAO;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,CAAC,EAAE,CAAC,+EAAkB,CAAC,EAAE,IAAI,EAAE,CAAC;aAC7C,CAAC;QACJ,CAAC;IACH,CAAC;IAED,IAAI,OAAO,GAAG,sBAAsB,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;IAC1E,IAAI,CAAC,oBAAoB;QAAE,OAAO,OAAO,CAAC;IAE1C,OAAO,OAAO,EAAE,CAAC;QACf,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC;QACpD,MAAM,MAAM,GAAG,sBAAsB,CAAC,aAAa,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;QAEjF,MAAM,cAAc,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAC3D,MAAM,oBAAoB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAEhE,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,+EAAkB,EAAE,EAAE,OAAK,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,+EAAkB,EAAE,EAAE,CAAA;YAAE,OAAO,OAAO,CAAC;QAE9G,OAAO,GAAG,MAAM,CAAC;IACnB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,8DAA8D;AAC9D,SAAS,sBAAsB,CAC7B,OAA2B,EAC3B,WAAuB,EACvB,aAAkC;IAElC,KAAK,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,aAAa,EAAE,CAAC;QACrE,OAAO,GAAG,IAAA,0CAAa,EAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,IAAI,IAAA,0BAAW,EAAC,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC;YACtC,MAAM,UAAU,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YAExC,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;YACpD,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,UAAU,EAAE,kBAAkB;aAC/B,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as compositions_0 from '/tmp/capsules-root/sign-capsules/2025-
|
|
2
|
-
import * as compositions_1 from '/tmp/capsules-root/sign-capsules/2025-
|
|
3
|
-
import * as compositions_2 from '/tmp/capsules-root/sign-capsules/2025-
|
|
4
|
-
import * as compositions_3 from '/tmp/capsules-root/sign-capsules/2025-
|
|
5
|
-
import * as overview_0 from '/tmp/capsules-root/sign-capsules/2025-
|
|
1
|
+
import * as compositions_0 from '/tmp/capsules-root/sign-capsules/2025-9-16/xo7lj3/teambit.react_ui_component-highlighter@dea43cdb30f863386b0716b1f23f4a7b3a6abf6a/dist/children-highlighter/children-highlighter.composition.js';
|
|
2
|
+
import * as compositions_1 from '/tmp/capsules-root/sign-capsules/2025-9-16/xo7lj3/teambit.react_ui_component-highlighter@dea43cdb30f863386b0716b1f23f4a7b3a6abf6a/dist/element-highlighter/element-highlighter.compositions.js';
|
|
3
|
+
import * as compositions_2 from '/tmp/capsules-root/sign-capsules/2025-9-16/xo7lj3/teambit.react_ui_component-highlighter@dea43cdb30f863386b0716b1f23f4a7b3a6abf6a/dist/hover-highlighter/hover-highlighter.compositions.js';
|
|
4
|
+
import * as compositions_3 from '/tmp/capsules-root/sign-capsules/2025-9-16/xo7lj3/teambit.react_ui_component-highlighter@dea43cdb30f863386b0716b1f23f4a7b3a6abf6a/dist/label/component-strip.compositions.js';
|
|
5
|
+
import * as overview_0 from '/tmp/capsules-root/sign-capsules/2025-9-16/xo7lj3/teambit.react_ui_component-highlighter@dea43cdb30f863386b0716b1f23f4a7b3a6abf6a/dist/component-highlighter.docs.md';
|
|
6
6
|
|
|
7
7
|
export const compositions = [compositions_0, compositions_1, compositions_2, compositions_3];
|
|
8
8
|
export const overview = [overview_0];
|
|
9
9
|
|
|
10
|
-
export const compositions_metadata = {"compositions":[{"displayName":"Children highlighter preview","identifier":"ChildrenHighlighterPreview"},{"displayName":"Children highlighter with custom colors","identifier":"ChildrenHighlighterWithCustomColors"},{"displayName":"Children highlighter inside ignore","identifier":"ChildrenHighlighterInsideIgnore"},{"displayName":"Children highlighter with rule","identifier":"ChildrenHighlighterWithRule"},{"displayName":"Children highlighter with component rule","identifier":"ChildrenHighlighterWithComponentRule"},{"displayName":"Highlighted element","identifier":"HighlightedElement"},{"displayName":"Customized","identifier":"Customized"},{"displayName":"Sizes","identifier":"Sizes"},{"displayName":"Moving element","identifier":"MovingElement"},{"displayName":"Fullscreen element","identifier":"FullscreenElement"},{"displayName":"Offscreen elements","identifier":"OffscreenElements"},{"displayName":"
|
|
10
|
+
export const compositions_metadata = {"compositions":[{"displayName":"Children highlighter preview","identifier":"ChildrenHighlighterPreview"},{"displayName":"Children highlighter with custom colors","identifier":"ChildrenHighlighterWithCustomColors"},{"displayName":"Children highlighter inside ignore","identifier":"ChildrenHighlighterInsideIgnore"},{"displayName":"Children highlighter with rule","identifier":"ChildrenHighlighterWithRule"},{"displayName":"Children highlighter with component rule","identifier":"ChildrenHighlighterWithComponentRule"},{"displayName":"Highlighted element","identifier":"HighlightedElement"},{"displayName":"Customized","identifier":"Customized"},{"displayName":"Sizes","identifier":"Sizes"},{"displayName":"Moving element","identifier":"MovingElement"},{"displayName":"Fullscreen element","identifier":"FullscreenElement"},{"displayName":"Offscreen elements","identifier":"OffscreenElements"},{"displayName":"Show when hovering","identifier":"ShowWhenHovering"},{"displayName":"Unmounting element","identifier":"UnmountingElement"},{"displayName":"Hover exclusion zones","identifier":"HoverExclusionZones"},{"displayName":"Component strip preview","identifier":"ComponentStripPreview"}]};
|
|
@@ -23,6 +23,19 @@ export function bubbleToComponent(
|
|
|
23
23
|
element: HTMLElement | null,
|
|
24
24
|
{ elementRule, componentRule, propagateSameParents = true }: BubblingOptions = {}
|
|
25
25
|
) {
|
|
26
|
+
// check if the element is rendered in Vue
|
|
27
|
+
if ((element as any)?.__vnode) {
|
|
28
|
+
const vueComp = (element as any).__vnode?.ctx?.type;
|
|
29
|
+
const comp = vueComp?.__bit_component;
|
|
30
|
+
const compEl = (element as any).__vnode?.ctx?.ctx?.$el;
|
|
31
|
+
if (compEl && comp) {
|
|
32
|
+
return {
|
|
33
|
+
element: compEl,
|
|
34
|
+
components: [{ [componentMetaField]: comp }],
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
26
39
|
let current = bubbleToFirstComponent(element, elementRule, componentRule);
|
|
27
40
|
if (!propagateSameParents) return current;
|
|
28
41
|
|
package/package.json
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/react.ui.component-highlighter",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-dea43cdb30f863386b0716b1f23f4a7b3a6abf6a",
|
|
4
4
|
"homepage": "https://bit.cloud/teambit/react/ui/component-highlighter",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.react",
|
|
8
8
|
"name": "ui/component-highlighter",
|
|
9
|
-
"version": "
|
|
9
|
+
"version": "dea43cdb30f863386b0716b1f23f4a7b3a6abf6a"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"get-xpath": "^3.0.1",
|
|
13
13
|
"classnames": "^2.3.1",
|
|
14
14
|
"@floating-ui/react-dom": "0.7.2",
|
|
15
15
|
"uuid": "^10.0.0",
|
|
16
|
+
"use-debounce": "^8.0.1",
|
|
16
17
|
"lodash.compact": "^3.0.1",
|
|
17
18
|
"url-join": "^4.0.1",
|
|
18
19
|
"@tippyjs/react": "4.2.0",
|
|
19
|
-
"use-debounce": "^8.0.1",
|
|
20
20
|
"core-js": "^3.0.0",
|
|
21
21
|
"@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
|
|
22
22
|
"@teambit/component-id": "1.2.2",
|
|
23
23
|
"@teambit/react.modules.dom-to-react": "0.2.0",
|
|
24
|
+
"@teambit/react.ui.hover-selector": "0.2.0",
|
|
24
25
|
"@teambit/base-ui.routing.native-link": "1.0.0",
|
|
25
|
-
"@teambit/component.modules.component-url": "0.0.169"
|
|
26
|
-
"@teambit/react.ui.hover-selector": "0.2.0"
|
|
26
|
+
"@teambit/component.modules.component-url": "0.0.169"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^17.0.8",
|
|
30
30
|
"@testing-library/react": "^12.1.5",
|
|
31
31
|
"@types/uuid": "3.4.9",
|
|
32
|
+
"@types/react-dom": "^17.0.5",
|
|
32
33
|
"@types/lodash.compact": "3.0.6",
|
|
33
34
|
"@types/url-join": "^4.0.0",
|
|
34
|
-
"@types/react-dom": "^17.0.5",
|
|
35
35
|
"@types/node": "12.20.4",
|
|
36
36
|
"@types/jest": "^26.0.0",
|
|
37
37
|
"@babel/runtime": "7.20.0",
|