@expo/html-elements - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

build/css/createSafeStyledView.native.js

@@ -7,5 +7,5 @@ import React, { useMemo } from 'react';
         const finalStyle = useMemo(() => filterStyles(style), [style]);
-        return React.createElement(View, { ref: forwardedRef, style: finalStyle, ...props });
+        return <View ref={forwardedRef} style={finalStyle} {...props}/>;
     });
 }
 //# sourceMappingURL=createSafeStyledView.native.js.map

build/elements/Anchor.js

@@ -23,4 +23,4 @@ import React, { forwardRef } from 'react';
     });
-    return React.createElement(Text, { accessibilityRole: "link", ...props, ...nativeProps, ref: ref });
+    return <Text accessibilityRole="link" {...props} {...nativeProps} ref={ref}/>;
 });
 //# sourceMappingURL=Anchor.js.map

build/elements/Headings.js

@@ -13,3 +13,3 @@ import React, { forwardRef } from 'react';
     return forwardRef((props, ref) => {
-        return (React.createElement(Text, { ...nativeProps, accessibilityRole: "header", ...props, style: [styles[`h${level}`], props.style], ref: ref }));
+        return (<Text {...nativeProps} accessibilityRole="header" {...props} style={[styles[`h${level}`], props.style]} ref={ref}/>);
     });
@@ -16,0 +16,0 @@ }

build/elements/Layout.js

@@ -6,3 +6,3 @@ import React, { forwardRef } from 'react';
     return forwardRef((props, ref) => {
-        return React.createElement(View, { ...nativeProps, ...props, ref: ref });
+        return <View {...nativeProps} {...props} ref={ref}/>;
     });
@@ -9,0 +9,0 @@ }

build/elements/Lists.js

@@ -7,3 +7,3 @@ import React, { forwardRef } from 'react';
     return forwardRef((props, ref) => {
-        return React.createElement(View, { ...nativeProps, ...props, ref: ref });
+        return <View {...nativeProps} {...props} ref={ref}/>;
     });
@@ -26,3 +26,3 @@ }
         });
-        return React.createElement(Text, { ...props, accessibilityRole: accessibilityRole, ref: ref });
+        return <Text {...props} accessibilityRole={accessibilityRole} ref={ref}/>;
     }
@@ -33,4 +33,4 @@ const accessibilityRole = Platform.select({
     });
-    return React.createElement(View, { ...props, accessibilityRole: accessibilityRole, ref: ref });
+    return <View {...props} accessibilityRole={accessibilityRole} ref={ref}/>;
 });
 //# sourceMappingURL=Lists.js.map

build/elements/Rules.js

@@ -5,3 +5,3 @@ import React, { forwardRef } from 'react';
 export const HR = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, style: [styles.hr, props.style], ref: ref });
+    return <View {...props} style={[styles.hr, props.style]} ref={ref}/>;
 });
@@ -8,0 +8,0 @@ const styles = StyleSheet.create({

build/elements/Table.js

@@ -8,24 +8,24 @@ import React, { forwardRef } from 'react';
 export const Table = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, ref: ref });
+    return <View {...props} ref={ref}/>;
 });
 export const THead = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, ref: ref });
+    return <View {...props} ref={ref}/>;
 });
 export const TBody = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, ref: ref });
+    return <View {...props} ref={ref}/>;
 });
 export const TFoot = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, ref: ref });
+    return <View {...props} ref={ref}/>;
 });
 export const TH = forwardRef((props, ref) => {
-    return React.createElement(TableText, { ...props, style: [styles.th, props.style], ref: ref });
+    return <TableText {...props} style={[styles.th, props.style]} ref={ref}/>;
 });
 export const TR = forwardRef((props, ref) => {
-    return React.createElement(View, { ...props, style: [styles.tr, props.style], ref: ref });
+    return <View {...props} style={[styles.tr, props.style]} ref={ref}/>;
 });
 export const TD = forwardRef((props, ref) => {
-    return React.createElement(TableText, { ...props, style: [styles.td, props.style], ref: ref });
+    return <TableText {...props} style={[styles.td, props.style]} ref={ref}/>;
 });
 export const Caption = forwardRef((props, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.caption, props.style], ref: ref });
+    return <Text {...props} style={[styles.caption, props.style]} ref={ref}/>;
 });
