minista 3.0.0-alpha.9 → 3.0.0

package/README.md

@@ -0,0 +1,70 @@
+# minista
+
+<p>
+  <a aria-label="Made by QRANOKO" href="https://qranoko.jp">
+    <img src="https://img.shields.io/badge/MADE%20BY%20QRANOKO-212121.svg?style=for-the-badge&labelColor=212121">
+  </a>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/minista">
+    <img alt="" src="https://img.shields.io/npm/v/minista.svg?style=for-the-badge&labelColor=212121">
+  </a>
+  <a aria-label="License" href="https://github.com/qrac/minista/blob/master/LICENSE">
+    <img alt="" src="https://img.shields.io/npm/l/minista.svg?style=for-the-badge&labelColor=212121">
+  </a>
+</p>
+
+## Site & Documentation
+
+https://minista.qranoko.jp
+
+## About
+
+minista（ミニスタ）は React の JSX から綺麗な HTML を作る日本製のスタティックサイトジェネレーターです。
+
+## How To Use
+
+### Automatic Setup
+
+```sh
+$ npm create minista@latest
+```
+
+### Manual Setup
+
+```sh
+$ npm install --save-dev minista react react-dom
+$ touch ./src/pages/index.jsx
+```
+
+```js
+// ./src/pages/index.jsx
+export default function () {
+  return <h1>Hello!</h1>
+}
+```
+
+`package.json` を開き、以下のスクリプトを追加します。
+
+```json
+"scripts": {
+  "dev": "minista",
+  "build": "minista build",
+  "preview": "minista preview",
+}
+```
+
+## Commands
+
+| コマンド          | 内容                            |
+| ----------------- | ------------------------------- |
+| `minista`         | 開発モード（`Ctrl + C` で停止） |
+| `minista build`   | 静的書き出し                    |
+| `minista preview` | 静的書き出し後の動作確認        |
+
+## License
+
+- MIT
+
+## Credit
+
+- Author: [Qrac](https://qrac.jp)
+- Organization: [QRANOKO](https://qranoko.jp)

package/dist/cli/build.js

@@ -1,35 +1,79 @@
 import path from "node:path";
 import fs from "fs-extra";
-import pc from "picocolors";
 import {
   defineConfig as defineViteConfig,
   mergeConfig as mergeViteConfig,
   build as viteBuild,
   createLogger
 } from "vite";
-import { default as pluginReact } from "@vitejs/plugin-react";
-import { default as pluginMdx } from "@mdx-js/rollup";
-import beautify from "js-beautify";
+import { parse as parseHtml } from "node-html-parser";
 import { resolveConfig } from "../config/index.js";
+import { resolveViteEntry } from "../config/entry.js";
+import { pluginReact } from "../plugins/react.js";
+import { pluginPreact } from "../plugins/preact.js";
+import { pluginMdx } from "../plugins/mdx.js";
+import { pluginImage } from "../plugins/image.js";
 import { pluginSvgr } from "../plugins/svgr.js";
-import { pluginSprite } from "../plugins/sprite.js";
+import { pluginIcon } from "../plugins/icon.js";
 import { pluginFetch } from "../plugins/fetch.js";
 import { pluginSsg } from "../plugins/ssg.js";
 import { pluginPartial } from "../plugins/partial.js";
 import { pluginHydrate } from "../plugins/hydrate.js";
-import { pluginPreact } from "../plugins/preact.js";
 import { pluginBundle } from "../plugins/bundle.js";
+import { pluginSearch } from "../plugins/search.js";
+import { transformDeliveries } from "../transform/delivery.js";
+import { transformArchives } from "../transform/archive.js";
+import { transformRemotes } from "../transform/remote.js";
+import { transformEntries } from "../transform/entry.js";
+import { transformImages } from "../transform/image.js";
+import { transformIcons } from "../transform/icon.js";
+import { transformRelative } from "../transform/relative.js";
+import { transformSearch } from "../transform/search.js";
+import { generatePublics } from "../generate/public.js";
+import { generatePages } from "../generate/page.js";
+import { generateAssets } from "../generate/asset.js";
+import { generateImages } from "../generate/image.js";
+import { generateSprites } from "../generate/sprite.js";
+import { generateArchives } from "../generate/archive.js";
+import { hasElement } from "../utility/element.js";
 async function build(inlineConfig = {}) {
   const config = await resolveConfig(inlineConfig);
+  const { resolvedRoot, resolvedEntry, tempDir } = config.sub;
+  const { assets, search, delivery } = config.main;
+  const { partial } = assets;
+  const resolvedOut = path.join(resolvedRoot, config.main.out);
+  const bundleCssName = path.join(assets.outDir, assets.bundle.outName + ".css");
+  const bugBundleCssName = path.join(assets.outDir, "bundle.css");
+  const hydrateJsName = path.join(assets.outDir, assets.partial.outName + ".js");
+  let ssgResult;
+  let assetsResult;
+  let hydrateResult;
+  let ssgItems;
+  let assetItems;
+  let hydrateItems;
+  let ssgPages = [];
+  let parsedPages = [];
+  let dynamicEntries = {};
+  let assetEntries = {};
+  let createPages = [];
+  let createAssets = [];
+  let createImages = {};
+  let createSprites = {};
+  let cssNameBugFix = {};
+  let hasBundleCss = false;
+  let hasHydrate = false;
+  let hasSearch = false;
   const ssgConfig = mergeViteConfig(
     config.vite,
     defineViteConfig({
       build: { write: false, ssr: true, minify: false },
+      ssr: { noExternal: "minista" },
       plugins: [
         pluginReact(),
-        pluginMdx(config.mdx),
+        pluginMdx(config),
+        pluginImage(config),
         pluginSvgr(config),
-        pluginSprite(config, true),
+        pluginIcon(config),
         pluginFetch(config),
         pluginSsg(),
         pluginPartial(config)
@@ -37,178 +81,187 @@ async function build(inlineConfig = {}) {
       customLogger: createLogger("warn", { prefix: "[minista]" })
     })
   );
+  ssgResult = await viteBuild(ssgConfig);
+  ssgItems = ssgResult.output.filter((item) => {
+    return item.fileName.match(/__minista_plugin_ssg\.js$/);
+  });
+  if (ssgItems.length > 0) {
+    const ssgPath = path.join(tempDir, "ssg.mjs");
+    const ssgData = ssgItems[0].source || ssgItems[0].code || "";
+    await fs.outputFile(ssgPath, ssgData);
+    const { runSsg } = await import(ssgPath);
+    ssgPages = await runSsg(config);
+  }
+  if (ssgPages.length > 0) {
+    parsedPages = ssgPages.map((page) => {
+      const parsedHtml = parseHtml(page.html, { comment: true });
+      return {
+        fileName: page.fileName,
+        path: page.path,
+        group: page.group,
+        title: page.path,
+        draft: page.draft,
+        parsedHtml
+      };
+    });
+    let parsedData = parsedPages.map((item) => item.parsedHtml);
+    hasSearch = hasElement(parsedData, `[data-full-text-search]`);
+    hasHydrate = hasElement(parsedData, `[data-${partial.rootAttrSuffix}]`);
+    transformDeliveries({ parsedData, ssgPages, config });
+    transformArchives({ parsedData, config });
+    await transformRemotes({
+      command: "build",
+      parsedData,
+      config
+    });
+    await transformImages({
+      command: "build",
+      parsedData,
+      config,
+      createImages
+    });
+    await transformIcons({
+      command: "build",
+      parsedData,
+      config,
+      createSprites
+    });
+    await transformEntries({
+      parsedData,
+      config,
+      dynamicEntries
+    });
+    createPages = await Promise.all(
+      parsedPages.map(async (page) => {
+        const pathname = page.path;
+        let parsedHtml = page.parsedHtml;
+        if (config.main.base === "" || config.main.base === "./") {
+          transformRelative({
+            parsedHtml,
+            pathname,
+            config
+          });
+        }
+        return {
+          fileName: page.fileName,
+          data: parsedHtml.toString()
+        };
+      })
+    );
+  }
+  assetEntries = resolveViteEntry(resolvedRoot, resolvedEntry);
+  assetEntries = { ...assetEntries, ...dynamicEntries };
   const assetsConfig = mergeViteConfig(
     config.vite,
     defineViteConfig({
-      build: { write: false },
+      build: {
+        rollupOptions: {
+          input: assetEntries
+        },
+        write: false
+      },
       plugins: [
         pluginReact(),
-        pluginMdx(config.mdx),
+        pluginMdx(config),
         pluginSvgr(config),
-        pluginSprite(config),
         pluginBundle()
       ],
       customLogger: createLogger("warn", { prefix: "[minista]" })
     })
   );
-  const partialConfig = mergeViteConfig(
+  assetsResult = await viteBuild(assetsConfig);
+  const hydrateConfig = mergeViteConfig(
     config.vite,
     defineViteConfig({
       build: { write: false },
       plugins: [
         pluginReact(),
         pluginPreact(config),
-        pluginMdx(config.mdx),
+        pluginMdx(config),
         pluginSvgr(config),
-        pluginSprite(config),
-        pluginHydrate()
+        pluginHydrate(),
+        pluginSearch(config)
       ],
       customLogger: createLogger("warn", { prefix: "[minista]" })
     })
   );
-  let ssgResult;
-  let assetsResult;
-  let partialResult;
-  await Promise.all([
-    ssgResult = await viteBuild(ssgConfig),
-    assetsResult = await viteBuild(assetsConfig)
-  ]);
-  const hasPartial = fs.existsSync(path.join(config.sub.tempDir, "partials"));
-  if (hasPartial) {
-    partialResult = await viteBuild(partialConfig);
+  if (hasHydrate) {
+    hydrateResult = await viteBuild(hydrateConfig);
   } else {
-    partialResult = { output: [] };
+    hydrateResult = { output: [] };
   }
-  const resolvedOut = path.join(config.sub.resolvedRoot, config.main.out);
-  const resolvedPublic = path.join(config.sub.resolvedRoot, config.main.public);
-  const hasPublic = fs.existsSync(resolvedPublic);
-  await fs.emptyDir(resolvedOut);
-  hasPublic && await fs.copy(resolvedPublic, resolvedOut);
-  const bundleCssName = path.join(
-    config.main.assets.outDir,
-    config.main.assets.bundle.outName + ".css"
-  );
-  const bugBundleCssName = path.join(config.main.assets.outDir, "bundle.css");
-  const hasBundleCss = assetsResult.output.some(
-    (item) => item.fileName === bundleCssName || item.fileName === bugBundleCssName
-  );
-  const partialJsName = path.join(
-    config.main.assets.outDir,
-    config.main.assets.partial.outName + ".js"
-  );
-  const ssgItems = ssgResult.output.filter(
-    (item) => item.fileName.match(/__minista_plugin_ssg\.js$/)
-  );
-  const assetItems = assetsResult.output.filter(
-    (item) => !item.fileName.match(/__minista_plugin_bundle\.js$/)
-  );
-  const partialItems = partialResult.output.filter(
-    (item) => item.fileName.match(/__minista_plugin_hydrate\.js$/)
+  assetItems = assetsResult.output.filter((item) => {
+    return !item.fileName.match(/__minista_plugin_bundle\.js$/);
+  });
+  hydrateItems = hydrateResult.output.filter((item) => {
+    return item.fileName.match(/__minista_plugin_hydrate\.js$/);
+  });
+  hasBundleCss = assetsResult.output.some((item) => {
+    return item.fileName === bundleCssName || item.fileName === bugBundleCssName;
+  });
+  cssNameBugFix = Object.fromEntries(
+    Object.entries(assetEntries).map((item) => {
+      return [
+        path.join(assets.outDir, path.parse(item[1]).name + ".css"),
+        path.join(assets.outDir, item[0] + ".css")
+      ];
+    })
   );
-  let ssgPages = [];
-  async function getHtmlItems(ssgItem) {
-    const ssgPath = path.join(config.sub.tempDir, "ssg.mjs");
-    const ssgData = ssgItem.source || ssgItem.code || "";
-    if (!ssgData) {
-      return [];
-    }
-    await fs.outputFile(ssgPath, ssgData);
-    const { runSsg } = await import(ssgPath);
-    ssgPages = await runSsg(config);
-    if (ssgPages.length === 0) {
-      return [];
+  cssNameBugFix = { ...cssNameBugFix, ...{ [bugBundleCssName]: bundleCssName } };
+  createAssets = [...assetItems, ...hydrateItems].map((item) => {
+    const isCss = item.fileName.match(/.*\.css$/);
+    const isBundleCss = item.fileName.match(/__minista_plugin_bundle\.css$/);
+    const isHydrateJs = item.fileName.match(/__minista_plugin_hydrate\.js$/);
+    let fileName = item.fileName;
+    isBundleCss && (fileName = bundleCssName);
+    isHydrateJs && (fileName = hydrateJsName);
+    if (isCss && Object.hasOwn(cssNameBugFix, fileName)) {
+      fileName = cssNameBugFix[fileName];
     }
-    return ssgPages.map((item) => {
-      return {
-        fileName: item.fileName,
-        data: item.html
-      };
+    fileName = fileName.replace(/-ministaDuplicateName\d*/, "");
+    let data = "";
+    item.source && (data = item.source);
+    item.code && (data = item.code);
+    data === "\n" && (data = "");
+    return {
+      fileName,
+      data
+    };
+  });
+  createAssets = createAssets.filter((item) => item.data);
+  if (hasSearch && ssgPages.length) {
+    const fileName = path.join(search.outDir, search.outName + ".json");
+    const searchObj = await transformSearch({
+      command: "build",
+      ssgPages,
+      config
     });
+    const data = JSON.stringify(searchObj);
+    createAssets.push({ fileName, data });
   }
-  function optimizeItems(items) {
-    return items.map((item) => {
-      const isBundleCss = item.fileName.match(/__minista_plugin_bundle\.css$/);
-      const isBugBundleCss = item.fileName === bugBundleCssName;
-      const isPartialJs = item.fileName.match(/__minista_plugin_hydrate\.js$/);
-      let fileName = item.fileName;
-      isBundleCss && (fileName = bundleCssName);
-      isBugBundleCss && (fileName = bundleCssName);
-      isPartialJs && (fileName = partialJsName);
-      let data = "";
-      item.source && (data = item.source);
-      item.code && (data = item.code);
-      if (data === "\n") {
-        data = "";
-      }
-      return {
-        fileName,
-        data
-      };
-    }).filter((item) => item.data);
-  }
-  const htmlItems = ssgItems[0] ? await getHtmlItems(ssgItems[0]) : [];
-  const optimizedAssetItems = optimizeItems([...assetItems, ...partialItems]);
-  const mergedItems = [...htmlItems, ...optimizedAssetItems];
-  const nameLengths = mergedItems.map((api) => api.fileName.length);
+  const pageNames = createPages.map((item) => item.fileName);
+  const assetNames = createAssets.map((item) => item.fileName);
+  const imageNames = Object.keys(createImages).map((item) => item);
+  const iconNames = Object.keys(createSprites).map((item) => item);
+  const archiveNames = delivery.archives.map((item) => {
+    return path.join(item.outDir, item.outName + "." + item.format);
+  });
+  const mergedItemNames = [
+    ...pageNames,
+    ...assetNames,
+    ...imageNames,
+    ...iconNames,
+    ...archiveNames
+  ];
+  const nameLengths = mergedItemNames.map((item) => item.length);
   const maxNameLength = nameLengths.reduce((a, b) => a > b ? a : b, 0);
-  await Promise.all(
-    mergedItems.map(async (item) => {
-      const isHtml = item.fileName.match(/.*\.html$/);
-      const isCss = item.fileName.match(/.*\.css$/);
-      const isJs = item.fileName.match(/.*\.js$/);
-      let hasPartialJs = false;
-      let fileName = item.fileName;
-      let data = item.data;
-      if (isHtml) {
-        hasPartialJs = data.includes(
-          `data-${config.main.assets.partial.rootAttrSuffix}`
-        );
-        if (hasPartialJs) {
-          data = data.replace(/data-minista-build-partial-src=/g, "src=");
-        } else {
-          data = data.replace(
-            /<script.*data-minista-build-partial-src=.*?><\/script>/g,
-            "\n\n"
-          );
-        }
-        if (hasBundleCss) {
-          data = data.replace(/data-minista-build-bundle-href=/g, "href=");
-        } else {
-          data = data.replace(
-            /<link.*data-minista-build-bundle-href=.*?>/g,
-            "\n\n"
-          );
-        }
-        if (config.main.beautify.useHtml) {
-          data = beautify.html(data, config.main.beautify.htmlOptions);
-        }
-      }
-      if (isCss && config.main.beautify.useAssets) {
-        data = beautify.css(data, config.main.beautify.cssOptions);
-      }
-      if (isJs && config.main.beautify.useAssets) {
-        data = beautify.js(data, config.main.beautify.jsOptions);
-      }
-      const nameLength = fileName.length;
-      const spaceCount = maxNameLength - nameLength + 1;
-      const space = " ".repeat(spaceCount);
-      const routePath = path.join(
-        config.sub.resolvedRoot,
-        config.main.out,
-        fileName
-      );
-      const relativePath = path.relative(process.cwd(), routePath);
-      const dataSize = (data.length / 1024).toFixed(2);
-      return await fs.outputFile(routePath, data).then(() => {
-        console.log(
-          `${pc.bold(pc.green("BUILD"))} ${pc.bold(relativePath)}` + space + pc.gray(`${dataSize} KiB`)
-        );
-      }).catch((err) => {
-        console.error(err);
-      });
-    })
-  );
-  return;
+  await fs.emptyDir(resolvedOut);
+  await generatePublics({ config });
+  await generatePages({ createPages, config, hasBundleCss, maxNameLength });
+  await generateAssets({ createAssets, config, maxNameLength });
+  await generateImages({ createImages, config, maxNameLength });
+  await generateSprites({ createSprites, config, maxNameLength });
+  await generateArchives({ config, maxNameLength });
 }
 export {
   build

package/dist/cli/develop.js

@@ -1,31 +1,52 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import {
   createServer as createViteServer,
   defineConfig as defineViteConfig,
   mergeConfig as mergeViteConfig
 } from "vite";
-import { default as pluginReact } from "@vitejs/plugin-react";
-import { default as pluginMdx } from "@mdx-js/rollup";
+import { parse as parseHtml } from "node-html-parser";
 import { resolveConfig } from "../config/index.js";
+import { pluginReact } from "../plugins/react.js";
+import { pluginPreact } from "../plugins/preact.js";
+import { pluginMdx } from "../plugins/mdx.js";
+import { pluginImage } from "../plugins/image.js";
 import { pluginSvgr } from "../plugins/svgr.js";
-import { pluginSprite } from "../plugins/sprite.js";
+import { pluginIcon } from "../plugins/icon.js";
 import { pluginFetch } from "../plugins/fetch.js";
-import { pluginServe } from "../plugins/serve.js";
 import { pluginPartial } from "../plugins/partial.js";
-import { pluginPreact } from "../plugins/preact.js";
+import { pluginSearch } from "../plugins/search.js";
+import { transformPage } from "../transform/page.js";
+import { transformSsg } from "../transform/ssg.js";
+import { transformTags } from "../transform/tag.js";
+import { transformComments } from "../transform/comment.js";
+import { transformDeliveries } from "../transform/delivery.js";
+import { transformArchives } from "../transform/archive.js";
+import { transformRemotes } from "../transform/remote.js";
+import { transformImages } from "../transform/image.js";
+import { transformIcons } from "../transform/icon.js";
+import { transformEncode } from "../transform/encode.js";
+import { transformSearch } from "../transform/search.js";
+import { generateTempSearch } from "../generate/search.js";
+import { hasElement } from "../utility/element.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 async function develop(inlineConfig = {}) {
   const config = await resolveConfig(inlineConfig);
   const mergedViteConfig = mergeViteConfig(
     config.vite,
     defineViteConfig({
       plugins: [
+        pluginDevelop(config),
         pluginReact(),
         pluginPreact(config),
-        pluginMdx(config.mdx),
+        pluginMdx(config),
+        pluginImage(config),
         pluginSvgr(config),
-        pluginSprite(config, true),
+        pluginIcon(config),
         pluginFetch(config),
-        pluginServe(config),
-        pluginPartial(config)
+        pluginPartial(config),
+        pluginSearch(config)
       ]
     })
   );
@@ -33,6 +54,101 @@ async function develop(inlineConfig = {}) {
   await viteServer.listen();
   viteServer.printUrls();
 }
+function pluginDevelop(config) {
+  let server;
+  let ssgPages = [];
+  return {
+    name: "minista-vite-plugin:develop",
+    configureServer(_server) {
+      server = _server;
+      return () => {
+        server.middlewares.use(async (req, res, next) => {
+          try {
+            const { resolvedBase } = config.sub;
+            let originalUrl = req.originalUrl || "";
+            let url = originalUrl;
+            if (resolvedBase.match(/^\/.*\/$/)) {
+              const reg = new RegExp(`^${resolvedBase}`);
+              url = url.replace(reg, "/");
+            }
+            const { getSources } = await server.ssrLoadModule(
+              __dirname + "/../server/source.js"
+            );
+            const { resolvedGlobal, resolvedPages } = await getSources();
+            const { headTags, startTags, endTags } = transformTags({
+              command: "serve",
+              pathname: url,
+              config
+            });
+            let html = transformPage({
+              url,
+              resolvedGlobal,
+              resolvedPages,
+              headTags,
+              startTags,
+              endTags
+            });
+            let parsedHtml = parseHtml(html, { comment: true });
+            const charsetEl = parsedHtml.querySelector(`meta[charset]`);
+            const charset = charsetEl?.getAttribute("charset") || "UTF-8";
+            const searchAttr = `[data-full-text-search]`;
+            const deliveryAttr = `[data-minista-transform-target="delivery"]`;
+            const hasSearch = hasElement(parsedHtml, searchAttr);
+            const hasDelivery = hasElement(parsedHtml, deliveryAttr);
+            if (hasSearch || hasDelivery) {
+              ssgPages = await transformSsg({
+                command: "serve",
+                resolvedGlobal,
+                resolvedPages,
+                config
+              });
+            }
+            if (hasSearch) {
+              const searchObj = await transformSearch({
+                command: "serve",
+                ssgPages,
+                config
+              });
+              const data = JSON.stringify(searchObj);
+              await generateTempSearch({ data, config });
+            }
+            transformComments(parsedHtml);
+            transformDeliveries({ parsedData: parsedHtml, ssgPages, config });
+            transformArchives({ parsedData: parsedHtml, config });
+            await transformRemotes({
+              command: "serve",
+              parsedData: parsedHtml,
+              config
+            });
+            await transformImages({
+              command: "serve",
+              parsedData: parsedHtml,
+              config
+            });
+            await transformIcons({
+              command: "serve",
+              parsedData: parsedHtml,
+              config,
+              server
+            });
+            html = parsedHtml.toString();
+            html = await server.transformIndexHtml(originalUrl, html);
+            if (charset.match(/^utf[\s-_]*8$/i)) {
+              res.statusCode = 200;
+              res.end(html);
+            } else {
+              res.statusCode = 200;
+              res.end(transformEncode(html, charset));
+            }
+          } catch (e) {
+            server.ssrFixStacktrace(e);
+            next(e);
+          }
+        });
+      };
+    }
+  };
+}
 export {
   develop
 };