feat: add qr code to startup urls if --host option when

Author: jacob-8

packages/kitbook/package.json

@@ -61,7 +61,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --host",
     "build": "vite build",
     "build:ci": "cd ../.. && pnpm build:deps && cd packages/kitbook && pnpm build",
     "preview": "vite preview",
@@ -97,6 +97,7 @@
     "birpc": "^0.2.17",
     "codemirror": "^6.0.1",
     "fast-glob": "^3.3.2",
+    "qrcode-terminal": "^0.12.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-format": "^4.0.1",
     "rehype-slug": "^5.1.0",
@@ -122,6 +123,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@types/mdast": "^4.0.2",
     "@types/node": "^20.11.30",
+    "@types/qrcode-terminal": "^0.12.2",
     "@unocss/svelte-scoped": "^0.59.4",
     "prettier": "^2.8.8",
     "publint": "^0.2.7",

packages/kitbook/src/lib/as-snippet.ts

@@ -0,0 +1,17 @@
+import { createRawSnippet, hydrate } from 'svelte'
+import { render } from 'svelte/server'
+import { browser } from '$app/environment'
+
+export function as_snippet(component: Component) {
+ 	return createRawSnippet((props_function) => {
+    const props = props_function ? props_function() : {}
+    return {
+      render: () => ` 
+        <div>${browser ? '' : render(component, { props }).body}</div> 
+      `,
+      setup(target) {
+        hydrate(component, { target, props })
+      },
+    }
+  })
+}

packages/kitbook/src/lib/lz/lz-string.ts

@@ -8,12 +8,11 @@
 //
 // LZ-based compression algorithm, version 1.4.4
 
-// If other compressions are needed, uncomment and add tests from https://github.com/pieroxy/lz-string/blob/master/tests/lz-string-spec.js
+// If other compressions are needed pull from https://github.com/pieroxy/lz-string (bring tests across also)
 
 // Note also the esm port of lz-string for utf-8 only by @immutabl3/lz-string
 
 const f = String.fromCharCode
-// const keyStrBase64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
 const keyStrUriSafe = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$'
 const baseReverseDic = {}
 
@@ -45,70 +44,6 @@ function getBaseValue(alphabet: string, character: string) {
   return baseReverseDic[alphabet][character]
 }
 
