npm - @berlysia/vertical-writing-slide-system - Versions diffs - 0.0.12 → 0.0.14 - Mend

@berlysia/vertical-writing-slide-system 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/cli.js +70 -4
package/index.html +6 -6
package/package.json +1 -1
package/src/index.css +3 -0
package/src/main.tsx +1 -0
package/src/vite-plugin-slides.ts +14 -3

package/cli.js CHANGED Viewed

@@ -2,16 +2,77 @@
 // @ts-check
 import { execSync } from "child_process";
-import { mkdir, mkdtemp, cp, rm } from "node:fs/promises";
+import { mkdir, mkdtemp, cp, rm, writeFile, access } from "node:fs/promises";
 import { resolve } from "node:path";
 import { parseArgs } from "node:util";
-import { build } from "vite";
+import { build, createServer } from "vite";
+async function ensureIndexHtml() {
+  const indexHtmlPath = resolve(process.cwd(), "index.html");
+  try {
+    await access(indexHtmlPath);
+    // index.html already exists
+    return;
+  } catch {
+    // index.html doesn't exist, create it
+    // Use relative paths that Vite can resolve during development
+    const indexHtmlContent = `<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vertical Writing Slides</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/src/index.css" />
+    <link rel="stylesheet" media="screen" href="/src/screen.css" />
+    <link rel="stylesheet" media="print" href="/src/print.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>`;
+    await writeFile(indexHtmlPath, indexHtmlContent);
+    console.log("Generated index.html for external project");
+  }
+}
 async function runDev() {
   try {
-    execSync("npx vite", { stdio: "inherit" });
+    const libPath = import.meta.dirname;
+    const projectPath = process.cwd();
+    const server = await createServer({
+      root: libPath, // Use library as root for assets
+      configFile: resolve(libPath, "vite.config.ts"),
+      server: {
+        fs: {
+          allow: [
+            // Allow serving files from the library directory
+            libPath,
+            // Allow serving files from the current working directory
+            projectPath,
+          ],
+        },
+      },
+    });
+    await server.listen();
+    server.printUrls();
+    console.log("Development server started. Press Ctrl+C to stop.");
+    // Keep the process running
+    process.on("SIGINT", async () => {
+      console.log("\nShutting down development server...");
+      await server.close();
+      process.exit(0);
+    });
   } catch (error) {
-    console.error("Error during build:", error);
+    console.error("Error during development server startup:", error);
     process.exit(1);
   }
 }
@@ -36,7 +97,12 @@ async function runBuild() {
         outDir: resolve(process.cwd(), "pages"),
         rollupOptions: {
           input: resolve(import.meta.dirname, "src/main.tsx"),
+          output: {
+            assetFileNames: "assets/[name]-[hash][extname]",
+          },
         },
+        cssCodeSplit: true,
+        assetsInlineLimit: 0,
       },
     });
   } catch (error) {

package/index.html CHANGED Viewed

@@ -5,12 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/src/index.css" />
-    <link rel="stylesheet" media="screen" href="/src/screen.css" />
-    <link rel="stylesheet" media="print" href="/src/print.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"

package/src/index.css CHANGED Viewed

@@ -1,3 +1,6 @@
+@import "screen.css" screen;
+@import "print.css" print;
 * {
   box-sizing: border-box;
 }

package/src/main.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
+import "./index.css";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/vite-plugin-slides.ts CHANGED Viewed

@@ -322,15 +322,21 @@ export default async function slidesPlugin(
       }
     },
-    generateBundle(options, bundle) {
+    generateBundle(_options, bundle) {
       // Generate HTML file if none exists in consumer project
       const consumerIndexHtml = path.resolve(resolvedConfig.root, "index.html");
       if (!fs.existsSync(consumerIndexHtml)) {
-        // Find the main JS file in the bundle
+        // Find the main JS and CSS files in the bundle
         const mainJsFile = Object.keys(bundle).find(
           (fileName) =>
-            fileName.startsWith("assets/main-") && fileName.endsWith(".js"),
+            fileName.startsWith("assets/") &&
+            fileName.includes("main-") &&
+            fileName.endsWith(".js"),
+        );
+        const mainCssFile = Object.keys(bundle).find(
+          (fileName) =>
+            fileName.startsWith("assets/") && fileName.endsWith(".css"),
         );
         if (!mainJsFile) {
@@ -338,6 +344,10 @@ export default async function slidesPlugin(
           return;
         }
+        const cssLink = mainCssFile
+          ? `<link rel="stylesheet" href="./${mainCssFile}">`
+          : "<!-- CSS is included in the JS bundle -->";
         const virtualIndexHtml = `<!doctype html>
 <html lang="ja">
   <head>
@@ -347,6 +357,7 @@ export default async function slidesPlugin(
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
+    ${cssLink}
   </head>
   <body>
     <div id="root"></div>