@expo/html-elements 0.4.0 → 0.4.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/CHANGELOG.md +21 -0
- package/babel/__tests__/transform.test.js +33 -0
- package/babel.js +17 -1
- package/build/css/createSafeStyledView.d.ts +2 -0
- package/build/css/createSafeStyledView.d.ts.map +1 -0
- package/build/css/createSafeStyledView.js +5 -0
- package/build/css/createSafeStyledView.js.map +1 -0
- package/build/css/createSafeStyledView.native.d.ts +3 -0
- package/build/css/createSafeStyledView.native.d.ts.map +1 -0
- package/build/css/createSafeStyledView.native.js +10 -0
- package/build/css/createSafeStyledView.native.js.map +1 -0
- package/build/css/filterStyles.d.ts +2 -0
- package/build/css/filterStyles.d.ts.map +1 -0
- package/build/css/filterStyles.js +83 -0
- package/build/css/filterStyles.js.map +1 -0
- package/build/primitives/Image.d.ts +22 -0
- package/build/primitives/Image.d.ts.map +1 -0
- package/build/primitives/Image.js +5 -0
- package/build/primitives/Image.js.map +1 -0
- package/build/primitives/Text.d.ts +2 -2
- package/build/primitives/Text.d.ts.map +1 -1
- package/build/primitives/Text.js +2 -1
- package/build/primitives/Text.js.map +1 -1
- package/build/primitives/View.d.ts +5 -3
- package/build/primitives/View.d.ts.map +1 -1
- package/build/primitives/View.js +8 -2
- package/build/primitives/View.js.map +1 -1
- package/build/primitives/createDevView.d.ts +4 -0
- package/build/primitives/createDevView.d.ts.map +1 -0
- package/build/primitives/createDevView.js +42 -0
- package/build/primitives/createDevView.js.map +1 -0
- package/package.json +2 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## Unpublished
|
|
4
|
+
|
|
5
|
+
### 🛠 Breaking changes
|
|
6
|
+
|
|
7
|
+
### 🎉 New features
|
|
8
|
+
|
|
9
|
+
### 🐛 Bug fixes
|
|
10
|
+
|
|
11
|
+
- Prevent babel plugin from running on node_modules. ([#21594](https://github.com/expo/expo/pull/21594) by [@EvanBacon](https://github.com/EvanBacon))
|
|
12
|
+
- Prevent babel plugin from transforming `html` and `body` on web. ([#21594](https://github.com/expo/expo/pull/21594) by [@EvanBacon](https://github.com/EvanBacon))
|
|
13
|
+
|
|
14
|
+
### 💡 Others
|
|
15
|
+
|
|
16
|
+
## 0.4.1 — 2023-02-09
|
|
17
|
+
|
|
18
|
+
### 🎉 New features
|
|
19
|
+
|
|
20
|
+
- Strip unsupported web styles on native platforms. ([#21069](https://github.com/expo/expo/pull/21069) by [@EvanBacon](https://github.com/EvanBacon))
|
|
21
|
+
- Provide better assertions for text children in View components in development-mode. ([#21069](https://github.com/expo/expo/pull/21069) by [@EvanBacon](https://github.com/EvanBacon))
|
|
@@ -15,6 +15,10 @@ const options = {
|
|
|
15
15
|
},
|
|
16
16
|
],
|
|
17
17
|
],
|
|
18
|
+
caller: {
|
|
19
|
+
name: 'metro',
|
|
20
|
+
platform: 'ios',
|
|
21
|
+
},
|
|
18
22
|
minified: false,
|
|
19
23
|
plugins: [plugin],
|
|
20
24
|
compact: false,
|
|
@@ -36,6 +40,35 @@ function App() {
|
|
|
36
40
|
expect(code).not.toMatch(`@expo/html-elements`);
|
|
37
41
|
});
|
|
38
42
|
|
|
43
|
+
it(`Skips html and body on web`, () => {
|
|
44
|
+
const sourceCode = `
|
|
45
|
+
function App() {
|
|
46
|
+
return <html><body>Test</body></html>;
|
|
47
|
+
}`;
|
|
48
|
+
const { code } = babel.transform(sourceCode, {
|
|
49
|
+
...options,
|
|
50
|
+
caller: {
|
|
51
|
+
...options.caller,
|
|
52
|
+
platform: 'web',
|
|
53
|
+
},
|
|
54
|
+
});
|
|
55
|
+
expect(code).toMatch(`_jsx("html", { children: _jsx("body", { children: "Test" }) });`);
|
|
56
|
+
const { code: nativeCode } = babel.transform(sourceCode, options);
|
|
57
|
+
expect(nativeCode).toMatch(`_jsx(Div, { children: _jsx(Div, { children: "Test" }) });`);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it(`Skips conversion in node modules`, () => {
|
|
61
|
+
const sourceCode = `
|
|
62
|
+
function App() {
|
|
63
|
+
return <a href="#">Link</a>;
|
|
64
|
+
}`;
|
|
65
|
+
const { code } = babel.transform(sourceCode, {
|
|
66
|
+
...options,
|
|
67
|
+
filename: '/node_modules/foo/bar.js',
|
|
68
|
+
});
|
|
69
|
+
expect(code).not.toMatch(`import { A } from "@expo/html-elements";`);
|
|
70
|
+
});
|
|
71
|
+
|
|
39
72
|
it(`Converts basic link`, () => {
|
|
40
73
|
const sourceCode = `
|
|
41
74
|
function App() {
|
package/babel.js
CHANGED
|
@@ -50,10 +50,26 @@ const elementToComponent = {
|
|
|
50
50
|
// NOTE: head, meta, link should use some special component in the future.
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
function getPlatform(caller) {
|
|
54
|
+
return caller && caller.platform;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
module.exports = ({ types: t, ...api }, { expo }) => {
|
|
58
|
+
const platform = api.caller(getPlatform);
|
|
59
|
+
|
|
54
60
|
function replaceElement(path, state) {
|
|
61
|
+
// Not supported in node modules
|
|
62
|
+
if (/\/node_modules\//.test(state.filename)) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
|
|
55
66
|
const { name } = path.node.openingElement.name;
|
|
56
67
|
|
|
68
|
+
if (platform === 'web') {
|
|
69
|
+
if (['html', 'body'].includes(name)) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
57
73
|
// Replace element with @expo/html-elements
|
|
58
74
|
const component = elementToComponent[name];
|
|
59
75
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSafeStyledView.d.ts","sourceRoot":"","sources":["../../src/css/createSafeStyledView.tsx"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,SAGtD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSafeStyledView.js","sourceRoot":"","sources":["../../src/css/createSafeStyledView.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAQ,IAAW;IACrD,wBAAwB;IACxB,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["export function createSafeStyledView<TView>(View: TView) {\n // Do nothing by default\n return View;\n}\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<TView>>;
|
|
3
|
+
//# sourceMappingURL=createSafeStyledView.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSafeStyledView.native.d.ts","sourceRoot":"","sources":["../../src/css/createSafeStyledView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,qGAOvF"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { filterStyles } from './filterStyles';
|
|
3
|
+
export function createSafeStyledView(View) {
|
|
4
|
+
return React.forwardRef(({ style, ...props }, forwardedRef) => {
|
|
5
|
+
// Filter and apply `center` prop.
|
|
6
|
+
const finalStyle = useMemo(() => filterStyles(style), [style]);
|
|
7
|
+
return React.createElement(View, { ref: forwardedRef, style: finalStyle, ...props });
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=createSafeStyledView.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSafeStyledView.native.js","sourceRoot":"","sources":["../../src/css/createSafeStyledView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,oBAAoB,CAAyC,IAAW;IACtF,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAO,EAAE,YAA8B,EAAE,EAAE;QACnF,kCAAkC;QAClC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/D,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { filterStyles } from './filterStyles';\n\nexport function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView) {\n return React.forwardRef(({ style, ...props }: any, forwardedRef: React.Ref<TView>) => {\n // Filter and apply `center` prop.\n const finalStyle = useMemo(() => filterStyles(style), [style]);\n\n return <View ref={forwardedRef} style={finalStyle} {...props} />;\n });\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filterStyles.d.ts","sourceRoot":"","sources":["../../src/css/filterStyles.ts"],"names":[],"mappings":"AA0DA,wBAAgB,YAAY,CAAC,SAAS,KAAA,OAWrC"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
// Remove the unsupported web styles from the style object
|
|
3
|
+
// to prevent crashing.
|
|
4
|
+
const WEB_STYLES = [
|
|
5
|
+
'backdropFilter',
|
|
6
|
+
'animationDelay',
|
|
7
|
+
'animationDirection',
|
|
8
|
+
'animationDuration',
|
|
9
|
+
'animationFillMode',
|
|
10
|
+
'animationName',
|
|
11
|
+
'animationIterationCount',
|
|
12
|
+
'animationPlayState',
|
|
13
|
+
'animationTimingFunction',
|
|
14
|
+
'backgroundAttachment',
|
|
15
|
+
'backgroundBlendMode',
|
|
16
|
+
'backgroundClip',
|
|
17
|
+
'backgroundImage',
|
|
18
|
+
'backgroundOrigin',
|
|
19
|
+
'backgroundPosition',
|
|
20
|
+
'backgroundRepeat',
|
|
21
|
+
'backgroundSize',
|
|
22
|
+
'boxShadow',
|
|
23
|
+
'boxSizing',
|
|
24
|
+
'clip',
|
|
25
|
+
'cursor',
|
|
26
|
+
'filter',
|
|
27
|
+
'gridAutoColumns',
|
|
28
|
+
'gridAutoFlow',
|
|
29
|
+
'gridAutoRows',
|
|
30
|
+
'gridColumnEnd',
|
|
31
|
+
'gridColumnGap',
|
|
32
|
+
'gridColumnStart',
|
|
33
|
+
'gridRowEnd',
|
|
34
|
+
'gridRowGap',
|
|
35
|
+
'gridRowStart',
|
|
36
|
+
'gridTemplateColumns',
|
|
37
|
+
'gridTemplateRows',
|
|
38
|
+
'gridTemplateAreas',
|
|
39
|
+
'outline',
|
|
40
|
+
'outlineColor',
|
|
41
|
+
'overflowX',
|
|
42
|
+
'overflowY',
|
|
43
|
+
'overscrollBehavior',
|
|
44
|
+
'overscrollBehaviorX',
|
|
45
|
+
'overscrollBehaviorY',
|
|
46
|
+
'perspective',
|
|
47
|
+
'perspectiveOrigin',
|
|
48
|
+
'touchAction',
|
|
49
|
+
'transformOrigin',
|
|
50
|
+
'transitionDelay',
|
|
51
|
+
'transitionDuration',
|
|
52
|
+
'transitionProperty',
|
|
53
|
+
'transitionTimingFunction',
|
|
54
|
+
'userSelect',
|
|
55
|
+
'willChange',
|
|
56
|
+
];
|
|
57
|
+
export function filterStyles(styleProp) {
|
|
58
|
+
if (!styleProp) {
|
|
59
|
+
return styleProp;
|
|
60
|
+
}
|
|
61
|
+
const style = StyleSheet.flatten(styleProp);
|
|
62
|
+
const filteredStyle = Object.fromEntries(Object.entries(style).filter(([k]) => !WEB_STYLES.includes(k)));
|
|
63
|
+
return processNativeStyles(filteredStyle);
|
|
64
|
+
}
|
|
65
|
+
function processNativeStyles(style) {
|
|
66
|
+
if (!style)
|
|
67
|
+
return style;
|
|
68
|
+
if (style.visibility) {
|
|
69
|
+
if (style.visibility === 'hidden') {
|
|
70
|
+
// style.display = "none";
|
|
71
|
+
style.opacity = 0;
|
|
72
|
+
}
|
|
73
|
+
delete style.visibility;
|
|
74
|
+
}
|
|
75
|
+
if (style.position) {
|
|
76
|
+
if (!['absolute', 'relative'].includes(style.position)) {
|
|
77
|
+
console.warn(`Unsupported position: '${style.position}'`);
|
|
78
|
+
style.position = 'relative';
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return style;
|
|
82
|
+
}
|
|
83
|
+
//# sourceMappingURL=filterStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filterStyles.js","sourceRoot":"","sources":["../../src/css/filterStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,0DAA0D;AAC1D,uBAAuB;AACvB,MAAM,UAAU,GAAG;IACjB,gBAAgB;IAChB,gBAAgB;IAChB,oBAAoB;IACpB,mBAAmB;IACnB,mBAAmB;IACnB,eAAe;IACf,yBAAyB;IACzB,oBAAoB;IACpB,yBAAyB;IACzB,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,gBAAgB;IAChB,WAAW;IACX,WAAW;IACX,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,iBAAiB;IACjB,cAAc;IACd,cAAc;IACd,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,YAAY;IACZ,YAAY;IACZ,cAAc;IACd,qBAAqB;IACrB,kBAAkB;IAClB,mBAAmB;IACnB,SAAS;IACT,cAAc;IACd,WAAW;IACX,WAAW;IACX,oBAAoB;IACpB,qBAAqB;IACrB,qBAAqB;IACrB,aAAa;IACb,mBAAmB;IACnB,aAAa;IACb,iBAAiB;IACjB,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,YAAY;IACZ,YAAY;CACb,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,SAAS;IACpC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,SAAS,CAAC;KAClB;IACD,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CACtC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAK;IAChC,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAC;IAEzB,IAAI,KAAK,CAAC,UAAU,EAAE;QACpB,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE;YACjC,0BAA0B;YAC1B,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;SACnB;QACD,OAAO,KAAK,CAAC,UAAU,CAAC;KACzB;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;YACtD,OAAO,CAAC,IAAI,CAAC,0BAA0B,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;YAC1D,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;SAC7B;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\n// Remove the unsupported web styles from the style object\n// to prevent crashing.\nconst WEB_STYLES = [\n 'backdropFilter',\n 'animationDelay',\n 'animationDirection',\n 'animationDuration',\n 'animationFillMode',\n 'animationName',\n 'animationIterationCount',\n 'animationPlayState',\n 'animationTimingFunction',\n 'backgroundAttachment',\n 'backgroundBlendMode',\n 'backgroundClip',\n 'backgroundImage',\n 'backgroundOrigin',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'backgroundSize',\n 'boxShadow',\n 'boxSizing',\n 'clip',\n 'cursor',\n 'filter',\n 'gridAutoColumns',\n 'gridAutoFlow',\n 'gridAutoRows',\n 'gridColumnEnd',\n 'gridColumnGap',\n 'gridColumnStart',\n 'gridRowEnd',\n 'gridRowGap',\n 'gridRowStart',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'gridTemplateAreas',\n 'outline',\n 'outlineColor',\n 'overflowX',\n 'overflowY',\n 'overscrollBehavior',\n 'overscrollBehaviorX',\n 'overscrollBehaviorY',\n 'perspective',\n 'perspectiveOrigin',\n 'touchAction',\n 'transformOrigin',\n 'transitionDelay',\n 'transitionDuration',\n 'transitionProperty',\n 'transitionTimingFunction',\n 'userSelect',\n 'willChange',\n];\n\nexport function filterStyles(styleProp) {\n if (!styleProp) {\n return styleProp;\n }\n const style = StyleSheet.flatten(styleProp);\n\n const filteredStyle = Object.fromEntries(\n Object.entries(style).filter(([k]) => !WEB_STYLES.includes(k))\n );\n\n return processNativeStyles(filteredStyle);\n}\n\nfunction processNativeStyles(style) {\n if (!style) return style;\n\n if (style.visibility) {\n if (style.visibility === 'hidden') {\n // style.display = \"none\";\n style.opacity = 0;\n }\n delete style.visibility;\n }\n\n if (style.position) {\n if (!['absolute', 'relative'].includes(style.position)) {\n console.warn(`Unsupported position: '${style.position}'`);\n style.position = 'relative';\n }\n }\n\n return style;\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ClassAttributes, ComponentProps, ComponentType } from 'react';
|
|
2
|
+
import { Image as NativeImage, ImageStyle as NativeImageStyle, StyleProp } from 'react-native';
|
|
3
|
+
import { WebViewStyle } from './View';
|
|
4
|
+
type NativeImageProps = ComponentProps<typeof NativeImage> & ClassAttributes<typeof NativeImage>;
|
|
5
|
+
export interface WebImageStyle {
|
|
6
|
+
opacity?: number;
|
|
7
|
+
}
|
|
8
|
+
export type ImageStyle = Omit<NativeImageStyle, 'position'> & WebImageStyle & WebViewStyle;
|
|
9
|
+
export type WebImageProps = {
|
|
10
|
+
style?: StyleProp<ImageStyle>;
|
|
11
|
+
/** @platform web */
|
|
12
|
+
tabIndex?: number;
|
|
13
|
+
/**
|
|
14
|
+
* Set whether the image can be dragged with native browser behavior.
|
|
15
|
+
* @platform web
|
|
16
|
+
*/
|
|
17
|
+
draggable?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export type ImageProps = Omit<NativeImageProps, 'style'> & WebImageProps;
|
|
20
|
+
declare const _default: ComponentType<ImageProps>;
|
|
21
|
+
export default _default;
|
|
22
|
+
//# sourceMappingURL=Image.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/primitives/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,IAAI,gBAAgB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/F,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG,eAAe,CAAC,OAAO,WAAW,CAAC,CAAC;AAEjG,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,aAAa,GAAG,YAAY,CAAC;AAE3F,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG,aAAa,CAAC;;AAIzE,wBAAwE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../src/primitives/Image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,WAAW,EAA6C,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAwBnE,MAAM,KAAK,GAAG,WAAwC,CAAC;AAEvD,eAAe,oBAAoB,CAAC,KAAK,CAA8B,CAAC","sourcesContent":["import { ClassAttributes, ComponentProps, ComponentType } from 'react';\nimport { Image as NativeImage, ImageStyle as NativeImageStyle, StyleProp } from 'react-native';\n\nimport { createSafeStyledView } from '../css/createSafeStyledView';\nimport { WebViewStyle } from './View';\n\ntype NativeImageProps = ComponentProps<typeof NativeImage> & ClassAttributes<typeof NativeImage>;\n\nexport interface WebImageStyle {\n opacity?: number;\n}\n\nexport type ImageStyle = Omit<NativeImageStyle, 'position'> & WebImageStyle & WebViewStyle;\n\nexport type WebImageProps = {\n style?: StyleProp<ImageStyle>;\n /** @platform web */\n tabIndex?: number;\n /**\n * Set whether the image can be dragged with native browser behavior.\n * @platform web\n */\n draggable?: boolean;\n};\n\nexport type ImageProps = Omit<NativeImageProps, 'style'> & WebImageProps;\n\nconst Image = NativeImage as ComponentType<ImageProps>;\n\nexport default createSafeStyledView(Image) as ComponentType<ImageProps>;\n"]}
|
|
@@ -47,6 +47,6 @@ export type WebTextProps = {
|
|
|
47
47
|
lang?: string;
|
|
48
48
|
};
|
|
49
49
|
export type TextProps = Omit<NativeTextProps, 'style' | 'accessibilityRole'> & WebTextProps;
|
|
50
|
-
declare const
|
|
51
|
-
export default
|
|
50
|
+
declare const _default: ComponentType<TextProps>;
|
|
51
|
+
export default _default;
|
|
52
52
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/primitives/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,IAAI,IAAI,UAAU,EAClB,SAAS,IAAI,eAAe,EAC7B,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/primitives/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,IAAI,IAAI,UAAU,EAClB,SAAS,IAAI,eAAe,EAC7B,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG,eAAe,CAAC,OAAO,UAAU,CAAC,CAAC;AAE9F,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;IAChD,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;IACpD,oBAAoB;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,GACnF,YAAY,GACZ,YAAY,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,iBAAiB,CAAC;IAC/D,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,SAAS,CAAC,EAAE;QACV,oBAAoB;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,oBAAoB;QACpB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,oBAAoB;QACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC7B,CAAC;IACF,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,mBAAmB,CAAC,GAAG,YAAY,CAAC;;AAI5F,wBAAsE"}
|
package/build/primitives/Text.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/primitives/Text.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,IAAI,IAAI,UAAU,GAEnB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/primitives/Text.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,IAAI,IAAI,UAAU,GAEnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AA0DnE,MAAM,IAAI,GAAG,UAAsC,CAAC;AAEpD,eAAe,oBAAoB,CAAC,IAAI,CAA6B,CAAC","sourcesContent":["import { ClassAttributes, ComponentProps, ComponentType } from 'react';\nimport {\n AccessibilityRole,\n StyleProp,\n Text as NativeText,\n TextStyle as NativeTextStyle,\n} from 'react-native';\n\nimport { createSafeStyledView } from '../css/createSafeStyledView';\nimport { WebViewStyle } from './View';\n\n// https://github.com/necolas/react-native-web/issues/832\n\ntype NativeTextProps = ComponentProps<typeof NativeText> & ClassAttributes<typeof NativeText>;\n\nexport interface WebTextStyle {\n /** string is only available on web */\n fontSize?: NativeTextStyle['fontSize'] | string;\n /** string is only available on web */\n lineHeight?: NativeTextStyle['lineHeight'] | string;\n /** @platform web */\n fontFeatureSettings?: string;\n /** @platform web */\n textIndent?: string;\n /** @platform web */\n textOverflow?: string;\n /** @platform web */\n textRendering?: string;\n /** @platform web */\n textTransform?: string;\n /** @platform web */\n unicodeBidi?: string;\n /** @platform web */\n wordWrap?: string;\n}\n\nexport type TextStyle = Omit<NativeTextStyle, 'position' | 'fontSize' | 'lineHeight'> &\n WebTextStyle &\n WebViewStyle;\n\nexport type WebTextProps = {\n style?: StyleProp<TextStyle>;\n /** @platform web */\n tabIndex?: number;\n /** @platform web */\n accessibilityLevel?: number;\n accessibilityRole?: 'listitem' | 'heading' | AccessibilityRole;\n /** @platform web */\n href?: string;\n /** @deprecated use the prop `hrefAttrs={{ target: '...' }}` instead. */\n target?: string;\n /** @platform web */\n hrefAttrs?: {\n /** @platform web */\n target?: string;\n /** @platform web */\n rel?: string;\n /** @platform web */\n download?: boolean | string;\n };\n /** @platform web */\n lang?: string;\n};\n\nexport type TextProps = Omit<NativeTextProps, 'style' | 'accessibilityRole'> & WebTextProps;\n\nconst Text = NativeText as ComponentType<TextProps>;\n\nexport default createSafeStyledView(Text) as ComponentType<TextProps>;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ClassAttributes, ComponentProps, ComponentType } from 'react';
|
|
2
|
-
import { StyleProp, View as NativeView,
|
|
2
|
+
import { AccessibilityRole, StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';
|
|
3
3
|
type NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;
|
|
4
4
|
/**
|
|
5
5
|
* https://baconbrix.gitbook.io/react-native-web/primitives/view
|
|
@@ -109,6 +109,8 @@ export interface WebViewStyle {
|
|
|
109
109
|
visibility?: string;
|
|
110
110
|
/** @platform web */
|
|
111
111
|
willChange?: string;
|
|
112
|
+
/** @platform web */
|
|
113
|
+
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
|
|
112
114
|
}
|
|
113
115
|
export type ViewStyle = Omit<NativeViewStyle, 'position'> & WebViewStyle;
|
|
114
116
|
export type WebViewProps = {
|
|
@@ -116,6 +118,6 @@ export type WebViewProps = {
|
|
|
116
118
|
accessibilityRole?: 'list' | 'listitem' | 'complementary' | 'contentinfo' | 'region' | 'navigation' | 'main' | 'article' | 'banner' | AccessibilityRole;
|
|
117
119
|
};
|
|
118
120
|
export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;
|
|
119
|
-
declare const
|
|
120
|
-
export default
|
|
121
|
+
declare const _default: ComponentType<ViewProps>;
|
|
122
|
+
export default _default;
|
|
121
123
|
//# sourceMappingURL=View.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,SAAS,EACT,IAAI,IAAI,UAAU,EAClB,
|
|
1
|
+
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"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"}
|
package/build/primitives/View.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { View as NativeView, } from 'react-native';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { createSafeStyledView } from '../css/createSafeStyledView';
|
|
3
|
+
import { createDevView } from './createDevView';
|
|
4
|
+
let View = NativeView;
|
|
5
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
6
|
+
// Add better errors and warnings in development builds.
|
|
7
|
+
View = createDevView(NativeView);
|
|
8
|
+
}
|
|
9
|
+
export default createSafeStyledView(View);
|
|
4
10
|
//# sourceMappingURL=View.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"View.js","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"View.js","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,IAAI,IAAI,UAAU,GAEnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA0IhD,IAAI,IAAI,GAAG,UAAsC,CAAC;AAElD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;IACzC,wDAAwD;IACxD,IAAI,GAAG,aAAa,CAAC,UAAU,CAA6B,CAAC;CAC9D;AAED,eAAe,oBAAoB,CAAC,IAAI,CAA6B,CAAC","sourcesContent":["import { ClassAttributes, ComponentProps, ComponentType } from 'react';\nimport {\n AccessibilityRole,\n StyleProp,\n View as NativeView,\n ViewStyle as NativeViewStyle,\n} from 'react-native';\n\nimport { createSafeStyledView } from '../css/createSafeStyledView';\nimport { createDevView } from './createDevView';\n\n// https://github.com/necolas/react-native-web/issues/832\n\ntype NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;\n\n/**\n * https://baconbrix.gitbook.io/react-native-web/primitives/view\n */\nexport interface WebViewStyle {\n /** @platform web */\n backdropFilter?: string;\n /** @platform web */\n animationDelay?: string;\n /** @platform web */\n animationDirection?: string;\n /** @platform web */\n animationDuration?: string;\n /** @platform web */\n animationFillMode?: string;\n /** @platform web */\n animationName?: string | any[];\n /** @platform web */\n animationIterationCount?: number | 'infinite';\n /** @platform web */\n animationPlayState?: string;\n /** @platform web */\n animationTimingFunction?: string;\n /** @platform web */\n backgroundAttachment?: string;\n /** @platform web */\n backgroundBlendMode?: string;\n /** @platform web */\n backgroundClip?: string;\n /** @platform web */\n backgroundImage?: string;\n /** @platform web */\n backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';\n /** @platform web */\n backgroundPosition?: string;\n /** @platform web */\n backgroundRepeat?: string;\n /** @platform web */\n backgroundSize?: string;\n /** @platform web */\n boxShadow?: string;\n /** @platform web */\n boxSizing?: string;\n /** @platform web */\n clip?: string;\n /** @platform web */\n cursor?: string;\n /** @platform web */\n filter?: string;\n /** @platform web */\n gridAutoColumns?: string;\n /** @platform web */\n gridAutoFlow?: string;\n /** @platform web */\n gridAutoRows?: string;\n /** @platform web */\n gridColumnEnd?: string;\n /** @platform web */\n gridColumnGap?: string;\n /** @platform web */\n gridColumnStart?: string;\n /** @platform web */\n gridRowEnd?: string;\n /** @platform web */\n gridRowGap?: string;\n /** @platform web */\n gridRowStart?: string;\n /** @platform web */\n gridTemplateColumns?: string;\n /** @platform web */\n gridTemplateRows?: string;\n /** @platform web */\n gridTemplateAreas?: string;\n /** @platform web */\n outline?: string;\n /** @platform web */\n outlineColor?: string;\n /** @platform web */\n overflowX?: string;\n /** @platform web */\n overflowY?: string;\n /** @platform web */\n overscrollBehavior?: 'auto' | 'contain' | 'none';\n /** @platform web */\n overscrollBehaviorX?: 'auto' | 'contain' | 'none';\n /** @platform web */\n overscrollBehaviorY?: 'auto' | 'contain' | 'none';\n /** @platform web */\n perspective?: string;\n /** @platform web */\n perspectiveOrigin?: string;\n /** @platform web */\n touchAction?: string;\n /** @platform web */\n transformOrigin?: string;\n /** @platform web */\n transitionDelay?: string;\n /** @platform web */\n transitionDuration?: string;\n /** @platform web */\n transitionProperty?: string;\n /** @platform web */\n transitionTimingFunction?: string;\n /** @platform web */\n userSelect?: string;\n /** @platform web */\n visibility?: string;\n /** @platform web */\n willChange?: string;\n /** @platform web */\n position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';\n}\n\nexport type ViewStyle = Omit<NativeViewStyle, 'position'> & WebViewStyle;\n\nexport type WebViewProps = {\n style?: StyleProp<ViewStyle>;\n\n accessibilityRole?:\n | 'list'\n | 'listitem'\n | 'complementary'\n | 'contentinfo'\n | 'region'\n | 'navigation'\n | 'main'\n | 'article'\n | 'banner'\n | AccessibilityRole;\n};\n\nexport type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;\n\nlet View = NativeView as ComponentType<ViewProps>;\n\nif (process.env.NODE_ENV !== 'production') {\n // Add better errors and warnings in development builds.\n View = createDevView(NativeView) as ComponentType<ViewProps>;\n}\n\nexport default createSafeStyledView(View) as ComponentType<ViewProps>;\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/** Extend a view with a `children` filter that asserts more helpful warnings/errors. */
|
|
3
|
+
export declare function createDevView<TView extends React.ComponentType<any>>(View: TView): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<TView>>;
|
|
4
|
+
//# sourceMappingURL=createDevView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createDevView.d.ts","sourceRoot":"","sources":["../../src/primitives/createDevView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,KAAK,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,qGAIhF"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Platform, StyleSheet, Text } from 'react-native';
|
|
3
|
+
function useChildren(inputChildren) {
|
|
4
|
+
return React.useMemo(() => {
|
|
5
|
+
const children = [];
|
|
6
|
+
React.Children.forEach(inputChildren, (child) => {
|
|
7
|
+
if (child == null || typeof child === 'boolean') {
|
|
8
|
+
}
|
|
9
|
+
else if (typeof child === 'string' || typeof child === 'number') {
|
|
10
|
+
// Wrap text in a Text component.
|
|
11
|
+
let message = `Invalid raw text as a child of View: "${child}"${child === '' ? ` [empty string]` : ''}.`;
|
|
12
|
+
message += ' Wrap the text contents with a Text element or remove it.';
|
|
13
|
+
console.warn(message);
|
|
14
|
+
children.push(React.createElement(Text, { style: [StyleSheet.absoluteFill, styles.error] },
|
|
15
|
+
"Unwrapped text: \"",
|
|
16
|
+
React.createElement(Text, { style: { fontWeight: 'bold' } }, child),
|
|
17
|
+
"\""));
|
|
18
|
+
}
|
|
19
|
+
else if ('type' in child && typeof child?.type === 'string' && Platform.OS !== 'web') {
|
|
20
|
+
// Disallow untransformed react-dom elements on native.
|
|
21
|
+
throw new Error(`Using unsupported React DOM element: <${child.type} />`);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
children.push(child);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
return children;
|
|
28
|
+
}, [inputChildren]);
|
|
29
|
+
}
|
|
30
|
+
/** Extend a view with a `children` filter that asserts more helpful warnings/errors. */
|
|
31
|
+
export function createDevView(View) {
|
|
32
|
+
return React.forwardRef(({ children, ...props }, forwardedRef) => {
|
|
33
|
+
return React.createElement(View, { ref: forwardedRef, ...props, children: useChildren(children) });
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
const styles = StyleSheet.create({
|
|
37
|
+
error: {
|
|
38
|
+
backgroundColor: 'firebrick',
|
|
39
|
+
color: 'white',
|
|
40
|
+
},
|
|
41
|
+
});
|
|
42
|
+
//# sourceMappingURL=createDevView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createDevView.js","sourceRoot":"","sources":["../../src/primitives/createDevView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1D,SAAS,WAAW,CAAC,aAA8B;IACjD,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,MAAM,QAAQ,GAAsB,EAAE,CAAC;QACvC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YAC9C,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;aAChD;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACjE,iCAAiC;gBACjC,IAAI,OAAO,GAAG,yCAAyC,KAAK,IAC1D,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACrC,GAAG,CAAC;gBACJ,OAAO,IAAI,2DAA2D,CAAC;gBACvE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACtB,QAAQ,CAAC,IAAI,CACX,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,UAAU,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC;;oBACjC,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAG,KAAK,CAAQ;yBAC/D,CACR,CAAC;aACH;iBAAM,IAAI,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,EAAE,IAAI,KAAK,QAAQ,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;gBACtF,uDAAuD;gBACvD,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC;aAC3E;iBAAM;gBACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACtB,CAAC;AAED,wFAAwF;AACxF,MAAM,UAAU,aAAa,CAAyC,IAAW;IAC/E,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAO,EAAE,YAA8B,EAAE,EAAE;QACtF,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,YAAY,KAAM,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAI,CAAC;IACjF,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,eAAe,EAAE,WAAW;QAC5B,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { Platform, StyleSheet, Text } from 'react-native';\n\nfunction useChildren(inputChildren: React.ReactNode) {\n return React.useMemo(() => {\n const children: React.ReactNode[] = [];\n React.Children.forEach(inputChildren, (child) => {\n if (child == null || typeof child === 'boolean') {\n } else if (typeof child === 'string' || typeof child === 'number') {\n // Wrap text in a Text component.\n let message = `Invalid raw text as a child of View: \"${child}\"${\n child === '' ? ` [empty string]` : ''\n }.`;\n message += ' Wrap the text contents with a Text element or remove it.';\n console.warn(message);\n children.push(\n <Text style={[StyleSheet.absoluteFill, styles.error]}>\n Unwrapped text: \"<Text style={{ fontWeight: 'bold' }}>{child}</Text>\"\n </Text>\n );\n } else if ('type' in child && typeof child?.type === 'string' && Platform.OS !== 'web') {\n // Disallow untransformed react-dom elements on native.\n throw new Error(`Using unsupported React DOM element: <${child.type} />`);\n } else {\n children.push(child);\n }\n });\n return children;\n }, [inputChildren]);\n}\n\n/** Extend a view with a `children` filter that asserts more helpful warnings/errors. */\nexport function createDevView<TView extends React.ComponentType<any>>(View: TView) {\n return React.forwardRef(({ children, ...props }: any, forwardedRef: React.Ref<TView>) => {\n return <View ref={forwardedRef} {...props} children={useChildren(children)} />;\n });\n}\n\nconst styles = StyleSheet.create({\n error: {\n backgroundColor: 'firebrick',\n color: 'white',\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@expo/html-elements",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Universal semantic HTML React components for iOS, Android, web, and desktop",
|
|
5
5
|
"main": "build/Elements.js",
|
|
6
6
|
"types": "build/Elements.d.ts",
|
|
@@ -58,6 +58,5 @@
|
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"expo-module-scripts": "^3.0.0"
|
|
61
|
-
}
|
|
62
|
-
"gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
|
|
61
|
+
}
|
|
63
62
|
}
|