From 17e40e982e81074d5f12a24ee46fc0389ac6a094 Mon Sep 17 00:00:00 2001
From: atellmer <atellmer@gmail.com>
Date: Thu, 11 Apr 2024 16:25:22 +0500
Subject: [PATCH] added jsx-runtime support

---
 README.md                                     |  2 +-
 examples/1k-components/index.tsx              |  2 +-
 examples/animated-grid/index.tsx              |  2 -
 examples/concurrent-tabs/index.tsx            |  2 +-
 examples/deferred-search/index.tsx            |  2 +-
 examples/desktop/src/app.tsx                  |  2 +-
 examples/desktop/src/index.tsx                |  1 -
 examples/hmr-web/app.tsx                      |  2 +-
 examples/hmr-web/counter.tsx                  |  2 +-
 examples/hmr-web/index.tsx                    |  2 +-
 examples/html-inputs.tsx                      |  4 +-
 examples/nativescript/src/components/app.tsx  |  2 +-
 .../nativescript/src/components/button.tsx    |  2 +-
 examples/nativescript/src/components/card.tsx |  2 +-
 .../nativescript/src/components/contacts.tsx  |  2 +-
 examples/nativescript/src/components/home.tsx |  2 +-
 .../nativescript/src/components/settings.tsx  |  2 +-
 examples/nativescript/tsconfig.json           |  8 ++--
 examples/render-props.tsx                     |  2 +-
 examples/router/about.tsx                     |  2 +-
 examples/router/contacts.tsx                  |  2 +-
 examples/router/home.tsx                      |  2 +-
 examples/router/index.tsx                     |  2 +-
 .../backend/bootstrap.tsx                     |  1 -
 .../backend/tsconfig.json                     |  3 ++
 .../frontend/components/app.tsx               |  2 +-
 .../frontend/components/invoices.tsx          |  2 +-
 .../frontend/components/operations.tsx        |  2 +-
 .../frontend/components/page.tsx              |  2 +-
 .../frontend/components/product-add.tsx       |  2 +-
 .../frontend/components/product-analytics.tsx |  2 +-
 .../frontend/components/product-balance.tsx   |  2 +-
 .../frontend/components/product-card.tsx      |  2 +-
 .../frontend/components/product-edit.tsx      |  2 +-
 .../frontend/components/product-form.tsx      |  2 +-
 .../frontend/components/product-list.tsx      |  2 +-
 .../frontend/components/product-remove.tsx    |  2 +-
 .../frontend/components/products.tsx          |  2 +-
 .../frontend/components/ui.tsx                |  2 +-
 .../frontend/tsconfig.json                    |  3 ++
 examples/server-side-rendering/package.json   | 14 +++----
 examples/server-side-rendering/tsconfig.json  |  5 +--
 examples/sierpinski-triangle/index.tsx        | 12 +-----
 examples/spring-draggable-list/index.tsx      |  2 +-
 examples/spring-masonry-grid/index.tsx        |  2 +-
 examples/spring-menu/index.tsx                |  2 +-
 examples/spring-slider/index.tsx              |  2 +-
 examples/spring-snake/index.tsx               |  2 +-
 examples/spring-toast/index.tsx               |  2 +-
 examples/svg.tsx                              |  2 +-
 examples/theme-context/index.tsx              |  2 -
 .../animations/src/animated/animated.spec.tsx |  3 +-
 .../src/controller/controller.spec.ts         |  2 +-
 .../src/use-chain/use-chain.spec.tsx          |  3 +-
 .../src/use-spring/use-spring.spec.tsx        |  3 +-
 .../src/use-springs/use-springs.spec.tsx      |  3 +-
 .../src/use-trail/use-trail.spec.tsx          |  4 +-
 .../use-transition/use-transition.spec.tsx    |  3 +-
 packages/core/README.md                       | 40 ++++++++++++++++---
 packages/core/package.json                    | 23 +++++++++++
 packages/core/src/atom/atom.spec.tsx          |  3 --
 packages/core/src/batch/batch.spec.tsx        |  1 -
 .../core/src/component/component.spec.tsx     |  2 -
 packages/core/src/context/context.spec.tsx    |  2 -
 packages/core/src/element/element.ts          |  8 ++--
 packages/core/src/emitter/emitter.spec.tsx    |  1 -
 packages/core/src/fragment/fragment.spec.tsx  |  2 -
 packages/core/src/guard/guard.spec.tsx        |  2 -
 packages/core/src/jsx-runtime.ts              | 40 +++++++++++++++++++
 packages/core/src/lazy/lazy.spec.tsx          |  2 -
 packages/core/src/memo/memo.spec.tsx          |  1 -
 packages/core/src/ref/ref.spec.tsx            |  2 -
 packages/core/src/shadow/shadow.spec.tsx      |  3 --
 .../start-transition.spec.tsx                 |  3 --
 packages/core/src/suspense/suspense.spec.tsx  |  3 --
 packages/core/src/unmount/unmount.spec.tsx    |  2 -
 .../src/use-callback/use-callback.spec.tsx    |  1 -
 .../use-deferred-value.spec.tsx               |  2 -
 .../core/src/use-effect/use-effect.spec.tsx   |  2 -
 .../core/src/use-error/use-error.spec.tsx     |  2 -
 packages/core/src/use-id/use-id.spec.tsx      |  1 -
 .../use-imperative-handle.spec.tsx            |  2 -
 .../use-insertion-effect.spec.tsx             |  2 -
 .../use-layout-effect.spec.tsx                |  2 -
 packages/core/src/use-memo/use-memo.spec.tsx  |  2 -
 .../core/src/use-reducer/use-reducer.spec.tsx |  2 -
 .../core/src/use-state/use-state.spec.tsx     |  2 -
 .../use-sync-external-store.spec.tsx          |  1 -
 .../core/src/use-update/use-update.spec.tsx   |  2 -
 packages/core/src/view/view.spec.tsx          |  1 -
 packages/data/src/cache/cache.spec.tsx        |  1 -
 packages/data/src/client/client.spec.tsx      |  3 +-
 .../use-lazy-query/use-lazy-query.spec.tsx    |  3 +-
 .../src/use-mutation/use-mutation.spec.tsx    |  3 +-
 .../data/src/use-query/use-query.spec.tsx     |  3 +-
 .../navigation-container.tsx                  |  1 -
 .../src/stack-navigator/stack-navigator.tsx   |  1 -
 .../src/tab-navigator/tab-navigator.tsx       |  1 -
 .../src/create-root/create-root.spec.tsx      |  3 +-
 .../platform-browser/src/dom/dom.spec.tsx     |  3 +-
 .../src/events/events.spec.tsx                |  3 +-
 .../src/factory/factory.spec.tsx              |  1 -
 .../src/hydrate-root/hydrate-root.spec.tsx    |  3 +-
 .../src/portal/portal.spec.tsx                |  3 +-
 .../src/render/render.spec.tsx                |  3 --
 packages/platform-desktop/README.md           |  2 +-
 packages/platform-native/README.md            |  4 +-
 packages/platform-server/README.md            |  3 +-
 .../src/render/render.spec.tsx                | 13 +-----
 packages/styled/src/global/global.spec.tsx    |  2 +-
 .../styled/src/keyframes/keyframes.spec.tsx   |  1 -
 packages/styled/src/server/sheet.spec.tsx     |  2 +-
 packages/styled/src/styled/styled.spec.tsx    |  2 +-
 packages/styled/src/theme/theme.spec.tsx      |  2 +-
 .../styled/src/use-style/use-style.spec.tsx   |  3 +-
 .../src/create-routes/create-routes.spec.tsx  |  1 -
 .../src/create-routes/create-routes.ts        |  2 +-
 .../web-router/src/history/history.spec.tsx   |  1 -
 .../web-router/src/location/location.spec.tsx |  1 -
 .../src/router-link/router-link.spec.tsx      |  3 +-
 .../src/router-link/router-link.tsx           |  2 +-
 .../web-router/src/router/router.spec.tsx     |  3 +-
 packages/web-router/src/router/router.tsx     |  1 -
 .../src/use-history/use-history.spec.tsx      |  3 +-
 .../src/use-location/use-location.spec.tsx    |  3 +-
 .../src/use-match/use-match.spec.tsx          |  3 +-
 .../src/use-params/use-params.spec.tsx        |  3 +-
 packages/web-router/src/utils/utils.spec.tsx  |  1 -
 templates/browser/src/index.tsx               |  2 +-
 templates/browser/tsconfig.json               |  5 +--
 templates/desktop/src/app.tsx                 |  2 +-
 templates/desktop/src/index.tsx               |  1 -
 templates/desktop/tsconfig.json               |  5 +--
 templates/native/src/components/app.tsx       |  2 +-
 templates/native/src/components/button.tsx    |  2 +-
 templates/native/src/components/card.tsx      |  2 +-
 templates/native/src/components/contacts.tsx  |  2 +-
 templates/native/src/components/home.tsx      |  2 +-
 templates/native/src/components/settings.tsx  |  2 +-
 templates/native/tsconfig.json                |  5 +--
 templates/server/backend/bootstrap.tsx        |  1 -
 templates/server/contract/index.ts            |  4 ++
 templates/server/frontend/api/index.ts        | 10 +----
 templates/server/frontend/bootstrap.tsx       |  5 +--
 templates/server/frontend/components/app.tsx  |  5 +--
 .../server/frontend/components/invoices.tsx   |  2 +-
 .../server/frontend/components/operations.tsx |  2 +-
 templates/server/frontend/components/page.tsx |  2 +-
 .../server/frontend/components/products.tsx   |  2 +-
 templates/server/frontend/components/ui.tsx   |  2 +-
 templates/server/frontend/hooks/index.ts      |  8 ++--
 templates/server/tsconfig.json                |  5 +--
 tsconfig.json                                 |  5 +--
 153 files changed, 235 insertions(+), 266 deletions(-)
 create mode 100644 packages/core/src/jsx-runtime.ts

