@expo/html-elements 0.3.0 → 0.4.0

package/README.md

@@ -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)      |
@@ -110,8 +112,8 @@ Other features not implemented in this package can be found in different parts o
 | `<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 `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                  |
+| [`<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`                                                     |
@@ -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
@@ -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,63 @@
+const babel = require('@babel/core');
+const fs = require('fs');
+const path = require('path');
+
+const plugin = require('../../babel');
+
+const options = {
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('metro-react-native-babel-preset'),
+      {
+        useTransformReactJSXExperimental: false,
+        disableImportExportTransform: true,
+      },
+    ],
+  ],
+  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(`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,
+};

package/babel.js

@@ -7,6 +7,7 @@ const elementToComponent = {
   br: 'BR',
   caption: 'Caption',
   code: 'Code',
+  div: 'Div',
   footer: 'Footer',
   h1: 'H1',
   h2: 'H2',
@@ -36,8 +37,17 @@ const elementToComponent = {
   tr: 'TR',
   ul: 'UL',
   strong: 'Strong',
+  span: 'Span',
   aside: 'Aside',
   tfoot: 'TFoot',
+  blockquote: 'BlockQuote',
+  q: 'Q',
+
+  html: 'Div',
+  body: 'Div',
+
+  // TODO: img
+  // NOTE: head, meta, link should use some special component in the future.
 };
 
 module.exports = ({ types: t }, { expo }) => {

package/build/elements/Layout.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewProps } from '../primitives/View';
+export declare const Div: React.ComponentType<ViewProps>;
 export declare const Nav: React.ComponentType<ViewProps>;
 export declare const Footer: React.ComponentType<ViewProps>;
 export declare const Aside: React.ComponentType<ViewProps>;

package/build/elements/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQrD,eAAO,MAAM,GAAG,gCAMf,CAAC;AACF,eAAO,MAAM,MAAM,gCAMlB,CAAC;AACF,eAAO,MAAM,KAAK,gCAMjB,CAAC;AACF,eAAO,MAAM,MAAM,gCASlB,CAAC;AACF,eAAO,MAAM,IAAI,gCAMhB,CAAC;AACF,eAAO,MAAM,OAAO,gCAMnB,CAAC;AACF,eAAO,MAAM,OAAO,gCAElB,CAAC"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQrD,eAAO,MAAM,GAAG,gCAAe,CAAC;AAEhC,eAAO,MAAM,GAAG,gCAMf,CAAC;AACF,eAAO,MAAM,MAAM,gCAMlB,CAAC;AACF,eAAO,MAAM,KAAK,gCAMjB,CAAC;AACF,eAAO,MAAM,MAAM,gCASlB,CAAC;AACF,eAAO,MAAM,IAAI,gCAMhB,CAAC;AACF,eAAO,MAAM,OAAO,gCAMnB,CAAC;AACF,eAAO,MAAM,OAAO,gCAElB,CAAC"}

package/build/elements/Layout.js

@@ -6,6 +6,7 @@ function createView(nativeProps = {}) {
         return React.createElement(View, { ...nativeProps, ...props, ref: ref });
     });
 }
+export const Div = createView();
 export const Nav = createView(Platform.select({
     web: {
         accessibilityRole: 'navigation',

package/build/elements/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,UAAU,CAAC,cAAyB,EAAE;IAC7C,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,oBAAC,IAAI,OAAK,WAAW,KAAM,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IACxD,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,YAAY;KAChC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,eAAe;KACnC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,QAAQ;KAC5B;IACD,OAAO,EAAE;QACP,iBAAiB,EAAE,QAAQ;KAC5B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,MAAM;KAC1B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,SAAS;KAC7B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;IAChC,iBAAiB,EAAE,SAAS,EAAE,UAAU;CACzC,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\n\nimport View, { ViewProps } from '../primitives/View';\n\nfunction createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {\n  return forwardRef((props: ViewProps, ref) => {\n    return <View {...nativeProps} {...props} ref={ref} />;\n  }) as ComponentType<ViewProps>;\n}\n\nexport const Nav = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'navigation',\n    },\n  })\n);\nexport const Footer = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'contentinfo',\n    },\n  })\n);\nexport const Aside = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'complementary',\n    },\n  })\n);\nexport const Header = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'banner',\n    },\n    default: {\n      accessibilityRole: 'header',\n    },\n  })\n);\nexport const Main = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'main',\n    },\n  })\n);\nexport const Article = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'article',\n    },\n  })\n);\nexport const Section = createView({\n  accessibilityRole: 'summary', // region?\n});\n"]}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,UAAU,CAAC,cAAyB,EAAE;IAC7C,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,oBAAC,IAAI,OAAK,WAAW,KAAM,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IACxD,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,EAAE,CAAC;AAEhC,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,YAAY;KAChC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,eAAe;KACnC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,QAAQ;KAC5B;IACD,OAAO,EAAE;QACP,iBAAiB,EAAE,QAAQ;KAC5B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,MAAM;KAC1B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,SAAS;KAC7B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;IAChC,iBAAiB,EAAE,SAAS,EAAE,UAAU;CACzC,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\n\nimport View, { ViewProps } from '../primitives/View';\n\nfunction createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {\n  return forwardRef((props: ViewProps, ref) => {\n    return <View {...nativeProps} {...props} ref={ref} />;\n  }) as ComponentType<ViewProps>;\n}\n\nexport const Div = createView();\n\nexport const Nav = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'navigation',\n    },\n  })\n);\nexport const Footer = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'contentinfo',\n    },\n  })\n);\nexport const Aside = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'complementary',\n    },\n  })\n);\nexport const Header = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'banner',\n    },\n    default: {\n      accessibilityRole: 'header',\n    },\n  })\n);\nexport const Main = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'main',\n    },\n  })\n);\nexport const Article = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'article',\n    },\n  })\n);\nexport const Section = createView({\n  accessibilityRole: 'summary', // region?\n});\n"]}

package/build/elements/Text.d.ts

@@ -17,5 +17,6 @@ export declare const Time: React.ComponentType<TimeProps>;
 export declare const Strong: React.ComponentType<TextProps>;
 export declare const Del: React.ComponentType<TextProps>;
 export declare const EM: React.ComponentType<TextProps>;
+export declare const Span: React.ComponentType<TextProps>;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/build/elements/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,iCAMiB,CAAC;AAEhC,eAAO,MAAM,UAAU,sCAEa,CAAC;AAErC,eAAO,MAAM,EAAE,gCAEe,CAAC;AAE/B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAE/B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAM/B,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtC,eAAO,MAAM,GAAG,+BAKa,CAAC;AAG9B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAE/B,eAAO,MAAM,MAAM,gCAAI,CAAC;AACxB,eAAO,MAAM,GAAG,gCAAI,CAAC;AACrB,eAAO,MAAM,EAAE,gCAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,gCAEgB,CAAC;AAE/B,eAAO,MAAM,CAAC,iCAMiB,CAAC;AAEhC,eAAO,MAAM,UAAU,sCAEa,CAAC;AAErC,eAAO,MAAM,EAAE,gCAEe,CAAC;AAE/B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAE/B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAM/B,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtC,eAAO,MAAM,GAAG,+BAKa,CAAC;AAG9B,eAAO,MAAM,IAAI,gCAEa,CAAC;AAE/B,eAAO,MAAM,MAAM,gCAAI,CAAC;AACxB,eAAO,MAAM,GAAG,gCAAI,CAAC;AACrB,eAAO,MAAM,EAAE,gCAAI,CAAC;AACpB,eAAO,MAAM,IAAI,gCAAO,CAAC"}

package/build/elements/Text.js

@@ -49,6 +49,7 @@ export const Time = forwardRef(({ dateTime, ...props }, ref) => {
 export const Strong = B;
 export const Del = S;
 export const EM = I;
+export const Span = Text;
 const styles = StyleSheet.create({
     p: {
         marginVertical: em(1),

package/build/elements/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet, Platform } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\nimport View, { ViewProps } from '../primitives/View';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.p, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.b, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.s, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.i, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ children, cite, style, ...props }: QuoteProps, ref) => {\n  return (\n    <Text {...props} style={[styles.q, style]} ref={ref}>\n      \"{children}\"\n    </Text>\n  );\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, cite, ...props }: BlockQuoteProps, ref) => {\n  return <View {...props} style={[styles.blockQuote, style]} ref={ref} />;\n}) as ComponentType<BlockQuoteProps>;\n\nexport const BR = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.br, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.mark, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Code = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.code, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nfunction isTextProps(props: any): props is TextProps {\n  return typeof props.children === 'string';\n}\n\ntype PreProps = TextProps | ViewProps;\n\nexport const Pre = forwardRef((props: PreProps, ref: any) => {\n  if (isTextProps(props)) {\n    return <Text {...props} style={[styles.code, styles.pre, props.style]} ref={ref} />;\n  }\n  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;\n}) as ComponentType<PreProps>;\n\n// Extract dateTime to prevent passing it to the native Text element\nexport const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TimeProps>;\n\nexport const Strong = B;\nexport const Del = S;\nexport const EM = I;\n\nconst styles = StyleSheet.create({\n  p: {\n    marginVertical: em(1),\n  },\n  b: {\n    fontWeight: 'bold',\n  },\n  q: {\n    fontStyle: 'italic',\n  },\n  code: {\n    fontFamily: Platform.select({ default: 'Courier', ios: 'Courier New', android: 'monospace' }),\n    fontWeight: '500',\n  },\n  pre: {\n    marginVertical: em(1),\n  },\n  blockQuote: {\n    marginVertical: em(1),\n  },\n  br: {\n    width: 0,\n    height: em(0.5),\n  },\n  s: {\n    textDecorationLine: 'line-through',\n    textDecorationStyle: 'solid',\n  },\n  mark: {\n    backgroundColor: 'yellow',\n    color: 'black',\n  },\n  i: {\n    fontStyle: 'italic',\n  },\n});\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet, Platform } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\nimport View, { ViewProps } from '../primitives/View';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.p, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.b, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.s, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.i, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ children, cite, style, ...props }: QuoteProps, ref) => {\n  return (\n    <Text {...props} style={[styles.q, style]} ref={ref}>\n      \"{children}\"\n    </Text>\n  );\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, cite, ...props }: BlockQuoteProps, ref) => {\n  return <View {...props} style={[styles.blockQuote, style]} ref={ref} />;\n}) as ComponentType<BlockQuoteProps>;\n\nexport const BR = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.br, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.mark, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Code = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.code, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nfunction isTextProps(props: any): props is TextProps {\n  return typeof props.children === 'string';\n}\n\ntype PreProps = TextProps | ViewProps;\n\nexport const Pre = forwardRef((props: PreProps, ref: any) => {\n  if (isTextProps(props)) {\n    return <Text {...props} style={[styles.code, styles.pre, props.style]} ref={ref} />;\n  }\n  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;\n}) as ComponentType<PreProps>;\n\n// Extract dateTime to prevent passing it to the native Text element\nexport const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TimeProps>;\n\nexport const Strong = B;\nexport const Del = S;\nexport const EM = I;\nexport const Span = Text;\n\nconst styles = StyleSheet.create({\n  p: {\n    marginVertical: em(1),\n  },\n  b: {\n    fontWeight: 'bold',\n  },\n  q: {\n    fontStyle: 'italic',\n  },\n  code: {\n    fontFamily: Platform.select({ default: 'Courier', ios: 'Courier New', android: 'monospace' }),\n    fontWeight: '500',\n  },\n  pre: {\n    marginVertical: em(1),\n  },\n  blockQuote: {\n    marginVertical: em(1),\n  },\n  br: {\n    width: 0,\n    height: em(0.5),\n  },\n  s: {\n    textDecorationLine: 'line-through',\n    textDecorationStyle: 'solid',\n  },\n  mark: {\n    backgroundColor: 'yellow',\n    color: 'black',\n  },\n  i: {\n    fontStyle: 'italic',\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/html-elements",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Universal semantic HTML React components for iOS, Android, web, and desktop",
   "main": "build/Elements.js",
   "types": "build/Elements.d.ts",
@@ -9,7 +9,9 @@
     "build": "expo-module build",
     "clean": "expo-module clean",
     "lint": "expo-module lint",
-    "test": "expo-module test",
+    "test": "yarn test:babel && yarn test:src",
+    "test:src": "expo-module test",
+    "test:babel": "jest --config babel/jest.config.js",
     "prepare": "expo-module prepare",
     "prepublishOnly": "expo-module prepublishOnly",
     "expo-module": "expo-module"
@@ -35,17 +37,27 @@
   "jest": {
     "projects": [
       {
-        "preset": "jest-expo/ios"
+        "preset": "jest-expo/ios",
+        "modulePathIgnorePatterns": [
+          "<rootDir>/babel/"
+        ]
       },
       {
-        "preset": "jest-expo/android"
+        "preset": "jest-expo/android",
+        "modulePathIgnorePatterns": [
+          "<rootDir>/babel/"
+        ]
       },
       {
-        "preset": "jest-expo/web"
+        "preset": "jest-expo/web",
+        "modulePathIgnorePatterns": [
+          "<rootDir>/babel/"
+        ]
       }
     ]
   },
   "devDependencies": {
     "expo-module-scripts": "^3.0.0"
-  }
+  },
+  "gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
 }