Merge pull request #60 from gridaco/support-live-session

Live session support (1/3) - event from assistant

editor-packages/editor-live-session/README.md

@@ -0,0 +1,5 @@
+# A Live session listener app
+
+## From assistant
+
+## .env setup

editor-packages/editor-live-session/index.ts

@@ -0,0 +1,3 @@
+export function connect() {
+  throw "";
+}

editor-packages/editor-live-session/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "@editor-app/live-session",
+    "version": "0.0.0",
+    "private": false,
+    "main": "index.ts",
+    "dependencies": {
+        "pusher-js": "^7.0.3"
+    }
+}

editor/.env.defaults

@@ -1 +1,7 @@
+# General figma personal access token (optional, only used for development)
 FIGMA_PERSONAL_ACCESS_TOKEN='your-access-token-here'
+
+# Pusher API Key for `@editor-app/live-session`
+NEXT_PUBLIC_PUSHER_APP_ID=000
+NEXT_PUBLIC_PUSHER_KEY=000
+NEXT_PUBLIC_PUSHER_CLUSTER=us3

editor/components/code-editor/monaco.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import Editor, { useMonaco, Monaco } from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import _react_type_def_txt from "./react.d.ts.txt";
 
 export interface MonacoEditorProps {
   defaultValue?: string;
@@ -63,10 +62,6 @@ function setup_react_support(monaco: Monaco) {
     noSemanticValidation: false,
     noSyntaxValidation: false,
   });
-
-  monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    _react_type_def_txt
-  );
 }
 
 export { useMonaco } from "@monaco-editor/react";

editor/hooks/index.ts

@@ -1 +1,2 @@
+export * from "./use-design";
 export * from "./use-async-effect";

editor/hooks/use-design.ts

