@modern-js/runtime 1.16.1 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @modern-js/runtime
 
+## 1.17.0
+
+### Patch Changes
+
+- 77d3a38: feat: remove `.runtime-exports/index.js` export
+
+  feat: 移除 `.runtime-exports/index.js` 导出
+
+- 492437f: fix: runtime type
+
+  fix: 修复 runtime 类型定义
+
+- c3d4a6a: feat: support react 18 ssr
+  feat: 支持 React 18 下使用 SSR
+- Updated dependencies [1b9176f]
+- Updated dependencies [77d3a38]
+- Updated dependencies [151329d]
+- Updated dependencies [5af9472]
+- Updated dependencies [6b6a534]
+- Updated dependencies [6b43a2b]
+- Updated dependencies [a7be124]
+- Updated dependencies [31547b4]
+  - @modern-js/utils@1.17.0
+  - @modern-js/webpack@1.17.0
+  - @modern-js/plugin@1.17.0
+
 ## 1.16.1
 
 ### Patch Changes

package/dist/js/modern/cli/index.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache, isReact18 } from '@modern-js/utils';
+import { PLUGIN_SCHEMAS, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -8,19 +8,15 @@ export default (() => ({
   post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
   usePlugins: [PluginState(), PluginRouter(), PluginSSR()],
   setup: api => {
-    let runtimeExportsUtils = {};
     return {
       config() {
         const dir = api.useAppContext().internalDirectory || '';
-        runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
         process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
         return {
           runtime: {},
           runtimeByEntries: {},
           source: {
             alias: {
-              '@modern-js/runtime$': runtimeExportsUtils.getPath(),
-
               /**
                * twin.macro inserts styled-components into the code during the compilation process
                * But it will not be installed under the user project.
@@ -37,11 +33,6 @@ export default (() => ({
         return PLUGIN_SCHEMAS['@modern-js/runtime'];
       },
 
-      addRuntimeExports() {
-        const runtimePackage = path.resolve(__dirname, '../../../../');
-        runtimeExportsUtils.addExport(`export * from '${runtimePackage}'`);
-      },
-
       async beforeRestart() {
         cleanRequireCache([require.resolve("../state/cli"), require.resolve("../router/cli"), require.resolve("../ssr/cli")]);
       }

package/dist/js/modern/core/compatible.js

@@ -110,7 +110,7 @@ id,
 /**
  * root.render need use root to run function
  */
-root, render = defaultReactDOM.render, hydrate = defaultReactDOM.hydrate) => {
+root, ReactDOM = defaultReactDOM) => {
   let App = BootApp;
   let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -178,17 +178,17 @@ root, render = defaultReactDOM.render, hydrate = defaultReactDOM.hydrate) => {
 
       const ModernRender = App => {
         if (IS_REACT18) {
-          root.render(App);
+          (root || ReactDOM.createRoot(rootElement)).render(App);
         } else {
-          render(App, rootElement);
+          ReactDOM.render(App, rootElement);
         }
       };
 
       const ModernHydrate = (App, callback) => {
         if (IS_REACT18) {
-          hydrate(rootElement, App);
+          ReactDOM.hydrateRoot(rootElement, App);
         } else {
-          hydrate(App, rootElement, callback);
+          ReactDOM.hydrate(App, rootElement, callback);
         }
       };
 

package/dist/js/modern/core/index.js

@@ -1,6 +1,6 @@
 export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from "./plugin";
-export { defineConfig, getConfig } from "./app-config";
-// compatible
+export { defineConfig, getConfig } from "./app-config"; // compatible
+
 export * from "./compatible";
 export { RuntimeReactContext } from "../runtime-context";
 export * from "./loader";

package/dist/js/modern/ssr/index.js

@@ -25,11 +25,10 @@ const ssr = () => ({
       }) => {
         var _window, _window$_SSR_DATA;
 
-        const renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
+        // if render level not exist, use client render
+        const renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel) || RenderLevel.CLIENT_RENDER; // client render and server prefetch use same logic
 
-        if (renderLevel === RenderLevel.CLIENT_RENDER) {
-          // prefetch block render while csr
-          //   await (App as any)?.prefetch?.(context);
+        if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
           ModernRender( /*#__PURE__*/_jsx(App, {
             context: context
           }));
@@ -63,7 +62,8 @@ const ssr = () => ({
           });
         } else {
           // unknown renderlevel or renderlevel is server prefetch.
-          ModernHydrate( /*#__PURE__*/_jsx(App, {
+          console.warn(`unknow render level: ${renderLevel}, execute render()`);
+          ModernRender( /*#__PURE__*/_jsx(App, {
             context: context
           }));
         }

package/dist/js/node/cli/index.js

@@ -22,19 +22,15 @@ var _default = () => ({
   post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
   usePlugins: [(0, _cli.default)(), (0, _cli3.default)(), (0, _cli2.default)()],
   setup: api => {
-    let runtimeExportsUtils = {};
     return {
       config() {
         const dir = api.useAppContext().internalDirectory || '';
-        runtimeExportsUtils = (0, _utils.createRuntimeExportsUtils)(dir, 'index');
         process.env.IS_REACT18 = (0, _utils.isReact18)(_path.default.join(dir, '../../')).toString();
         return {
           runtime: {},
           runtimeByEntries: {},
           source: {
             alias: {
-              '@modern-js/runtime$': runtimeExportsUtils.getPath(),
-
               /**
                * twin.macro inserts styled-components into the code during the compilation process
                * But it will not be installed under the user project.
@@ -51,12 +47,6 @@ var _default = () => ({
         return _utils.PLUGIN_SCHEMAS['@modern-js/runtime'];
       },
 
-      addRuntimeExports() {
-        const runtimePackage = _path.default.resolve(__dirname, '../../../../');
-
-        runtimeExportsUtils.addExport(`export * from '${runtimePackage}'`);
-      },
-
       async beforeRestart() {
         (0, _utils.cleanRequireCache)([require.resolve("../state/cli"), require.resolve("../router/cli"), require.resolve("../ssr/cli")]);
       }

package/dist/js/node/core/compatible.js

@@ -135,7 +135,7 @@ id,
 /**
  * root.render need use root to run function
  */
-root, render = _reactDom.default.render, hydrate = _reactDom.default.hydrate) => {
+root, ReactDOM = _reactDom.default) => {
   let App = BootApp;
   let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -203,17 +203,17 @@ root, render = _reactDom.default.render, hydrate = _reactDom.default.hydrate) =>
 
       const ModernRender = App => {
         if (IS_REACT18) {
-          root.render(App);
+          (root || ReactDOM.createRoot(rootElement)).render(App);
         } else {
-          render(App, rootElement);
+          ReactDOM.render(App, rootElement);
         }
       };
 
       const ModernHydrate = (App, callback) => {
         if (IS_REACT18) {
-          hydrate(rootElement, App);
+          ReactDOM.hydrateRoot(rootElement, App);
         } else {
-          hydrate(App, rootElement, callback);
+          ReactDOM.hydrate(App, rootElement, callback);
         }
       };
 

package/dist/js/node/ssr/index.js

@@ -55,11 +55,10 @@ const ssr = () => ({
       }) => {
         var _window, _window$_SSR_DATA;
 
-        const renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
+        // if render level not exist, use client render
+        const renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel) || _type.RenderLevel.CLIENT_RENDER; // client render and server prefetch use same logic
 
-        if (renderLevel === _type.RenderLevel.CLIENT_RENDER) {
-          // prefetch block render while csr
-          //   await (App as any)?.prefetch?.(context);
+        if (renderLevel === _type.RenderLevel.CLIENT_RENDER || renderLevel === _type.RenderLevel.SERVER_PREFETCH) {
           ModernRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
             context: context
           }));
@@ -93,7 +92,8 @@ const ssr = () => ({
           });
         } else {
           // unknown renderlevel or renderlevel is server prefetch.
-          ModernHydrate( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+          console.warn(`unknow render level: ${renderLevel}, execute render()`);
+          ModernRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
             context: context
           }));
         }

package/dist/js/treeshaking/cli/index.js

@@ -1,7 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import path from 'path';
-import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache, isReact18 } from '@modern-js/utils';
+import { PLUGIN_SCHEMAS, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -11,19 +11,15 @@ export default (function () {
     post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
     usePlugins: [PluginState(), PluginRouter(), PluginSSR()],
     setup: function setup(api) {
-      var runtimeExportsUtils = {};
       return {
         config: function config() {
           var dir = api.useAppContext().internalDirectory || '';
-          runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
           process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
           return {
             runtime: {},
             runtimeByEntries: {},
             source: {
               alias: {
-                '@modern-js/runtime$': runtimeExportsUtils.getPath(),
-
                 /**
                  * twin.macro inserts styled-components into the code during the compilation process
                  * But it will not be installed under the user project.
@@ -38,10 +34,6 @@ export default (function () {
         validateSchema: function validateSchema() {
           return PLUGIN_SCHEMAS['@modern-js/runtime'];
         },
-        addRuntimeExports: function addRuntimeExports() {
-          var runtimePackage = path.resolve(__dirname, '../../../../');
-          runtimeExportsUtils.addExport("export * from '".concat(runtimePackage, "'"));
-        },
         beforeRestart: function beforeRestart() {
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/js/treeshaking/core/compatible.js

@@ -105,8 +105,7 @@ export var bootstrap = /*#__PURE__*/function () {
    * root.render need use root to run function
    */
   root) {
-    var render,
-        hydrate,
+    var ReactDOM,
         App,
         runner,
         context,
@@ -128,8 +127,7 @@ export var bootstrap = /*#__PURE__*/function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            render = _args.length > 3 && _args[3] !== undefined ? _args[3] : defaultReactDOM.render;
-            hydrate = _args.length > 4 && _args[4] !== undefined ? _args[4] : defaultReactDOM.hydrate;
+            ReactDOM = _args.length > 3 && _args[3] !== undefined ? _args[3] : defaultReactDOM;
             App = BootApp;
             runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -157,7 +155,7 @@ export var bootstrap = /*#__PURE__*/function () {
 
 
             if (id) {
-              _context2.next = 9;
+              _context2.next = 8;
               break;
             }
 
@@ -165,16 +163,16 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 9:
+          case 8:
             isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
 
             if (!isBrowser) {
-              _context2.next = 30;
+              _context2.next = 29;
               break;
             }
 
             if (!isClientArgs(id)) {
-              _context2.next = 27;
+              _context2.next = 26;
               break;
             }
 
@@ -198,10 +196,10 @@ export var bootstrap = /*#__PURE__*/function () {
               ssrContext: ssrData === null || ssrData === void 0 ? void 0 : ssrData.context
             } : {}));
             context.initialData = ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data2 = ssrData.data) === null || _ssrData$data2 === void 0 ? void 0 : _ssrData$data2.initialData;
-            _context2.next = 19;
+            _context2.next = 18;
             return runInit(context);
 
-          case 19:
+          case 18:
             initialData = _context2.sent;
 
             if (initialData) {
@@ -212,17 +210,17 @@ export var bootstrap = /*#__PURE__*/function () {
 
             ModernRender = function ModernRender(App) {
               if (IS_REACT18) {
-                root.render(App);
+                (root || ReactDOM.createRoot(_rootElement)).render(App);
               } else {
-                render(App, _rootElement);
+                ReactDOM.render(App, _rootElement);
               }
             };
 
             ModernHydrate = function ModernHydrate(App, callback) {
               if (IS_REACT18) {
-                hydrate(_rootElement, App);
+                ReactDOM.hydrateRoot(_rootElement, App);
               } else {
-                hydrate(App, _rootElement, callback);
+                ReactDOM.hydrate(App, _rootElement, callback);
               }
             };
 
@@ -240,14 +238,14 @@ export var bootstrap = /*#__PURE__*/function () {
               }
             }));
 
-          case 27:
+          case 26:
             throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
 
-          case 28:
-            _context2.next = 36;
+          case 27:
+            _context2.next = 35;
             break;
 
-          case 30:
+          case 29:
             Object.assign(context, {
               ssrContext: id,
               isBrowser: false,
@@ -257,10 +255,10 @@ export var bootstrap = /*#__PURE__*/function () {
                 skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
               })
             });
-            _context2.next = 33;
+            _context2.next = 32;
             return runInit(context);
 
-          case 33:
+          case 32:
             _initialData = _context2.sent;
             context.initialData = _initialData;
             return _context2.abrupt("return", runner.server({
@@ -268,7 +266,7 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 36:
+          case 35:
           case "end":
             return _context2.stop();
         }

package/dist/js/treeshaking/core/index.js

@@ -1,6 +1,6 @@
 export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from "./plugin";
-export { defineConfig, getConfig } from "./app-config";
-// compatible
+export { defineConfig, getConfig } from "./app-config"; // compatible
+
 export * from "./compatible";
 export { RuntimeReactContext } from "../runtime-context";
 export * from "./loader";

package/dist/js/treeshaking/ssr/index.js

@@ -25,11 +25,10 @@ var ssr = function ssr() {
                 switch (_context.prev = _context.next) {
                   case 0:
                     App = _ref.App, context = _ref.context, ModernRender = _ref.ModernRender, ModernHydrate = _ref.ModernHydrate;
-                    renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
+                    // if render level not exist, use client render
+                    renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel) || RenderLevel.CLIENT_RENDER; // client render and server prefetch use same logic
 
-                    if (renderLevel === RenderLevel.CLIENT_RENDER) {
-                      // prefetch block render while csr
-                      //   await (App as any)?.prefetch?.(context);
+                    if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
                       ModernRender( /*#__PURE__*/_jsx(App, {
                         context: context
                       }));
@@ -65,7 +64,8 @@ var ssr = function ssr() {
                       });
                     } else {
                       // unknown renderlevel or renderlevel is server prefetch.
-                      ModernHydrate( /*#__PURE__*/_jsx(App, {
+                      console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
+                      ModernRender( /*#__PURE__*/_jsx(App, {
                         context: context
                       }));
                     }

package/dist/types/common.d.ts

@@ -1 +1,8 @@
-export declare const isBrowser: () => boolean;
+import type { StateConfig } from './state';
+import type { RouterConfig } from './router';
+export declare const isBrowser: () => boolean;
+export interface AppConfig {
+  router?: RouterConfig | boolean;
+  state?: StateConfig | boolean;
+  [key: string]: any;
+}

package/dist/types/core/app-config.d.ts

@@ -1,6 +1,4 @@
 import type React from 'react';
-export interface AppConfig {
-  [key: string]: any;
-}
+import { AppConfig } from '../common';
 export declare const getConfig: (Component: React.ComponentType<any>) => AppConfig | undefined;
 export declare const defineConfig: (Component: React.ComponentType<any>, config: AppConfig) => React.ComponentType<any>;

package/dist/types/core/compatible.d.ts

@@ -11,7 +11,12 @@ interface HydrateFunc {
   (container: Element | Document, initialChildren: React.ReactNode): void;
   (initialChildren: React.ReactNode, container: Element | Document, callback?: () => void): void;
 }
-declare type BootStrap<T = unknown> = (App: React.ComponentType, id?: string | Record<string, any> | HTMLElement, root?: any, render?: (children: React.ReactNode, rootElement?: HTMLElement) => void, hydrate?: HydrateFunc) => Promise<T>;
+declare type BootStrap<T = unknown> = (App: React.ComponentType, id: string | Record<string, any> | HTMLElement, root: any, ReactDOM: {
+  render: (children: React.ReactNode, rootElement?: HTMLElement) => void;
+  hydrate: HydrateFunc;
+  createRoot?: (rootElement: HTMLElement) => any;
+  hydrateRoot: HydrateFunc;
+}) => Promise<T>;
 export declare const bootstrap: BootStrap;
 export declare const useRuntimeContext: () => TRuntimeContext;
 export {};

package/dist/types/core/index.d.ts

@@ -1,7 +1,6 @@
 export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from './plugin';
 export type { Plugin } from './plugin';
 export { defineConfig, getConfig } from './app-config';
-export type { AppConfig } from './app-config';
 export * from './compatible';
 export type { TRuntimeContext, RuntimeContext } from '../runtime-context';
 export { RuntimeReactContext } from '../runtime-context';

package/dist/types/core/loader/useLoader.d.ts

@@ -2,6 +2,7 @@ import { LoaderResult } from './loaderManager';
 export interface SSRData {
   loadersData: Record<string, LoaderResult | undefined>;
   initialData?: Record<string, unknown>;
+  storeState?: any;
 }
 export interface SSRContainer {
   data?: SSRData;

package/dist/types/index.d.ts

@@ -1,12 +1,7 @@
 import type { StateConfig } from './state';
 import type { RouterConfig } from './router';
-export type { Plugin, AppConfig } from './core';
+export type { Plugin } from './core';
+export type { AppConfig } from './common';
 export type { BaseRuntimeContext, RuntimeContext, BaseTRuntimeContext, TRuntimeContext } from './runtime-context';
 export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from './core';
-export { StateConfig, RouterConfig };
-declare module './core' {
-  interface AppConfig {
-    router?: RouterConfig | boolean;
-    state?: StateConfig | boolean;
-  }
-}
+export { StateConfig, RouterConfig };

package/dist/types/state/runtime/plugin.d.ts

@@ -1,10 +1,5 @@
 import { createStore } from '@modern-js-reduck/store';
 import type { Plugin } from '../../core';
-declare module '../../core' {
-  interface SSRData {
-    storeState: any;
-  }
-}
 export declare type StateConfig = Parameters<typeof createStore>[0];
 declare const state: (config: StateConfig) => Plugin;
 export default state;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.16.1",
+  "version": "1.17.0",
   "jsnext:source": "./src/index.ts",
   "types": "./type.d.ts",
   "main": "./dist/js/node/index.js",
@@ -140,9 +140,9 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/server": "^5.15.1",
     "@loadable/component": "^5.15.0",
-    "@modern-js/plugin": "1.16.0",
-    "@modern-js/webpack": "1.16.0",
-    "@modern-js/utils": "1.16.0",
+    "@modern-js/plugin": "1.17.0",
+    "@modern-js/webpack": "1.17.0",
+    "@modern-js/utils": "1.17.0",
     "@modern-js-reduck/plugin-auto-actions": "^1.0.2",
     "@modern-js-reduck/plugin-devtools": "^1.0.3",
     "@modern-js-reduck/plugin-effects": "^1.0.2",
@@ -166,16 +166,16 @@
     "ts-jest": "^27.0.4",
     "typescript": "^4",
     "jest": "^27",
-    "@modern-js/core": "1.16.0",
-    "@modern-js/types": "1.16.0",
-    "@modern-js/utils": "1.16.0",
+    "@modern-js/core": "1.17.0",
+    "@modern-js/types": "1.17.0",
+    "@modern-js/utils": "1.17.0",
     "@types/jest": "^27",
     "@types/node": "^14",
     "@types/react-side-effect": "^1.1.1",
     "@types/loadable__webpack-plugin": "^5.7.3",
     "@types/serialize-javascript": "^5.0.1",
-    "@scripts/build": "1.15.0",
-    "@scripts/jest-config": "1.15.0",
+    "@scripts/build": "1.17.0",
+    "@scripts/jest-config": "1.17.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -211,6 +211,7 @@
     }
   },
   "scripts": {
+    "dev": "modern build --watch",
     "new": "modern new",
     "build": "wireit",
     "test": "wireit"