@christophervr/pptx-viewer 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.4.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.1) - 2026-07-05
+
+## [1.4.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.0) - 2026-07-05
+
+### Features
+
+- **core,cli:** Add react, angular, vue to npm keywords (by @ChristopherVR) ([528ec61](https://github.com/ChristopherVR/pptx-viewer/commit/528ec6182bb77c07444dd0e93560b65e604b9524))
+
 ## [1.3.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.3.0) - 2026-07-04
 
 ## [1.2.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.2.0) - 2026-07-04

package/dist/index.mjs

@@ -412,6 +412,7 @@ var REACT_APP_TSX = `import { useCallback, useState } from 'react';
 import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewer } from 'pptx-react-viewer';
 import 'pptx-react-viewer/styles.css';
+import './i18n';
 
 export default function App() {
 	const [content, setContent] = useState<Uint8Array | null>(null);
@@ -439,20 +440,58 @@ export default function App() {
 	}
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, height: '100vh' }}>
-			<input
-				type="file"
-				accept=".pptx"
-				onChange={(e) => {
-					const file = e.target.files?.[0];
-					if (file) loadFile(file);
-				}}
-			/>
-			<button onClick={() => void newPresentation()}>or create a New Presentation</button>
+		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, height: '100vh', fontFamily: 'system-ui, sans-serif' }}>
+			<h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, color: '#e5e7eb' }}>Open a Presentation</h1>
+			<label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 20px', borderRadius: 8, border: '1px solid #4b5563', background: '#1f2937', color: '#f3f4f6', cursor: 'pointer', fontSize: 14, transition: 'background 0.15s' }}>
+				Choose .pptx file
+				<input
+					type="file"
+					accept=".pptx"
+					style={{ display: 'none' }}
+					onChange={(e) => {
+						const file = e.target.files?.[0];
+						if (file) loadFile(file);
+					}}
+				/>
+			</label>
+			<span style={{ color: '#6b7280', fontSize: 13 }}>or</span>
+			<button
+				onClick={() => void newPresentation()}
+				style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontSize: 14, fontWeight: 500 }}
+			>
+				New Presentation
+			</button>
 		</div>
 	);
 }
 `;
+var REACT_I18N_TS = `import { createInstance } from 'i18next';
+import { translationsEn, keyToLabel } from 'pptx-react-viewer/i18n';
+import { initReactI18next } from 'react-i18next';
+
+const i18n = createInstance();
+
+i18n.use(initReactI18next).init({
+	resources: {
+		en: { translation: translationsEn },
+	},
+	lng: 'en',
+	fallbackLng: 'en',
+	interpolation: { escapeValue: false },
+	parseMissingKeyHandler: (key: string) => keyToLabel(key),
+	missingKeyHandler: false,
+});
+
+export default i18n;
+`;
+var REACT_INDEX_CSS = `:root {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+}
+`;
 var VUE_APP_VUE = `<script setup lang="ts">
 import { ref } from 'vue';
 import { PptxHandler } from 'pptx-viewer-core';
@@ -485,12 +524,34 @@ async function newPresentation() {
 	<div v-if="content" style="height: 100vh">
 		<PowerPointViewer :content="content" can-edit style="height: 100%" />
 	</div>
-	<div v-else style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100vh">
-		<input type="file" accept=".pptx" @change="onPick" />
-		<button @click="newPresentation">or create a New Presentation</button>
+	<div v-else style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
+		<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
+		<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
+			Choose .pptx file
+			<input type="file" accept=".pptx" style="display: none" @change="onPick" />
+		</label>
+		<span style="color: #6b7280; font-size: 13px">or</span>
+		<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" @click="newPresentation">New Presentation</button>
 	</div>
 </template>
 `;
+var VUE_MAIN_TS = `import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+import { translationsEn, keyToLabel } from 'pptx-vue-viewer/i18n';
+import App from './App.vue';
+
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en',
+	fallbackLocale: 'en',
+	messages: { en: translationsEn },
+	missing: (_locale, key) => keyToLabel(key),
+	missingWarn: false,
+	fallbackWarn: false,
+});
+
+createApp(App).use(i18n).mount('#app');
+`;
 var ANGULAR_APP_TS = `import { Component, signal } from '@angular/core';
 import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewerComponent } from 'pptx-angular-viewer';
@@ -505,9 +566,14 @@ import { PowerPointViewerComponent } from 'pptx-angular-viewer';
 				<pptx-power-point-viewer [content]="c" [canEdit]="true" style="height: 100%" />
 			</div>
 		} @else {
-			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100vh">
-				<input type="file" accept=".pptx" (change)="onPick($event)" />
-				<button (click)="newPresentation()">or create a New Presentation</button>
+			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
+				<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
+				<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
+					Choose .pptx file
+					<input type="file" accept=".pptx" style="display: none" (change)="onPick($event)" />
+				</label>
+				<span style="color: #6b7280; font-size: 13px">or</span>
+				<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" (click)="newPresentation()">New Presentation</button>
 			</div>
 		}
 	\`,
@@ -531,6 +597,36 @@ export class App {
 	}
 }
 `;
+var ANGULAR_MAIN_TS = `import 'zone.js';
+import '@angular/compiler';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
+import type { MissingTranslationHandlerParams } from '@ngx-translate/core';
+import { MissingTranslationHandler, provideTranslateService } from '@ngx-translate/core';
+import { keyToLabel } from 'pptx-angular-viewer';
+
+import { App } from './app/app.ts';
+
+@Injectable()
+class LabelFallbackHandler implements MissingTranslationHandler {
+	handle(params: MissingTranslationHandlerParams): string {
+		return keyToLabel(params.key);
+	}
+}
+
+bootstrapApplication(App, {
+	providers: [
+		provideTranslateService({
+			lang: 'en',
+			fallbackLang: 'en',
+			missingTranslationHandler: {
+				provide: MissingTranslationHandler,
+				useClass: LabelFallbackHandler,
+			},
+		}),
+	],
+}).catch((err) => console.error(err));
+`;
 var TARGETS = [
   {
     id: "react",
@@ -578,7 +674,11 @@ Docs: https://www.npmjs.com/package/pptx-react-viewer`,
         "react-i18next"
       ],
       entryCandidates: ["src/App.tsx"],
-      entryContent: REACT_APP_TSX
+      entryContent: REACT_APP_TSX,
+      extraFiles: {
+        "src/i18n.ts": REACT_I18N_TS,
+        "src/index.css": REACT_INDEX_CSS
+      }
     }
   },
   {
@@ -602,9 +702,16 @@ Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
     scaffold: {
       command: "create-vite@latest",
       args: (dir) => [dir, "--template", "vue-ts", "--no-interactive", "--no-immediate"],
-      extraPackages: ["pptx-vue-viewer", "pptx-viewer-core", "jszip", "fast-xml-parser"],
+      extraPackages: [
+        "pptx-vue-viewer",
+        "pptx-viewer-core",
+        "vue-i18n",
+        "jszip",
+        "fast-xml-parser"
+      ],
       entryCandidates: ["src/App.vue"],
-      entryContent: VUE_APP_VUE
+      entryContent: VUE_APP_VUE,
+      extraFiles: { "src/main.ts": VUE_MAIN_TS }
     }
   },
   {
@@ -636,10 +743,11 @@ Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
         "--skip-install",
         "--no-interactive"
       ],
-      extraPackages: ["pptx-angular-viewer", "pptx-viewer-core"],
+      extraPackages: ["pptx-angular-viewer", "pptx-viewer-core", "@ngx-translate/core"],
       // Angular v20+ generates `app.ts`; older schematics generate `app.component.ts`.
       entryCandidates: ["src/app/app.ts", "src/app/app.component.ts"],
-      entryContent: ANGULAR_APP_TS
+      entryContent: ANGULAR_APP_TS,
+      extraFiles: { "src/main.ts": ANGULAR_MAIN_TS }
     }
   },
   {
@@ -735,18 +843,19 @@ function mergePackages(targets) {
 
 // src/run-command.ts
 import { spawn } from "child_process";
-function runCommand(command, args, cwd) {
+function runCommand(command, args, cwd, options) {
   return new Promise((resolve, reject) => {
     const isWindows = process.platform === "win32";
-    const child = isWindows ? spawn([command, ...args].join(" "), { cwd, stdio: "inherit", shell: true }) : spawn(command, args, { cwd, stdio: "inherit" });
+    const stdio = options?.silent ? "ignore" : "inherit";
+    const child = isWindows ? spawn([command, ...args].join(" "), { cwd, stdio, shell: true }) : spawn(command, args, { cwd, stdio });
     child.on("error", reject);
     child.on("close", (code) => resolve(code ?? 1));
   });
 }
 
 // src/scaffold.ts
-import { existsSync as existsSync3, writeFileSync } from "fs";
-import { join as join3 } from "path";
+import { existsSync as existsSync3, mkdirSync, writeFileSync } from "fs";
+import { dirname, join as join3 } from "path";
 function sanitizeProjectName(name) {
   const cleaned = name.trim().replace(/[^a-zA-Z0-9._-]+/gu, "-").replace(/-{2,}/gu, "-").replace(/^-+|-+$/gu, "");
   return cleaned || "pptx-viewer-app";
@@ -763,7 +872,8 @@ async function scaffoldProject(recipe, projectName, pm, cwd) {
   const scaffoldExit = await runCommand(
     "npx",
     ["--yes", recipe.command, ...recipe.args(projectName)],
-    cwd
+    cwd,
+    { silent: true }
   );
   if (scaffoldExit !== 0) {
     throw new Error(`${recipe.command} exited with code ${scaffoldExit}`);
@@ -773,6 +883,13 @@ async function scaffoldProject(recipe, projectName, pm, cwd) {
   if (patchedFile) {
     writeFileSync(join3(projectDir, patchedFile), recipe.entryContent);
   }
+  if (recipe.extraFiles) {
+    for (const [relativePath, content] of Object.entries(recipe.extraFiles)) {
+      const fullPath = join3(projectDir, relativePath);
+      mkdirSync(dirname(fullPath), { recursive: true });
+      writeFileSync(fullPath, content);
+    }
+  }
   if (recipe.extraPackages.length > 0) {
     const [command, args] = installCommand(pm, recipe.extraPackages);
     const installExit = await runCommand(command, args, projectDir);
@@ -891,18 +1008,20 @@ ${dim("Skipped.")}`);
 ${yellow("Scaffolded the project, but could not find an entry file to wire up automatically.")} See the quick-start snippet below and add it yourself.`
     );
   }
-  console.log(
-    `
-${green("\u2714")} ${bold("Done.")} Next steps:
-
+  for (const configTarget of configTargets) {
+    console.log(`
+${configTarget.nextSteps}
+`);
+  }
+  console.log(`
+${green("\u2714")} ${bold("Done!")} Starting dev server...
+`);
+  const projectDir = result.projectDir;
+  const devExit = await runCommand(pm, ["run", "dev"], projectDir);
+  if (devExit !== 0) {
+    console.log(`
   ${cyan(`cd ${projectName}`)}
   ${cyan(`${pm} run dev`)}
-
-${target.nextSteps}
-`
-  );
-  for (const configTarget of configTargets) {
-    console.log(`${configTarget.nextSteps}
 `);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@christophervr/pptx-viewer",
-	"version": "1.4.0",
+	"version": "1.4.2",
 	"description": "Interactive installer for the pptx-viewer family of packages: React, Vue, and Angular viewer components, the framework-agnostic core engine, and the MCP server.",
 	"keywords": [
 		"angular",