From 0c60c6dc189e42bdbfb3928862e98a68eeb3c393 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 20:12:16 +0900
Subject: [PATCH 01/14] add `--hash` flag docs

---
 packages/support-flags/--hash/README.md | 25 +++++++++++++++++++++++++
 packages/support-flags/--id/README.md   |  4 ++++
 2 files changed, 29 insertions(+)
 create mode 100644 packages/support-flags/--hash/README.md

diff --git a/packages/support-flags/--hash/README.md b/packages/support-flags/--hash/README.md
new file mode 100644
index 00000000..6a6a5d74
--- /dev/null
+++ b/packages/support-flags/--hash/README.md
@@ -0,0 +1,25 @@
+# Hash
+
+> Hash is a unique id indicator just like `--id`, but for a asset such as vector & images
+
+## Allowed on
+
+- layer with single image fill (a image)
+- a vector layer
+
+## Use with `--main`
+
+```
+vector layer 1 --hash=my-brand-logo
+vector layer 2 --hash=my-brand-logo --main
+```
+
+Now vector 1 & 2 will use the same svg data, based on vector 2's svg data (since it's marked with `--main`).
+
+- do - set one layer as main
+- don't - set multiple layer with same hash with main (will show warning)
+- don't - no main layer specified - will use the first hit item.
+
+## See also
+
+- [`--id`](../--id/README.md)
diff --git a/packages/support-flags/--id/README.md b/packages/support-flags/--id/README.md
index 2dfa2b02..1ffb5c29 100644
--- a/packages/support-flags/--id/README.md
+++ b/packages/support-flags/--id/README.md
@@ -8,3 +8,7 @@ by specifing the id flag, you can take advantage in below scenarios.
 - id="value" on generated html output.
 
 <!-- TODO: provide more realworld usecase -->
+
+## See also
+
+- [`--hash`](../--hash/README.md)

From a4a34f5d0a8057fe4137c02ac919681cd31e5e06 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 23:37:44 +0900
Subject: [PATCH 02/14] add module flag parsing

---
 packages/support-flags/--module/index.ts | 5 +++++
 packages/support-flags/index.ts          | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 packages/support-flags/--module/index.ts

diff --git a/packages/support-flags/--module/index.ts b/packages/support-flags/--module/index.ts
new file mode 100644
index 00000000..e17ab0aa
--- /dev/null
+++ b/packages/support-flags/--module/index.ts
@@ -0,0 +1,5 @@
+export const flag_key__module = "module";
+export interface ModuleFlag {
+  flag: typeof flag_key__module;
+  value: boolean | string;
+}
diff --git a/packages/support-flags/index.ts b/packages/support-flags/index.ts
index 384b51c2..a1d48997 100644
--- a/packages/support-flags/index.ts
+++ b/packages/support-flags/index.ts
@@ -2,7 +2,7 @@ import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash
 
 import { flag_key__artwork } from "./--artwork";
 import { flag_key__as_wrap } from "./--as-wrap";
-
+import { flag_key__module } from "./--module";
 export * from "./types";
 
 export function parse(name: string) {
@@ -16,6 +16,10 @@ export function parse(name: string) {
         name: flag_key__as_wrap,
         type: "bool",
       },
+      {
+        name: flag_key__module,
+        type: "bool", // TODO: support string also.
+      },
       //. TODO: add other flags under here.
     ]);
   } catch (_) {

From 49b05aa28c8e4b58b38219f906ab0472a5e0cbec Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 23:42:49 +0900
Subject: [PATCH 03/14] add multi file code editor & demo

---
 editor/components/code-editor/code-editor.tsx | 70 ++++++++++---------
 editor/components/code-editor/monaco.tsx      | 54 +++++++-------
 editor/package.json                           |  4 +-
 .../pages/_development/code-editor/index.tsx  | 19 +++++
 yarn.lock                                     |  4 +-
 5 files changed, 90 insertions(+), 61 deletions(-)
 create mode 100644 editor/pages/_development/code-editor/index.tsx

diff --git a/editor/components/code-editor/code-editor.tsx b/editor/components/code-editor/code-editor.tsx
index 06a1f026..5e054c0c 100644
--- a/editor/components/code-editor/code-editor.tsx
+++ b/editor/components/code-editor/code-editor.tsx
@@ -1,40 +1,46 @@
-//// dynamic code editor. supports codemirror & monaco
-import React from "react";
-import CodeMirror from "./code-mirror";
+import React, { useState } from "react";
 import { MonacoEditor } from "./monaco";
+import { Tabs, Tab } from "@material-ui/core";
 
-interface DynamicEdotorProps {
-  host?: _Host;
+export interface IFile {
+  name: string;
+  language: string;
+  raw: string;
 }
 
-type _Host = "codemirror" | "monaco" | "auto";
-// uses monaco by default. when set auto or host not provided.
-const fallbackAutoHost = "monaco";
+export type Files = { [name: string]: IFile };
 
-export function CodeEditor(props: DynamicEdotorProps) {
-  const _editorname = getTargetEditorName(props.host);
+export function CodeEditor({ files }: { files: Files }) {
+  const keys = Object.keys(files);
+  const [filekey, setFilekey] = useState<string>(keys[0]);
+  const getfile = (key: string) => files[key];
+  const handleChange = (event, newValue) => {
+    setFilekey(newValue);
+  };
 
-  switch (_editorname) {
-    case "codemirror":
-      return <CodeMirror />;
-    case "monaco":
-      return <MonacoEditor />;
-  }
-}
-
-function getTargetEditorName(host?: _Host): "codemirror" | "monaco" {
-  if (!host) {
-    return fallbackAutoHost;
-  }
-
-  switch (host) {
-    case "auto":
-      return fallbackAutoHost;
-    case "codemirror":
-      return "codemirror";
-    case "monaco":
-      return "monaco";
-  }
+  const file = getfile(filekey);
 
-  throw `invalid host option provided - "${host}"`;
+  return (
+    <>
+      {keys.length >= 2 && (
+        <Tabs
+          value={filekey}
+          onChange={handleChange}
+          variant="scrollable"
+          scrollButtons="off"
+          aria-label="scrollable prevent tabs example"
+        >
+          {Object.keys(files).map((name) => {
+            return <Tab key={name} label={name} value={name} />;
+          })}
+        </Tabs>
+      )}
+      <MonacoEditor
+        key={filekey}
+        height="100vh"
+        defaultLanguage={file.language}
+        defaultValue={file.raw}
+      />
+    </>
+  );
 }
diff --git a/editor/components/code-editor/monaco.tsx b/editor/components/code-editor/monaco.tsx
index 53afb1f5..2fe9cae6 100644
--- a/editor/components/code-editor/monaco.tsx
+++ b/editor/components/code-editor/monaco.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import Editor, { useMonaco } from "@monaco-editor/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";
 
@@ -12,31 +12,11 @@ interface EditorProps {
 }
 
 export function MonacoEditor(props: EditorProps) {
-  const monaco = useMonaco();
+  const monaco: Monaco = useMonaco();
   useEffect(() => {
-    // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264
     if (monaco) {
-      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-        target: monaco.languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        moduleResolution:
-          monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-        module: monaco.languages.typescript.ModuleKind.CommonJS,
-        noEmit: true,
-        esModuleInterop: true,
-        jsx: monaco.languages.typescript.JsxEmit.React,
-        reactNamespace: "React",
-        allowJs: true,
-      });
-
-      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-      });
-
-      monaco.languages.typescript.typescriptDefaults.addExtraLib(
-        _react_type_def_txt
-      );
+      setup_react_support(monaco);
+      // monaco.mo
     }
   }, [monaco]);
 
@@ -49,7 +29,7 @@ export function MonacoEditor(props: EditorProps) {
       }
       defaultValue={props.defaultValue ?? "// no content"}
       theme="vs-dark"
-      options={props.options}
+      options={{ ...props.options }}
     />
   );
 }
@@ -65,4 +45,28 @@ const pollyfill_language = (lang: string) => {
   }
 };
 
+function setup_react_support(monaco: Monaco) {
+  // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: true,
+    esModuleInterop: true,
+    jsx: monaco.languages.typescript.JsxEmit.React,
+    reactNamespace: "React",
+    allowJs: true,
+  });
+
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+  });
+
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(
+    _react_type_def_txt
+  );
+}
+
 export { useMonaco } from "@monaco-editor/react";
diff --git a/editor/package.json b/editor/package.json
index d82a7d85..ee8e36bc 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -15,9 +15,9 @@
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "@material-ui/core": "^4.11.4",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@monaco-editor/react": "^4.1.3",
     "@reflect-blocks/figma-embed": "^0.0.5",
     "@reflect-ui/editor-ui": "0.0.1",
