@modern-js/runtime 2.22.0 → 2.22.2-alpha.0

package/dist/js/modern/core/plugin.js

@@ -0,0 +1,58 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import {
+  createManager,
+  createPipeline,
+  createAsyncPipeline
+} from "@modern-js/plugin";
+import { createLoaderManager } from "./loader/loaderManager";
+const hoc = createPipeline();
+const provide = createPipeline();
+const client = createAsyncPipeline();
+const server = createAsyncPipeline();
+const init = createAsyncPipeline();
+const pickContext = createPipeline();
+const runtimeHooks = {
+  hoc,
+  provide,
+  client,
+  server,
+  init,
+  pickContext
+};
+const createRuntime = () => createManager(runtimeHooks);
+const registerInit = (App, _init) => {
+  const originalInit = App.init;
+  App.init = (context) => __async(void 0, null, function* () {
+    if (!context.loaderManager) {
+      context.loaderManager = createLoaderManager({});
+    }
+    yield Promise.all([originalInit == null ? void 0 : originalInit(context), _init == null ? void 0 : _init(context)]);
+  });
+};
+const runtime = createRuntime();
+const { createPlugin } = runtime;
+export {
+  createPlugin,
+  createRuntime,
+  registerInit,
+  runtime
+};

package/dist/js/modern/document/Body.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import {
+  DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_SSRDATASCRIPT_PLACEHOLDER
+} from "./constants";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { DefaultRoot } from "./Root";
+function Body(props) {
+  const { hasSetRoot } = useContext(DocumentStructureContext);
+  const { children } = props;
+  return /* @__PURE__ */ jsxs("body", {
+    children: [
+      hasSetRoot ? null : /* @__PURE__ */ jsx(DefaultRoot, {}),
+      children,
+      `${DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
+      `${DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
+    ]
+  });
+}
+export {
+  Body
+};

package/dist/js/modern/document/DocumentContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+const DocumentContext = React.createContext({
+  config: {},
+  templateParams: {},
+  processEnv: {}
+});
+export {
+  DocumentContext
+};

package/dist/js/modern/document/DocumentStructureContext.js

@@ -0,0 +1,11 @@
+import React from "react";
+const DocumentStructureContext = React.createContext({
+  hasSetHead: false,
+  hasSetScripts: false,
+  hasSetBody: false,
+  hasSetRoot: false,
+  hasSetLinks: false
+});
+export {
+  DocumentStructureContext
+};

package/dist/js/modern/document/Head.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { Scripts } from "./Scripts";
+import { Links } from "./Links";
+import { DOCUMENT_META_PLACEHOLDER } from "./constants";
+function Head(props) {
+  const { hasSetScripts, hasSetLinks } = useContext(DocumentStructureContext);
+  const { children } = props;
+  return /* @__PURE__ */ jsxs("head", {
+    children: [
+      `${DOCUMENT_META_PLACEHOLDER}`,
+      !hasSetLinks && /* @__PURE__ */ jsx(Links, {}),
+      !hasSetScripts && /* @__PURE__ */ jsx(Scripts, {}),
+      children
+    ]
+  });
+}
+function DefaultHead() {
+  return /* @__PURE__ */ jsx("head", {
+    children: `${DOCUMENT_META_PLACEHOLDER}`
+  });
+}
+export {
+  DefaultHead,
+  Head
+};

package/dist/js/modern/document/Html.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Body } from "./Body";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { Head } from "./Head";
+function findTargetChild(tag, children) {
+  return children.find((item) => getEleType(item) === tag);
+}
+function getEleType(ele) {
+  return typeof (ele == null ? void 0 : ele.type) === "function" ? ele.type.name : ele == null ? void 0 : ele.type;
+}
+function findTargetElement(tag, children) {
+  var _a;
+  if (children.length === 0) {
+    return null;
+  }
+  let nextChildren = [];
+  for (const item of children) {
+    if (tag === getEleType(item)) {
+      return item;
+    }
+    if ((_a = item == null ? void 0 : item.props) == null ? void 0 : _a.children) {
+      nextChildren = nextChildren.concat(item.props.children);
+    }
+  }
+  return findTargetElement(tag, nextChildren);
+}
+function Html(props) {
+  const { children } = props;
+  const hasSetHead = Boolean(findTargetChild("Head", children));
+  const hasSetScripts = Boolean(findTargetElement("Scripts", children));
+  const hasSetLinks = Boolean(findTargetElement("Links", children));
+  const hasSetBody = Boolean(findTargetChild("Body", children));
+  const hasSetRoot = Boolean(findTargetElement("Root", children));
+  const notMissMustChild = [
+    hasSetHead,
+    hasSetBody
+  ].every((item) => item);
+  if (!notMissMustChild) {
+    return /* @__PURE__ */ jsx("html", {
+      children: /* @__PURE__ */ jsxs("body", {
+        style: { color: "red" },
+        children: [
+          `Miss the `,
+          [
+            hasSetHead,
+            hasSetBody
+          ].map((item, index) => {
+            return item ? null : [
+              "Head",
+              "Body"
+            ][index];
+          }),
+          ` Element`
+        ]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx("html", {
+    children: /* @__PURE__ */ jsxs(DocumentStructureContext.Provider, {
+      value: {
+        hasSetHead,
+        hasSetScripts,
+        hasSetLinks,
+        hasSetRoot,
+        hasSetBody,
+        docChild: children
+      },
+      children: [
+        !hasSetHead && /* @__PURE__ */ jsx(Head, {}),
+        !hasSetBody && /* @__PURE__ */ jsx(Body, {}),
+        children
+      ]
+    })
+  });
+}
+export {
+  Html
+};

package/dist/js/modern/document/Links.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { DOCUMENT_LINKS_PLACEHOLDER } from "./constants";
+function Links() {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: DOCUMENT_LINKS_PLACEHOLDER
+  });
+}
+export {
+  Links
+};

package/dist/js/modern/document/Root.js

@@ -0,0 +1,33 @@
+import { jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DocumentContext } from "./DocumentContext";
+import { DOCUMENT_SSR_PLACEHOLDER } from "./constants";
+function Root(props) {
+  const { rootId, children } = props;
+  const {
+    templateParams: { mountId = "root" }
+  } = useContext(DocumentContext);
+  return /* @__PURE__ */ jsxs("div", {
+    id: `${rootId || mountId}`,
+    children: [
+      `${DOCUMENT_SSR_PLACEHOLDER}`,
+      children
+    ]
+  });
+}
+function DefaultRoot(props) {
+  const {
+    templateParams: { mountId = "root" }
+  } = useContext(DocumentContext);
+  return /* @__PURE__ */ jsxs("div", {
+    id: `${mountId}`,
+    children: [
+      `${DOCUMENT_SSR_PLACEHOLDER}`,
+      props.children
+    ]
+  });
+}
+export {
+  DefaultRoot,
+  Root
+};

package/dist/js/modern/document/Script.js

@@ -0,0 +1,20 @@
+import { Fragment, jsxs } from "react/jsx-runtime";
+import {
+  DOCUMENT_SCRIPT_PLACEHOLDER_START,
+  DOCUMENT_SCRIPT_PLACEHOLDER_END
+} from "./constants";
+function Script(props) {
+  const { content } = props;
+  const contentStr = content.toString();
+  const contentIIFE = encodeURIComponent(`(${contentStr})()`);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      `${DOCUMENT_SCRIPT_PLACEHOLDER_START}`,
+      `${contentIIFE}`,
+      `${DOCUMENT_SCRIPT_PLACEHOLDER_END}`
+    ]
+  });
+}
+export {
+  Script
+};

