create-quicklook 0.2.0 → 0.5.0

package/LICENSE

@@ -1,3 +1,7 @@
+MIT License
+
+Copyright (c) 2026 Jan T. Sott
+
 Permission is hereby granted, free of charge, to any
 person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the

package/README.markdown

@@ -1,10 +1,10 @@
 # create-quicklook
 
-![License](https://img.shields.io/npm/l/quicklook-kit?style=for-the-badge)
-[![Version](https://img.shields.io/npm/v/quicklook-kit?style=for-the-badge)](https://www.npmjs.org/package/quicklook-kit)
-[![Build](https://img.shields.io/github/actions/workflow/status/idleberg/quicklook-kit/ci.yml?style=for-the-badge)](https://github.com/idleberg/quicklook-kit/actions)
+![License](https://img.shields.io/npm/l/create-quicklook?style=for-the-badge)
+[![Version](https://img.shields.io/npm/v/create-quicklook?style=for-the-badge)](https://www.npmjs.org/package/create-quicklook)
+[![Build](https://img.shields.io/github/actions/workflow/status/idleberg/create-quicklook/ci.yml?style=for-the-badge)](https://github.com/idleberg/create-quicklook/actions)
 
-> Create a macOS QuickLook preview with any Vite-based web framework
+> Create a macOS Quick Look preview with any Vite-based web framework
 
 ```sh
 pnpm create quicklook my-preview

package/dist/index.mjs

@@ -75,7 +75,7 @@ note([
 	`cd ${relative(process.cwd(), dir)}`,
 	"mise install    # or: pnpm install, with Xcode and XcodeGen installed",
 	"pnpm dev        # drop a file on the page to preview it",
-	"pnpm register   # build the app and register it with QuickLook"
+	"pnpm register   # build the app and register it with Quick Look"
 ].join("\n"), "Next steps");
 outro(`Created from the ${template} template.`);
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-quicklook",
-  "version": "0.2.0",
-  "description": "Create a macOS QuickLook preview with any Vite-based web framework",
+  "version": "0.5.0",
+  "description": "Create a macOS Quick Look preview with any Vite-based web framework",
   "license": "MIT",
   "keywords": [
     "quicklook",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/node": "24.19.2",
-    "tsdown": "0.23.0",
+    "tsdown": "0.23.1",
     "typescript": "6.0.3"
   },
   "dependencies": {

package/templates/analog/package.json

@@ -12,18 +12,18 @@
 		"format": "biome check --write"
 	},
 	"devDependencies": {
-		"@analogjs/vite-plugin-angular": "2.7.5",
-		"@angular/build": "22.2.0",
-		"@angular/common": "22.2.0",
-		"@angular/compiler": "22.2.0",
-		"@angular/compiler-cli": "22.2.0",
-		"@angular/core": "22.2.0",
-		"@angular/platform-browser": "22.2.0",
-		"@biomejs/biome": "2.5.14",
-		"quicklook-kit": "^0.3.0",
+		"@analogjs/vite-plugin-angular": "2.8.0",
+		"@angular/build": "22.2.2",
+		"@angular/common": "22.2.2",
+		"@angular/compiler": "22.2.2",
+		"@angular/compiler-cli": "22.2.2",
+		"@angular/core": "22.2.2",
+		"@angular/platform-browser": "22.2.2",
+		"@biomejs/biome": "2.5.15",
+		"quicklook-kit": "^0.5.0",
 		"rxjs": "7.8.2",
 		"tslib": "2.8.1",
 		"typescript": "6.0.3",
-		"vite": "8.3.0"
+		"vite": "8.3.4"
 	}
 }

package/templates/analog/quicklook.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'quicklook-kit';
 
 export default defineConfig({
-	name: 'QuickLook Example',
+	name: 'Quick Look Example',
 	bundleId: 'com.example.QuickLookExample',
 	types: [
 		{

package/templates/analog/src/app/app.ts

@@ -10,7 +10,7 @@ import { FileViewer } from './file-viewer';
 		@if (file(); as file) {
 			<app-file-viewer [file]="file" />
 		} @else {
-			<!-- Only reachable in the browser: QuickLook always injects a file. -->
+			<!-- Only reachable in the browser: Quick Look always injects a file. -->
 			<label class="drop">
 				Drop a file here, or click to pick one
 				<input type="file" hidden (change)="open($any($event.target).files)" />

package/templates/astro/package.json

@@ -13,9 +13,9 @@
 	},
 	"devDependencies": {
 		"@astrojs/check": "0.9.10",
-		"@biomejs/biome": "2.5.14",
-		"astro": "7.3.5",
-		"quicklook-kit": "^0.3.0",
+		"@biomejs/biome": "2.5.15",
+		"astro": "7.3.8",
+		"quicklook-kit": "^0.5.0",
 		"typescript": "6.0.3"
 	}
 }

package/templates/astro/quicklook.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'quicklook-kit';
 
 export default defineConfig({
-	name: 'QuickLook Example',
+	name: 'Quick Look Example',
 	bundleId: 'com.example.QuickLookExample',
 	types: [
 		{

package/templates/astro/src/pages/index.astro

@@ -11,7 +11,7 @@ import FileViewer from '../components/FileViewer.astro';
 	</head>
 	<body>
 		<FileViewer />
-		<!-- Only reachable in the browser: QuickLook always injects a file. -->
+		<!-- Only reachable in the browser: Quick Look always injects a file. -->
 		<label id="drop">
 			Drop a file here, or click to pick one
 			<input type="file" hidden />

package/templates/nuxt/app/app.vue

@@ -23,7 +23,7 @@ onMounted(() => {
 
 <template>
 	<FileViewer v-if="file" :file="file" />
-	<!-- Only reachable in the browser: QuickLook always injects a file. -->
+	<!-- Only reachable in the browser: Quick Look always injects a file. -->
 	<label v-else class="drop">
 		Drop a file here, or click to pick one
 		<input type="file" hidden @change="open(($event.target as HTMLInputElement).files)" />

package/templates/nuxt/package.json

@@ -13,11 +13,11 @@
 		"format": "biome check --write"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.5.14",
-		"nuxt": "4.5.2",
-		"quicklook-kit": "^0.3.0",
+		"@biomejs/biome": "2.5.15",
+		"nuxt": "4.6.1",
+		"quicklook-kit": "^0.5.0",
 		"typescript": "6.0.3",
 		"vue": "3.5.43",
-		"vue-tsc": "3.3.11"
+		"vue-tsc": "3.3.13"
 	}
 }

package/templates/nuxt/quicklook.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'quicklook-kit';
 
 export default defineConfig({
-	name: 'QuickLook Example',
+	name: 'Quick Look Example',
 	bundleId: 'com.example.QuickLookExample',
 	types: [
 		{

package/templates/solid-start/package.json

@@ -12,13 +12,13 @@
 		"format": "biome check --write"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.5.14",
+		"@biomejs/biome": "2.5.15",
 		"@solidjs/router": "1.0.0",
 		"@solidjs/start": "2.0.6",
 		"nitro": "3.0.260903-beta",
-		"quicklook-kit": "^0.3.0",
+		"quicklook-kit": "^0.5.0",
 		"solid-js": "1.9.17",
 		"typescript": "6.0.3",
-		"vite": "8.3.0"
+		"vite": "8.3.4"
 	}
 }

package/templates/solid-start/quicklook.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'quicklook-kit';
 
 export default defineConfig({
-	name: 'QuickLook Example',
+	name: 'Quick Look Example',
 	bundleId: 'com.example.QuickLookExample',
 	types: [
 		{

package/templates/solid-start/src/routes/index.tsx

@@ -22,7 +22,7 @@ export default function Home() {
 		<Show
 			when={file()}
 			fallback={
-				// Only reachable in the browser: QuickLook always injects a file.
+				// Only reachable in the browser: Quick Look always injects a file.
 				<label class="drop">
 					Drop a file here, or click to pick one
 					<input type="file" hidden={true} onChange={(event) => open(event.currentTarget.files)} />

package/templates/sveltekit/package.json

@@ -12,14 +12,14 @@
 		"format": "biome check --write"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.5.14",
-		"@sveltejs/adapter-static": "3.0.10",
-		"@sveltejs/kit": "2.70.3",
+		"@biomejs/biome": "2.5.15",
+		"@sveltejs/adapter-static": "4.0.0",
+		"@sveltejs/kit": "3.0.1",
 		"@sveltejs/vite-plugin-svelte": "7.3.1",
-		"quicklook-kit": "^0.3.0",
-		"svelte": "5.57.1",
+		"quicklook-kit": "^0.5.0",
+		"svelte": "5.57.2",
 		"svelte-check": "4.7.6",
 		"typescript": "6.0.3",
-		"vite": "8.3.0"
+		"vite": "8.3.4"
 	}
 }

package/templates/sveltekit/quicklook.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'quicklook-kit';
 
 export default defineConfig({
-	name: 'QuickLook Example',
+	name: 'Quick Look Example',
 	bundleId: 'com.example.QuickLookExample',
 	types: [
 		{

package/templates/sveltekit/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
-	import FileViewer from '$lib/FileViewer.svelte';
+	import FileViewer from '../lib/FileViewer.svelte';
 
 	let file = $state<QuickLookFile | undefined>(nativeFile());
 
@@ -12,7 +12,7 @@
 	}
 </script>
 
-<!-- Only reachable in the browser: QuickLook always injects a file. -->
+<!-- Only reachable in the browser: Quick Look always injects a file. -->
 <svelte:window
 	ondragover={(e) => e.preventDefault()}
 	ondrop={(e) => {

package/templates/sveltekit/tsconfig.json

@@ -1,5 +1,6 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
+	"extends": "$app/tsconfig",
+	"include": ["src", "*"],
 	"compilerOptions": {
 		"strict": true,
 		"allowImportingTsExtensions": true,

package/templates/sveltekit/vite.config.ts

@@ -1,7 +1,17 @@
+import adapter from '@sveltejs/adapter-static';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { quicklook } from 'quicklook-kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), quicklook()],
+	plugins: [
+		sveltekit({
+			// A static build; the extension serves it and sets the CSP from quicklook.config.ts.
+			adapter: adapter(),
+
+			// Builds a client-only app shell, which is all the preview needs.
+			router: { type: 'hash' },
+		}),
+		quicklook(),
+	],
 });

package/templates/sveltekit/svelte.config.js

@@ -1,11 +0,0 @@
-import adapter from '@sveltejs/adapter-static';
-
-/** @type {import('@sveltejs/kit').Config} */
-export default {
-	kit: {
-		// A static build; the extension serves it and sets the CSP from quicklook.config.ts.
-		adapter: adapter(),
-		// Builds a client-only app shell, which is all the preview needs.
-		router: { type: 'hash' },
-	},
-};