diff --git a/editor/pages/_development/code-editor/index.tsx b/editor/pages/_development/code-editor/index.tsx
new file mode 100644
index 00000000..c158da96
--- /dev/null
+++ b/editor/pages/_development/code-editor/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { CodeEditor, Files } from "../../../components/code-editor";
+
+export default function CodeEditorDevPage() {
+  const files: Files = {
+    "index.ts": {
+      name: "index.ts",
+      language: "typescript",
+      raw: `export * from "./components"`,
+    },
+    "components/index.ts": {
+      name: "index.ts",
+      language: "typescript",
+      raw: `export * from "./app-bar"`,
+    },
+  };
+
+  return <CodeEditor files={files} />;
+}
diff --git a/yarn.lock b/yarn.lock
index 8084c61c..79f2f1f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1755,7 +1755,7 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@material-ui/core@^4.11.4":
+"@material-ui/core@^4.12.3":
   version "4.12.3"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
   integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
@@ -1780,7 +1780,7 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/lab@^4.0.0-alpha.58":
+"@material-ui/lab@^4.0.0-alpha.60":
   version "4.0.0-alpha.60"
   resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
   integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==

From d01a2b7c2b6b785a210cfe981d5b1f637830930b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 23:46:11 +0900
Subject: [PATCH 04/14] accepts monaco editor props from multifile editor

---
 editor/components/code-editor/code-editor.tsx   | 13 ++++++++++---
 editor/components/code-editor/monaco.tsx        |  2 +-
 editor/pages/_development/code-editor/index.tsx |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/editor/components/code-editor/code-editor.tsx b/editor/components/code-editor/code-editor.tsx
index 5e054c0c..dc1c9d07 100644
--- a/editor/components/code-editor/code-editor.tsx
+++ b/editor/components/code-editor/code-editor.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { MonacoEditor } from "./monaco";
+import { MonacoEditor, EditorProps as MonacoEditorProps } from "./monaco";
 import { Tabs, Tab } from "@material-ui/core";
 
