@rspress/runtime 0.0.0-nightly-20231026160444

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/runtime/Content.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const Content: ({
+  fallback
+}: {
+  fallback?: ReactNode;
+}) => any;

package/dist/runtime/Content.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Suspense, memo } from "react";
+import { matchRoutes, useLocation } from "react-router-dom";
+import siteData from "virtual-site-data";
+import { normalizeRoutePath } from "./utils";
+import { useViewTransition } from "./hooks";
+const { routes } = process.env.__SSR__ ? require("virtual-routes-ssr") : require("virtual-routes");
+function TransitionContentImpl(props) {
+  let element = props.el;
+  if (siteData?.themeConfig?.enableContentAnimation) {
+    element = useViewTransition(props.el);
+  }
+  return element;
+}
+const TransitionContent = memo(
+  TransitionContentImpl,
+  (prevProps, nextProps) => prevProps.el === nextProps.el
+);
+const Content = ({ fallback = /* @__PURE__ */ jsx(Fragment, {}) }) => {
+  const { pathname } = useLocation();
+  const matched = matchRoutes(routes, normalizeRoutePath(pathname));
+  if (!matched) {
+    return /* @__PURE__ */ jsx("div", {});
+  }
+  const routesElement = matched[0].route.element;
+  if (!process.env.__IS_REACT_18__ && process.env.__SSR__) {
+    return routesElement;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(TransitionContent, { el: routesElement }) });
+};
+export {
+  Content
+};

package/dist/runtime/NoSSR.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function NoSSR(props: {
+  children: React.ReactNode;
+}): JSX.Element;

package/dist/runtime/NoSSR.js

@@ -0,0 +1,17 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function NoSSR(props) {
+  const { children } = props;
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) {
+    return null;
+  } else {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+}
+export {
+  NoSSR
+};

package/dist/runtime/hooks.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { PageData } from '@rspress/shared';
+declare global {
+  interface Window {
+    __MODERN_PAGE_DATA__: any;
+  }
+}
+interface IDataContext {
+  data: PageData;
+  setData?: (data: PageData) => void;
+}
+interface IThemeContext {
+  theme: 'light' | 'dark';
+  setTheme?: (theme: 'light' | 'dark') => void;
+}
+export declare const DataContext: import("react").Context<IDataContext>;
+export declare const ThemeContext: import("react").Context<IThemeContext>;
+export declare function usePageData(): PageData;
+export declare function useLang(): string;
+export declare function useVersion(): string;
+export declare function useDark(): boolean;
+export declare function useI18n<T = Record<string, Record<string, string>>>(): (key: keyof T) => any;
+declare global {
+  interface Document {
+    startViewTransition: (callback: () => void) => void;
+  }
+}
+/**
+ * There is a pitfall.
+ * I was working on the navigation between pages with hash. eg. from `guide/start` -> `config/repress#nav`
+ *    I need a time to dispatch an event so that the sideEffect.ts would know that
+ *    the dom is attached to the browser. Otherwise the scroll position and the
+ *    animation would be incorrect. You can search for `RspressReloadContent` in this codebase
+ *    to findout the logic that are consuming the event.
+ * The reason I didn't write it here is that I hope the logic of handling scroll and position
+ *    could be in one place so that people wouldn't be confused.
+ */
+export declare function useViewTransition(dom: any): any;
+export {};

package/dist/runtime/hooks.js

@@ -0,0 +1,54 @@
+import { createContext, useContext, useLayoutEffect, useState } from "react";
+import i18nTextData from "virtual-i18n-text";
+import { flushSync } from "react-dom";
+const DataContext = createContext({});
+const ThemeContext = createContext({});
+function usePageData() {
+  const ctx = useContext(DataContext);
+  return ctx.data;
+}
+function useLang() {
+  const ctx = useContext(DataContext);
+  return ctx.data.page.lang || "";
+}
+function useVersion() {
+  const ctx = useContext(DataContext);
+  return ctx.data.page.version || "";
+}
+function useDark() {
+  const ctx = useContext(ThemeContext);
+  return ctx.theme === "dark";
+}
+function useI18n() {
+  const lang = useLang();
+  return (key) => i18nTextData[key][lang];
+}
+function useViewTransition(dom) {
+  const [element, setElement] = useState(dom);
+  useLayoutEffect(() => {
+    if (document.startViewTransition && element !== dom) {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          setElement(dom);
+        });
+        window.dispatchEvent(new Event("RspressReloadContent"));
+      });
+    } else {
+      flushSync(() => {
+        setElement(dom);
+      });
+      window.dispatchEvent(new Event("RspressReloadContent"));
+    }
+  }, [dom]);
+  return element;
+}
+export {
+  DataContext,
+  ThemeContext,
+  useDark,
+  useI18n,
+  useLang,
+  usePageData,
+  useVersion,
+  useViewTransition
+};