package/dist/js/modern/document/Scripts.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { DOCUMENT_SCRIPTS_PLACEHOLDER } from "./constants";
+function Scripts() {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: `${DOCUMENT_SCRIPTS_PLACEHOLDER}`
+  });
+}
+export {
+  Scripts
+};

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

@@ -0,0 +1,228 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import path from "path";
+import React from "react";
+import ReactDomServer from "react-dom/server";
+import { build } from "esbuild";
+import { createDebugger, findExists, fs } from "@modern-js/utils";
+import { DocumentContext } from "../DocumentContext";
+import {
+  DOCUMENT_SCRIPTS_PLACEHOLDER,
+  DOCUMENT_LINKS_PLACEHOLDER,
+  DOCUMENT_FILE_NAME,
+  DOCUMENT_META_PLACEHOLDER,
+  PLACEHOLDER_REPLACER_MAP,
+  DOC_EXT,
+  DOCUMENT_SSR_PLACEHOLDER,
+  DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_SSRDATASCRIPT_PLACEHOLDER,
+  DOCUMENT_SCRIPT_PLACEHOLDER_START,
+  DOCUMENT_SCRIPT_PLACEHOLDER_END,
+  HTML_SEPARATOR
+} from "../constants";
+const debug = createDebugger("html_genarate");
+const getDocumenByEntryName = function(entrypoints, entryName, fallbackDir) {
+  var _a;
+  const entryDir = (_a = entrypoints.find(
+    (item) => item.entryName === entryName
+  )) == null ? void 0 : _a.absoluteEntryDir;
+  const entryDirs = DOC_EXT.map(
+    (item) => `${entryDir}${path.sep}${DOCUMENT_FILE_NAME}.${item}`
+  );
+  const fallbackDirs = fallbackDir ? DOC_EXT.map(
+    (item) => [fallbackDir, "src", `${DOCUMENT_FILE_NAME}.${item}`].join(path.sep)
+  ) : [];
+  const docFile = findExists([...entryDirs, ...fallbackDirs]);
+  return docFile || void 0;
+};
+var cli_default = () => ({
+  name: "@modern-js/plugin-document",
+  pre: ["@modern-js/plugin-analyze"],
+  setup: (api) => __async(void 0, null, function* () {
+    function getDocParams(params) {
+      const { config, templateParameters, entryName } = params;
+      return {
+        processEnv: process.env,
+        config: {
+          output: config.output
+        },
+        entryName,
+        templateParams: templateParameters
+      };
+    }
+    const documentEntry = (entryName, templateParameters) => {
+      const { entrypoints, internalDirectory, appDirectory } = api.useAppContext();
+      const documentFilePath = getDocumenByEntryName(
+        entrypoints,
+        entryName,
+        appDirectory
+      );
+      if (!documentFilePath) {
+        return null;
+      }
+      return (_0) => __async(void 0, [_0], function* ({ htmlWebpackPlugin }) {
+        const documentParams = getDocParams({
+          config: api.useConfigContext(),
+          entryName,
+          templateParameters
+        });
+        const tempTsConfigFile = path.join(
+          internalDirectory,
+          `./document/_tempTsconfig.json`
+        );
+        const userTsConfigFilePath = path.join(appDirectory, "tsconfig.json");
+        let tsConfig;
+        try {
+          tsConfig = yield require(userTsConfigFilePath);
+        } catch (err) {
+          tsConfig = {};
+        }
+        if (tsConfig == null ? void 0 : tsConfig.compilerOptions) {
+          tsConfig.compilerOptions.jsx = "react-jsx";
+        } else {
+          tsConfig.compilerOptions = {
+            jsx: "react-jsx"
+          };
+        }
+        fs.outputFileSync(tempTsConfigFile, JSON.stringify(tsConfig));
+        const htmlOutputFile = path.join(
+          internalDirectory,
+          `./document/_${entryName}.html.js`
+        );
+        yield build({
+          entryPoints: [documentFilePath],
+          outfile: htmlOutputFile,
+          platform: "node",
+          tsconfig: tempTsConfigFile,
+          target: "es6",
+          loader: {
+            ".ts": "ts",
+            ".tsx": "tsx"
+          },
+          bundle: true,
+          plugins: [
+            {
+              name: "make-all-packages-external",
+              setup(build2) {
+                build2.onResolve(
+                  { filter: /^[^./]|^\.[^./]|^\.\.[^/]/ },
+                  (args) => {
+                    let external = true;
+                    if (args.kind === "entry-point") {
+                      external = false;
+                    }
+                    return {
+                      path: args.path,
+                      external
+                    };
+                  }
+                );
+              }
+            }
+          ]
+        });
+        delete require.cache[require.resolve(htmlOutputFile)];
+        const Document = (yield require(htmlOutputFile)).default;
+        const HTMLElement = React.createElement(
+          DocumentContext.Provider,
+          { value: documentParams },
+          React.createElement(Document, null)
+        );
+        let html = ReactDomServer.renderToStaticMarkup(HTMLElement);
+        debug("entry %s's document jsx rendered html: %o", entryName, html);
+        const scripts = [
+          htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "script").join(""),
+          htmlWebpackPlugin.tags.bodyTags.toString()
+        ].join("");
+        const links = [
+          htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "link").join("")
+        ].join("");
+        const metas = [
+          templateParameters.meta,
+          htmlWebpackPlugin.tags.headTags.filter(
+            (item) => item.tagName !== "script" && item.tagName !== "link"
+          ).join("")
+        ].join("");
+        if (html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_START) && html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_END)) {
+          html = html.replaceAll(
+            new RegExp(
+              `${DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${DOCUMENT_SCRIPT_PLACEHOLDER_END}`,
+              "g"
+            ),
+            (_scriptStr, $1) => `<script>${decodeURIComponent($1)}<\/script>`
+          );
+        }
+        const finalHtml = `<!DOCTYPE html>${html}`.replace(DOCUMENT_META_PLACEHOLDER, metas).replace(DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR).replace(DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(DOCUMENT_LINKS_PLACEHOLDER, links).replace(
+          DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+          PLACEHOLDER_REPLACER_MAP[DOCUMENT_CHUNKSMAP_PLACEHOLDER]
+        ).replace(
+          DOCUMENT_SSRDATASCRIPT_PLACEHOLDER,
+          PLACEHOLDER_REPLACER_MAP[DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]
+        );
+        return finalHtml;
+      });
+    };
+    return {
+      config: () => {
+        return {
+          tools: {
+            htmlPlugin: (options, entry) => {
+              const hackParameters = typeof (options == null ? void 0 : options.templateParameters) === "function" ? options == null ? void 0 : options.templateParameters(
+                {},
+                {},
+                {},
+                {}
+              ) : __spreadValues({}, options == null ? void 0 : options.templateParameters);
+              const templateContent = documentEntry(
+                entry.entryName,
+                hackParameters
+              );
+              const documentHtmlOptions = templateContent ? {
+                templateContent,
+                inject: false
+              } : {};
+              return __spreadValues(__spreadValues({}, options), documentHtmlOptions);
+            }
+          }
+        };
+      }
+    };
+  })
+});
+export {
+  cli_default as default
+};

