Clean up

ije · ije · commit bb5df4dcaa8d · 2023-03-14T16:40:07.000+08:00
diff --git a/examples/github-oauth-middleware/index.html b/examples/github-oauth-middleware/index.html
@@ -8,7 +8,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./main.tsx"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/examples/github-oauth-middleware/main.ts b/examples/github-oauth-middleware/main.ts
diff --git a/examples/react-app/index.html b/examples/react-app/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./main.tsx"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/examples/react-app/main.ts b/examples/react-app/main.ts
diff --git a/examples/react-mdx-app/index.html b/examples/react-mdx-app/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./main.tsx"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/examples/react-mdx-app/main.ts b/examples/react-mdx-app/main.ts
diff --git a/examples/react-suspense-ssr/index.html b/examples/react-suspense-ssr/index.html
@@ -9,7 +9,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./main.tsx"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/examples/react-suspense-ssr/main.ts b/examples/react-suspense-ssr/main.ts
diff --git a/examples/with-unocss/react-app/index.html b/examples/with-unocss/react-app/index.html
@@ -9,7 +9,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./main.tsx"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/examples/with-unocss/react-app/main.ts b/examples/with-unocss/react-app/main.ts
diff --git a/framework/react/context.ts b/framework/react/context.ts
@@ -1,20 +1,6 @@
 import type { ReactNode, ReactPortal } from "react";
 import { createContext } from "react";
 
-export type RouterContextProps = {
-  url: URL;
-  params: Record<string, string>;
-  e404?: boolean;
-  ssrHeadCollection?: string[];
-  createPortal?: (children: ReactNode, container: Element, key?: null | string) => ReactPortal;
-};
-
-export const RouterContext = createContext<RouterContextProps>({
-  url: new URL("http://localhost/"),
-  params: {},
-});
-RouterContext.displayName = "RouterContext";
-
 export type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
 
 export type UpdateStrategy<T = unknown> = "none" | "replace" | {
@@ -30,6 +16,14 @@ export type Mutation<T> = {
   ) => Promise<Response>;
 };
 
