zachleat · July 6, 2024 00:09 · zachleat · Jun 3, 2024
diff --git a/README.md b/README.md
diff --git a/eleventy.config.js b/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",
 	});
 };
diff --git a/index.11ty.tsx b/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/[email protected]/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>
  );
 }
diff --git a/package.json b/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://[email protected]/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"
  }
 }
diff --git a/tsconfig.json b/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/[email protected]/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://[email protected]/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. */
	}
	}