add preact support

Author: softmarshmallow

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -92,6 +92,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "flutter_default",
         description: "flutter",
       },
+      {
+        name: "Preact",
+        value: "preact_default",
+        description: "preact",
+      },
       {
         name: "Vanilla",
         value: "vanilla_default",
@@ -171,6 +176,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
 
   const fields_config = {
     react: [platform_field_config, lang_field_config, react_style_field_config],
+    preact: [
+      platform_field_config,
+      lang_field_config,
+      react_style_field_config,
+    ],
     "react-native": [platform_field_config, lang_field_config],
     "solid-js": [platform_field_config, lang_field_config],
     flutter: [platform_field_config, lang_field_config],

editor/components/codeui-code-options-control/framework-options.ts

@@ -24,6 +24,8 @@ export type SolidStylingStrategy =
   | "styled-components"
   | "inline-css";
 
+export type PreactStylingStrategy = ReactStylingStrategy;
+
 export interface FlutterOption {
   framework: Framework.flutter;
   language: Language.dart;
@@ -47,6 +49,12 @@ export interface SolidOption {
   styling: SolidStylingStrategy;
 }
 
+export interface PreactOption {
+  framework: Framework.preact;
+  language: Language.jsx | Language.tsx;
+  styling: PreactStylingStrategy;
+}
+
 export interface VanillaOption {
   framework: Framework.vanilla;
   language: Language.html;
@@ -55,8 +63,9 @@ export interface VanillaOption {
 export type FrameworkOption =
   | ReactOption
   | ReactNativeOption
-  | FlutterOption
+  | PreactOption
   | SolidOption
+  | FlutterOption
   | VanillaOption;
 
 export const react_presets = {
@@ -130,6 +139,34 @@ export const solid_presets = {
   },
 };
 
+export const preact_presets = {
+  default: <PreactOption>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  with_styled_components: <PreactOption>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  with_inline_css: <PreactOption>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: "inline-css",
+  },
+  with_css_module: <PreactOption>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: "css-module",
+  },
+  with_css: <PreactOption>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: "css",
+  },
+};
+
 export const vanilla_presets = {
   vanilla_default: <VanillaOption>{
     framework: Framework.vanilla,
@@ -166,6 +203,11 @@ export const all_preset_options_map__prod = {
   react_with_styled_components: react_presets.react_with_styled_components,
   react_with_inline_css: react_presets.react_with_inline_css,
   react_with_css_module: react_presets.react_with_css_module,
+  preact: preact_presets.default,
+  preact_default: preact_presets.default,
+  preact_with_styled_components: preact_presets.with_styled_components,
+  preact_with_inline_css: preact_presets.with_inline_css,
+  preact_with_css_module: preact_presets.with_css_module,
   "react-native": reactnative_presets.reactnative_default,
   reactnative: reactnative_presets.reactnative_default,
   reactnative_default: reactnative_presets.reactnative_default,
@@ -186,6 +228,7 @@ export const lang_by_framework = {
   flutter: [Language.dart],
   react: [Language.jsx, Language.tsx],
   "react-native": [Language.jsx, Language.tsx],
+  preact: [Language.jsx, Language.tsx],
   "solid-js": [Language.jsx, Language.tsx],
   vanilla: [Language.html],
 };
@@ -197,6 +240,8 @@ export const react_styles: ReactStylingStrategy[] = [
   "css",
 ];
 
+export const preact_styles: PreactStylingStrategy[] = react_styles;
+
 export const getpreset = (preset_name: string): FrameworkOption => {
   const _p = all_preset_options_map__prod[preset_name];
   if (_p) {
@@ -213,6 +258,10 @@ export const getDefaultPresetNameByFramework = (frameowrk: Framework) => {
       return "react_default";
     case Framework.reactnative:
       return "reactnative_default";
+    case Framework.solid:
+      return "solid_default";
+    case Framework.preact:
+      return "default";
     case Framework.vanilla:
       return "vanilla_default";
   }

editor/query/to-code-options-from-query.ts

@@ -3,6 +3,7 @@ import {
   reactnative_presets,
   flutter_presets,
   vanilla_presets,
+  preact_presets,
   solid_presets,
 } from "@grida/builder-config-preset";
 import { ParsedUrlQuery } from "querystring";
@@ -26,6 +27,7 @@ export function get_framework_config_from_query(query: ParsedUrlQuery) {
 
 export function get_framework_config(framework: string) {
   switch (framework) {
+    // react
     case "react":
     case "react_default":
     case "react-default":
@@ -42,6 +44,7 @@ export function get_framework_config(framework: string) {
     case "react_with_css_module":
     case "react-with-css-module":
       return react_presets.react_with_css_module;
+    // react-native
     case "react-native":
       return reactnative_presets.reactnative_default;
     case "react-native-with-style-sheet":
@@ -50,16 +53,36 @@ export function get_framework_config(framework: string) {
       return reactnative_presets.reactnative_with_styled_components;
     case "react-native-with-inline-style":
       return reactnative_presets.reactnative_with_inline_style;
+    // preact
+    case "preact":
+    case "preact_default":
+    case "preact-default":
+    case "preact.default":
+      return preact_presets.default;
+    case "preact-with-styled-components":
+    case "preact_with_styled_components":
+      return preact_presets.with_styled_components;
+    case "preact-with-emotion-styled":
+      return preact_presets.with_emotion_styled;
+    case "preact_with_inline_css":
+    case "preact-with-inline-css":
+      return preact_presets.with_inline_css;
+    case "preact_with_css_module":
+    case "preact-with-css-module":
+      return preact_presets.with_css_module;
+    // solid-js
     case "solid_with_styled_components":
     case "solid-with-styled-components":
       return solid_presets.solid_with_styled_components;
     case "solid_with_inline_css":
     case "solid-with-inline-css":
       return solid_presets.solid_with_inline_css;
+    // flutter
     case "flutter_default":
     case "flutter-default":
     case "flutter.default":
       return flutter_presets.flutter_default;
+    // vanilla
     case "vanilla":
     case "vanilla-default":
     case "vanilla.default":

editor/scaffolds/code/index.tsx

@@ -174,6 +174,23 @@ export function CodeSegment() {
               }
               break;
             }
+            case "preact": {
+              switch (o.styling) {
+                case "styled-components":
+                  c = get_framework_config("preact-with-styled-components");
+                  break;
+                case "inline-css":
+                  c = get_framework_config("preact-with-inline-css");
+                  break;
+                case "css-module":
+                  c = get_framework_config("preact-with-css-module");
+                  break;
+                case "css":
+                  // TODO:
+                  break;
+              }
+              break;
+            }
             case "solid-js": {
               switch (o.styling) {
                 case "styled-components":

packages/builder-config-preset/index.ts

@@ -111,6 +111,61 @@ export const reactnative_presets = {
   },
 };
 
+export const preact_presets = {
+  default: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "@emotion/styled",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  with_styled_components: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "styled-components",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  with_emotion_styled: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "@emotion/styled",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  with_inline_css: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: {
+      type: "inline-css",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  with_css_module: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: {
+      type: "css-module",
+      lang: "css",
+      importDefault: "styles",
+      loader: "css-loader",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  with_css: <config.PreactFrameworkConfig>{
+    framework: Framework.preact,
+    language: Language.tsx,
+    styling: { type: "css" },
+  },
+  component_declaration_style: _jsx_component_declaration_style,
+};
+
 export const solid_presets = {
   solid_with_styled_components: <config.SolidFrameworkConfig>{
     framework: Framework.solid,
@@ -177,6 +232,7 @@ export const all_preset_options__prod = [
   flutter_presets.flutter_default,
   react_presets.react_default,
   react_presets.react_with_styled_components,
+  preact_presets.default,
   vanilla_presets.vanilla_default,
   // react_with_css_in_jsx // NOT ON PRODUCTION
   // react_with_css // NOT ON PRODUCTION

packages/builder-platform-types/ui-frameworks/index.ts

@@ -1,6 +1,7 @@
 export enum Framework {
   react = "react",
   reactnative = "react-native",
+  preact = "preact",
   flutter = "flutter",
   vanilla = "vanilla",
   solid = "solid-js",