package/dist/js/modern/document/constants.js

@@ -0,0 +1,49 @@
+const DOC_EXT = ["jsx", "tsx", "ts", "js"];
+const DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
+const HTML_SEPARATOR = "<!--<?- html ?>-->";
+const HTML_CHUNKSMAP_SEPARATOR = "<!--<?- chunksMap.js ?>-->";
+const HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
+const DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
+const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(
+  HTML_CHUNKSMAP_SEPARATOR
+);
+const DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(
+  HTML_SSRDATASCRIPT_SEPARATOR
+);
+const DOCUMENT_FILE_NAME = "Document";
+const DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent(
+  "<!-- chunk scripts placeholder -->"
+);
+const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent(
+  "<!-- chunk links placeholder -->"
+);
+const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
+const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent(
+  "<!-- script-start -->"
+);
+const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent(
+  "<!-- script-end -->"
+);
+const PLACEHOLDER_REPLACER_MAP = {
+  [DOCUMENT_NO_SCRIPTE_PLACEHOLDER]: `We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.`,
+  [DOCUMENT_SSR_PLACEHOLDER]: HTML_SEPARATOR,
+  [DOCUMENT_CHUNKSMAP_PLACEHOLDER]: HTML_CHUNKSMAP_SEPARATOR,
+  [DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]: HTML_SSRDATASCRIPT_SEPARATOR
+};
+export {
+  DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_FILE_NAME,
+  DOCUMENT_LINKS_PLACEHOLDER,
+  DOCUMENT_META_PLACEHOLDER,
+  DOCUMENT_NO_SCRIPTE_PLACEHOLDER,
+  DOCUMENT_SCRIPTS_PLACEHOLDER,
+  DOCUMENT_SCRIPT_PLACEHOLDER_END,
+  DOCUMENT_SCRIPT_PLACEHOLDER_START,
+  DOCUMENT_SSRDATASCRIPT_PLACEHOLDER,
+  DOCUMENT_SSR_PLACEHOLDER,
+  DOC_EXT,
+  HTML_CHUNKSMAP_SEPARATOR,
+  HTML_SEPARATOR,
+  HTML_SSRDATASCRIPT_SEPARATOR,
+  PLACEHOLDER_REPLACER_MAP
+};

package/dist/js/modern/document/index.js

@@ -0,0 +1,10 @@
+export * from "./Html";
+export * from "./DocumentContext";
+export * from "./DocumentStructureContext";
+export * from "./Head";
+export * from "./Body";
+export * from "./Root";
+export * from "./Links";
+export * from "./Scripts";
+export * from "./Script";
+export * from "./constants";

package/dist/js/modern/exports/head.js

@@ -0,0 +1,6 @@
+import head from "react-helmet";
+var head_default = head;
+export * from "react-helmet";
+export {
+  head_default as default
+};

package/dist/js/modern/exports/loadable.js

@@ -0,0 +1,6 @@
+import loadable from "@loadable/component";
+var loadable_default = loadable;
+export * from "@loadable/component";
+export {
+  loadable_default as default
+};

package/dist/js/modern/exports/server.js

@@ -0,0 +1,4 @@
+const hook = (attacher) => attacher;
+export {
+  hook
+};

package/dist/js/modern/exports/styled.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+var styled_default = styled;
+export * from "styled-components";
+export {
+  styled_default as default
+};

package/dist/js/modern/index.js

@@ -0,0 +1,22 @@
+import { isBrowser } from "./common";
+import {
+  createApp,
+  createPlugin,
+  useLoader,
+  bootstrap,
+  RuntimeReactContext,
+  defineConfig,
+  registerInit,
+  useRuntimeContext
+} from "./core";
+export {
+  RuntimeReactContext,
+  bootstrap,
+  createApp,
+  createPlugin,
+  defineConfig,
+  isBrowser,
+  registerInit,
+  useLoader,
+  useRuntimeContext
+};