Stopped bundling navigation react

Can't bundle navigation react and support 'use client'. Bundling puts all components into a single file but 'use client' needs to be applied at the file level.
So switched the package task of navigation react to transpile using typescript instead of bundle using rollup. Kept rollup for all other libraries and tasks.
Without bundling typescript puts some helper stuff at the top of each file - it used appear just once when it was one big file. To keep this to a minimum removed 'import * as React from 'react';' - this isn't needed anymore because react/typescript adds 'react/jsx-runtime'. Removing this removes the importStar typescript helper stuff. Don't want to 'importHelpers' because then dependent on tslib and don't want any 3rd party dependencies.
This stopped the build task from working because it didn't recognise 'react/jsx-runtime'. So added it as an external but there is no umd build for it so the index.html sample won't work anymore. But noticed that [react doesn't support umd builds anymore](facebook/react#28735 (comment)) anyway so will either ditch the build task and index.html sample or switch to esm?! will investigate later.
Haven't tried the unbundled navigation react package but the files are generated at least

.gitignore

@@ -1,5 +1,5 @@
 build/dist
-build/npm/**/navigation*.js
+build/npm/**/*.js
 build/npm/**/android
 build/npm/**/ios
 build/npm/**/cpp

NavigationReact/src/FluentLink.tsx

@@ -1,7 +1,7 @@
+'use client'
 import LinkUtility from './LinkUtility';
 import withStateNavigator from './withStateNavigator';
 import { FluentLinkProps } from './Props';
-import * as React from 'react';
 
 var FluentLink = (props: FluentLinkProps) => {
     var htmlProps = LinkUtility.toHtmlProps(props);

NavigationReact/src/NavigationBackLink.tsx

@@ -1,7 +1,7 @@
-import LinkUtility from './LinkUtility';
+'use client'
+import LinkUtility from './LinkUtility';
 import withStateNavigator from './withStateNavigator';
 import { NavigationBackLinkProps } from './Props';
-import * as React from 'react';
 
 var NavigationBackLink = (props: NavigationBackLinkProps) => {
     var htmlProps = LinkUtility.toHtmlProps(props);

NavigationReact/src/NavigationContext.ts

@@ -1,4 +1,4 @@
+import { createContext } from 'react';
 import { StateNavigator } from 'navigation';
-import * as React from 'react';
 
-export default React.createContext({ oldState: null, state: null, data: {}, stateNavigator: new StateNavigator() });
+export default createContext({ oldState: null, state: null, data: {}, stateNavigator: new StateNavigator() });

NavigationReact/src/NavigationHandler.tsx

@@ -1,10 +1,11 @@
+'use client'
+import { Component } from 'react';
 import AsyncStateNavigator from './AsyncStateNavigator';
 import NavigationContext from './NavigationContext';
 import { StateNavigator, State } from 'navigation';
-import * as React from 'react';
 type NavigationHandlerState = { context: { oldState: State, state: State, data: any, asyncData: any, stateNavigator: AsyncStateNavigator } };
 
-class NavigationHandler extends React.Component<{ stateNavigator: StateNavigator, children: any }, NavigationHandlerState> {
+class NavigationHandler extends Component<{ stateNavigator: StateNavigator, children: any }, NavigationHandlerState> {
     constructor(props) {
         super(props);
         var { stateNavigator } = this.props;

NavigationReact/src/NavigationLink.tsx

@@ -2,7 +2,6 @@
 import LinkUtility from './LinkUtility';
 import withStateNavigator from './withStateNavigator';
 import { NavigationLinkProps } from './Props';
-import * as React from 'react';
 
 var NavigationLink = (props: NavigationLinkProps) => {
     var htmlProps = LinkUtility.toHtmlProps(props);

NavigationReact/src/NavigationReact.server.ts

@@ -0,0 +1,10 @@
+import AsyncStateNavigator from './AsyncStateNavigator';
+import NavigationContext from './NavigationContext.server';
+import NavigationHandler from './NavigationHandler';
+import NavigationBackLink from './NavigationBackLink';
+import NavigationLink from './NavigationLink';
+import RefreshLink from './RefreshLink';
+import FluentLink from './FluentLink';
+import SceneView from './SceneView.server';
+
+export { AsyncStateNavigator, NavigationContext, NavigationHandler, NavigationBackLink, NavigationLink, RefreshLink, FluentLink, SceneView };

NavigationReact/src/RefreshLink.tsx

@@ -1,7 +1,7 @@
-import LinkUtility from './LinkUtility';
+'use client'
+import LinkUtility from './LinkUtility';
 import withStateNavigator from './withStateNavigator';
 import { RefreshLinkProps } from './Props';
-import * as React from 'react';
 
 var RefreshLink = (props: RefreshLinkProps) => {
     var htmlProps = LinkUtility.toHtmlProps(props);

NavigationReact/src/SceneRSCView.ts

@@ -1,4 +1,3 @@
-
 const SceneRSCView = ({children}) => children;
 
 export default SceneRSCView;

NavigationReact/src/SceneView.server.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SceneViewProps } from './Props';
 import useNavigationEvent from './useNavigationEvent';
 import SceneRSCView from './SceneRSCView';

NavigationReact/src/SceneView.ts

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import NavigationContext from './NavigationContext';
 import { SceneViewProps } from './Props';
 

NavigationReact/src/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "es5",
-        "jsx": "react",
+        "jsx": "react-jsx",
         "esModuleInterop": true,
         "baseUrl": "../../types"
     }

NavigationReact/src/withStateNavigator.tsx

@@ -1,8 +1,8 @@
 import NavigationContext from './NavigationContext';
-import * as React from 'react';
+import { ComponentType } from 'react';
 import { LinkProps } from './Props';
 
-export default <T extends LinkProps>(Link: React.ComponentType<T>) => (props: T) => (
+export default <T extends LinkProps>(Link: ComponentType<T>) => (props: T) => (
     <NavigationContext.Consumer>
         {({ stateNavigator }) => <Link {...props} stateNavigator={stateNavigator} />}
     </NavigationContext.Consumer>

build/npm/navigation-react/package.json

@@ -2,12 +2,24 @@
   "name": "navigation-react",
   "version": "4.5.1",
   "description": "React plugin for the Navigation router",
-  "main": "navigation.react.js",
+  "main": "NavigationReact.js",
   "types": "navigation.react.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/grahammendick/navigation.git"
   },
+  "exports": {
+    ".": {
+      "react-server": {
+        "browser": "./NavigationReact.server.js",
+        "node": "./NavigationReact.server.js"
+      },
+      "default": {
+        "browser": "./NavigationReact.js",
+        "node": "./NavigationReact.js"
+      }
+    }
+  },
   "keywords": [
     "router",
     "navigation",

gulpfile.js

@@ -9,14 +9,15 @@ var rename = require('gulp-rename');
 var rollup = require('rollup');
 var sucrase = require('@rollup/plugin-sucrase');
 var terser = require('gulp-terser');
+var ts = require('gulp-typescript');
 var typescript = require('@rollup/plugin-typescript');
 
 events.EventEmitter.defaultMaxListeners = 0;
 
 var items = [
     require('./build/npm/navigation/package.json'),
     Object.assign({ globals: { navigation: 'Navigation', react: 'React',
-            'react-dom': 'ReactDOM' } }, 
+            'react-dom': 'ReactDOM', 'react/jsx-runtime': '_jsx' } }, 
         require('./build/npm/navigation-react/package.json')),
     Object.assign({ globals: { navigation: 'Navigation',
             'navigation-react': 'NavigationReact', react: 'React' } },
@@ -97,9 +98,21 @@ var itemTasks = items.reduce((tasks, item) => {
     var { globals = {}, format = 'cjs' } = item;
     tasks.buildTasks.push(
         nameFunc(() => buildTask(name, tsFrom, jsTo, globals, item), 'build' + name));
-    tasks.packageTasks.push(
-        nameFunc(() => rollupTask(name, tsFrom, jsPackageTo, globals, format), 'package' + name)
-    );
+    if (!item.exports) {
+        tasks.packageTasks.push(
+            nameFunc(() => rollupTask(name, tsFrom, jsPackageTo, globals, format), 'package' + name)
+        );
+    } else {
+        var include = tsFrom.replace(name + '.ts', '**/*.{ts,tsx}');
+        var tsconfig = tsFrom.replace(name + '.ts', 'tsconfig.json');
+        tasks.packageTasks.push(
+            nameFunc(() => (
+                src(include)
+                    .pipe(ts.createProject(tsconfig)())
+                    .pipe(dest(`./build/npm/${packageName}`))
+            ), 'package' + name)
+        );
+    }
     return tasks;
 }, { buildTasks: [], packageTasks: [] });
 

package.json

@@ -13,6 +13,7 @@
     "gulp-mocha": "^8.0.0",
     "gulp-rename": "^1.2.3",
     "gulp-terser": "^1.2.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
     "jsdom": "^25.0.1",
     "navigation": "file:build/npm/navigation",
     "navigation-react": "file:build/npm/navigation-react",