ithinkihaveacat · October 2, 2019 22:05
diff --git a/.gitignore b/.gitignore
 node_modules
 *.js
 *.jsx
diff --git a/README.md b/README.md
diff --git a/demo.tsx b/demo.tsx
 import Simple from "./Simple";

 import { React } from "./jsx";

 const context = {
  title: "Foo & Bar",
  canonical: "https://foo.example.com/",
  metadata: {
    author: "Clem",
    date: "today"
  }
 };

 console.log(`<!doctype html>`);
 console.log(
  <Simple {...context}>
    <h1>Hello, World!</h1>
  </Simple>
 );
diff --git a/Favicon.tsx b/Favicon.tsx
 import { React } from "./jsx";

 export default () => {
  return (
    <>
      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/apple-touch-icon.png"
      />
      <link
        rel="icon"
        type="image/png"
        href="/favicon-32x32.png"
        sizes="32x32"
      />
      <link
        rel="icon"
        type="image/png"
        href="/favicon-16x16.png"
        sizes="16x16"
      />
      <link rel="manifest" href="/manifest.json" />
      <meta name="theme-color" content="#ffffff" />
    </>
  );
 };
diff --git a/globals.d.ts b/globals.d.ts
 // https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

 // Type checking for intrinsic elements (i.e. lower-case elements like <foo />),
 // see https://www.typescriptlang.org/docs/handbook/jsx.html

 declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any;
  }
 }

 declare module "vhtml";
diff --git a/Html.tsx b/Html.tsx
 import { React } from "./jsx";

 import Favicon from "./Favicon";

 export interface Context {
  canonical: string;
  title: string;
 }

 export default ({
  children,
  title,
  canonical
 }: Context & {
  [k: string]: any;
 }) => {
  return (
    <html lang="en-UK" amp>
      <head>
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=1,initial-scale=1"
        />
        <title>{title}</title>
        <link rel="canonical" href={canonical} />
        <Favicon />
      </head>

      {children}
    </html>
  );
 };
diff --git a/jsx.ts b/jsx.ts
 // Proxy React.createElement and React.Fragment to their vhtml equivalents. A
 // temporary workaround until TypeScript has better support for Fragments and
 // JSX systems other than React; see https://github.com/developit/vhtml/pull/16.

 import h = require("vhtml");

 export const React = {
  createElement: h,
  Fragment: ({ children }: { children: string[] }) => h(null, null, ...children)
 };
diff --git a/package-lock.json b/package-lock.json
 {
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "typescript": {
      "version": "3.6.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
      "integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
      "dev": true
    },
    "vhtml": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/vhtml/-/vhtml-2.1.0.tgz",
      "integrity": "sha1-qFjtLjKMWVOZphroig4A+3Vr4Bw=",
      "dev": true
    }
  }
 }
diff --git a/package.json b/package.json
 {
  "devDependencies": {
    "typescript": "^3.6.3",
    "vhtml": "^2.1.0"
  }
 }
diff --git a/Simple.tsx b/Simple.tsx
 import { React } from "./jsx";

 import { default as Html, Context } from "./Html";

 export default ({ children, ...context }: Context & { [k: string]: any }) => {
  return <Html {...context}>{children}</Html>;
 };
	import Simple from "./Simple";

	import { React } from "./jsx";

	const context = {
	title: "Foo & Bar",
	canonical: "https://foo.example.com/",
	metadata: {
	author: "Clem",
	date: "today"
	}
	};

	console.log(`<!doctype html>`);
	console.log(
	<Simple {...context}>
	<h1>Hello, World!</h1>
	</Simple>
	);
	import { React } from "./jsx";

	export default () => {
	return (
	<>
	<link
	rel="apple-touch-icon"
	sizes="180x180"
	href="/apple-touch-icon.png"
	/>
	<link
	rel="icon"
	type="image/png"
	href="/favicon-32x32.png"
	sizes="32x32"
	/>
	<link
	rel="icon"
	type="image/png"
	href="/favicon-16x16.png"
	sizes="16x16"
	/>
	<link rel="manifest" href="/manifest.json" />
	<meta name="theme-color" content="#ffffff" />
	</>
	);
	};
	// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

	// Type checking for intrinsic elements (i.e. lower-case elements like <foo />),
	// see https://www.typescriptlang.org/docs/handbook/jsx.html

	declare namespace JSX {
	interface IntrinsicElements {
	[elemName: string]: any;
	}
	}

	declare module "vhtml";
	import { React } from "./jsx";

	import Favicon from "./Favicon";

	export interface Context {
	canonical: string;
	title: string;
	}

	export default ({
	children,
	title,
	canonical
	}: Context & {
	[k: string]: any;
	}) => {
	return (
	<html lang="en-UK" amp>
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width,minimum-scale=1,initial-scale=1"
	/>
	<title>{title}</title>
	<link rel="canonical" href={canonical} />
	<Favicon />
	</head>

	{children}
	</html>
	);
	};
	// Proxy React.createElement and React.Fragment to their vhtml equivalents. A
	// temporary workaround until TypeScript has better support for Fragments and
	// JSX systems other than React; see https://github.com/developit/vhtml/pull/16.

	import h = require("vhtml");

	export const React = {
	createElement: h,
	Fragment: ({ children }: { children: string[] }) => h(null, null, ...children)
	};
	{
	"requires": true,
	"lockfileVersion": 1,
	"dependencies": {
	"typescript": {
	"version": "3.6.3",
	"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
	"integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
	"dev": true
	},
	"vhtml": {
	"version": "2.1.0",
	"resolved": "https://registry.npmjs.org/vhtml/-/vhtml-2.1.0.tgz",
	"integrity": "sha1-qFjtLjKMWVOZphroig4A+3Vr4Bw=",
	"dev": true
	}
	}
	}
	{
	"devDependencies": {
	"typescript": "^3.6.3",
	"vhtml": "^2.1.0"
	}
	}
	import { React } from "./jsx";

	import { default as Html, Context } from "./Html";

	export default ({ children, ...context }: Context & { [k: string]: any }) => {
	return <Html {...context}>{children}</Html>;
	};