acrylblends 0.6.2 → 0.6.3

package/plugins/acryl-router/src/core/jsx/intrinsic-element/components.ts

@@ -0,0 +1,210 @@
+import { raw } from '../../helper/html/index.ts'
+import type { HtmlEscapedCallback, HtmlEscapedString } from '../../utils/html.ts'
+import { JSXNode, getNameSpaceContext, renderChildren } from '../base.ts'
+import type { Child, Props } from '../base.ts'
+import { toArray } from '../children.ts'
+import { PERMALINK } from '../constants.ts'
+import { useContext } from '../context.ts'
+import type { IntrinsicElements } from '../intrinsic-elements.ts'
+import type { FC, PropsWithChildren } from '../types.ts'
+import {
+  dataPrecedenceAttr,
+  deDupeKeyMap,
+  isStylesheetLinkWithPrecedence,
+  shouldDeDupeByKey,
+} from './common.ts'
+
+const metaTagMap: WeakMap<
+  object,
+  Record<string, [string, Props, string | undefined][]>
+> = new WeakMap()
+const insertIntoHead: (
+  tagName: string,
+  tag: string,
+  props: Props,
+  precedence: string | undefined
+) => HtmlEscapedCallback =
+  (tagName, tag, props, precedence) =>
+  ({ buffer, context }): undefined => {
+    if (!buffer) {
+      return
+    }
+    const map = metaTagMap.get(context) || {}
+    metaTagMap.set(context, map)
+    const tags = (map[tagName] ||= [])
+
+    let duped = false
+    const deDupeKeys = deDupeKeyMap[tagName]
+    const deDupeByKey = shouldDeDupeByKey(tagName, precedence !== undefined)
+    if (deDupeByKey) {
+      LOOP: for (const [, tagProps] of tags) {
+        if (
+          tagName === 'link' &&
+          !(tagProps.rel === 'stylesheet' && tagProps[dataPrecedenceAttr] !== undefined)
+        ) {
+          continue
+        }
+        for (const key of deDupeKeys) {
+          if ((tagProps?.[key] ?? null) === props?.[key]) {
+            duped = true
+            break LOOP
+          }
+        }
+      }
+    }
+
+    if (duped) {
+      buffer[0] = buffer[0].replaceAll(tag, '')
+    } else if (deDupeByKey || tagName === 'link') {
+      tags.push([tag, props, precedence])
+    } else {
+      tags.unshift([tag, props, precedence])
+    }
+
+    if (buffer[0].indexOf('</head>') !== -1) {
+      let insertTags
+      if (tagName === 'link' || precedence !== undefined) {
+        const precedences: string[] = []
+        insertTags = tags
+          .map(([tag, , tagPrecedence], index) => {
+            if (tagPrecedence === undefined) {
+              return [tag, Number.MAX_SAFE_INTEGER, index] as [string, number, number]
+            }
+            let order = precedences.indexOf(tagPrecedence as string)
+            if (order === -1) {
+              precedences.push(tagPrecedence as string)
+              order = precedences.length - 1
+            }
+            return [tag, order, index] as [string, number, number]
+          })
+          .sort((a, b) => a[1] - b[1] || a[2] - b[2])
+          .map(([tag]) => tag)
+      } else {
+        insertTags = tags.map(([tag]) => tag)
+      }
+
+      insertTags.forEach((tag) => {
+        buffer[0] = buffer[0].replaceAll(tag, '')
+      })
+      buffer[0] = buffer[0].replace(/(?=<\/head>)/, () => insertTags.join(''))
+    }
+  }
+
+const returnWithoutSpecialBehavior = (tag: string, children: Child, props: Props) =>
+  renderChildren([new JSXNode(tag, props, toArray(children ?? []))])
+
+const documentMetadataTag = (tag: string, children: Child, props: Props, sort: boolean) => {
+  if ('itemProp' in props) {
+    return returnWithoutSpecialBehavior(tag, children, props)
+  }
+
+  let { precedence, blocking, ...restProps } = props
+  precedence = sort ? (precedence ?? '') : undefined
+  if (sort) {
+    restProps[dataPrecedenceAttr] = precedence
+  }
+
+  const string = new JSXNode(tag, restProps, toArray(children || [])).toString()
+
+  if (string instanceof Promise) {
+    return string.then((resString) =>
+      raw(resString, [
+        ...((resString as HtmlEscapedString).callbacks || []),
+        insertIntoHead(tag, resString, restProps, precedence),
+      ])
+    )
+  } else {
+    return raw(string, [insertIntoHead(tag, string, restProps, precedence)])
+  }
+}
+
+export const title: FC<PropsWithChildren> = ({ children, ...props }) => {
+  const nameSpaceContext = getNameSpaceContext()
+  if (nameSpaceContext) {
+    const context = useContext(nameSpaceContext)
+    if (context === 'svg' || context === 'head') {
+      return new JSXNode(
+        'title',
+        props,
+        toArray(children ?? []) as Child[]
+      ) as unknown as HtmlEscapedString
+    }
+  }
+
+  return documentMetadataTag('title', children, props, false)
+}
+export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = ({
+  children,
+  ...props
+}) => {
+  const nameSpaceContext = getNameSpaceContext()
+  if (
+    ['src', 'async'].some((k) => !props[k]) ||
+    (nameSpaceContext && useContext(nameSpaceContext) === 'head')
+  ) {
+    return returnWithoutSpecialBehavior('script', children, props)
+  }
+
+  return documentMetadataTag('script', children, props, false)
+}
+
+export const style: FC<PropsWithChildren<IntrinsicElements['style']>> = ({
+  children,
+  ...props
+}) => {
+  if (!['href', 'precedence'].every((k) => k in props)) {
+    return returnWithoutSpecialBehavior('style', children, props)
+  }
+  props['data-href'] = props.href
+  delete props.href
+  return documentMetadataTag('style', children, props, true)
+}
+export const link: FC<PropsWithChildren<IntrinsicElements['link']>> = ({ children, ...props }) => {
+  if (
+    ['onLoad', 'onError'].some((k) => k in props) ||
+    (props.rel === 'stylesheet' && (!('precedence' in props) || 'disabled' in props))
+  ) {
+    return returnWithoutSpecialBehavior('link', children, props)
+  }
+  return documentMetadataTag('link', children, props, isStylesheetLinkWithPrecedence(props))
+}
+export const meta: FC<PropsWithChildren> = ({ children, ...props }) => {
+  const nameSpaceContext = getNameSpaceContext()
+  if (nameSpaceContext && useContext(nameSpaceContext) === 'head') {
+    return returnWithoutSpecialBehavior('meta', children, props)
+  }
+  return documentMetadataTag('meta', children, props, false)
+}
+
+const newJSXNode = (tag: string, { children, ...props }: PropsWithChildren<unknown>) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  new JSXNode(tag, props, toArray(children ?? []) as Child[]) as any
+export const form: FC<
+  PropsWithChildren<{
+    action?: Function | string
+    method?: 'get' | 'post'
+  }>
+> = (props) => {
+  if (typeof props.action === 'function') {
+    props.action = PERMALINK in props.action ? (props.action[PERMALINK] as string) : undefined
+  }
+  return newJSXNode('form', props)
+}
+
+const formActionableElement = (
+  tag: string,
+  props: PropsWithChildren<{
+    formAction?: Function | string
+  }>
+) => {
+  if (typeof props.formAction === 'function') {
+    props.formAction =
+      PERMALINK in props.formAction ? (props.formAction[PERMALINK] as string) : undefined
+  }
+  return newJSXNode(tag, props)
+}
+
+export const input: (props: PropsWithChildren) => unknown = (props) =>
+  formActionableElement('input', props)
+export const button: (props: PropsWithChildren) => unknown = (props) =>
+  formActionableElement('button', props)