Protected
buildProtected
commitProtected
createProtected
deleteProtected
keyOptional
index: numberProtected
propsProtected
updateProtected
updateProtected
vOptional
childrenOptional
isOptional
keyOptional
nodeOptional
propsOptional
refOptional
selectorOptional
styleOptional
tagOptional
textStatic
attrsStatic
propsOptional
key: IndexKeyOptional
key: IndexKeyOptional
key: IndexKeyA light-weight DOM Renderer supports Web components standard & TypeScript language.
+ + + +import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().patch(
{
tagName: 'body',
node: document.body
},
{
tagName: 'body',
children: [
{
tagName: 'a',
props: { href: 'https://idea2.app/' },
style: { color: 'red' },
children: [{ text: 'idea2app' }]
}
]
}
);
console.log(newVNode);
+
+
+tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
+
+
+index.tsx
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
<a href="https://idea2.app/" style={{ color: 'red' }}>
idea2app
</a>
);
console.log(newVNode);
+
+
+import { Readable } from 'stream';
+import { createServer } from 'http';
+import { DOMRenderer } from 'dom-renderer';
+
+const renderer = new DOMRenderer();
+
+const Hello = () => Hello, JSX SSR!
;
+
+createServer((request, response) => {
+ const stream = renderer.renderToReadableStream( );
+
+ Readable.fromWeb(stream).pipe(response);
+}).listen(8080);
+
+
+
See
https://babeljs.io/docs/babel-plugin-transform-react-jsx#react-automatic-runtime-1
+