+export type RouterContextProps = {
+  url: URL;
+  params: Record<string, string>;
+  e404?: boolean;
+  ssrHeadCollection?: string[];
+  createPortal?: (children: ReactNode, container: Element, key?: null | string) => ReactPortal;
+};
+
 export type DataContextProps<T = unknown> = {
   deferedData?: { current?: T };
   data: T;
@@ -38,6 +32,18 @@ export type DataContextProps<T = unknown> = {
   reload: (signal?: AbortSignal) => Promise<void>;
 };
 
+export type ForwardPropsContextProps = {
+  props: Record<string, unknown>;
+};
+
+/** Context for the router. */
+export const RouterContext = createContext<RouterContextProps>({
+  url: new URL("http://localhost/"),
+  params: {},
+});
+RouterContext.displayName = "RouterContext";
+
+/** Context for the router data. */
 export const DataContext = createContext<DataContextProps>({
   data: undefined,
   isMutating: false,
@@ -51,10 +57,7 @@ export const DataContext = createContext<DataContextProps>({
 });
 DataContext.displayName = "DataContext";
 
-export type ForwardPropsContextProps = {
-  props: Record<string, unknown>;
-};
-
+/** Context for the forwarded props. */
 export const ForwardPropsContext = createContext<ForwardPropsContextProps>({
   props: {},
 });
diff --git a/framework/react/mod.ts b/framework/react/mod.ts
@@ -3,4 +3,4 @@ export { useData, useMutation } from "./data.ts";
 export { Head } from "./head.ts";
 export { Link, type LinkProps, NavLink, type NavLinkProps } from "./link.ts";
 export { usePortal } from "./portal.ts";
-export { App, forwardProps, Router, type RouterProps, type SSRContext, useForwardProps, useRouter } from "./router.ts";
+export { App, forwardProps, Router, type RouterProps, useForwardProps, useRouter } from "./router.ts";
diff --git a/framework/react/router.ts b/framework/react/router.ts
@@ -1,27 +1,21 @@
 import type { FC, ReactNode } from "react";
 import { createElement, isValidElement, StrictMode, Suspense, useContext, useEffect, useMemo, useState } from "react";
+import type { SSRContext } from "../../server/types.ts";
 import { redirect } from "../core/redirect.ts";
-import { RouteModule, watchRouter } from "../core/router.ts";
-import { fetchRouteData, loadSSRModulesFromTag } from "../core/router.ts";
+import type { RouteModule } from "../core/router.ts";
+import { fetchRouteData, loadSSRModulesFromTag, watchRouter } from "../core/router.ts";
 import { ForwardPropsContext, RouterContext, type RouterContextProps } from "./context.ts";
 import { DataProvider, type RouteData } from "./data.ts";
 import { Err, ErrorBoundary } from "./error.ts";
 
-export type SSRContext = {
-  readonly url: URL;
-  readonly modules: RouteModule[];
-  readonly headCollection: string[];
-};
-
 export type RouterProps = {
   readonly ssrContext?: SSRContext;
-  readonly strictMode?: boolean;
   readonly createPortal?: RouterContextProps["createPortal"];
 };
 
 /** The `Router` component for react. */
 export const Router: FC<RouterProps> = (props) => {
-  const { ssrContext, strictMode, createPortal } = props;
+  const { ssrContext, createPortal } = props;
   const [url, setUrl] = useState(() => ssrContext?.url || new URL(window.location?.href));
   const [modules, setModules] = useState(() => ssrContext?.modules || loadSSRModulesFromTag());
   const dataCache = useMemo(() => {
@@ -60,23 +54,21 @@ export const Router: FC<RouterProps> = (props) => {
     return createElement(Err, { error: { status: 404, message: "page not found" }, fullscreen: true });
   }
 
-  const el = createElement(
+  const value = {
+    url,
+    params,
+    e404: modules[modules.length - 1].url.pathname === "/_404" ? true : undefined,
+    ssrHeadCollection: ssrContext?.headCollection,
+    createPortal,
+  };
+  return createElement(
     RouterContext.Provider,
-    {
-      value: {
-        url,
-        params,
-        e404: modules[modules.length - 1].url.pathname === "/_404" ? true : undefined,
-        ssrHeadCollection: ssrContext?.headCollection,
-        createPortal,
-      },
-    },
-    createElement(RouteRoot, { modules, dataCache, ssrContext }),
+    { value },
+    createElement(
+      RouteRoot,
+      { modules, dataCache, ssrContext },
+    ),
   );
-  if (strictMode) {
-    return createElement(StrictMode, {}, el);
-  }
-  return el;
 };
 
 type RouteRootProps = {
@@ -100,7 +92,7 @@ const RouteRoot: FC<RouteRootProps> = ({ modules, dataCache, ssrContext }) => {
       ),
     );
     if (withData) {
-      const fallback = exports.fallback || exports.Fallback;
+      const fallback = exports.Loading ?? exports.Fallback ?? exports.fallback;
       el = createElement(
         Suspense,
         {
@@ -132,7 +124,7 @@ const RouteRoot: FC<RouteRootProps> = ({ modules, dataCache, ssrContext }) => {
 
 /** The `App` component alias to the `Router` in `StrictMode` mode. */
 export const App: FC<Omit<RouterProps, "strictMode">> = (props) => {
-  return createElement(Router, { ...props, strictMode: true });
+  return createElement(StrictMode, null, createElement(Router, { ...props }));
 };
 
 export const useRouter = (): {
diff --git a/server/build.ts b/server/build.ts
@@ -17,7 +17,7 @@ import {
 } from "./helpers.ts";
 import { parseHtmlLinks } from "./html.ts";
 import log from "./log.ts";
-import { initRouter } from "./routing.ts";
+import { initRouter } from "./router.ts";
 import type { ConnInfo } from "./types.ts";
 
 export async function build(
diff --git a/server/dev.ts b/server/dev.ts
@@ -3,7 +3,7 @@ import { colors, Emitter, ensureDir, mitt, parseDeps, path } from "./deps.ts";
 import depGraph from "./graph.ts";
 import { builtinModuleExts, existsFile, findFile, getAlephConfig, getImportMap, watchFs } from "./helpers.ts";
 import log from "./log.ts";
-import { initRouter, toRouterRegExp } from "./routing.ts";
+import { initRouter, toRouterRegExp } from "./router.ts";
 import type { AlephConfig } from "./types.ts";
 
 type WatchFsEvents = {
diff --git a/server/handler.ts b/server/handler.ts
@@ -24,7 +24,7 @@ import { createHtmlResponse, loadIndexHtml } from "./html.ts";
 import log from "./log.ts";
 import { getContentType } from "./media_type.ts";
 import renderer from "./renderer.ts";
-import { fetchRoute, importRouteModule, initRouter } from "./routing.ts";
+import { fetchRoute, importRouteModule, initRouter } from "./router.ts";
 import transformer from "./transformer.ts";
 import type { AlephConfig, ConnInfo, ModuleLoader } from "./types.ts";
 
diff --git a/server/helpers.ts b/server/helpers.ts
@@ -376,24 +376,21 @@ export async function loadJSXConfig(appDir?: string): Promise<JSXConfig> {
   if (denoConfigFile) {
     try {
       const { compilerOptions } = await parseJSONFile(denoConfigFile);
-      const { jsx, jsxFactory, jsxFragmentFactory, jsxImportSource } = (compilerOptions || {}) as Record<
-        string,
-        unknown
-      >;
-      if (
-        (jsx === undefined || jsx === "react-jsx" || jsx === "react-jsxdev") &&
-        isFilledString(jsxImportSource)
-      ) {
+      const {
+        jsx = "react",
+        jsxFactory = "React.createElement",
+        jsxFragmentFactory = "React.createElement",
+        jsxImportSource,
+      } = (compilerOptions ?? {}) as Record<string, string | undefined>;
+      if ((jsx === "react-jsx" || jsx === "react-jsxdev") && jsxImportSource) {
+        jsxConfig.jsx = jsx;
         jsxConfig.jsxImportSource = jsxImportSource;
       } else {
-        if (typeof jsxFactory === "string") {
-          jsxConfig.jsxPragma = jsxFactory;
-        }
-        if (typeof jsxFragmentFactory === "string") {
-          jsxConfig.jsxPragmaFrag = jsxFragmentFactory;
-        }
+        jsxConfig.jsx = "react";
+        jsxConfig.jsxPragma = jsxFactory;
+        jsxConfig.jsxPragmaFrag = jsxFragmentFactory;
       }
-      log.debug(`deno config ${basename(denoConfigFile)} loaded`);
+      log.debug(`jsx config from ${basename(denoConfigFile)} loaded`);
     } catch (error) {
       log.error(`Failed to parse ${basename(denoConfigFile)}: ${error.message}`);
     }
@@ -441,7 +438,7 @@ export async function loadImportMap(appDir?: string): Promise<ImportMap> {
       Object.assign(importMap, { __filename });
       Object.assign(importMap.imports, imports);
       Object.assign(importMap.scopes, scopes);
-      log.debug(`import maps ${basename(importMapFilename)} loaded`);
+      log.debug(`import maps from ${basename(importMapFilename)} loaded`);
     } catch (e) {
       log.error("loadImportMap:", e.message);
     }
diff --git a/server/mock.ts b/server/mock.ts
@@ -5,7 +5,7 @@ import { path } from "./deps.ts";
 import { getAppDir } from "./helpers.ts";
 import { createHtmlResponse, loadIndexHtml } from "./html.ts";
 import renderer from "./renderer.ts";
-import { fetchRoute, initRouter } from "./routing.ts";
+import { fetchRoute, initRouter } from "./router.ts";
 import type { Context, Middleware, RouterInit, SessionOptions, SSR } from "./types.ts";
 
 type MockServerOptions = {
diff --git a/server/renderer.ts b/server/renderer.ts
@@ -6,7 +6,7 @@ import depGraph from "./graph.ts";
 import { getAlephConfig, getAppDir, getDeploymentId, getFiles, regJsxFile, toLocalPath } from "./helpers.ts";
 import log from "./log.ts";
 import { runtimeScript } from "./runtime.ts";
-import { importRouteModule } from "./routing.ts";
+import { importRouteModule } from "./router.ts";
 import type { HTMLRewriterHandlers, SSR, SSRContext, SuspenseMarker } from "./types.ts";
 
 export type RenderOptions = {
diff --git a/server/router.ts b/server/router.ts
diff --git a/server/runtime.ts b/server/runtime.ts
@@ -1,5 +1,5 @@
 import type { Router } from "../framework/core/router.ts";
-import { importRouteModule } from "./routing.ts";
+import { importRouteModule } from "./router.ts";
 
 // the runtime script for client-side application
 export const runtimeScript = `
diff --git a/server/transformer.ts b/server/transformer.ts
@@ -17,7 +17,7 @@ import {
 } from "./helpers.ts";
 import log from "./log.ts";
 import { getContentType } from "./media_type.ts";
-import { isRouteModule } from "./routing.ts";
+import { isRouteModule } from "./router.ts";
 import { bundleCSS } from "./build.ts";
 import type { ImportMap, JSXConfig, ModuleLoader, ModuleLoaderOutput } from "./types.ts";
 
diff --git a/server/types.ts b/server/types.ts
@@ -163,6 +163,7 @@ export type ImportMap = {
 };
 
 export type JSXConfig = {
+  jsx?: string;
   jsxPragma?: string;
   jsxPragmaFrag?: string;
   jsxImportSource?: string;
diff --git a/tests/integration_react_app_test.tsx b/tests/integration_react_app_test.tsx
@@ -23,7 +23,7 @@ Deno.test("[integration] examples/react-app", async (t) => {
     assertStringIncludes(html, ` href="/todos" `);
     assertStringIncludes(html, `>Todos App Demo</a>`);
     assertStringIncludes(html, `<link rel="icon" href="/assets/logo.svg`);
-    assertStringIncludes(html, `<script type="module" src="/main.tsx`);
+    assertStringIncludes(html, `<script type="module" src="/main.ts`);
     assertStringIncludes(html, `<script id="router-manifest" type="application/json">`);
     assertStringIncludes(html, `<script id="ssr-data" type="application/json">`);
   });
diff --git a/tests/server_routing_test.ts b/tests/server_routing_test.ts
@@ -1,9 +1,9 @@
 import { assertEquals } from "std/testing/asserts.ts";
 import { dirname, join } from "std/path/mod.ts";
 import { matchRoutes } from "../framework/core/router.ts";
-import { initRouter } from "../server/routing.ts";
+import { initRouter } from "../server/router.ts";
 
-Deno.test("[unit] server/routing.ts: matchRoutes", async () => {
+Deno.test("[unit] server/router.ts: matchRoutes", async () => {
   const tmpDir = await Deno.makeTempDir();
   const files = [
     "./routes/_404.tsx",
