Initial Widget declaration docgen support (for React, React native, SolidJS)

editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx

@@ -182,6 +182,7 @@ export function CanvasEventTarget({
         set_drag_start_emitted(false);
         onDragEnd(s);
       },
+      // @ts-ignore
       onMouseDown: onPointerDown,
       onMoveStart: onPointerMoveStart,
       onMoveEnd: onPointerMoveEnd,
@@ -209,6 +210,7 @@ export function CanvasEventTarget({
         WebkitUserSelect: "none",
       }}
       id="gesture-event-listener"
+      // @ts-ignore
       ref={interactionEventTargetRef}
     >
       {children}

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -47,7 +47,7 @@ interface CanvasState {
 type CanvasCustomRenderers = HudCustomRenderers & {
   renderItem: (
     p: {
-      node: ReflectSceneNode & { filekey: string };
+      node: ReflectSceneNode;
     } & FrameOptimizationFactors
   ) => React.ReactNode;
 };
@@ -309,14 +309,13 @@ export function Canvas({
 
   const items = useMemo(() => {
     return nodes?.map((node) => {
-      node["filekey"] = filekey;
       return (
         <LazyFrame key={node.id} xy={[node.x, node.y]} size={node}>
           {/* 👇 dev only (for performance tracking) 👇 */}
           {/* <div style={{ width: "100%", height: "100%", background: "grey" }} /> */}
           {/* 👆 ----------------------------------- 👆 */}
           {renderItem({
-            node: node as ReflectSceneNode & { filekey: string },
+            node: node as ReflectSceneNode,
             zoom, // ? use scaled_zoom ?
             inViewport: true, // TODO:
             isZooming: isZooming,

editor-packages/editor-preview-pip/lib/pip.tsx

@@ -61,6 +61,7 @@ function PIP({
   backgroundColor?: string;
 }) {
   return (
+    // @ts-ignore
     <Draggable handle=".handle" bounds="parent">
       <PipWindow
         className="handle"

editor-packages/editor-services-prettier/workers/prettier.worker.js

@@ -19,15 +19,15 @@ const options = {
     printWidth: 100,
     semi: true,
     useTabs: false,
-    singleQuote: true,
+    singleQuote: false,
   }),
   typescript: async () => ({
     parser: "babel",
     plugins: [await import("prettier/parser-babel")],
     printWidth: 100,
     semi: true,
     useTabs: false,
-    singleQuote: true,
+    singleQuote: false,
   }),
 };
 

editor/hooks/use-design.ts

@@ -101,8 +101,8 @@ export function useDesign({
     }
 
     if (targetnodeconfig) {
+      const filekey = targetnodeconfig.file;
       // load design from local storage or remote figma
-
       const cacheStore = new RemoteDesignSessionCacheStore({
         file: targetnodeconfig.file,
         node: targetnodeconfig.node,
@@ -116,7 +116,8 @@ export function useDesign({
         const _2_converted_to_reflect = convert.intoReflectNode(
           _1_converted_to_figma,
           null,
-          "rest"
+          "rest",
+          filekey
         );
 
         const res = <TargetNodeConfig>{

editor/next.config.js

@@ -1,5 +1,7 @@
 const TerserPlugin = require("terser-webpack-plugin");
 const withTM = require("next-transpile-modules")([
+  "dirty",
+
   // region @editor-app
   "@editor-app/live-session",
   "@code-editor/preview-pip", // TODO: remove me. this is for development. for production, use npm ver instead.
@@ -12,6 +14,7 @@ const withTM = require("next-transpile-modules")([
 
   // -----------------------------
   // region @designto-code
+  "@designto/debugger",
   "@designto/config",
   "@grida/builder-config-preset",
   "@grida/builder-platform-types",
@@ -26,6 +29,8 @@ const withTM = require("next-transpile-modules")([
   "@designto/react-native",
 
   "@code-features/assets",
+  "@code-features/module",
+  "@code-features/documentation",
   "@code-features/component",
   "@code-features/flags",
   // -----------------------------

editor/pages/files/[key]/index.tsx

@@ -6,8 +6,8 @@ import { EditorSnapshot, StateProvider } from "core/states";
 import { WorkspaceAction } from "core/actions";
 import { useDesignFile, TUseDesignFile } from "hooks";
 import { warmup } from "scaffolds/editor";
-import { FileResponse } from "@design-sdk/figma-remote-types";
 import { EditorBrowserMetaHead } from "components/editor";
+import type { FileResponse } from "@design-sdk/figma-remote-types";
 
 export default function FileEntryEditor() {
   const router = useRouter();
@@ -78,7 +78,7 @@ function SetupEditor({
     // ->> file.styles;
 
     const components = warmup.componentsFrom(file);
-    const pages = warmup.pagesFrom(file);
+    const pages = warmup.pagesFrom(filekey, file);
 
     if (prevstate) {
       val = {

editor/scaffolds/editor/warmup.ts

@@ -41,13 +41,16 @@ export function initialReducer(
   }
 }
 
-export function pagesFrom(file: FileResponse): FigmaReflectRepository["pages"] {
+export function pagesFrom(
+  filekey: string,
+  file: FileResponse
+): FigmaReflectRepository["pages"] {
   return file.document.children.map((page) => ({
     id: page.id,
     name: page.name,
     children: page["children"]?.map((child) => {
       const _mapped = mapper.mapFigmaRemoteToFigma(child);
-      return convert.intoReflectNode(_mapped, null, "rest");
+      return convert.intoReflectNode(_mapped, null, "rest", filekey);
     }),
     type: "design",
   }));

editor/scaffolds/preview/index.tsx

@@ -60,9 +60,7 @@ const blurred_bg_fill = (target: ReflectSceneNode) => {
 };
 
 type VanillaPreviewProps = {
-  target: ReflectSceneNode & {
-    filekey: string;
-  };
+  target: ReflectSceneNode;
 } & FrameOptimizationFactors;
 
 export function D2CVanillaPreview({
@@ -80,7 +78,10 @@ export function D2CVanillaPreview({
       }
     }
     setPreview(result);
-    cache.set(target.filekey, { ...result, __image });
+
+    if (typeof target.filekey == "string") {
+      cache.set(target.filekey, { ...result, __image });
+    }
   };
 
   const hide_preview = isZooming || isPanning;

package.json

@@ -17,5 +17,9 @@
         "externals/reflect-core/packages/*",
         "externals/design-sdk/*",
         "externals/coli/packages/*"
-    ]
+    ],
+    "resolutions": {
+        "@reflect-ui/core": "0.0.3",
+        "csstype": "3.1.0"
+    }
 }

packages/builder-config/input/design-input.ts

@@ -42,7 +42,10 @@ export class DesignInput implements IDesignInput {
       nodes: this._flat_all(design),
     });
 
-    return new DesignInput({ entry: design, repository: repository });
+    return new DesignInput({
+      entry: design,
+      repository: repository,
+    });
   }
 
   static fromDesignWithComponents({

packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts

@@ -1,6 +1,6 @@
 import type { ProjectPart } from "../output-part-project";
 import type { File } from "../output-file";
-import type { Module } from "../output-module";
+import type { ModuleFile } from "../output-module";
 import * as k from "../../k";
 
 export function make_project_part_output({
@@ -16,7 +16,7 @@ export function make_project_part_output({
   version?: string;
   main: string;
   files: File[];
-  modules: Module[];
+  modules: ModuleFile[];
   os?: string[];
   engines?: {
     [key: string]: string;

packages/builder-config/output/output-module/index.ts

@@ -1,6 +1,18 @@
-export interface Module extends File {
+type SupportedLanguagesExt =
+  | "ts"
+  | "tsx"
+  | "js"
+  | "jsx"
+  | "vue"
+  | "dart"
+  | "svelte";
+
+/**
+ * a
+ */
+export interface ModuleFile extends File {
   _type: "module";
-  language: "ts" | "tsx" | "js" | "jsx" | "vue" | "dart" | "svelte";
+  language: SupportedLanguagesExt;
 
   /**
    * list of exporting member identifiers

packages/builder-config/output/output-part-project/index.ts

@@ -1,5 +1,5 @@
 import { File } from "../output-file";
-import type { Module } from "../output-module";
+import type { ModuleFile } from "../output-module";
 
 /**
  * PartProject interface.
@@ -36,7 +36,7 @@ export interface ProjectPart {
 
   license?: string;
 
-  modules: Module[];
+  modules: ModuleFile[];
 
   files: File[];
 
@@ -61,6 +61,8 @@ export interface ProjectPart {
 
   /**
    * the main entry point of the project (just like in package.json for example)
+   *
+   * to locate the main file
    */
   main: string;
 }

packages/builder-css-styles/font-weight/index.ts

@@ -16,17 +16,19 @@ export type CSSFontWeight =
 type CSSNumericFontWeight =
   | "normal"
   | "bold"
-  | "100"
-  | "200"
-  | "300"
-  | "400"
-  | "500"
-  | "600"
-  | "700"
-  | "800"
-  | "900";
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900;
 
-export function convertToCssFontWeight(fontWeight: FontWeight): CSSFontWeight {
+export function convertToCssFontWeight(
+  fontWeight: FontWeight
+): CSSFontWeight | undefined {
   if (fontWeight === undefined) {
     return "initial";
   }
@@ -60,34 +62,34 @@ export function convertToCssFontWeight(fontWeight: FontWeight): CSSFontWeight {
 
 export function numericFontWeight(
   fontWeight: FontWeight
-): CSSNumericFontWeight {
+): CSSNumericFontWeight | undefined {
   switch (fontWeight) {
     case FontWeight.normal:
       return "normal";
     case FontWeight.bold:
       return "bold";
     case FontWeight.lighter:
-      return "300";
+      return 300;
     case FontWeight.bolder:
-      return "900";
+      return 900;
     case FontWeight.w100:
-      return "100";
+      return 100;
     case FontWeight.w200:
-      return "200";
+      return 200;
     case FontWeight.w300:
-      return "300";
+      return 300;
     case FontWeight.w400:
-      return "400";
+      return 400;
     case FontWeight.w500:
-      return "500";
+      return 500;
     case FontWeight.w600:
-      return "600";
+      return 600;
     case FontWeight.w700:
-      return "700";
+      return 700;
     case FontWeight.w800:
-      return "800";
+      return 800;
     case FontWeight.w900:
-      return "900";
+      return 900;
     default:
       return undefined;
   }

packages/builder-css-styles/length/index.ts

@@ -3,7 +3,7 @@ import { calc, operation } from "../calc";
 import { px, vw, vh } from "../dimensions";
 import { percent } from "../percent";
 
-export function length(d: DimensionLength | string, a?: Axis) {
+export function length(d: DimensionLength | string | undefined, a?: Axis) {
   if (d === undefined || d === null) {
     return;
   }
@@ -50,7 +50,7 @@ export function length(d: DimensionLength | string, a?: Axis) {
   }
 
   if (d.type == "calc") {
-    return calc(d.operations, a);
+    return calc(d.operations, a!);
   }
 
   if (d.type == "op") {