package/dist/runtime/index.d.ts

@@ -0,0 +1,6 @@
+export * from './hooks';
+export * from './Content';
+export { normalizeHrefInRuntime, normalizeImagePath, withBase, removeBase, addLeadingSlash, removeTrailingSlash, normalizeSlash, isProduction, normalizeRoutePath, isEqualPath } from './utils';
+export { useLocation, useNavigate, matchRoutes, BrowserRouter } from 'react-router-dom';
+export { Helmet } from 'react-helmet-async';
+export { NoSSR } from './NoSSR';

package/dist/runtime/index.js

@@ -0,0 +1,40 @@
+export * from "./hooks";
+export * from "./Content";
+import {
+  normalizeHrefInRuntime,
+  normalizeImagePath,
+  withBase,
+  removeBase,
+  addLeadingSlash,
+  removeTrailingSlash,
+  normalizeSlash,
+  isProduction,
+  normalizeRoutePath,
+  isEqualPath
+} from "./utils";
+import {
+  useLocation,
+  useNavigate,
+  matchRoutes,
+  BrowserRouter
+} from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { NoSSR } from "./NoSSR";
+export {
+  BrowserRouter,
+  Helmet,
+  NoSSR,
+  addLeadingSlash,
+  isEqualPath,
+  isProduction,
+  matchRoutes,
+  normalizeHrefInRuntime,
+  normalizeImagePath,
+  normalizeRoutePath,
+  normalizeSlash,
+  removeBase,
+  removeTrailingSlash,
+  useLocation,
+  useNavigate,
+  withBase
+};

package/dist/runtime/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  },
+  "include": ["./**/*", "../../server.js"]
+}

package/dist/runtime/utils.d.ts

@@ -0,0 +1,8 @@
+import { addLeadingSlash, removeTrailingSlash, normalizeSlash, isProduction } from '@rspress/shared';
+export declare function normalizeRoutePath(routePath: string): string;
+export declare function withBase(url?: string): string;
+export declare function removeBase(url: string): string;
+export declare function isEqualPath(a: string, b: string): boolean;
+export declare function normalizeHrefInRuntime(a: string): string;
+export declare function normalizeImagePath(imagePath: string): string;
+export { addLeadingSlash, removeTrailingSlash, normalizeSlash, isProduction };

package/dist/runtime/utils.js

@@ -0,0 +1,45 @@
+import siteData from "virtual-site-data";
+import {
+  addLeadingSlash,
+  removeTrailingSlash,
+  normalizeSlash,
+  isProduction,
+  normalizeHref,
+  withBase as rawWithBase,
+  removeBase as rawRemoveBase,
+  isExternalUrl
+} from "@rspress/shared";
+function normalizeRoutePath(routePath) {
+  return decodeURIComponent(routePath).replace(/\.html$/, "").replace(/\/index$/, "/");
+}
+function withBase(url = "/") {
+  return rawWithBase(url, siteData.base);
+}
+function removeBase(url) {
+  return rawRemoveBase(url, siteData.base);
+}
+function isEqualPath(a, b) {
+  return withBase(normalizeHrefInRuntime(a)) === withBase(normalizeHrefInRuntime(b));
+}
+function normalizeHrefInRuntime(a) {
+  const cleanUrls = Boolean(siteData?.route?.cleanUrls);
+  return normalizeHref(a, cleanUrls);
+}
+function normalizeImagePath(imagePath) {
+  if (isExternalUrl(imagePath)) {
+    return imagePath;
+  }
+  return withBase(imagePath);
+}
+export {
+  addLeadingSlash,
+  isEqualPath,
+  isProduction,
+  normalizeHrefInRuntime,
+  normalizeImagePath,
+  normalizeRoutePath,
+  normalizeSlash,
+  removeBase,
+  removeTrailingSlash,
+  withBase
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@rspress/runtime",
+  "version": "0.0.0-nightly-20231026160444",
+  "description": "The Runtime of Rspress Documentation Framework",
+  "bugs": "https://github.com/web-infra-dev/rspress/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rspress",
+    "directory": "packages/rspress-runtime"
+  },
+  "license": "MIT",
+  "type": "module",
+  "jsnext:source": "./src/runtime/index.ts",
+  "types": "./dist/runtime/index.d.ts",
+  "main": "./dist/runtime/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
+    },
+    "./server": {
+      "default": "./server.js"
+    }
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-router-dom": "^6.8.1",
+    "@rspress/shared": "0.0.0-nightly-20231026160444"
+  },
+  "devDependencies": {
+    "@modern-js/tsconfig": "2.38.0",
+    "@modern-js/types": "2.38.0",
+    "@types/jest": "^26.0.9",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "husky": "^8",
+    "lint-staged": "~13.1.0",
+    "prettier": "^2.6.2",
+    "typescript": "^5"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.sass",
+    "*.scss",
+    "**/virtual-global-styles.js",
+    "virtual-global-styles",
+    "./src/theme-default/styles/index.ts"
+  ],
+  "files": [
+    "bin",
+    "dist",
+    "src",
+    "runtime.ts",
+    "server.js"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "modern build -w",
+    "build": "modern build",
+    "reset": "rimraf ./**/node_modules",
+    "lint": "modern lint",
+    "change": "modern change",
+    "bump": "modern bump",
+    "pre": "modern pre",
+    "change-status": "modern change-status",
+    "gen-release-note": "modern gen-release-note",
+    "release": "modern release",
+    "new": "modern new",
+    "test": "echo nothing",
+    "upgrade": "modern upgrade"
+  }
+}

