@tamagui/dom 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/tables/tags.ts

@@ -0,0 +1,557 @@
+import type { DefaultStyle, TagName, TagRow } from './types'
+
+/**
+ * The tag table: the 49 elements of the Tamagui DOM contract.
+ *
+ * `display` and `backing` are independent columns. `p` is a block element
+ * backed by a native Text, `button` is inline-block backed by a native View.
+ * The compiler reads `backing` to inject primitives and `content` to report
+ * invalid nesting; the runtime reads the defaults to build each element.
+ *
+ * Element defaults follow React Strict DOM's resets: an explicit, equal
+ * starting point on both platforms instead of the browser default stylesheet on
+ * web and nothing on native. Differences from RSD are in `compatibility.ts`.
+ */
+
+/**
+ * Undoes the browser default stylesheet, keyed by `display`, before any tag
+ * default. Web only: react native has no default stylesheet to undo, so every
+ * key here would be a no-op that still costs a style lookup per element.
+ */
+export const DISPLAY_WEB_RESET: Readonly<Record<TagRow['display'], DefaultStyle>> = {
+  block: { margin: 0, padding: 0 },
+  inline: { margin: 0, padding: 0, textDecorationLine: 'none' },
+  'inline-block': { margin: 0, padding: 0, borderStyle: 'solid' },
+}
+
+const MONOSPACE: DefaultStyle = { fontFamily: 'monospace' }
+const HEADING: DefaultStyle = { fontSize: '1.5rem', fontWeight: 'bold' }
+
+const NO_FORM_SUBMISSION =
+  'renders as a container on native; there is no form submission, validation or reset'
+
+const NO_NATIVE_PICKER =
+  'native has no menu-based select control, so this tag is a native build error'
+
+export const TAGS: Readonly<Record<TagName, TagRow>> = {
+  a: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'link',
+    element: 'HTMLAnchorElement',
+    props: 'anchor',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native has no navigation for href, target, rel, download or referrerPolicy',
+  },
+  article: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  aside: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  b: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { fontWeight: 'bold' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  bdi: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native has no bidirectional isolation; the text renders in the inherited direction',
+  },
+  bdo: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native honours dir as a writing direction but does not override embedded bidi runs',
+  },
+  blockquote: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLQuoteElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  br: {
+    display: 'inline',
+    content: 'void',
+    backing: 'text',
+    element: 'HTMLBRElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  button: {
+    display: 'inline-block',
+    content: 'flow',
+    backing: 'view',
+    role: 'button',
+    element: 'HTMLButtonElement',
+    props: 'button',
+    defaults: { borderWidth: 1 },
+    web: 'host',
+    native: 'polyfill',
+    note: 'html restricts button content to phrasing; the native backing is a view, so block children are allowed',
+  },
+  code: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: MONOSPACE,
+    web: 'host',
+    native: 'polyfill',
+  },
+  del: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLModElement',
+    props: 'common',
+    defaults: { textDecorationLine: 'line-through' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  div: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLDivElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  em: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { fontStyle: 'italic' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  fieldset: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLFieldSetElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: NO_FORM_SUBMISSION,
+  },
+  footer: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  form: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLFormElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: NO_FORM_SUBMISSION,
+  },
+  h1: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  h2: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  h3: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  h4: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  h5: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  h6: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    role: 'heading',
+    element: 'HTMLHeadingElement',
+    props: 'common',
+    defaults: HEADING,
+    web: 'host',
+    native: 'polyfill',
+  },
+  header: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    role: 'header',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  hr: {
+    display: 'block',
+    content: 'void',
+    backing: 'view',
+    element: 'HTMLHRElement',
+    props: 'common',
+    defaults: { backgroundColor: 'black', height: 1 },
+    web: 'host',
+    native: 'polyfill',
+  },
+  i: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { fontStyle: 'italic' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  img: {
+    display: 'inline',
+    content: 'void',
+    backing: 'image',
+    element: 'HTMLImageElement',
+    props: 'image',
+    defaults: { objectFit: 'fill' },
+    web: 'host',
+    native: 'polyfill',
+    note: 'width and height props set an aspect ratio on native, where images have no intrinsic layout size until they load',
+  },
+  input: {
+    display: 'inline-block',
+    content: 'void',
+    backing: 'textinput',
+    element: 'HTMLInputElement',
+    props: 'input',
+    defaults: { borderWidth: 1 },
+    web: 'host',
+    native: 'polyfill',
+    note: 'native supports the text-like input types only; checkbox, color, date, datetime-local, file, month, radio, range, time and week are a native build error',
+  },
+  ins: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLModElement',
+    props: 'common',
+    defaults: { textDecorationLine: 'underline' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  kbd: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: MONOSPACE,
+    web: 'host',
+    native: 'polyfill',
+  },
+  label: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLLabelElement',
+    props: 'label',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native has no label association, so `for` does not focus or activate its control',
+  },
+  li: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    role: 'listitem',
+    element: 'HTMLLIElement',
+    props: 'listitem',
+    web: 'host',
+    native: 'polyfill',
+    note: 'list markers and the `value` counter are not rendered on either platform, matching the list-style reset',
+  },
+  main: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  mark: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { backgroundColor: 'yellow', color: 'black' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  nav: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  ol: {
+    display: 'block',
+    content: 'tags',
+    childTags: ['li'],
+    backing: 'view',
+    role: 'list',
+    element: 'HTMLOListElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  optgroup: {
+    display: 'block',
+    content: 'tags',
+    childTags: ['option'],
+    backing: 'view',
+    element: 'HTMLOptGroupElement',
+    props: 'optgroup',
+    web: 'host',
+    native: 'none',
+    note: NO_NATIVE_PICKER,
+  },
+  option: {
+    display: 'block',
+    content: 'text',
+    backing: 'text',
+    element: 'HTMLOptionElement',
+    props: 'option',
+    web: 'host',
+    native: 'none',
+    note: NO_NATIVE_PICKER,
+  },
+  p: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLParagraphElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  pre: {
+    display: 'block',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLPreElement',
+    props: 'common',
+    defaults: MONOSPACE,
+    web: 'host',
+    native: 'polyfill',
+    note: 'native preserves whitespace in text but has no scroll container, so long lines wrap instead of scrolling',
+  },
+  s: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { textDecorationLine: 'line-through' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  section: {
+    display: 'block',
+    content: 'flow',
+    backing: 'view',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  select: {
+    display: 'inline-block',
+    content: 'tags',
+    childTags: ['optgroup', 'option'],
+    backing: 'view',
+    element: 'HTMLSelectElement',
+    props: 'select',
+    web: 'host',
+    native: 'none',
+    note: NO_NATIVE_PICKER,
+  },
+  span: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLSpanElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+  strong: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { fontWeight: 'bold' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  sub: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native has no vertical-align, so subscript text sits on the baseline',
+  },
+  sup: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+    note: 'native has no vertical-align, so superscript text sits on the baseline',
+  },
+  textarea: {
+    display: 'inline-block',
+    content: 'void',
+    backing: 'textinput',
+    element: 'HTMLTextAreaElement',
+    props: 'textarea',
+    defaults: { borderWidth: 1 },
+    nativeDefaults: { verticalAlign: 'top' },
+    web: 'host',
+    native: 'polyfill',
+    note: 'the value comes from value or defaultValue; children are a build error on both platforms',
+  },
+  u: {
+    display: 'inline',
+    content: 'phrasing',
+    backing: 'text',
+    element: 'HTMLElement',
+    props: 'common',
+    defaults: { textDecorationLine: 'underline' },
+    web: 'host',
+    native: 'polyfill',
+  },
+  ul: {
+    display: 'block',
+    content: 'tags',
+    childTags: ['li'],
+    backing: 'view',
+    role: 'list',
+    element: 'HTMLUListElement',
+    props: 'common',
+    web: 'host',
+    native: 'polyfill',
+  },
+}
+
+/**
+ * Web-only defaults: undoing a browser default, or a property with no
+ * cross-platform spelling. `fontSize: 1em` cancels the browser's smaller
+ * default size for monospace text, which is the whole reason the browser
+ * renders `code`, `kbd` and `pre` at a different size from their surroundings.
+ *
+ * Everything here has to be a style property Tamagui actually resolves. A key
+ * Tamagui does not know is not a silent no-op — it falls through to the element
+ * as an attribute, which is a react warning and no styling. `list-style`,
+ * `resize` and `overflow-wrap` are all in that category today, which is why
+ * they are absent and recorded in `compatibility.ts` instead.
+ */
+export const TAG_WEB_DEFAULTS: Readonly<Partial<Record<TagName, DefaultStyle>>> = {
+  code: { fontSize: '1em' },
+  hr: { borderStyle: 'none', borderWidth: 0, boxSizing: 'border-box' },
+  img: { height: 'auto', maxWidth: '100%' },
+  kbd: { fontSize: '1em' },
+  pre: { fontSize: '1em', overflow: 'auto' },
+}
+
+export const TAG_NAMES: readonly TagName[] = Object.keys(TAGS) as TagName[]