Fix: use jsx-dev-runtime when development

.changeset/few-meals-listen.md

@@ -0,0 +1,5 @@
+---
+'@ice/jsx-runtime': minor
+---
+
+fix: use jsx-dev-runtime when development

packages/jsx-runtime/src/dev.ts

@@ -1,13 +1,24 @@
-import { jsx, Fragment, jsxs } from './index.js';
+// @ts-ignore
+import { jsxDEV as _jsxDEV, Fragment } from 'react/jsx-dev-runtime';
+import { hijackElementProps } from './style.js';
 
-export { Fragment };
-export function jsxDEV(
+/**
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ * @param {boolean} isStaticChildren
+ * @param {object} source
+ * @param {any} self
+ */
+function jsxDEV(
   type: any,
   props: object,
   key: string,
   isStaticChildren: boolean,
   source: object,
   self: any,
 ) {
-  return isStaticChildren ? jsxs(type, props, key, source, self) : jsx(type, props, key, source, self);
+  return _jsxDEV(type, hijackElementProps(props), key, isStaticChildren, source, self);
 }
+
+export { jsxDEV, Fragment };

packages/jsx-runtime/src/index.ts

@@ -1,50 +1 @@
-// @ts-ignore
-import { jsx as _jsx, jsxs as _jsxs, Fragment } from 'react/jsx-runtime';
-// @ts-ignore
-import { convertUnit } from 'style-unit';
-
-const STYLE = 'style';
-
-/**
- * https://github.com/reactjs/rfcs/pull/107
- * @param {*} type
- * @param {object} props
- * @param {string} maybeKey
- * @param {object} source
- * @param {any} self
- */
-export function jsx(type: any, props: object, maybeKey: string, source: object, self: any) {
-  return _jsx(type, hijackElementProps(props), maybeKey, source, self);
-}
-
-// Same as jsx method, special case jsxs internally to take advantage of static children.
-// // for now we can ship identical prod functions.
-export function jsxs(type: any, props: object, maybeKey: string, source: object, self: any) {
-  return _jsxs(type, hijackElementProps(props), maybeKey, source, self);
-}
-
-function isObject(obj: any): obj is object {
-  return typeof obj === 'object';
-}
-
-// Support rpx unit.
-export function hijackElementProps(props: { style?: object } | object): object {
-  if (props && STYLE in props) {
-    const { style } = props;
-    if (isObject(style)) {
-      const result = Object.assign({}, props);
-      const convertedStyle = {};
-      for (const prop in style) {
-        // @ts-ignore
-        convertedStyle[prop] = typeof style[prop] === 'string' ? convertUnit(style[prop]) : style[prop];
-      }
-      result['style'] = convertedStyle;
-      return result;
-    }
-  }
-  return props;
-}
-
-export {
-  Fragment,
-};
+export * from './prod.js';

packages/jsx-runtime/src/prod.ts

@@ -1 +1,27 @@
-export { jsx, jsxs, Fragment } from './index.js';
+// @ts-ignore
+import { jsx as _jsx, jsxs as _jsxs, Fragment } from 'react/jsx-runtime';
+import { hijackElementProps } from './style.js';
+
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} maybeKey
+ * @param {object} source
+ * @param {any} self
+ */
+function jsx(type: any, props: object, maybeKey: string, source: object, self: any) {
+  return _jsx(type, hijackElementProps(props), maybeKey, source, self);
+}
+
+// Same as jsx method, special case jsxs internally to take advantage of static children.
+// // for now we can ship identical prod functions.
+function jsxs(type: any, props: object, maybeKey: string, source: object, self: any) {
+  return _jsxs(type, hijackElementProps(props), maybeKey, source, self);
+}
+
+export {
+  Fragment,
+  jsx,
+  jsxs,
+};

packages/jsx-runtime/src/style.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { convertUnit } from 'style-unit';
+
+const STYLE = 'style';
+
+function isObject(obj: any): obj is object {
+  return typeof obj === 'object';
+}
+
+// Support rpx unit.
+export function hijackElementProps(props: { style?: object } | object): object {
+  if (props && STYLE in props) {
+    const { style } = props;
+    if (isObject(style)) {
+      const result = Object.assign({}, props);
+      const convertedStyle = {};
+      for (const prop in style) {
+        // @ts-ignore
+        convertedStyle[prop] = typeof style[prop] === 'string' ? convertUnit(style[prop]) : style[prop];
+      }
+      result['style'] = convertedStyle;
+      return result;
+    }
+  }
+  return props;
+}

packages/jsx-runtime/tests/hijackElememt.test.ts

@@ -1,5 +1,5 @@
 import { expect, it, describe } from 'vitest';
-import { hijackElementProps } from '../src/';
+import { hijackElementProps } from '../src/style';
 
 describe('hijack element', () => {
   it('hijackElementProps basic', () => {
@@ -19,4 +19,4 @@ describe('hijack element', () => {
       },
     });
   });
-});
+});