@@ -0,0 +1,160 @@
+import { NextRouter, useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { DesignProvider, analyzeDesignUrl } from "@design-sdk/url-analysis";
+import {
+  FigmaTargetNodeConfig,
+  parseFileAndNodeId,
+} from "@design-sdk/figma-url";
+import { fetch } from "@design-sdk/figma-remote";
+import { personal } from "@design-sdk/figma-auth-store";
+import { configure_auth_credentials } from "@design-sdk/figma-remote";
+import { TargetNodeConfig } from "../query/target-node";
+import { FigmaRemoteErrors } from "@design-sdk/figma-remote/lib/fetch";
+import { RemoteDesignSessionCacheStore } from "../store";
+import { convert } from "@design-sdk/figma-node-conversion";
+import { mapFigmaRemoteToFigma } from "@design-sdk/figma-remote/lib/mapper";
+
+// globally configure auth credentials for interacting with `@design-sdk/figma-remote`
+configure_auth_credentials({
+  personalAccessToken: personal.get_safe(),
+});
+
+/**
+ * query param for design input
+ */
+const P_DESIGN = "design";
+
+type UseDesignProp =
+  | (UseDesignFromRouter & UseDesingOptions)
+  | (UseDesingFromUrl & UseDesingOptions)
+  | (UseDesignFromFileAndNode & UseDesingOptions);
+
+interface UseDesingOptions {
+  use_session_cache?: boolean;
+}
+
+interface UseDesignFromRouter {
+  type: "use-router";
+  router?: NextRouter;
+}
+
+interface UseDesingFromUrl {
+  type: "use-url";
+  url: string;
+}
+
+interface UseDesignFromFileAndNode {
+  type: "use-file-node-id";
+  file: string;
+  node: string;
+}
+
+export function useDesign({
+  use_session_cache = true,
+  type,
+  ...props
+}: UseDesignProp) {
+  const [design, setDesign] = useState<TargetNodeConfig>(null);
+  const router = (type === "use-router" && props["router"]) ?? useRouter();
+  useEffect(() => {
+    let targetnodeconfig: FigmaTargetNodeConfig;
+    console.log("type", type);
+    switch (type) {
+      case "use-file-node-id": {
+        if (props["file"] && props["node"]) {
+          targetnodeconfig = {
+            file: props["file"],
+            node: props["node"],
+            url: `https://www.figma.com/file/${props["file"]}/${props["node"]}`, // only supports figma for now. improve this line
+          };
+        }
+        break;
+      }
+      case "use-router": {
+        const designparam: string = router.query[P_DESIGN] as string;
+        const _r = designparam && analyze(designparam);
+        switch (_r) {
+          case "figma": {
+            targetnodeconfig = parseFileAndNodeId(designparam);
+            break;
+          }
+          case undefined: {
+            break;
+          }
+          default: {
+            throw new Error(`unknown design provider: ${_r}`);
+            // not supported
+          }
+        }
+        break;
+      }
+      case "use-url": {
+        targetnodeconfig = parseFileAndNodeId((props as UseDesingFromUrl).url);
+        break;
+      }
+    }
+
+    if (targetnodeconfig) {
+      // load design from local storage or remote figma
+
+      const cacheStore = new RemoteDesignSessionCacheStore({
+        file: targetnodeconfig.file,
+        node: targetnodeconfig.node,
+      });
+      // cache control
+      if (use_session_cache && cacheStore.exists) {
+        const last_response = cacheStore.get();
+        const _1_converted_to_figma = mapFigmaRemoteToFigma(
+          last_response.nodes[targetnodeconfig.node]
+        );
+        const _2_converted_to_reflect = convert.intoReflectNode(
+          _1_converted_to_figma
+        );
+        setDesign(<TargetNodeConfig>{
+          ...targetnodeconfig,
+          raw: last_response,
+          figma: _1_converted_to_figma,
+          reflect: _2_converted_to_reflect,
+        });
+      } else {
+        fetch
+          .fetchTargetAsReflect({
+            file: targetnodeconfig.file,
+            node: targetnodeconfig.node,
+            auth: {
+              personalAccessToken: personal.get_safe(),
+            },
+          })
+          .then((res) => {
+            cacheStore.set(res.raw); // setting cache does not need to be determined by `use_session_cache` option.
+            setDesign(<TargetNodeConfig>{
+              ...res,
+              ...targetnodeconfig,
+            });
+          })
+          .catch((err: FigmaRemoteErrors) => {
+            switch (err.type) {
+              case "UnauthorizedError": {
+                // unauthorized
+                router.push("/preferences/access-tokens");
+                console.info(`(ignored) error while fetching design`, err);
+                break;
+              }
+              default:
+                throw err;
+            }
+          });
+      }
+    }
+  }, [router]);
+  return design;
+}
+
+const analyze = (query: string): "id" | DesignProvider => {
+  const _r = analyzeDesignUrl(query);
+  if (_r == "unknown") {
+    return "id";
+  } else {
+    return _r;
+  }
+};

editor/layout/loading-overlay/index.tsx

@@ -5,14 +5,20 @@ import styled from "@emotion/styled";
  * [design](https://www.figma.com/file/HSozKEVWhh8saZa2vr1Nxd/design-to-code?node-id=554%3A6162)
  * @returns
  */
-function LoadingLayout() {
+function LoadingLayout({
+  title = "Loading",
+  content = "We are now loading design remotely..",
+}: {
+  title?: string;
+  content?: string;
+}) {
   return (
     <RootWrapperLoadingLayout>
       <Frame61>
         <Frame5>
-          <Loading>Loading</Loading>
+          <Loading>{title}</Loading>
           <WeAreNowLoadingDesignRemotely>
-            We are now loading design remotely..
+            {content}
           </WeAreNowLoadingDesignRemotely>
         </Frame5>
       </Frame61>

editor/layout/panel/workspace-content-panel.tsx

@@ -6,12 +6,18 @@ import React from "react";
  * @param props
  * @returns
  */
-export function WorkspaceContentPanel(props: { children: JSX.Element }) {
-  return <Container>{props.children}</Container>;
+export function WorkspaceContentPanel({
+  children,
+  disableBorder = false,
+}: {
+  children: JSX.Element;
+  disableBorder?: boolean;
+}) {
+  return <Container disableBorder={disableBorder}>{children}</Container>;
 }
 
-const Container = styled.div`
-  border: solid #d2d2d2;
+const Container = styled.div<{ disableBorder: boolean }>`
+  border: ${(p) => (p.disableBorder ? "none" : "solid #d2d2d2")};
   border-width: 1px;
   align-self: stretch;
   flex: 1;

editor/next.config.js

@@ -1,4 +1,7 @@
 const withTM = require("next-transpile-modules")([
+  // region @editor-app
+  "@editor-app/live-session",
+
   // -----------------------------
   // region @designto-code
   "@designto/config",
@@ -64,9 +67,6 @@ const withTM = require("next-transpile-modules")([
 
   // -----------------------------
   // region builders - part of designto-code / coli
-  // region flutter builder
-  "@flutter-builder/flutter",
-  // endregion flutter builder
 
   // region web builders
   "@coli.codes/nodejs-builder",
@@ -82,13 +82,6 @@ const withTM = require("next-transpile-modules")([
 
 module.exports = withTM({
   webpack: (config) => {
-    config.node = {
-      fs: "empty",
-    };
-    config.module.rules.push({
-      test: /\.txt$/,
-      use: "raw-loader",
-    });
     return config;
   },
   async redirects() {

editor/pages/_app.tsx

@@ -11,7 +11,7 @@ function GlobalCss() {
         body {
           margin: 0px;
           padding: 0;
-          font-family: "Roboto", sans-serif;
+          font-family: "Helvetica Nueue", "Roboto", sans-serif;
         }
         iframe {
           border: none;

editor/pages/embed/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Embed() {
+  return <div>Embed</div>;
+}

editor/pages/figma/inspect-component.tsx

@@ -17,12 +17,12 @@ import {
   WorkspaceContentPanelGridLayout,
 } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
-import { useDesign } from "../../query-hooks";
+import { useDesign } from "../../hooks";
 import { make_instance_component_meta } from "@code-features/component";
 
 export default function InspectComponent() {
   //
-  const design = useDesign();
+  const design = useDesign({ type: "use-router" });
   if (!design) {
     return <LoadingLayout />;
   }

editor/pages/figma/inspect-frame.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MonacoEditor } from "../../components/code-editor";
 import { SceneNode } from "@design-sdk/figma-types";
-import { useDesign } from "../../query-hooks";
+import { useDesign } from "../../hooks";
 import LoadingLayout from "../../layout/loading-overlay";
 
 /**
@@ -10,7 +10,7 @@ import LoadingLayout from "../../layout/loading-overlay";
  */
 export default function InspectAutolayout() {
   //
-  const design = useDesign();
+  const design = useDesign({ type: "use-router" });
   if (!design) {
     return <LoadingLayout />;
   }

editor/pages/figma/inspect-raw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { MonacoEditor } from "../../components/code-editor";
-import { useDesign } from "../../query-hooks";
+import { useDesign } from "../../hooks";
 import LoadingLayout from "../../layout/loading-overlay";
 
 /**
@@ -9,7 +9,7 @@ import LoadingLayout from "../../layout/loading-overlay";
  */
 export default function InspectRaw() {
   //
-  const design = useDesign();
+  const design = useDesign({ type: "use-router" });
   if (!design) {
     return <LoadingLayout />;
   }

editor/pages/figma/to-flutter.tsx

@@ -16,12 +16,12 @@ import {
   WorkspaceContentPanelGridLayout,
 } from "../../layout/panel";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
-import { useDesign } from "../../query-hooks";
+import { useDesign } from "../../hooks";
 import { CodeEditor, MonacoEditor } from "../../components/code-editor";
 import LoadingLayout from "../../layout/loading-overlay";
 
 export default function FigmaToFlutterPage() {
-  const design = useDesign();
+  const design = useDesign({ type: "use-router" });
   const [result, setResult] = useState<output.ICodeOutput>();
 
   useEffect(() => {