From d7419f57db6dbad86c39704249774eec1ed7f812 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 05:38:34 +0900 Subject: [PATCH] add solid-js as a valid option input --- .../code-options-control.tsx | 6 +++ .../framework-options.ts | 38 ++++++++++++++++ editor/query/to-code-options-from-query.ts | 9 +++- editor/scaffolds/code/index.tsx | 9 ++++ packages/builder-config-preset/index.ts | 43 ++++++++++++++----- .../ui-frameworks/index.ts | 1 + packages/builder-web-nodejs/stdlib/index.ts | 19 +++++--- .../solid-js-store.ts | 2 +- .../solid-js-web.ts | 2 +- .../solid-styled-components-module-builder.ts | 1 + 10 files changed, 109 insertions(+), 21 deletions(-) diff --git a/editor/components/codeui-code-options-control/code-options-control.tsx b/editor/components/codeui-code-options-control/code-options-control.tsx index 2cc5850a..5d3e69d9 100644 --- a/editor/components/codeui-code-options-control/code-options-control.tsx +++ b/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], }; diff --git a/editor/components/codeui-code-options-control/framework-options.ts b/editor/components/codeui-code-options-control/framework-options.ts index 3e8b8eb0..5f33c38d 100644 --- a/editor/components/codeui-code-options-control/framework-options.ts +++ b/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: { + framework: Framework.solid, + language: Language.tsx, + styling: "styled-components", + }, + solid_with_styled_components: { + framework: Framework.solid, + language: Language.tsx, + styling: "styled-components", + }, + solid_with_inline_css: { + framework: Framework.solid, + language: Language.tsx, + styling: "inline-css", + }, +}; + export const vanilla_presets = { vanilla_default: { 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,6 +175,10 @@ 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 }; @@ -149,6 +186,7 @@ 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], }; diff --git a/editor/query/to-code-options-from-query.ts b/editor/query/to-code-options-from-query.ts index 90dc312a..61407fde 100644 --- a/editor/query/to-code-options-from-query.ts +++ b/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; } } diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx index 4e945275..1950deeb 100644 --- a/editor/scaffolds/code/index.tsx +++ b/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; diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts index 5d80e151..cc92a53a 100644 --- a/packages/builder-config-preset/index.ts +++ b/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: { 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: { framework: Framework.react, @@ -36,7 +36,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_inline_css: { framework: Framework.react, @@ -44,7 +44,7 @@ export const react_presets = { styling: { type: "inline-css", }, - component_declaration_style: _react_component_declaration_style, + component_declaration_style: _jsx_component_declaration_style, }, react_with_css_module: { 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: { 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: { 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: { 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: { 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: { + framework: Framework.solid, + language: Language.tsx, + styling: { + type: "styled-components", + module: "solid-styled-components", + }, + component_declaration_style: _jsx_component_declaration_style, + }, + solid_default: { + framework: Framework.solid, + language: Language.tsx, + styling: { + type: "styled-components", + module: "solid-styled-components", + }, + component_declaration_style: _jsx_component_declaration_style, }, }; diff --git a/packages/builder-platform-types/ui-frameworks/index.ts b/packages/builder-platform-types/ui-frameworks/index.ts index 41e38bd4..3dd4f6c7 100644 --- a/packages/builder-platform-types/ui-frameworks/index.ts +++ b/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", } diff --git a/packages/builder-web-nodejs/stdlib/index.ts b/packages/builder-web-nodejs/stdlib/index.ts index efaa9928..85b7e8b4 100644 --- a/packages/builder-web-nodejs/stdlib/index.ts +++ b/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" }, }, }; diff --git a/packages/builder-web-solid/solid-import-specifications/solid-js-store.ts b/packages/builder-web-solid/solid-import-specifications/solid-js-store.ts index 6b349183..7242b195 100644 --- a/packages/builder-web-solid/solid-import-specifications/solid-js-store.ts +++ b/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(); diff --git a/packages/builder-web-solid/solid-import-specifications/solid-js-web.ts b/packages/builder-web-solid/solid-import-specifications/solid-js-web.ts index 1dc6b82c..d27d6d48 100644 --- a/packages/builder-web-solid/solid-import-specifications/solid-js-web.ts +++ b/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(); diff --git a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts index c7034b9f..fd98832b 100644 --- a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts +++ b/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 (