-// export function compressToBase64(input) {
-//   if (input == null) return "";
-//   var res = _compress(input, 6, function (a) { return keyStrBase64.charAt(a); });
-//   switch (res.length % 4) { // To produce valid Base64
-//     default: // When could this happen ?
-//     case 0: return res;
-//     case 1: return res + "===";
-//     case 2: return res + "==";
-//     case 3: return res + "=";
-//   }
-// }
-
-// export function decompressFromBase64(input) {
-//   if (input == null) return "";
-//   if (input == "") return null;
-//   return _decompress(input.length, 32, function (index) { return getBaseValue(keyStrBase64, input.charAt(index)); });
-// }
-
-// export function compressToUTF16(input) {
-//   if (input == null) return "";
-//   return _compress(input, 15, function (a) { return f(a + 32); }) + " ";
-// }
-
-// export function decompressFromUTF16(compressed) {
-//   if (compressed == null) return "";
-//   if (compressed == "") return null;
-//   return _decompress(compressed.length, 16384, function (index) { return compressed.charCodeAt(index) - 32; });
-// }
-
-// compress into uint8array (UCS-2 big endian format)
-// export function compressToUint8Array(uncompressed) {
-//   var compressed = compress(uncompressed);
-//   var buf = new Uint8Array(compressed.length * 2); // 2 bytes per character
-
-//   for (var i = 0, TotalLen = compressed.length; i < TotalLen; i++) {
-//     var current_value = compressed.charCodeAt(i);
-//     buf[i * 2] = current_value >>> 8;
-//     buf[i * 2 + 1] = current_value % 256;
-//   }
-//   return buf;
-// }
-
-// decompress from uint8array (UCS-2 big endian format)
-// export function decompressFromUint8Array(compressed) {
-//   if (compressed === null || compressed === undefined) {
-//     return decompress(compressed);
-//   } else {
-//     var buf = new Array(compressed.length / 2); // 2 bytes per character
-//     for (var i = 0, TotalLen = buf.length; i < TotalLen; i++) {
-//       buf[i] = compressed[i * 2] * 256 + compressed[i * 2 + 1];
-//     }
-
-//     var result = [];
-//     buf.forEach(function (c) {
-//       result.push(f(c));
-//     });
-//     return decompress(result.join(''));
-//   }
-// }
-
-// function compress(uncompressed) {
-//   return _compress(uncompressed, 16, function (a) { return f(a); });
-// }
-
 function _compress(uncompressed: string, bitsPerChar: number, getCharFromInt: (index: number) => any) {
   if (uncompressed == null)
     return ''
@@ -341,12 +276,6 @@ function _compress(uncompressed: string, bitsPerChar: number, getCharFromInt: (i
   return context_data.join('')
 }
 
-// function decompress(compressed) {
-//   if (compressed == null) return "";
-//   if (compressed == "") return null;
-//   return _decompress(compressed.length, 32768, function (index) { return compressed.charCodeAt(index); });
-// }
-
 function _decompress(length: number, resetValue: number, getNextValue: (index: number) => any) {
   const dictionary = []
   const result = []

packages/kitbook/src/lib/open/openFiles.ts

@@ -3,7 +3,7 @@ import { getFilenameAndExtension } from './get-filename-and-extension'
 import { serializeIntersection } from './serialize'
 
 export function openComponent(filepath: string) {
-  ensureFileExists(filepath)
+  rpc_client.functions.open_or_create_file({ filepath, template: '' })
 }
 
 export function openVariants(filepath: string, componentDetail?: SvelteComponentDetail) {
@@ -22,7 +22,7 @@ export function sendOpenVariantsRequest(filepath: string, serializedState: Recor
 
 export function openMarkdown(filepath: string) {
   const markdownTemplate = 'You can write some documentation for your component here using markdown.'
-  ensureFileExists(filepath, markdownTemplate)
+  ensure_non_svelte_file_exists(filepath, markdownTemplate)
 }
 
 export function openComposition({ filepath, compositionName }: { filepath: string, compositionName?: string }) {
@@ -63,10 +63,10 @@ Place your Svelte composition here.
 
   const compositionExtension = (compositionName && compositionName !== 'default') ? `${compositionName}.composition` : 'composition'
   const template = extension === 'md' ? markdownCompositionTemplate : svelteCompositionTemplate
-  ensureFileExists(`${filepathWithoutExtension}.${compositionExtension}`, template)
+  ensure_non_svelte_file_exists(`${filepathWithoutExtension}.${compositionExtension}`, template)
 }
 
-function ensureFileExists(filepath: string, template = '') {
+function ensure_non_svelte_file_exists(filepath: string, template: string) {
   const pageProofPath = filepath
     .replace('+page', '_page')
     .replace('+layout', '_layout')

packages/kitbook/src/lib/plugins/main/plugin.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite'
+import qr from 'qrcode-terminal'
 import type { KitbookSettings } from '../../kitbook-types'
 import { serializeSettings } from '../../open/serialize.js'
 import { bold, green, reset } from '../utils/colors.js'
@@ -41,13 +42,28 @@ export function MainPlugin(settings: KitbookSettings): Plugin {
 
     configureServer(server) {
       const { kitbookRoute, addLanguageToUrl, languages } = settings
-      if (kitbookRoute) {
-        const languageAwareRoute = addLanguageToUrl ? addLanguageToUrl({ code: languages[0].code, url: kitbookRoute }) : kitbookRoute
-        const originalPrint = server.printUrls
-        server.printUrls = () => {
-          originalPrint()
-          console.info(`  ${green}➜${reset}  ${bold}Kitbook${reset}: ${green}${server.config.server.https ? 'https' : 'http'}://localhost:${bold}${server.config.server.port}${reset}${green}${languageAwareRoute}${reset}`)
+
+      const originalPrint = server.printUrls
+      server.printUrls = () => {
+        originalPrint()
+
+        const additional_logs: string [] = []
+
+        if (kitbookRoute) {
+          const languageAwareRoute = addLanguageToUrl ? addLanguageToUrl({ code: languages[0].code, url: kitbookRoute }) : kitbookRoute
+          additional_logs.push(`  ${green}➜${reset}  ${bold}Kitbook${reset}: ${green}${server.config.server.https ? 'https' : 'http'}://localhost:${bold}${server.config.server.port}${reset}${green}${languageAwareRoute}${reset}`)
         }
+
+        const network_urls = server.resolvedUrls?.network || []
+        if (network_urls.length) {
+          const last_url = network_urls[network_urls.length - 1]
+          qr.generate(last_url, { small: true }, (result) => {
+            additional_logs.push(`\n    ${green}${last_url}${reset}\n    ${result.replace(/\n/g, '\n    ')}`)
+          })
+        }
+
+        for (const message of additional_logs)
+          console.info(message)
       }
     },
   }

packages/kitbook/src/lib/routes/[...file]/MainPage.svelte

@@ -134,6 +134,8 @@
               {#if !variantsModule}
                 <Button onclick={() => openVariants(`${pathWithoutExtension}.svelte`)} size="sm" form="menu"><span class="i-system-uicons-versions align--4px text-xl" /> Add Variant</Button>
               {/if}
+
+              <Button size="sm" form="menu" href="/en/zh-TW/bible">Go to sample page</Button>
             {/if}
           </div>