@expo/html-elements 0.0.0 → 0.0.1-canary-20231129-c0ec023

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+- Added support for React Native 0.73.0. ([#24971](https://github.com/expo/expo/pull/24971), [#25453](https://github.com/expo/expo/pull/25453) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 0.8.0 — 2023-11-14
+
+### 💡 Others
+
+- Migrate to use non-deprecated `react-native-web` props. ([#24930](https://github.com/expo/expo/pull/24930) by [@EvanBacon](https://github.com/EvanBacon))
+
+## 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
+
+_This version does not introduce any user-facing changes._
+
+## 0.6.1 — 2023-08-02
+
+_This version does not introduce any user-facing changes._
+
+## 0.6.0 — 2023-07-28
+
+_This version does not introduce any user-facing changes._
+
+## 0.5.1 - 2023-06-30
+
+### 💡 Others
+
+- Update snapshots. ([#23238](https://github.com/expo/expo/pull/23238) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+
+## 0.5.0 — 2023-06-21
+
+_This version does not introduce any user-facing changes._
+
+## 0.4.3 — 2023-05-08
+
+### 🐛 Bug fixes
+
+- Prevent babel plugin from running on node_modules. ([#21594](https://github.com/expo/expo/pull/21594) by [@EvanBacon](https://github.com/EvanBacon))
+- Prevent babel plugin from transforming `html` and `body` on web. ([#21594](https://github.com/expo/expo/pull/21594) by [@EvanBacon](https://github.com/EvanBacon))
+
+## 0.4.1 — 2023-02-09
+
+### 🎉 New features
+
+- Strip unsupported web styles on native platforms. ([#21069](https://github.com/expo/expo/pull/21069) by [@EvanBacon](https://github.com/EvanBacon))
+- 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))

package/README.md

@@ -9,7 +9,7 @@
   <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
   <!-- Web -->
   <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
-  <a aria-label="Circle CI" href="https://circleci.com/gh/expo/expo/tree/master">
+  <a aria-label="Circle CI" href="https://circleci.com/gh/expo/expo/tree/main">
     <img alt="Circle CI" src="https://flat.badgen.net/circleci/github/expo/expo?label=Circle%20CI&labelColor=555555&icon=circleci">
   </a>
 </p>
@@ -32,7 +32,7 @@ We at Expo recommend using platform agnostic primitives like `View`, `Image`, an
 
 Install:
 
-```sh
+```
 yarn add @expo/html-elements
 ```
 
@@ -57,6 +57,7 @@ Here is a list of all the currently supported elements and the web feature they
 | [`<caption />`][html-caption]       |    [`<Caption />`](#caption)    |
 | [`<code />`][html-code]             |       [`<Code />`](#code)       |
 | [`<del />`][html-del]               |        [`<Del />`](#del)        |
+| [`<div />`][html-div]               |        [`<Div />`](#div)        |
 | [`<em />`][html-em]                 |         [`<EM />`](#em)         |
 | [`<footer />`][html-footer]         |     [`<Footer />`](#footer)     |
 | [`<h1 />`][html-h1]                 |         [`<H1 />`](#h1)         |
@@ -76,6 +77,7 @@ Here is a list of all the currently supported elements and the web feature they
 | [`<q />`][html-q]                   |          [`<Q />`](#q)          |
 | [`<s />`][html-s]                   |          [`<S />`](#s)          |
 | [`<section />`][html-section]       |    [`<Section />`](#section)    |
+| [`<span />`][html-span]             |       [`<Span />`](#span)       |
 | [`<strong />`][html-strong]         |     [`<Strong />`](#strong)     |
 | [`<table />`][html-table]           |      [`<Table />`](#table)      |
 | [`<tbody />`][html-tbody]           |      [`<TBody />`](#tbody)      |
@@ -87,15 +89,15 @@ Here is a list of all the currently supported elements and the web feature they
 | [`<tr />`][html-tr]                 |         [`<TR />`](#tr)         |
 | [`<ul />`][html-ul]                 |         [`<UL />`](#ul)         |
 | [`<li />`][html-li]                 |         [`<LI />`](#li)         |
-| [`<details />`][html-details]       |            ⏱ Pending            |
-| [`<summary />`][html-summary]       |            ⏱ Pending            |
-| [`<progress />`][html-progress]     |            ⏱ Pending            |
-| [`<select />`][html-select]         |            ⏱ Pending            |
-| [`<picture />`][html-picture]       |            ⏱ Pending            |
-| [`<figure />`][html-figure]         |            ⏱ Pending            |
-| [`<figcaption />`][html-figcaption] |            ⏱ Pending            |
-| [`<form />`][html-form]             |            ⏱ Pending            |
-| [`<label />`][html-label]           |            ⏱ Pending            |
+| [`<details />`][html-details]       |           ⏱ Pending            |
+| [`<summary />`][html-summary]       |           ⏱ Pending            |
+| [`<progress />`][html-progress]     |           ⏱ Pending            |
+| [`<select />`][html-select]         |           ⏱ Pending            |
+| [`<picture />`][html-picture]       |           ⏱ Pending            |
+| [`<figure />`][html-figure]         |           ⏱ Pending            |
+| [`<figcaption />`][html-figcaption] |           ⏱ Pending            |
+| [`<form />`][html-form]             |           ⏱ Pending            |
+| [`<label />`][html-label]           |           ⏱ Pending            |
 
 ## External
 
@@ -105,13 +107,13 @@ Other features not implemented in this package can be found in different parts o
 | ------------------------------- | :------------------: | :--------------------------------------------------------------------------------------------------------------------: |
 | `<audio />`                     |       `Audio`        |                                                 [`expo-av`][ex-audio]                                                  |
 | `<button />`                    |     `<Button />`     |                                                     `react-native`                                                     |
-| `<input type="text" />`         |    `<TextView />`    |                                                     `react-native`                                                     |
+| `<input type="text" />`         |   `<TextInput />`    |                                                     `react-native`                                                     |
 | `<input type="file" />`         |    `ImagePicker`     |                                            [`expo-image-picker`][ex-ipick]                                             |
 | `<input type="file" />`         |   `DocumentPicker`   |                                           [`expo-document-picker`][ex-dpick]                                           |
 | `<canvas />`                    |     `<GLView />`     |                                     [`expo-gl`][ex-gl] & [Expo Canvas][ex-canvas]                                      |
 | `<iframe />`                    |    `<WebView />`     | [`<WebView />`][ex-webview]. `@react-native-community/web-view` is not maintained by Expo and doesn't have web support |
-| [`<link />`][html-link]         |         None         |              Eject the `index.html` with `expo customize:web` and link resources directly with `<link />`              |
-| [`<noscript />`][html-noscript] |         None         |                Eject the `index.html` with `expo customize:web` and use `<noscript />` directly as HTML                |
+| [`<link />`][html-link]         |         None         |              Eject the `index.html` with `npx expo customize` and link resources directly with `<link />`              |
+| [`<noscript />`][html-noscript] |         None         |                Eject the `index.html` with `npx expo customize` and use `<noscript />` directly as HTML                |
 | `<div />`                       |      `<View />`      |                                                     `react-native`                                                     |
 | `<img />`                       |     `<Image />`      |                                                     `react-native`                                                     |
 | `<span />`                      |      `<Text />`      |                                                     `react-native`                                                     |
@@ -119,17 +121,17 @@ Other features not implemented in this package can be found in different parts o
 | `style="backdrop-filter"`       |    `<BlurView />`    |                                                 [`expo-blur`][ex-blur]                                                 |
 | `style="linear-gradient()"`     | `<LinearGradient />` |                                         [`expo-linear-gradient`][ex-gradient]                                          |
 
-[ex-gradient]: https://docs.expo.io/versions/latest/sdk/linear-gradient/
-[ex-webview]: https://docs.expo.io/versions/latest/sdk/webview/
-[ex-audio]: https://docs.expo.io/versions/latest/sdk/audio
-[ex-gl]: https://docs.expo.io/versions/latest/sdk/gl-view
+[ex-gradient]: https://docs.expo.dev/versions/latest/sdk/linear-gradient/
+[ex-webview]: https://docs.expo.dev/versions/latest/sdk/webview/
+[ex-audio]: https://docs.expo.dev/versions/latest/sdk/audio
+[ex-gl]: https://docs.expo.dev/versions/latest/sdk/gl-view
 [ex-canvas]: https://github.com/expo/expo-2d-context
 [html-noscript]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
 [html-link]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
-[ex-blur]: https://docs.expo.io/versions/latest/sdk/blur-view/
-[ex-vid]: https://docs.expo.io/versions/latest/sdk/video/
-[ex-ipick]: https://docs.expo.io/versions/latest/sdk/imagepicker/
-[ex-dpick]: https://docs.expo.io/versions/latest/sdk/document-picker/
+[ex-blur]: https://docs.expo.dev/versions/latest/sdk/blur-view/
+[ex-vid]: https://docs.expo.dev/versions/latest/sdk/video/
+[ex-ipick]: https://docs.expo.dev/versions/latest/sdk/imagepicker/
+[ex-dpick]: https://docs.expo.dev/versions/latest/sdk/document-picker/
 
 ## Headings
 
@@ -146,10 +148,10 @@ import { H1 } from '@expo/html-elements';
 export default () => <H1>Example<H1/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h1 aria-level="1" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h1 aria-level="1" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ### `<H2/>`
 
@@ -158,10 +160,10 @@ import { H2 } from '@expo/html-elements';
 export default () => <H2>Example<H2/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h2 aria-level="2" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h2 aria-level="2" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ### `<H3/>`
 
@@ -170,10 +172,10 @@ import { H3 } from '@expo/html-elements';
 export default () => <H3>Example<H3/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h3 aria-level="3" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h3 aria-level="3" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ### `<H4/>`
 
@@ -182,10 +184,10 @@ import { H4 } from '@expo/html-elements';
 export default () => <H4>Example<H4/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h4 aria-level="4" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h4 aria-level="4" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ### `<H5/>`
 
@@ -194,10 +196,10 @@ import { H5 } from '@expo/html-elements';
 export default () => <H5>Example<H5/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h5 aria-level="5" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h5 aria-level="5" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ### `<H6/>`
 
@@ -206,10 +208,10 @@ import { H6 } from '@expo/html-elements';
 export default () => <H6>Example<H6/>
 ```
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h6 aria-level="6" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h6 aria-level="6" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
 ## Link
 
@@ -218,7 +220,7 @@ export default () => <H6>Example<H6/>
 You can use the anchor element with href prop to open links. On native this will attempt to use the `Linking` API to open the `href`.
 
 - The CSS style is fully normalized to match `<Text />`
-- For pseudo-class effects like hover and focus states check out the package [`react-native-web-hooks`](https://www.npmjs.com/package/react-native-web-hooks) | [tutorial](https://blog.expo.io/css-pseudo-class-effects-in-expo-for-web-56649f88eb6b)
+- For pseudo-class effects like hover and focus states check out the package [`react-native-web-hooks`](https://www.npmjs.com/package/react-native-web-hooks) | [tutorial](https://blog.expo.dev/css-pseudo-class-effects-in-expo-for-web-56649f88eb6b)
 
 ```tsx
 import { A } from '@expo/html-elements';
@@ -230,7 +232,7 @@ export default () => <A href="#" target="_blank" />;
 | Platform | Output                                                                          |
 | -------- | ------------------------------------------------------------------------------- |
 | Web      | `<a data-focusable="{true}" dir="auto" href="#" role="link" target="_blank" />` |
-| Native   | `<Text accessibilityRole="link" onPress={[Function]} />`                        |
+| Native   | `<Text role="link" onPress={[Function]} />`                                     |
 
 ## Layout
 
@@ -253,6 +255,26 @@ Consider the following: in your app you have a basic element at the top which wr
 
 Some elements like `Footer` and `Main` have no iOS, or Android enhancements, but they'll still improve web. Using the proper HTML 5 elements will make your layout compliant with the [HTML5 outline algorithm](https://html.spec.whatwg.org/multipage/sections.html#outlines).
 
+### `<Div/>`
+
+Renders a `<div />` on web and a `View` with no ARIA set on mobile.
+
+```tsx
+import { Div } from '@expo/html-elements';
+
+export default () => (
+    <Div>
+      <P>Some content in the main element</P>
+    </Div>
+  );
+)
+```
+
+| Platform | Output     |
+| -------- | ---------- |
+| Web      | `<div />`  |
+| Native   | `<View />` |
+
 ### `<Nav/>`
 
 ```tsx
@@ -320,7 +342,7 @@ export default () => <Section />;
 | Platform | Output                                           |
 | -------- | ------------------------------------------------ |
 | Web      | `<section role="region" style="display:flex" />` |
-| Native   | `<View accessibilityRole="summary" />`           |
+| Native   | `<View role="summary" />`                        |
 
 ### `<Article/>`
 
@@ -393,8 +415,8 @@ export default () => (
 
 Standard paragraph element.
 
-| Platform  | Output                                                        |
-| --------- | ------------------------------------------------------------- |
+| Platform  | Output                                                     |
+| --------- | ---------------------------------------------------------- |
 | Universal | `<Text style={{ fontSize: 14, marginVertical: '1em' }} />` |
 
 ### `<B/>`
@@ -413,6 +435,14 @@ Alternate bold text.
 | --------- | ----------------------------------------- |
 | Universal | `<Text style={{ fontWeight: 'bold' }} />` |
 
+### `<Span/>`
+
+Inline text element.
+
+| Platform  | Output     |
+| --------- | ---------- |
+| Universal | `<Text />` |
+
 ### `<S/>`
 
 Strike through text.
@@ -712,11 +742,50 @@ Used to caption your table. Excepts text as a child.
 | Web      | `<caption />`               |
 | Native   | `<Text style={[Custom]} />` |
 
-## TODO
+# TODO
 
 - Improve relative imports for better tree-shaking.
 
-## Contributing
+# Babel
+
+You can write `react-dom` elements in your code and use the babel plugin to transform them to `@expo/html-elements` elements.
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: ['@expo/html-elements/babel'],
+};
+```
+
+## Input
+
+```js
+export default function Page() {
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  );
+}
+```
+
+## Output
+
+The import is automatically added if it's not already present. All props are passed through without any additional transforms.
+
+```js
+import { Div, H1 } from '@expo/html-elements';
+
+export default function Page() {
+  return (
+    <Div>
+      <H1>Hello World</H1>
+    </Div>
+  );
+}
+```
+
+# Contributing
 
 Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
 
@@ -733,6 +802,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
 [html-caption]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
 [html-code]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
 [html-del]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
+[html-div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
 [html-em]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
 [html-footer]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
 [html-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
@@ -754,6 +824,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
 [html-q]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
 [html-s]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
 [html-section]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+[html-span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
 [html-small]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
 [html-strong]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
 [html-table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

package/babel/__tests__/__snapshots__/transform.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Converts basic link 1`] = `
+"import { A } from "@expo/html-elements";import { jsx as _jsx } from "react/jsx-runtime";
+function App() {
+  return _jsx(A, { href: "#", children: "Link" });
+}"
+`;
+
+exports[`Converts fixture 1`] = `
+"import { Main, Article, P, Code, Div } from "@expo/html-elements";import { Image } from 'react-native';import { jsx as _jsx } from "react/jsx-runtime";import { jsxs as _jsxs } from "react/jsx-runtime";
+
+export default function App() {
+  return (
+    _jsx(Main, { className: "flex-1 items-center justify-center", children:
+      _jsxs(Article, { className: "md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800", children: [
+        _jsx(Image, {
+          className: "w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto",
+          source: {
+            uri: 'https://en.gravatar.com/userimage/120276729/078ee8361156d0e1c37b90e7851fed4b.png'
+          },
+          width: "384",
+          height: "512" }),
+
+        _jsxs(Main, { className: "pt-6 md:p-8 text-center md:text-left space-y-4", children: [
+          _jsxs(P, { className: "text-lg font-medium", children: ["With ",
+            _jsx(Code, { children: "@expo/html-elements" }), ", you can write HTML syntax that renders to real native components. Combined with Tailwind CSS, you have an experience that makes web developers feel at home.\\u201D"] }),
+
+
+
+          _jsxs(Div, { className: "font-medium", children: [
+            _jsx(P, { className: "text-sky-500 dark:text-sky-400 my-0", children: "Evan Bacon" }),
+            _jsx(P, { className: "text-slate-700 dark:text-slate-500 my-2", children: "Engineer, Expo" })] })] })] }) }));
+
+
+
+
+
+}"
+`;
+
+exports[`Doesn't support unknowns 1`] = `
+"import { jsx as _jsx } from "react/jsx-runtime";
+function App() {
+  return _jsx("foobar", { href: "#", children: "Link" });
+}"
+`;
+
+exports[`Skips injecting the import if one is already present 1`] = `
+"import { A } from "@expo/html-elements";
+import { A } from '@expo/html-elements';import { jsx as _jsx } from "react/jsx-runtime";
+function App() {
+  return _jsx(A, { href: "#", children: "Link" });
+}"
+`;

package/babel/__tests__/fixtures/one.js

@@ -0,0 +1,29 @@
+import { Image } from 'react-native';
+
+export default function App() {
+  return (
+    <main className="flex-1 items-center justify-center">
+      <article className="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
+        <Image
+          className="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
+          source={{
+            uri: 'https://en.gravatar.com/userimage/120276729/078ee8361156d0e1c37b90e7851fed4b.png',
+          }}
+          width="384"
+          height="512"
+        />
+        <main className="pt-6 md:p-8 text-center md:text-left space-y-4">
+          <p className="text-lg font-medium">
+            With <code>@expo/html-elements</code>, you can write HTML syntax that renders to real
+            native components. Combined with Tailwind CSS, you have an experience that makes web
+            developers feel at home.”
+          </p>
+          <div className="font-medium">
+            <p className="text-sky-500 dark:text-sky-400 my-0">Evan Bacon</p>
+            <p className="text-slate-700 dark:text-slate-500 my-2">Engineer, Expo</p>
+          </div>
+        </main>
+      </article>
+    </main>
+  );
+}

package/babel/__tests__/transform.test.js

@@ -0,0 +1,96 @@
+const babel = require('@babel/core');
+const fs = require('fs');
+const path = require('path');
+
+const plugin = require('../../babel');
+
+const options = {
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('@react-native/babel-preset'),
+      {
+        useTransformReactJSXExperimental: false,
+        disableImportExportTransform: true,
+      },
+    ],
+  ],
+  caller: {
+    name: 'metro',
+    platform: 'ios',
+  },
+  minified: false,
+  plugins: [plugin],
+  compact: false,
+
+  filename: 'unknown',
+  // Snapshot sanity
+  retainLines: true,
+  cwd: __dirname,
+  babelrcRoots: false,
+};
+
+it(`Doesn't support unknowns`, () => {
+  const sourceCode = `
+function App() {
+  return <foobar href="#">Link</foobar>;
+}`;
+  const { code } = babel.transform(sourceCode, options);
+  expect(code).toMatchSnapshot();
+  expect(code).not.toMatch(`@expo/html-elements`);
+});
+
+it(`Skips html and body on web`, () => {
+  const sourceCode = `
+function App() {
+  return <html><body>Test</body></html>;
+}`;
+  const { code } = babel.transform(sourceCode, {
+    ...options,
+    caller: {
+      ...options.caller,
+      platform: 'web',
+    },
+  });
+  expect(code).toMatch(`_jsx("html", { children: _jsx("body", { children: "Test" }) });`);
+  const { code: nativeCode } = babel.transform(sourceCode, options);
+  expect(nativeCode).toMatch(`_jsx(Div, { children: _jsx(Div, { children: "Test" }) });`);
+});
+
+it(`Skips conversion in node modules`, () => {
+  const sourceCode = `
+function App() {
+  return <a href="#">Link</a>;
+}`;
+  const { code } = babel.transform(sourceCode, {
+    ...options,
+    filename: '/node_modules/foo/bar.js',
+  });
+  expect(code).not.toMatch(`import { A } from "@expo/html-elements";`);
+});
+
+it(`Converts basic link`, () => {
+  const sourceCode = `
+function App() {
+  return <a href="#">Link</a>;
+}`;
+  const { code } = babel.transform(sourceCode, options);
+  expect(code).toMatchSnapshot();
+  expect(code).toMatch(`import { A } from "@expo/html-elements";`);
+});
+
+it(`Skips injecting the import if one is already present`, () => {
+  const sourceCode = `
+import '@expo/html-elements';
+function App() {
+  return <a href="#">Link</a>;
+}`;
+  const { code } = babel.transform(sourceCode, options);
+  expect(code).toMatchSnapshot();
+});
+
+it(`Converts fixture`, () => {
+  const sourceCode = fs.readFileSync(path.join(__dirname, 'fixtures/one.js'), 'utf8');
+  const { code } = babel.transform(sourceCode, options);
+  expect(code).toMatchSnapshot();
+});

package/babel/jest.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+const roots = ['.'];
+
+module.exports = {
+  testEnvironment: 'node',
+  testRegex: './__tests__/.*(test|spec)\\.[jt]sx?$',
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  rootDir: path.resolve(__dirname),
+  displayName: require('../package').name,
+  roots,
+};