[Archived] Preact support (based on React support)

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/config/scripting-enabled-frameworks.ts

@@ -29,6 +29,11 @@ export const scripting_and_preview_framework_config: {
     nativeScripting: false,
     enabled: false,
   },
+  preact: {
+    nativePreview: true,
+    nativeScripting: true,
+    enabled: true,
+  },
   flutter: {
     nativePreview: false,
     nativeScripting: false,
@@ -39,6 +44,7 @@ export const scripting_and_preview_framework_config: {
     nativeScripting: false,
     enabled: false,
   },
+
   preview: null,
 } as const;
 

editor/next.config.js

@@ -21,6 +21,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/vanilla",
   "@designto/react",
   "@designto/react-native",
+  "@designto/preact",
 
   "@code-features/assets",
   "@code-features/module",
@@ -50,6 +51,7 @@ const withTM = require("next-transpile-modules")([
   "@web-builder/react-core",
   "@web-builder/react",
   "@web-builder/react-native",
+  "@web-builder/preact",
   "@web-builder/reflect-ui",
   "@web-builder/styled",
   "@web-builder/styles",

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-config/framework-preact/index.ts

@@ -0,0 +1,6 @@
+export * from "./preact-config";
+export * from "./preact-config-component-syntax";
+export * from "./preact-config-exporting-component";
+export * from "./preact-config-functional-component-declaration";
+export * from "./preact-config-styling";
+export * from "./preact-output";

packages/builder-config/framework-preact/preact-config-component-syntax.ts

@@ -0,0 +1,3 @@
+import type { ReactComponentSyntax } from "../framework-react";
+
+export type PreactComponentSyntax = ReactComponentSyntax;

packages/builder-config/framework-preact/preact-config-exporting-component.ts

@@ -0,0 +1,2 @@
+import type { ReactComponentExportingCofnig } from "../framework-react";
+export type PreactComponentExportingCofnig = ReactComponentExportingCofnig;

packages/builder-config/framework-preact/preact-config-functional-component-declaration.ts

@@ -0,0 +1,4 @@
+import type { ReactFunctionalComponentDeclarationConfig } from "../framework-react";
+
+export type PreactFunctionalComponentDeclarationConfig =
+  ReactFunctionalComponentDeclarationConfig;

packages/builder-config/framework-preact/preact-config-styling.ts

@@ -0,0 +1,17 @@
+import type {
+  ReactStylingStrategy,
+  ReactStyledComponentsConfig,
+  ReactNormalCssConfig,
+  ReactInlineCssConfig,
+  ReactCssModuleConfig,
+} from "../framework-react";
+
+export type PreactStylingStrategy = ReactStylingStrategy;
+
+export type PreactStyledComponentsConfig = ReactStyledComponentsConfig;
+
+export type PreactNormalCssConfig = ReactNormalCssConfig;
+
+export type PreactInlineCssConfig = ReactInlineCssConfig;
+
+export type PreactCssModuleConfig = ReactCssModuleConfig;

packages/builder-config/framework-preact/preact-config.ts

@@ -0,0 +1,18 @@
+import type { Language } from "@grida/builder-platform-types";
+import type { ReactFrameworkConfig } from "../framework-react";
+import type { JsxModuleConfig } from "../module-jsx/jsx-config";
+import type { PreactComponentExportingCofnig } from "./preact-config-exporting-component";
+import type { PreactFunctionalComponentDeclarationConfig } from "./preact-config-functional-component-declaration";
+import type { PreactStylingStrategy } from "./preact-config-styling";
+
+export interface PreactFrameworkConfig
+  extends JsxModuleConfig,
+    Omit<ReactFrameworkConfig, "framework"> {
+  framework: "preact";
+  language: Language.jsx | Language.tsx;
+  styling: PreactStylingStrategy;
+  component_declaration_style: {
+    exporting_style: PreactComponentExportingCofnig;
+    declaration_style?: PreactFunctionalComponentDeclarationConfig;
+  };
+}

packages/builder-config/framework-preact/preact-output.ts

@@ -0,0 +1,3 @@
+import type { ReactComponentOutput } from "../framework-react";
+
+export interface PreactComponentOutput extends ReactComponentOutput {}