Plugins support with builtin google-fonts & text fit plugin

api/types.ts

@@ -3,16 +3,26 @@ import type {
   VanillaFrameworkConfig,
 } from "@grida/builder-config";
 import { LICENSE_CE } from "./license";
+import type { TPlugin } from "@code-plugin/core";
 
 export type FigmaNodeInput =
   | string
   | { url: string; version: string }
   | { filekey: string; node: string; version: string };
 
-export interface CodeRequest {
+type DebugOptions = {
+  /**
+   * if true, the response will be a vanilla html without other data.
+   * @default false
+   */
+  raw?: boolean;
+};
+
+export type CodeRequest = DebugOptions & {
   figma: FigmaNodeInput;
   framework: Partial<FrameworkConfig>;
-}
+  plugins?: TPlugin[];
+};
 
 export type CodeResponse = FigmaToVanillaResponse;
 

code/index.ts

@@ -11,11 +11,13 @@ import type { FrameworkConfig } from "@grida/builder-config";
 import { defaultConfigByFramework } from "@grida/builder-config-preset";
 import { Language } from "@grida/builder-platform-types";
 import { formatCode } from "dart-style";
+import type { TPlugin } from "@code-plugin/core";
 
 export async function code({
   auth,
   uri,
   framework,
+  plugins,
 }: {
   auth:
     | {
@@ -24,6 +26,7 @@ export async function code({
     | { accessToken: string };
   uri: string;
   framework: FrameworkConfig;
+  plugins?: TPlugin[];
 }) {
   //
 
@@ -59,6 +62,7 @@ export async function code({
         ...framework,
       },
       asset_config: { asset_repository: MainImageRepository.instance },
+      plugins,
     });
 
     const src = postproc_src(

editor/next.config.js

@@ -41,6 +41,11 @@ const packages = [
   "@code-features/documentation",
   "@code-features/component",
   "@code-features/flags",
+  "@code-features/fonts",
+  // -----------------------------
+  // plugins
+  "@code-plugin/core",
+  "@code-plugin/text-fit",
   // -----------------------------
 
   // reflect-ui ui framework

editor/pages/api/v1/code/index.ts

@@ -26,14 +26,20 @@ export default async function handler(req, res) {
     const figma_access_token_type: FigmaAccessTokenType =
       figma_access_token.startsWith("figd") ? "fpat" : "fat";
 
-    const { figma: figmaInput, framework } = req.body as CodeRequest;
+    const {
+      figma: figmaInput,
+      framework,
+      plugins,
+      raw,
+    } = req.body as CodeRequest;
 
     assert(typeof figmaInput === "string", "`body.figma` must be a string");
 
     try {
       const coderes = await code({
         uri: figmaInput,
         framework: framework as FrameworkConfig,
+        plugins,
         auth:
           figma_access_token_type === "fat"
             ? {
@@ -44,9 +50,7 @@ export default async function handler(req, res) {
               },
       });
 
-      const { src: spchar_src, figma, target } = coderes;
-
-      const src = replaceSpecialChars(spchar_src);
+      const { src, figma, target } = coderes;
 
       const response: FigmaToVanillaResponse = {
         figma: {
@@ -82,7 +86,12 @@ export default async function handler(req, res) {
         warnings: [],
       };
 
-      res.status(200).json(response);
+      if (raw) {
+        // if debug option raw is set, return raw html
+        res.status(200).send(src);
+      } else {
+        res.status(200).json(response);
+      }
     } catch (e) {
       res.status(500).json({
         message: e.message,
@@ -98,7 +107,3 @@ export default async function handler(req, res) {
     });
   }
 }
-
-function replaceSpecialChars(input: string): string {
-  return input.replace(/\\t/g, "\t").replace(/\\n/g, "\n");
-}

packages/builder-config/configure/index.ts

@@ -1,3 +1,4 @@
 export * from "./framework-config";
 export * from "./target-build-platform";
 export * from "./build-config";
+export * from "./plugin-config";

packages/builder-config/configure/plugin-config.ts

@@ -0,0 +1,2 @@
+import type { TPlugin } from "@code-plugin/core";
+export type Plugins = ReadonlyArray<TPlugin>;

packages/builder-web-core/k/index.ts

@@ -8,7 +8,7 @@ export const image_smallest_fallback_source_base_64 =
 
 export const user_agent_stylesheet_override_default = <CSSProperties>{
   margin: "0px",
-  "font-family": `Helvetica, "Helvetica Neue", Roboto, Noto, Arial, sans-serif`,
+  // we don't set default font-family here, because we don't want to add !important to every other font-family.
 };
 
 export const default_generic_fallback_font_family = "sans-serif";

packages/builder-web-vanilla/export-inline-css-html-file/index.ts

@@ -19,6 +19,9 @@ export function export_vanilla_preview_source(
   const builder = new HtmlIdCssModuleBuilder({
     entry: widget,
     config: {
+      fonts: {
+        services: ["system", "fonts.google.com"],
+      },
       ...config,
       // required (for safety, for consistant preview)
       disable_all_optimizations: true,

packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts

@@ -24,6 +24,9 @@ import {
 } from "coli";
 import { Framework } from "@grida/builder-platform-types";
 import { stringfy as stringfyHtmlMeta, HtmlMeta } from "../html-meta";
+import { TFontService } from "@code-features/fonts";
+import { htmlFontsMiddleware } from "./html-fonts-middleware";
+import type { Plugin } from "@code-plugin/core";
 
 interface CssDeclaration {
   key: {
@@ -36,6 +39,10 @@ interface CssDeclaration {
 export type HtmlModuleBuilderConfig = {
   disable_all_optimizations?: boolean;
   additional_css_declarations?: CssDeclaration[];
+  fonts?: {
+    services: ReadonlyArray<TFontService>;
+  };
+  plugins?: ReadonlyArray<Plugin>;
 };
 
 export class HtmlIdCssModuleBuilder {
@@ -44,6 +51,7 @@ export class HtmlIdCssModuleBuilder {
   private readonly stylesMapper: StylesConfigMapBuilder;
   private readonly stylesRepository: StylesRepository;
   private readonly namer: ScopedVariableNamer;
+  private readonly _head: string[] = [];
   readonly config: HtmlModuleBuilderConfig;
 
   constructor({
@@ -77,6 +85,24 @@ export class HtmlIdCssModuleBuilder {
         : // ALWAYS USE EXACT OVERLAPPING STYLE REDUCTION STRATEGY FOR PREVIEW VANILLA
           create_duplication_reduction_map
     );
+
+    if (config.fonts) {
+      htmlFontsMiddleware(this, config.fonts.services);
+    }
+  }
+
+  private afterVanillaCSSBundle() {
+    this.config.plugins?.forEach((p) => {
+      p.apply({
+        hooks: {
+          afterVanillaCSSBundle: {
+            tap: (name, fn) => {
+              fn({ builder: this });
+            },
+          },
+        },
+      });
+    });
   }
 
   private styledConfig(
@@ -98,6 +124,21 @@ export class HtmlIdCssModuleBuilder {
     );
   }
 
+  /**
+   * adds literal string to <head> tag
+   */
+  head(...items: string[]) {
+    this._head.push(...items);
+    return this;
+  }
+
+  /**
+   * build the part head, excluding styles
+   */
+  partHead(): string {
+    return this._head.join("\n");
+  }
+
   partStyles(): string {
     const css_declarations: CssDeclaration[] = [];
 
@@ -180,8 +221,14 @@ export class HtmlIdCssModuleBuilder {
       indentation: "\t",
     });
 
+    const strfied_css = this.partStyles();
+
+    // hook TODO: (execution matters due to textfit plugin contributes to head. this is a design flaw. needs to be fixed.)
+    this.afterVanillaCSSBundle();
+
     const final = html_render({
-      css: this.partStyles(),
+      head: this.partHead(),
+      css: strfied_css,
       body: strfied_body,
     });
 
@@ -224,7 +271,15 @@ function injectIdToJsx(jsx: JSXElementLike, id: string) {
   }
 }
 
-const html_render = ({ css, body }: { css: string; body: string }) => {
+const html_render = ({
+  head,
+  css,
+  body,
+}: {
+  head: string;
+  css: string;
+  body: string;
+}) => {
   // TODO: fixme - this is inacurate (the first line won't be indented)
   const indenter = (s: string, tabs: number = 0) =>
     s.replace(/\n/g, "\n" + "\t".repeat(tabs));
@@ -238,6 +293,7 @@ ${indenter(
   }),
   2
 )}
+${indenter(head, 2)}
     <style>
 ${indenter(css, 3)}
     </style>

packages/builder-web-vanilla/html-css-id-widget/html-fonts-middleware.ts

@@ -0,0 +1,62 @@
+import { TFontService, fonts } from "@code-features/fonts";
+import type { HtmlIdCssModuleBuilder } from "./html-css-id-module-builder";
+
+export function htmlFontsMiddleware(
+  builder: HtmlIdCssModuleBuilder,
+  services: ReadonlyArray<TFontService>
+) {
+  try {
+    // TODO: we need better way to get used fonts.
+    const styles = builder.partStyles();
+
+    // parse lines with "font-family: ..."
+    const matches = styles.match(/font-family:.*?;/g);
+    if (!matches) {
+      return;
+    } else {
+      const font_families = matches
+        .map((m) => {
+          return m
+            .replace(/font-family:/, "")
+            .replace(/;/, "")
+            .trim()
+            .split(",")
+            .map((f) => f.trim().replace(/"/g, "").replace(/'/g, "").trim());
+        })
+        .flat()
+        .filter((f) => f.length > 0)
+        .filter(
+          (f) =>
+            f !== "inherit" &&
+            f !== "initial" &&
+            f !== "unset" &&
+            f !== "serif" &&
+            f !== "sans-serif" &&
+            f !== "monospace" &&
+            f !== "cursive" &&
+            f !== "fantasy" &&
+            f !== "system-ui"
+        );
+
+      const resolved = fonts({
+        fonts: font_families,
+        resolution: "fonts.googleapis.com/css2",
+        services,
+      });
+
+      // create <link> tag for each font, which is going to be added to <head> tag.
+      const links = [
+        `<link rel="preconnect" href="https://fonts.googleapis.com">`,
+        `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`,
+        ...Object.keys(resolved).map((f) => {
+          const { urls } = resolved[f];
+          return `<link rel="stylesheet" href="${urls["*"]}">`;
+        }),
+      ];
+
+      builder.head(...links);
+    }
+  } catch (e) {
+    console.error(`error while resolving fonts from [${services.join(",")}]`);
+  }
+}

packages/designto-code/plugin/index.ts

@@ -0,0 +1,16 @@
+import VanillaTextFitPlugin from "@code-plugin/text-fit";
+import { TPlugin, composePlugin as composeAnyPlugin } from "@code-plugin/core";
+
+const BUILTIN_PLUGINS = {
+  "@code-plugin/text-fit": VanillaTextFitPlugin,
+};
+
+function resolver(name, params) {
+  if (name in BUILTIN_PLUGINS) {
+    return new BUILTIN_PLUGINS[name](params);
+  }
+}
+
+export function composePlugin(input: TPlugin) {
+  return composeAnyPlugin(input, resolver);
+}

packages/designto-code/plugin/readme.md

@@ -0,0 +1,3 @@
+# Builtin plugins composition
+
+- `@code-plugin/text-fit`