minista 3.0.0-alpha.8 → 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

@@ -6,81 +6,262 @@ import {
   build as viteBuild,
   createLogger
 } from "vite";
+import { parse as parseHtml } from "node-html-parser";
 import { resolveConfig } from "../config/index.js";
-import { pluginGetSsg } from "../plugins/ssg.js";
-import { pluginPartial, pluginGetPartial } from "../plugins/partial.js";
-import { pluginGetBundle } from "../plugins/bundle.js";
-import { generateHtml } from "../generate/html.js";
-import { generateAssets } from "../generate/assets.js";
-import { generatePartial } from "../generate/partial.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 { 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 { 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 },
-      plugins: [pluginGetSsg(), pluginPartial(config)],
+      ssr: { noExternal: "minista" },
+      plugins: [
+        pluginReact(),
+        pluginMdx(config),
+        pluginImage(config),
+        pluginSvgr(config),
+        pluginIcon(config),
+        pluginFetch(config),
+        pluginSsg(),
+        pluginPartial(config)
+      ],
       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 },
-      plugins: [pluginGetBundle()],
+      build: {
+        rollupOptions: {
+          input: assetEntries
+        },
+        write: false
+      },
+      plugins: [
+        pluginReact(),
+        pluginMdx(config),
+        pluginSvgr(config),
+        pluginBundle()
+      ],
       customLogger: createLogger("warn", { prefix: "[minista]" })
     })
   );
-  const partialConfig = mergeViteConfig(
+  assetsResult = await viteBuild(assetsConfig);
+  const hydrateConfig = mergeViteConfig(
     config.vite,
     defineViteConfig({
       build: { write: false },
-      plugins: [pluginGetPartial(config)],
+      plugins: [
+        pluginReact(),
+        pluginPreact(config),
+        pluginMdx(config),
+        pluginSvgr(config),
+        pluginHydrate(),
+        pluginSearch(config)
+      ],
       customLogger: createLogger("warn", { prefix: "[minista]" })
     })
   );
-  const hasPartial = fs.existsSync(path.join(config.sub.tempDir, "partials"));
-  let ssgResult;
-  let assetsResult;
-  let partialResult;
-  await Promise.all([
-    ssgResult = await viteBuild(ssgConfig),
-    assetsResult = await viteBuild(assetsConfig)
-  ]);
-  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
-  );
-  await Promise.all([
-    await generateHtml({
-      config,
-      items: ssgResult.output,
-      hasBundleCss
-    }),
-    await generateAssets({
-      config,
-      items: assetsResult.output
-    }),
-    hasPartial && await generatePartial({
-      config,
-      items: partialResult.output
+  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")
+      ];
     })
-  ]);
-  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];
+    }
+    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 });
+  }
+  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 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,23 +1,154 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import {
   createServer as createViteServer,
   defineConfig as defineViteConfig,
   mergeConfig as mergeViteConfig
 } from "vite";
+import { parse as parseHtml } from "node-html-parser";
 import { resolveConfig } from "../config/index.js";
-import { pluginServe } from "../plugins/serve.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 { pluginIcon } from "../plugins/icon.js";
+import { pluginFetch } from "../plugins/fetch.js";
 import { pluginPartial } from "../plugins/partial.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: [pluginServe(config), pluginPartial(config)]
+      plugins: [
+        pluginDevelop(config),
+        pluginReact(),
+        pluginPreact(config),
+        pluginMdx(config),
+        pluginImage(config),
+        pluginSvgr(config),
+        pluginIcon(config),
+        pluginFetch(config),
+        pluginPartial(config),
+        pluginSearch(config)
+      ]
     })
   );
   const viteServer = await createViteServer(mergedViteConfig);
   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
 };

package/dist/cli/logger.js

