add custom static asset replacement support for vanilla fast preview before asset fetch

Author: softmarshmallow

editor/scaffolds/editor/editor.tsx

@@ -150,7 +150,15 @@ export function Editor() {
           input: _input,
           build_config: build_config,
           framework: vanilla_presets.vanilla_default,
-          asset_config: { skip_asset_replacement: true },
+          asset_config: {
+            skip_asset_replacement: false,
+            asset_repository: MainImageRepository.instance,
+            custom_asset_replacement: {
+              type: "static",
+              resource:
+                "https://bridged-service-static.s3.us-west-1.amazonaws.com/placeholder-images/image-placeholder-bw-tile-100.png",
+            },
+          },
         }).then(on_preview_result);
 
         designToCode({

externals/design-sdk

@@ -17,6 +17,10 @@ import { reusable } from "@code-features/component";
 interface AssetsConfig {
   asset_repository?: BaseImageRepositories<string>;
   skip_asset_replacement?: boolean;
+  /**
+   * this is currently only supported on vanilla framework - for preview.
+   */
+  custom_asset_replacement?: { type: "static"; resource: string };
 }
 
 export type Result = output.ICodeOutput & { widget: Widget };
@@ -227,13 +231,30 @@ export async function designToVanilla({
   // ------------------------------------------------------------------------
   // finilize temporary assets
   // this should be placed somewhere else
-  if (asset_config?.asset_repository && !asset_config.skip_asset_replacement) {
-    const assets = await fetch_all_assets(asset_config.asset_repository);
-    res.code.raw = dangerous_temporary_asset_replacer(res.code.raw, assets);
-    res.scaffold.raw = dangerous_temporary_asset_replacer(
+  if (asset_config.custom_asset_replacement) {
+    const keys = Object.keys(asset_config.asset_repository.mergeAll());
+    res.code.raw = dangerous_custom_static_resource_replacer(
+      res.code.raw,
+      keys,
+      asset_config.custom_asset_replacement.resource
+    );
+    res.scaffold.raw = dangerous_custom_static_resource_replacer(
       res.scaffold.raw,
-      assets
+      keys,
+      asset_config.custom_asset_replacement.resource
     );
+  } else {
+    if (
+      asset_config?.asset_repository &&
+      !asset_config.skip_asset_replacement
+    ) {
+      const assets = await fetch_all_assets(asset_config.asset_repository);
+      res.code.raw = dangerous_temporary_asset_replacer(res.code.raw, assets);
+      res.scaffold.raw = dangerous_temporary_asset_replacer(
+        res.scaffold.raw,
+        assets
+      );
+    }
   }
   // ------------------------------------------------------------------------
 
@@ -249,3 +270,19 @@ const dangerous_temporary_asset_replacer = (r, a) => {
     { fallback: k.image_smallest_fallback_source_base_64 }
   );
 };
+
+const dangerous_custom_static_resource_replacer = (
+  code: string,
+  keys: string[],
+  staticres: string
+) => {
+  return finalize_temporary_assets_with_prefixed_static_string_keys__dangerously(
+    code,
+    default_asset_replacement_prefix,
+    {
+      replacer: (k) => staticres,
+      keys,
+    },
+    { fallback: k.image_smallest_fallback_source_base_64 }
+  );
+};

packages/designto-code/universal/design-to-code.ts

@@ -1,6 +1,12 @@
 type AssetStringReplacementMap =
   | { [key: string]: string }
-  | Map<string, string>;
+  | Map<string, string>
+  | CustomReplacement;
+
+type CustomReplacement = {
+  keys: string[];
+  replacer: (key) => string;
+};
 
 /**
  * this replaces the asset strings in the given string with the given map
@@ -48,10 +54,33 @@ export function finalize_temporary_assets_with_prefixed_static_string_keys__dang
     fallback: string;
   }
 ) {
-  Object.keys(assets).forEach((key) => {
-    const _replacement_key = `${prefix || ""}${key}`;
-    const _replacement_target = assets[key] || safety.fallback;
-    code = code.replace(new RegExp(_replacement_key, "g"), _replacement_target);
-  });
+  const _is_custom_replacement = "keys" in assets; // CustomReplacement;
+  const get = _is_custom_replacement
+    ? (key: string) => (assets as CustomReplacement).replacer(key)
+    : (key: string) => assets[key];
+
+  const _replacementkey = (key) => `${prefix || ""}${key}`;
+
+  if (_is_custom_replacement) {
+    // we need to replace all keys
+    const keys = (assets as CustomReplacement).keys;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const _replacement_key = _replacementkey(key);
+      code = code.replace(
+        new RegExp(_replacement_key, "g"),
+        get(key) || safety.fallback
+      );
+    }
+  } else {
+    Object.keys(assets).forEach((key) => {
+      const _replacement_key = _replacementkey(key);
+      const _replacement_target = get(key) || safety.fallback;
+      code = code.replace(
+        new RegExp(_replacement_key, "g"),
+        _replacement_target
+      );
+    });
+  }
   return code;
 }