npm - @berlysia/vertical-writing-slide-system - Versions diffs - 0.0.11 → 0.0.13 - Mend

@berlysia/vertical-writing-slide-system 0.0.11 → 0.0.13

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 +8 -0
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 +56 -41

package/cli.js CHANGED Viewed

@@ -34,6 +34,14 @@ async function runBuild() {
       configFile: resolve(import.meta.dirname, "vite.config.ts"),
       build: {
         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.11",
+  "version": "0.0.13",
   "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

@@ -171,7 +171,7 @@ export default async function slidesPlugin(
         nullPrefixedVirtualFilePageIdPattern.test(id)
       ) {
         return {
-          code: `import React from 'react';\n${code}`,
+          code: `import * as React from 'react';\n${code}`,
           map: null,
         };
       }
@@ -222,6 +222,8 @@ export default async function slidesPlugin(
             const result = await compile(slideContent, {
               outputFormat: "program",
               development: false,
+              jsxImportSource: "react",
+              jsxRuntime: "automatic",
               remarkPlugins: [[remarkSlideImages, { base }]],
             });
             return result.value as string;
@@ -284,45 +286,6 @@ export default async function slidesPlugin(
       }
     },
     async buildStart() {
-      // Ensure index.html exists in consumer project
-      const consumerIndexHtml = path.resolve(resolvedConfig.root, "index.html");
-      if (!fs.existsSync(consumerIndexHtml)) {
-        try {
-          // Create a consumer-specific index.html that points to library sources
-          const libraryRoot = path.resolve(import.meta.dirname, "..");
-          const relativePath = path.relative(resolvedConfig.root, libraryRoot);
-          const indexHtmlContent = `<!doctype html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/${relativePath}/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="/${relativePath}/src/index.css" />
-    <link rel="stylesheet" media="screen" href="/${relativePath}/src/screen.css" />
-    <link rel="stylesheet" media="print" href="/${relativePath}/src/print.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/${relativePath}/src/main.tsx"></script>
-  </body>
-</html>`;
-          fs.writeFileSync(consumerIndexHtml, indexHtmlContent);
-          logger.info("Generated index.html for consumer project");
-        } catch (error) {
-          if (error instanceof Error) {
-            logger.error("Failed to create index.html", error);
-          }
-          throw error;
-        }
-      }
       // Handle images during dev mode
       if (resolvedConfig.command === "serve") {
         const targetImagesDir = path.resolve(
@@ -359,7 +322,59 @@ export default async function slidesPlugin(
       }
     },
-    generateBundle() {
+    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 and CSS files in the bundle
+        const mainJsFile = Object.keys(bundle).find(
+          (fileName) =>
+            fileName.startsWith("assets/") &&
+            fileName.includes("main-") &&
+            fileName.endsWith(".js"),
+        );
+        const mainCssFile = Object.keys(bundle).find(
+          (fileName) =>
+            fileName.startsWith("assets/") && fileName.endsWith(".css"),
+        );
+        if (!mainJsFile) {
+          logger.error("Could not find main JS file in bundle");
+          return;
+        }
+        const cssLink = mainCssFile
+          ? `<link rel="stylesheet" href="./${mainCssFile}">`
+          : "<!-- CSS is included in the JS bundle -->";
+        const virtualIndexHtml = `<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <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">
+    ${cssLink}
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./${mainJsFile}"></script>
+  </body>
+</html>`;
+        // Emit HTML file as part of the build output
+        this.emitFile({
+          type: "asset",
+          fileName: "index.html",
+          source: virtualIndexHtml,
+        });
+        logger.info("Generated index.html for build output");
+      }
       // Handle images during build mode
       if (resolvedConfig.command === "build") {
         const sourceImagesDir = path.resolve(