update result signature & prevent editor flickering by state

Author: softmarshmallow

editor/scaffolds/code/index.tsx

@@ -56,24 +56,35 @@ export function CodeSegment() {
   const targetted =
     designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
 
-  const targetStateRef = useRef<ReflectSceneNode>();
-  targetStateRef.current = targetted;
+  const targetStateRef =
+    useRef<{
+      node: ReflectSceneNode;
+      config: config.FrameworkConfig;
+    }>();
+  targetStateRef.current = { node: targetted, config: framework_config };
 
   const on_result = (result: Result) => {
+    if (
+      result.framework.framework !==
+        targetStateRef?.current?.config.framework ||
+      result.id !== targetStateRef?.current?.node.id
+    ) {
+      return;
+    }
+
     if (framework_config.language == "dart") {
       // special formatter support for dartlang
       result.code.raw = utils_dart.format(result.code.raw);
       result.scaffold.raw = utils_dart.format(result.scaffold.raw);
     }
 
-    if (result.id == targetStateRef?.current?.id) {
-      setResult(result);
-    }
+    setResult(result);
   };
 
   useEffect(() => {
     const __target = targetted;
-    if (__target && framework_config) {
+    const __framework_config = framework_config;
+    if (__target && __framework_config) {
       const _input = {
         id: __target.id,
         name: __target.name,
@@ -88,7 +99,7 @@ export function CodeSegment() {
       // build code without assets fetch
       designToCode({
         input: _input,
-        framework: framework_config,
+        framework: __framework_config,
         asset_config: { skip_asset_replacement: true },
         build_config: build_config,
       })
@@ -99,7 +110,7 @@ export function CodeSegment() {
       if (!MainImageRepository.instance.empty) {
         designToCode({
           input: root,
-          framework: framework_config,
+          framework: __framework_config,
           asset_config: { asset_repository: MainImageRepository.instance },
           build_config: build_config,
         })

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

@@ -15,7 +15,7 @@ import {
   default_tokenizer_config,
   TokenizerConfig,
 } from "@designto/token/config";
-import { default_build_configuration } from "@designto/config";
+import { default_build_configuration, FrameworkConfig } from "@designto/config";
 import { reusable } from "@code-features/component";
 import assert from "assert";
 
@@ -28,7 +28,9 @@ interface AssetsConfig {
   custom_asset_replacement?: { type: "static"; resource: string };
 }
 
-export type Result = output.ICodeOutput & { widget: Widget };
+export type Result = output.ICodeOutput & { widget: Widget } & {
+  framework: FrameworkConfig;
+};
 
 export async function designToCode({
   input,
@@ -101,6 +103,11 @@ export async function designToCode({
     reusable_widget_tree: reusable_widget_tree,
   };
 
+  const _extend_result = {
+    ..._tokenized_widget_input,
+    framework: framework_config,
+  };
+
   switch (framework_config.framework) {
     case "vanilla":
       return {
@@ -110,7 +117,7 @@ export async function designToCode({
           vanilla_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "react":
       return {
@@ -120,7 +127,7 @@ export async function designToCode({
           react_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "react-native":
       return {
@@ -130,7 +137,7 @@ export async function designToCode({
           reactnative_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "flutter":
       return {
@@ -140,7 +147,7 @@ export async function designToCode({
           flutter_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
   }