@webview-native-ui/engine 0.0.4 → 0.0.6
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/README.md +1 -0
- package/dist/dom/visibility.js +1 -0
- package/dist/projection/scope.js +1 -1
- package/dist/projection/styles.d.ts +2 -2
- package/dist/projection/styles.js +20 -9
- package/dist/projection/web.js +259 -185
- package/dist/types.d.ts +4 -0
- package/docs/capacitor-plugin.md +4 -0
- package/docs/cordova-plugin.md +4 -0
- package/docs/projection-containers.md +195 -0
- package/docs/projection.md +30 -16
- package/ios/Sources/WebViewNativeUIEngine/CoveredSnapshots.swift +2 -2
- package/ios/Sources/WebViewNativeUIEngine/NativeUIProjection.swift +35 -22
- package/ios/Sources/WebViewNativeUIEngine/Resources/native-ui-engine.js +20 -12
- package/ios/Sources/WebViewNativeUIEngine/ScrollBindings.swift +1 -0
- package/ios/Sources/WebViewNativeUIEngine/ScrollTracker.swift +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -44,6 +44,7 @@ The current API is pre-1.0. Use matching, pinned Engine versions across npm and
|
|
|
44
44
|
|
|
45
45
|
## Further reading
|
|
46
46
|
|
|
47
|
+
- [Projection container support](docs/projection-containers.md) — supported HTML and Ionic destinations, sizing conditions and wrapper examples.
|
|
47
48
|
- [Projection behavior and advanced integration](docs/projection.md) — DOM requirements, lifecycle, fallback policies, optional Ionic support and lower-level APIs.
|
|
48
49
|
- [Development and releases](docs/maintenance.md) — repository structure, validation and publishing.
|
|
49
50
|
|
package/dist/dom/visibility.js
CHANGED
|
@@ -13,6 +13,7 @@ export const getUnprojectedVisibility = (element) => {
|
|
|
13
13
|
for (const attribute of Array.from(node.attributes)) {
|
|
14
14
|
if (attribute.name === 'data-native-ui-snapshot-source' ||
|
|
15
15
|
attribute.name === 'data-native-ui-snapshot-prepared' ||
|
|
16
|
+
attribute.name === 'data-native-ui-snapshot-content' ||
|
|
16
17
|
attribute.name.startsWith('data-native-ui-session-'))
|
|
17
18
|
markers.push({ node, name: attribute.name, value: attribute.value });
|
|
18
19
|
}
|
package/dist/projection/scope.js
CHANGED
|
@@ -3,6 +3,6 @@ export const createWebProjectionScope = (element, namespace) => {
|
|
|
3
3
|
if (element.nodeType !== 1 || element.namespaceURI !== 'http://www.w3.org/1999/xhtml' || !element.ownerDocument || !('style' in element))
|
|
4
4
|
throw new TypeError('A Web projection scope requires an HTMLElement fallback');
|
|
5
5
|
if (element.matches('img, input, textarea, select, video, audio, canvas, iframe, embed, object, br, hr, area, base, link, meta, source, track, wbr'))
|
|
6
|
-
throw new TypeError('A Web projection fallback must
|
|
6
|
+
throw new TypeError('A Web projection fallback must be a container element; use the existing fallback container');
|
|
7
7
|
return Object.freeze({ element, namespace });
|
|
8
8
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
1
|
+
export declare const snapshotStyles = "\n@layer native-ui-projection {\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content]), :is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content]) *, :is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content])::part(native) { visibility: hidden !important; }\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content])::before, :is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content])::after,\n:is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content]) *::before, :is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content]) *::after {\n visibility: hidden !important;\n}\n}\n[data-native-ui-snapshot-visible] { opacity:1!important;overflow:visible!important; }\n[data-native-ui-snapshot-visible][data-native-ui-snapshot-positioned] { position:relative!important; }\n";
|
|
2
|
+
export declare const snapshotShadowStyles = "\n@layer native-ui-projection {\n:host([data-native-ui-snapshot-content]),\n:host([data-native-ui-snapshot-content])::before,\n:host([data-native-ui-snapshot-content])::after,\n:host([data-native-ui-snapshot-content]) *,\n:host([data-native-ui-snapshot-content]) *::before,\n:host([data-native-ui-snapshot-content]) *::after {\n visibility: hidden !important;\n}\n}\n";
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
/** Image presentation only; Native/Web ownership styling stays with the renderer. */
|
|
2
|
+
const hidden = ':is([data-native-ui-snapshot-source], [data-native-ui-snapshot-prepared], [data-native-ui-snapshot-content])';
|
|
2
3
|
export const snapshotStyles = `
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
visibility:visible!important;opacity:0!important;will-change:opacity!important;
|
|
10
|
-
pointer-events:none!important;image-rendering:pixelated!important;
|
|
4
|
+
@layer native-ui-projection {
|
|
5
|
+
${hidden}, ${hidden} *, ${hidden}::part(native) { visibility: hidden !important; }
|
|
6
|
+
${hidden}::before, ${hidden}::after,
|
|
7
|
+
${hidden} *::before, ${hidden} *::after {
|
|
8
|
+
visibility: hidden !important;
|
|
9
|
+
}
|
|
11
10
|
}
|
|
12
11
|
[data-native-ui-snapshot-visible] { opacity:1!important;overflow:visible!important; }
|
|
13
|
-
[data-native-ui-snapshot-visible][data-native-ui-snapshot
|
|
12
|
+
[data-native-ui-snapshot-visible][data-native-ui-snapshot-positioned] { position:relative!important; }
|
|
13
|
+
`;
|
|
14
|
+
export const snapshotShadowStyles = `
|
|
15
|
+
@layer native-ui-projection {
|
|
16
|
+
:host([data-native-ui-snapshot-content]),
|
|
17
|
+
:host([data-native-ui-snapshot-content])::before,
|
|
18
|
+
:host([data-native-ui-snapshot-content])::after,
|
|
19
|
+
:host([data-native-ui-snapshot-content]) *,
|
|
20
|
+
:host([data-native-ui-snapshot-content]) *::before,
|
|
21
|
+
:host([data-native-ui-snapshot-content]) *::after {
|
|
22
|
+
visibility: hidden !important;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
14
25
|
`;
|