Figma DevMode Support

.gitmodules

@@ -7,6 +7,6 @@
 [submodule "packages/reflect-ui-generator"]
 	path = packages/reflect-ui-generator
 	url = https://github.com/reflect-ui/reflect-ui-generator
-[submodule "packages/design-to-code"]
-	path = packages/design-to-code
-	url = https://github.com/gridaco/designto-code
+[submodule "lib/code"]
+	path = lib/code
+	url = https://github.com/gridaco/code

README.md

@@ -9,7 +9,6 @@ title: Grida Assistant for Figma
 
 ![Grida assistant](./branding/assistant-cover-v2021.8.0.png)
 
-
 # Grdia Assistant plugin (figma to flutter & react)
 
 > Any design to high quality code, with live preview.
@@ -25,6 +24,10 @@ title: Grida Assistant for Figma
 - ✅ Live preview via [console](https://console.grida.co) - compiles output source remotely makes design to living application within seconds
 - ✅ Context detection - Grida assistant understands the design, than converts it into a hight quality code. we don't generate rect and text code for a button. We generate button code for a button.
 
+## Devmode
+
+WIP
+
 ## Usage
 
 > Install figma plugin via below link. Note that the published plugin is always behind few new features behind this repository. For trying out the latest and mindblowing features, please build from your local environment directly.

figma-core/index.ts

@@ -42,15 +42,52 @@ figma.on("currentpagechange", () => {
   console.log("currentpagechange");
 });
 
+// codegen
+figma.codegen.on("generate", async (event) => {
+  return [
+    {
+      title: "Hello",
+      code: "code should appear here",
+      language: "TYPESCRIPT",
+    },
+  ];
+});
+
+figma.codegen.on("preferenceschange", async (event) => {
+  return;
+});
+
 /// ============================================================
 // MAIN INITIALIZATION
 import { showUI } from "./code-thread/show-ui";
 import { provideFigma } from "@design-sdk/figma";
 
-function main() {
-  MainImageRepository.instance = new ImageRepositories();
-  provideFigma(figma);
-  showUI();
+async function main() {
+  // provide figma editor type
+  await figma.clientStorage.setAsync("figma.editorType", figma.editorType);
+
+  switch (figma.editorType) {
+    case "figma": {
+      MainImageRepository.instance = new ImageRepositories();
+      provideFigma(figma);
+      showUI();
+      break;
+    }
+    case "figjam": {
+      break;
+    }
+    case "dev": {
+      MainImageRepository.instance = new ImageRepositories();
+      provideFigma(figma);
+      figma.notify("dev mode");
+      showUI();
+      break;
+    }
+    default: {
+      throw "unsupported editor type" + figma.editorType;
+    }
+  }
+
   // disabled on staging ----
   // create primary visual store
   // import { createPrimaryVisualStorePageIfNonExists } from "./physical-visual-store/page-manager/craete-page-if-non-exist";

figma-core/package.json

@@ -9,7 +9,7 @@
     "@plugin-sdk/service": "*"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.58.0",
+    "@figma/plugin-typings": "^1.70.0",
     "typescript": "^4.0.5"
   }
 }

figma/manifest.json

@@ -4,14 +4,15 @@
   "api": "1.0.0",
   "main": "dist/code.js",
   "ui": "dist/ui.html",
-  "editorType": [
-    "figma"
-  ],
+  "editorType": ["figma", "dev"],
+  "capabilities": ["codegen", "inspect"],
+  "codegenLanguages": [{ "label": "React", "value": "react" }],
+  "codegenPreferences": [],
   "relaunchButtons": [
     {
       "command": "open",
       "name": "Open Assistant",
       "multipleSelection": true
     }
   ]
-}
+}

package.json

@@ -17,8 +17,8 @@
       "packages/*",
       "packages/base-sdk/*",
       "packages/base-sdk/_firstparty/*",
-      "packages/design-to-code/packages/*",
-      "packages/design-to-code/editor-packages/*"
+      "lib/code/packages/*",
+      "lib/code/editor-packages/*"
     ]
   },
   "repository": "https://github.com/gridaco/assistant",
@@ -51,7 +51,7 @@
     "react-dom": "^18.2.0",
     "@types/react": "18.0.24",
     "@types/react-dom": "^18.0.8",
-    "@figma/plugin-typings": "^1.58.0",
+    "@figma/plugin-typings": "^1.70.0",
     "ts-loader": "8.4.0",
     "typescript": "4.9.5",
     "coli": "0.0.32",

packages/plugin-app/plugin-app.tsx

@@ -21,7 +21,7 @@ export function PluginApp(props: {
   const [booting, setBooting] = useState(true);
   useEffect(() => {
     console.log("start initializing plugin app...");
-
+    PluginSdk.getItem("figma.ediorType").then((a) => PluginSdk.notify(a, 10));
     PluginSdk.initializeWindow(parent);
     window.addEventListener("message", (ev: MessageEvent) => {
       const message: TransportPluginEvent = ev.data.pluginMessage;

yarn.lock

@@ -1783,10 +1783,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
   integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
 
-"@figma/plugin-typings@^1.58.0":
-  version "1.61.0"
-  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.61.0.tgz#34abfea24013bbc9897b182713a8f7fc23c5261f"
-  integrity sha512-qgnu96PY+eIMnqF2OorwLdSTdLT+HpZXAarOMjNkqEqBylVfSvc0f/qZpbKCTNDBM0blb3kayQoR8BwjM+0xmA==
+"@figma/plugin-typings@^1.70.0":
+  version "1.70.0"
+  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.70.0.tgz#0e11bc4c5d90c4e37b0bbb99fabe60fa46906169"
+  integrity sha512-dN/ehVt40WDSjuf6+vICw1Btq8yKNvKSo5xl1qk8jfRaOdaN88QOYgODEVUGp9gSzlyUEhUKng0YMKg/doBpEg==
 
 "@firebase/[email protected]":
   version "0.4.0"