+export interface EditorProps
+  extends Omit<MonacoEditorProps, "defaultValue" | "defaultLanguage"> {}
 export interface IFile {
   name: string;
   language: string;
@@ -10,7 +12,12 @@ export interface IFile {
 
 export type Files = { [name: string]: IFile };
 
-export function CodeEditor({ files }: { files: Files }) {
+export function CodeEditor({
+  files,
+  ...editor_props
+}: {
+  files: Files;
+} & EditorProps) {
   const keys = Object.keys(files);
   const [filekey, setFilekey] = useState<string>(keys[0]);
   const getfile = (key: string) => files[key];
@@ -37,7 +44,7 @@ export function CodeEditor({ files }: { files: Files }) {
       )}
       <MonacoEditor
         key={filekey}
-        height="100vh"
+        {...editor_props}
         defaultLanguage={file.language}
         defaultValue={file.raw}
       />
diff --git a/editor/components/code-editor/monaco.tsx b/editor/components/code-editor/monaco.tsx
index 2fe9cae6..fd0b67ac 100644
--- a/editor/components/code-editor/monaco.tsx
+++ b/editor/components/code-editor/monaco.tsx
@@ -3,7 +3,7 @@ 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";
 
-interface EditorProps {
+export interface EditorProps {
   defaultValue?: string;
   defaultLanguage?: string;
   width?: number | string;
diff --git a/editor/pages/_development/code-editor/index.tsx b/editor/pages/_development/code-editor/index.tsx
index c158da96..354e5cbd 100644
--- a/editor/pages/_development/code-editor/index.tsx
+++ b/editor/pages/_development/code-editor/index.tsx
@@ -15,5 +15,5 @@ export default function CodeEditorDevPage() {
     },
   };
 
-  return <CodeEditor files={files} />;
+  return <CodeEditor height="100vh" files={files} />;
 }

From 6192a419a5936939599e6cbf9ced536ce5efee29 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 23:50:31 +0900
Subject: [PATCH 05/14] update default code editor from vanilla monaco to
 composed code editor

---
 editor/pages/figma/to-flutter.tsx | 21 ++++++++++++---------
 editor/pages/figma/to-react.tsx   | 18 +++++++++++-------
 editor/pages/to-code/index.tsx    | 21 ++++++++++++---------
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/editor/pages/figma/to-flutter.tsx b/editor/pages/figma/to-flutter.tsx
index 175039c1..6a0fddb9 100644
--- a/editor/pages/figma/to-flutter.tsx
+++ b/editor/pages/figma/to-flutter.tsx
@@ -17,7 +17,7 @@ import {
 } from "../../layout/panel";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
 import { useDesign } from "../../query-hooks";
-import { MonacoEditor } from "../../components/code-editor";
+import { CodeEditor, MonacoEditor } from "../../components/code-editor";
 import LoadingLayout from "../../layout/loading-overlay";
 
 export default function FigmaToFlutterPage() {
@@ -81,18 +81,21 @@ export default function FigmaToFlutterPage() {
           </WorkspaceContentPanel>
           <WorkspaceContentPanel>
             <InspectionPanelContentWrap>
-              <MonacoEditor
-                key={widgetCode}
+              <CodeEditor
+                // key={widgetCode}
                 height="100vh"
                 options={{
                   automaticLayout: true,
                 }}
-                defaultLanguage="dart"
-                defaultValue={
-                  widgetCode
-                    ? widgetCode
-                    : "// No input design provided to be converted.."
-                }
+                files={{
+                  "index.tsx": {
+                    raw: widgetCode
+                      ? widgetCode
+                      : "// No input design provided to be converted..",
+                    language: "dart",
+                    name: "index.tsx",
+                  },
+                }}
               />
             </InspectionPanelContentWrap>
           </WorkspaceContentPanel>
diff --git a/editor/pages/figma/to-react.tsx b/editor/pages/figma/to-react.tsx
index 0d6676c2..edcad2b9 100644
--- a/editor/pages/figma/to-react.tsx
+++ b/editor/pages/figma/to-react.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
 import { WidgetTree } from "../../components/visualization/json-visualization/json-tree";
-import { MonacoEditor } from "../../components/code-editor";
+import { CodeEditor } from "../../components/code-editor";
 import { tokenize } from "@designto/token";
 import * as react from "@designto/react";
 import { mapGrandchildren } from "@design-sdk/core/utils";
@@ -78,17 +78,21 @@ export default function FigmaToReactDemoPage() {
           </WorkspaceContentPanel>
           <WorkspaceContentPanel key={targetNodeConfig?.node}>
             <InspectionPanelContentWrap>
-              <MonacoEditor
+              <CodeEditor
                 key={reactComponent?.code.raw}
                 height="100vh"
                 options={{
                   automaticLayout: true,
                 }}
-                defaultValue={
-                  reactComponent?.code
-                    ? reactComponent?.code.raw
-                    : "// No input design provided to be converted.."
-                }
+                files={{
+                  "index.tsx": {
+                    raw: reactComponent?.code
+                      ? reactComponent?.code.raw
+                      : "// No input design provided to be converted..",
+                    language: "typescript",
+                    name: "index.tsx",
+                  },
+                }}
               />
             </InspectionPanelContentWrap>
           </WorkspaceContentPanel>
diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index 25e9b1e2..a017f7d5 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -9,7 +9,7 @@ import {
   WorkspaceContentPanelGridLayout,
 } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
-import { MonacoEditor } from "../../components/code-editor";
+import { CodeEditor } from "../../components/code-editor";
 import {
   react_presets,
   flutter_presets,
@@ -100,18 +100,21 @@ export default function DesignToCodeUniversalPage() {
           </WorkspaceContentPanel>
           <WorkspaceContentPanel key={design.node}>
             <InspectionPanelContentWrap>
-              <MonacoEditor
-                key={code.raw}
+              <CodeEditor
+                // key={code.raw}
                 height="100vh"
                 options={{
                   automaticLayout: true,
                 }}
-                defaultLanguage={framework_config.language}
-                defaultValue={
-                  code
-                    ? code.raw
-                    : "// No input design provided to be converted.."
-                }
+                files={{
+                  "index.tsx": {
+                    raw: code
+                      ? code.raw
+                      : "// No input design provided to be converted..",
+                    language: framework_config.language,
+                    name: "index.tsx",
+                  },
+                }}
               />
             </InspectionPanelContentWrap>
           </WorkspaceContentPanel>

From d0c3401e0b0b0a5ac356d704ec9e0fab09fb98f9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 8 Oct 2021 23:53:42 +0900
Subject: [PATCH 06/14] rm unused import

---
 editor/components/code-editor/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/editor/components/code-editor/index.ts b/editor/components/code-editor/index.ts
index e32ac330..4d6ff02e 100644
--- a/editor/components/code-editor/index.ts
+++ b/editor/components/code-editor/index.ts
@@ -1,3 +1,2 @@
 export * from "./code-editor";
 export * from "./code-mirror";
-export * from "./monaco";

From c87f636b761a8e0d27e843b728e78608ab183b86 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 00:13:22 +0900
Subject: [PATCH 07/14] add custom preview framework override support with
 `?preview=` query

---
 editor/pages/to-code/index.tsx | 36 +++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index a017f7d5..7f59a92c 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -29,8 +29,10 @@ export default function DesignToCodeUniversalPage() {
   const router = useRouter();
   const design = useDesign();
   const [result, setResult] = useState<output.ICodeOutput>();
+  const [preview, setPreview] = useState<output.ICodeOutput>();
 
   const framework_config = get_framework_config_from_query(router.query);
+  const preview_runner_framework = get_preview_runner_framework(router.query);
 
   useEffect(() => {
     if (design) {
@@ -57,11 +59,28 @@ export default function DesignToCodeUniversalPage() {
         asset_config: { asset_repository: MainImageRepository.instance },
       }).then((result) => {
         setResult(result);
+        if (framework_config.framework == preview_runner_framework.framework) {
+          setPreview(result);
+        }
       });
+      // ----- for preview -----
+      if (framework_config.framework !== preview_runner_framework.framework) {
+        designToCode({
+          input: {
+            id: id,
+            name: name,
+            design: reflect,
+          },
+          framework: preview_runner_framework,
+          asset_config: { asset_repository: MainImageRepository.instance },
+        }).then((result) => {
+          setPreview(result);
+        });
+      }
     }
   }, [design]);
 
-  if (!result) {
+  if (!result || !preview) {
     return <LoadingLayout />;
   }
 
@@ -85,8 +104,8 @@ export default function DesignToCodeUniversalPage() {
             <PreviewAndRunPanel
               key={design.url ?? design.reflect?.id}
               config={{
-                src: scaffold.raw,
-                platform: runner_platform,
+                src: preview.scaffold.raw,
+                platform: preview_runner_framework.framework,
                 componentName: componentName,
                 sceneSize: {
                   w: design.reflect?.width,
@@ -144,6 +163,10 @@ export default function DesignToCodeUniversalPage() {
 
 function get_framework_config_from_query(query: ParsedUrlQuery) {
   const framework = query.framework as string;
+  return get_framework_config(framework);
+}
+
+function get_framework_config(framework: string) {
   switch (framework) {
     case "react":
     case "react_default":
@@ -164,6 +187,13 @@ function get_framework_config_from_query(query: ParsedUrlQuery) {
   }
 }
 
+function get_preview_runner_framework(query: ParsedUrlQuery) {
+  const preview = query.preview as string;
+  return get_framework_config(
+    preview || get_framework_config_from_query(query).framework
+  );
+}
+
 function get_runner_platform(config: FrameworkConfig) {
   switch (config.framework) {
     case "react":

From 7fb2dc61cc1494528702f7ab5800c50ee0510536 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 01:37:12 +0900
Subject: [PATCH 08/14] add output interfaces defs & docs

---
 .../output/output-component/README.md         |  1 +
 .../output/output-file/README.md              |  1 +
 .../output/output-file/index.ts               | 54 +++++++++++++++
 .../output/output-module/README.md            |  9 +++
 .../output/output-module/index.ts             |  9 +++
 .../output/output-part-project/README.md      |  3 +
 .../output/output-part-project/index.ts       | 66 +++++++++++++++++++
 7 files changed, 143 insertions(+)
 create mode 100644 packages/builder-config/output/output-component/README.md
 create mode 100644 packages/builder-config/output/output-file/README.md
 create mode 100644 packages/builder-config/output/output-file/index.ts
 create mode 100644 packages/builder-config/output/output-module/README.md
 create mode 100644 packages/builder-config/output/output-module/index.ts
 create mode 100644 packages/builder-config/output/output-part-project/README.md
 create mode 100644 packages/builder-config/output/output-part-project/index.ts

diff --git a/packages/builder-config/output/output-component/README.md b/packages/builder-config/output/output-component/README.md
new file mode 100644
index 00000000..0bcae9f6
--- /dev/null
+++ b/packages/builder-config/output/output-component/README.md
@@ -0,0 +1 @@
+# Component output
diff --git a/packages/builder-config/output/output-file/README.md b/packages/builder-config/output/output-file/README.md
new file mode 100644
index 00000000..7ac8882e
--- /dev/null
+++ b/packages/builder-config/output/output-file/README.md
@@ -0,0 +1 @@
+# File
diff --git a/packages/builder-config/output/output-file/index.ts b/packages/builder-config/output/output-file/index.ts
new file mode 100644
index 00000000..f80886f6
--- /dev/null
+++ b/packages/builder-config/output/output-file/index.ts
@@ -0,0 +1,54 @@
+/**
+ * the genral file output definition
+ */
+export interface File {
+  /**
+   * name of the file with optional extension
+   *
+   * by "optional", it doesn't mean you can skip the extension while expecting the handler to automatically detect the extension
+   *
+   * it means you can skip the extension for files that does not require a extension.
+   * e.g.
+   * ```
+   * LICENSE
+   * WATCHLISTS
+   * OWNERS
+   * DIR_METADATA
+   * ```
+   *
+   * other wise, the extension is required.
+   * e.g.
+   * ```
+   * index.html
+   * index.ts
+   * my-gf-selfie.jpg (null)
+   * .gn
+   * .vscode
+   * .github
+   * ```
+   */
+  name: string;
+
+  /**
+   * mime type of the file
+   */
+  readonly type: string;
+
+  /**
+   * The absolute path to the file relative to root of the environment.
+   *
+   * - acceptable: `/path/to/file.ts`
+   * - unacceptable: `./path/to/file.ts`
+   */
+  path: string;
+
+  /**
+   * The contents of the file. binary is also acceptable.
+   */
+  content: string;
+
+  /**
+   * the size of the file
+   */
+  size?: number;
+}
diff --git a/packages/builder-config/output/output-module/README.md b/packages/builder-config/output/output-module/README.md
new file mode 100644
index 00000000..d2fe431c
--- /dev/null
+++ b/packages/builder-config/output/output-module/README.md
@@ -0,0 +1,9 @@
+# Module outout (!RTFM!)
+
+definition: module here, is not a conventional module that we understand.
+Module is simply a file, that has a export member and can be imported from other files.
+we use the term "module" to sync the term with flag `--module` form `@code-features/flags`
+
+Module is a superset of file, a file with a programming language contained.
+
+General file on the other hand, can contain any dynamic contents such as images (.png), video (.mov), or document (.md) and so on..
diff --git a/packages/builder-config/output/output-module/index.ts b/packages/builder-config/output/output-module/index.ts
new file mode 100644
index 00000000..382e6c6d
--- /dev/null
+++ b/packages/builder-config/output/output-module/index.ts
@@ -0,0 +1,9 @@
+export interface Module extends File {
+  _type: "module";
+  language: "ts" | "tsx" | "js" | "jsx" | "vue" | "dart" | "svelte";
+
+  /**
+   * list of exporting member identifiers
+   */
+  exports: string[];
+}
diff --git a/packages/builder-config/output/output-part-project/README.md b/packages/builder-config/output/output-part-project/README.md
new file mode 100644
index 00000000..0dee083c
--- /dev/null
+++ b/packages/builder-config/output/output-part-project/README.md
@@ -0,0 +1,3 @@
+# Project part output
+
+definition: A executable project, that can be executed as standalone, but not a complete user project.
diff --git a/packages/builder-config/output/output-part-project/index.ts b/packages/builder-config/output/output-part-project/index.ts
new file mode 100644
index 00000000..6469f9ae
--- /dev/null
+++ b/packages/builder-config/output/output-part-project/index.ts
@@ -0,0 +1,66 @@
+import { File } from "../output-file";
+import type { Module } from "../output-module";
+
+/**
+ * PartProject interface.
+ *
+ *
+ * _references_: the part project is inspired from [package.json manifest](https://docs.npmjs.com/cli/v7/configuring-npm/package-json), yet compatitable across all frameworks, os, envs.
+ */
+export interface PartProject {
+  _type: "part-project";
+
+  engines: { [key: string]: string };
+
+  os: string[];
+
+  private: boolean;
+
+  /**
+   * name of the part project
+   */
+  name: string;
+
+  version: string;
+
+  description?: string;
+
+  /**
+   * authors
+   */
+  authors?: string[];
+
+  homepage?: string;
+
+  bugs?: string;
+
+  license?: string;
+
+  modules: Module[];
+
+  files: File[];
+
+  repository?:
+    | {
+        type: string;
+        url: string;
+      }
+    | string;
+
+  dependencies?: {
+    [key: string]: string;
+  };
+
+  devDependencies?: {
+    [key: string]: string;
+  };
+
+  peerDependencies?: {
+    [key: string]: string;
+  };
+
+  /**
+   * the main entry point of the project (just like in package.json for example)
+   */
+  main: string;
+}

From 62002016a642c321efebf7b2a691affc7955687a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 01:56:03 +0900
Subject: [PATCH 09/14] add output config & make utilities

---
 packages/builder-config/index.ts              |  1 +
 packages/builder-config/k/index.ts            | 12 +++++++
 packages/builder-config/output/index.ts       |  1 +
 .../output/make-output/README.md              |  1 +
 .../output/make-output/index.ts               |  5 +++
 ...ject-part-snapshot-build-default-params.ts | 36 +++++++++++++++++++
 .../output/output-part-project/index.ts       |  2 +-
 7 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder-config/k/index.ts
 create mode 100644 packages/builder-config/output/make-output/README.md
 create mode 100644 packages/builder-config/output/make-output/index.ts
 create mode 100644 packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts

diff --git a/packages/builder-config/index.ts b/packages/builder-config/index.ts
index 6984f502..0bf284f7 100644
--- a/packages/builder-config/index.ts
+++ b/packages/builder-config/index.ts
@@ -3,3 +3,4 @@ export * as output from "./output";
 export * as config from "./configure"; // configure
 export * from "./configure"; // configure
 export * from "./framework";
+export * as k from "./k";
diff --git a/packages/builder-config/k/index.ts b/packages/builder-config/k/index.ts
new file mode 100644
index 00000000..76327f34
--- /dev/null
+++ b/packages/builder-config/k/index.ts
@@ -0,0 +1,12 @@
+/**
+ * https://www.npmjs.com/@made-with-grida ~
+ *
+ * e.g.
+ * ```json
+ * {
+ *  "name": "@made-with-grida/<username>-<project-name>",
+ *  "version": "<build-number>"
+ * }
+ * ```
+ */
+export const made_with_grida_npm_namespace = "@made-with-grida";
diff --git a/packages/builder-config/output/index.ts b/packages/builder-config/output/index.ts
index c5b774b0..aaf683a5 100644
--- a/packages/builder-config/output/index.ts
+++ b/packages/builder-config/output/index.ts
@@ -1,3 +1,4 @@
 export * from "./code-output";
 export * from "./component-output";
 export * from "./screen-output";
+export * from "./make-output";
diff --git a/packages/builder-config/output/make-output/README.md b/packages/builder-config/output/make-output/README.md
new file mode 100644
index 00000000..934b197f
--- /dev/null
+++ b/packages/builder-config/output/make-output/README.md
@@ -0,0 +1 @@
+# Output make utilities. end user won't need to access this module
diff --git a/packages/builder-config/output/make-output/index.ts b/packages/builder-config/output/make-output/index.ts
new file mode 100644
index 00000000..e21e7cc9
--- /dev/null
+++ b/packages/builder-config/output/make-output/index.ts
@@ -0,0 +1,5 @@
+import { make_project_part_output } from "./project-part-snapshot-build-default-params";
+
+export const make = {
+  project_part_output: make_project_part_output,
+};
diff --git a/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts
new file mode 100644
index 00000000..e31d9062
--- /dev/null
+++ b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts
@@ -0,0 +1,36 @@
+import type { ProjectPart } from "../output-part-project";
+import type { File } from "../output-file";
+import type { Module } from "../output-module";
+import * as k from "../../k";
+
+export function make_project_part_output({
+  name,
+  version = "0.0.0",
+  main,
+  files,
+  modules,
+  os = ["*"],
+  engines = {},
+}: {
+  name: string;
+  version?: string;
+  main: string;
+  files: File[];
+  modules: Module[];
+  os?: string[];
+  engines?: {
+    [key: string]: string;
+  };
+}): ProjectPart {
+  return {
+    _type: "part-project",
+    engines: engines,
+    os: os,
+    private: true,
+    name: `${k.made_with_grida_npm_namespace}/${name}`,
+    version: version,
+    modules: modules,
+    files: files,
+    main: main,
+  };
+}
diff --git a/packages/builder-config/output/output-part-project/index.ts b/packages/builder-config/output/output-part-project/index.ts
index 6469f9ae..9d81f1c7 100644
--- a/packages/builder-config/output/output-part-project/index.ts
+++ b/packages/builder-config/output/output-part-project/index.ts
@@ -7,7 +7,7 @@ import type { Module } from "../output-module";
  *
  * _references_: the part project is inspired from [package.json manifest](https://docs.npmjs.com/cli/v7/configuring-npm/package-json), yet compatitable across all frameworks, os, envs.
  */
-export interface PartProject {
+export interface ProjectPart {
   _type: "part-project";
 
   engines: { [key: string]: string };

From 6eff64174b2bd9ba9109162154fa864cbb956115 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 02:56:59 +0900
Subject: [PATCH 10/14] fix syntaxes

---
 editor/components/code-editor/code-editor.tsx | 6 +++---
 editor/components/code-editor/index.ts        | 1 +
 editor/components/code-editor/monaco.tsx      | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/editor/components/code-editor/code-editor.tsx b/editor/components/code-editor/code-editor.tsx
index dc1c9d07..cfe326c7 100644
--- a/editor/components/code-editor/code-editor.tsx
+++ b/editor/components/code-editor/code-editor.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { MonacoEditor, EditorProps as MonacoEditorProps } from "./monaco";
+import { MonacoEditor, MonacoEditorProps as MonacoEditorProps } from "./monaco";
 import { Tabs, Tab } from "@material-ui/core";
 
-export interface EditorProps
+export interface CodeEditorProps
   extends Omit<MonacoEditorProps, "defaultValue" | "defaultLanguage"> {}
 export interface IFile {
   name: string;
@@ -17,7 +17,7 @@ export function CodeEditor({
   ...editor_props
 }: {
   files: Files;
-} & EditorProps) {
+} & CodeEditorProps) {
   const keys = Object.keys(files);
   const [filekey, setFilekey] = useState<string>(keys[0]);
   const getfile = (key: string) => files[key];
diff --git a/editor/components/code-editor/index.ts b/editor/components/code-editor/index.ts
index 4d6ff02e..e32ac330 100644
--- a/editor/components/code-editor/index.ts
+++ b/editor/components/code-editor/index.ts
@@ -1,2 +1,3 @@
 export * from "./code-editor";
 export * from "./code-mirror";
+export * from "./monaco";
diff --git a/editor/components/code-editor/monaco.tsx b/editor/components/code-editor/monaco.tsx
index fd0b67ac..2e176445 100644
--- a/editor/components/code-editor/monaco.tsx
+++ b/editor/components/code-editor/monaco.tsx
@@ -3,7 +3,7 @@ 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 EditorProps {
+export interface MonacoEditorProps {
   defaultValue?: string;
   defaultLanguage?: string;
   width?: number | string;
@@ -11,7 +11,7 @@ export interface EditorProps {
   options?: monaco.editor.IStandaloneEditorConstructionOptions;
 }
 
-export function MonacoEditor(props: EditorProps) {
+export function MonacoEditor(props: MonacoEditorProps) {
   const monaco: Monaco = useMonaco();
   useEffect(() => {
     if (monaco) {

From ef52c4f303ad3db7b33fdf9b1fae730bcd7699e3 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 02:57:30 +0900
Subject: [PATCH 11/14] update react config tree interfaces

---
 packages/builder-config-preset/index.ts       | 58 ++++++++++--
 .../configure/framework-config.ts             |  8 +-
 .../builder-config/framework-react/index.ts   | 11 ++-
 .../react-config-component-syntax.ts          |  8 ++
 .../react-config-exporting-component.ts       | 91 +++++++++++++++++++
 ...config-functional-component-declaration.ts | 10 ++
 .../framework-react/react-config-styling.ts   | 40 ++++++++
 .../framework-react/react-config.ts           | 16 ++++
 .../framework-react/react-output.ts           |  3 +
 9 files changed, 225 insertions(+), 20 deletions(-)
 create mode 100644 packages/builder-config/framework-react/react-config-component-syntax.ts
 create mode 100644 packages/builder-config/framework-react/react-config-exporting-component.ts
 create mode 100644 packages/builder-config/framework-react/react-config-functional-component-declaration.ts
 create mode 100644 packages/builder-config/framework-react/react-config-styling.ts
 create mode 100644 packages/builder-config/framework-react/react-config.ts
 create mode 100644 packages/builder-config/framework-react/react-output.ts

diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts
index 471fa3b5..e451da49 100644
--- a/packages/builder-config-preset/index.ts
+++ b/packages/builder-config-preset/index.ts
@@ -5,22 +5,38 @@ export const react_presets = {
   react_default: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
-    styling: "styled-components",
+    styling: {
+      type: "styled-components",
+      module: "@emotion/styled",
+    },
   },
   react_with_styled_components: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
-    styling: "styled-components",
+    styling: {
+      type: "styled-components",
+      module: "styled-components",
+    },
+  },
+  react_with_emotion_styled: <config.ReactFrameworkConfig>{
+    framework: Framework.react,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "@emotion/styled",
+    },
   },
   react_with_css_in_jsx: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
-    styling: "css-in-jsx",
+    styling: {
+      type: "css-in-jsx",
+    },
   },
   react_with_css: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
-    styling: "css",
+    styling: { type: "css" },
   },
 };
 
@@ -63,8 +79,32 @@ export const all_preset_options_map__prod = {
   // react_with_css // NOT ON PRODUCTION
 };
 
-export const react_styles: react.ReactStylingStrategy[] = [
-  "styled-components",
-  "css-in-jsx",
-  "css",
-];
+export const react_styles: {
+  [alias in react.ReactStylingStrategy["type"]]: react.ReactStylingStrategy[];
+} = {
+  "styled-components": [
+    {
+      type: "styled-components",
+      module: "@emotion/styled",
+    },
+    {
+      type: "styled-components",
+      module: "styled-components",
+    },
+  ],
+  "css-in-jsx": [
+    {
+      type: "css-in-jsx",
+    },
+  ],
+  css: [
+    {
+      type: "css",
+      lang: "css",
+    },
+    {
+      type: "css",
+      lang: "scss",
+    },
+  ],
+};
diff --git a/packages/builder-config/configure/framework-config.ts b/packages/builder-config/configure/framework-config.ts
index c5d3c335..90ad755f 100644
--- a/packages/builder-config/configure/framework-config.ts
+++ b/packages/builder-config/configure/framework-config.ts
@@ -1,16 +1,12 @@
 import { Language } from "@grida/builder-platform-types";
-import { ReactStylingStrategy } from "../framework-react";
+import type { ReactFrameworkConfig } from "../framework-react";
 
 export type FrameworkConfig =
   | ReactFrameworkConfig
   | FlutterFrameworkConfig
   | VanillaFrameworkConfig;
 
-export interface ReactFrameworkConfig {
-  framework: "react";
-  language: Language.jsx | Language.tsx;
-  styling: ReactStylingStrategy;
-}
+export type { ReactFrameworkConfig };
 
 export interface FlutterFrameworkConfig {
   framework: "flutter";
diff --git a/packages/builder-config/framework-react/index.ts b/packages/builder-config/framework-react/index.ts
index fd72a15f..fab21abd 100644
--- a/packages/builder-config/framework-react/index.ts
+++ b/packages/builder-config/framework-react/index.ts
@@ -1,5 +1,6 @@
-import { ComponentOutput } from "../output";
-
-export interface ReactComponentOutput extends ComponentOutput {}
-
-export type ReactStylingStrategy = "css" | "styled-components" | "css-in-jsx";
+export * from "./react-config";
+export * from "./react-config-component-syntax";
+export * from "./react-config-exporting-component";
+export * from "./react-config-functional-component-declaration";
+export * from "./react-config-styling";
+export * from "./react-output";
diff --git a/packages/builder-config/framework-react/react-config-component-syntax.ts b/packages/builder-config/framework-react/react-config-component-syntax.ts
new file mode 100644
index 00000000..a5f1a6e0
--- /dev/null
+++ b/packages/builder-config/framework-react/react-config-component-syntax.ts
@@ -0,0 +1,8 @@
+export type ReactComponentSyntax =
+  | VariableDeclarationSyntax
+  | FunctionDeclarationSyntax
+  | ClassDeclarationSyntax;
+
+type FunctionDeclarationSyntax = "function";
+type ClassDeclarationSyntax = "class";
+type VariableDeclarationSyntax = "const" | "let" | "var";
diff --git a/packages/builder-config/framework-react/react-config-exporting-component.ts b/packages/builder-config/framework-react/react-config-exporting-component.ts
new file mode 100644
index 00000000..785bc964
--- /dev/null
+++ b/packages/builder-config/framework-react/react-config-exporting-component.ts
@@ -0,0 +1,91 @@
+export type ReactComponentExportingCofnig =
+  | ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent
+  | ReactComponentExportingConfig_ExportNamedFunction
+  | ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent
+  | ReactComponentExportingConfig_ExportNamedClassComponent;
+
+export type ReactFunctionalComponentDeclarationSyntaxChoice =
+  | "function"
+  | "inlinefunction";
+
+export type ReactComponentExportDeclarationSyntaxChoice =
+  | "export"
+  | "export-default";
+
+/**
+ * ```tsx
+ * export default function () { ... }
+ * ```
+ */
+export interface ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent {
+  type: "export-default-anonymous-functional-component";
+  exporting_position: "with-declaration";
+  declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice;
+  export_declaration_syntax_choice: "export-default";
+}
+
+/**
+ * ```tsx
+ * export function () { ... } +@
+ * // or
+ * export default function () { ... } +@
+ * ```
+ */
+export interface ReactComponentExportingConfig_ExportNamedFunction {
+  type: "export-named-functional-component";
+  exporting_position: react_component_symantic_export_token_location;
+  declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice;
+  export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice;
+}
+
+/**
+ * ```tsx
+ * export default class { ... }
+ * ```
+ */
+export interface ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent {
+  type: "export-anonymous-class-component";
+  exporting_position: "with-declaration";
+  export_declaration_syntax_choice: "export-default";
+}
+
+/**
+ * ```tsx
+ * export class Component {} +@
+ * // or
+ * export default class Component {} +@
+ * ```
+ */
+export interface ReactComponentExportingConfig_ExportNamedClassComponent {
+  type: "export-named-class-component";
+  exporting_position: react_component_symantic_export_token_location;
+  export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice;
+}
+
+/**
+ * symantic location that export token can be located
+ *
+ * ```ts
+ * // `with-declaration`
+ * export function A () {}
+ * var _other_blocks;
+ * ...
+ *
+ * // `after-declaration`
+ * function A () {}
+ * export { A }
+ * var _other_blocks;
+ *
+ * // `end-of-file`
+ * function A () {}
+ * var _other_blocks;
+ * export { A }
+ * ```
+ */
+export type react_component_symantic_export_token_location =
+  // export function A ...
+  | "with-declaration"
+  // function A ... export { A }
+  | "after-declaration"
+  // function A ... <other-blocks> ... export { A }
+  | "end-of-file";
diff --git a/packages/builder-config/framework-react/react-config-functional-component-declaration.ts b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts
new file mode 100644
index 00000000..37af0426
--- /dev/null
+++ b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts
@@ -0,0 +1,10 @@
+export type ReactFunctionalComponentDeclarationConfig = ReactFunctionalComponentDeclarationStyle;
+
+interface ReactFunctionalComponentDeclarationStyle {
+  // props: {} vs {} : {}
+  props_parameter_style: UnwrappedPropsCodeStyle;
+}
+
+interface UnwrappedPropsCodeStyle {
+  style: "unwrapped-props";
+}
diff --git a/packages/builder-config/framework-react/react-config-styling.ts b/packages/builder-config/framework-react/react-config-styling.ts
new file mode 100644
index 00000000..3a789000
--- /dev/null
+++ b/packages/builder-config/framework-react/react-config-styling.ts
@@ -0,0 +1,40 @@
+export type ReactStylingStrategy =
+  | CssInJsxConfig
+  | CssStylingConfig
+  | ReactStyledComponentsConfig;
+
+interface CssInJsxConfig {
+  type: "css-in-jsx";
+}
+
+type CssStylingConfig = VanillaCssStylingConfig | ScssStylingConfig;
+
+interface VanillaCssStylingConfig {
+  type: "css";
+  lang: "css";
+}
+
+interface ScssStylingConfig {
+  type: "css";
+  lang: "scss";
+}
+
+type ReactStyledComponentsConfig =
+  | ReactTheStyledComponentsConfig
+  | ReactEmotionStyledConfig;
+
+/**
+ * "The" styled-components config - https://styled-components.com/
+ */
+interface ReactTheStyledComponentsConfig {
+  type: "styled-components";
+  module: "styled-components";
+}
+
+/**
+ * @emotion/styled config - https://emotion.sh/
+ */
+interface ReactEmotionStyledConfig {
+  type: "styled-components";
+  module: "@emotion/styled";
+}
diff --git a/packages/builder-config/framework-react/react-config.ts b/packages/builder-config/framework-react/react-config.ts
new file mode 100644
index 00000000..959d9fb7
--- /dev/null
+++ b/packages/builder-config/framework-react/react-config.ts
@@ -0,0 +1,16 @@
+import { Language } from "@grida/builder-platform-types";
+import type { ReactComponentExportingCofnig } from "./react-config-exporting-component";
+import type { ReactFunctionalComponentDeclarationConfig } from "./react-config-functional-component-declaration";
+import type { ReactStylingStrategy } from "./react-config-styling";
+
+export interface ReactFrameworkConfig {
+  framework: "react";
+  language: Language.jsx | Language.tsx;
+  // TODO: rename to css_styling
+  styling: ReactStylingStrategy;
+  component_declaration_style: {
+    exporting_style: ReactComponentExportingCofnig;
+    // not supported yet
+    declaration_style?: ReactFunctionalComponentDeclarationConfig;
+  };
+}
diff --git a/packages/builder-config/framework-react/react-output.ts b/packages/builder-config/framework-react/react-output.ts
new file mode 100644
index 00000000..0969ee74
--- /dev/null
+++ b/packages/builder-config/framework-react/react-output.ts
@@ -0,0 +1,3 @@
+import { ComponentOutput } from "../output";
+
+export interface ReactComponentOutput extends ComponentOutput {}

From 971746c1ad22ccc1ff44e0b85e74a4c80c23d85c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 03:41:19 +0900
Subject: [PATCH 12/14] sanitize react builder structure

---
 .../app-runner/react-app-runner.tsx           | 72 +++----------------
 packages/builder-web-nodejs/index.ts          |  1 -
 packages/builder-web-nodejs/tsconfig.json     |  6 --
 .../export-result/component.export-result.ts  |  0
 .../{export => }/export-result/index.ts       |  0
 .../stringfy => export-string}/css-in-jsx.ts  |  0
 .../stringfy => export-string}/index.ts       |  0
 .../styled-component.ts                       |  2 +-
 .../export/exportable/index.ts                |  7 --
 packages/builder-web-react/export/index.ts    |  2 -
 packages/builder-web-react/index.ts           |  2 +-
 .../index.ts                                  |  0
 .../react-default.ts                          |  2 +-
 .../with-emotion-styled.ts                    |  2 +-
 .../with-styled-components.ts                 |  2 +-
 .../{build-app => react-project}/index.ts     |  4 +-
 .../create-react-app-typescript/index.ts      |  2 +-
 .../templates/index.ts                        |  0
 .../styled-component-declaration.ts           |  2 +-
 ...matter.ts => styled-variable-formatter.ts} |  4 +-
 packages/designto-react/app/index.ts          | 27 +++++++
 packages/designto-react/index.ts              | 29 +-------
 packages/designto-react/k/csb-template.ts     | 64 +++++++++++++++++
 packages/designto-react/k/index.ts            |  1 +
 .../react-package-json-make/index.ts          | 43 +++++++++++
 25 files changed, 158 insertions(+), 116 deletions(-)
 delete mode 100644 packages/builder-web-nodejs/tsconfig.json
 rename packages/builder-web-react/{export => }/export-result/component.export-result.ts (100%)
 rename packages/builder-web-react/{export => }/export-result/index.ts (100%)
 rename packages/builder-web-react/{export/stringfy => export-string}/css-in-jsx.ts (100%)
 rename packages/builder-web-react/{export/stringfy => export-string}/index.ts (100%)
 rename packages/builder-web-react/{export/stringfy => export-string}/styled-component.ts (98%)
 delete mode 100644 packages/builder-web-react/export/exportable/index.ts
 delete mode 100644 packages/builder-web-react/export/index.ts
 rename packages/builder-web-react/{build-app/import-specifications => react-import-specifications}/index.ts (100%)
 rename packages/builder-web-react/{build-app/import-specifications => react-import-specifications}/react-default.ts (97%)
 rename packages/builder-web-react/{build-app/import-specifications => react-import-specifications}/with-emotion-styled.ts (84%)
 rename packages/builder-web-react/{build-app/import-specifications => react-import-specifications}/with-styled-components.ts (85%)
 rename packages/builder-web-react/{build-app => react-project}/index.ts (90%)
 rename packages/{builder-web-nodejs => builder-web-react}/templates/create-react-app-typescript/index.ts (92%)
 rename packages/{builder-web-nodejs => builder-web-react}/templates/index.ts (100%)
 rename packages/builder-web-styled-components/{formatter.ts => styled-variable-formatter.ts} (95%)
 create mode 100644 packages/designto-react/app/index.ts
 create mode 100644 packages/designto-react/k/csb-template.ts
 create mode 100644 packages/designto-react/k/index.ts
 create mode 100644 packages/designto-react/react-package-json-make/index.ts

diff --git a/editor/components/app-runner/react-app-runner.tsx b/editor/components/app-runner/react-app-runner.tsx
index dac188e5..c0d31020 100644
--- a/editor/components/app-runner/react-app-runner.tsx
+++ b/editor/components/app-runner/react-app-runner.tsx
@@ -1,3 +1,4 @@
+import { k } from "@designto/react";
 import React from "react";
 import { CodeSandBoxView } from "./code-sandbox-runner";
 
@@ -13,80 +14,27 @@ export function ReactAppRunner(props: {
         sandbox={{
           files: {
             "App.tsx": {
-              content: props.source,
+              content: k.create_react_app_typescript_starter.app_tsx(
+                props.source
+              ),
               isBinary: false,
             },
             "index.tsx": {
-              content: `
-import React from "react";
-import { render } from "react-dom";
-
-import ${props.componentName} from "./App";
-
-const rootElement = document.getElementById("root");
-render(<${props.componentName} />, rootElement);
-`,
+              content: k.create_react_app_typescript_starter.index_tsx(
+                props.componentName
+              ),
               isBinary: false,
             },
             "tsconfig.json": {
-              content: `
-{
-    "include": [
-        "./src/**/*"
-    ],
-    "compilerOptions": {
-        "strict": true,
-        "esModuleInterop": true,
-        "lib": [
-            "dom",
-            "es2015"
-        ],
-        "jsx": "react-jsx"
-    }
-}`,
+              content: k.create_react_app_typescript_starter.tsconfig_json,
               isBinary: false,
             },
             "package.json": {
-              content: `
-{
-  "name": "react-typescript",
-  "version": "1.0.0",
-  "description": "React and TypeScript example starter project",
-  "keywords": [
-    "typescript",
-    "react",
-    "starter"
-  ],
-  "main": "src/index.tsx",
-  "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-scripts": "4.0.0",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5"
-  },
-  "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "typescript": "4.1.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}`,
+              content: k.create_react_app_typescript_starter.package_json,
               isBinary: false,
             },
           },
-          template: "create-react-app-typescript",
+          template: k.create_react_app_typescript_starter.template as any,
         }}
         width={props.width}
         height={props.height}
diff --git a/packages/builder-web-nodejs/index.ts b/packages/builder-web-nodejs/index.ts
index 68d10d3e..cce00394 100644
--- a/packages/builder-web-nodejs/index.ts
+++ b/packages/builder-web-nodejs/index.ts
@@ -1,6 +1,5 @@
 // the name "package" is reserved. using "packages" with "s" instead.
 export * as packages from "./package";
-export * as templates from "./templates";
 
 // no-repacking - already packed inside. export "standard_libraries"
 export * from "./stdlib";
diff --git a/packages/builder-web-nodejs/tsconfig.json b/packages/builder-web-nodejs/tsconfig.json
deleted file mode 100644
index d9f337a4..00000000
--- a/packages/builder-web-nodejs/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "esModuleInterop": true
-  }
-}
diff --git a/packages/builder-web-react/export/export-result/component.export-result.ts b/packages/builder-web-react/export-result/component.export-result.ts
similarity index 100%
rename from packages/builder-web-react/export/export-result/component.export-result.ts
rename to packages/builder-web-react/export-result/component.export-result.ts
diff --git a/packages/builder-web-react/export/export-result/index.ts b/packages/builder-web-react/export-result/index.ts
similarity index 100%
rename from packages/builder-web-react/export/export-result/index.ts
rename to packages/builder-web-react/export-result/index.ts
diff --git a/packages/builder-web-react/export/stringfy/css-in-jsx.ts b/packages/builder-web-react/export-string/css-in-jsx.ts
similarity index 100%
rename from packages/builder-web-react/export/stringfy/css-in-jsx.ts
rename to packages/builder-web-react/export-string/css-in-jsx.ts
diff --git a/packages/builder-web-react/export/stringfy/index.ts b/packages/builder-web-react/export-string/index.ts
similarity index 100%
rename from packages/builder-web-react/export/stringfy/index.ts
rename to packages/builder-web-react/export-string/index.ts
diff --git a/packages/builder-web-react/export/stringfy/styled-component.ts b/packages/builder-web-react/export-string/styled-component.ts
similarity index 98%
rename from packages/builder-web-react/export/stringfy/styled-component.ts
rename to packages/builder-web-react/export-string/styled-component.ts
index b4e82c1a..b1009cc9 100644
--- a/packages/builder-web-react/export/stringfy/styled-component.ts
+++ b/packages/builder-web-react/export-string/styled-component.ts
@@ -18,7 +18,7 @@ import {
   SourceFile,
   VariableDeclaration,
 } from "coli";
-import { react_imports } from "../../build-app/import-specifications";
+import { react_imports } from "../react-import-specifications";
 import { TextChildWidget, WidgetTree } from "@web-builder/core";
 import { ReactComponentExportResult } from "../export-result";
 import {
diff --git a/packages/builder-web-react/export/exportable/index.ts b/packages/builder-web-react/export/exportable/index.ts
deleted file mode 100644
index 22fd40c4..00000000
--- a/packages/builder-web-react/export/exportable/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * coli configurable ecportable object.
- * A snapshot object
- */
-export class ReactComponentExportable {
-  constructor() {}
-}
diff --git a/packages/builder-web-react/export/index.ts b/packages/builder-web-react/export/index.ts
deleted file mode 100644
index f4634beb..00000000
--- a/packages/builder-web-react/export/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./stringfy";
-export * from "./exportable";
diff --git a/packages/builder-web-react/index.ts b/packages/builder-web-react/index.ts
index 803e698b..11c4d9d0 100644
--- a/packages/builder-web-react/index.ts
+++ b/packages/builder-web-react/index.ts
@@ -1,3 +1,3 @@
 export * from "./widgets-native";
 export * from "./widgets-reflect-react";
-export * from "./export";
+export * from "./export-string";
diff --git a/packages/builder-web-react/build-app/import-specifications/index.ts b/packages/builder-web-react/react-import-specifications/index.ts
similarity index 100%
rename from packages/builder-web-react/build-app/import-specifications/index.ts
rename to packages/builder-web-react/react-import-specifications/index.ts
diff --git a/packages/builder-web-react/build-app/import-specifications/react-default.ts b/packages/builder-web-react/react-import-specifications/react-default.ts
similarity index 97%
rename from packages/builder-web-react/build-app/import-specifications/react-default.ts
rename to packages/builder-web-react/react-import-specifications/react-default.ts
index b9d55373..e215cfaf 100644
--- a/packages/builder-web-react/build-app/import-specifications/react-default.ts
+++ b/packages/builder-web-react/react-import-specifications/react-default.ts
@@ -2,7 +2,7 @@
 /// This contains default and fundamental imports required for using react library
 ///
 
-import { standard_libraries } from "../../../builder-web-nodejs";
+import { standard_libraries } from "../../builder-web-nodejs";
 import { Import } from "coli";
 
 /**
diff --git a/packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts b/packages/builder-web-react/react-import-specifications/with-emotion-styled.ts
similarity index 84%
rename from packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts
rename to packages/builder-web-react/react-import-specifications/with-emotion-styled.ts
index 52cbbcc8..6da9e67f 100644
--- a/packages/builder-web-react/build-app/import-specifications/with-emotion-styled.ts
+++ b/packages/builder-web-react/react-import-specifications/with-emotion-styled.ts
@@ -1,4 +1,4 @@
-import { standard_libraries } from "../../../builder-web-nodejs";
+import { standard_libraries } from "../../builder-web-nodejs";
 import { Import } from "coli";
 
 /**
diff --git a/packages/builder-web-react/build-app/import-specifications/with-styled-components.ts b/packages/builder-web-react/react-import-specifications/with-styled-components.ts
similarity index 85%
rename from packages/builder-web-react/build-app/import-specifications/with-styled-components.ts
rename to packages/builder-web-react/react-import-specifications/with-styled-components.ts
index 3b4da08a..33815a4c 100644
--- a/packages/builder-web-react/build-app/import-specifications/with-styled-components.ts
+++ b/packages/builder-web-react/react-import-specifications/with-styled-components.ts
@@ -1,4 +1,4 @@
-import { standard_libraries } from "../../../builder-web-nodejs";
+import { standard_libraries } from "../../builder-web-nodejs";
 import { Import } from "coli";
 
 /**
diff --git a/packages/builder-web-react/build-app/index.ts b/packages/builder-web-react/react-project/index.ts
similarity index 90%
rename from packages/builder-web-react/build-app/index.ts
rename to packages/builder-web-react/react-project/index.ts
index 693d9a85..ddcbc9d6 100644
--- a/packages/builder-web-react/build-app/index.ts
+++ b/packages/builder-web-react/react-project/index.ts
@@ -1,6 +1,6 @@
 import { Widget } from "@web-builder/core";
-import { standard_libraries, templates } from "@coli.codes/nodejs-builder";
-
+import { standard_libraries } from "@coli.codes/nodejs-builder";
+import * as templates from "../templates";
 /**
  * builds create-react-app wrapped react app.
  *
diff --git a/packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts b/packages/builder-web-react/templates/create-react-app-typescript/index.ts
similarity index 92%
rename from packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts
rename to packages/builder-web-react/templates/create-react-app-typescript/index.ts
index de71ad2d..05d82cdb 100644
--- a/packages/builder-web-nodejs/templates/create-react-app-typescript/index.ts
+++ b/packages/builder-web-react/templates/create-react-app-typescript/index.ts
@@ -1,4 +1,4 @@
-import { PackageManifest } from "../../package/manifest";
+import { PackageManifest } from "../../../builder-web-nodejs/package/manifest";
 
 /**
  * ```
diff --git a/packages/builder-web-nodejs/templates/index.ts b/packages/builder-web-react/templates/index.ts
similarity index 100%
rename from packages/builder-web-nodejs/templates/index.ts
rename to packages/builder-web-react/templates/index.ts
diff --git a/packages/builder-web-styled-components/styled-component-declaration.ts b/packages/builder-web-styled-components/styled-component-declaration.ts
index 12fa9173..0b373956 100644
--- a/packages/builder-web-styled-components/styled-component-declaration.ts
+++ b/packages/builder-web-styled-components/styled-component-declaration.ts
@@ -15,7 +15,7 @@ import {
 } from "@coli.codes/naming";
 import { CSSProperties, buildCssStandard } from "@coli.codes/css";
 import { handle } from "@coli.codes/builder";
-import { formatStyledTempplateString } from "./formatter";
+import { formatStyledTempplateString } from "./styled-variable-formatter";
 
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
diff --git a/packages/builder-web-styled-components/formatter.ts b/packages/builder-web-styled-components/styled-variable-formatter.ts
similarity index 95%
rename from packages/builder-web-styled-components/formatter.ts
rename to packages/builder-web-styled-components/styled-variable-formatter.ts
index 09be5b42..43353e96 100644
--- a/packages/builder-web-styled-components/formatter.ts
+++ b/packages/builder-web-styled-components/styled-variable-formatter.ts
@@ -6,7 +6,7 @@
 /**
  * from
  * ```
- * `
+ * styled.span`
  * color: white;
  * width: 24px;
  * `
@@ -14,7 +14,7 @@
  *
  * to
  * ```
- * `
+ * styled.span`
  *  color: white;
  *  width: 24px;
  * `
diff --git a/packages/designto-react/app/index.ts b/packages/designto-react/app/index.ts
new file mode 100644
index 00000000..98183081
--- /dev/null
+++ b/packages/designto-react/app/index.ts
@@ -0,0 +1,27 @@
+import { Widget } from "@reflect-ui/core";
+import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
+import {
+  WidgetTree,
+  stringfyReactWidget_STYLED_COMPONENTS,
+} from "@web-builder/react";
+import { react as config } from "@designto/config";
+
+export function buildReactApp(
+  widget: WidgetTree,
+  options: { template: "cra" | "nextjs" }
+): config.ReactComponentOutput {
+  const res = stringfyReactWidget_STYLED_COMPONENTS(widget);
+  return {
+    id: widget.key.id,
+    name: widget.key.name,
+    code: { raw: res.code },
+    scaffold: { raw: res.code },
+  };
+}
+
+export function buildReactWidget(widget: Widget) {
+  if (!widget) {
+    throw "A valid reflect widget manifest should be passed as an input. none was passed.";
+  }
+  return buildWebWidgetFromTokens(widget);
+}
diff --git a/packages/designto-react/index.ts b/packages/designto-react/index.ts
index 98183081..e9937274 100644
--- a/packages/designto-react/index.ts
+++ b/packages/designto-react/index.ts
@@ -1,27 +1,2 @@
-import { Widget } from "@reflect-ui/core";
-import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
-import {
-  WidgetTree,
-  stringfyReactWidget_STYLED_COMPONENTS,
-} from "@web-builder/react";
-import { react as config } from "@designto/config";
-
-export function buildReactApp(
-  widget: WidgetTree,
-  options: { template: "cra" | "nextjs" }
-): config.ReactComponentOutput {
-  const res = stringfyReactWidget_STYLED_COMPONENTS(widget);
-  return {
-    id: widget.key.id,
-    name: widget.key.name,
-    code: { raw: res.code },
-    scaffold: { raw: res.code },
-  };
-}
-
-export function buildReactWidget(widget: Widget) {
-  if (!widget) {
-    throw "A valid reflect widget manifest should be passed as an input. none was passed.";
-  }
-  return buildWebWidgetFromTokens(widget);
-}
+export * from "./app";
+export * as k from "./k";
diff --git a/packages/designto-react/k/csb-template.ts b/packages/designto-react/k/csb-template.ts
new file mode 100644
index 00000000..9901069e
--- /dev/null
+++ b/packages/designto-react/k/csb-template.ts
@@ -0,0 +1,64 @@
+export const create_react_app_typescript_starter = {
+  template: "create-react-app-typescript",
+  package_json: `{
+  "name": "@made-with-grida/react-typescript",
+  "version": "1.0.0",
+  "description": "React and TypeScript example starter project",
+  "keywords": [
+    "typescript",
+    "react",
+    "starter"
+  ],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}`,
+
+  tsconfig_json: `{
+    "include": [
+        "./src/**/*"
+    ],
+    "compilerOptions": {
+        "strict": true,
+        "esModuleInterop": true,
+        "lib": [
+            "dom",
+            "es2015"
+        ],
+        "jsx": "react-jsx"
+    }
+}`,
+
+  index_tsx: (component_name: string) => `import React from "react";
+import { render } from "react-dom";
+
+import ${component_name} from "./App";
+
+const rootElement = document.getElementById("root");
+render(<${component_name} />, rootElement);
+`,
+
+  app_tsx: (content: string) => content,
+};
diff --git a/packages/designto-react/k/index.ts b/packages/designto-react/k/index.ts
new file mode 100644
index 00000000..7ce82920
--- /dev/null
+++ b/packages/designto-react/k/index.ts
@@ -0,0 +1 @@
+export * from "./csb-template";
diff --git a/packages/designto-react/react-package-json-make/index.ts b/packages/designto-react/react-package-json-make/index.ts
new file mode 100644
index 00000000..2ec5cb41
--- /dev/null
+++ b/packages/designto-react/react-package-json-make/index.ts
@@ -0,0 +1,43 @@
+// "@emotion/react": "^11.1.5",
+// "@emotion/styled": "^11.1.5"
+
+export function make_create_react_app_typescript_package_json({
+  name = "src/index.tsx",
+  description = "React and TypeScript example starter project",
+  main,
+  dependencies = {},
+}: {
+  name: string;
+  description?: string;
+  main: string;
+  dependencies?: {
+    [key: string]: string;
+  };
+}) {
+  const package_json = {
+    name: `@made-with-grida/${name}`,
+    version: "0.0.0",
+    description: description,
+    keywords: ["grida", "design to code", "made with grida"],
+    main: main,
+    dependencies: {
+      react: "17.0.2",
+      "react-dom": "17.0.2",
+      "react-scripts": "4.0.0",
+      ...dependencies,
+    },
+    devDependencies: {
+      "@types/react": "17.0.0",
+      "@types/react-dom": "17.0.0",
+      typescript: "4.1.3",
+    },
+    scripts: {
+      start: "react-scripts start",
+      build: "react-scripts build",
+      test: "react-scripts test --env=jsdom",
+      eject: "react-scripts eject",
+    },
+    browserslist: [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
+  };
+  return JSON.stringify(package_json, null, 2);
+}

From 0683b6b4801568f9d5ebdb542807528b67b71eca Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 03:45:41 +0900
Subject: [PATCH 13/14] sanitize react builder structure (2/2)

---
 packages/builder-web-react/export-string/index.ts             | 2 --
 packages/builder-web-react/index.ts                           | 4 +++-
 .../{export-string => react-css-in-js-widget}/css-in-jsx.ts   | 0
 packages/builder-web-react/react-css-in-js-widget/index.ts    | 1 +
 .../index.ts}                                                 | 0
 5 files changed, 4 insertions(+), 3 deletions(-)
 delete mode 100644 packages/builder-web-react/export-string/index.ts
 rename packages/builder-web-react/{export-string => react-css-in-js-widget}/css-in-jsx.ts (100%)
 create mode 100644 packages/builder-web-react/react-css-in-js-widget/index.ts
 rename packages/builder-web-react/{export-string/styled-component.ts => react-styled-component-widget/index.ts} (100%)

diff --git a/packages/builder-web-react/export-string/index.ts b/packages/builder-web-react/export-string/index.ts
deleted file mode 100644
index b850b194..00000000
--- a/packages/builder-web-react/export-string/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./css-in-jsx";
-export * from "./styled-component";
diff --git a/packages/builder-web-react/index.ts b/packages/builder-web-react/index.ts
index 11c4d9d0..044c6b5b 100644
--- a/packages/builder-web-react/index.ts
+++ b/packages/builder-web-react/index.ts
@@ -1,3 +1,5 @@
+export * from "./react-styled-component-widget";
+export * from "./react-import-specifications";
+export * from "./react-project";
 export * from "./widgets-native";
 export * from "./widgets-reflect-react";
-export * from "./export-string";
diff --git a/packages/builder-web-react/export-string/css-in-jsx.ts b/packages/builder-web-react/react-css-in-js-widget/css-in-jsx.ts
similarity index 100%
rename from packages/builder-web-react/export-string/css-in-jsx.ts
rename to packages/builder-web-react/react-css-in-js-widget/css-in-jsx.ts
diff --git a/packages/builder-web-react/react-css-in-js-widget/index.ts b/packages/builder-web-react/react-css-in-js-widget/index.ts
new file mode 100644
index 00000000..249bddb7
--- /dev/null
+++ b/packages/builder-web-react/react-css-in-js-widget/index.ts
@@ -0,0 +1 @@
+export * from "./css-in-jsx";
diff --git a/packages/builder-web-react/export-string/styled-component.ts b/packages/builder-web-react/react-styled-component-widget/index.ts
similarity index 100%
rename from packages/builder-web-react/export-string/styled-component.ts
rename to packages/builder-web-react/react-styled-component-widget/index.ts

From 2386cb9630756c89cd7ef5ffe331076243dbe980 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 9 Oct 2021 04:37:24 +0900
Subject: [PATCH 14/14] add react component exporting utility functions

---
 .../react-component-exporting/index.ts        | 35 +++++++++++++++++++
 .../index.ts                                  |  3 ++
 .../react-styled-component-widget/index.ts    |  5 ++-
 packages/coli                                 |  2 +-
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder-web-react/react-component-exporting/index.ts
 create mode 100644 packages/builder-web-react/react-functional-component-declaration/index.ts

diff --git a/packages/builder-web-react/react-component-exporting/index.ts b/packages/builder-web-react/react-component-exporting/index.ts
new file mode 100644
index 00000000..549f2165
--- /dev/null
+++ b/packages/builder-web-react/react-component-exporting/index.ts
@@ -0,0 +1,35 @@
+import { SyntaxKind } from "@coli.codes/core-syntax-kind";
+import {
+  ExportAssignment,
+  FunctionDeclaration,
+  Identifier,
+  VariableDeclaration,
+  VariableStatement,
+} from "coli";
+
+export function add_export_keyword_modifier_to_declaration(
+  declaration: FunctionDeclaration | VariableDeclaration | VariableStatement
+): FunctionDeclaration | VariableStatement {
+  if (declaration instanceof FunctionDeclaration) {
+    declaration.modifiers.export = SyntaxKind.ExportKeyword;
+    return declaration;
+  }
+  if (declaration instanceof VariableDeclaration) {
+    return new VariableStatement({
+      kind: declaration.kind,
+      modifiers: { export: SyntaxKind.ExportKeyword },
+      declarations: [declaration],
+    });
+  }
+
+  if (declaration instanceof VariableStatement) {
+    declaration.modifiers.export = SyntaxKind.ExportKeyword;
+    return declaration;
+  }
+}
+
+export function wrap_with_export_assignment_react_component_identifier(
+  id: Identifier
+) {
+  return new ExportAssignment(id);
+}
diff --git a/packages/builder-web-react/react-functional-component-declaration/index.ts b/packages/builder-web-react/react-functional-component-declaration/index.ts
new file mode 100644
index 00000000..146caf46
--- /dev/null
+++ b/packages/builder-web-react/react-functional-component-declaration/index.ts
@@ -0,0 +1,3 @@
+export function react_functional_component_declaration() {
+  //
+}
diff --git a/packages/builder-web-react/react-styled-component-widget/index.ts b/packages/builder-web-react/react-styled-component-widget/index.ts
index b1009cc9..d5defd1f 100644
--- a/packages/builder-web-react/react-styled-component-widget/index.ts
+++ b/packages/builder-web-react/react-styled-component-widget/index.ts
@@ -26,6 +26,7 @@ import {
   getWidgetStylesConfigMap,
   WidgetStyleConfigMap,
 } from "@web-builder/core/builders";
+import { wrap_with_export_assignment_react_component_identifier } from "../react-component-exporting";
 
 const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import()
   .importDefault("styled")
@@ -157,7 +158,9 @@ function buildReactComponentFile(p: {
   file.imports(...imports);
   file.declare(component);
   file.declare(...styleVariables);
-  file.export(new ExportAssignment(component.id));
+  file.export(
+    wrap_with_export_assignment_react_component_identifier(component.id)
+  );
 
   return file;
 }
diff --git a/packages/coli b/packages/coli
index bbc88e4d..519de9d7 160000
--- a/packages/coli
+++ b/packages/coli
@@ -1 +1 @@
-Subproject commit bbc88e4d1232e955bc16ab827f47b9c1140ee648
+Subproject commit 519de9d7ebe17cd7b5d0f97d966ee5f239434edd