@@ -0,0 +1,40 @@
+import pc from "picocolors";
+function logger({
+  label,
+  main,
+  sub,
+  space = "",
+  data,
+  dataLength
+}) {
+  const labelStr = (() => {
+    switch (label) {
+      case "BUILD":
+        return pc.bold(pc.green(label));
+      case "FETCH":
+        return pc.bold(pc.blue(label));
+      case "ERROR":
+        return pc.bold(pc.red(label));
+      default:
+        return "";
+    }
+  })();
+  const mainStr = (() => {
+    switch (label) {
+      case "ERROR":
+        return pc.red(main);
+      default:
+        return pc.bold(main);
+    }
+  })();
+  let texts = [labelStr, mainStr];
+  sub && texts.push(pc.gray(sub));
+  let dataSize = "";
+  data && (dataSize = (data.length / 1024).toFixed(2));
+  dataLength && (dataSize = (dataLength / 1024).toFixed(2));
+  const size = dataSize ? pc.gray(`${dataSize} KiB`) : "";
+  console.log(texts.join(" ") + space + size);
+}
+export {
+  logger
+};

package/dist/cli/preview.js

@@ -1,8 +1,13 @@
-import { preview as vitePreview } from "vite";
+import {
+  preview as vitePreview,
+  defineConfig as defineViteConfig,
+  mergeConfig as mergeViteConfig
+} from "vite";
 import { resolveConfig } from "../config/index.js";
 async function preview(inlineConfig = {}) {
   const config = await resolveConfig(inlineConfig);
-  const viteServer = await vitePreview(config.vite);
+  const mergedViteConfig = mergeViteConfig(config.vite, defineViteConfig({}));
+  const viteServer = await vitePreview(mergedViteConfig);
   viteServer.printUrls();
 }
 export {

package/dist/config/entry.js

@@ -30,6 +30,15 @@ function resolveEntryExclude(input) {
   }
   return [];
 }
+function resolveViteEntry(root, entry) {
+  if (!entry.length) {
+    return {};
+  }
+  const entries = Object.fromEntries(
+    entry.map((item) => [item.name, path.join(root, item.input)])
+  );
+  return entries;
+}
 async function resolveEntry(entry) {
   const entries = [];
   async function pushEntries(input) {
@@ -40,7 +49,7 @@ async function resolveEntry(entry) {
       const pattern = {
         name: path.parse(input).name,
         input,
-        insertPages: ["**/*"],
+        insertPages: { include: ["**/*"], exclude: [] },
         position: "head",
         attributes: ""
       };
@@ -53,7 +62,7 @@ async function resolveEntry(entry) {
             const pattern = {
               name: path.parse(item).name,
               input: item,
-              insertPages: ["**/*"],
+              insertPages: { include: ["**/*"], exclude: [] },
               position: "head",
               attributes: ""
             };
@@ -67,11 +76,10 @@ async function resolveEntry(entry) {
             const name = item.name || path.parse(item.input).name;
             const include = resolveEntryInclude(item.insertPages);
             const exclude = resolveEntryExclude(item.insertPages);
-            const fixedExclude = exclude.map((item2) => "!" + item2);
             const pattern = {
               name,
               input: item.input,
-              insertPages: [...include, ...fixedExclude],
+              insertPages: { include, exclude },
               position: item.position || "head",
               attributes: item.attributes || ""
             };
@@ -85,7 +93,7 @@ async function resolveEntry(entry) {
           const pattern = {
             name: item[0],
             input: item[1],
-            insertPages: ["**/*"],
+            insertPages: { include: ["**/*"], exclude: [] },
             position: "head",
             attributes: ""
           };
@@ -95,10 +103,25 @@ async function resolveEntry(entry) {
     }
   }
   await pushEntries(entry);
-  return entries;
+  const entryNames = entries.map((item) => item.name);
+  const duplicateNames = entryNames.filter(
+    (value, index, self) => self.indexOf(value) === index && self.lastIndexOf(value) !== index
+  );
+  const uniqueNameEntries = entries.map((item, index) => {
+    const name = duplicateNames.includes(item.name) ? `${item.name}-ministaDuplicateName${index}` : item.name;
+    return {
+      name,
+      input: item.input,
+      insertPages: item.insertPages,
+      position: item.position,
+      attributes: item.attributes
+    };
+  });
+  return uniqueNameEntries;
 }
 export {
   resolveEntry,
   resolveEntryExclude,
-  resolveEntryInclude
+  resolveEntryInclude,
+  resolveViteEntry
 };