Component manager (2/3)

app/__plugin__init__/index.ts

@@ -1,5 +1,5 @@
 // DO NOT REMOVE THIS LINE
-import "../lib/pages/code/__plugin";
+import "@app/design-to-code/__plugin";
 import "@app/data-mapper/__plugin";
 import "@app/design-lint/__plugin";
 import "@app/design-text-code-syntax-highlight/__plugin";

app/lib/components/storybook-screen.tsx

@@ -22,11 +22,7 @@ export class BoxTab extends React.Component {
   componentDidMount() {
     window.addEventListener("message", function (ev: MessageEvent) {
       const msg = ev.data.pluginMessage;
-      switch (
-        msg.type
-        // case EK_GENERATED_CODE_PLAIN:
-        // case EK_PREVIEW_SOURCE:
-      ) {
+      switch (msg.type) {
       }
     });
   }

app/lib/main/index.tsx

@@ -21,7 +21,7 @@ import { DataMapperScreen } from "@app/data-mapper";
 import { GlobalizationScreen } from "@app/i18n";
 import { ToolboxScreen } from "../pages/tool-box";
 import { FontReplacerScreen } from "@toolbox/font-replacer";
-import { CodeScreen } from "../pages/code/code-screen";
+import { CodeScreen } from "@app/design-to-code";
 import { AboutScreen } from "../pages/about";
 import { SigninScreen } from "@app/auth";
 import { DesignTextCdoeSyntaxHighligherScreen } from "@app/design-text-code-syntax-highlight";

figma-core/code-thread/broadcast-selection-preview.ts

@@ -1,27 +1,29 @@
-import { EK_PREVIEW_SOURCE } from "@core/constant/ek.constant";
+import { EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED } from "@core/constant/ek.constant";
+import { preset, QuickImageExportPreset } from "@plugin-sdk/core";
 
 /**
  * extracts the png image of selection, broadcasts to listeners.
  * @todo - only broadcast when required.
  * @param selection
  */
 export function broadcastSelectionPreview(selection: SceneNode) {
-  selection
-    .exportAsync({
-      format: "PNG",
-      contentsOnly: true,
-      constraint: {
-        type: "HEIGHT",
-        value: 250,
+  exportImage(selection).then((d) => {
+    figma.ui.postMessage({
+      type: EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED,
+      data: {
+        source: d,
+        name: selection.name,
       },
-    })
-    .then((d) => {
-      figma.ui.postMessage({
-        type: EK_PREVIEW_SOURCE,
-        data: {
-          source: d,
-          name: selection.name,
-        },
-      });
     });
+  });
+}
+
+export async function exportImage(
+  target: SceneNode,
+  options?: {
+    preset?: QuickImageExportPreset;
+  }
+): Promise<Uint8Array> {
+  const config = preset(options?.preset ?? "small");
+  return await target.exportAsync(config);
 }

figma-core/code-thread/selection.ts

@@ -57,8 +57,9 @@ export function onfigmaselectionchange() {
 
       // TODO: this will not trigger unless user deselects and re select the same node. currently node cache does not have expiry control.
       let rnode;
-      const _cached = FigmaNodeCache.getLastConverted();
+      const _cached = FigmaNodeCache.getConverted(singleFigmaNodeSelection.id);
       if (_cached) {
+        console.info("using cached", _cached.name);
         rnode = _cached;
       } else {
         rnode = convert.intoReflectNode(
@@ -70,10 +71,16 @@ export function onfigmaselectionchange() {
       // Logger.debug("reflect-converted-selection", rnode);
 
       // region sync selection event (search "selectionchange" for references)
-      figma.ui.postMessage({
-        type: "selectionchange",
-        data: light.makeReference(rnode),
-      });
+      try {
+        const data = light.makeReference(rnode);
+        figma.ui.postMessage({
+          type: "selectionchange",
+          data: data,
+        });
+      } catch (_) {
+        figma.notify(`Oops. we don't support "${target.type}" yet.`);
+        console.error(_);
+      }
       // endregion
       FigmaNodeCache.setConverted(rnode);
       runon(rnode);

figma-core/index.ts

@@ -41,10 +41,14 @@ figma.on("currentpagechange", () => {
 // MAIN INITIALIZATION
 import { showUI } from "./code-thread/show-ui";
 import { provideFigma } from "@design-sdk/figma";
+import { createPrimaryVisualStorePageIfNonExists } from "./physical-visual-store/page-manager/craete-page-if-non-exist";
 function main() {
   MainImageRepository.instance = new ImageRepositories();
   provideFigma(figma);
   showUI();
+
+  // create primary visual store
+  createPrimaryVisualStorePageIfNonExists();
 }
 
 main();