package/server.js

@@ -0,0 +1 @@
+export { StaticRouter } from 'react-router-dom/server';

package/src/.eslintrc.cjs

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};

package/src/runtime/Content.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { ReactNode, Suspense, memo, ReactElement } from 'react';
+import { matchRoutes, useLocation } from 'react-router-dom';
+import siteData from 'virtual-site-data';
+import { normalizeRoutePath } from './utils';
+import { useViewTransition } from './hooks';
+
+const { routes } = process.env.__SSR__
+  ? (require('virtual-routes-ssr') as typeof import('virtual-routes-ssr'))
+  : (require('virtual-routes') as typeof import('virtual-routes'));
+
+function TransitionContentImpl(props: { el: ReactElement }) {
+  let element = props.el;
+  if (siteData?.themeConfig?.enableContentAnimation) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    element = useViewTransition(props.el);
+  }
+  return element;
+}
+
+const TransitionContent = memo(
+  TransitionContentImpl,
+  (prevProps, nextProps) => prevProps.el === nextProps.el,
+);
+
+export const Content = ({ fallback = <></> }: { fallback?: ReactNode }) => {
+  const { pathname } = useLocation();
+  const matched = matchRoutes(routes, normalizeRoutePath(pathname));
+  if (!matched) {
+    return <div></div>;
+  }
+  const routesElement = matched[0].route.element;
+
+  // React 17 Suspense SSR is not supported
+  if (!process.env.__IS_REACT_18__ && process.env.__SSR__) {
+    return routesElement;
+  }
+
+  return (
+    <Suspense fallback={fallback}>
+      <TransitionContent el={routesElement} />
+    </Suspense>
+  );
+};

package/src/runtime/NoSSR.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+export function NoSSR(props: { children: React.ReactNode }) {
+  const { children } = props;
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  } else {
+    return <>{children}</>;
+  }
+}

package/src/runtime/global.d.ts

@@ -0,0 +1,20 @@
+declare module 'virtual-routes' {
+  export { Route } from 'node/route/RouteService';
+
+  export const routes: Route[];
+}
+
+declare module 'virtual-routes-ssr' {
+  export { Route } from 'node/route/RouteService';
+
+  export const routes: Route[];
+}
+
+declare module 'virtual-site-data' {
+  import { SiteData, DefaultThemeConfig } from '@rspress/shared';
+
+  const data: SiteData<DefaultThemeConfig>;
+  export default data;
+}
+
+declare module 'virtual-i18n-text';

package/src/runtime/hooks.ts

