Skip to content

Instantly share code, notes, and snippets.

@JLChnToZ
Last active June 6, 2018 11:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JLChnToZ/ac6de2510533f68db46ee673f9a71460 to your computer and use it in GitHub Desktop.
Save JLChnToZ/ac6de2510533f68db46ee673f9a71460 to your computer and use it in GitHub Desktop.
Demo for workaround on writing tsx file without React but with Hyperscript.
declare module '__globals' {
type DomElement = Element;
type DeepPartial<T> = {
[K in keyof T]?: T[K] | DeepPartial<T[K]>;
};
type FreePartialProperties<T> = {
[K in keyof T]: DeepPartial<T[K]> & {
[key: string]: any;
};
};
global {
namespace JSX {
interface Element extends DomElement {}
interface IntrinsicElements extends
FreePartialProperties<HTMLElementTagNameMap>,
FreePartialProperties<SVGElementTagNameMap> {
[tagName: string]: any;
}
}
}
}
import h from 'hyperscript';
document.body.appendChild(<div className="root">
<h1>Hello Hyperscript!</h1>
<div onclick={(e: MouseEvent) => alert(`Clicked at ${e.clientX},${e.clientY}`)} style={{
width: '100%',
height: '90%',
border: 'solid 1px black'
}}>Click ME!!</div>
</div>);
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["dom", "es2015", "es5"],
"jsx": "react",
"jsxFactory": "h",
"sourceMap": true,
"strict": true,
"noImplicitAny": true,
"moduleResolution": "node",
"esModuleInterop": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment