add solid-js as a valid option input

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
 ];
 
@@ -142,13 +175,18 @@ export const all_preset_options_map__prod = {
     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/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

@@ -57,6 +57,7 @@ export function CodeSegment() {
   useEffect(() => {
     const __target = targetted;
     const __framework_config = framework_config;
+    console.log("__framework_config", __framework_config);
     if (__target && __framework_config) {
       if (!MainImageRepository.isReady) {
         // this is not the smartest way, but the image repo has a design flaw.
@@ -174,6 +175,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-platform-types/ui-frameworks/index.ts

@@ -3,4 +3,5 @@ export enum Framework {
   reactnative = "react-native",
   flutter = "flutter",
   vanilla = "vanilla",
+  solid = "solid-js",
 }

packages/builder-web-nodejs/stdlib/index.ts

@@ -9,14 +9,16 @@
 };
  * ```
  */
-export interface StandardLibraryManifest {
+export interface StandardLibraryManifest<
+  ALIAS extends {
+    [key: string]: { name: string };
+  } = any
+> {
   id: string;
   name: string;
   version: string;
   website: string;
-  alias?: {
-    [key: string]: string;
-  };
+  alias?: ALIAS;
 }
 
 /**
@@ -248,14 +250,17 @@ const MATERIAL_UI_STYLES: StandardLibraryManifest = {
  * last-update: Jun 2022
  * https://www.npmjs.com/package/solid-js
  */
-const SOLIDJS: StandardLibraryManifest = {
+const SOLIDJS: StandardLibraryManifest<{
+  web: { name: string };
+  store: { name: string };
+}> = {
   id: "solid-js",
   name: "solid-js",
   version: "1.4.4",
   website: "https://www.solidjs.com/",
   alias: {
-    web: "web",
-    store: "store",
+    web: { name: "solid-js/web" },
+    store: { name: "solid-js/store" },
   },
 };
 

packages/builder-web-solid/solid-import-specifications/solid-js-store.ts

@@ -7,5 +7,5 @@ import { Import } from "coli";
 
 export const import_createStore_from_solid_js__store = new Import()
   .imports("createSignal")
-  .from(standard_libraries.solid_js.alias!.store)
+  .from(standard_libraries.solid_js.alias.store.name)
   .make();

packages/builder-web-solid/solid-import-specifications/solid-js-web.ts

@@ -10,5 +10,5 @@ import { Import } from "coli";
  */
 export const import_render_from_solid_js__web = new Import()
   .imports("render")
-  .from(standard_libraries.solid_js.alias!.web)
+  .from(standard_libraries.solid_js.alias.web.name)
   .make();

packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts

@@ -85,6 +85,7 @@ export class SolidStyledComponentsBuilder {
   partImportStyled() {
     switch (this.config.module) {
       case "solid-styled-components":
+        console.log("impot", solid_styled_components_imports.import_styled);
         return solid_styled_components_imports.import_styled;
     }
     throw (