@@ -32,0 +32,0 @@ const styles = StyleSheet.create({

build/elements/Table.web.js

@@ -5,3 +5,3 @@ import React, { forwardRef } from 'react';
     return forwardRef((props, ref) => {
-        return React.createElement(View, { ...nativeProps, ...props, ref: ref });
+        return <View {...nativeProps} {...props} ref={ref}/>;
     });
@@ -8,0 +8,0 @@ }

build/elements/Text.js

@@ -7,30 +7,29 @@ import React, { forwardRef } from 'react';
 export const P = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.p, style], ref: ref });
+    return <Text {...props} style={[styles.p, style]} ref={ref}/>;
 });
 export const B = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.b, style], ref: ref });
+    return <Text {...props} style={[styles.b, style]} ref={ref}/>;
 });
 export const S = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.s, style], ref: ref });
+    return <Text {...props} style={[styles.s, style]} ref={ref}/>;
 });
 export const I = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.i, style], ref: ref });
+    return <Text {...props} style={[styles.i, style]} ref={ref}/>;
 });
 export const Q = forwardRef(({ children, cite, style, ...props }, ref) => {
-    return (React.createElement(Text, { ...props, style: [styles.q, style], ref: ref },
-        "\"",
-        children,
-        "\""));
+    return (<Text {...props} style={[styles.q, style]} ref={ref}>
+      "{children}"
+    </Text>);
 });
 export const BlockQuote = forwardRef(({ style, cite, ...props }, ref) => {
-    return React.createElement(View, { ...props, style: [styles.blockQuote, style], ref: ref });
+    return <View {...props} style={[styles.blockQuote, style]} ref={ref}/>;
 });
 export const BR = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.br, style], ref: ref });
+    return <Text {...props} style={[styles.br, style]} ref={ref}/>;
 });
 export const Mark = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.mark, style], ref: ref });
+    return <Text {...props} style={[styles.mark, style]} ref={ref}/>;
 });
 export const Code = forwardRef(({ style, ...props }, ref) => {
-    return React.createElement(Text, { ...props, style: [styles.code, style], ref: ref });
+    return <Text {...props} style={[styles.code, style]} ref={ref}/>;
 });
@@ -42,9 +41,9 @@ function isTextProps(props) {
     if (isTextProps(props)) {
-        return React.createElement(Text, { ...props, style: [styles.code, styles.pre, props.style], ref: ref });
+        return <Text {...props} style={[styles.code, styles.pre, props.style]} ref={ref}/>;
     }
-    return React.createElement(View, { ...props, style: [styles.pre, props.style], ref: ref });
+    return <View {...props} style={[styles.pre, props.style]} ref={ref}/>;
 });
 // Extract dateTime to prevent passing it to the native Text element
 export const Time = forwardRef(({ dateTime, ...props }, ref) => {
-    return React.createElement(Text, { ...props, ref: ref });
+    return <Text {...props} ref={ref}/>;
 });
@@ -51,0 +50,0 @@ export const Strong = B;

build/primitives/createDevView.js

@@ -14,6 +14,5 @@ import React from 'react';
                 console.warn(message);
-                children.push(React.createElement(Text, { style: [StyleSheet.absoluteFill, styles.error] },
-                    "Unwrapped text: \"",
-                    React.createElement(Text, { style: { fontWeight: 'bold' } }, child),
-                    "\""));
+                children.push(<Text style={[StyleSheet.absoluteFill, styles.error]}>
+            Unwrapped text: "<Text style={{ fontWeight: 'bold' }}>{child}</Text>"
+          </Text>);
             }
@@ -34,3 +33,3 @@ else if ('type' in child && typeof child?.type === 'string' && Platform.OS !== 'web') {
     return React.forwardRef(({ children, ...props }, forwardedRef) => {
-        return React.createElement(View, { ref: forwardedRef, ...props, children: useChildren(children) });
+        return <View ref={forwardedRef} {...props} children={useChildren(children)}/>;
     });
@@ -37,0 +36,0 @@ }

CHANGELOG.md

@@ -13,2 +13,8 @@ # Changelog
 
+## 0.7.0 — 2023-10-17
+
+### 💡 Others
+
+- Ship untranspiled JSX to support custom handling of `jsx` and `createElement`. ([#24889](https://github.com/expo/expo/pull/24889) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 0.6.2 — 2023-09-04
@@ -15,0 +21,0 @@

package.json

 {
   "name": "@expo/html-elements",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Universal semantic HTML React components for iOS, Android, web, and desktop",
@@ -62,3 +62,3 @@ "main": "build/Elements.js",
   },
-  "gitHead": "79607a7325f47aa17c36d266100d09a4ff2cc544"
+  "gitHead": "da25937e2a99661cbe5eb60ca1d8d6245fc96a50"
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160822

increased by0.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

1296

decreased by-0.15%

No dependency changes