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

package/cli.js

@@ -30,9 +30,13 @@ async function runBuildAll() {
 async function runBuild() {
   try {
     await build({
-      root: resolve(import.meta.dirname),
+      root: process.cwd(),
+      configFile: resolve(import.meta.dirname, "vite.config.ts"),
       build: {
-        outDir: resolve("pages"),
+        outDir: resolve(process.cwd(), "pages"),
+        rollupOptions: {
+          input: resolve(import.meta.dirname, "src/main.tsx"),
+        },
       },
     });
   } catch (error) {

package/package.json

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

package/scripts/build-pages.js

@@ -1,11 +1,11 @@
 import { existsSync } from "fs";
-import { mkdir, readdir, stat, cp, writeFile, mkdtemp, rmdir, } from "fs/promises";
+import { mkdir, readdir, stat, cp, writeFile, mkdtemp, rm } from "fs/promises";
 import { join, resolve } from "path";
 import { build } from "vite";
 const defaultSlidesDir = resolve(import.meta.dirname, "..", "slides");
 const pagesDir = "pages";
 // Ensure pages directory exists
-await rmdir(pagesDir, { recursive: true });
+await rm(pagesDir, { recursive: true });
 await mkdir(pagesDir, { recursive: true });
 async function buildSlide(slideName) {
     console.log(`Building ${slideName}...`);
@@ -20,7 +20,7 @@ async function buildSlide(slideName) {
     const slideOutputDir = join(pagesDir, slideName);
     await mkdir(slideOutputDir, { recursive: true });
     await cp(tmpDir, slideOutputDir, { recursive: true });
-    await rmdir(tmpDir, { recursive: true });
+    await rm(tmpDir, { recursive: true });
 }
 async function createIndexPage(slideNames) {
     const slides = slideNames

package/src/remark-slide-images.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from "unified";
 import { visit } from "unist-util-visit";
-import type { Root } from "mdast";
+import type { Root, Image } from "mdast";
 
 interface RemarkSlideImagesOptions {
   base: string;
@@ -12,17 +12,22 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
   const { base } = options;
 
   return (tree) => {
-    visit(tree, (node: any) => {
+    visit(tree, (node) => {
       // Handle Markdown image syntax
-      if (node.type === "image" && typeof node.url === "string") {
-        if (node.url.startsWith("@slide/")) {
-          node.url = `${base}slide-assets/images/${node.url.slice(7)}`;
+      if (node.type === "image") {
+        const imageNode = node as Image;
+        if (imageNode.url.startsWith("@slide/")) {
+          imageNode.url = `${base}slide-assets/images/${imageNode.url.slice(7)}`;
         }
       }
 
       // Handle MDX JSX img elements
-      if (node.type === "mdxJsxFlowElement" && node.name === "img") {
-        const src = node.attributes?.find(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (node.type === "mdxJsxFlowElement" && (node as any).name === "img") {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mdxNode = node as any;
+        const src = mdxNode.attributes?.find(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (attr: any) => attr.type === "mdxJsxAttribute" && attr.name === "src",
         );
         if (
@@ -36,9 +41,11 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
 
       // Handle HTML img tags in Markdown
       if (node.type === "html") {
-        const value = node.value as string;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const htmlNode = node as any;
+        const value = htmlNode.value as string;
         if (value.startsWith("<img")) {
-          node.value = value.replace(
+          htmlNode.value = value.replace(
             /<img\s+([^>]*src="(@slide\/[^"]+)"[^>]*)>/g,
             (_, attributes, src) => {
               return `<img ${attributes.replace(

package/src/vite-plugin-slides.ts

@@ -50,7 +50,7 @@ function validateSlidesDir(dir: string): void {
   }
   try {
     fs.accessSync(dir, fs.constants.R_OK);
-  } catch (err) {
+  } catch {
     throw new Error(`No read permission for external slides directory: ${dir}`);
   }
 }
@@ -149,10 +149,12 @@ export default async function slidesPlugin(
 
   let base: string;
   let compiledSlides: string[] = [];
+  let resolvedConfig: ResolvedConfig;
   return {
     name: "vite-plugin-slides",
     configResolved(config: ResolvedConfig) {
       base = config.base;
+      resolvedConfig = config;
     },
     enforce: "pre",
     resolveId(id: string) {
@@ -169,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,
         };
       }
@@ -220,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;
@@ -282,35 +286,134 @@ export default async function slidesPlugin(
       }
     },
     async buildStart() {
-      const targetImagesDir = path.resolve(
-        process.cwd(),
-        "public/slide-assets/images",
-      );
-      const sourceImagesDir = path.resolve(
-        config.slidesDir,
-        config.collection,
-        "images",
-      );
-
-      // Copy images from slides directory
-      if (fs.existsSync(sourceImagesDir)) {
-        try {
-          // Create target directory if it doesn't exist
-          mkdirSync(targetImagesDir, { recursive: true });
-
-          // Copy all files from source to target
-          const imageFiles = readdirSync(sourceImagesDir);
-          for (const file of imageFiles) {
-            const sourcePath = path.join(sourceImagesDir, file);
-            const targetPath = path.join(targetImagesDir, file);
-            copyFileSync(sourcePath, targetPath);
+      // Handle images during dev mode
+      if (resolvedConfig.command === "serve") {
+        const targetImagesDir = path.resolve(
+          resolvedConfig.root,
+          "public/slide-assets/images",
+        );
+        const sourceImagesDir = path.resolve(
+          config.slidesDir,
+          config.collection,
+          "images",
+        );
+
+        // Copy images from slides directory
+        if (fs.existsSync(sourceImagesDir)) {
+          try {
+            // Create target directory if it doesn't exist
+            mkdirSync(targetImagesDir, { recursive: true });
+
+            // Copy all files from source to target
+            const imageFiles = readdirSync(sourceImagesDir);
+            for (const file of imageFiles) {
+              const sourcePath = path.join(sourceImagesDir, file);
+              const targetPath = path.join(targetImagesDir, file);
+              copyFileSync(sourcePath, targetPath);
+            }
+            logger.info("Copied slide images successfully");
+          } catch (error) {
+            if (error instanceof Error) {
+              logger.error("Failed to copy slide images", error);
+            }
+            throw error;
           }
-          logger.info("Copied slide images successfully");
-        } catch (error) {
-          if (error instanceof Error) {
-            logger.error("Failed to copy slide images", error);
+        }
+      }
+    },
+
+    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
+        const mainJsFile = Object.keys(bundle).find(
+          (fileName) =>
+            fileName.startsWith("assets/main-") && fileName.endsWith(".js"),
+        );
+
+        if (!mainJsFile) {
+          logger.error("Could not find main JS file in bundle");
+          return;
+        }
+
+        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">
+  </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(
+          config.slidesDir,
+          config.collection,
+          "images",
+        );
+
+        if (fs.existsSync(sourceImagesDir)) {
+          try {
+            const imageFiles = readdirSync(sourceImagesDir);
+            logger.info(
+              `Processing ${imageFiles.length} image files from ${sourceImagesDir}`,
+            );
+
+            let processedCount = 0;
+            for (const file of imageFiles) {
+              const sourcePath = path.join(sourceImagesDir, file);
+              try {
+                const imageContent = fs.readFileSync(sourcePath);
+
+                // Add image files to the bundle
+                this.emitFile({
+                  type: "asset",
+                  fileName: `slide-assets/images/${file}`,
+                  source: imageContent,
+                });
+                processedCount++;
+                logger.info(`Added image to bundle: ${file}`);
+              } catch (fileError) {
+                logger.error(
+                  `Failed to process image file: ${file}`,
+                  fileError instanceof Error
+                    ? fileError
+                    : new Error(String(fileError)),
+                );
+                // Continue processing other files instead of failing completely
+              }
+            }
+            logger.info(
+              `Successfully added ${processedCount}/${imageFiles.length} slide images to bundle`,
+            );
+          } catch (error) {
+            if (error instanceof Error) {
+              logger.error("Failed to read slide images directory", error);
+            }
+            throw error;
           }
-          throw error;
+        } else {
+          logger.warn(`No images directory found at: ${sourceImagesDir}`);
         }
       }
     },

package/vite.config.ts

@@ -9,7 +9,10 @@ export default defineConfig(async () => {
     base: "./",
     resolve: {
       alias: {
-        "@components": "/src/slide-components",
+        "@components": path.resolve(
+          import.meta.dirname,
+          "src/slide-components",
+        ),
       },
     },
     plugins: [