ithinkihaveacat/.gitignore

## .gitignore
node_modules
*.js
*.jsx

## README.md

      
    Raw
  

              README.md
            
          
    README

Usage:
$ npm install
$ npx typescript --jsx react demo.tsx
$ node demo.js
<!doctype html>
<html lang="en-UK" amp="true"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><title>Foo &amp; Bar</title><link rel="canonical" href="https://foo.example.com/"><null><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"></null></head><h1>Hello, World!</h1></html>

  
## 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>
);

## 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" />
    </>
  );
};

## 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";

## 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>
  );
};

## 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)
};

## 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
    }
  }
}

## package.json
{
  "devDependencies": {
    "typescript": "^3.6.3",
    "vhtml": "^2.1.0"
  }
}

## 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>;
	};