From 171d85f279c98859986ca3e9459555e6a148fd19 Mon Sep 17 00:00:00 2001 From: tmuco Date: Sun, 26 May 2024 20:18:26 +0200 Subject: [PATCH 1/2] refactor: update the usage of JSX blog post to the current version of kitajs --- .../use-tsx-for-your-template-engine.md | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/content/blog_posts/articles/use-tsx-for-your-template-engine.md b/content/blog_posts/articles/use-tsx-for-your-template-engine.md index bfd3fb7..6198930 100644 --- a/content/blog_posts/articles/use-tsx-for-your-template-engine.md +++ b/content/blog_posts/articles/use-tsx-for-your-template-engine.md @@ -84,7 +84,7 @@ export function Header() { I have tried different packages to use TSX as a templating engine. For this tutorial, we will use [`@kitajs/html`](https://github.com/kitajs/html), but feel free to use the one you prefer. -First, you have to install the package. At the time of writing, this package is at version `3.1.1`. +First, you have to install the package. At the time of writing, this package is at version `4.1.0`. We will also install their plugin to enable editor intellisense. @@ -92,19 +92,7 @@ We will also install their plugin to enable editor intellisense. npm install @kitajs/html @kitajs/ts-html-plugin ``` -Once done, we will edit the `bin/server.ts` file to register Kita. - -```ts -import 'reflect-metadata' -// insert-start -import '@kitajs/html/register.js' -// insert-end -import { Ignitor, prettyPrintError } from '@adonisjs/core' - -// ... -``` - -We must also change our `tsconfig.json` file to add JSX support. +Once done, will edit `tsconfig.json` file to add JSX support. ```js { @@ -112,10 +100,9 @@ We must also change our `tsconfig.json` file to add JSX support. "compilerOptions": { // ... // insert-start - "jsx": "react", - "jsxFactory": "Html.createElement", - "jsxFragmentFactory": "Html.Fragment", - "plugins": [{ "name": "@kitajs/ts-html-plugin" }] + "jsx": "react-jsx", + "jsxImportSource": "@kitajs/html", + "plugins": [{ "name": "@kitajs/ts-html-plugin" }] // insert-end } } From 0562c5e7af0678658518d0f4a18c2c8aca9aace1 Mon Sep 17 00:00:00 2001 From: tmuco Date: Sun, 26 May 2024 20:32:48 +0200 Subject: [PATCH 2/2] fix: fix merge conflict --- content/blog_posts/articles/use-tsx-for-your-template-engine.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog_posts/articles/use-tsx-for-your-template-engine.md b/content/blog_posts/articles/use-tsx-for-your-template-engine.md index 6198930..0df87bc 100644 --- a/content/blog_posts/articles/use-tsx-for-your-template-engine.md +++ b/content/blog_posts/articles/use-tsx-for-your-template-engine.md @@ -92,7 +92,7 @@ We will also install their plugin to enable editor intellisense. npm install @kitajs/html @kitajs/ts-html-plugin ``` -Once done, will edit `tsconfig.json` file to add JSX support. +Once done, will edit the `tsconfig.json` file to add JSX support. ```js {