bobe-dom 0.0.67 → 0.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bobe-dom.cjs +281 -0
- package/dist/bobe-dom.cjs.map +1 -0
- package/dist/bobe-dom.esm.js +28 -319
- package/dist/bobe-dom.esm.js.map +1 -1
- package/dist/{code.cjs.js → code.cjs} +3 -3
- package/dist/code.cjs.map +1 -0
- package/dist/code.esm.js +2 -2
- package/dist/code.esm.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -18
- package/dist/index.umd.js +40 -332
- package/dist/index.umd.js.map +1 -1
- package/dist/{markdown.cjs.js → markdown.cjs} +81 -15
- package/dist/markdown.cjs.map +1 -0
- package/dist/markdown.esm.js +80 -14
- package/dist/markdown.esm.js.map +1 -1
- package/dist/ssr-index.cjs +298 -0
- package/dist/ssr-index.cjs.map +1 -0
- package/dist/ssr-index.esm.js +295 -0
- package/dist/ssr-index.esm.js.map +1 -0
- package/package.json +11 -7
- package/dist/bobe-dom.cjs.js +0 -574
- package/dist/bobe-dom.cjs.js.map +0 -1
- package/dist/code.cjs.js.map +0 -1
- package/dist/markdown.cjs.js.map +0 -1
package/dist/code.esm.js
CHANGED
|
@@ -25,9 +25,9 @@ class Code extends Store {
|
|
|
25
25
|
div ref={fullBlock} class={isFull ? "code-block-full code-block-full-active" : "code-block-full"}
|
|
26
26
|
tp node={blockTarget}
|
|
27
27
|
div class="code-tabs"
|
|
28
|
-
button class="full-button" onclick={toggleFull}
|
|
28
|
+
button class="full-button" onclick={toggleFull} children={isFull ? '收起' : '全屏'}
|
|
29
29
|
for files; file i; file.path
|
|
30
|
-
button class={activeIndex === i ? 'code-tab code-tab-active' : 'code-tab'} onclick={() => switchTab(i)}
|
|
30
|
+
button class={activeIndex === i ? 'code-tab code-tab-active' : 'code-tab'} onclick={() => switchTab(i)} children={file.name}
|
|
31
31
|
div ref={normalPreview} class="code-panel-preview"
|
|
32
32
|
pre class="code-panel"
|
|
33
33
|
code class="hljs" html={activeFile.html}
|
package/dist/code.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.esm.js","sources":["../src/plugins/markdown/components/code.ts"],"sourcesContent":["import { bobe, Store } from 'bobe';\nimport './code.css';\nimport './markdown.css';\nimport './tokyo-night-dark.css';\n\n\nclass Code extends Store {\n activeIndex = 0;\n files: Array<{ name: string; html: string }> = [];\n\n switchTab(i: number) { this.activeIndex = i }\n\n get activeFile() { return this.files[this.activeIndex]; }\n preview = null;\n\n normalBlock = null;\n fullBlock = null;\n\n isFull = false;\n\n toggleFull = () => {\n this.isFull = !this.isFull;\n console.log('isFull', this.isFull);\n \n }\n\n get blockTarget() {\n return this.isFull ? this.fullBlock : this.normalBlock;\n }\n\n ui = bobe`\n div ref={normalBlock} class=\"code-block\"\n div ref={fullBlock} class={isFull ? \"code-block-full code-block-full-active\" : \"code-block-full\"} \n tp node={blockTarget} \n div class=\"code-tabs\"\n button class=\"full-button\" onclick={toggleFull}
|
|
1
|
+
{"version":3,"file":"code.esm.js","sources":["../src/plugins/markdown/components/code.ts"],"sourcesContent":["import { bobe, Store } from 'bobe';\nimport './code.css';\nimport './markdown.css';\nimport './tokyo-night-dark.css';\n\n\nclass Code extends Store {\n activeIndex = 0;\n files: Array<{ name: string; html: string }> = [];\n\n switchTab(i: number) { this.activeIndex = i }\n\n get activeFile() { return this.files[this.activeIndex]; }\n preview = null;\n\n normalBlock = null;\n fullBlock = null;\n\n isFull = false;\n\n toggleFull = () => {\n this.isFull = !this.isFull;\n console.log('isFull', this.isFull);\n \n }\n\n get blockTarget() {\n return this.isFull ? this.fullBlock : this.normalBlock;\n }\n\n ui = bobe`\n div ref={normalBlock} class=\"code-block\"\n div ref={fullBlock} class={isFull ? \"code-block-full code-block-full-active\" : \"code-block-full\"} \n tp node={blockTarget} \n div class=\"code-tabs\"\n button class=\"full-button\" onclick={toggleFull} children={isFull ? '收起' : '全屏'}\n for files; file i; file.path\n button class={activeIndex === i ? 'code-tab code-tab-active' : 'code-tab'} onclick={() => switchTab(i)} children={file.name}\n div ref={normalPreview} class=\"code-panel-preview\"\n pre class=\"code-panel\" \n code class=\"hljs\" html={activeFile.html}\n if preview \n div class=\"code-preview\"\n {preview} \n `;\n}\n\nexport default Code;\n"],"names":["Code","Store","activeIndex","files","switchTab","i","activeFile","preview","normalBlock","fullBlock","isFull","toggleFull","console","log","blockTarget","ui","bobe"],"mappings":";;AAMA,MAAMA,IAAI,SAASC,KAAK,CAAC;AACvBC,EAAAA,WAAW,GAAG,CAAC;AACfC,EAAAA,KAAK,GAA0C,EAAE;EAEjDC,SAASA,CAACC,CAAS,EAAE;IAAE,IAAI,CAACH,WAAW,GAAGG,CAAC;AAAC,EAAA;EAE5C,IAAIC,UAAUA,GAAG;AAAE,IAAA,OAAO,IAAI,CAACH,KAAK,CAAC,IAAI,CAACD,WAAW,CAAC;AAAE,EAAA;AACxDK,EAAAA,OAAO,GAAG,IAAI;AAEdC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,SAAS,GAAG,IAAI;AAEhBC,EAAAA,MAAM,GAAG,KAAK;EAEdC,UAAU,GAAGA,MAAM;AACjB,IAAA,IAAI,CAACD,MAAM,GAAG,CAAC,IAAI,CAACA,MAAM;IAC1BE,OAAO,CAACC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAACH,MAAM,CAAC;EAEpC,CAAC;EAED,IAAII,WAAWA,GAAG;IAChB,OAAO,IAAI,CAACJ,MAAM,GAAG,IAAI,CAACD,SAAS,GAAG,IAAI,CAACD,WAAW;AACxD,EAAA;AAEAO,EAAAA,EAAE,GAAGC,IAAI;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,CAAG;AACH;;;;"}
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.code-block{border:1px solid var(--md-border,#3c3f47);border-radius:6px;height:700px;margin:16px 0;overflow:hidden}.code-block,.code-block-full{background:var(--md-bg,#1b1b1f);display:flex;flex-direction:column}.code-block-full{height:100vh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;width:100vw;z-index:9999}.code-block-full-active{opacity:1;pointer-events:auto}.code-tabs{background:var(--md-bg-secondary,#22222a);border-bottom:1px solid var(--md-border,#3c3f47);display:flex;flex:0 0 auto;overflow-x:auto}.code-panel-preview{display:flex;flex:1 1 auto;height:1px}.full-button{background:none;border-right:0 solid var(--md-border,#3c3f47);border:solid var(--md-border,#3c3f47);border-radius:4px 0 0 0;border-width:0 1px 0 0;color:var(--md-text-muted,#9898a5);cursor:pointer;flex-shrink:0;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:12px;padding:6px 14px;transition:color .15s,border-color .15s;white-space:nowrap}.full-button:hover{color:var(--md-accent-focus,#539bf5)}.code-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--md-text-muted,#9898a5);cursor:pointer;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:13px;padding:8px 16px;white-space:nowrap}.code-tab:hover{background:var(--md-bg-code,#282c38);color:var(--md-text,#e1e1e5)}.code-tab-active{background:var(--md-bg,#1b1b1f);border-bottom-color:var(--md-accent-focus,#539bf5);color:var(--md-text,#e1e1e5);font-weight:500}.code-panel-preview .code-panel{flex:1 1 1px;margin-bottom:0;overflow:auto}.code-panel code.hljs{overflow-x:visible}.code-panel pre{font-size:13px;line-height:1.5;margin:0;padding:16px}.code-preview{flex:1 1 1px}:root{--md-text:#e1e1e5;--md-text-muted:#9898a5;--md-text-link:#6cb2ff;--md-bg:#1b1b1f;--md-bg-secondary:#22222a;--md-bg-code:#282c38;--md-bg-inline-code:#282c38;--md-bg-mark:#f2c94e26;--md-bg-transparent:transparent;--md-border:#3c3f47;--md-border-muted:#3c3f47b3;--md-accent-focus:#539bf5;--md-syntax-keyword:#ff7b72;--md-syntax-string:#9ecbff;--md-syntax-number:#7ac0ff;--md-syntax-function:#d2a8ff;--md-syntax-builtin:#7ee787;--md-syntax-variable:#ffa860;--md-syntax-meta:#f2cc60;--md-diff-del-text:#ffdcd7;--md-diff-del-bg:#5c1a1e;--md-diff-add-text:#aff5b4;--md-diff-add-bg:#0d3b20;--md-diff-changed-text:#ffdfb6;--md-diff-changed-bg:#5c2d0e;--md-diff-meta-bg:#1a5fb4;--md-danger-fg:#f85149;--md-danger-bg:#a12525;--md-alert-note-border:#539bf5;--md-alert-note-title:#6cb2ff;--md-alert-important-border:#986ee2;--md-alert-important-title:#b992f8;--md-alert-warning-border:#b0881a;--md-alert-warning-title:#e0b044;--md-alert-tip-border:#2ea855;--md-alert-tip-title:#4ec96a;--md-alert-caution-border:#e04a45;--md-alert-caution-title:#f85149;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;background-color:var(--md-bg);color:var(--md-text);color-scheme:dark;flex:1 1 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;font-weight:400;line-height:1.5;margin:0}.markdown-body a{text-decoration:underline;text-underline-offset:.2rem}.markdown-body h1:hover .anchor .octicon-link:before,.markdown-body h2:hover .anchor .octicon-link:before,.markdown-body h3:hover .anchor .octicon-link:before,.markdown-body h4:hover .anchor .octicon-link:before,.markdown-body h5:hover .anchor .octicon-link:before,.markdown-body h6:hover .anchor .octicon-link:before{background-color:currentColor;content:" ";display:inline-block;height:16px;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');width:16px}.markdown-body details,.markdown-body figcaption,.markdown-body figure{display:block}.markdown-body summary{display:list-item}.markdown-body [hidden]{display:none!important}.markdown-body a{background-color:var(--md-bg-transparent);color:var(--md-text-link);text-decoration:none}.markdown-body abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.markdown-body b,.markdown-body strong{font-weight:600}.markdown-body dfn{font-style:italic}.markdown-body h1{font-size:2em;margin:.67em 0;padding-bottom:.3em}.markdown-body mark{background-color:var(--md-bg-mark);color:var(--md-text)}.markdown-body small{font-size:90%}.markdown-body sub,.markdown-body sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.markdown-body sub{bottom:-.25em}.markdown-body sup{top:-.5em}.markdown-body img{border-style:none;box-sizing:content-box;max-width:100%}.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp{font-family:monospace;font-size:1em}.markdown-body figure{margin:1em 2.5rem}.markdown-body hr{background:var(--md-bg-transparent);background-color:var(--md-border);border:0;box-sizing:content-box;height:.25em;margin:1.5rem 0;overflow:hidden;padding:0}.markdown-body input{font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible}.markdown-body [type=button],.markdown-body [type=reset],.markdown-body [type=submit]{-webkit-appearance:button;appearance:button}.markdown-body [type=checkbox],.markdown-body [type=radio]{box-sizing:border-box;padding:0}.markdown-body [type=number]::-webkit-inner-spin-button,.markdown-body [type=number]::-webkit-outer-spin-button{height:auto}.markdown-body [type=search]::-webkit-search-cancel-button,.markdown-body [type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.markdown-body ::-webkit-input-placeholder{color:inherit;opacity:.54}.markdown-body ::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}.markdown-body a:hover{text-decoration:underline}.markdown-body ::placeholder{color:var(--md-text-muted);opacity:1}.markdown-body hr:after,.markdown-body hr:before{content:"";display:table}.markdown-body hr:after{clear:both}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;font-variant:tabular-nums;max-width:100%;overflow:auto;width:max-content}.markdown-body td,.markdown-body th{padding:0}.markdown-body details summary{cursor:pointer}.markdown-body [role=button]:focus,.markdown-body a:focus,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=radio]:focus{box-shadow:none;outline:2px solid var(--borderColor-accent-emphasis);outline-offset:-2px}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible),.markdown-body input[type=checkbox]:focus:not(:focus-visible),.markdown-body input[type=radio]:focus:not(:focus-visible){outline:1px solid transparent}.markdown-body [role=button]:focus-visible,.markdown-body a:focus-visible,.markdown-body input[type=checkbox]:focus-visible,.markdown-body input[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--borderColor-accent-emphasis);outline-offset:-2px}.markdown-body a:not([class]):focus,.markdown-body a:not([class]):focus-visible,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=checkbox]:focus-visible,.markdown-body input[type=radio]:focus,.markdown-body input[type=radio]:focus-visible{outline-offset:0}.markdown-body kbd{background-color:var(--md-bg-secondary);border-bottom-color:var(--borderColor-muted);border:1px solid var(--borderColor-muted);border-radius:6px;box-shadow:inset 0 -1px 0 var(--borderColor-muted);color:var(--md-text);display:inline-block;font:11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;line-height:10px;padding:.25rem;vertical-align:middle}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-weight:500;letter-spacing:.05em;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.markdown-body h2{font-size:1.5em;padding-bottom:.3em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{color:var(--md-text-muted);font-size:.85em}.markdown-body p{margin-bottom:10px;margin-top:0}.markdown-body blockquote{border-left:.25em solid var(--md-border);color:var(--md-text-muted);margin:0;padding:0 1em}.markdown-body ol,.markdown-body ul{margin-bottom:0;margin-top:0;padding-left:2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body code,.markdown-body pre,.markdown-body samp,.markdown-body tt{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:12px}.markdown-body pre{word-wrap:normal;margin-bottom:0;margin-top:0}.markdown-body .octicon{fill:currentColor;display:inline-block;overflow:visible!important;vertical-align:text-bottom}.markdown-body input::-webkit-inner-spin-button,.markdown-body input::-webkit-outer-spin-button{appearance:none;margin:0}.markdown-body .mr-2{margin-right:.5rem!important}.markdown-body:after,.markdown-body:before{content:"";display:table}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:var(--md-danger-fg)}.markdown-body .anchor{float:left;line-height:1;margin-left:-20px;padding-right:.25rem}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-bottom:1rem;margin-top:0}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:var(--md-text);vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit;padding:0 .2em}.markdown-body summary h1,.markdown-body summary h2,.markdown-body summary h3,.markdown-body summary h4,.markdown-body summary h5,.markdown-body summary h6{display:inline-block}.markdown-body summary h1 .anchor,.markdown-body summary h2 .anchor,.markdown-body summary h3 .anchor,.markdown-body summary h4 .anchor,.markdown-body summary h5 .anchor,.markdown-body summary h6 .anchor{margin-left:-40px}.markdown-body summary h1,.markdown-body summary h2{border-bottom:0;padding-bottom:0}.markdown-body ol.no-list,.markdown-body ul.no-list{list-style-type:none;padding:0}.markdown-body ol[type="a s"]{list-style-type:lower-alpha}.markdown-body ol[type="A s"]{list-style-type:upper-alpha}.markdown-body ol[type="i s"]{list-style-type:lower-roman}.markdown-body ol[type="I s"]{list-style-type:upper-roman}.markdown-body div>ol:not([type]),.markdown-body ol[type="1"]{list-style-type:decimal}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-bottom:0;margin-top:0}.markdown-body li>p{margin-top:1rem}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:1rem;padding:0}.markdown-body dl dd{margin-bottom:1rem;padding:0 1rem}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{border:1px solid var(--md-border);padding:6px 13px}.markdown-body table td>:last-child{margin-bottom:0}.markdown-body table tr{background-color:var(--md-bg);border-top:1px solid var(--md-border-muted)}.markdown-body table tr:nth-child(2n){background-color:var(--md-bg-secondary)}.markdown-body table img{background-color:var(--md-bg-transparent)}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{background-color:var(--md-bg-transparent);max-width:none;vertical-align:text-top}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{border:1px solid var(--md-border);display:block;float:left;margin:13px 0 0;overflow:hidden;padding:7px;width:auto}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{clear:both;color:var(--md-text);display:block;padding:5px 0 0}.markdown-body span.align-center{clear:both;display:block;overflow:hidden}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{clear:both;display:block;overflow:hidden}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body p>code{background-color:var(--md-bg-inline-code)}.markdown-body code,.markdown-body tt{background-color:var(--md-bg-code);border-radius:6px;font-size:85%;margin:0;padding:.2em .4em;white-space:break-spaces}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body samp{font-size:85%}.markdown-body pre code{font-size:100%}.markdown-body pre>code{background:var(--md-bg-transparent);border:0;margin:0;padding:0;white-space:pre;word-break:normal}.markdown-body .highlight{margin-bottom:1rem}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{background-color:var(--md-bg-secondary);border-radius:6px;color:var(--md-text);font-size:85%;line-height:1.45;overflow:auto;padding:1rem}.markdown-body pre code,.markdown-body pre tt{word-wrap:normal;background-color:var(--md-bg-transparent);border:0;display:inline;line-height:inherit;margin:0;overflow:visible;padding:0}.markdown-body .csv-data td,.markdown-body .csv-data th{font-size:12px;line-height:1;overflow:hidden;padding:5px;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{background:var(--md-bg);border:0;padding:10px .5rem 9px;text-align:right}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{background:var(--md-bg-secondary);border-top:0;font-weight:600}.markdown-body [data-footnote-ref]:before{content:"["}.markdown-body [data-footnote-ref]:after{content:"]"}.markdown-body .footnotes{border-top:1px solid var(--md-border);color:var(--md-text-muted);font-size:12px}.markdown-body .footnotes ol{padding-left:1rem}.markdown-body .footnotes ol ul{display:inline-block;margin-top:1rem;padding-left:1rem}.markdown-body .footnotes li{position:relative}.markdown-body .footnotes li:target:before{border:2px solid var(--md-accent-focus);border-radius:6px;bottom:-.5rem;content:"";left:-1.5rem;pointer-events:none;position:absolute;right:-.5rem;top:-.5rem}.markdown-body .footnotes li:target{color:var(--md-text)}.markdown-body .footnotes .data-footnote-backref g-emoji{font-family:monospace}.markdown-body .pl-c{color:var(--md-text-muted)}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:var(--md-syntax-number)}.markdown-body .pl-e,.markdown-body .pl-en{color:var(--md-syntax-function)}.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:var(--md-text)}.markdown-body .pl-ent{color:var(--md-syntax-builtin)}.markdown-body .pl-k{color:var(--md-syntax-keyword)}.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:var(--md-syntax-string)}.markdown-body .pl-smw,.markdown-body .pl-v{color:var(--md-syntax-variable)}.markdown-body .pl-bu{color:var(--md-danger-fg)}.markdown-body .pl-ii{background-color:var(--bgColor-danger-muted);color:var(--fgColor-danger)}.markdown-body .pl-c2{background-color:var(--md-danger-bg);color:var(--md-text)}.markdown-body .pl-sr .pl-cce{color:var(--md-syntax-builtin);font-weight:700}.markdown-body .pl-ml{color:var(--md-syntax-meta)}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{color:var(--md-accent-focus);font-weight:700}.markdown-body .pl-mi{color:var(--md-text);font-style:italic}.markdown-body .pl-mb{color:var(--md-text);font-weight:700}.markdown-body .pl-md{background-color:var(--md-diff-del-bg);color:var(--md-diff-del-text)}.markdown-body .pl-mi1{background-color:var(--md-diff-add-bg);color:var(--md-diff-add-text)}.markdown-body .pl-mc{background-color:var(--md-diff-changed-bg);color:var(--md-diff-changed-text)}.markdown-body .pl-mi2{background-color:var(--md-diff-meta-bg);color:var(--md-text)}.markdown-body .pl-mdr{color:var(--md-syntax-function);font-weight:700}.markdown-body .pl-ba{color:var(--md-text-muted)}.markdown-body .pl-sg{color:var(--md-border)}.markdown-body .pl-corl{color:var(--md-syntax-string);text-decoration:underline}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible),.markdown-body button:focus:not(:focus-visible),.markdown-body summary:focus:not(:focus-visible){box-shadow:none;outline:none}.markdown-body [tabindex="0"]:focus:not(:focus-visible),.markdown-body details-dialog:focus:not(:focus-visible){outline:none}.markdown-body g-emoji{display:inline-block;font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:400;line-height:1;min-width:1ch;vertical-align:-.075em}.markdown-body g-emoji img{height:1em;width:1em}.markdown-body a:has(>p,>div,>pre,>blockquote){display:block}.markdown-body a:has(>p,>div,>pre,>blockquote):not(:has(.snippet-clipboard-content,>pre)){width:fit-content}.markdown-body a:has(>p,>div,>pre,>blockquote):has(.snippet-clipboard-content,>pre):focus-visible{outline:2px solid var(--borderColor-accent-emphasis);outline-offset:2px}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item label{font-weight:400}.markdown-body .task-list-item.enabled label{cursor:pointer}.markdown-body .task-list-item+.task-list-item{margin-top:.25rem}.markdown-body .task-list-item .handle{display:none}.markdown-body .task-list-item-checkbox{margin:0 .2em .25em -1.4em;vertical-align:middle}.markdown-body ul:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body ol:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body .contains-task-list:focus-within .task-list-item-convert-container,.markdown-body .contains-task-list:hover .task-list-item-convert-container{clip-path:none;display:block;height:24px;overflow:visible;width:auto}.markdown-body ::-webkit-calendar-picker-indicator{filter:invert(50%)}.markdown-body .markdown-alert{border-left:.25em solid var(--md-border);color:inherit;margin-bottom:1rem;padding:.5rem 1rem}.markdown-body .markdown-alert>:first-child{margin-top:0}.markdown-body .markdown-alert>:last-child{margin-bottom:0}.markdown-body .markdown-alert .markdown-alert-title{align-items:center;display:flex;font-weight:500;line-height:1}.markdown-body .markdown-alert.markdown-alert-note{border-left-color:var(--md-alert-note-border)}.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title{color:var(--md-text-link)}.markdown-body .markdown-alert.markdown-alert-important{border-left-color:var(--md-alert-important-border)}.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title{color:var(--md-alert-important-title)}.markdown-body .markdown-alert.markdown-alert-warning{border-left-color:var(--md-alert-warning-border)}.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title{color:var(--md-alert-warning-title)}.markdown-body .markdown-alert.markdown-alert-tip{border-left-color:var(--md-alert-tip-border)}.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title{color:var(--md-alert-tip-title)}.markdown-body .markdown-alert.markdown-alert-caution{border-left-color:var(--md-alert-caution-border)}.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title{color:var(--md-danger-fg)}.markdown-body>:first-child>.heading-element:first-child{margin-top:0!important}.markdown-body .highlight pre:has(+.zeroclipboard-container){min-height:52px}@font-face{font-family:Twilio;font-style:normal;font-weight:400;src:url(fonts/twilio.woff2) format("woff2")}pre code.hljs{-webkit-font-feature-settings:"calt" 1;font-feature-settings:"calt" 1;display:block;font-family:Twilio,monospace;font-variant-ligatures:common-ligatures contextual;letter-spacing:.1;line-height:2.2;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
|
|
1
|
+
.code-block{border:1px solid var(--md-border,#3c3f47);border-radius:6px;height:700px;margin:16px 0;overflow:hidden}.code-block,.code-block-full{background:var(--md-bg,#1b1b1f);display:flex;flex-direction:column}.code-block-full{height:100vh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;width:100vw;z-index:9999}.code-block-full-active{opacity:1;pointer-events:auto}.code-tabs{background:var(--md-bg-secondary,#22222a);border-bottom:1px solid var(--md-border,#3c3f47);display:flex;flex:0 0 auto;overflow-x:auto}.code-panel-preview{display:flex;flex:1 1 auto;height:1px}.full-button{background:none;border-right:0 solid var(--md-border,#3c3f47);border:solid var(--md-border,#3c3f47);border-radius:4px 0 0 0;border-width:0 1px 0 0;color:var(--md-text-muted,#9898a5);cursor:pointer;flex-shrink:0;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:12px;padding:6px 14px;transition:color .15s,border-color .15s;white-space:nowrap}.full-button:hover{color:var(--md-accent-focus,#539bf5)}.code-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--md-text-muted,#9898a5);cursor:pointer;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:13px;padding:8px 16px;white-space:nowrap}.code-tab:hover{background:var(--md-bg-code,#282c38);color:var(--md-text,#e1e1e5)}.code-tab-active{background:var(--md-bg,#1b1b1f);border-bottom-color:var(--md-accent-focus,#539bf5);color:var(--md-text,#e1e1e5);font-weight:500}.code-panel-preview .code-panel{flex:1 1 1px;margin-bottom:0;overflow:auto}.code-panel code.hljs{overflow-x:visible}.code-panel pre{font-size:13px;line-height:1.5;margin:0;padding:16px}.code-preview{flex:1 1 1px}:root{--md-text:#e1e1e5;--md-text-muted:#9898a5;--md-text-link:#6cb2ff;--md-bg:#1b1b1f;--md-bg-secondary:#22222a;--md-bg-code:#282c38;--md-bg-inline-code:#282c38;--md-bg-mark:#f2c94e26;--md-bg-transparent:transparent;--md-border:#3c3f47;--md-border-muted:#3c3f47b3;--md-accent-focus:#539bf5;--md-syntax-keyword:#ff7b72;--md-syntax-string:#9ecbff;--md-syntax-number:#7ac0ff;--md-syntax-function:#d2a8ff;--md-syntax-builtin:#7ee787;--md-syntax-variable:#ffa860;--md-syntax-meta:#f2cc60;--md-diff-del-text:#ffdcd7;--md-diff-del-bg:#5c1a1e;--md-diff-add-text:#aff5b4;--md-diff-add-bg:#0d3b20;--md-diff-changed-text:#ffdfb6;--md-diff-changed-bg:#5c2d0e;--md-diff-meta-bg:#1a5fb4;--md-danger-fg:#f85149;--md-danger-bg:#a12525;--md-alert-note-border:#539bf5;--md-alert-note-title:#6cb2ff;--md-alert-important-border:#986ee2;--md-alert-important-title:#b992f8;--md-alert-warning-border:#b0881a;--md-alert-warning-title:#e0b044;--md-alert-tip-border:#2ea855;--md-alert-tip-title:#4ec96a;--md-alert-caution-border:#e04a45;--md-alert-caution-title:#f85149;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;background-color:var(--md-bg);color:var(--md-text);color-scheme:dark;flex:1 1 auto;font-family:Yu Mincho,STSong,华文宋体,serif,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;font-weight:400;line-height:1.5;margin:0}.markdown-body a{text-decoration:underline;text-underline-offset:.2rem}.markdown{align-items:flex-start;display:flex;gap:24px;justify-content:space-between}.markdown-body{flex:1 1 auto;min-width:0}.markdown-aside{flex:0 0 220px;max-height:calc(100vh - 32px);overflow-y:auto;position:sticky;scrollbar-color:var(--md-border) transparent;scrollbar-width:thin;top:0;width:220px}.markdown-aside-content{position:relative}.markdown-aside-border{background:var(--md-border);bottom:0;left:2.5px;pointer-events:none;position:absolute;top:0;width:1px;z-index:0}.markdown-aside-indicator{background:var(--md-accent-focus);border-radius:999px;height:25px;left:1px;margin-bottom:-25px;opacity:0;pointer-events:none;position:relative;top:0;transition:transform .2s ease,height .2s ease,opacity .15s ease;width:4px;z-index:1}.markdown-aside-indicator-active{opacity:1}.markdown-aside-item{border-radius:4px;color:var(--md-text-muted);display:block;line-height:1.35;margin:1px 0 1px 12px;overflow-wrap:anywhere;padding:4px 8px 4px 12px;position:relative;text-decoration:none;transition:color .15s,background-color .15s;z-index:2}.markdown-aside-item:hover{text-decoration:none}.markdown-aside-item-active,.markdown-aside-item:hover{background-color:var(--md-bg-secondary);color:var(--md-text)}.markdown-aside-item-active{font-weight:600}.markdown-aside-depth-1{font-size:14px;font-weight:600}.markdown-aside-depth-2{font-size:13px;font-weight:500;padding-left:20px}.markdown-aside-depth-3{font-size:12px;opacity:.9;padding-left:32px}.markdown-aside-depth-4,.markdown-aside-depth-5,.markdown-aside-depth-6{font-size:12px;opacity:.75;padding-left:44px}@media (max-width:960px){.markdown{display:block}.markdown-aside{display:none}}.markdown-body h1:hover .anchor .octicon-link:before,.markdown-body h2:hover .anchor .octicon-link:before,.markdown-body h3:hover .anchor .octicon-link:before,.markdown-body h4:hover .anchor .octicon-link:before,.markdown-body h5:hover .anchor .octicon-link:before,.markdown-body h6:hover .anchor .octicon-link:before{background-color:currentColor;content:" ";display:inline-block;height:16px;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');width:16px}.markdown-body details,.markdown-body figcaption,.markdown-body figure{display:block}.markdown-body summary{display:list-item}.markdown-body [hidden]{display:none!important}.markdown-body a{background-color:var(--md-bg-transparent);color:var(--md-text-link);text-decoration:none}.markdown-body abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.markdown-body b,.markdown-body strong{font-weight:600}.markdown-body dfn{font-style:italic}.markdown-body h1{font-size:2em;margin:.67em 0;padding-bottom:.3em}.markdown-body mark{background-color:var(--md-bg-mark);color:var(--md-text)}.markdown-body small{font-size:90%}.markdown-body sub,.markdown-body sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.markdown-body sub{bottom:-.25em}.markdown-body sup{top:-.5em}.markdown-body img{border-style:none;box-sizing:content-box;max-width:100%}.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp{font-family:monospace;font-size:1em}.markdown-body figure{margin:1em 2.5rem}.markdown-body hr{background:var(--md-bg-transparent);background-color:var(--md-border);border:0;box-sizing:content-box;height:.25em;margin:1.5rem 0;overflow:hidden;padding:0}.markdown-body input{font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible}.markdown-body [type=button],.markdown-body [type=reset],.markdown-body [type=submit]{-webkit-appearance:button;appearance:button}.markdown-body [type=checkbox],.markdown-body [type=radio]{box-sizing:border-box;padding:0}.markdown-body [type=number]::-webkit-inner-spin-button,.markdown-body [type=number]::-webkit-outer-spin-button{height:auto}.markdown-body [type=search]::-webkit-search-cancel-button,.markdown-body [type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.markdown-body ::-webkit-input-placeholder{color:inherit;opacity:.54}.markdown-body ::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}.markdown-body a:hover{text-decoration:underline}.markdown-body ::placeholder{color:var(--md-text-muted);opacity:1}.markdown-body hr:after,.markdown-body hr:before{content:"";display:table}.markdown-body hr:after{clear:both}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;font-variant:tabular-nums;max-width:100%;overflow:auto;width:max-content}.markdown-body td,.markdown-body th{padding:0}.markdown-body details summary{cursor:pointer}.markdown-body [role=button]:focus,.markdown-body a:focus,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=radio]:focus{box-shadow:none;outline:2px solid var(--borderColor-accent-emphasis);outline-offset:-2px}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible),.markdown-body input[type=checkbox]:focus:not(:focus-visible),.markdown-body input[type=radio]:focus:not(:focus-visible){outline:1px solid transparent}.markdown-body [role=button]:focus-visible,.markdown-body a:focus-visible,.markdown-body input[type=checkbox]:focus-visible,.markdown-body input[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--borderColor-accent-emphasis);outline-offset:-2px}.markdown-body a:not([class]):focus,.markdown-body a:not([class]):focus-visible,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=checkbox]:focus-visible,.markdown-body input[type=radio]:focus,.markdown-body input[type=radio]:focus-visible{outline-offset:0}.markdown-body kbd{background-color:var(--md-bg-secondary);border-bottom-color:var(--borderColor-muted);border:1px solid var(--borderColor-muted);border-radius:6px;box-shadow:inset 0 -1px 0 var(--borderColor-muted);color:var(--md-text);display:inline-block;font:11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;line-height:10px;padding:.25rem;vertical-align:middle}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-weight:500;letter-spacing:.05em;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.markdown-body h2{font-size:1.5em;padding-bottom:.3em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{color:var(--md-text-muted);font-size:.85em}.markdown-body p{margin-bottom:10px;margin-top:0}.markdown-body blockquote{border-left:.25em solid var(--md-border);color:var(--md-text-muted);margin:0;padding:0 1em}.markdown-body ol,.markdown-body ul{margin-bottom:0;margin-top:0;padding-left:2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body code,.markdown-body pre,.markdown-body samp,.markdown-body tt{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:12px}.markdown-body pre{word-wrap:normal;margin-bottom:0;margin-top:0}.markdown-body .octicon{fill:currentColor;display:inline-block;overflow:visible!important;vertical-align:text-bottom}.markdown-body input::-webkit-inner-spin-button,.markdown-body input::-webkit-outer-spin-button{appearance:none;margin:0}.markdown-body .mr-2{margin-right:.5rem!important}.markdown-body:after,.markdown-body:before{content:"";display:table}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:var(--md-danger-fg)}.markdown-body .anchor{float:left;line-height:1;margin-left:-20px;padding-right:.25rem}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-bottom:1rem;margin-top:0}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:var(--md-text);vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit;padding:0 .2em}.markdown-body summary h1,.markdown-body summary h2,.markdown-body summary h3,.markdown-body summary h4,.markdown-body summary h5,.markdown-body summary h6{display:inline-block}.markdown-body summary h1 .anchor,.markdown-body summary h2 .anchor,.markdown-body summary h3 .anchor,.markdown-body summary h4 .anchor,.markdown-body summary h5 .anchor,.markdown-body summary h6 .anchor{margin-left:-40px}.markdown-body summary h1,.markdown-body summary h2{border-bottom:0;padding-bottom:0}.markdown-body ol.no-list,.markdown-body ul.no-list{list-style-type:none;padding:0}.markdown-body ol[type="a s"]{list-style-type:lower-alpha}.markdown-body ol[type="A s"]{list-style-type:upper-alpha}.markdown-body ol[type="i s"]{list-style-type:lower-roman}.markdown-body ol[type="I s"]{list-style-type:upper-roman}.markdown-body div>ol:not([type]),.markdown-body ol[type="1"]{list-style-type:decimal}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-bottom:0;margin-top:0}.markdown-body li>p{margin-top:1rem}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:1rem;padding:0}.markdown-body dl dd{margin-bottom:1rem;padding:0 1rem}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{border:1px solid var(--md-border);padding:6px 13px}.markdown-body table td>:last-child{margin-bottom:0}.markdown-body table tr{background-color:var(--md-bg);border-top:1px solid var(--md-border-muted)}.markdown-body table tr:nth-child(2n){background-color:var(--md-bg-secondary)}.markdown-body table img{background-color:var(--md-bg-transparent)}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{background-color:var(--md-bg-transparent);max-width:none;vertical-align:text-top}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{border:1px solid var(--md-border);display:block;float:left;margin:13px 0 0;overflow:hidden;padding:7px;width:auto}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{clear:both;color:var(--md-text);display:block;padding:5px 0 0}.markdown-body span.align-center{clear:both;display:block;overflow:hidden}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{clear:both;display:block;overflow:hidden}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body p>code{background-color:var(--md-bg-inline-code)}.markdown-body code,.markdown-body tt{background-color:var(--md-bg-code);border-radius:6px;font-size:85%;margin:0;padding:.2em .4em;white-space:break-spaces}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body samp{font-size:85%}.markdown-body pre code{font-size:100%}.markdown-body pre>code{background:var(--md-bg-transparent);border:0;margin:0;padding:0;white-space:pre;word-break:normal}.markdown-body .highlight{margin-bottom:1rem}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{background-color:var(--md-bg-secondary);border-radius:6px;color:var(--md-text);font-size:85%;line-height:1.45;overflow:auto;padding:1rem}.markdown-body pre code,.markdown-body pre tt{word-wrap:normal;background-color:var(--md-bg-transparent);border:0;display:inline;line-height:inherit;margin:0;overflow:visible;padding:0}.markdown-body .csv-data td,.markdown-body .csv-data th{font-size:12px;line-height:1;overflow:hidden;padding:5px;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{background:var(--md-bg);border:0;padding:10px .5rem 9px;text-align:right}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{background:var(--md-bg-secondary);border-top:0;font-weight:600}.markdown-body [data-footnote-ref]:before{content:"["}.markdown-body [data-footnote-ref]:after{content:"]"}.markdown-body .footnotes{border-top:1px solid var(--md-border);color:var(--md-text-muted);font-size:12px}.markdown-body .footnotes ol{padding-left:1rem}.markdown-body .footnotes ol ul{display:inline-block;margin-top:1rem;padding-left:1rem}.markdown-body .footnotes li{position:relative}.markdown-body .footnotes li:target:before{border:2px solid var(--md-accent-focus);border-radius:6px;bottom:-.5rem;content:"";left:-1.5rem;pointer-events:none;position:absolute;right:-.5rem;top:-.5rem}.markdown-body .footnotes li:target{color:var(--md-text)}.markdown-body .footnotes .data-footnote-backref g-emoji{font-family:monospace}.markdown-body .pl-c{color:var(--md-text-muted)}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:var(--md-syntax-number)}.markdown-body .pl-e,.markdown-body .pl-en{color:var(--md-syntax-function)}.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:var(--md-text)}.markdown-body .pl-ent{color:var(--md-syntax-builtin)}.markdown-body .pl-k{color:var(--md-syntax-keyword)}.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:var(--md-syntax-string)}.markdown-body .pl-smw,.markdown-body .pl-v{color:var(--md-syntax-variable)}.markdown-body .pl-bu{color:var(--md-danger-fg)}.markdown-body .pl-ii{background-color:var(--bgColor-danger-muted);color:var(--fgColor-danger)}.markdown-body .pl-c2{background-color:var(--md-danger-bg);color:var(--md-text)}.markdown-body .pl-sr .pl-cce{color:var(--md-syntax-builtin);font-weight:700}.markdown-body .pl-ml{color:var(--md-syntax-meta)}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{color:var(--md-accent-focus);font-weight:700}.markdown-body .pl-mi{color:var(--md-text);font-style:italic}.markdown-body .pl-mb{color:var(--md-text);font-weight:700}.markdown-body .pl-md{background-color:var(--md-diff-del-bg);color:var(--md-diff-del-text)}.markdown-body .pl-mi1{background-color:var(--md-diff-add-bg);color:var(--md-diff-add-text)}.markdown-body .pl-mc{background-color:var(--md-diff-changed-bg);color:var(--md-diff-changed-text)}.markdown-body .pl-mi2{background-color:var(--md-diff-meta-bg);color:var(--md-text)}.markdown-body .pl-mdr{color:var(--md-syntax-function);font-weight:700}.markdown-body .pl-ba{color:var(--md-text-muted)}.markdown-body .pl-sg{color:var(--md-border)}.markdown-body .pl-corl{color:var(--md-syntax-string);text-decoration:underline}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible),.markdown-body button:focus:not(:focus-visible),.markdown-body summary:focus:not(:focus-visible){box-shadow:none;outline:none}.markdown-body [tabindex="0"]:focus:not(:focus-visible),.markdown-body details-dialog:focus:not(:focus-visible){outline:none}.markdown-body g-emoji{display:inline-block;font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:400;line-height:1;min-width:1ch;vertical-align:-.075em}.markdown-body g-emoji img{height:1em;width:1em}.markdown-body a:has(>p,>div,>pre,>blockquote){display:block}.markdown-body a:has(>p,>div,>pre,>blockquote):not(:has(.snippet-clipboard-content,>pre)){width:fit-content}.markdown-body a:has(>p,>div,>pre,>blockquote):has(.snippet-clipboard-content,>pre):focus-visible{outline:2px solid var(--borderColor-accent-emphasis);outline-offset:2px}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item label{font-weight:400}.markdown-body .task-list-item.enabled label{cursor:pointer}.markdown-body .task-list-item+.task-list-item{margin-top:.25rem}.markdown-body .task-list-item .handle{display:none}.markdown-body .task-list-item-checkbox{margin:0 .2em .25em -1.4em;vertical-align:middle}.markdown-body ul:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body ol:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body .contains-task-list:focus-within .task-list-item-convert-container,.markdown-body .contains-task-list:hover .task-list-item-convert-container{clip-path:none;display:block;height:24px;overflow:visible;width:auto}.markdown-body ::-webkit-calendar-picker-indicator{filter:invert(50%)}.markdown-body .markdown-alert{border-left:.25em solid var(--md-border);color:inherit;margin-bottom:1rem;padding:.5rem 1rem}.markdown-body .markdown-alert>:first-child{margin-top:0}.markdown-body .markdown-alert>:last-child{margin-bottom:0}.markdown-body .markdown-alert .markdown-alert-title{align-items:center;display:flex;font-weight:500;line-height:1}.markdown-body .markdown-alert.markdown-alert-note{border-left-color:var(--md-alert-note-border)}.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title{color:var(--md-text-link)}.markdown-body .markdown-alert.markdown-alert-important{border-left-color:var(--md-alert-important-border)}.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title{color:var(--md-alert-important-title)}.markdown-body .markdown-alert.markdown-alert-warning{border-left-color:var(--md-alert-warning-border)}.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title{color:var(--md-alert-warning-title)}.markdown-body .markdown-alert.markdown-alert-tip{border-left-color:var(--md-alert-tip-border)}.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title{color:var(--md-alert-tip-title)}.markdown-body .markdown-alert.markdown-alert-caution{border-left-color:var(--md-alert-caution-border)}.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title{color:var(--md-danger-fg)}.markdown-body>:first-child>.heading-element:first-child{margin-top:0!important}.markdown-body .highlight pre:has(+.zeroclipboard-container){min-height:52px}@font-face{font-family:Twilio;font-style:normal;font-weight:400;src:url(fonts/twilio.woff2) format("woff2")}pre code.hljs{-webkit-font-feature-settings:"calt" 1;font-feature-settings:"calt" 1;display:block;font-family:Twilio,monospace;font-variant-ligatures:common-ligatures contextual;letter-spacing:.1;line-height:2.2;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
|
|
2
2
|
/*!
|
|
3
3
|
Theme: Tokyo-night-Dark
|
|
4
4
|
origin: https://github.com/enkia/tokyo-night-vscode-theme
|
package/dist/index.d.ts
CHANGED
|
@@ -19,27 +19,10 @@ declare const render: <T extends typeof bobe.Store>(Ctor: T, root: any) => reado
|
|
|
19
19
|
resumeSnapshot?: ReturnType<bobe.Tokenizer["snapshot"]>;
|
|
20
20
|
}, InstanceType<T>];
|
|
21
21
|
|
|
22
|
-
declare class SSRFiber {
|
|
23
|
-
type: any;
|
|
24
|
-
props: Record<any, any>;
|
|
25
|
-
parent?: SSRFiber;
|
|
26
|
-
next?: SSRFiber;
|
|
27
|
-
child?: SSRFiber;
|
|
28
|
-
html?: string;
|
|
29
|
-
/** 开标签 > 在原始 HTML 字符串中的索引位置 */
|
|
30
|
-
openTagEnd?: number;
|
|
31
|
-
constructor(type: any, props?: Record<any, any>);
|
|
32
|
-
querySelector(selector: string): SSRFiber | null;
|
|
33
|
-
getElementById(id: string): SSRFiber | null;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
declare function walkFiber(root: SSRFiber): void;
|
|
37
|
-
declare const renderHtmlStr: (ComponentClass: typeof Store) => string;
|
|
38
|
-
|
|
39
22
|
declare const hydrate: (ComponentClass: typeof Store, rootEl: Element) => readonly [bobe.LogicNode & {
|
|
40
23
|
tokenizer: bobe.Tokenizer;
|
|
41
24
|
fragmentSnapshot?: ReturnType<bobe.Tokenizer["snapshot"]>;
|
|
42
25
|
resumeSnapshot?: ReturnType<bobe.Tokenizer["snapshot"]>;
|
|
43
26
|
}, Store];
|
|
44
27
|
|
|
45
|
-
export { BOOLEAN_ATTRS, CONTENT_FLAG, beforeIndent, createAnchor, createNode, firstChild, hydrate, insertAfter, leaveLogicNode, leaveNode, nextSib, remove, render,
|
|
28
|
+
export { BOOLEAN_ATTRS, CONTENT_FLAG, beforeIndent, createAnchor, createNode, firstChild, hydrate, insertAfter, leaveLogicNode, leaveNode, nextSib, remove, render, setProp };
|
package/dist/index.umd.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bobe')
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'bobe'
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BobeDom = {}, global.Bobe
|
|
5
|
-
})(this, (function (exports, bobe
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bobe')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'bobe'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BobeDom = {}, global.Bobe));
|
|
5
|
+
})(this, (function (exports, bobe) { 'use strict';
|
|
6
6
|
|
|
7
|
-
const BOOLEAN_ATTRS
|
|
7
|
+
const BOOLEAN_ATTRS = new Set(['disabled', 'readonly', 'checked', 'selected', 'hidden', 'multiple', 'required', 'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'defer', 'async', 'reversed', 'open', 'itemscope', 'ismap', 'nohref', 'noshade', 'nowrap', 'compact', 'default']);
|
|
8
8
|
const VALUE_PROP_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
|
|
9
9
|
const SVG_NS = 'http://www.w3.org/2000/svg';
|
|
10
10
|
const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
|
|
11
11
|
const SVG_TAGS = new Set(['svg', 'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'switch', 'symbol', 'textPath', 'tspan', 'use', 'view']);
|
|
12
12
|
const MATH_TAGS = new Set(['math', 'maction', 'maligngroup', 'malignmark', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mlongdiv', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'mspace', 'msqrt', 'msrow', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'semantics', 'annotation', 'annotation-xml']);
|
|
13
13
|
const isNS = el => el.namespaceURI === SVG_NS || el.namespaceURI === MATH_NS;
|
|
14
|
-
const createNode
|
|
14
|
+
const createNode = name => {
|
|
15
15
|
if (name === 'text') return document.createTextNode('');
|
|
16
16
|
if (MATH_TAGS.has(name)) return document.createElementNS(MATH_NS, name);
|
|
17
17
|
if (SVG_TAGS.has(name)) return document.createElementNS(SVG_NS, name);
|
|
18
18
|
return document.createElement(name);
|
|
19
19
|
};
|
|
20
20
|
const CONTENT_FLAG = Symbol('hasContent');
|
|
21
|
-
const setProp
|
|
21
|
+
const setProp = (node, key, value) => {
|
|
22
22
|
const el = node;
|
|
23
|
-
if (key === '
|
|
23
|
+
if (key === 'children') {
|
|
24
24
|
node[CONTENT_FLAG] = value != null;
|
|
25
25
|
if (value == null) return;
|
|
26
26
|
node.textContent = value;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
node.innerHTML = String(value);
|
|
76
76
|
return;
|
|
77
77
|
}
|
|
78
|
-
if (BOOLEAN_ATTRS
|
|
78
|
+
if (BOOLEAN_ATTRS.has(key)) {
|
|
79
79
|
if (value === false || value === null || value === undefined) {
|
|
80
80
|
el.removeAttribute(key);
|
|
81
81
|
} else {
|
|
@@ -111,16 +111,16 @@
|
|
|
111
111
|
el.setAttribute(key, String(value));
|
|
112
112
|
}
|
|
113
113
|
};
|
|
114
|
-
const insertAfter
|
|
114
|
+
const insertAfter = (parent, node, prev) => {
|
|
115
115
|
if (!prev) parent.insertBefore(node, parent.firstChild);else parent.insertBefore(node, prev.nextSibling);
|
|
116
116
|
};
|
|
117
|
-
const createAnchor
|
|
118
|
-
const remove
|
|
117
|
+
const createAnchor = name => document.createComment(name);
|
|
118
|
+
const remove = node => {
|
|
119
119
|
node.remove();
|
|
120
120
|
};
|
|
121
|
-
const firstChild
|
|
122
|
-
const nextSib
|
|
123
|
-
const beforeIndent
|
|
121
|
+
const firstChild = node => node.firstChild;
|
|
122
|
+
const nextSib = node => node.nextSibling;
|
|
123
|
+
const beforeIndent = node => {
|
|
124
124
|
if (node[CONTENT_FLAG]) {
|
|
125
125
|
const tag = node.tagName?.toLowerCase();
|
|
126
126
|
const hasText = node.textContent != null;
|
|
@@ -131,308 +131,18 @@
|
|
|
131
131
|
const leaveNode = () => {};
|
|
132
132
|
const leaveLogicNode = () => {};
|
|
133
133
|
const render = bobe.customRender({
|
|
134
|
-
createNode
|
|
135
|
-
setProp
|
|
136
|
-
insertAfter
|
|
137
|
-
createAnchor
|
|
138
|
-
remove
|
|
139
|
-
firstChild
|
|
140
|
-
nextSib
|
|
141
|
-
beforeIndent
|
|
134
|
+
createNode,
|
|
135
|
+
setProp,
|
|
136
|
+
insertAfter,
|
|
137
|
+
createAnchor,
|
|
138
|
+
remove,
|
|
139
|
+
firstChild,
|
|
140
|
+
nextSib,
|
|
141
|
+
beforeIndent,
|
|
142
142
|
leaveNode,
|
|
143
143
|
leaveLogicNode
|
|
144
144
|
});
|
|
145
145
|
|
|
146
|
-
(function (SSRNodeType) {
|
|
147
|
-
SSRNodeType[SSRNodeType["Element"] = 0] = "Element";
|
|
148
|
-
SSRNodeType[SSRNodeType["Text"] = 1] = "Text";
|
|
149
|
-
SSRNodeType[SSRNodeType["Anchor"] = 2] = "Anchor";
|
|
150
|
-
SSRNodeType[SSRNodeType["Root"] = 3] = "Root";
|
|
151
|
-
return SSRNodeType;
|
|
152
|
-
})({});
|
|
153
|
-
class SSRFiber {
|
|
154
|
-
parent = undefined;
|
|
155
|
-
next = undefined;
|
|
156
|
-
child = undefined;
|
|
157
|
-
html = undefined;
|
|
158
|
-
openTagEnd = undefined;
|
|
159
|
-
constructor(type, props = {}) {
|
|
160
|
-
this.type = type;
|
|
161
|
-
this.props = props;
|
|
162
|
-
}
|
|
163
|
-
querySelector(selector) {
|
|
164
|
-
const idMatch = selector.match(/#([\w-]+)/);
|
|
165
|
-
const id = idMatch ? idMatch[1] : null;
|
|
166
|
-
const classMatches = selector.match(/\.[\w-]+/g);
|
|
167
|
-
const classes = classMatches ? classMatches.map(c => c.slice(1)) : [];
|
|
168
|
-
const tag = selector.replace(/#[\w-]+/g, '').replace(/\.[\w-]+/g, '').trim() || null;
|
|
169
|
-
const walk = node => {
|
|
170
|
-
if (!node) return null;
|
|
171
|
-
if (node.type !== 'root' && node.type !== 'anchor' && node.type !== 'text') {
|
|
172
|
-
if (!tag || node.type === tag) {
|
|
173
|
-
if (!id || node.props['id'] === id) {
|
|
174
|
-
if (classes.length === 0 || classes.every(c => (node.props['class'] || '').split(/\s+/).includes(c))) {
|
|
175
|
-
return node;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
return walk(node.child) || walk(node.next);
|
|
181
|
-
};
|
|
182
|
-
return walk(this.child);
|
|
183
|
-
}
|
|
184
|
-
getElementById(id) {
|
|
185
|
-
return this.querySelector(`#${id}`);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
function parseHtmlToFibers(html, root) {
|
|
190
|
-
const stack = [{
|
|
191
|
-
parent: root,
|
|
192
|
-
lastChild: null
|
|
193
|
-
}];
|
|
194
|
-
const append = node => {
|
|
195
|
-
const frame = stack[stack.length - 1];
|
|
196
|
-
if (!frame.parent.child) {
|
|
197
|
-
frame.parent.child = node;
|
|
198
|
-
} else if (frame.lastChild) {
|
|
199
|
-
frame.lastChild.next = node;
|
|
200
|
-
}
|
|
201
|
-
frame.lastChild = node;
|
|
202
|
-
node.parent = frame.parent;
|
|
203
|
-
};
|
|
204
|
-
let parserRef;
|
|
205
|
-
const parser = new htmlparser2.Parser({
|
|
206
|
-
onparserinit(p) {
|
|
207
|
-
parserRef = p;
|
|
208
|
-
},
|
|
209
|
-
onopentag(name, attribs) {
|
|
210
|
-
const fiber = new SSRFiber(name, {
|
|
211
|
-
...attribs
|
|
212
|
-
});
|
|
213
|
-
fiber.openTagEnd = parserRef.endIndex;
|
|
214
|
-
append(fiber);
|
|
215
|
-
stack.push({
|
|
216
|
-
parent: fiber,
|
|
217
|
-
lastChild: null
|
|
218
|
-
});
|
|
219
|
-
},
|
|
220
|
-
ontext(text) {
|
|
221
|
-
const fiber = new SSRFiber('text', {
|
|
222
|
-
text
|
|
223
|
-
});
|
|
224
|
-
append(fiber);
|
|
225
|
-
},
|
|
226
|
-
onclosetag() {
|
|
227
|
-
stack.pop();
|
|
228
|
-
const top = stack[stack.length - 1];
|
|
229
|
-
top.lastChild ?? null;
|
|
230
|
-
}
|
|
231
|
-
});
|
|
232
|
-
parser.write(html);
|
|
233
|
-
parser.end();
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
|
|
237
|
-
const BOOLEAN_ATTRS = new Set(['disabled', 'readonly', 'checked', 'selected', 'hidden', 'multiple', 'required', 'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'defer', 'async', 'reversed', 'open', 'itemscope', 'ismap', 'nohref', 'noshade', 'nowrap', 'compact', 'default']);
|
|
238
|
-
const ATTR_RE = /[&"<>]/g;
|
|
239
|
-
const TEXT_RE = /[&<>]/g;
|
|
240
|
-
const ATTR_MAP = {
|
|
241
|
-
'&': '&',
|
|
242
|
-
'"': '"',
|
|
243
|
-
'<': '<',
|
|
244
|
-
'>': '>'
|
|
245
|
-
};
|
|
246
|
-
const TEXT_MAP = {
|
|
247
|
-
'&': '&',
|
|
248
|
-
'<': '<',
|
|
249
|
-
'>': '>'
|
|
250
|
-
};
|
|
251
|
-
const escapeAttr = str => {
|
|
252
|
-
const s = String(str);
|
|
253
|
-
return ATTR_RE.test(s) ? s.replace(ATTR_RE, m => ATTR_MAP[m]) : s;
|
|
254
|
-
};
|
|
255
|
-
const escapeText = str => {
|
|
256
|
-
const s = String(str);
|
|
257
|
-
return TEXT_RE.test(s) ? s.replace(TEXT_RE, m => TEXT_MAP[m]) : s;
|
|
258
|
-
};
|
|
259
|
-
const createNode = name => {
|
|
260
|
-
return new SSRFiber(name);
|
|
261
|
-
};
|
|
262
|
-
const setProp = (node, key, value) => {
|
|
263
|
-
node.props[key] = value;
|
|
264
|
-
if (key === 'html') {
|
|
265
|
-
parseHtmlToFibers(value, node);
|
|
266
|
-
}
|
|
267
|
-
};
|
|
268
|
-
const beforeIndent = node => {
|
|
269
|
-
if (node.props.html != null) {
|
|
270
|
-
return false;
|
|
271
|
-
}
|
|
272
|
-
};
|
|
273
|
-
const insertAfter = (parent, node, prev) => {
|
|
274
|
-
let next;
|
|
275
|
-
if (prev) {
|
|
276
|
-
next = prev.next;
|
|
277
|
-
prev.next = node;
|
|
278
|
-
} else {
|
|
279
|
-
next = parent.child;
|
|
280
|
-
parent.child = node;
|
|
281
|
-
}
|
|
282
|
-
node.next = next;
|
|
283
|
-
node.parent = parent;
|
|
284
|
-
};
|
|
285
|
-
const createAnchor = (name, isBefore) => {
|
|
286
|
-
return new SSRFiber('anchor', {
|
|
287
|
-
name,
|
|
288
|
-
isBefore
|
|
289
|
-
});
|
|
290
|
-
};
|
|
291
|
-
const remove = (node, prev) => {
|
|
292
|
-
const parent = node.parent,
|
|
293
|
-
next = node.next;
|
|
294
|
-
node.next = null;
|
|
295
|
-
if (prev) {
|
|
296
|
-
prev.next = next;
|
|
297
|
-
} else {
|
|
298
|
-
parent.child = next;
|
|
299
|
-
}
|
|
300
|
-
node.parent = null;
|
|
301
|
-
};
|
|
302
|
-
const firstChild = node => node.child;
|
|
303
|
-
const nextSib = node => node.next;
|
|
304
|
-
function walkFiber(root) {
|
|
305
|
-
let point = root;
|
|
306
|
-
let shouldSink = true;
|
|
307
|
-
sink: do {
|
|
308
|
-
if (point.type === 'root') {
|
|
309
|
-
point.html = '';
|
|
310
|
-
} else if (point.type === 'anchor') {
|
|
311
|
-
point.html = `<!--${point.props.name}-->`;
|
|
312
|
-
} else if (point.type === 'text') {
|
|
313
|
-
const text = point.props.text;
|
|
314
|
-
if (text != null) {
|
|
315
|
-
point.html = escapeText(point.props.text);
|
|
316
|
-
}
|
|
317
|
-
} else {
|
|
318
|
-
point.html = `<${point.type}`;
|
|
319
|
-
const props = point.props;
|
|
320
|
-
let text;
|
|
321
|
-
let classStr = '';
|
|
322
|
-
const dotClasses = [];
|
|
323
|
-
let idValue = null;
|
|
324
|
-
for (const key in props) {
|
|
325
|
-
const value = props[key];
|
|
326
|
-
if (key.startsWith('on') || key === 'ref') continue;
|
|
327
|
-
if (key === 'html') {
|
|
328
|
-
continue;
|
|
329
|
-
}
|
|
330
|
-
if (key === 'text') {
|
|
331
|
-
text = value;
|
|
332
|
-
continue;
|
|
333
|
-
}
|
|
334
|
-
if (key.startsWith('.')) {
|
|
335
|
-
if (value) dotClasses.push(key.slice(1));
|
|
336
|
-
continue;
|
|
337
|
-
}
|
|
338
|
-
if (key.startsWith('#')) {
|
|
339
|
-
if (value) idValue = key.slice(1);
|
|
340
|
-
continue;
|
|
341
|
-
}
|
|
342
|
-
if (key === 'class') {
|
|
343
|
-
if (value == null) continue;
|
|
344
|
-
if (typeof value === 'object' && !Array.isArray(value)) {
|
|
345
|
-
classStr = Object.entries(value).filter(([, v]) => !!v).map(([k]) => k).join(' ');
|
|
346
|
-
} else {
|
|
347
|
-
classStr = typeof value === 'boolean' ? value ? 'true' : '' : String(value);
|
|
348
|
-
}
|
|
349
|
-
continue;
|
|
350
|
-
}
|
|
351
|
-
if (key === 'style') {
|
|
352
|
-
if (value == null) continue;
|
|
353
|
-
point.html += ` style="${escapeAttr(String(value))}"`;
|
|
354
|
-
continue;
|
|
355
|
-
}
|
|
356
|
-
if (BOOLEAN_ATTRS.has(key)) {
|
|
357
|
-
if (value !== false && value !== null && value !== undefined) {
|
|
358
|
-
point.html += ` ${key}`;
|
|
359
|
-
}
|
|
360
|
-
continue;
|
|
361
|
-
}
|
|
362
|
-
if (key.startsWith('data-') || key.startsWith('aria-')) {
|
|
363
|
-
if (value == null) continue;
|
|
364
|
-
point.html += ` ${key}="${escapeAttr(value)}"`;
|
|
365
|
-
continue;
|
|
366
|
-
}
|
|
367
|
-
if (value == null) continue;
|
|
368
|
-
point.html += ` ${key}="${escapeAttr(value)}"`;
|
|
369
|
-
}
|
|
370
|
-
if (dotClasses.length) {
|
|
371
|
-
classStr = (classStr ? classStr + ' ' : '') + dotClasses.join(' ');
|
|
372
|
-
}
|
|
373
|
-
if (classStr) {
|
|
374
|
-
point.html += ` class="${escapeAttr(classStr)}"`;
|
|
375
|
-
}
|
|
376
|
-
if (idValue) {
|
|
377
|
-
point.html += ` id="${escapeAttr(idValue)}"`;
|
|
378
|
-
}
|
|
379
|
-
if (text != null && props.html == null) {
|
|
380
|
-
const content = escapeText(text);
|
|
381
|
-
point.html += `>${content}</${point.type}>`;
|
|
382
|
-
if (point.child) console.warn(`<${point.type}> has text content and child elements — children ignored`);
|
|
383
|
-
shouldSink = false;
|
|
384
|
-
} else {
|
|
385
|
-
if (VOID_TAGS.has(point.type)) {
|
|
386
|
-
point.html += `/>`;
|
|
387
|
-
if (point.child) console.warn(`<${point.type}> can't have children`);
|
|
388
|
-
shouldSink = false;
|
|
389
|
-
} else {
|
|
390
|
-
point.html += `>`;
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
if (point.child && shouldSink) {
|
|
395
|
-
point = point.child;
|
|
396
|
-
continue;
|
|
397
|
-
}
|
|
398
|
-
do {
|
|
399
|
-
const notRoot = point !== root;
|
|
400
|
-
const notAnchor = point.type !== 'anchor';
|
|
401
|
-
const notText = point.type !== 'text';
|
|
402
|
-
if (shouldSink && notRoot && notAnchor && notText) {
|
|
403
|
-
point.html += `</${point.type}>`;
|
|
404
|
-
}
|
|
405
|
-
if (notRoot) {
|
|
406
|
-
point.parent.html += point.html;
|
|
407
|
-
}
|
|
408
|
-
shouldSink = true;
|
|
409
|
-
if (!notRoot) break sink;
|
|
410
|
-
if (point.next) {
|
|
411
|
-
point = point.next;
|
|
412
|
-
break;
|
|
413
|
-
}
|
|
414
|
-
point = point.parent;
|
|
415
|
-
} while (true);
|
|
416
|
-
} while (true);
|
|
417
|
-
}
|
|
418
|
-
const renderHtmlStr = ComponentClass => {
|
|
419
|
-
const root = new SSRFiber('root');
|
|
420
|
-
const render = bobe.customRender({
|
|
421
|
-
createNode,
|
|
422
|
-
setProp,
|
|
423
|
-
insertAfter,
|
|
424
|
-
createAnchor,
|
|
425
|
-
remove,
|
|
426
|
-
firstChild,
|
|
427
|
-
nextSib,
|
|
428
|
-
beforeIndent,
|
|
429
|
-
noopEffect: true
|
|
430
|
-
});
|
|
431
|
-
render(ComponentClass, root);
|
|
432
|
-
walkFiber(root);
|
|
433
|
-
return root.html;
|
|
434
|
-
};
|
|
435
|
-
|
|
436
146
|
class TreeCursor {
|
|
437
147
|
claimed = new WeakSet();
|
|
438
148
|
current = null;
|
|
@@ -482,18 +192,18 @@
|
|
|
482
192
|
const cursor = new TreeCursor(rootEl);
|
|
483
193
|
let isFirstRender = true;
|
|
484
194
|
const hydrateSetProp = (node, key, value) => {
|
|
485
|
-
if (isFirstRender && (key === '
|
|
195
|
+
if (isFirstRender && (key === 'children' || key === 'html')) {
|
|
486
196
|
node[CONTENT_FLAG] = value != null;
|
|
487
197
|
return;
|
|
488
198
|
}
|
|
489
|
-
return setProp
|
|
199
|
+
return setProp(node, key, value);
|
|
490
200
|
};
|
|
491
|
-
const createNode = name => {
|
|
201
|
+
const createNode$1 = name => {
|
|
492
202
|
if (isFirstRender) {
|
|
493
203
|
const claimed = name === 'text' ? cursor.tryClaimText() : cursor.tryClaimElement(name);
|
|
494
204
|
if (claimed) return claimed;
|
|
495
205
|
}
|
|
496
|
-
return name === 'text' ? document.createTextNode('') : createNode
|
|
206
|
+
return name === 'text' ? document.createTextNode('') : createNode(name);
|
|
497
207
|
};
|
|
498
208
|
const createAnchor = name => {
|
|
499
209
|
if (isFirstRender) {
|
|
@@ -538,13 +248,13 @@
|
|
|
538
248
|
if (isFirstRender) cursor.leaveToParent(node);
|
|
539
249
|
};
|
|
540
250
|
const render = bobe.customRender({
|
|
541
|
-
createNode,
|
|
251
|
+
createNode: createNode$1,
|
|
542
252
|
setProp: hydrateSetProp,
|
|
543
253
|
insertAfter,
|
|
544
254
|
createAnchor,
|
|
545
|
-
remove
|
|
546
|
-
firstChild
|
|
547
|
-
nextSib
|
|
255
|
+
remove,
|
|
256
|
+
firstChild,
|
|
257
|
+
nextSib,
|
|
548
258
|
beforeIndent,
|
|
549
259
|
beforeLogicIndent,
|
|
550
260
|
leaveNode,
|
|
@@ -556,22 +266,20 @@
|
|
|
556
266
|
return render(ComponentClass, rootEl);
|
|
557
267
|
};
|
|
558
268
|
|
|
559
|
-
exports.BOOLEAN_ATTRS = BOOLEAN_ATTRS
|
|
269
|
+
exports.BOOLEAN_ATTRS = BOOLEAN_ATTRS;
|
|
560
270
|
exports.CONTENT_FLAG = CONTENT_FLAG;
|
|
561
|
-
exports.beforeIndent = beforeIndent
|
|
562
|
-
exports.createAnchor = createAnchor
|
|
563
|
-
exports.createNode = createNode
|
|
564
|
-
exports.firstChild = firstChild
|
|
271
|
+
exports.beforeIndent = beforeIndent;
|
|
272
|
+
exports.createAnchor = createAnchor;
|
|
273
|
+
exports.createNode = createNode;
|
|
274
|
+
exports.firstChild = firstChild;
|
|
565
275
|
exports.hydrate = hydrate;
|
|
566
|
-
exports.insertAfter = insertAfter
|
|
276
|
+
exports.insertAfter = insertAfter;
|
|
567
277
|
exports.leaveLogicNode = leaveLogicNode;
|
|
568
278
|
exports.leaveNode = leaveNode;
|
|
569
|
-
exports.nextSib = nextSib
|
|
570
|
-
exports.remove = remove
|
|
279
|
+
exports.nextSib = nextSib;
|
|
280
|
+
exports.remove = remove;
|
|
571
281
|
exports.render = render;
|
|
572
|
-
exports.
|
|
573
|
-
exports.setProp = setProp$1;
|
|
574
|
-
exports.walkFiber = walkFiber;
|
|
282
|
+
exports.setProp = setProp;
|
|
575
283
|
|
|
576
284
|
}));
|
|
577
285
|
//# sourceMappingURL=index.umd.js.map
|