Merge pull request #54 from atellmer/feature/jsx-import

jsx-runtime

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(() => {

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(() => {

examples/animated-grid/index.tsx

@@ -4,8 +4,6 @@ import {
   type Ref,
   type Component,
   type StandardComponentProps,
-  h,
-  Fragment,
   component,
   useEffect,
   useLayoutEffect,

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(() => {

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';
 

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,

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';

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';
 

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

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';

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>

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';
 

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 = {

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';

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)

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';

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)

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"
       ],

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 = {

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 (

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 (

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 (

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';

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';
 

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"
       ],

examples/server-side-rendering/frontend/bootstrap.tsx

@@ -1,4 +1,3 @@
-import { h } from '@dark-engine/core';
 import { hydrateRoot, createRoot } from '@dark-engine/platform-browser';
 
 import { App } from './components/app';

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';
 

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';
 

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';
 

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;

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';

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';
 

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';
 

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';

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';

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';

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';
 

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';

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';

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';
 

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"
       ],

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

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"]
   }
 }

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';
 

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,

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';
 

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';
 

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';

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';

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';

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';
 

examples/theme-context/index.tsx

@@ -1,7 +1,5 @@
 import {
   type DarkElement,
-  h,
-  Fragment,
   component,
   createContext,
   useContext,

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';