zachleat/README.md

## README.md

      
    Raw
  

              README.md
            
          
    JSX, Typescript, and TSX in 11ty.js

Example repo for 11ty/eleventy#2248.
This gist was created by @pspeter3!

  
## eleventy.config.js
module.exports = function(eleventyConfig) {
	// v2.0.0-canary.19 or newer
	eleventyConfig.addExtension([ "11ty.jsx", "11ty.ts", "11ty.tsx" ], {
		key: "11ty.js",
	});
};

## index.11ty.tsx
import h from "vhtml";

export const data = {
  title: "Eleventy 11ty.js Extensions",
};

interface Context {
  log(message: string): void;
}

interface Data {
  readonly title: string;
}

export function render(this: Context, { title }: Data) {
  this.log(title);
  return (
    <html lang="en">
      <head>
        <title>{title}</title>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.0/css/pico.min.css"
          integrity="sha256-TMMCiSUqLaqob0cQkqOwl6oJLd2X5WKYJ4ML+BQRQOA="
          crossorigin="anonymous"
        ></link>
      </head>
      <body>
        <main className="container">
          <h1>{title}</h1>
          <p>
            Example repo to show the value of{" "}
            <a href="https://github.com/11ty/eleventy/issues/2248">
              11ty/eleventy#2248
            </a>
            .
          </p>
        </main>
      </body>
    </html>
  );
}

## package.json
{
  "name": "11ty-extensions",
  "description": "Example repo to show the value of https://github.com/11ty/eleventy/issues/2248",
  "scripts": {
    "build": "node --require esbuild-register node_modules/.bin/eleventy",
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gist.github.com/56931a837cb854c55bb06024287ead95.git"
  },
  "devDependencies": {
    "@11ty/eleventy": "^2.0.0-canary.19",
    "@types/vhtml": "^2.2.4",
    "esbuild-register": "^3.3.2",
    "patch-package": "^6.4.7",
    "typescript": "^4.6.3",
    "vhtml": "^2.2.0"
  }
}

## tsconfig.json
{
  "compilerOptions": {
    "target": "es2021",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "jsx": "react",                                      /* Specify what JSX code is generated. */
    "jsxFactory": "h",                                   /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}
	module.exports = function(eleventyConfig) {
	// v2.0.0-canary.19 or newer
	eleventyConfig.addExtension([ "11ty.jsx", "11ty.ts", "11ty.tsx" ], {
	key: "11ty.js",
	});
	};
	import h from "vhtml";

	export const data = {
	title: "Eleventy 11ty.js Extensions",
	};

	interface Context {
	log(message: string): void;
	}

	interface Data {
	readonly title: string;
	}

	export function render(this: Context, { title }: Data) {
	this.log(title);
	return (
	<html lang="en">
	<head>
	<title>{title}</title>
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.0/css/pico.min.css"
	integrity="sha256-TMMCiSUqLaqob0cQkqOwl6oJLd2X5WKYJ4ML+BQRQOA="
	crossorigin="anonymous"
	></link>
	</head>
	<body>
	<main className="container">
	<h1>{title}</h1>
	<p>
	Example repo to show the value of{" "}
	<a href="https://github.com/11ty/eleventy/issues/2248">
	11ty/eleventy#2248
	</a>
	.
	</p>
	</main>
	</body>
	</html>
	);
	}
	{
	"name": "11ty-extensions",
	"description": "Example repo to show the value of https://github.com/11ty/eleventy/issues/2248",
	"scripts": {
	"build": "node --require esbuild-register node_modules/.bin/eleventy",
	},
	"repository": {
	"type": "git",
	"url": "git+ssh://git@gist.github.com/56931a837cb854c55bb06024287ead95.git"
	},
	"devDependencies": {
	"@11ty/eleventy": "^2.0.0-canary.19",
	"@types/vhtml": "^2.2.4",
	"esbuild-register": "^3.3.2",
	"patch-package": "^6.4.7",
	"typescript": "^4.6.3",
	"vhtml": "^2.2.0"
	}
	}
	{
	"compilerOptions": {
	"target": "es2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
	"jsx": "react", /* Specify what JSX code is generated. */
	"jsxFactory": "h", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
	"module": "commonjs", /* Specify what module code is generated. */
	"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
	"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
	"strict": true, /* Enable all strict type-checking options. */
	"skipLibCheck": true /* Skip type checking all .d.ts files. */
	}
	}