add preact build support (codegen)

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

@@ -24,6 +24,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/vanilla",
   "@designto/react",
   "@designto/react-native",
+  "@designto/preact",
 
   "@code-features/assets",
   "@code-features/component",
@@ -93,6 +94,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",

packages/builder-web-preact/index.ts

@@ -1,4 +1,4 @@
-export { finalizeReactWidget_CssModule } from "./preact-css-module-widget";
+export { finalizePreactWidget_CssModule } from "./preact-css-module-widget";
 export { finalizePreactWidget_InlineCss } from "./preact-inline-css-widget";
 export { finalizePreactWidget_StyledComponents } from "./preact-styled-component-widget";
 export { preact_imports } from "./preact-import-specifications";

packages/builder-web-preact/preact-css-module-widget/from-static-widget-tree.ts

@@ -6,7 +6,7 @@ import { PreactCssModuleBuilder } from "./preact-css-module-module-builder";
 /**
  * css-module pattern with
  */
-export function finalizeReactWidget_CssModule(
+export function finalizePreactWidget_CssModule(
   entry: JsxWidget,
   {
     styling,

packages/builder-web-preact/preact-css-module-widget/index.ts

@@ -1 +1 @@
-export { finalizeReactWidget_CssModule } from "./from-static-widget-tree";
+export { finalizePreactWidget_CssModule } from "./from-static-widget-tree";

packages/designto-code/preact/index.ts

@@ -0,0 +1 @@
+export * from "@designto/preact";

packages/designto-code/solid-js/index.ts

@@ -0,0 +1 @@
+export * from "@designto/solid-js";

packages/designto-code/universal/design-to-code.ts

@@ -2,6 +2,7 @@ import { input, output, config, build } from "../proc";
 import { tokenize, wrap } from "@designto/token";
 import { Widget } from "@reflect-ui/core";
 import * as toReact from "@designto/react";
+import * as toPreact from "@designto/preact";
 import * as toSolid from "@designto/solid-js";
 import * as toReactNative from "@designto/react-native";
 import * as toVanilla from "@designto/vanilla";
@@ -154,6 +155,17 @@ export async function designToCode({
         })),
         ..._extend_result,
       };
+    case "preact": {
+      return {
+        ...(await designToPreact({
+          input: _tokenized_widget_input,
+          build_config: build_config,
+          preact_config: framework_config,
+          asset_config: asset_config,
+        })),
+        ..._extend_result,
+      };
+    }
     case "flutter":
       return {
         ...(await designToFlutter({
@@ -185,6 +197,8 @@ export async function designToCode({
 export const designTo = {
   react: designToReact,
   reactnative: designToReactNative,
+  preact: designToPreact,
+  solid: designToSolid,
   vue: designToVue,
   flutter: designToFlutter,
 };
@@ -268,6 +282,25 @@ export async function designToReactNative({
   // };
 }
 
+export async function designToPreact({
+  input,
+  preact_config,
+  build_config,
+  asset_config,
+}: {
+  input: { widget: Widget; reusable_widget_tree? };
+  preact_config: config.PreactFrameworkConfig;
+  /**
+   * TODO: pass this to tokenizer +@
+   */
+  build_config: config.BuildConfiguration;
+  asset_config?: AssetsConfig;
+}): Promise<output.ICodeOutput> {
+  const preactWidget = toPreact.buildPreactWidget(input.widget);
+  const res = toPreact.buildPreactApp(preactWidget, preact_config);
+  return res;
+}
+
 export async function designToFlutter({
   input,
   asset_config,

packages/designto-preact/app/index.ts

@@ -0,0 +1,67 @@
+import { Widget } from "@reflect-ui/core";
+import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
+import {
+  finalizePreactWidget_StyledComponents,
+  finalizePreactWidget_InlineCss,
+  finalizePreactWidget_CssModule,
+} from "@web-builder/preact";
+import { preact as config, preact } from "@designto/config";
+import type { JsxWidget } from "@web-builder/core";
+import assert from "assert";
+export function buildPreactApp(
+  entry: JsxWidget,
+  config: preact.PreactFrameworkConfig
+): config.PreactComponentOutput {
+  switch (config.styling.type) {
+    case "styled-components": {
+      const res = finalizePreactWidget_StyledComponents(entry, {
+        styling: config.styling,
+        exporting: config.component_declaration_style.exporting_style,
+      });
+      return {
+        id: entry.key.id,
+        name: entry.key.name,
+        code: { raw: res.code },
+        scaffold: { raw: res.code },
+      };
+    }
+    case "inline-css": {
+      const res = finalizePreactWidget_InlineCss(entry, {
+        styling: config.styling,
+        exporting: config.component_declaration_style.exporting_style,
+      });
+      return {
+        id: entry.key.id,
+        name: entry.key.name,
+        code: { raw: res.code },
+        scaffold: { raw: res.code },
+      };
+    }
+    case "css-module": {
+      const res = finalizePreactWidget_CssModule(entry, {
+        styling: config.styling,
+        exporting: config.component_declaration_style.exporting_style,
+      });
+      return {
+        id: entry.key.id,
+        name: entry.key.name,
+        code: { raw: res.code },
+        scaffold: { raw: res.code },
+      };
+    }
+    case "css":
+    default: {
+      throw new Error(`${config.styling.type} not supported yet`);
+      break;
+    }
+  }
+}
+
+export function buildPreactWidget(widget: Widget) {
+  assert(
+    widget instanceof Widget,
+    "A valid reflect widget manifest should be passed as an input. none was passed."
+  );
+
+  return buildWebWidgetFromTokens(widget, {});
+}

packages/designto-preact/index.ts

@@ -0,0 +1 @@
+export * from "./app";