feat: extraAttr

.gitignore

@@ -102,5 +102,4 @@ typings/
 # TernJS port file
 .tern-port
 
-
 dist

dist/packages/player/src/container.d.ts

@@ -14,5 +14,5 @@ export declare class Container {
     initSandbox(): void;
     initTemplate(): void;
     createContainer(): HTMLElement;
-    createStyle(): HTMLElement;
+    createStyle(s: string): HTMLElement;
 }

packages/player/src/container.ts

@@ -1,6 +1,7 @@
 import { VNode, convertVNode } from '@WebReplay/virtual-dom'
 import HTML from './ui.html'
 import STYLE from './ui.css'
+import FIXED from './fixed.css'
 
 export class Container {
     container: HTMLElement
@@ -27,11 +28,19 @@ export class Container {
         this.sandBox.style.width = this.width + 'px'
         this.sandBox.style.height = this.height + 'px'
         const sandBoxDoc = (this.sandBox.contentWindow as Window).document
-        sandBoxDoc.replaceChild(convertVNode(this.vNode, null)!, sandBoxDoc.documentElement)
+
+        const child = convertVNode(this.vNode, null)
+        if (child) {
+            const head = child.firstChild
+            if (head) {
+                head.appendChild(this.createStyle(FIXED))
+            }
+            sandBoxDoc.replaceChild(child, sandBoxDoc.documentElement)
+        }
     }
 
     initTemplate() {
-        document.head.appendChild(this.createStyle())
+        document.head.appendChild(this.createStyle(STYLE))
         document.body.appendChild(this.createContainer())
     }
 
@@ -45,9 +54,9 @@ export class Container {
         return (this.container = element)
     }
 
-    createStyle() {
+    createStyle(s: string) {
         const parser = new DOMParser()
-        const style = parser.parseFromString(`<style>${STYLE}</style>`, 'text/html').head.firstChild as HTMLElement
+        const style = parser.parseFromString(`<style>${s}</style>`, 'text/html').head.firstChild as HTMLElement
         return style
     }
 }

packages/player/src/fixed.css

@@ -0,0 +1,3 @@
+input[type="checkbox"] {
+    pointer-events: none;
+}

packages/player/src/ui.css

@@ -10,7 +10,6 @@ body {
 
 #wr-player {
     position: relative;
-    pointer-events: none;
 }
 
 #wr-pointer {

packages/virtual-dom/src/serialize.ts

@@ -15,32 +15,34 @@ const getVNodeByEl = (el: Element, isSVG?: boolean): VNode => {
 const getAttr = (el: HTMLElement & { checked: boolean }) => {
     const resAttr: { [key: string]: string } = {}
     const attrs = el.attributes
-
     if (el.checked) {
         resAttr.checked = 'true'
     }
 
     if (attrs && attrs.length) {
         return Object.values(attrs).reduce((ret: any, attr) => {
-            // const [name, value] = extraAttr(attr)
-            const { name, value } = attr
-            ret[name] = value
+            const [name, value] = extraAttr(attr)
+            if (name) {
+                ret[name] = value
+            }
             return ret
         }, resAttr)
     }
     return resAttr
 }
 
-// const extraAttr = (attr: Attr) => {
-//     let { name, value } = attr
-//     if (name === 'href' || name === 'src') {
-//         if (/^\/(?!\/)/.test(value)) {
-//             const host = `https://github.com`
-//             value = host + value
-//         }
-//     }
-//     return [name, value]
-// }
+const extraAttr = (attr: Attr) => {
+    let { name, value } = attr
+    if (name === 'href' || name === 'src') {
+        if (/^\/(?!\/)/.test(value)) {
+            const origin = location.origin
+            value = origin + value
+        } else if (value.startsWith('#/')) {
+            return []
+        }
+    }
+    return [name, value]
+}
 
 export const createElement = (el: Element, inheritSVG?: boolean): VNode | null => {
     if (el.nodeType === Node.TEXT_NODE) {