@@ -0,0 +1,110 @@
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { PageData } from '@rspress/shared';
+import i18nTextData from 'virtual-i18n-text';
+import { flushSync } from 'react-dom';
+
+// Type shim for window.__EDEN_PAGE_DATA__
+declare global {
+  interface Window {
+    __MODERN_PAGE_DATA__: any;
+  }
+}
+interface IDataContext {
+  data: PageData;
+  setData?: (data: PageData) => void;
+}
+
+interface IThemeContext {
+  theme: 'light' | 'dark';
+  setTheme?: (theme: 'light' | 'dark') => void;
+}
+
+export const DataContext = createContext({} as IDataContext);
+
+export const ThemeContext = createContext({} as IThemeContext);
+
+export function usePageData() {
+  const ctx = useContext(DataContext);
+  return ctx.data;
+}
+
+export function useLang(): string {
+  const ctx = useContext(DataContext);
+  return ctx.data.page.lang || '';
+}
+
+export function useVersion(): string {
+  const ctx = useContext(DataContext);
+  return ctx.data.page.version || '';
+}
+
+export function useDark() {
+  const ctx = useContext(ThemeContext);
+  return ctx.theme === 'dark';
+}
+
+export function useI18n<T = Record<string, Record<string, string>>>() {
+  const lang = useLang();
+
+  return (key: keyof T) => i18nTextData[key][lang];
+}
+
+declare global {
+  interface Document {
+    startViewTransition: (callback: () => void) => void;
+  }
+}
+
+/**
+ * There is a pitfall.
+ * I was working on the navigation between pages with hash. eg. from `guide/start` -> `config/repress#nav`
+ *    I need a time to dispatch an event so that the sideEffect.ts would know that
+ *    the dom is attached to the browser. Otherwise the scroll position and the
+ *    animation would be incorrect. You can search for `RspressReloadContent` in this codebase
+ *    to findout the logic that are consuming the event.
+ * The reason I didn't write it here is that I hope the logic of handling scroll and position
+ *    could be in one place so that people wouldn't be confused.
+ */
+export function useViewTransition(dom) {
+  /**
+   * use a pesudo element to hold the actual JSX element so we can schedule the
+   * update later in sync
+   */
+  const [element, setElement] = useState(dom);
+
+  useLayoutEffect(() => {
+    if (document.startViewTransition && element !== dom) {
+      /**
+       * the browser will take a screenshot here
+       */
+      document.startViewTransition(() => {
+        /**
+         * react will batch all the updates in callback and flush it sync
+         */
+        flushSync(() => {
+          setElement(dom);
+        });
+        /**
+         * react flushed the dom to browser
+         * and the browser will start the animation
+         */
+        /**
+         * dispatchEvent for several logic
+         */
+        window.dispatchEvent(new Event('RspressReloadContent'));
+      });
+    } else {
+      flushSync(() => {
+        setElement(dom);
+      });
+      /**
+       * dispatchEvent for several logic
+       */
+      window.dispatchEvent(new Event('RspressReloadContent'));
+    }
+  }, [dom]);
+  /**
+   * take this element to the actual VDOM tree
+   */
+  return element;
+}

package/src/runtime/index.ts

@@ -0,0 +1,22 @@
+export * from './hooks';
+export * from './Content';
+export {
+  normalizeHrefInRuntime,
+  normalizeImagePath,
+  withBase,
+  removeBase,
+  addLeadingSlash,
+  removeTrailingSlash,
+  normalizeSlash,
+  isProduction,
+  normalizeRoutePath,
+  isEqualPath,
+} from './utils';
+export {
+  useLocation,
+  useNavigate,
+  matchRoutes,
+  BrowserRouter,
+} from 'react-router-dom';
+export { Helmet } from 'react-helmet-async';
+export { NoSSR } from './NoSSR';

package/src/runtime/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  },
+  "include": ["./**/*", "../../server.js"]
+}

package/src/runtime/utils.ts

@@ -0,0 +1,46 @@
+import siteData from 'virtual-site-data';
+import {
+  addLeadingSlash,
+  removeTrailingSlash,
+  normalizeSlash,
+  isProduction,
+  normalizeHref,
+  withBase as rawWithBase,
+  removeBase as rawRemoveBase,
+  isExternalUrl,
+} from '@rspress/shared';
+
+export function normalizeRoutePath(routePath: string) {
+  return decodeURIComponent(routePath)
+    .replace(/\.html$/, '')
+    .replace(/\/index$/, '/');
+}
+
+export function withBase(url = '/'): string {
+  return rawWithBase(url, siteData.base);
+}
+
+export function removeBase(url: string): string {
+  return rawRemoveBase(url, siteData.base);
+}
+
+export function isEqualPath(a: string, b: string) {
+  return (
+    withBase(normalizeHrefInRuntime(a)) === withBase(normalizeHrefInRuntime(b))
+  );
+}
+
+export function normalizeHrefInRuntime(a: string) {
+  const cleanUrls = Boolean(siteData?.route?.cleanUrls);
+  return normalizeHref(a, cleanUrls);
+}
+
+export function normalizeImagePath(imagePath: string) {
+  if (isExternalUrl(imagePath)) {
+    return imagePath;
+  }
+
+  return withBase(imagePath);
+}
+
+export { addLeadingSlash, removeTrailingSlash, normalizeSlash, isProduction };