feat: introduce blink parser and replace insertion type (DAP-4712) (#10)

Author: alsakhaev

libs/core/src/adapters/interface.ts

@@ -5,6 +5,7 @@ export enum InsertionType {
   After = 'after',
   Begin = 'begin',
   End = 'end',
+  Replace = 'replace',
 }
 
 export interface IAdapter {

libs/core/src/core.ts

@@ -4,6 +4,7 @@ import { DynamicHtmlAdapter } from './adapters/dynamic-html-adapter'
 import { JsonParser } from './parsers/json-parser'
 import { BosParser } from './parsers/bos-parser'
 import { MutableWebParser } from './parsers/mweb-parser'
+import { LinkParser } from './parsers/link-parser'
 import { AdapterType, ParserConfig } from './types'
 
 export class Core {
@@ -93,6 +94,9 @@ export class Core {
           new MutableWebParser()
         )
 
+      case AdapterType.Link:
+        return new DynamicHtmlAdapter(document.body, this._treeBuilder, config.id, new LinkParser())
+
       default:
         throw new Error('Incompatible adapter type')
     }

libs/core/src/parsers/bos-parser.ts

@@ -61,6 +61,7 @@ export class BosParser implements IParser {
 
     const result: { element: HTMLElement; contextName: string }[] = []
 
+    // ToDo: maybe querySelectorAll('.foo:not(.foo .foo)') is faster?
     for (const childContextName of contextConfig.children ?? []) {
       const childConfig = this.config.contexts[childContextName]
       if (!childConfig.component) continue

libs/core/src/parsers/link-parser.ts

@@ -0,0 +1,43 @@
+import { IParser, InsertionPoint } from './interface'
+
+function tryParseUrl(text: string): URL | null {
+  try {
+    return new URL(text)
+  } catch (_) {
+    return null
+  }
+}
+
+export class LinkParser implements IParser {
+  parseContext({ href, innerText }: HTMLAnchorElement) {
+    // ToDo: twitter-specific logic. Twitter adds '…' to the end of the url
+    const cleanUrl = innerText.replace(/…$/g, '')
+
+    return {
+      id: href,
+      href: href,
+      innerHref: tryParseUrl(cleanUrl)?.href,
+      innerText: innerText,
+    }
+  }
+
+  findChildElements(element: HTMLElement) {
+    // Using <a> inside of <a> is not valid, so only one level of nesting is possible
+    if (element.tagName === 'A') return []
+
+    return Array.from(element.querySelectorAll('a')).map((element) => ({
+      element,
+      contextName: 'link',
+    }))
+  }
+
+  findInsertionPoint(): HTMLElement | null {
+    // No insertions points in blinks
+    return null
+  }
+
+  getInsertionPoints(): InsertionPoint[] {
+    // No insertions points in blinks
+    return []
+  }
+}

libs/core/src/types.ts

@@ -6,9 +6,11 @@ export enum AdapterType {
   Microdata = 'microdata',
   Json = 'json',
   MWeb = 'mweb',
+  Link = 'link',
 }
 
 export type ParserConfig =
   | ({ parserType: AdapterType.Json; id: string } & JsonParserConfig)
   | ({ parserType: AdapterType.Bos; id: string } & BosParserConfig)
   | { parserType: AdapterType.MWeb; id: string }
+  | { parserType: AdapterType.Link; id: string }

libs/engine/src/app/contexts/mutable-web-context/mutable-web-provider.tsx

@@ -40,13 +40,26 @@ const MWebParserConfig: ParserConfig = {
   ],
 }
 
+const LinkParserConfig: ParserConfig = {
+  parserType: AdapterType.Link,
+  id: 'engine', // ToDo: id used as namespace
+  targets: [
+    {
+      namespace: 'engine',
+      contextType: 'website',
+      if: { id: { not: null } },
+    },
+  ],
+}
+
 const MutableWebProvider: FC<Props> = ({ config, defaultMutationId, modalApi, children }) => {
   const { tree, attachParserConfig, detachParserConfig, updateRootContext } = useCore()
   const engineRef = useRef<Engine | null>(null)
 
   if (!engineRef.current) {
     engineRef.current = new Engine(config)
     attachParserConfig(MWebParserConfig) // ToDo: move
+    attachParserConfig(LinkParserConfig)
 
     console.log('[MutableWeb] Engine initialized', engineRef.current)
   }

libs/engine/src/app/services/parser-config/parser-config.entity.ts

@@ -8,9 +8,11 @@ export enum AdapterType {
   Microdata = 'microdata',
   Json = 'json',
   MWeb = 'mweb',
+  Link = 'link',
 }
 
 export type ParserConfig =
   | ({ parserType: AdapterType.Json; id: ParserConfigId; targets: Target[] } & JsonParserConfig)
   | ({ parserType: AdapterType.Bos; id: ParserConfigId; targets: Target[] } & BosParserConfig)
   | { parserType: AdapterType.MWeb; id: ParserConfigId; targets: Target[] }
+  | { parserType: AdapterType.Link; id: ParserConfigId; targets: Target[] }

libs/react/src/components/context-portal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, useEffect, useRef, useState } from 'react'
+import React, { FC, ReactElement, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { IContextNode } from '@mweb/core'
 import { InsertionType } from '@mweb/core'
@@ -13,7 +13,14 @@ export const ContextPortal: FC<{
   // ToDo: replace insPoints.find with Map
   const target = injectTo
     ? context.insPoints.find((ip) => ip.name === injectTo)
-    : { element: context.element, insertionType: DefaultInsertionType }
+    : {
+        element: context.element,
+        insertionType:
+          // ToDo: de-hardcode when context modificators will be implemented (using contexts instead of insertion points)
+          context.namespace === 'engine' && context.contextType === 'link'
+            ? InsertionType.Replace
+            : DefaultInsertionType,
+      }
 
   if (!target?.element) return null
   if (!target?.insertionType) return null
@@ -49,13 +56,29 @@ const InsPointPortal: FC<{
       case InsertionType.End:
         element.appendChild(_container)
         break
+      case InsertionType.Replace:
+        // Only one layout manager will be injected
+        // so this code will be executed only once for multiple widgets
+
+        // We hide the element instead of removing it
+        // because it must be shown again when the layout manager is unmounted.
+        // Also it prevents unexpected behaviour of an original website.
+        element.style.display = 'none'
+
+        element.after(_container)
+        break
       default:
         break
     }
 
     setContainer(_container)
 
     return () => {
+      if (insertionType === InsertionType.Replace) {
+        // ToDo: hidden contexts will be shown
+        element.style.display = ''
+      }
+
       _container.remove()
       setContainer(null)
     }

libs/react/src/contexts/core-context/core-provider.tsx

@@ -11,6 +11,8 @@ const CoreProvider: FC<Props> = ({ children }) => {
 
   if (!coreRef.current) {
     coreRef.current = new Core()
+
+    console.log('[@mweb/react] Initialized core', coreRef.current)
   }
 
   const core = coreRef.current