diff --git a/README.md b/README.md
index 29856e39..ca772d45 100644
--- a/README.md
+++ b/README.md
@@ -103,7 +103,7 @@ This project was written in my free time as a hobby. I challenged myself: can I
 ## Usage
 
 ```tsx
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 const App = component(() => {
diff --git a/examples/1k-components/index.tsx b/examples/1k-components/index.tsx
index 21d16c38..fdb17f52 100644
--- a/examples/1k-components/index.tsx
+++ b/examples/1k-components/index.tsx
@@ -1,6 +1,6 @@
 import { interpolateViridis } from 'd3-scale-chromatic';
 
-import { h, component, useState, useEffect, useMemo, useUpdate, Flag, TagVirtualNode } from '@dark-engine/core';
+import { component, useState, useEffect, useMemo, useUpdate, Flag, TagVirtualNode } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 const Demo = component(() => {
diff --git a/examples/animated-grid/index.tsx b/examples/animated-grid/index.tsx
index d7bed619..251253a9 100644
--- a/examples/animated-grid/index.tsx
+++ b/examples/animated-grid/index.tsx
@@ -4,8 +4,6 @@ import {
   type Ref,
   type Component,
   type StandardComponentProps,
-  h,
-  Fragment,
   component,
   useEffect,
   useLayoutEffect,
diff --git a/examples/concurrent-tabs/index.tsx b/examples/concurrent-tabs/index.tsx
index 57f03013..8b2ee401 100644
--- a/examples/concurrent-tabs/index.tsx
+++ b/examples/concurrent-tabs/index.tsx
@@ -1,4 +1,4 @@
-import { h, type DarkElement, Fragment, component, memo, useState, useTransition } from '@dark-engine/core';
+import { type DarkElement, component, memo, useState, useTransition } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 const AboutTab = component(() => {
diff --git a/examples/deferred-search/index.tsx b/examples/deferred-search/index.tsx
index d7d20035..480a01c9 100644
--- a/examples/deferred-search/index.tsx
+++ b/examples/deferred-search/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState, useMemo, useDeferredValue } from '@dark-engine/core';
+import { component, useState, useMemo, useDeferredValue } from '@dark-engine/core';
 import { type DarkJSX, type SyntheticEvent, createRoot } from '@dark-engine/platform-browser';
 import { styled } from '@dark-engine/styled';
 
diff --git a/examples/desktop/src/app.tsx b/examples/desktop/src/app.tsx
index 0470af94..045425be 100644
--- a/examples/desktop/src/app.tsx
+++ b/examples/desktop/src/app.tsx
@@ -1,5 +1,5 @@
 import { QIcon, Direction } from '@nodegui/nodegui';
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import {
   type PushButtonSignals,
   Window,
diff --git a/examples/desktop/src/index.tsx b/examples/desktop/src/index.tsx
index c58cfd27..b6731a75 100644
--- a/examples/desktop/src/index.tsx
+++ b/examples/desktop/src/index.tsx
@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { render } from '@dark-engine/platform-desktop';
 
 import App from './app';
diff --git a/examples/hmr-web/app.tsx b/examples/hmr-web/app.tsx
index 81f0815a..5c839bc9 100644
--- a/examples/hmr-web/app.tsx
+++ b/examples/hmr-web/app.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { Counter } from './counter';
 
diff --git a/examples/hmr-web/counter.tsx b/examples/hmr-web/counter.tsx
index 1d806308..444de89c 100644
--- a/examples/hmr-web/counter.tsx
+++ b/examples/hmr-web/counter.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 
 const Counter = component(() => {
   const [count, setCount] = useState(0);
diff --git a/examples/hmr-web/index.tsx b/examples/hmr-web/index.tsx
index 572f01f1..03de0b25 100644
--- a/examples/hmr-web/index.tsx
+++ b/examples/hmr-web/index.tsx
@@ -1,4 +1,4 @@
-import { h, hot } from '@dark-engine/core';
+import { hot } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 import { App } from './app';
diff --git a/examples/html-inputs.tsx b/examples/html-inputs.tsx
index 1201a437..3d173fbf 100644
--- a/examples/html-inputs.tsx
+++ b/examples/html-inputs.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 const App = component(() => {
@@ -49,7 +49,7 @@ const App = component(() => {
       <hr />
       <div>
         <div>readonly input</div>
-        <input value='hello' readOnly />
+        <input value='hello' readonly />
       </div>
       <hr />
       <div>
diff --git a/examples/nativescript/src/components/app.tsx b/examples/nativescript/src/components/app.tsx
index beb68503..3ecf3027 100644
--- a/examples/nativescript/src/components/app.tsx
+++ b/examples/nativescript/src/components/app.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, Text } from '@dark-engine/platform-native';
 import { NavigationContainer, TabNavigator } from '@dark-engine/native-navigation';
 
diff --git a/examples/nativescript/src/components/button.tsx b/examples/nativescript/src/components/button.tsx
index 50f3468c..fb5ad99c 100644
--- a/examples/nativescript/src/components/button.tsx
+++ b/examples/nativescript/src/components/button.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { TouchableOpacity, Text } from '@dark-engine/platform-native';
 
 type ButtonProps = {
diff --git a/examples/nativescript/src/components/card.tsx b/examples/nativescript/src/components/card.tsx
index 7494a89d..8e932b8e 100644
--- a/examples/nativescript/src/components/card.tsx
+++ b/examples/nativescript/src/components/card.tsx
@@ -1,4 +1,4 @@
-import { h, component, useAtom } from '@dark-engine/core';
+import { component, useAtom } from '@dark-engine/core';
 import { View, Text } from '@dark-engine/platform-native';
 
 import { Button } from './button';
diff --git a/examples/nativescript/src/components/contacts.tsx b/examples/nativescript/src/components/contacts.tsx
index 11d825c5..808d2814 100644
--- a/examples/nativescript/src/components/contacts.tsx
+++ b/examples/nativescript/src/components/contacts.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { ListView, StackLayout, View, Text } from '@dark-engine/platform-native';
 
 const contacts = Array(1000)
diff --git a/examples/nativescript/src/components/home.tsx b/examples/nativescript/src/components/home.tsx
index 00732a05..c7a2bcfa 100644
--- a/examples/nativescript/src/components/home.tsx
+++ b/examples/nativescript/src/components/home.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, ScrollView } from '@dark-engine/platform-native';
 
 import { Card } from './card';
diff --git a/examples/nativescript/src/components/settings.tsx b/examples/nativescript/src/components/settings.tsx
index e599e53a..7a6ef874 100644
--- a/examples/nativescript/src/components/settings.tsx
+++ b/examples/nativescript/src/components/settings.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, Text, Switch } from '@dark-engine/platform-native';
 
 const features = Array(4)
diff --git a/examples/nativescript/tsconfig.json b/examples/nativescript/tsconfig.json
index ef47749f..6c053c80 100644
--- a/examples/nativescript/tsconfig.json
+++ b/examples/nativescript/tsconfig.json
@@ -13,9 +13,8 @@
       "ES7",
       "dom"
     ],
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "baseUrl": ".",
     "paths": {
       "@nativescript/core": [
@@ -24,6 +23,9 @@
       "@dark-engine/core": [
         "../../packages/core/src/index"
       ],
+      "@dark-engine/core/*": [
+        "../../packages/core/src/*"
+      ],
       "@dark-engine/platform-native": [
         "../../packages/platform-native/src/index"
       ],
diff --git a/examples/render-props.tsx b/examples/render-props.tsx
index 06d41b7b..bdc7840f 100644
--- a/examples/render-props.tsx
+++ b/examples/render-props.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState, useEffect, type DarkElement } from '@dark-engine/core';
+import { component, useState, useEffect, type DarkElement } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 type TimerProps = {
diff --git a/examples/router/about.tsx b/examples/router/about.tsx
index 2256dd38..d954d1e0 100644
--- a/examples/router/about.tsx
+++ b/examples/router/about.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 const About = component(() => {
   return (
diff --git a/examples/router/contacts.tsx b/examples/router/contacts.tsx
index 93d1af09..70cafa61 100644
--- a/examples/router/contacts.tsx
+++ b/examples/router/contacts.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 const Contacts = component(() => {
   return (
diff --git a/examples/router/home.tsx b/examples/router/home.tsx
index 80580f57..172de2cd 100644
--- a/examples/router/home.tsx
+++ b/examples/router/home.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 
 const Home = component<{ slot: DarkElement }>(({ slot }) => {
   return (
diff --git a/examples/router/index.tsx b/examples/router/index.tsx
index e66d32bd..c794d89d 100644
--- a/examples/router/index.tsx
+++ b/examples/router/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, lazy, Suspense, type DarkElement } from '@dark-engine/core';
+import { component, lazy, Suspense, type DarkElement } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { type Routes, Router, RouterLink, useLocation } from '@dark-engine/web-router';
 import { createGlobalStyle, keyframes } from '@dark-engine/styled';
diff --git a/examples/server-side-rendering/backend/bootstrap.tsx b/examples/server-side-rendering/backend/bootstrap.tsx
index 53274069..0f4572be 100644
--- a/examples/server-side-rendering/backend/bootstrap.tsx
+++ b/examples/server-side-rendering/backend/bootstrap.tsx
@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { renderToStream } from '@dark-engine/platform-server';
 import { ServerStyleSheet } from '@dark-engine/styled/server';
 
diff --git a/examples/server-side-rendering/backend/tsconfig.json b/examples/server-side-rendering/backend/tsconfig.json
index c0fab46f..969c189b 100644
--- a/examples/server-side-rendering/backend/tsconfig.json
+++ b/examples/server-side-rendering/backend/tsconfig.json
@@ -13,6 +13,9 @@
       "@dark-engine/core": [
         "../../../packages/core/src/index"
       ],
+      "@dark-engine/core/*": [
+        "../../../packages/core/src/*"
+      ],
       "@dark-engine/platform-browser": [
         "../../../packages/platform-browser/src/index"
       ],
diff --git a/examples/server-side-rendering/frontend/components/app.tsx b/examples/server-side-rendering/frontend/components/app.tsx
index 271efcf8..c5c1aefb 100644
--- a/examples/server-side-rendering/frontend/components/app.tsx
+++ b/examples/server-side-rendering/frontend/components/app.tsx
@@ -1,4 +1,4 @@
-import { h, component, Fragment, Suspense, lazy, useMemo, useEffect } from '@dark-engine/core';
+import { component, Suspense, lazy, useMemo, useEffect } from '@dark-engine/core';
 import { type Routes, Router, RouterLink } from '@dark-engine/web-router';
 import { DataClient, DataClientProvider, InMemoryCache } from '@dark-engine/data';
 
diff --git a/examples/server-side-rendering/frontend/components/invoices.tsx b/examples/server-side-rendering/frontend/components/invoices.tsx
index 4328f474..a91ccfa6 100644
--- a/examples/server-side-rendering/frontend/components/invoices.tsx
+++ b/examples/server-side-rendering/frontend/components/invoices.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { AnimationFade } from './ui';
 
diff --git a/examples/server-side-rendering/frontend/components/operations.tsx b/examples/server-side-rendering/frontend/components/operations.tsx
index 8be32725..067b4a92 100644
--- a/examples/server-side-rendering/frontend/components/operations.tsx
+++ b/examples/server-side-rendering/frontend/components/operations.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { AnimationFade } from './ui';
 
diff --git a/examples/server-side-rendering/frontend/components/page.tsx b/examples/server-side-rendering/frontend/components/page.tsx
index 3d7b75ca..74f9cd14 100644
--- a/examples/server-side-rendering/frontend/components/page.tsx
+++ b/examples/server-side-rendering/frontend/components/page.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 
 type PageProps = {
   title: string;
diff --git a/examples/server-side-rendering/frontend/components/product-add.tsx b/examples/server-side-rendering/frontend/components/product-add.tsx
index 9ce47e71..91f5e120 100644
--- a/examples/server-side-rendering/frontend/components/product-add.tsx
+++ b/examples/server-side-rendering/frontend/components/product-add.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { useMatch, useHistory } from '@dark-engine/web-router';
 
 import { type Product } from '../../contract';
diff --git a/examples/server-side-rendering/frontend/components/product-analytics.tsx b/examples/server-side-rendering/frontend/components/product-analytics.tsx
index f8c6d13a..e1291099 100644
--- a/examples/server-side-rendering/frontend/components/product-analytics.tsx
+++ b/examples/server-side-rendering/frontend/components/product-analytics.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { AnimationFade } from './ui';
 
diff --git a/examples/server-side-rendering/frontend/components/product-balance.tsx b/examples/server-side-rendering/frontend/components/product-balance.tsx
index 308f4a8a..3f7d0c1c 100644
--- a/examples/server-side-rendering/frontend/components/product-balance.tsx
+++ b/examples/server-side-rendering/frontend/components/product-balance.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { AnimationFade } from './ui';
 
diff --git a/examples/server-side-rendering/frontend/components/product-card.tsx b/examples/server-side-rendering/frontend/components/product-card.tsx
index e65f0283..c676447c 100644
--- a/examples/server-side-rendering/frontend/components/product-card.tsx
+++ b/examples/server-side-rendering/frontend/components/product-card.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { RouterLink, useMatch, useParams } from '@dark-engine/web-router';
 
 import { useProduct } from '../hooks';
diff --git a/examples/server-side-rendering/frontend/components/product-edit.tsx b/examples/server-side-rendering/frontend/components/product-edit.tsx
index ff1c1dd2..ae1153c4 100644
--- a/examples/server-side-rendering/frontend/components/product-edit.tsx
+++ b/examples/server-side-rendering/frontend/components/product-edit.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { useMatch, useHistory, useParams } from '@dark-engine/web-router';
 
 import { type Product } from '../../contract';
diff --git a/examples/server-side-rendering/frontend/components/product-form.tsx b/examples/server-side-rendering/frontend/components/product-form.tsx
index 4a4db0b3..a7ec0073 100644
--- a/examples/server-side-rendering/frontend/components/product-form.tsx
+++ b/examples/server-side-rendering/frontend/components/product-form.tsx
@@ -1,4 +1,4 @@
-import { h, component, useRef, useEffect } from '@dark-engine/core';
+import { component, useRef, useEffect } from '@dark-engine/core';
 import { type SyntheticEvent } from '@dark-engine/platform-browser';
 
 import { type Product } from '../../contract';
diff --git a/examples/server-side-rendering/frontend/components/product-list.tsx b/examples/server-side-rendering/frontend/components/product-list.tsx
index a0daaa15..bde242f4 100644
--- a/examples/server-side-rendering/frontend/components/product-list.tsx
+++ b/examples/server-side-rendering/frontend/components/product-list.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { RouterLink, useMatch, useLocation } from '@dark-engine/web-router';
 import { styled } from '@dark-engine/styled';
 
diff --git a/examples/server-side-rendering/frontend/components/product-remove.tsx b/examples/server-side-rendering/frontend/components/product-remove.tsx
index 37ce5660..53634582 100644
--- a/examples/server-side-rendering/frontend/components/product-remove.tsx
+++ b/examples/server-side-rendering/frontend/components/product-remove.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { useMatch, useHistory, useParams } from '@dark-engine/web-router';
 
 import { useProduct, useRemoveProductMutation } from '../hooks';
diff --git a/examples/server-side-rendering/frontend/components/products.tsx b/examples/server-side-rendering/frontend/components/products.tsx
index 3a0a8e00..e538c287 100644
--- a/examples/server-side-rendering/frontend/components/products.tsx
+++ b/examples/server-side-rendering/frontend/components/products.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { RouterLink, useMatch } from '@dark-engine/web-router';
 
 import { AnimationFade, Menu, Sticky } from './ui';
diff --git a/examples/server-side-rendering/frontend/components/ui.tsx b/examples/server-side-rendering/frontend/components/ui.tsx
index 06fab35d..209b0724 100644
--- a/examples/server-side-rendering/frontend/components/ui.tsx
+++ b/examples/server-side-rendering/frontend/components/ui.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { createGlobalStyle, styled, keyframes, css } from '@dark-engine/styled';
 import { type DarkJSX } from '@dark-engine/platform-browser';
 
diff --git a/examples/server-side-rendering/frontend/tsconfig.json b/examples/server-side-rendering/frontend/tsconfig.json
index 03b70c6f..56dee523 100644
--- a/examples/server-side-rendering/frontend/tsconfig.json
+++ b/examples/server-side-rendering/frontend/tsconfig.json
@@ -13,6 +13,9 @@
       "@dark-engine/core": [
         "../../../packages/core/src/index"
       ],
+      "@dark-engine/core/*": [
+        "../../../packages/core/src/*"
+      ],
       "@dark-engine/platform-browser": [
         "../../../packages/platform-browser/src/index"
       ],
diff --git a/examples/server-side-rendering/package.json b/examples/server-side-rendering/package.json
index 11eac490..2afe10ba 100644
--- a/examples/server-side-rendering/package.json
+++ b/examples/server-side-rendering/package.json
@@ -28,13 +28,13 @@
     "workbox-webpack-plugin": "^7.0.0"
   },
   "_moduleAliases": {
-    "@dark-engine/core": "../../packages/core/src/index",
-    "@dark-engine/platform-browser": "../../packages/platform-browser/src/index",
-    "@dark-engine/platform-server": "../../packages/platform-server/src/index",
-    "@dark-engine/web-router": "../../packages/web-router/src/index",
-    "@dark-engine/animations": "../../packages/animations/src/index",
-    "@dark-engine/styled": "../../packages/styled/src/index",
+    "@dark-engine/core": "../../packages/core/src",
+    "@dark-engine/platform-browser": "../../packages/platform-browser/src",
+    "@dark-engine/platform-server": "../../packages/platform-server/src",
+    "@dark-engine/web-router": "../../packages/web-router/src",
+    "@dark-engine/animations": "../../packages/animations/src",
+    "@dark-engine/styled": "../../packages/styled/src",
     "@dark-engine/styled/server": "../../packages/styled/src/server",
-    "@dark-engine/data": "../../packages/data/src/index"
+    "@dark-engine/data": "../../packages/data/src"
   }
 }
diff --git a/examples/server-side-rendering/tsconfig.json b/examples/server-side-rendering/tsconfig.json
index 8c507eea..e136b93c 100644
--- a/examples/server-side-rendering/tsconfig.json
+++ b/examples/server-side-rendering/tsconfig.json
@@ -4,9 +4,8 @@
     "noImplicitAny": false,
     "removeComments": true,
     "esModuleInterop": true,
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "typeRoots": ["node_modules/@types"]
   }
 }
\ No newline at end of file
diff --git a/examples/sierpinski-triangle/index.tsx b/examples/sierpinski-triangle/index.tsx
index f829b418..20a80ea0 100644
--- a/examples/sierpinski-triangle/index.tsx
+++ b/examples/sierpinski-triangle/index.tsx
@@ -1,14 +1,4 @@
-import {
-  h,
-  Text,
-  component,
-  memo,
-  useState,
-  useEffect,
-  Fragment,
-  DarkElement,
-  startTransition,
-} from '@dark-engine/core';
+import { Text, component, memo, useState, useEffect, DarkElement, startTransition } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { useStyle } from '@dark-engine/styled';
 
diff --git a/examples/spring-draggable-list/index.tsx b/examples/spring-draggable-list/index.tsx
index 77fa8542..b2ad7690 100644
--- a/examples/spring-draggable-list/index.tsx
+++ b/examples/spring-draggable-list/index.tsx
@@ -1,4 +1,4 @@
-import { h, component, useMemo, useLayoutEffect } from '@dark-engine/core';
+import { component, useMemo, useLayoutEffect } from '@dark-engine/core';
 import { createRoot, type SyntheticEvent } from '@dark-engine/platform-browser';
 import {
   type SpringValue,
diff --git a/examples/spring-masonry-grid/index.tsx b/examples/spring-masonry-grid/index.tsx
index 5632bf02..1ebeb38b 100644
--- a/examples/spring-masonry-grid/index.tsx
+++ b/examples/spring-masonry-grid/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useEffect, useLayoutEffect, useState, useMemo, useRef } from '@dark-engine/core';
+import { component, useEffect, useLayoutEffect, useState, useMemo, useRef } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { SpringValue, Animated, useTransition } from '@dark-engine/animations';
 
diff --git a/examples/spring-menu/index.tsx b/examples/spring-menu/index.tsx
index 1d7a4973..76b0f18c 100644
--- a/examples/spring-menu/index.tsx
+++ b/examples/spring-menu/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { type SpringValue, Animated, useTransition, useSpring, useChain, preset } from '@dark-engine/animations';
 
diff --git a/examples/spring-slider/index.tsx b/examples/spring-slider/index.tsx
index e7321910..8d8a6bb1 100644
--- a/examples/spring-slider/index.tsx
+++ b/examples/spring-slider/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { type DarkJSX, createRoot } from '@dark-engine/platform-browser';
 import { styled } from '@dark-engine/styled';
 import { SpringValue, Animated, useTransition } from '@dark-engine/animations';
diff --git a/examples/spring-snake/index.tsx b/examples/spring-snake/index.tsx
index fe9efac7..e56c44a4 100644
--- a/examples/spring-snake/index.tsx
+++ b/examples/spring-snake/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useEffect, useState } from '@dark-engine/core';
+import { component, useEffect, useState } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { styled } from '@dark-engine/styled';
 import { type SpringValue, Animated, useTrail, preset } from '@dark-engine/animations';
diff --git a/examples/spring-toast/index.tsx b/examples/spring-toast/index.tsx
index 55f73ac1..f6a8d0b8 100644
--- a/examples/spring-toast/index.tsx
+++ b/examples/spring-toast/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { styled } from '@dark-engine/styled';
 import { type SpringValue, Animated, useSpring } from '@dark-engine/animations';
diff --git a/examples/svg.tsx b/examples/svg.tsx
index 43fed7ae..cd8ea053 100644
--- a/examples/svg.tsx
+++ b/examples/svg.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { styled } from '@dark-engine/styled';
 
diff --git a/examples/theme-context/index.tsx b/examples/theme-context/index.tsx
index b7bb340a..8e019736 100644
--- a/examples/theme-context/index.tsx
+++ b/examples/theme-context/index.tsx
@@ -1,7 +1,5 @@
 import {
   type DarkElement,
-  h,
-  Fragment,
   component,
   createContext,
   useContext,
diff --git a/packages/animations/src/animated/animated.spec.tsx b/packages/animations/src/animated/animated.spec.tsx
index 683ec0aa..0bba347b 100644
--- a/packages/animations/src/animated/animated.spec.tsx
+++ b/packages/animations/src/animated/animated.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { dom, createBrowserEnv, replacer } from '@test-utils';
 
 import { type SpringApi } from '../use-springs';
diff --git a/packages/animations/src/controller/controller.spec.ts b/packages/animations/src/controller/controller.spec.ts
index 31093bb6..3f268be2 100644
--- a/packages/animations/src/controller/controller.spec.ts
+++ b/packages/animations/src/controller/controller.spec.ts
@@ -91,7 +91,7 @@ describe('@animations/controller', () => {
   });
 
   test('can animate the complex value', () => {
-    type SpringProps = 'x' | 'y' | 'x';
+    type SpringProps = 'x' | 'y' | 'z';
     const ctrl = setup<SpringProps>();
     const configurator: ConfiguratorFn<SpringProps> = () => ({
       from: { x: -100, y: 0, z: 0 },
diff --git a/packages/animations/src/use-chain/use-chain.spec.tsx b/packages/animations/src/use-chain/use-chain.spec.tsx
index cb79826f..7650f5b2 100644
--- a/packages/animations/src/use-chain/use-chain.spec.tsx
+++ b/packages/animations/src/use-chain/use-chain.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, Fragment, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { dom, createBrowserEnv, replacer } from '@test-utils';
 
 import { type SpringValue } from '../shared';
diff --git a/packages/animations/src/use-spring/use-spring.spec.tsx b/packages/animations/src/use-spring/use-spring.spec.tsx
index 73d426e2..4a59c2ba 100644
--- a/packages/animations/src/use-spring/use-spring.spec.tsx
+++ b/packages/animations/src/use-spring/use-spring.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { dom, createBrowserEnv } from '@test-utils';
 
 import { type SpringApi } from '../use-springs';
diff --git a/packages/animations/src/use-springs/use-springs.spec.tsx b/packages/animations/src/use-springs/use-springs.spec.tsx
index a702b663..31b9a2db 100644
--- a/packages/animations/src/use-springs/use-springs.spec.tsx
+++ b/packages/animations/src/use-springs/use-springs.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component, useState, useLayoutEffect, detectIsArray } from '@dark-engine/core';
+import { component, useState, useLayoutEffect, detectIsArray } from '@dark-engine/core';
 import { hydrateRoot } from '@dark-engine/platform-browser';
 import { dom, createBrowserEnv, createServerEnv, getSpyLength, time, replacer } from '@test-utils';
 
diff --git a/packages/animations/src/use-trail/use-trail.spec.tsx b/packages/animations/src/use-trail/use-trail.spec.tsx
index cb8650ce..bfb4f8ff 100644
--- a/packages/animations/src/use-trail/use-trail.spec.tsx
+++ b/packages/animations/src/use-trail/use-trail.spec.tsx
@@ -1,6 +1,4 @@
-/** @jsx h */
-
-import { h, component, useState, detectIsArray } from '@dark-engine/core';
+import { component, useState, detectIsArray } from '@dark-engine/core';
 import { dom, createBrowserEnv } from '@test-utils';
 
 import { type SpringValue } from '../shared';
diff --git a/packages/animations/src/use-transition/use-transition.spec.tsx b/packages/animations/src/use-transition/use-transition.spec.tsx
index ffb12ef0..91570f4c 100644
--- a/packages/animations/src/use-transition/use-transition.spec.tsx
+++ b/packages/animations/src/use-transition/use-transition.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component, useState, useLayoutEffect } from '@dark-engine/core';
+import { component, useState, useLayoutEffect } from '@dark-engine/core';
 import { hydrateRoot } from '@dark-engine/platform-browser';
 import { dom, createBrowserEnv, createServerEnv, replacer, time, getSpyLength } from '@test-utils';
 
diff --git a/packages/core/README.md b/packages/core/README.md
index db77d5d4..70ae405a 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -24,6 +24,7 @@ CDN:
 ## Table of contents
 - [API](#api)
 - [Elements](#elements)
+- [JSX](#jsx)
 - [Components](#components)
 - [Conditional rendering](#conditional-rendering)
 - [List rendering](#list-rendering)
@@ -132,13 +133,31 @@ const content = [h1({ slot: Text(`I'm the text inside the tag`) }), Comment(`I'm
 createRoot(document.getElementById('root')).render(content);
 ```
 
-#### JSX via `h`
+<a id="jsx"></a>
 
-```tsx
-import { h } from '@dark-engine/core';
+## JSX
+JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
+You can use it:
+
+### via `jsx-runtime`
+
+In your `tsconfig.json`, you must add these rows:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
+  }
+}
 ```
+The necessary functions will be automatically imported into your code.
 
-This is the function you need to enable JSX support and write in a React-like style. If you are writing in typescript you need to enable custom JSX support in `tsconfig.json`.
+If for some reason you don't want to use auto-imports, then you should use a different approach.
+
+### via `h`
+
+This is the function you need to enable JSX support. In your `tsconfig.json`:
 
 ```json
 {
@@ -150,8 +169,19 @@ This is the function you need to enable JSX support and write in a React-like st
 }
 ```
 
+In this case, you will always have to import the `h` function and the `Fragment` component yourself.
+
 ```tsx
