This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.
It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():
<body>
<div id="root"> ⬅ we pass this to render() as the parent DOM element...
It's possible to render HTML in Preact using the dangerouslySetInnerHTML prop,
however doing so bypasses the Virtual DOM entirely. This may be reasonable for
static HTML, but interactivity can be a little painful to graft on without VDOM.
There is another technique available that melds HTML to Virtual DOM without such limitations.
| import { options } from 'preact'; | |
| // Fix Preact rendering when Google Translate breaks the DOM | |
| const FONT_AS_TEXT = { | |
| localName: { | |
| value: null | |
| }, | |
| nodeType: { | |
| value: 3 | |
| }, |
Peter Naur's classic 1985 essay "Programming as Theory Building" argues that a program is not its source code. A program is a shared mental construct (he uses the word theory) that lives in the minds of the people who work on it. If you lose the people, you lose the program. The code is merely a written representation of the program, and it's lossy, so you can't reconstruct
A tiny zero-dependency compression middleware for polka (& express!) with native Brotli support.
| (function(c,b,cs,r,d){ | |
| b.frameBorder=0; | |
| b.style = 'position:fixed;bottom:0;left:0;width:100%;height:30vh;background:#fff;border-top:4px solid #bbb;box-shadow:0 0 2px #000;z-index:999;cursor:ns-resize;'; | |
| b.onpointerdown=function(e){b.setPointerCapture(e.pointerId);b.e=e;b.h=b.offsetHeight-4;b.style.borderTopColor='#59f'} | |
| b.onpointermove=function(e){if(b.e)b.style.height=(b.h-e.y+b.e.y)+'px'} | |
| b.onpointerup=function(){b.e=null;b.style.borderTopColor='#aaa'} | |
| document.documentElement.appendChild(b); | |
| (d=b.contentWindow.document).open(); | |
| d.write('<style>html,body{width:100%;height:100%;overflow:hidden;font:12px/1.2 system-ui,sans-serif;flex:1;display:flex;flex-direction:column;margin:0;}*{box-sizing:border-box;}button{font:inherit;}pre{margin:0;padding:4px;border-bottom:1px solid #ddd;}</style><div style="background:#ddd;border-bottom:1px solid #ccc;display:flex;padding:3px 5px 4px;align-items:center;"><div style="color:#555;flex:1;">Console</div><button onclick="console.clear()">clear</button></div> |
| export const rollupLogo = "./logo.svg"; |
| export const h=(t,p,...c)=>({t,p,c,k:p&&p.key}) | |
| export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=> | |
| // arrays | |
| e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])): | |
| // components | |
| e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=> | |
| render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):( | |
| // create notes | |
| m=t.d||(e.t?document.createElement(e.t):new Text(e.p)), | |
| // diff props |
| { | |
| "preset": "ts-jest", | |
| "testEnvironment": "node" | |
| } |
