Initial SolidJS support - with styled components

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

@@ -77,6 +77,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "reactnative_with_inline_style",
         description: "with inline-style",
       },
+      {
+        name: "Solid",
+        value: "solid_default",
+        description: "solid-js",
+      },
       {
         name: "Flutter",
         value: "flutter_default",
@@ -162,6 +167,7 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
   const fields_config = {
     react: [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],
     vanilla: [platform_field_config, lang_field_config],
   };

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

@@ -18,6 +18,12 @@ export type ReactNativeStylingStrategy =
   | "styled-components"
   | "inline-style";
 
+export type SolidStylingStrategy =
+  | "css"
+  //
+  | "styled-components"
+  | "inline-css";
+
 export interface FlutterOption {
   framework: Framework.flutter;
   language: Language.dart;
@@ -35,6 +41,12 @@ export interface ReactNativeOption {
   styling: ReactNativeStylingStrategy;
 }
 
+export interface SolidOption {
+  framework: Framework.solid;
+  language: Language.jsx | Language.tsx;
+  styling: SolidStylingStrategy;
+}
+
 export interface VanillaOption {
   framework: Framework.vanilla;
   language: Language.html;
@@ -44,6 +56,7 @@ export type FrameworkOption =
   | ReactOption
   | ReactNativeOption
   | FlutterOption
+  | SolidOption
   | VanillaOption;
 
 export const react_presets = {
@@ -99,6 +112,24 @@ export const flutter_presets = {
   },
 };
 
+export const solid_presets = {
+  solid_default: <SolidOption>{
+    framework: Framework.solid,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  solid_with_styled_components: <SolidOption>{
+    framework: Framework.solid,
+    language: Language.tsx,
+    styling: "styled-components",
+  },
+  solid_with_inline_css: <SolidOption>{
+    framework: Framework.solid,
+    language: Language.tsx,
+    styling: "inline-css",
+  },
+};
+
 export const vanilla_presets = {
   vanilla_default: <VanillaOption>{
     framework: Framework.vanilla,
@@ -111,6 +142,7 @@ export const presets = {
   reactnative: reactnative_presets,
   flutter: flutter_presets,
   vanilla: vanilla_presets,
+  solid: solid_presets,
 };
 
 export const all_preset_options__prod = [
@@ -121,6 +153,7 @@ export const all_preset_options__prod = [
   react_presets.react_with_css_module,
   reactnative_presets.reactnative_default,
   vanilla_presets.vanilla_default,
+  solid_presets.solid_default,
   // react_with_css // NOT ON PRODUCTION
 ];
 
@@ -133,19 +166,27 @@ 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,
+  "react-native": reactnative_presets.reactnative_default,
+  reactnative: reactnative_presets.reactnative_default,
   reactnative_default: reactnative_presets.reactnative_default,
   reactnative_with_styled_components:
     reactnative_presets.reactnative_with_styled_components,
   reactnative_with_inline_style:
     reactnative_presets.reactnative_with_inline_style,
+  vanilla: vanilla_presets.vanilla_default,
   vanilla_default: vanilla_presets.vanilla_default,
+  solid: solid_presets.solid_default,
+  solid_default: solid_presets.solid_default,
+  solid_with_inline_css: solid_presets.solid_with_inline_css,
+  solid_with_styled_components: solid_presets.solid_with_styled_components,
   // react_with_css // NOT ON PRODUCTION
 };
 
 export const lang_by_framework = {
   flutter: [Language.dart],
   react: [Language.jsx, Language.tsx],
   "react-native": [Language.jsx, Language.tsx],
+  "solid-js": [Language.jsx, Language.tsx],
   vanilla: [Language.html],
 };
 

editor/config/scripting-enabled-frameworks.ts

@@ -34,6 +34,11 @@ export const scripting_and_preview_framework_config: {
     nativeScripting: false,
     enabled: false,
   },
+  "solid-js": {
+    nativePreview: false,
+    nativeScripting: false,
+    enabled: false,
+  },
   preview: null,
 } as const;
 

editor/next.config.js

@@ -19,6 +19,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/sanitized",
   "@designto/token",
   "@designto/flutter",
+  "@designto/solid-js",
   "@designto/web",
   "@designto/vanilla",
   "@designto/react",
@@ -85,6 +86,8 @@ const withTM = require("next-transpile-modules")([
   // region web builders
   "@web-builder/nodejs",
   "@web-builder/core",
+  "@web-builder/module-es",
+  "@web-builder/solid-js",
   "@web-builder/vanilla",
   "@web-builder/react-core",
   "@web-builder/react",

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

@@ -3,6 +3,7 @@ import {
   reactnative_presets,
   flutter_presets,
   vanilla_presets,
+  solid_presets,
 } from "@grida/builder-config-preset";
 import { ParsedUrlQuery } from "querystring";
 import { FrameworkConfig } from "@designto/config";
@@ -49,7 +50,9 @@ 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;
-    case "flutter":
+    case "solid_with_styled_components":
+    case "solid-with-styled-components":
+      return solid_presets.solid_with_styled_components;
     case "flutter_default":
     case "flutter-default":
     case "flutter.default":
@@ -59,6 +62,10 @@ export function get_framework_config(framework: string) {
     case "vanilla.default":
       return vanilla_presets.vanilla_default;
     default:
+      console.warn(
+        'no matching framework preset found for "' + framework + '"',
+        "fallback to react preset"
+      );
       return react_presets.react_default;
   }
 }

editor/scaffolds/code/index.tsx

@@ -174,6 +174,14 @@ export function CodeSegment() {
               }
               break;
             }
+            case "solid-js": {
+              switch (o.styling) {
+                case "styled-components":
+                  c = get_framework_config("solid-with-styled-components");
+                  break;
+              }
+              break;
+            }
             case "flutter":
               c = get_framework_config(o.framework);
               break;

packages/builder-config-preset/index.ts

@@ -1,7 +1,7 @@
 import { config, react } from "@designto/config";
 import { Framework, Language } from "@grida/builder-platform-types";
 
-const _react_component_declaration_style = {
+const _jsx_component_declaration_style = {
   exporting_style: {
     type: "export-named-functional-component",
     exporting_position: "with-declaration",
@@ -18,7 +18,7 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   react_with_styled_components: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -27,7 +27,7 @@ export const react_presets = {
       type: "styled-components",
       module: "styled-components",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   react_with_emotion_styled: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -36,15 +36,15 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   react_with_inline_css: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
     styling: {
       type: "inline-css",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   react_with_css_module: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -55,14 +55,14 @@ export const react_presets = {
       importDefault: "styles",
       loader: "css-loader",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   react_with_css: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
     styling: { type: "css" },
   },
-  component_declaration_style: _react_component_declaration_style,
+  component_declaration_style: _jsx_component_declaration_style,
 };
 
 export const reactnative_presets = {
@@ -75,7 +75,7 @@ export const reactnative_presets = {
       type: "react-native-stylesheet",
       module: "react-native",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   reactnative_with_style_sheet: <config.ReactNativeFrameworkConfig>{
     framework: Framework.reactnative,
@@ -86,7 +86,7 @@ export const reactnative_presets = {
       type: "react-native-stylesheet",
       module: "react-native",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   reactnative_with_styled_components: <config.ReactNativeFrameworkConfig>{
     framework: Framework.reactnative,
@@ -97,7 +97,7 @@ export const reactnative_presets = {
       type: "styled-components",
       module: "styled-components/native",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
   },
   reactnative_with_inline_style: <config.ReactNativeFrameworkConfig>{
     framework: Framework.reactnative,
@@ -107,7 +107,28 @@ export const reactnative_presets = {
     styling: {
       type: "inline-style",
     },
-    component_declaration_style: _react_component_declaration_style,
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+};
+
+export const solid_presets = {
+  solid_with_styled_components: <config.SolidFrameworkConfig>{
+    framework: Framework.solid,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "solid-styled-components",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
+  },
+  solid_default: <config.SolidFrameworkConfig>{
+    framework: Framework.solid,
+    language: Language.tsx,
+    styling: {
+      type: "styled-components",
+      module: "solid-styled-components",
+    },
+    component_declaration_style: _jsx_component_declaration_style,
   },
 };
 

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

@@ -1,18 +1,21 @@
 import type { Language } from "@grida/builder-platform-types";
 import type { ReactFrameworkConfig } from "../framework-react";
 import type { ReactNativeFrameworkConfig } from "../framework-reactnative";
+import type { SolidFrameworkConfig } from "../framework-solid";
 import type { VanillaFrameworkConfig } from "../framework-vanilla";
 import type { VanillaPreviewFrameworkConfig } from "../framework-vanilla-preview";
 
 export type FrameworkConfig =
   | ReactFrameworkConfig
   | ReactNativeFrameworkConfig
+  | SolidFrameworkConfig
   | FlutterFrameworkConfig
   | VanillaFrameworkConfig
   | VanillaPreviewFrameworkConfig;
 
 export type { ReactFrameworkConfig };
 export type { ReactNativeFrameworkConfig };
+export type { SolidFrameworkConfig };
 export type { VanillaFrameworkConfig };
 export type { VanillaPreviewFrameworkConfig };