Merge pull request #4 from Bernankez/live-preview

feat: live preview in dev mode

package.json

@@ -73,10 +73,13 @@
   "dependencies": {
     "@types/font-carrier": "^0.3.3",
     "font-carrier": "^0.3.1",
-    "kolorist": "^1.8.0"
+    "fs-extra": "^11.2.0",
+    "kolorist": "^1.8.0",
+    "magic-string": "^0.30.8"
   },
   "devDependencies": {
     "@bernankez/eslint-config": "^0.7.4",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.25",
     "bumpp": "^9.4.0",
     "eslint": "^8.57.0",

playground/src/main.ts

@@ -1,19 +1,27 @@
 import "./style.css";
 import Caveat from "/Caveat[wght].ttf";
+import BianTaoti from "./assets/biantaoti.woff";
 
-async function loadFont() {
+async function loadCaveat() {
   const font = new FontFace("custom-font", `url("${Caveat}")`);
   await font.load();
   document.fonts.add(font);
 }
 
-loadFont();
+async function loadBiantaoti() {
+  const font = new FontFace("biantaoti-inline", `url("${BianTaoti}")`);
+  await font.load();
+  document.fonts.add(font);
+}
+
+loadCaveat();
+loadBiantaoti();
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
     <h1>vite-plugin-font-carrier</h1>
     <p style="font-family: Biantaoti;">Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。</p>
     <p style="font-family: custom-font;">0123456789</p>
-    <p style="font-family: custom-font;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt vulputate massa, id feugiat turpis sagittis eu. Curabitur convallis lectus quis metus tempus, at pharetra nibh maximus. Aliquam eget leo efficitur purus rutrum sollicitudin non vitae velit. Duis dui nisl, gravida ut volutpat id, auctor feugiat urna. Mauris vulputate consectetur nulla ac pretium.</p>
+    <p style="font-family: biantaoti-inline;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt vulputate massa, id feugiat turpis sagittis eu. Curabitur convallis lectus quis metus tempus, at pharetra nibh maximus. Aliquam eget leo efficitur purus rutrum sollicitudin non vitae velit. Duis dui nisl, gravida ut volutpat id, auctor feugiat urna. Mauris vulputate consectetur nulla ac pretium.</p>
   </div>
 `;

src/compress.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import type { Font as FC } from "font-carrier";
+import fontCarrier from "font-carrier";
+import { assert } from "./utils";
+
+export interface CompressOptions {
+  type: FC.FontType;
+  input: string;
+}
+
+export function compress(buffer: Buffer | string, options: CompressOptions) {
+  const { type, input } = options;
+
+  try {
+    const _buffer = typeof buffer === "string" ? readFileSync(buffer) : buffer;
+    const fc = fontCarrier.transfer(_buffer);
+    fc.min(input);
+    const outputs = fc.output({
+      types: [type],
+    }) as unknown as { [K in FC.FontType]: Buffer };
+    return outputs[type];
+  } catch (e) {
+    assert(false, "Font file not found");
+  }
+}

src/const.ts

@@ -1,8 +1,8 @@
-import type { Font as FCFont } from "font-carrier";
+import type { Font as FC } from "font-carrier";
 import { bold } from "kolorist";
 
-// export const JS_EXT = [".js", ".ts", ".jsx", ".tsx", ".mjs", ".mts", ".cjs", ".cts"];
-export const DEFAULT_FONT_TYPE: FCFont.FontType = "woff2";
+export const JS_EXT = [".js", ".ts", ".jsx", ".tsx", ".mjs", ".mts", ".cjs", ".cts"];
+export const DEFAULT_FONT_TYPE: FC.FontType = "woff2";
 export const LOG_PREFIX = bold("[vite-plugin-font-carrier]");
 
 export const FONT_FACE_REG = /@font-face\s*{[^}]*}/g;