minista 2.3.2 → 2.4.0

package/README.md

@@ -97,6 +97,20 @@ export default defineConfig({
     bundle: {
       outName: "bundle", // string
     },
+    partial: {
+      usePreact: false, // boolean
+      useIntersectionObserver: true, // boolean
+      outName: "partial", // string
+      rootAttrSuffix: "partial-hydration", // string
+      rootValuePrefix: "ph", // string
+      rootDOMElement: "div", // "div" | "span"
+      rootStyle: { display: "contents" }, // React.CSSProperties
+      intersectionObserverOptions: {
+        root: null, // Element | null
+        rootMargin: "0px", // string
+        thresholds: [1], // ReadonlyArray<number>
+      },
+    },
     images: {
       outDir: "assets/images", // string
       outName: "[name]", // string

package/client.d.ts

@@ -16,6 +16,13 @@ declare module "*.svg" {
   export default ReactComponent
 }
 
+declare module "*?ph" {
+  import * as React from "react"
+
+  const ReactComponent: React.FunctionComponent<React.PropsWithChildren>
+  export default ReactComponent
+}
+
 declare module "*?raw" {
   const src: string
   export default src

package/dist/build.d.ts

@@ -1,7 +1,7 @@
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
 import type { Config as SvgrOptions } from "@svgr/core";
 import type { InlineConfig } from "vite";
-import type { MinistaResolveConfig, RootStaticContent, RootJsxContent, GlobalStaticData, GetGlobalStaticData, PageJsxContent, StaticData, StaticDataItem, GetStaticData } from "./types.js";
+import type { MinistaResolveConfig, RootStaticContent, RootJsxContent, GlobalStaticData, GetGlobalStaticData, PageJsxContent, StaticData, StaticDataItem, GetStaticData, PartialModules } from "./types.js";
 export declare function buildTempPages(entryPoints: string[], buildOptions: {
     outBase: string;
     outDir: string;
@@ -21,9 +21,11 @@ export declare function buildStaticPage(entryPoint: string, outFile: string, roo
 export declare function buildStaticData(getStaticData: GetStaticData): Promise<StaticData>;
 export declare function buildHtmlPage(pageJsxContent: PageJsxContent, staticDataItem: StaticDataItem, routePath: string, rootStaticContent: RootStaticContent, assetsTagStr: string, frontmatter: any, outDir: string): Promise<void>;
 export declare function buildTempAssets(viteConfig: InlineConfig, buildOptions: {
+    input: string;
     bundleOutName: string;
     outDir: string;
     assetDir: string;
+    generateJs: boolean;
 }): Promise<void>;
 export declare function buildAssetsTagStr(entryPoints: string[], buildOptions: {
     outBase: string;
@@ -35,4 +37,27 @@ export declare function buildViteImporterAssets(entry: {
     [key: string]: string;
 }): Promise<void>;
 export declare function buildViteImporterBlankAssets(): Promise<void>;
+export declare function buildPartialModules(moduleFilePaths: string[], config: MinistaResolveConfig): Promise<PartialModules>;
+export declare function buildPartialStringIndex(partialModules: PartialModules, buildOptions: {
+    outFile: string;
+}): Promise<void>;
+export declare function buildPartialStringBundle(entryPoint: string, buildOptions: {
+    outFile: string;
+    mdxConfig: MdxOptions;
+    svgrOptions: SvgrOptions;
+}): Promise<void>;
+export declare function buildPartialStringInitial(entryPoint: string, partialModules: PartialModules, buildOptions: {
+    outFile: string;
+}): Promise<void>;
+export declare function buildPartialHydrateIndex(partialModules: PartialModules, config: MinistaResolveConfig, buildOptions: {
+    outFile: string;
+}): Promise<void>;
+export declare function buildPartialHydrateAssets(viteConfig: InlineConfig, buildOptions: {
+    input: string;
+    bundleOutName: string;
+    outDir: string;
+    assetDir: string;
+    generateJs: boolean;
+    usePreact: boolean;
+}): Promise<void>;
 export declare function buildCopyDir(targetDir: string, outDir: string, log?: "public" | "assets"): Promise<void>;

package/dist/build.js

@@ -25,31 +25,56 @@ import pc from "picocolors";
 import { Fragment } from "react";
 import { build as esBuild } from "esbuild";
 import mdx from "@mdx-js/esbuild";
-import { build as viteBuild, mergeConfig as mergeViteConfig } from "vite";
+import {
+  build as viteBuild,
+  defineConfig as defineViteConfig,
+  mergeConfig as mergeViteConfig
+} from "vite";
 import { systemConfig } from "./system.js";
-import { resolvePlugin, svgrPlugin, rawPlugin } from "./esbuild.js";
+import { getFilePath } from "./path.js";
+import {
+  resolvePlugin,
+  svgrPlugin,
+  rawPlugin,
+  partialHydrationPlugin
+} from "./esbuild.js";
 import { renderHtml } from "./render.js";
-import { slashEnd } from "./utils.js";
+import { slashEnd, reactStylesToString } from "./utils.js";
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const ministaPkgUrl = path.resolve(__dirname + "/../package.json");
+const ministaPkgUrlRelative = path.relative(".", ministaPkgUrl);
+const ministaPkg = JSON.parse(fs.readFileSync(ministaPkgUrlRelative, "utf8"));
+const userPkgPath = path.resolve("package.json");
+const userPkgFilePath = path.relative(process.cwd(), userPkgPath);
+const userPkg = JSON.parse(fs.readFileSync(userPkgFilePath, "utf8"));
+const esbuildExternals = [
+  ...Object.keys(ministaPkg.dependencies || {}),
+  ...Object.keys(ministaPkg.devDependencies || {}),
+  ...Object.keys(ministaPkg.peerDependencies || {}),
+  ...Object.keys(userPkg.dependencies || {}),
+  ...Object.keys(userPkg.devDependencies || {}),
+  ...Object.keys(userPkg.peerDependencies || {}),
+  "*.css",
+  "*.scss",
+  "*.sass"
+];
+const esbuildLoaders = {
+  ".jpg": "file",
+  ".jpeg": "file",
+  ".png": "file",
+  ".gif": "file",
+  ".webp": "file",
+  ".avif": "file",
+  ".eot": "file",
+  ".woff": "file",
+  ".woff2": "file"
+};
+const userPkgHasPreact = [
+  ...Object.keys(userPkg.dependencies || {}),
+  ...Object.keys(userPkg.devDependencies || {})
+].includes("preact");
 async function buildTempPages(entryPoints, buildOptions) {
-  const ministaPkgUrl = path.resolve(__dirname + "/../package.json");
-  const ministaPkgUrlRelative = path.relative(".", ministaPkgUrl);
-  const ministaPkg = JSON.parse(fs.readFileSync(ministaPkgUrlRelative, "utf8"));
-  const userPkgPath = path.resolve("package.json");
-  const userPkgFilePath = path.relative(process.cwd(), userPkgPath);
-  const userPkg = JSON.parse(fs.readFileSync(userPkgFilePath, "utf8"));
-  const esbuildExternal = [
-    ...Object.keys(ministaPkg.dependencies || {}),
-    ...Object.keys(ministaPkg.devDependencies || {}),
-    ...Object.keys(ministaPkg.peerDependencies || {}),
-    ...Object.keys(userPkg.dependencies || {}),
-    ...Object.keys(userPkg.devDependencies || {}),
-    ...Object.keys(userPkg.peerDependencies || {}),
-    "*.css",
-    "*.scss",
-    "*.sass"
-  ];
   await esBuild({
     entryPoints,
     outbase: buildOptions.outBase,
@@ -62,14 +87,16 @@ async function buildTempPages(entryPoints, buildOptions) {
       path.resolve(__dirname + "/../lib/shim-react.js"),
       path.resolve(__dirname + "/../lib/shim-fetch.js")
     ],
-    external: esbuildExternal,
+    external: esbuildExternals,
+    loader: esbuildLoaders,
     plugins: [
       mdx(buildOptions.mdxConfig),
       resolvePlugin({
         "react/jsx-runtime": "react/jsx-runtime.js"
       }),
       svgrPlugin(buildOptions.svgrOptions),
-      rawPlugin()
+      rawPlugin(),
+      partialHydrationPlugin()
     ]
   }).catch(() => process.exit(1));
 }
@@ -184,8 +211,21 @@ async function buildHtmlPage(pageJsxContent, staticDataItem, routePath, rootStat
       })());
     }
   };
-  const html = await renderHtml(/* @__PURE__ */ React.createElement(RenderComponent, null), assetsTagStr);
-  const replacedHtml = html.replace(/<div class="minista-comment" hidden="">(.+?)<\/div>/g, "\n<!-- $1 -->");
+  const renderdHtml = await renderHtml(/* @__PURE__ */ React.createElement(RenderComponent, null), assetsTagStr);
+  const html = [renderdHtml];
+  const stringInitial = getFilePath(systemConfig.temp.partialHydration.outDir, "string-initial", "json");
+  if (stringInitial) {
+    const targetRelative = path.relative(".", stringInitial);
+    const targetJson = JSON.parse(fs.readFileSync(targetRelative, "utf8"));
+    const items = targetJson.items;
+    items.map((item) => {
+      const dummy = `<div data-partial-hydration="${item.id}"></div>`;
+      const reg = new RegExp(`${dummy}`, "g");
+      html[0] = html[0].replace(reg, item.html);
+      return;
+    });
+  }
+  const replacedHtml = html[0].replace(/<div class="minista-comment" hidden="">(.+?)<\/div>/g, "\n<!-- $1 -->");
   await fs.outputFile(routePath, replacedHtml).then(() => {
     console.log(`${pc.bold(pc.green("BUILD"))} ${pc.bold(routePath)}`);
   }).catch((err) => {
@@ -193,16 +233,16 @@ async function buildHtmlPage(pageJsxContent, staticDataItem, routePath, rootStat
   });
 }
 async function buildTempAssets(viteConfig, buildOptions) {
-  const customConfig = {
+  const customConfig = defineViteConfig({
     build: {
       write: false,
       rollupOptions: {
         input: {
-          __minista_bundle_assets: path.resolve(__dirname + "/../dist/bundle.js")
+          __minista_bundle_assets: buildOptions.input
         }
       }
     }
-  };
+  });
   const mergedConfig = mergeViteConfig(viteConfig, customConfig);
   const result = await viteBuild(mergedConfig);
   const items = result.output;
@@ -212,6 +252,10 @@ async function buildTempAssets(viteConfig, buildOptions) {
         const customFileName = slashEnd(buildOptions.outDir) + buildOptions.bundleOutName + ".css";
         return (item == null ? void 0 : item.source) && fs.outputFile(customFileName, item == null ? void 0 : item.source);
       } else if (item.fileName.match(/__minista_bundle_assets\.js/)) {
+        if (buildOptions.generateJs) {
+          const customFileName = slashEnd(buildOptions.outDir) + buildOptions.bundleOutName + ".js";
+          return (item == null ? void 0 : item.code) && fs.outputFile(customFileName, item == null ? void 0 : item.code);
+        }
         return;
       } else {
         const customFileName = buildOptions.outDir + item.fileName.replace(buildOptions.assetDir, "");
@@ -317,6 +361,199 @@ async function buildViteImporterBlankAssets() {
     console.error(err);
   });
 }
+async function buildPartialModules(moduleFilePaths, config) {
+  const moduleData = [];
+  await Promise.all(moduleFilePaths.map(async (entryPoint) => {
+    const entryPointRelative = path.relative(".", entryPoint);
+    const underUniqueId = path.parse(entryPoint).name;
+    const importer = await fs.readFile(entryPointRelative, "utf8");
+    moduleData.push({ id: underUniqueId, importer });
+    return;
+  }));
+  const sortedModuleData = moduleData.sort((a, b) => {
+    const nameA = a.importer.toUpperCase();
+    const nameB = b.importer.toUpperCase();
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    return 0;
+  });
+  const rootStyle = config.assets.partial.rootStyle;
+  const hasRootStyle = Object.entries(rootStyle).length !== 0;
+  const partialModules = sortedModuleData.map((item, index) => {
+    return {
+      id: item.id,
+      phId: `PH_${index + 1}`,
+      phDomId: `${config.assets.partial.rootValuePrefix}-${index + 1}`,
+      htmlId: `html_${index + 1}`,
+      targetsId: `targets_${index + 1}`,
+      importer: item.importer,
+      rootAttr: `data-${config.assets.partial.rootAttrSuffix}`,
+      rootDOMElement: config.assets.partial.rootDOMElement,
+      rootStyleStr: hasRootStyle ? reactStylesToString(rootStyle) : ""
+    };
+  });
+  return partialModules;
+}
+async function buildPartialStringIndex(partialModules, buildOptions) {
+  const tmpImporters = partialModules.map((module) => {
+    return `import ${module.phId} from "${module.importer}"`;
+  });
+  const tmpRenders = partialModules.map((module) => {
+    return `// ${module.phId}
+const ${module.htmlId} = renderToString(React.createElement(${module.phId}))`;
+  });
+  const tmpExports = partialModules.map((module) => module.htmlId);
+  const tmpImporterStr = tmpImporters.join("\n");
+  const tmpRendersStr = tmpRenders.join("\n");
+  const tmpExportsStr = tmpExports.join(", ");
+  const outFile = buildOptions.outFile;
+  const template = `import { renderToString } from "react-dom/server.js"
+${tmpImporterStr}
+
+${tmpRendersStr}
+
+export { ${tmpExportsStr} }`;
+  await fs.outputFile(outFile, template).catch((err) => {
+    console.error(err);
+  });
+}
+async function buildPartialStringBundle(entryPoint, buildOptions) {
+  await esBuild({
+    entryPoints: [entryPoint],
+    outfile: buildOptions.outFile,
+    bundle: true,
+    format: "esm",
+    platform: "node",
+    inject: [
+      path.resolve(__dirname + "/../lib/shim-react.js")
+    ],
+    external: esbuildExternals,
+    loader: esbuildLoaders,
+    plugins: [
+      mdx(buildOptions.mdxConfig),
+      resolvePlugin({
+        "react/jsx-runtime": "react/jsx-runtime.js"
+      }),
+      svgrPlugin(buildOptions.svgrOptions),
+      rawPlugin()
+    ]
+  }).catch(() => process.exit(1));
+}
+async function buildPartialStringInitial(entryPoint, partialModules, buildOptions) {
+  const outFile = buildOptions.outFile;
+  const targetFilePath = url.pathToFileURL(entryPoint).href;
+  const partialString = await import(targetFilePath);
+  const items = partialModules.map((module) => {
+    const html = partialString[module.htmlId];
+    const dom = module.rootDOMElement;
+    const dataId = `${module.rootAttr}="${module.phDomId}"`;
+    const style = module.rootStyleStr ? ` style="${module.rootStyleStr}"` : "";
+    const replacedHtml = `<${dom} ${dataId}${style}>${html}</${dom}>`;
+    return {
+      id: module.id,
+      html: replacedHtml
+    };
+  });
+  const template = JSON.stringify({ items });
+  await fs.outputFile(outFile, template).catch((err) => {
+    console.error(err);
+  });
+}
+async function buildPartialHydrateIndex(partialModules, config, buildOptions) {
+  const tmpImporters = partialModules.map((module) => {
+    return `import ${module.phId} from "${module.importer}"`;
+  });
+  const tempFunctionIntersectionObserver = `const options = {
+      root: ${config.assets.partial.intersectionObserverOptions.root},
+      rootMargin: "${config.assets.partial.intersectionObserverOptions.rootMargin}",
+      thresholds: ${config.assets.partial.intersectionObserverOptions.thresholds},
+    }
+    const observer = new IntersectionObserver(hydrate, options)
+    observer.observe(target)
+
+    function hydrate() {
+      ReactDOM.hydrate(App, target)
+      observer.unobserve(target)
+    }`;
+  const tempFunctionImmediateExecution = `ReactDOM.hydrate(App, target)`;
+  const tempFunction = config.assets.partial.useIntersectionObserver ? tempFunctionIntersectionObserver : tempFunctionImmediateExecution;
+  const tmpRenders = partialModules.map((module) => {
+    return `
+// ${module.phId}
+const ${module.targetsId} = document.querySelectorAll('[${module.rootAttr}="${module.phDomId}"]')
+if (${module.targetsId}) {
+  ${module.targetsId}.forEach(target => {
+    const App = React.createElement(${module.phId})
+    ${tempFunction}
+  })
+}`;
+  });
+  const tmpImporterStr = tmpImporters.join("\n");
+  const tmpRendersStr = tmpRenders.join("\n");
+  const outFile = buildOptions.outFile;
+  const template = `import React from "react"
+import ReactDOM from "react-dom"
+${tmpImporterStr}
+${tmpRendersStr}`;
+  await fs.outputFile(outFile, template).catch((err) => {
+    console.error(err);
+  });
+}
+async function buildPartialHydrateAssets(viteConfig, buildOptions) {
+  var _a;
+  const activePreact = buildOptions.usePreact && userPkgHasPreact;
+  const resolveAliasPreact = {
+    react: "preact/compat",
+    "react-dom": "preact/compat"
+  };
+  const customConfig = defineViteConfig({
+    base: viteConfig.base,
+    build: {
+      write: false,
+      assetsInlineLimit: 0,
+      minify: (_a = viteConfig.build) == null ? void 0 : _a.minify,
+      rollupOptions: {
+        input: {
+          __minista_bundle_assets: buildOptions.input
+        },
+        output: {
+          manualChunks: void 0
+        }
+      }
+    },
+    esbuild: viteConfig.esbuild,
+    plugins: viteConfig.plugins,
+    resolve: {
+      alias: activePreact ? resolveAliasPreact : {}
+    },
+    customLogger: viteConfig.customLogger
+  });
+  const mergedConfig = mergeViteConfig({}, customConfig);
+  const result = await viteBuild(mergedConfig);
+  const items = result.output;
+  if (Array.isArray(items) && items.length > 0) {
+    items.map((item) => {
+      if (item.fileName.match(/\.css/)) {
+        const customFileName = slashEnd(buildOptions.outDir) + buildOptions.bundleOutName + ".css";
+        return (item == null ? void 0 : item.source) && fs.outputFile(customFileName, item == null ? void 0 : item.source);
+      } else if (item.fileName.match(/\.js/)) {
+        if (buildOptions.generateJs) {
+          const customFileName = slashEnd(buildOptions.outDir) + buildOptions.bundleOutName + ".js";
+          return (item == null ? void 0 : item.code) && fs.outputFile(customFileName, item == null ? void 0 : item.code);
+        }
+        return;
+      } else {
+        const customFileName = buildOptions.outDir + item.fileName.replace(buildOptions.assetDir, "");
+        const customCode = (item == null ? void 0 : item.source) ? item == null ? void 0 : item.source : (item == null ? void 0 : item.code) ? item == null ? void 0 : item.code : "";
+        return customCode && fs.outputFile(customFileName, customCode);
+      }
+    });
+  }
+}
 async function buildCopyDir(targetDir, outDir, log) {
   const checkTargetDir = await fs.pathExists(targetDir);
   if (checkTargetDir) {
@@ -339,6 +576,12 @@ export {
   buildCopyDir,
   buildGlobalStaticData,
   buildHtmlPage,
+  buildPartialHydrateAssets,
+  buildPartialHydrateIndex,
+  buildPartialModules,
+  buildPartialStringBundle,
+  buildPartialStringIndex,
+  buildPartialStringInitial,
   buildRootEsmContent,
   buildStaticData,
   buildStaticPage,

package/dist/cli.js

@@ -29,9 +29,11 @@ import {
   generateViteImporters,
   generateTempRoot,
   generateTempPages,
-  generateAssets,
+  generateTempAssets,
+  generatePartialHydration,
   generateNoStyleTemp,
   generateHtmlPages,
+  generateAssets,
   generatePublic,
   generateDownload,
   generateBeautify
@@ -77,16 +79,25 @@ cli.command("build [root]", "build for production").action(async () => {
       emptyResolveDir(systemConfig.temp.assets.outDir),
       emptyResolveDir(systemConfig.temp.pages.outDir),
       emptyResolveDir(systemConfig.temp.viteImporter.outDir),
+      emptyResolveDir(systemConfig.temp.partialHydration.outDir),
       emptyResolveDir(config.out)
     ]);
     await Promise.all([generateViteImporters(config, viteConfig)]);
     await Promise.all([
       generateTempRoot(config, mdxConfig),
       generateTempPages(config, mdxConfig),
-      generateAssets(config, viteConfig)
+      generateTempAssets(config, viteConfig)
+    ]);
+    await Promise.all([
+      generateNoStyleTemp(systemConfig.temp.root.outDir),
+      generateNoStyleTemp(systemConfig.temp.pages.outDir),
+      generatePartialHydration(config, mdxConfig, viteConfig)
+    ]);
+    await Promise.all([
+      generateHtmlPages(config),
+      generateAssets(config),
+      generatePublic(config)
     ]);
-    await Promise.all([generateNoStyleTemp()]);
-    await Promise.all([generateHtmlPages(config), generatePublic(config)]);
     await Promise.all([generateDownload(config)]);
     await Promise.all([
       generateBeautify(config, "html"),

package/dist/config.js

@@ -41,6 +41,20 @@ const defaultConfig = {
     bundle: {
       outName: "bundle"
     },
+    partial: {
+      usePreact: false,
+      useIntersectionObserver: true,
+      outName: "partial",
+      rootAttrSuffix: "partial-hydration",
+      rootValuePrefix: "ph",
+      rootDOMElement: "div",
+      rootStyle: { display: "contents" },
+      intersectionObserverOptions: {
+        root: null,
+        rootMargin: "0px",
+        thresholds: [1]
+      }
+    },
     images: {
       outDir: "assets/images",
       outName: "[name]"

package/dist/esbuild.d.ts

@@ -8,3 +8,4 @@ export declare function resolvePlugin(options: {
 export declare function svgrPlugin(options: SvgrOptions): Plugin;
 /*! Fork: esbuild-plugin-resolve | https://github.com/hannoeru/esbuild-plugin-raw */
 export declare function rawPlugin(): Plugin;
+export declare function partialHydrationPlugin(): Plugin;

package/dist/esbuild.js

@@ -17,8 +17,33 @@ var __spreadValues = (a, b) => {
 import React from "react";
 import fs from "fs-extra";
 import path from "path";
+import { v4 as uuidv4 } from "uuid";
+import { systemConfig } from "./system.js";
 /*! Fork: esbuild-plugin-resolve | https://github.com/markwylde/esbuild-plugin-resolve */
 function resolvePlugin(options) {
+  function resolvePluginIntercept(build, moduleName, moduleTarget) {
+    const filter = new RegExp("^" + moduleName + "(?:\\/.*)?$");
+    build.onResolve({ filter }, async (args) => {
+      if (args.resolveDir === "") {
+        return;
+      }
+      return {
+        path: args.path,
+        namespace: "esbuild-resolve",
+        pluginData: {
+          resolveDir: args.resolveDir,
+          moduleName
+        }
+      };
+    });
+    build.onLoad({ filter, namespace: "esbuild-resolve" }, async (args) => {
+      const importerCode = `
+        export * from '${args.path.replace(args.pluginData.moduleName, moduleTarget)}';
+        export { default } from '${args.path.replace(args.pluginData.moduleName, moduleTarget)}';
+      `;
+      return { contents: importerCode, resolveDir: args.pluginData.resolveDir };
+    });
+  }
   return {
     name: "esbuild-resolve",
     setup: (build) => {
@@ -28,29 +53,6 @@ function resolvePlugin(options) {
     }
   };
 }
-function resolvePluginIntercept(build, moduleName, moduleTarget) {
-  const filter = new RegExp("^" + moduleName + "(?:\\/.*)?$");
-  build.onResolve({ filter }, async (args) => {
-    if (args.resolveDir === "") {
-      return;
-    }
-    return {
-      path: args.path,
-      namespace: "esbuild-resolve",
-      pluginData: {
-        resolveDir: args.resolveDir,
-        moduleName
-      }
-    };
-  });
-  build.onLoad({ filter, namespace: "esbuild-resolve" }, async (args) => {
-    const importerCode = `
-      export * from '${args.path.replace(args.pluginData.moduleName, moduleTarget)}';
-      export { default } from '${args.path.replace(args.pluginData.moduleName, moduleTarget)}';
-    `;
-    return { contents: importerCode, resolveDir: args.pluginData.resolveDir };
-  });
-}
 /*! Fork: esbuild-plugin-svgr | https://github.com/kazijawad/esbuild-plugin-svgr */
 function svgrPlugin(options) {
   return {
@@ -58,7 +60,7 @@ function svgrPlugin(options) {
     setup(build) {
       build.onLoad({ filter: /\.svg$/ }, async (args) => {
         const { transform: transformSvgr } = await import("@svgr/core");
-        const svg = await fs.promises.readFile(args.path, "utf8");
+        const svg = await fs.readFile(args.path, "utf8");
         const contents = await transformSvgr(svg, __spreadValues({}, options), { filePath: args.path });
         return {
           contents,
@@ -81,14 +83,44 @@ function rawPlugin() {
       });
       build.onLoad({ filter: /\?raw$/, namespace: "raw-loader" }, async (args) => {
         return {
-          contents: await fs.promises.readFile(args.path.replace(/\?raw$/, "")),
+          contents: await fs.readFile(args.path.replace(/\?raw$/, "")),
           loader: "text"
         };
       });
     }
   };
 }
+function partialHydrationPlugin() {
+  return {
+    name: "esbuild-partial-hydration",
+    setup(build) {
+      build.onResolve({ filter: /\?ph$/ }, (args) => {
+        return {
+          path: path.isAbsolute(args.path) ? args.path : path.join(args.resolveDir, args.path),
+          namespace: "partial-hydration-loader"
+        };
+      });
+      build.onLoad({ filter: /\?ph$/, namespace: "partial-hydration-loader" }, async (args) => {
+        const jsPath = args.path.replace(/\?ph$/, "");
+        const uniqueId = uuidv4();
+        const underUniqueId = uniqueId.replace(/-/g, "_");
+        const outDir = systemConfig.temp.partialHydration.outDir;
+        const outFile = `${outDir}/modules/${underUniqueId}.txt`;
+        const template = `${jsPath}`;
+        await fs.outputFile(outFile, template).catch((err) => {
+          console.error(err);
+        });
+        const dummy = `export default () => <div data-partial-hydration="${underUniqueId}"></div>`;
+        return {
+          contents: dummy,
+          loader: "tsx"
+        };
+      });
+    }
+  };
+}
 export {
+  partialHydrationPlugin,
   rawPlugin,
   resolvePlugin,
   svgrPlugin

package/dist/generate.d.ts

@@ -4,9 +4,11 @@ import type { MinistaResolveConfig } from "./types.js";
 export declare function generateViteImporters(config: MinistaResolveConfig, viteConfig: ViteConfig): Promise<void>;
 export declare function generateTempRoot(config: MinistaResolveConfig, mdxConfig: MdxOptions): Promise<void>;
 export declare function generateTempPages(config: MinistaResolveConfig, mdxConfig: MdxOptions): Promise<void>;
-export declare function generateAssets(config: MinistaResolveConfig, viteConfig: InlineConfig): Promise<void>;
-export declare function generateNoStyleTemp(): Promise<void>;
+export declare function generateTempAssets(config: MinistaResolveConfig, viteConfig: InlineConfig): Promise<void>;
+export declare function generatePartialHydration(config: MinistaResolveConfig, mdxConfig: MdxOptions, viteConfig: InlineConfig): Promise<void>;
+export declare function generateNoStyleTemp(targetDir: string): Promise<void>;
 export declare function generateHtmlPages(config: MinistaResolveConfig): Promise<void>;
+export declare function generateAssets(config: MinistaResolveConfig): Promise<void>;
 export declare function generatePublic(config: MinistaResolveConfig): Promise<void>;
 export declare function generateDownload(config: MinistaResolveConfig): Promise<void>;
 export declare function generateBeautify(config: MinistaResolveConfig, target: "html" | "css" | "js"): Promise<void>;

package/dist/generate.js

@@ -1,4 +1,6 @@
 import React from "react";
+import path from "path";
+import url from "url";
 import { systemConfig } from "./system.js";
 import { getFilePath, getFilePaths, getSameFilePaths } from "./path.js";
 import { slashEnd, noSlashEnd } from "./utils.js";
@@ -11,11 +13,19 @@ import {
   buildViteImporterRoots,
   buildViteImporterRoutes,
   buildViteImporterAssets,
-  buildViteImporterBlankAssets
+  buildViteImporterBlankAssets,
+  buildPartialModules,
+  buildPartialStringIndex,
+  buildPartialStringBundle,
+  buildPartialStringInitial,
+  buildPartialHydrateIndex,
+  buildPartialHydrateAssets
 } from "./build.js";
 import { optimizeCommentOutStyleImport } from "./optimize.js";
 import { downloadFiles } from "./download.js";
 import { beautifyFiles } from "./beautify.js";
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 async function generateViteImporters(config, viteConfig) {
   var _a, _b;
   const viteEntry = ((_b = (_a = viteConfig.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
@@ -49,21 +59,55 @@ async function generateTempPages(config, mdxConfig) {
     svgrOptions: config.assets.svgr.svgrOptions
   });
 }
-async function generateAssets(config, viteConfig) {
+async function generateTempAssets(config, viteConfig) {
   await buildTempAssets(viteConfig, {
+    input: path.resolve(__dirname + "/../dist/bundle.js"),
     bundleOutName: config.assets.bundle.outName,
     outDir: systemConfig.temp.assets.outDir,
-    assetDir: config.assets.outDir
+    assetDir: config.assets.outDir,
+    generateJs: false
   });
   await buildCopyDir(systemConfig.temp.assets.outDir, slashEnd(config.out) + noSlashEnd(config.assets.outDir), "assets");
 }
-async function generateNoStyleTemp() {
-  const tempRootOutDir = systemConfig.temp.root.outDir;
-  const tempPagesOutDir = systemConfig.temp.pages.outDir;
-  const tempRootFiles = await getFilePaths(tempRootOutDir, "mjs");
-  const tempPagesFiles = await getFilePaths(tempPagesOutDir, "mjs");
-  await optimizeCommentOutStyleImport(tempRootFiles);
-  await optimizeCommentOutStyleImport(tempPagesFiles);
+async function generatePartialHydration(config, mdxConfig, viteConfig) {
+  const moduleDir = systemConfig.temp.partialHydration.outDir + "/modules";
+  const moduleFilePaths = await getFilePaths(moduleDir, "txt");
+  if (moduleFilePaths.length === 0) {
+    return;
+  }
+  const partialModules = await buildPartialModules(moduleFilePaths, config);
+  const outDir = systemConfig.temp.partialHydration.outDir;
+  const stringIndex = `${outDir}/string-index.mjs`;
+  const stringBundle = `${outDir}/string-bundle.mjs`;
+  const stringInitial = `${outDir}/string-initial.json`;
+  const hydrateIndex = `${outDir}/hydrate-index.mjs`;
+  await buildPartialStringIndex(partialModules, { outFile: stringIndex });
+  await buildPartialStringBundle(stringIndex, {
+    outFile: stringBundle,
+    mdxConfig,
+    svgrOptions: config.assets.svgr.svgrOptions
+  });
+  await optimizeCommentOutStyleImport([stringBundle]);
+  await buildPartialStringInitial(stringBundle, partialModules, {
+    outFile: stringInitial
+  });
+  await buildPartialHydrateIndex(partialModules, config, {
+    outFile: hydrateIndex
+  });
+  await buildPartialHydrateAssets(viteConfig, {
+    input: hydrateIndex,
+    bundleOutName: config.assets.partial.outName,
+    outDir: systemConfig.temp.assets.outDir,
+    assetDir: config.assets.outDir,
+    generateJs: true,
+    usePreact: config.assets.partial.usePreact
+  });
+}
+async function generateNoStyleTemp(targetDir) {
+  const targetFiles = await getFilePaths(targetDir, "mjs");
+  if (targetFiles.length !== 0) {
+    await optimizeCommentOutStyleImport(targetFiles);
+  }
 }
 async function generateHtmlPages(config) {
   const tempRootName = config.root.srcName;
@@ -85,6 +129,9 @@ async function generateHtmlPages(config) {
     outDir: config.pagesOutDir
   }, assetsTagStr);
 }
+async function generateAssets(config) {
+  await buildCopyDir(systemConfig.temp.assets.outDir, slashEnd(config.out) + noSlashEnd(config.assets.outDir), "assets");
+}
 async function generatePublic(config) {
   await buildCopyDir(config.public, config.publicOutDir, "public");
 }
@@ -128,7 +175,9 @@ export {
   generateDownload,
   generateHtmlPages,
   generateNoStyleTemp,
+  generatePartialHydration,
   generatePublic,
+  generateTempAssets,
   generateTempPages,
   generateTempRoot,
   generateViteImporters

package/dist/system.js

@@ -8,6 +8,9 @@ const systemConfig = {
     viteImporter: {
       outDir: "node_modules/.minista/vite-importer"
     },
+    partialHydration: {
+      outDir: "node_modules/.minista/partial-hydration"
+    },
     root: {
       outDir: "node_modules/.minista/bundled-react-root"
     },

package/dist/types.d.ts

@@ -26,6 +26,20 @@ export declare type MinistaConfig = {
         bundle: {
             outName: string;
         };
+        partial: {
+            usePreact: boolean;
+            useIntersectionObserver: boolean;
+            outName: string;
+            rootAttrSuffix: string;
+            rootValuePrefix: string;
+            rootDOMElement: "div" | "span";
+            rootStyle: React.CSSProperties;
+            intersectionObserverOptions: {
+                root: Element | null;
+                rootMargin: string;
+                thresholds: ReadonlyArray<number>;
+            };
+        };
         images: {
             outDir: string;
             outName: string;
@@ -87,6 +101,20 @@ export declare type MinistaUserConfig = {
         bundle?: {
             outName?: string;
         };
+        partial?: {
+            usePreact?: boolean;
+            useIntersectionObserver?: boolean;
+            outName?: string;
+            rootAttrSuffix?: string;
+            rootValuePrefix?: string;
+            rootDOMElement?: "div" | "span";
+            rootStyle?: React.CSSProperties;
+            intersectionObserverOptions?: {
+                root?: Element | null;
+                rootMargin?: string;
+                thresholds?: ReadonlyArray<number>;
+            };
+        };
         images?: {
             outDir?: string;
             outName?: string;
@@ -163,6 +191,9 @@ export declare type MinistaSystemConfig = {
         viteImporter: {
             outDir: string;
         };
+        partialHydration: {
+            outDir: string;
+        };
         root: {
             outDir: string;
         };
@@ -226,3 +257,17 @@ export declare type StaticDataCache = {
     key: [StaticDataList];
 } | {};
 export declare type GetStaticData = () => Promise<StaticData>;
+export declare type PartialModules = {
+    id: string;
+    phId: string;
+    phDomId: string;
+    htmlId: string;
+    targetsId: string;
+    importer: string;
+    rootAttr: string;
+    rootDOMElement: string;
+    rootStyleStr: string;
+}[];
+export declare type PartialString = {
+    [key: string]: string;
+};

package/dist/utils.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export declare function slashEnd(dir: string): string;
 export declare function noSlashEnd(dir: string): string;
 export declare function getFilename(fullPath: string): string;
 export declare function getFilenameObject(fullPaths: string[]): any;
 export declare function valueToStringObject(obj: {} | any | undefined): any;
 export declare function sortObject(obj: {} | undefined): [string, unknown][] | undefined;
+export declare function reactStylesToString(styles: React.CSSProperties): string;

package/dist/utils.js

@@ -54,10 +54,20 @@ function sortObject(obj) {
   }
   return sorted;
 }
+function reactStylesToString(styles) {
+  const result = Object.entries(styles).map(([key, value]) => {
+    const reg = new RegExp(/[A-Z]/g);
+    const cssKey = key.replace(reg, (v) => `-${v.toLowerCase()}`);
+    const cssValue = value;
+    return `${cssKey}:${cssValue};`;
+  }).join("");
+  return result;
+}
 export {
   getFilename,
   getFilenameObject,
   noSlashEnd,
+  reactStylesToString,
   slashEnd,
   sortObject,
   valueToStringObject

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minista",
   "description": "Next.js Like Development with 100% Static Generate",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "bin": {
     "minista": "./bin/minista.js"
   },
@@ -72,17 +72,16 @@
   },
   "dependencies": {
     "@mdx-js/esbuild": "^2.1.1",
-    "@mdx-js/react": "^2.1.1",
     "@mdx-js/rollup": "^2.1.1",
     "@svgr/core": "^6.2.1",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@vitejs/plugin-react": "^1.3.2",
     "cac": "^6.7.12",
-    "deepmerge-ts": "^4.0.2",
-    "esbuild": "^0.14.29",
-    "fs-extra": "^10.0.1",
-    "js-beautify": "^1.14.2",
+    "deepmerge-ts": "^4.0.3",
+    "esbuild": "^0.14.38",
+    "fs-extra": "^10.1.0",
+    "js-beautify": "^1.14.3",
     "mime-types": "^2.1.35",
-    "node-fetch": "^3.2.3",
+    "node-fetch": "^3.2.4",
     "node-html-parser": "^5.3.3",
     "picocolors": "^1.0.0",
     "react-helmet": "^6.1.0",
@@ -94,20 +93,22 @@
     "srcset": "^5.0.0",
     "svgstore": "^3.0.1",
     "tiny-glob": "^0.2.9",
-    "vite": "^2.9.1"
+    "uuid": "^8.3.2",
+    "vite": "^2.9.8"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/js-beautify": "^1.13.3",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.31",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-helmet": "^6.1.5",
+    "@types/uuid": "^8.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tsup": "^5.12.2",
-    "typescript": "^4.6.3",
-    "vitest": "^0.8.1"
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4",
+    "vitest": "^0.12.0"
   }
 }