-const content = [<h1>I'm the text inside the tag</h1>, <span>Hello</span>];
+import { h, Fragment } from '@dark-engine/core';
+```
+
+```tsx
+const content = (
+  <>
+    <h1>I'm the text inside the tag</h1>
+    <span>Hello</span>
+  </>
+);
 
 createRoot(document.getElementById('root')).render(content);
 ```
diff --git a/packages/core/package.json b/packages/core/package.json
index de567931..5fc6803f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -35,6 +35,29 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
       "types": "./dist/types/index.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./dist/esm/jsx-runtime.js",
+      "require": "./dist/cjs/jsx-runtime.js",
+      "types": "./dist/types/jsx-runtime.d.ts"
+    },
+    "./jsx-dev-runtime": {
+      "import": "./dist/esm/jsx-runtime.js",
+      "require": "./dist/cjs/jsx-runtime.js",
+      "types": "./dist/types/jsx-runtime.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/types/index.d.ts"
+      ],
+      "jsx-runtime": [
+        "./dist/types/jsx-runtime.d.ts"
+      ],
+      "jsx-dev-runtime": [
+        "./dist/types/jsx-runtime.d.ts"
+      ]
     }
   },
   "files": [
diff --git a/packages/core/src/atom/atom.spec.tsx b/packages/core/src/atom/atom.spec.tsx
index 9293c2fc..7ea3e5b1 100644
--- a/packages/core/src/atom/atom.spec.tsx
+++ b/packages/core/src/atom/atom.spec.tsx
@@ -1,8 +1,5 @@
-/** @jsx h */
 import { dom, createBrowserEnv } from '@test-utils';
 
-import { h } from '../element';
-import { Fragment } from '../fragment';
 import { component } from '../component';
 import { type WritableAtom, type ReadableAtom, atom, computed, useAtom, useComputed } from './atom';
 
diff --git a/packages/core/src/batch/batch.spec.tsx b/packages/core/src/batch/batch.spec.tsx
index 7dd25764..47394543 100644
--- a/packages/core/src/batch/batch.spec.tsx
+++ b/packages/core/src/batch/batch.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { component } from '../component';
diff --git a/packages/core/src/component/component.spec.tsx b/packages/core/src/component/component.spec.tsx
index 635b0623..b7902e61 100644
--- a/packages/core/src/component/component.spec.tsx
+++ b/packages/core/src/component/component.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { View, detectIsVirtualNode, VirtualNodeFactory } from '../view';
 import { useEffect } from '../use-effect';
 import { component, detectIsComponent, getComponentKey } from './component';
diff --git a/packages/core/src/context/context.spec.tsx b/packages/core/src/context/context.spec.tsx
index ff5a669f..fa2d5980 100644
--- a/packages/core/src/context/context.spec.tsx
+++ b/packages/core/src/context/context.spec.tsx
@@ -1,8 +1,6 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { dom } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { useState } from '../use-state';
 import { memo } from '../memo';
diff --git a/packages/core/src/element/element.ts b/packages/core/src/element/element.ts
index 793ff452..9fa632e0 100644
--- a/packages/core/src/element/element.ts
+++ b/packages/core/src/element/element.ts
@@ -1,12 +1,12 @@
-import { detectIsString, detectIsFunction } from '../utils';
 import { type TagVirtualNodeFactory, type ViewOptions, View } from '../view';
-import { type ComponentFactory } from '../component';
+import { type ComponentFactory, type Component } from '../component';
+import { detectIsString, detectIsFunction } from '../utils';
 
 function createElement(
-  element: string | Function,
+  element: string | ComponentFactory,
   props: object,
   ...slot: Array<any>
-): ComponentFactory | TagVirtualNodeFactory | null {
+): TagVirtualNodeFactory | Component | null {
   if (detectIsString(element)) {
     const options = (props || {}) as ViewOptions;
 
diff --git a/packages/core/src/emitter/emitter.spec.tsx b/packages/core/src/emitter/emitter.spec.tsx
index ce28b17d..465f03f4 100644
--- a/packages/core/src/emitter/emitter.spec.tsx
+++ b/packages/core/src/emitter/emitter.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { EventEmitter } from './emitter';
 
 type EventName = 'data';
diff --git a/packages/core/src/fragment/fragment.spec.tsx b/packages/core/src/fragment/fragment.spec.tsx
index c798fe87..e5aae8ef 100644
--- a/packages/core/src/fragment/fragment.spec.tsx
+++ b/packages/core/src/fragment/fragment.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv, dom } from '@test-utils';
 
-import { h } from '../element';
 import { component } from '../component';
 import { Fragment } from './fragment';
 
diff --git a/packages/core/src/guard/guard.spec.tsx b/packages/core/src/guard/guard.spec.tsx
index 357a6abb..c9f6abf9 100644
--- a/packages/core/src/guard/guard.spec.tsx
+++ b/packages/core/src/guard/guard.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv } from '@test-utils';
 
-import { h } from '../element';
 import { component } from '../component';
 import { Guard } from './guard';
 
diff --git a/packages/core/src/jsx-runtime.ts b/packages/core/src/jsx-runtime.ts
new file mode 100644
index 00000000..fd259484
--- /dev/null
+++ b/packages/core/src/jsx-runtime.ts
@@ -0,0 +1,40 @@
+import { detectIsString, detectIsFunction, detectIsEmpty, detectIsUndefined } from './utils';
+import { type TagVirtualNodeFactory, type ViewOptions, View } from './view';
+import { type ComponentFactory, type Component } from './component';
+import { type DarkElement, type ElementKey } from './shared';
+import { KEY_ATTR } from './constants';
+import { Fragment } from './fragment';
+
+function jsx(
+  element: string | ComponentFactory,
+  props: { children?: unknown },
+  key?: ElementKey,
+): TagVirtualNodeFactory | Component | null {
+  const { children, ...$props } = props;
+  const slot = children || !detectIsUndefined(children) ? [children as DarkElement] : [];
+
+  if (key || !detectIsEmpty(key)) {
+    $props[KEY_ATTR] = key;
+  }
+
+  if (detectIsString(element)) {
+    const options = ($props || {}) as ViewOptions;
+
+    options.as = element;
+    options.slot = slot;
+
+    return View(options);
+  }
+
+  if (detectIsFunction(element)) {
+    const options = ($props || {}) as { slot: unknown };
+
+    options.slot = slot.length === 1 ? slot[0] : slot;
+
+    return element(options);
+  }
+
+  return null;
+}
+
+export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };
diff --git a/packages/core/src/lazy/lazy.spec.tsx b/packages/core/src/lazy/lazy.spec.tsx
index e6b585a5..9f3bc909 100644
--- a/packages/core/src/lazy/lazy.spec.tsx
+++ b/packages/core/src/lazy/lazy.spec.tsx
@@ -1,6 +1,4 @@
-/** @jsx h */
 import { dom, createBrowserEnv, createServerEnv, nextTick, replacer } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { type Module, lazy } from './lazy';
 import { platform } from '../platform';
diff --git a/packages/core/src/memo/memo.spec.tsx b/packages/core/src/memo/memo.spec.tsx
index 601352cc..c595fe46 100644
--- a/packages/core/src/memo/memo.spec.tsx
+++ b/packages/core/src/memo/memo.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { component } from '../component';
diff --git a/packages/core/src/ref/ref.spec.tsx b/packages/core/src/ref/ref.spec.tsx
index c0c6f8de..eed32bd6 100644
--- a/packages/core/src/ref/ref.spec.tsx
+++ b/packages/core/src/ref/ref.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv } from '@test-utils';
 
-import { h } from '../element';
 import { component } from '../component';
 import { type MutableRef, forwardRef, useRef } from './ref';
 
diff --git a/packages/core/src/shadow/shadow.spec.tsx b/packages/core/src/shadow/shadow.spec.tsx
index cd48bc23..dd177918 100644
--- a/packages/core/src/shadow/shadow.spec.tsx
+++ b/packages/core/src/shadow/shadow.spec.tsx
@@ -1,8 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv, dom } from '@test-utils';
 
-import { h } from '../element';
-import { Fragment } from '../fragment';
 import { component } from '../component';
 import { Shadow } from './shadow';
 
diff --git a/packages/core/src/start-transition/start-transition.spec.tsx b/packages/core/src/start-transition/start-transition.spec.tsx
index 671bb572..ef06fb05 100644
--- a/packages/core/src/start-transition/start-transition.spec.tsx
+++ b/packages/core/src/start-transition/start-transition.spec.tsx
@@ -1,8 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv, dom, replacer, sleep } from '@test-utils';
 
-import { h } from '../element';
-import { Fragment } from '../fragment';
 import { component } from '../component';
 import { useState } from '../use-state';
 import { memo } from '../memo';
diff --git a/packages/core/src/suspense/suspense.spec.tsx b/packages/core/src/suspense/suspense.spec.tsx
index d1372ed6..e77f089a 100644
--- a/packages/core/src/suspense/suspense.spec.tsx
+++ b/packages/core/src/suspense/suspense.spec.tsx
@@ -1,10 +1,7 @@
-/** @jsx h */
 import { dom, replacer, createBrowserEnv, nextTick } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { type Module, lazy } from '../lazy';
 import { Suspense } from './suspense';
-import { Fragment } from '../fragment';
 
 let { host, render } = createBrowserEnv();
 
diff --git a/packages/core/src/unmount/unmount.spec.tsx b/packages/core/src/unmount/unmount.spec.tsx
index f67ef5cf..19d1e407 100644
--- a/packages/core/src/unmount/unmount.spec.tsx
+++ b/packages/core/src/unmount/unmount.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { createRoot } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useInsertionEffect } from '../use-insertion-effect';
 import { useLayoutEffect } from '../use-layout-effect';
diff --git a/packages/core/src/use-callback/use-callback.spec.tsx b/packages/core/src/use-callback/use-callback.spec.tsx
index 7598a0c7..926708de 100644
--- a/packages/core/src/use-callback/use-callback.spec.tsx
+++ b/packages/core/src/use-callback/use-callback.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { component } from '../component';
diff --git a/packages/core/src/use-deferred-value/use-deferred-value.spec.tsx b/packages/core/src/use-deferred-value/use-deferred-value.spec.tsx
index 40d9d0b1..dbe74d38 100644
--- a/packages/core/src/use-deferred-value/use-deferred-value.spec.tsx
+++ b/packages/core/src/use-deferred-value/use-deferred-value.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { createBrowserEnv } from '@test-utils';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useState } from '../use-state';
 import { useDeferredValue } from './use-deferred-value';
diff --git a/packages/core/src/use-effect/use-effect.spec.tsx b/packages/core/src/use-effect/use-effect.spec.tsx
index f62c3545..48463402 100644
--- a/packages/core/src/use-effect/use-effect.spec.tsx
+++ b/packages/core/src/use-effect/use-effect.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useUpdate } from '../use-update';
 import { useEffect } from './use-effect';
diff --git a/packages/core/src/use-error/use-error.spec.tsx b/packages/core/src/use-error/use-error.spec.tsx
index ec095d0f..6669aad5 100644
--- a/packages/core/src/use-error/use-error.spec.tsx
+++ b/packages/core/src/use-error/use-error.spec.tsx
@@ -1,8 +1,6 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { dom } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { useError } from './use-error';
 
diff --git a/packages/core/src/use-id/use-id.spec.tsx b/packages/core/src/use-id/use-id.spec.tsx
index 4e695307..f3414844 100644
--- a/packages/core/src/use-id/use-id.spec.tsx
+++ b/packages/core/src/use-id/use-id.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { component } from '../component';
diff --git a/packages/core/src/use-imperative-handle/use-imperative-handle.spec.tsx b/packages/core/src/use-imperative-handle/use-imperative-handle.spec.tsx
index 07bb8d7c..2056514b 100644
--- a/packages/core/src/use-imperative-handle/use-imperative-handle.spec.tsx
+++ b/packages/core/src/use-imperative-handle/use-imperative-handle.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { type MutableRef, forwardRef, useRef } from '../ref';
 import { useLayoutEffect } from '../use-layout-effect';
diff --git a/packages/core/src/use-insertion-effect/use-insertion-effect.spec.tsx b/packages/core/src/use-insertion-effect/use-insertion-effect.spec.tsx
index 97bbdfc4..b2938d48 100644
--- a/packages/core/src/use-insertion-effect/use-insertion-effect.spec.tsx
+++ b/packages/core/src/use-insertion-effect/use-insertion-effect.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useUpdate } from '../use-update';
 import { useLayoutEffect } from '../use-layout-effect';
diff --git a/packages/core/src/use-layout-effect/use-layout-effect.spec.tsx b/packages/core/src/use-layout-effect/use-layout-effect.spec.tsx
index 6371c1c6..750475e7 100644
--- a/packages/core/src/use-layout-effect/use-layout-effect.spec.tsx
+++ b/packages/core/src/use-layout-effect/use-layout-effect.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useUpdate } from '../use-update';
 import { useLayoutEffect } from './use-layout-effect';
diff --git a/packages/core/src/use-memo/use-memo.spec.tsx b/packages/core/src/use-memo/use-memo.spec.tsx
index c5d8c084..106abc56 100644
--- a/packages/core/src/use-memo/use-memo.spec.tsx
+++ b/packages/core/src/use-memo/use-memo.spec.tsx
@@ -1,8 +1,6 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { dom } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { useMemo } from './use-memo';
 import { DarkElement } from '../shared';
diff --git a/packages/core/src/use-reducer/use-reducer.spec.tsx b/packages/core/src/use-reducer/use-reducer.spec.tsx
index be717daf..24a7341d 100644
--- a/packages/core/src/use-reducer/use-reducer.spec.tsx
+++ b/packages/core/src/use-reducer/use-reducer.spec.tsx
@@ -1,8 +1,6 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { dom } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component';
 import { useReducer } from './use-reducer';
 
diff --git a/packages/core/src/use-state/use-state.spec.tsx b/packages/core/src/use-state/use-state.spec.tsx
index ca3012ed..b5b102ba 100644
--- a/packages/core/src/use-state/use-state.spec.tsx
+++ b/packages/core/src/use-state/use-state.spec.tsx
@@ -1,8 +1,6 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { dom } from '@test-utils';
-import { h } from '../element';
 import { component } from '../component/component';
 import { useState } from './use-state';
 
diff --git a/packages/core/src/use-sync-external-store/use-sync-external-store.spec.tsx b/packages/core/src/use-sync-external-store/use-sync-external-store.spec.tsx
index 3d27bf1d..6b2d0185 100644
--- a/packages/core/src/use-sync-external-store/use-sync-external-store.spec.tsx
+++ b/packages/core/src/use-sync-external-store/use-sync-external-store.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
 import { component } from '../component';
diff --git a/packages/core/src/use-update/use-update.spec.tsx b/packages/core/src/use-update/use-update.spec.tsx
index cafef2a8..55f03d6b 100644
--- a/packages/core/src/use-update/use-update.spec.tsx
+++ b/packages/core/src/use-update/use-update.spec.tsx
@@ -1,7 +1,5 @@
-/** @jsx h */
 import { render } from '@dark-engine/platform-browser';
 
-import { h } from '../element';
 import { component } from '../component';
 import { useUpdate } from './use-update';
 
diff --git a/packages/core/src/view/view.spec.tsx b/packages/core/src/view/view.spec.tsx
index 688da279..681e6199 100644
--- a/packages/core/src/view/view.spec.tsx
+++ b/packages/core/src/view/view.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { View, Text, Comment, TagVirtualNode, TextVirtualNode, CommentVirtualNode } from './view';
 
 describe('@core/view', () => {
diff --git a/packages/data/src/cache/cache.spec.tsx b/packages/data/src/cache/cache.spec.tsx
index 74c03250..d0fb1888 100644
--- a/packages/data/src/cache/cache.spec.tsx
+++ b/packages/data/src/cache/cache.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import * as core from '@dark-engine/core';
 
 import { InMemoryCache, type CacheEventData, type MonitorEventData } from '../cache';
diff --git a/packages/data/src/client/client.spec.tsx b/packages/data/src/client/client.spec.tsx
index 1a891c78..69d4e8e4 100644
--- a/packages/data/src/client/client.spec.tsx
+++ b/packages/data/src/client/client.spec.tsx
@@ -1,6 +1,5 @@
-/** @jsx h */
 import * as core from '@dark-engine/core';
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { createBrowserEnv } from '@test-utils';
 
 import { InMemoryCache, type MonitorEventData } from '../cache';
diff --git a/packages/data/src/use-lazy-query/use-lazy-query.spec.tsx b/packages/data/src/use-lazy-query/use-lazy-query.spec.tsx
index 7b6ce1f6..a2255ce2 100644
--- a/packages/data/src/use-lazy-query/use-lazy-query.spec.tsx
+++ b/packages/data/src/use-lazy-query/use-lazy-query.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { createBrowserEnv, sleep, waitUntilEffectsStart } from '@test-utils';
 
 import { InMemoryCache } from '../cache';
diff --git a/packages/data/src/use-mutation/use-mutation.spec.tsx b/packages/data/src/use-mutation/use-mutation.spec.tsx
index 9f917798..92e3d13e 100644
--- a/packages/data/src/use-mutation/use-mutation.spec.tsx
+++ b/packages/data/src/use-mutation/use-mutation.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { createBrowserEnv, sleep, waitUntilEffectsStart } from '@test-utils';
 
 import { InMemoryCache } from '../cache';
diff --git a/packages/data/src/use-query/use-query.spec.tsx b/packages/data/src/use-query/use-query.spec.tsx
index 5e0c733b..ef9c826f 100644
--- a/packages/data/src/use-query/use-query.spec.tsx
+++ b/packages/data/src/use-query/use-query.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, h, Fragment, component, Suspense, useState, STATE_SCRIPT_TYPE } from '@dark-engine/core';
+import { type DarkElement, component, Suspense, useState, STATE_SCRIPT_TYPE } from '@dark-engine/core';
 import {
   createBrowserEnv,
   createBrowserHydrateEnv,
diff --git a/packages/native-navigation/src/navigation-container/navigation-container.tsx b/packages/native-navigation/src/navigation-container/navigation-container.tsx
index 78c5d44c..465023da 100644
--- a/packages/native-navigation/src/navigation-container/navigation-container.tsx
+++ b/packages/native-navigation/src/navigation-container/navigation-container.tsx
@@ -1,7 +1,6 @@
 import { CoreTypes } from '@nativescript/core';
 import {
   type DarkElement,
-  h,
   component,
   forwardRef,
   useRef,
diff --git a/packages/native-navigation/src/stack-navigator/stack-navigator.tsx b/packages/native-navigation/src/stack-navigator/stack-navigator.tsx
index 0d38d580..03914fb0 100644
--- a/packages/native-navigation/src/stack-navigator/stack-navigator.tsx
+++ b/packages/native-navigation/src/stack-navigator/stack-navigator.tsx
@@ -4,7 +4,6 @@ import {
   type ComponentFactory,
   type StandardComponentProps,
   type DarkElement,
-  h,
   component,
   createContext,
   detectIsFunction,
diff --git a/packages/native-navigation/src/tab-navigator/tab-navigator.tsx b/packages/native-navigation/src/tab-navigator/tab-navigator.tsx
index 4ca5b382..ff0e0d9d 100644
--- a/packages/native-navigation/src/tab-navigator/tab-navigator.tsx
+++ b/packages/native-navigation/src/tab-navigator/tab-navigator.tsx
@@ -3,7 +3,6 @@ import {
   type DarkElement,
   type Component,
   type StandardComponentProps,
-  h,
   component,
   createContext,
   useUpdate,
diff --git a/packages/platform-browser/src/create-root/create-root.spec.tsx b/packages/platform-browser/src/create-root/create-root.spec.tsx
index bea1a90f..8edaf095 100644
--- a/packages/platform-browser/src/create-root/create-root.spec.tsx
+++ b/packages/platform-browser/src/create-root/create-root.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component, useInsertionEffect, useLayoutEffect, useEffect } from '@dark-engine/core';
+import { component, useInsertionEffect, useLayoutEffect, useEffect } from '@dark-engine/core';
 
 import { createRoot } from './create-root';
 
diff --git a/packages/platform-browser/src/dom/dom.spec.tsx b/packages/platform-browser/src/dom/dom.spec.tsx
index 75b49b6c..1f13277b 100644
--- a/packages/platform-browser/src/dom/dom.spec.tsx
+++ b/packages/platform-browser/src/dom/dom.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, Fragment, Text, Comment, component, useState } from '@dark-engine/core';
+import { Text, Comment, component, useState } from '@dark-engine/core';
 
 import { setInputValue, dom, createBrowserEnv, replacer } from '@test-utils';
 import { type SyntheticEvent } from '../events';
diff --git a/packages/platform-browser/src/events/events.spec.tsx b/packages/platform-browser/src/events/events.spec.tsx
index d2226ffa..ece7843d 100644
--- a/packages/platform-browser/src/events/events.spec.tsx
+++ b/packages/platform-browser/src/events/events.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { click, createBrowserEnv } from '@test-utils';
 import { SyntheticEvent } from './events';
diff --git a/packages/platform-browser/src/factory/factory.spec.tsx b/packages/platform-browser/src/factory/factory.spec.tsx
index 6e602f50..dfaab363 100644
--- a/packages/platform-browser/src/factory/factory.spec.tsx
+++ b/packages/platform-browser/src/factory/factory.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { detectIsVirtualNodeFactory, TagVirtualNode } from '@dark-engine/core';
 
 import { factory } from './factory';
diff --git a/packages/platform-browser/src/hydrate-root/hydrate-root.spec.tsx b/packages/platform-browser/src/hydrate-root/hydrate-root.spec.tsx
index bd22439a..de783e95 100644
--- a/packages/platform-browser/src/hydrate-root/hydrate-root.spec.tsx
+++ b/packages/platform-browser/src/hydrate-root/hydrate-root.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, Fragment, component, useInsertionEffect, useLayoutEffect, useEffect, useState } from '@dark-engine/core';
+import { component, useInsertionEffect, useLayoutEffect, useEffect, useState } from '@dark-engine/core';
 
 import { click, dom, createBrowserEnv } from '@test-utils';
 import { hydrateRoot } from './hydrate-root';
diff --git a/packages/platform-browser/src/portal/portal.spec.tsx b/packages/platform-browser/src/portal/portal.spec.tsx
index cb664863..75646af1 100644
--- a/packages/platform-browser/src/portal/portal.spec.tsx
+++ b/packages/platform-browser/src/portal/portal.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { dom, createBrowserEnv } from '@test-utils';
 import { createPortal } from './portal';
diff --git a/packages/platform-browser/src/render/render.spec.tsx b/packages/platform-browser/src/render/render.spec.tsx
index 048eb951..c5ad8d5b 100644
--- a/packages/platform-browser/src/render/render.spec.tsx
+++ b/packages/platform-browser/src/render/render.spec.tsx
@@ -1,7 +1,4 @@
-/** @jsx h */
 import {
-  h,
-  Fragment,
   component,
   Text,
   useState,
diff --git a/packages/platform-desktop/README.md b/packages/platform-desktop/README.md
index 885435ac..5d3c3ecc 100644
--- a/packages/platform-desktop/README.md
+++ b/packages/platform-desktop/README.md
@@ -42,7 +42,7 @@ yarn add @nodegui/nodegui @dark-engine/core @dark-engine/platform-desktop
 
 ```tsx
 import { Direction } from '@nodegui/nodegui';
-import { h, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { type PushButtonSignals, Window, BoxLayout, PushButton, useEvents } from '@dark-engine/platform-desktop';
 
 const App = component(() => {
diff --git a/packages/platform-native/README.md b/packages/platform-native/README.md
index 5e3879e1..73768582 100644
--- a/packages/platform-native/README.md
+++ b/packages/platform-native/README.md
@@ -34,7 +34,7 @@ yarn add @nativescript/core @dark-engine/core @dark-engine/animations @dark-engi
 
 ## Usage
 ```tsx
-import { h, component, useState } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { FlexboxLayout, Button } from '@dark-engine/platform-native';
 
 const App = component(() => {
@@ -300,7 +300,7 @@ return (
 Dark includes additional components of type `View`, `Text`, `TouchableOpacity`, so that you can write an application in a almost similar to React Native style.
 
 ```tsx
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, Text, TouchableOpacity } from '@dark-engine/platform-native';
 
 const App = component(() => {
diff --git a/packages/platform-server/README.md b/packages/platform-server/README.md
index ea9880f9..09dbedc3 100644
--- a/packages/platform-server/README.md
+++ b/packages/platform-server/README.md
@@ -89,7 +89,7 @@ server.get('*', async (req, res) => {
 
 ```tsx
 // frontend/app.tsx
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 const Page = component(({ title, slot }) => {
   return (
@@ -112,7 +112,6 @@ export { Page, App };
 
 ```tsx
 // frontend/index.tsx
-import { h } from '@dark-engine/core';
 import { hydrateRoot } from '@dark-engine/platform-browser';
 
 import { App } from './app';
diff --git a/packages/platform-server/src/render/render.spec.tsx b/packages/platform-server/src/render/render.spec.tsx
index af6f812a..0dab1c75 100644
--- a/packages/platform-server/src/render/render.spec.tsx
+++ b/packages/platform-server/src/render/render.spec.tsx
@@ -1,15 +1,4 @@
-/** @jsx h */
-import {
-  h,
-  Fragment,
-  Text,
-  Comment,
-  component,
-  useState,
-  useInsertionEffect,
-  useLayoutEffect,
-  useEffect,
-} from '@dark-engine/core';
+import { Text, Comment, component, useState, useInsertionEffect, useLayoutEffect, useEffect } from '@dark-engine/core';
 import { dom, sleep, replacer } from '@test-utils';
 
 import { renderToString, renderToStream, convertStreamToPromise } from './render';
diff --git a/packages/styled/src/global/global.spec.tsx b/packages/styled/src/global/global.spec.tsx
index 51ccbb8c..44be4208 100644
--- a/packages/styled/src/global/global.spec.tsx
+++ b/packages/styled/src/global/global.spec.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { createBrowserEnv, replacer, wrapWithGlobalStyledTag as style } from '@test-utils';
 
 import { setupGlobal, createGlobalStyle } from '../global';
diff --git a/packages/styled/src/keyframes/keyframes.spec.tsx b/packages/styled/src/keyframes/keyframes.spec.tsx
index 3468f238..e564cbd7 100644
--- a/packages/styled/src/keyframes/keyframes.spec.tsx
+++ b/packages/styled/src/keyframes/keyframes.spec.tsx
@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { createBrowserEnv, wrapWithStyledTag as style } from '@test-utils';
 
 import { setupGlobal, styled } from '../styled';
diff --git a/packages/styled/src/server/sheet.spec.tsx b/packages/styled/src/server/sheet.spec.tsx
index 478dc22f..24a83f7d 100644
--- a/packages/styled/src/server/sheet.spec.tsx
+++ b/packages/styled/src/server/sheet.spec.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, Fragment, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { DOCTYPE } from '@dark-engine/platform-server/constants';
 import {
   createServerEnv,
diff --git a/packages/styled/src/styled/styled.spec.tsx b/packages/styled/src/styled/styled.spec.tsx
index d9e569d7..1f29fbc7 100644
--- a/packages/styled/src/styled/styled.spec.tsx
+++ b/packages/styled/src/styled/styled.spec.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, Fragment, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 import { createBrowserEnv, wrapWithStyledTag as style } from '@test-utils';
 
 import { setupGlobal, styled, css, detectIsStyled } from './styled';
diff --git a/packages/styled/src/theme/theme.spec.tsx b/packages/styled/src/theme/theme.spec.tsx
index 78a23daa..251fcb4d 100644
--- a/packages/styled/src/theme/theme.spec.tsx
+++ b/packages/styled/src/theme/theme.spec.tsx
@@ -1,4 +1,4 @@
-import { h, component, Guard } from '@dark-engine/core';
+import { component, Guard } from '@dark-engine/core';
 import {
   createBrowserEnv,
   replacer,
diff --git a/packages/styled/src/use-style/use-style.spec.tsx b/packages/styled/src/use-style/use-style.spec.tsx
index 704b93a6..3551eae1 100644
--- a/packages/styled/src/use-style/use-style.spec.tsx
+++ b/packages/styled/src/use-style/use-style.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { type CSSProperties } from '@dark-engine/platform-browser';
 
 import { createBrowserEnv, dom } from '@test-utils';
diff --git a/packages/web-router/src/create-routes/create-routes.spec.tsx b/packages/web-router/src/create-routes/create-routes.spec.tsx
index 47746f5a..79e47423 100644
--- a/packages/web-router/src/create-routes/create-routes.spec.tsx
+++ b/packages/web-router/src/create-routes/create-routes.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { component } from '@dark-engine/core';
 import { resetBrowserHistory } from '@test-utils';
 
diff --git a/packages/web-router/src/create-routes/create-routes.ts b/packages/web-router/src/create-routes/create-routes.ts
index 398b4724..4bbf9af1 100644
--- a/packages/web-router/src/create-routes/create-routes.ts
+++ b/packages/web-router/src/create-routes/create-routes.ts
@@ -149,7 +149,7 @@ function canRender() {
     if (route?.component) return route;
 
     if (process.env.NODE_ENV !== 'test') {
-      throw new Error('[web-router]: the route not found or it has no component!');
+      throw new Error('[web-router]: the route was not found or it has no component!');
     }
 
     return null;
diff --git a/packages/web-router/src/history/history.spec.tsx b/packages/web-router/src/history/history.spec.tsx
index f665e1fd..19cb31cd 100644
--- a/packages/web-router/src/history/history.spec.tsx
+++ b/packages/web-router/src/history/history.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { resetBrowserHistory } from '@test-utils';
 
 import { createRouterHistory } from './history';
diff --git a/packages/web-router/src/location/location.spec.tsx b/packages/web-router/src/location/location.spec.tsx
index ccb137b6..631697c6 100644
--- a/packages/web-router/src/location/location.spec.tsx
+++ b/packages/web-router/src/location/location.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { createRouterLocation } from './location';
 
 describe('@web-router/location', () => {
diff --git a/packages/web-router/src/router-link/router-link.spec.tsx b/packages/web-router/src/router-link/router-link.spec.tsx
index ebf3e848..0f92c0db 100644
--- a/packages/web-router/src/router-link/router-link.spec.tsx
+++ b/packages/web-router/src/router-link/router-link.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, Fragment, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { type SyntheticEvent } from '@dark-engine/platform-browser';
 
 import { createBrowserEnv, replacer, click, dom, resetBrowserHistory } from '@test-utils';
diff --git a/packages/web-router/src/router-link/router-link.tsx b/packages/web-router/src/router-link/router-link.tsx
index 918a80fd..2b85f011 100644
--- a/packages/web-router/src/router-link/router-link.tsx
+++ b/packages/web-router/src/router-link/router-link.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component, forwardRef, useMemo, useEvent, detectIsFunction } from '@dark-engine/core';
+import { type DarkElement, component, forwardRef, useMemo, useEvent, detectIsFunction } from '@dark-engine/core';
 import { type SyntheticEvent, type DarkJSX } from '@dark-engine/platform-browser';
 
 import { SLASH_MARK, ACTIVE_LINK_CLASSNAME } from '../constants';
diff --git a/packages/web-router/src/router/router.spec.tsx b/packages/web-router/src/router/router.spec.tsx
index e07961cc..702ffac7 100644
--- a/packages/web-router/src/router/router.spec.tsx
+++ b/packages/web-router/src/router/router.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, type MutableRef, h, component, useRef } from '@dark-engine/core';
+import { type DarkElement, type MutableRef, component, useRef } from '@dark-engine/core';
 
 import { createBrowserEnv, replacer, resetBrowserHistory } from '@test-utils';
 import { type Routes } from '../create-routes';
diff --git a/packages/web-router/src/router/router.tsx b/packages/web-router/src/router/router.tsx
index a639837a..5847188b 100644
--- a/packages/web-router/src/router/router.tsx
+++ b/packages/web-router/src/router/router.tsx
@@ -1,7 +1,6 @@
 import {
   type DarkElement,
   type MutableRef,
-  h,
   component,
   useMemo,
   useEffect,
diff --git a/packages/web-router/src/use-history/use-history.spec.tsx b/packages/web-router/src/use-history/use-history.spec.tsx
index 61de4d26..2760fa72 100644
--- a/packages/web-router/src/use-history/use-history.spec.tsx
+++ b/packages/web-router/src/use-history/use-history.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { createBrowserEnv, resetBrowserHistory } from '@test-utils';
 import { type Routes } from '../create-routes';
diff --git a/packages/web-router/src/use-location/use-location.spec.tsx b/packages/web-router/src/use-location/use-location.spec.tsx
index 10175851..c5680837 100644
--- a/packages/web-router/src/use-location/use-location.spec.tsx
+++ b/packages/web-router/src/use-location/use-location.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { createBrowserEnv, resetBrowserHistory } from '@test-utils';
 import { type Routes } from '../create-routes';
diff --git a/packages/web-router/src/use-match/use-match.spec.tsx b/packages/web-router/src/use-match/use-match.spec.tsx
index 1496b07c..9eb112bd 100644
--- a/packages/web-router/src/use-match/use-match.spec.tsx
+++ b/packages/web-router/src/use-match/use-match.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 
 import { createBrowserEnv, resetBrowserHistory } from '@test-utils';
 import { type Routes } from '../create-routes';
diff --git a/packages/web-router/src/use-params/use-params.spec.tsx b/packages/web-router/src/use-params/use-params.spec.tsx
index fd9f1f58..cd95607a 100644
--- a/packages/web-router/src/use-params/use-params.spec.tsx
+++ b/packages/web-router/src/use-params/use-params.spec.tsx
@@ -1,5 +1,4 @@
-/** @jsx h */
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 
 import { createBrowserEnv, replacer, resetBrowserHistory } from '@test-utils';
 import { type Routes } from '../create-routes';
diff --git a/packages/web-router/src/utils/utils.spec.tsx b/packages/web-router/src/utils/utils.spec.tsx
index a0b6b2c1..326c037f 100644
--- a/packages/web-router/src/utils/utils.spec.tsx
+++ b/packages/web-router/src/utils/utils.spec.tsx
@@ -1,4 +1,3 @@
-/** @jsx h */
 import { PARAMETER_MARK } from '../constants';
 import {
   parseURL,
diff --git a/templates/browser/src/index.tsx b/templates/browser/src/index.tsx
index d0f6cd36..14768d2f 100644
--- a/templates/browser/src/index.tsx
+++ b/templates/browser/src/index.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component, useAtom } from '@dark-engine/core';
+import { component, useAtom } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 import { createGlobalStyle } from '@dark-engine/styled';
 
diff --git a/templates/browser/tsconfig.json b/templates/browser/tsconfig.json
index 8acad686..fa7a11ec 100644
--- a/templates/browser/tsconfig.json
+++ b/templates/browser/tsconfig.json
@@ -3,9 +3,8 @@
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Node",
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "typeRoots": [
       "node_modules/@types"
     ],
diff --git a/templates/desktop/src/app.tsx b/templates/desktop/src/app.tsx
index fe3c3948..0b2076c8 100644
--- a/templates/desktop/src/app.tsx
+++ b/templates/desktop/src/app.tsx
@@ -1,5 +1,5 @@
 import { Direction, QIcon } from '@nodegui/nodegui';
-import { h, Fragment, component, useAtom } from '@dark-engine/core';
+import { component, useAtom } from '@dark-engine/core';
 import {
   type PushButtonSignals,
   Window,
diff --git a/templates/desktop/src/index.tsx b/templates/desktop/src/index.tsx
index c58cfd27..b6731a75 100644
--- a/templates/desktop/src/index.tsx
+++ b/templates/desktop/src/index.tsx
@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { render } from '@dark-engine/platform-desktop';
 
 import App from './app';
diff --git a/templates/desktop/tsconfig.json b/templates/desktop/tsconfig.json
index b5996ad8..0cb11169 100644
--- a/templates/desktop/tsconfig.json
+++ b/templates/desktop/tsconfig.json
@@ -3,9 +3,8 @@
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Node",
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "sourceMap": true,
     "esModuleInterop": true,
     "lib": [
diff --git a/templates/native/src/components/app.tsx b/templates/native/src/components/app.tsx
index 877f4d52..1ea3688f 100644
--- a/templates/native/src/components/app.tsx
+++ b/templates/native/src/components/app.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, Text } from '@dark-engine/platform-native';
 import { NavigationContainer, TabNavigator } from '@dark-engine/native-navigation';
 
diff --git a/templates/native/src/components/button.tsx b/templates/native/src/components/button.tsx
index 50f3468c..fb5ad99c 100644
--- a/templates/native/src/components/button.tsx
+++ b/templates/native/src/components/button.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { TouchableOpacity, Text } from '@dark-engine/platform-native';
 
 type ButtonProps = {
diff --git a/templates/native/src/components/card.tsx b/templates/native/src/components/card.tsx
index 7494a89d..8e932b8e 100644
--- a/templates/native/src/components/card.tsx
+++ b/templates/native/src/components/card.tsx
@@ -1,4 +1,4 @@
-import { h, component, useAtom } from '@dark-engine/core';
+import { component, useAtom } from '@dark-engine/core';
 import { View, Text } from '@dark-engine/platform-native';
 
 import { Button } from './button';
diff --git a/templates/native/src/components/contacts.tsx b/templates/native/src/components/contacts.tsx
index 11d825c5..808d2814 100644
--- a/templates/native/src/components/contacts.tsx
+++ b/templates/native/src/components/contacts.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { ListView, StackLayout, View, Text } from '@dark-engine/platform-native';
 
 const contacts = Array(1000)
diff --git a/templates/native/src/components/home.tsx b/templates/native/src/components/home.tsx
index 00732a05..c7a2bcfa 100644
--- a/templates/native/src/components/home.tsx
+++ b/templates/native/src/components/home.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, ScrollView } from '@dark-engine/platform-native';
 
 import { Card } from './card';
diff --git a/templates/native/src/components/settings.tsx b/templates/native/src/components/settings.tsx
index e599e53a..7a6ef874 100644
--- a/templates/native/src/components/settings.tsx
+++ b/templates/native/src/components/settings.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { View, Text, Switch } from '@dark-engine/platform-native';
 
 const features = Array(4)
diff --git a/templates/native/tsconfig.json b/templates/native/tsconfig.json
index 931fc8d1..ccac361e 100644
--- a/templates/native/tsconfig.json
+++ b/templates/native/tsconfig.json
@@ -3,9 +3,8 @@
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Node",
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "noEmitHelpers": true,
     "noEmitOnError": true,
     "sourceMap": true,
diff --git a/templates/server/backend/bootstrap.tsx b/templates/server/backend/bootstrap.tsx
index 53274069..0f4572be 100644
--- a/templates/server/backend/bootstrap.tsx
+++ b/templates/server/backend/bootstrap.tsx
@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { renderToStream } from '@dark-engine/platform-server';
 import { ServerStyleSheet } from '@dark-engine/styled/server';
 
diff --git a/templates/server/contract/index.ts b/templates/server/contract/index.ts
index e9fdd9cf..df8add6e 100644
--- a/templates/server/contract/index.ts
+++ b/templates/server/contract/index.ts
@@ -6,3 +6,7 @@ export type Product = {
 export type Api = {
   fetchProducts: () => Promise<Array<Product>>;
 };
+
+export enum Key {
+  PRODUCTS = 'PRODUCTS',
+}
diff --git a/templates/server/frontend/api/index.ts b/templates/server/frontend/api/index.ts
index 08d85992..bb7c174a 100644
--- a/templates/server/frontend/api/index.ts
+++ b/templates/server/frontend/api/index.ts
@@ -1,11 +1,5 @@
-import { useApi as $useApi } from '@dark-engine/data';
-
 import { type Api, type Product } from '../../contract';
 
-export enum Key {
-  PRODUCTS = 'PRODUCTS',
-}
-
 const api: Api = {
   async fetchProducts() {
     const response = await fetch('/api/products');
@@ -16,6 +10,4 @@ const api: Api = {
   },
 };
 
-const useApi = () => $useApi<Api>();
-
-export { api, useApi };
+export { api };
diff --git a/templates/server/frontend/bootstrap.tsx b/templates/server/frontend/bootstrap.tsx
index 345ce111..f0cfea6c 100644
--- a/templates/server/frontend/bootstrap.tsx
+++ b/templates/server/frontend/bootstrap.tsx
@@ -1,13 +1,10 @@
-import { h } from '@dark-engine/core';
 import { hydrateRoot } from '@dark-engine/platform-browser';
 
 import { App } from './components/app';
 import { api } from './api';
 
 function bootstrap() {
-  const element = document.getElementById('root');
-
-  hydrateRoot(element, <App api={api} />);
+  hydrateRoot(document.getElementById('root'), <App api={api} />);
 }
 
 export { bootstrap };
diff --git a/templates/server/frontend/components/app.tsx b/templates/server/frontend/components/app.tsx
index 83972ff3..52c8bd6d 100644
--- a/templates/server/frontend/components/app.tsx
+++ b/templates/server/frontend/components/app.tsx
@@ -1,9 +1,8 @@
-import { h, component, Fragment, Suspense, lazy, useMemo, useEffect } from '@dark-engine/core';
+import { component, Suspense, lazy, useMemo, useEffect } from '@dark-engine/core';
 import { type Routes, Router, RouterLink } from '@dark-engine/web-router';
 import { DataClient, DataClientProvider, InMemoryCache } from '@dark-engine/data';
 
-import { type Api } from '../../contract';
-import { Key } from '../api';
+import { type Api, Key } from '../../contract';
 import { GlobalStyle, Spinner, Root, Header, Menu, Content } from './ui';
 
 const routes: Routes = [
diff --git a/templates/server/frontend/components/invoices.tsx b/templates/server/frontend/components/invoices.tsx
index 9f73dca0..cb536968 100644
--- a/templates/server/frontend/components/invoices.tsx
+++ b/templates/server/frontend/components/invoices.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 const Invoices = component(() => {
   return (
diff --git a/templates/server/frontend/components/operations.tsx b/templates/server/frontend/components/operations.tsx
index 3bed82ce..f7716e09 100644
--- a/templates/server/frontend/components/operations.tsx
+++ b/templates/server/frontend/components/operations.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 const Operations = component(() => {
   return (
diff --git a/templates/server/frontend/components/page.tsx b/templates/server/frontend/components/page.tsx
index 0afbcfc0..4e4dcb89 100644
--- a/templates/server/frontend/components/page.tsx
+++ b/templates/server/frontend/components/page.tsx
@@ -1,4 +1,4 @@
-import { type DarkElement, h, component } from '@dark-engine/core';
+import { type DarkElement, component } from '@dark-engine/core';
 
 type PageProps = {
   title: string;
diff --git a/templates/server/frontend/components/products.tsx b/templates/server/frontend/components/products.tsx
index 135fd9fd..de0c3803 100644
--- a/templates/server/frontend/components/products.tsx
+++ b/templates/server/frontend/components/products.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 
 import { Spinner, List, ListItem } from './ui';
 import { useProducts } from '../hooks';
diff --git a/templates/server/frontend/components/ui.tsx b/templates/server/frontend/components/ui.tsx
index 4c2a623e..400de49f 100644
--- a/templates/server/frontend/components/ui.tsx
+++ b/templates/server/frontend/components/ui.tsx
@@ -1,4 +1,4 @@
-import { h, component } from '@dark-engine/core';
+import { component } from '@dark-engine/core';
 import { createGlobalStyle, styled } from '@dark-engine/styled';
 
 const GlobalStyle = createGlobalStyle`
diff --git a/templates/server/frontend/hooks/index.ts b/templates/server/frontend/hooks/index.ts
index aa11235e..66b180e3 100644
--- a/templates/server/frontend/hooks/index.ts
+++ b/templates/server/frontend/hooks/index.ts
@@ -1,6 +1,8 @@
-import { useQuery } from '@dark-engine/data';
+import { useQuery, useApi as $useApi } from '@dark-engine/data';
 
-import { Key, useApi } from '../api';
+import { type Api, Key } from '../../contract';
+
+const useApi = () => $useApi<Api>();
 
 function useProducts() {
   const api = useApi();
@@ -8,4 +10,4 @@ function useProducts() {
   return useQuery(Key.PRODUCTS, () => api.fetchProducts());
 }
 
-export { useProducts };
+export { useApi, useProducts };
diff --git a/templates/server/tsconfig.json b/templates/server/tsconfig.json
index ef7e9184..9f159618 100644
--- a/templates/server/tsconfig.json
+++ b/templates/server/tsconfig.json
@@ -4,9 +4,8 @@
     "noImplicitAny": false,
     "removeComments": true,
     "esModuleInterop": true,
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "typeRoots": ["node_modules/@types"]
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 501a08cd..8c8ed973 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,9 +7,8 @@
     "noImplicitAny": false,
     "removeComments": true,
     "esModuleInterop": true,
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@dark-engine/core",
     "lib": [
       "ES2021",
       "DOM"