From 00a47f22e4b92ccbfdc9c41e252f740501361d7b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 28 Apr 2022 17:43:51 +0900 Subject: [PATCH 01/29] qf - add "vanilla" as a valid preset key --- .../codeui-code-options-control/framework-options.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/editor/components/codeui-code-options-control/framework-options.ts b/editor/components/codeui-code-options-control/framework-options.ts index 4644749b..3e8b8eb0 100644 --- a/editor/components/codeui-code-options-control/framework-options.ts +++ b/editor/components/codeui-code-options-control/framework-options.ts @@ -133,11 +133,14 @@ 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, // react_with_css // NOT ON PRODUCTION }; From fbeba02eb5d678b7bce829a77330254500efbada Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 11 May 2022 11:23:39 +0900 Subject: [PATCH 02/29] rm invalid import --- packages/builder-react-core/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder-react-core/index.ts b/packages/builder-react-core/index.ts index a45579fd..d2a1d945 100644 --- a/packages/builder-react-core/index.ts +++ b/packages/builder-react-core/index.ts @@ -1,6 +1,5 @@ export * from "./export-result"; export * from "./react-component-exporting"; export * from "./react-import-specifications"; -export * from "../builder-web-react/react-project"; export * from "./react-module-file"; export * from "./react-module"; From ade7cb3f48931fa5cff2480152ebccdf52b2873e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Jun 2022 08:57:48 +0200 Subject: [PATCH 03/29] update styled-components module docs --- .../builder-web-styled-components/README.md | 71 ++++++++++++++++++- 1 file changed, 68 insertions(+), 3 deletions(-) diff --git a/packages/builder-web-styled-components/README.md b/packages/builder-web-styled-components/README.md index f0bbcb62..04df98aa 100644 --- a/packages/builder-web-styled-components/README.md +++ b/packages/builder-web-styled-components/README.md @@ -4,14 +4,46 @@ **Supported platforms** -- reactjs -- vuejs +- react +- react-native +- vue +- svelte +- solidjs +- preact + +## Usage + +```ts +import { styled } from "@web-builder/styled"; +``` + +**Preferences** + +- module + - "styled-components" + - "@emotion/styled" + - "styled-components/native" +- initializer property signature + - default (property-access-signature): styled.div + - react + - vue + - svelte + - preact + - call-signature: styled("div") + - react + - vue + - svelte + - preact + - solidjs (https://github.com/solidjs/solid-styled-components/issues/28) +- initializer call signature + - tagged template (`styled.div\`\``) + - function (`styled.div(() => "")`) ## ReactJS https://styled-components.com/ -```jsx +```tsx //// declaration const Button = styled.a` /* This renders the buttons above... Edit me! */ @@ -91,3 +123,36 @@ const Wrapper = styled.section` Hello World, this is my first styled component! ; ``` + +## SolidJS + +> https://github.com/solidjs/solid-styled-components + +```tsx +// w/tagged templates + +import { styled } from "solid-styled-components"; + +const Btn = styled("button")` + border-radius: 4px; +`; + +// w/function:string +import { styled } from "solid-styled-components"; + +const Btn = styled("button")( + (props) => ` + border-radius: ${props.size}px; +` +); + +; +``` + +## Theme support - wip + +- theme object scope +- theme provider +- type extension + +## Comments (CSS Comments) - wip From 9f8fc047571288b668447a211b3ac20eaf56509f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Jun 2022 08:58:03 +0200 Subject: [PATCH 04/29] bump coli with solid keyword reservations --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index d5079133..4eb88a6f 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit d5079133b840b7e9150eca96ac23bf49af8b9f60 +Subproject commit 4eb88a6f2a024e8400aa4ee79cb8ca1b97676615 From c98d28278c0a7471ec3bcd759dd009b59d830722 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Jun 2022 08:58:15 +0200 Subject: [PATCH 05/29] typo fix --- .../formatter/styled-tagged-template-variable-formatter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-web-styled-components/formatter/styled-tagged-template-variable-formatter.ts b/packages/builder-web-styled-components/formatter/styled-tagged-template-variable-formatter.ts index 458872f1..244ba1dd 100644 --- a/packages/builder-web-styled-components/formatter/styled-tagged-template-variable-formatter.ts +++ b/packages/builder-web-styled-components/formatter/styled-tagged-template-variable-formatter.ts @@ -20,7 +20,7 @@ * styled.span` * color: white; * width: 24px; - * ::placeholder { + * ::placeholder { * color: red; * } * ` From e1d518c555347888adfb0a7b0ca9695e3e2618c4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Jun 2022 08:58:44 +0200 Subject: [PATCH 06/29] refactor `@web-builder/styled` module --- .../compose-styled-component-declaration.ts | 43 +++++++++++++++ .../core/index.ts | 7 +++ .../styled-component-declaration.ts | 55 +------------------ .../core/types.ts | 27 +++++++++ .../builder-web-styled-components/index.ts | 2 +- .../builder-web-styled-components/main.ts | 22 ++------ 6 files changed, 83 insertions(+), 73 deletions(-) create mode 100644 packages/builder-web-styled-components/core/compose-styled-component-declaration.ts create mode 100644 packages/builder-web-styled-components/core/index.ts rename packages/builder-web-styled-components/{ => core}/styled-component-declaration.ts (50%) create mode 100644 packages/builder-web-styled-components/core/types.ts diff --git a/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts b/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts new file mode 100644 index 00000000..b190c8a9 --- /dev/null +++ b/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts @@ -0,0 +1,43 @@ +import { StylableJSXElementConfig, WidgetWithStyle } from "@web-builder/core"; +import { nameVariable, NameCases } from "@coli.codes/naming"; +import type { NamePreference } from "./types"; +import { handle } from "@coli.codes/builder"; +import { StyledComponentDeclaration } from "./styled-component-declaration"; +import type { Html5IdentifierNames } from "@coli.codes/jsx-core"; + +export function composeStyledComponentVariableDeclaration( + widgetConfig: WidgetWithStyle, + preferences: { + name?: NamePreference; + } +): StyledComponentDeclaration { + const jsxconfg = widgetConfig.jsxConfig() as StylableJSXElementConfig; + + /// region name + let varname: string; + const namePref = preferences.name; + if (namePref.overrideFinalName) { + varname = namePref.overrideFinalName; + } else if (namePref.overrideKeyName) { + varname = nameVariable(namePref.overrideKeyName, { + case: NameCases.pascal, + }).name; + } else { + varname = namePref.namer.nameit(widgetConfig.key.name, { + case: NameCases.pascal, + }).name; + } + /// + + const style_data = widgetConfig.finalStyle; + /** + * if the style is null, it means don't make element as a styled component at all. if style is a empty object, it means to make a empty styled component. + */ + const should_be_styled = style_data !== null; + if (should_be_styled) { + return new StyledComponentDeclaration(varname, { + style: style_data, + identifier: handle(jsxconfg.tag).name as Html5IdentifierNames, + }); + } +} diff --git a/packages/builder-web-styled-components/core/index.ts b/packages/builder-web-styled-components/core/index.ts new file mode 100644 index 00000000..de2798ef --- /dev/null +++ b/packages/builder-web-styled-components/core/index.ts @@ -0,0 +1,7 @@ +export { StyledComponentDeclaration } from "./styled-component-declaration"; +export { composeStyledComponentVariableDeclaration } from "./compose-styled-component-declaration"; +export type { + StyledComponentJSXElementConfig, + NoStyleJSXElementConfig, + NamePreference, +} from "./types"; diff --git a/packages/builder-web-styled-components/styled-component-declaration.ts b/packages/builder-web-styled-components/core/styled-component-declaration.ts similarity index 50% rename from packages/builder-web-styled-components/styled-component-declaration.ts rename to packages/builder-web-styled-components/core/styled-component-declaration.ts index 9f68a111..a77911bc 100644 --- a/packages/builder-web-styled-components/styled-component-declaration.ts +++ b/packages/builder-web-styled-components/core/styled-component-declaration.ts @@ -6,16 +6,9 @@ import { TemplateLiteral, VariableDeclaration, } from "coli"; -import { StylableJSXElementConfig, WidgetWithStyle } from "@web-builder/core"; import { SyntaxKind } from "@coli.codes/core-syntax-kind"; -import { - nameVariable, - NameCases, - ScopedVariableNamer, -} from "@coli.codes/naming"; import { CSSProperties, buildCSSStyleData } from "@coli.codes/css"; -import { handle } from "@coli.codes/builder"; -import { formatStyledTempplateString } from "./formatter"; +import { formatStyledTempplateString } from "../formatter"; export class StyledComponentDeclaration extends VariableDeclaration { static styledIdentifier = new Identifier("styled"); @@ -67,49 +60,3 @@ export class StyledComponentDeclaration extends VariableDeclaration { ); } } - -/** - * component variable declration naming preference - */ -export interface NamePreference { - namer: ScopedVariableNamer; - overrideKeyName?: string; - overrideFinalName?: string; -} - -export function composeStyledComponentVariableDeclaration( - widgetConfig: WidgetWithStyle, - preferences: { - name?: NamePreference; - } -): StyledComponentDeclaration { - const jsxconfg = widgetConfig.jsxConfig() as StylableJSXElementConfig; - - /// region name - let varname: string; - const namePref = preferences.name; - if (namePref.overrideFinalName) { - varname = namePref.overrideFinalName; - } else if (namePref.overrideKeyName) { - varname = nameVariable(namePref.overrideKeyName, { - case: NameCases.pascal, - }).name; - } else { - varname = namePref.namer.nameit(widgetConfig.key.name, { - case: NameCases.pascal, - }).name; - } - /// - - const style_data = widgetConfig.finalStyle; - /** - * if the style is null, it means don't make element as a styled component at all. if style is a empty object, it means to make a empty styled component. - */ - const should_be_styled = style_data !== null; - if (should_be_styled) { - return new StyledComponentDeclaration(varname, { - style: style_data, - identifier: handle(jsxconfg.tag).name as Html5IdentifierNames, - }); - } -} diff --git a/packages/builder-web-styled-components/core/types.ts b/packages/builder-web-styled-components/core/types.ts new file mode 100644 index 00000000..2cd04029 --- /dev/null +++ b/packages/builder-web-styled-components/core/types.ts @@ -0,0 +1,27 @@ +import type { CSSProperties } from "@coli.codes/css"; +import type { JSXAttributes, JSXIdentifier } from "coli"; +import type { StyledComponentDeclaration } from "./styled-component-declaration"; +import type { ScopedVariableNamer } from "@coli.codes/naming"; + +export interface StyledComponentJSXElementConfig { + id: string; + tag: JSXIdentifier; + attributes?: JSXAttributes; + style: CSSProperties; + styledComponent: StyledComponentDeclaration; +} + +export interface NoStyleJSXElementConfig { + id?: string; + tag: JSXIdentifier; + attributes?: JSXAttributes; +} + +/** + * component variable declration naming preference + */ +export interface NamePreference { + namer: ScopedVariableNamer; + overrideKeyName?: string; + overrideFinalName?: string; +} diff --git a/packages/builder-web-styled-components/index.ts b/packages/builder-web-styled-components/index.ts index 48062485..488497f0 100644 --- a/packages/builder-web-styled-components/index.ts +++ b/packages/builder-web-styled-components/index.ts @@ -1,3 +1,3 @@ export * from "./main"; -export * from "./styled-component-declaration"; +export * from "./core"; export * from "./optimization-post"; diff --git a/packages/builder-web-styled-components/main.ts b/packages/builder-web-styled-components/main.ts index 5c6ae01e..eaf77cfe 100644 --- a/packages/builder-web-styled-components/main.ts +++ b/packages/builder-web-styled-components/main.ts @@ -1,27 +1,13 @@ import { handle } from "@coli.codes/builder"; -import { CSSProperties } from "@coli.codes/css"; import { ScopedVariableNamer } from "@coli.codes/naming"; import { WidgetWithStyle } from "@web-builder/core"; -import { JSXAttributes, JSXIdentifier } from "coli"; +import { JSXIdentifier } from "coli"; import { composeStyledComponentVariableDeclaration, NamePreference, - StyledComponentDeclaration, -} from "./styled-component-declaration"; - -export interface StyledComponentJSXElementConfig { - id: string; - tag: JSXIdentifier; - attributes?: JSXAttributes; - style: CSSProperties; - styledComponent: StyledComponentDeclaration; -} - -export interface NoStyleJSXElementConfig { - id?: string; - tag: JSXIdentifier; - attributes?: JSXAttributes; -} + NoStyleJSXElementConfig, + StyledComponentJSXElementConfig, +} from "./core"; /** * From 80344b0ce68860b728230e3f4b87257a267b12ff Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Jun 2022 10:54:00 +0200 Subject: [PATCH 07/29] rename modules & add solid framework config (initial) --- .../framework-react/react-config-styling.ts | 2 +- .../builder-config/framework-solid/index.ts | 3 +++ .../framework-solid/solid-config-styling.ts | 18 ++++++++++++++++++ .../framework-solid/solid-config.ts | 10 ++++++++++ .../framework-solid/solid-output.ts | 3 +++ .../{framework-css => module-css}/index.ts | 0 6 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 packages/builder-config/framework-solid/index.ts create mode 100644 packages/builder-config/framework-solid/solid-config-styling.ts create mode 100644 packages/builder-config/framework-solid/solid-config.ts create mode 100644 packages/builder-config/framework-solid/solid-output.ts rename packages/builder-config/{framework-css => module-css}/index.ts (100%) diff --git a/packages/builder-config/framework-react/react-config-styling.ts b/packages/builder-config/framework-react/react-config-styling.ts index ef50e942..fbb222e1 100644 --- a/packages/builder-config/framework-react/react-config-styling.ts +++ b/packages/builder-config/framework-react/react-config-styling.ts @@ -1,4 +1,4 @@ -import type { CssStylingConfig } from "../framework-css"; +import type { CssStylingConfig } from "../module-css"; export type ReactStylingStrategy = | ReactInlineCssConfig diff --git a/packages/builder-config/framework-solid/index.ts b/packages/builder-config/framework-solid/index.ts new file mode 100644 index 00000000..847c3f71 --- /dev/null +++ b/packages/builder-config/framework-solid/index.ts @@ -0,0 +1,3 @@ +export * from "./solid-config"; +export * from "./solid-config-styling"; +export * from "./solid-output"; diff --git a/packages/builder-config/framework-solid/solid-config-styling.ts b/packages/builder-config/framework-solid/solid-config-styling.ts new file mode 100644 index 00000000..939da3cc --- /dev/null +++ b/packages/builder-config/framework-solid/solid-config-styling.ts @@ -0,0 +1,18 @@ +export type SolidStylingStrategy = + | SolidStyledComponentsConfig + | SolidInlineCssConfig; + +export type SolidStyledComponentsConfig = SolidOfficialStyledComponentsConfig; + +/** + * the official styled-components module by solidjs team + * > https://github.com/solidjs/solid-styled-components + */ +interface SolidOfficialStyledComponentsConfig { + type: "styled-components"; + module: "solid-styled-components"; +} + +export interface SolidInlineCssConfig { + type: "inline-css"; +} diff --git a/packages/builder-config/framework-solid/solid-config.ts b/packages/builder-config/framework-solid/solid-config.ts new file mode 100644 index 00000000..2b0cf1a8 --- /dev/null +++ b/packages/builder-config/framework-solid/solid-config.ts @@ -0,0 +1,10 @@ +import type { Language } from "@grida/builder-platform-types"; + +/** + * builder configuration input for solidjs applications + */ +export interface SolidFrameworkConfig { + framework: "solidjs"; + language: Language.jsx | Language.tsx; + styling; +} diff --git a/packages/builder-config/framework-solid/solid-output.ts b/packages/builder-config/framework-solid/solid-output.ts new file mode 100644 index 00000000..3cac580a --- /dev/null +++ b/packages/builder-config/framework-solid/solid-output.ts @@ -0,0 +1,3 @@ +import { ComponentOutput } from "../output"; + +export interface SolidComponentOutput extends ComponentOutput {} diff --git a/packages/builder-config/framework-css/index.ts b/packages/builder-config/module-css/index.ts similarity index 100% rename from packages/builder-config/framework-css/index.ts rename to packages/builder-config/module-css/index.ts From 941b83bc7791680240e76f7830b4f5f45180c6c8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Jun 2022 09:30:18 +0200 Subject: [PATCH 08/29] update configuration typings - modularize --- .../react-config-exporting-component.ts | 100 +++--------------- ...config-functional-component-declaration.ts | 12 +-- .../framework-react/react-config.ts | 3 +- packages/builder-config/module-es/README.md | 9 ++ .../esmodule-config-exporting-component.ts | 91 ++++++++++++++++ packages/builder-config/module-es/index.ts | 1 + packages/builder-config/module-jsx/README.md | 11 ++ packages/builder-config/module-jsx/index.ts | 2 + ...config-functional-component-declaration.ts | 11 ++ .../builder-config/module-jsx/jsx-config.ts | 12 +++ 10 files changed, 157 insertions(+), 95 deletions(-) create mode 100644 packages/builder-config/module-es/README.md create mode 100644 packages/builder-config/module-es/esmodule-config-exporting-component.ts create mode 100644 packages/builder-config/module-es/index.ts create mode 100644 packages/builder-config/module-jsx/README.md create mode 100644 packages/builder-config/module-jsx/index.ts create mode 100644 packages/builder-config/module-jsx/jsx-config-functional-component-declaration.ts create mode 100644 packages/builder-config/module-jsx/jsx-config.ts diff --git a/packages/builder-config/framework-react/react-config-exporting-component.ts b/packages/builder-config/framework-react/react-config-exporting-component.ts index 785bc964..5d747042 100644 --- a/packages/builder-config/framework-react/react-config-exporting-component.ts +++ b/packages/builder-config/framework-react/react-config-exporting-component.ts @@ -1,91 +1,21 @@ +import type { + EsComponentExportingConfig_ExportDefaultAnonymousClassComponent, + EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent, + EsComponentExportingConfig_ExportNamedClassComponent, + EsComponentExportingConfig_ExportNamedFunction, +} from "../module-es"; + export type ReactComponentExportingCofnig = | ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent | ReactComponentExportingConfig_ExportNamedFunction | ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent | ReactComponentExportingConfig_ExportNamedClassComponent; -export type ReactFunctionalComponentDeclarationSyntaxChoice = - | "function" - | "inlinefunction"; - -export type ReactComponentExportDeclarationSyntaxChoice = - | "export" - | "export-default"; - -/** - * ```tsx - * export default function () { ... } - * ``` - */ -export interface ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent { - type: "export-default-anonymous-functional-component"; - exporting_position: "with-declaration"; - declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice; - export_declaration_syntax_choice: "export-default"; -} - -/** - * ```tsx - * export function () { ... } +@ - * // or - * export default function () { ... } +@ - * ``` - */ -export interface ReactComponentExportingConfig_ExportNamedFunction { - type: "export-named-functional-component"; - exporting_position: react_component_symantic_export_token_location; - declaration_syntax_choice: ReactFunctionalComponentDeclarationSyntaxChoice; - export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice; -} - -/** - * ```tsx - * export default class { ... } - * ``` - */ -export interface ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent { - type: "export-anonymous-class-component"; - exporting_position: "with-declaration"; - export_declaration_syntax_choice: "export-default"; -} - -/** - * ```tsx - * export class Component {} +@ - * // or - * export default class Component {} +@ - * ``` - */ -export interface ReactComponentExportingConfig_ExportNamedClassComponent { - type: "export-named-class-component"; - exporting_position: react_component_symantic_export_token_location; - export_declaration_syntax_choice: ReactComponentExportDeclarationSyntaxChoice; -} - -/** - * symantic location that export token can be located - * - * ```ts - * // `with-declaration` - * export function A () {} - * var _other_blocks; - * ... - * - * // `after-declaration` - * function A () {} - * export { A } - * var _other_blocks; - * - * // `end-of-file` - * function A () {} - * var _other_blocks; - * export { A } - * ``` - */ -export type react_component_symantic_export_token_location = - // export function A ... - | "with-declaration" - // function A ... export { A } - | "after-declaration" - // function A ... ... export { A } - | "end-of-file"; +type ReactComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent = + EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent; +type ReactComponentExportingConfig_ExportNamedFunction = + EsComponentExportingConfig_ExportNamedFunction; +type ReactComponentExportingConfig_ExportDefaultAnonymousClassComponent = + EsComponentExportingConfig_ExportDefaultAnonymousClassComponent; +type ReactComponentExportingConfig_ExportNamedClassComponent = + EsComponentExportingConfig_ExportNamedClassComponent; diff --git a/packages/builder-config/framework-react/react-config-functional-component-declaration.ts b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts index 37af0426..acfbdc87 100644 --- a/packages/builder-config/framework-react/react-config-functional-component-declaration.ts +++ b/packages/builder-config/framework-react/react-config-functional-component-declaration.ts @@ -1,10 +1,4 @@ -export type ReactFunctionalComponentDeclarationConfig = ReactFunctionalComponentDeclarationStyle; +import type { JsxFunctionalComponentDeclarationConfig } from "../module-jsx"; -interface ReactFunctionalComponentDeclarationStyle { - // props: {} vs {} : {} - props_parameter_style: UnwrappedPropsCodeStyle; -} - -interface UnwrappedPropsCodeStyle { - style: "unwrapped-props"; -} +export type ReactFunctionalComponentDeclarationConfig = + JsxFunctionalComponentDeclarationConfig; diff --git a/packages/builder-config/framework-react/react-config.ts b/packages/builder-config/framework-react/react-config.ts index 3cac8d28..c79d4797 100644 --- a/packages/builder-config/framework-react/react-config.ts +++ b/packages/builder-config/framework-react/react-config.ts @@ -1,9 +1,10 @@ import type { Language } from "@grida/builder-platform-types"; +import type { JsxModuleConfig } from "../module-jsx/jsx-config"; import type { ReactComponentExportingCofnig } from "./react-config-exporting-component"; import type { ReactFunctionalComponentDeclarationConfig } from "./react-config-functional-component-declaration"; import type { ReactStylingStrategy } from "./react-config-styling"; -export interface ReactFrameworkConfig { +export interface ReactFrameworkConfig extends JsxModuleConfig { framework: "react"; language: Language.jsx | Language.tsx; // TODO: rename to css_styling diff --git a/packages/builder-config/module-es/README.md b/packages/builder-config/module-es/README.md new file mode 100644 index 00000000..ea64623e --- /dev/null +++ b/packages/builder-config/module-es/README.md @@ -0,0 +1,9 @@ +# ECMAScript (es - js/ts) configurations for popular web frameworks including React, Vue, Svelte and Solid. + +## Frameworks + +- react (uses jsx configuration along with esconfig) +- react-native (extends from react config) +- vue (uses its own configuration, referenced from esconfig) +- svelte (uses its own configuration, referenced from esconfig) +- solid (like react, uses jsx config along with esconfig) diff --git a/packages/builder-config/module-es/esmodule-config-exporting-component.ts b/packages/builder-config/module-es/esmodule-config-exporting-component.ts new file mode 100644 index 00000000..adb3948c --- /dev/null +++ b/packages/builder-config/module-es/esmodule-config-exporting-component.ts @@ -0,0 +1,91 @@ +export type EsComponentExportingCofnig = + | EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent + | EsComponentExportingConfig_ExportNamedFunction + | EsComponentExportingConfig_ExportDefaultAnonymousClassComponent + | EsComponentExportingConfig_ExportNamedClassComponent; + +export type EsFunctionalComponentDeclarationSyntaxChoice = + | "function" + | "inlinefunction"; + +export type EsComponentExportDeclarationSyntaxChoice = + | "export" + | "export-default"; + +/** + * ```tsx + * export default function () { ... } + * ``` + */ +export interface EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent { + type: "export-default-anonymous-functional-component"; + exporting_position: "with-declaration"; + declaration_syntax_choice: EsFunctionalComponentDeclarationSyntaxChoice; + export_declaration_syntax_choice: "export-default"; +} + +/** + * ```tsx + * export function () { ... } +@ + * // or + * export default function () { ... } +@ + * ``` + */ +export interface EsComponentExportingConfig_ExportNamedFunction { + type: "export-named-functional-component"; + exporting_position: es_component_symantic_export_token_location; + declaration_syntax_choice: EsFunctionalComponentDeclarationSyntaxChoice; + export_declaration_syntax_choice: EsComponentExportDeclarationSyntaxChoice; +} + +/** + * ```tsx + * export default class { ... } + * ``` + */ +export interface EsComponentExportingConfig_ExportDefaultAnonymousClassComponent { + type: "export-anonymous-class-component"; + exporting_position: "with-declaration"; + export_declaration_syntax_choice: "export-default"; +} + +/** + * ```tsx + * export class Component {} +@ + * // or + * export default class Component {} +@ + * ``` + */ +export interface EsComponentExportingConfig_ExportNamedClassComponent { + type: "export-named-class-component"; + exporting_position: es_component_symantic_export_token_location; + export_declaration_syntax_choice: EsComponentExportDeclarationSyntaxChoice; +} + +/** + * symantic location that export token can be located + * + * ```ts + * // `with-declaration` + * export function A () {} + * var _other_blocks; + * ... + * + * // `after-declaration` + * function A () {} + * export { A } + * var _other_blocks; + * + * // `end-of-file` + * function A () {} + * var _other_blocks; + * export { A } + * ``` + */ +export type es_component_symantic_export_token_location = + // export function A ... + | "with-declaration" + // function A ... export { A } + | "after-declaration" + // function A ... ... export { A } + | "end-of-file"; diff --git a/packages/builder-config/module-es/index.ts b/packages/builder-config/module-es/index.ts new file mode 100644 index 00000000..5319ddb6 --- /dev/null +++ b/packages/builder-config/module-es/index.ts @@ -0,0 +1 @@ +export * from "./esmodule-config-exporting-component"; diff --git a/packages/builder-config/module-jsx/README.md b/packages/builder-config/module-jsx/README.md new file mode 100644 index 00000000..2c57d0f8 --- /dev/null +++ b/packages/builder-config/module-jsx/README.md @@ -0,0 +1,11 @@ +# JSX Module configuration + +**Why is this directory required?** + +jsx is first introduced for react apps, but also used by frameworks like solid. for this reason we decided to manage jsx/tsx configuration type defs under this directory. + +**Used by** + +- react +- react-native +- solid diff --git a/packages/builder-config/module-jsx/index.ts b/packages/builder-config/module-jsx/index.ts new file mode 100644 index 00000000..51b3c2cc --- /dev/null +++ b/packages/builder-config/module-jsx/index.ts @@ -0,0 +1,2 @@ +// export * from "./jsx-config"; +export * from "./jsx-config-functional-component-declaration"; diff --git a/packages/builder-config/module-jsx/jsx-config-functional-component-declaration.ts b/packages/builder-config/module-jsx/jsx-config-functional-component-declaration.ts new file mode 100644 index 00000000..d1864597 --- /dev/null +++ b/packages/builder-config/module-jsx/jsx-config-functional-component-declaration.ts @@ -0,0 +1,11 @@ +export type JsxFunctionalComponentDeclarationConfig = + JsxFunctionalComponentDeclarationStyle; + +interface JsxFunctionalComponentDeclarationStyle { + // props: {} vs {} : {} + props_parameter_style: UnwrappedPropsCodeStyle; +} + +interface UnwrappedPropsCodeStyle { + style: "unwrapped-props"; +} diff --git a/packages/builder-config/module-jsx/jsx-config.ts b/packages/builder-config/module-jsx/jsx-config.ts new file mode 100644 index 00000000..6708d38b --- /dev/null +++ b/packages/builder-config/module-jsx/jsx-config.ts @@ -0,0 +1,12 @@ +import type { Language } from "@grida/builder-platform-types"; +import { EsComponentExportingCofnig } from "../module-es"; +import { JsxFunctionalComponentDeclarationConfig } from "./jsx-config-functional-component-declaration"; + +export interface JsxModuleConfig { + language: Language.jsx | Language.tsx; + component_declaration_style: { + exporting_style: EsComponentExportingCofnig; + // not supported yet + declaration_style?: JsxFunctionalComponentDeclarationConfig; + }; +} From 05173fe92507440370a1cb4fc33239cb76f3d7e3 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 05:17:54 +0900 Subject: [PATCH 09/29] add solidjs package specification --- packages/builder-web-nodejs/stdlib/index.ts | 33 +++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/builder-web-nodejs/stdlib/index.ts b/packages/builder-web-nodejs/stdlib/index.ts index 9643d3e0..06b36dde 100644 --- a/packages/builder-web-nodejs/stdlib/index.ts +++ b/packages/builder-web-nodejs/stdlib/index.ts @@ -237,6 +237,35 @@ const MATERIAL_UI_STYLES: StandardLibraryManifest = { /// endregion material-ui (react) /// +/// +/// region solidjs +/// + +/** + * last-update: Jun 2022 + * https://www.npmjs.com/package/solid-js + */ +const SOLIDJS: StandardLibraryManifest = { + id: "solid-js", + name: "solid-js", + version: "1.4.4", + website: "https://www.solidjs.com/", +}; + +/** + * https://www.npmjs.com/package/solid-styled-components + */ +const SOLID_STYLED_COMPONENTS: StandardLibraryManifest = { + id: "solid-styled-components", + name: "solid-styled-components", + version: "0.28.3", + website: "https://github.com/solidjs/solid-styled-components", +}; + +/// +/// endregion solidjs +/// + export const standard_libraries = { // ts typescript: TYPESCRIPT, @@ -266,4 +295,8 @@ export const standard_libraries = { material_ui_core: MATERIAL_UI_CORE, material_ui_icons: MATERIAL_UI_ICONS, material_ui_styles: MATERIAL_UI_STYLES, + + // solidjs + solid_js: SOLIDJS, + solud_styled_components: SOLID_STYLED_COMPONENTS, }; From 52dff0e2d24ac3a917a9033c23fdc6d59f537db5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 05:39:23 +0900 Subject: [PATCH 10/29] add solid styled component import specifier coli const --- .../solid-import-specifications/index.ts | 1 + .../styled-import-specifications.ts | 68 +++++++++++++++++++ .../from-static-widget-tree.ts | 6 ++ .../solid-styled-components-module-builder.ts | 48 +++++++++++++ 4 files changed, 123 insertions(+) create mode 100644 packages/builder-web-solid/solid-import-specifications/index.ts create mode 100644 packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts create mode 100644 packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts create mode 100644 packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts diff --git a/packages/builder-web-solid/solid-import-specifications/index.ts b/packages/builder-web-solid/solid-import-specifications/index.ts new file mode 100644 index 00000000..f1c0b9bb --- /dev/null +++ b/packages/builder-web-solid/solid-import-specifications/index.ts @@ -0,0 +1 @@ +export * from "./styled-import-specifications"; diff --git a/packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts b/packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts new file mode 100644 index 00000000..fc7a3a9a --- /dev/null +++ b/packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts @@ -0,0 +1,68 @@ +/// +/// solid's official styled components module import specificatons +/// .d.ts type file can be found here - https://github.com/solidjs/solid-styled-components/blob/main/src/index.d.ts +/// + +import { standard_libraries } from "@web-builder/nodejs"; +import { Import } from "coli"; + +/** + * Note: solid's styled component uses the named import (not the default import) + * Learn more: https://github.com/solidjs/solid-styled-components/ + * CoLI: `import { styled } from "solid-styled-components";` + */ +const import_styled = new Import() + .imports("styled") + .from(standard_libraries.solud_styled_components.name) + .make(); + +/** + * Learn more: https://github.com/solidjs/solid-styled-components/ + * CoLI: `import { css } from "solid-styled-components";` + */ +const import_css = new Import() + .imports("css") + .from(standard_libraries.solud_styled_components.name) + .make(); + +/** + * Learn more: https://github.com/solidjs/solid-styled-components/ + * CoLI: `import { ThemeProvider } from "solid-styled-components";` + */ +const import_theme_provider = new Import() + .imports("ThemeProvider") + .from(standard_libraries.solud_styled_components.name) + .make(); + +export const solid_styled_components_imports = { + /** + * `import styled from "@emotion/native";` + */ + import_styled: import_styled, + import_css: import_css, + import_theme_provider: import_theme_provider, +}; + +type _named_import = + | "styled" + | "css" + | "ThemeProvider" + | "DefaultTheme" + | "shouldForwardProp" + | "createGlobalStyles"; + +/** + * makes the import specification with specified import keywords allowed from solid-styled-components + * @param _imports + * @returns + */ +export function make_solid_styled_components_imports( + ..._imports: _named_import[] +) { + _imports; + + return new Import() + .imports(..._imports) + .from(standard_libraries.solud_styled_components.name) + .make(); +} diff --git a/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts new file mode 100644 index 00000000..66f01d8f --- /dev/null +++ b/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts @@ -0,0 +1,6 @@ +import { JsxWidget, StylableJsxWidget } from "@web-builder/core"; +import { ReactComponentExportResult } from "@web-builder/react-core"; +import { solid as solid_config } from "@designto/config"; +import { SolidStyledComponentsBuilder } from "./solid-styled-components-module-builder"; + +export function finalizeSolidWidget_StyledComponents() {} 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 new file mode 100644 index 00000000..abc1a73b --- /dev/null +++ b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts @@ -0,0 +1,48 @@ +import { + ScopedVariableNamer, + ReservedKeywordPlatformPresets, +} from "@coli.codes/naming"; +import { + NoStyleJSXElementConfig, + StyledComponentJSXElementConfig, +} from "@web-builder/styled"; +import { + react_imports, + makeReactModuleFile, + ReactWidgetModuleExportable, + emotion_styled_imports, + styled_components_imports, +} from "@web-builder/react-core"; +import { JsxWidget } from "@web-builder/core"; +import { BlockStatement, ImportDeclaration, Return } from "coli"; +import { + buildJsx, + StylesConfigMapBuilder, + StylesRepository, +} from "@web-builder/core/builders"; +import { solid as solid_config } from "@designto/config"; +import { + StyledComponentDeclaration, + create_duplication_reduction_map, +} from "@web-builder/styled"; +import { solid_styled_components_imports } from "../solid-import-specifications"; + +export class SolidStyledComponentsBuilder { + private readonly entry: JsxWidget; + private readonly widgetName: string; + private readonly stylesMapper: StylesConfigMapBuilder; + private readonly stylesRepository: StylesRepository; + private readonly namer: ScopedVariableNamer; + readonly config: solid_config.SolidStyledComponentsConfig; + + partImportStyled() { + switch (this.config.module) { + case "solid-styled-components": + return solid_styled_components_imports.import_styled; + } + throw ( + `Unexpected solidjs styled components module identifier: ` + + this.config.module + ); + } +} From 4a598b27ffadeaf7f2011a42d0ddbf578839068b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 05:39:46 +0900 Subject: [PATCH 11/29] add solidjs on framework config --- packages/builder-config/configure/framework-config.ts | 3 +++ packages/builder-config/framework/index.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/packages/builder-config/configure/framework-config.ts b/packages/builder-config/configure/framework-config.ts index 9cdbd9af..ac1acd92 100644 --- a/packages/builder-config/configure/framework-config.ts +++ b/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 }; diff --git a/packages/builder-config/framework/index.ts b/packages/builder-config/framework/index.ts index 56e9fee4..b0a427b2 100644 --- a/packages/builder-config/framework/index.ts +++ b/packages/builder-config/framework/index.ts @@ -6,6 +6,7 @@ export * as reactnative from "../framework-reactnative"; export * as vanilla from "../framework-vanilla"; export * as preview from "../framework-vanilla-preview"; export * as vue from "../framework-vue"; +export * as solid from "../framework-solid"; // universal // export * as universal from "./universal"; From 50a9574aefcd202d8a7145113aeffd182ed7b038 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:38:04 +0900 Subject: [PATCH 12/29] update solid framework config with export options --- .../builder-config/framework-solid/index.ts | 1 + .../solid-config-exporting-component.ts | 21 +++++++++++++++++++ .../framework-solid/solid-config.ts | 7 ++++++- 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 packages/builder-config/framework-solid/solid-config-exporting-component.ts diff --git a/packages/builder-config/framework-solid/index.ts b/packages/builder-config/framework-solid/index.ts index 847c3f71..ae8c9cd4 100644 --- a/packages/builder-config/framework-solid/index.ts +++ b/packages/builder-config/framework-solid/index.ts @@ -1,3 +1,4 @@ export * from "./solid-config"; export * from "./solid-config-styling"; export * from "./solid-output"; +export * from "./solid-config-exporting-component"; diff --git a/packages/builder-config/framework-solid/solid-config-exporting-component.ts b/packages/builder-config/framework-solid/solid-config-exporting-component.ts new file mode 100644 index 00000000..40ac59bd --- /dev/null +++ b/packages/builder-config/framework-solid/solid-config-exporting-component.ts @@ -0,0 +1,21 @@ +import type { + EsComponentExportingConfig_ExportDefaultAnonymousClassComponent, + EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent, + EsComponentExportingConfig_ExportNamedClassComponent, + EsComponentExportingConfig_ExportNamedFunction, +} from "../module-es"; + +export type SolidComponentExportingCofnig = + | SolidComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent + | SolidComponentExportingConfig_ExportNamedFunction + | SolidComponentExportingConfig_ExportDefaultAnonymousClassComponent + | SolidComponentExportingConfig_ExportNamedClassComponent; + +type SolidComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent = + EsComponentExportingConfig_ExportDefaultAnonymousFunctionalComponent; +type SolidComponentExportingConfig_ExportNamedFunction = + EsComponentExportingConfig_ExportNamedFunction; +type SolidComponentExportingConfig_ExportDefaultAnonymousClassComponent = + EsComponentExportingConfig_ExportDefaultAnonymousClassComponent; +type SolidComponentExportingConfig_ExportNamedClassComponent = + EsComponentExportingConfig_ExportNamedClassComponent; diff --git a/packages/builder-config/framework-solid/solid-config.ts b/packages/builder-config/framework-solid/solid-config.ts index 2b0cf1a8..ea33cb1e 100644 --- a/packages/builder-config/framework-solid/solid-config.ts +++ b/packages/builder-config/framework-solid/solid-config.ts @@ -1,4 +1,6 @@ import type { Language } from "@grida/builder-platform-types"; +import type { SolidComponentExportingCofnig } from "./solid-config-exporting-component"; +import type { SolidStylingStrategy } from "./solid-config-styling"; /** * builder configuration input for solidjs applications @@ -6,5 +8,8 @@ import type { Language } from "@grida/builder-platform-types"; export interface SolidFrameworkConfig { framework: "solidjs"; language: Language.jsx | Language.tsx; - styling; + styling: SolidStylingStrategy; + component_declaration_style: { + exporting_style: SolidComponentExportingCofnig; + }; } From 7b28815f61462737a01bcd26b5fe4f99b22714d2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:38:14 +0900 Subject: [PATCH 13/29] bump coli --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index 4eb88a6f..788a019b 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit 4eb88a6f2a024e8400aa4ee79cb8ca1b97676615 +Subproject commit 788a019b2719316ee518ea14b86df0ff2396b60e From 3966f0405681ef8a2e88fd2c154914b051d07ede Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:38:39 +0900 Subject: [PATCH 14/29] init `@web-builder/module-es` --- packages/builder-module-es/index.ts | 0 packages/builder-module-es/package.json | 4 ++++ 2 files changed, 4 insertions(+) create mode 100644 packages/builder-module-es/index.ts create mode 100644 packages/builder-module-es/package.json diff --git a/packages/builder-module-es/index.ts b/packages/builder-module-es/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/builder-module-es/package.json b/packages/builder-module-es/package.json new file mode 100644 index 00000000..fa0e8ae4 --- /dev/null +++ b/packages/builder-module-es/package.json @@ -0,0 +1,4 @@ +{ + "name": "@web-builder/module-es", + "version": "0.0.0" +} \ No newline at end of file From 339600f6c83630aebcca4a14d3a374f535f43977 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:39:03 +0900 Subject: [PATCH 15/29] add solid pre defined import specifications --- .../solid-import-specifications/index.ts | 3 ++- .../solid-js-store.ts | 11 ++++++++ .../solid-js-web.ts | 14 ++++++++++ .../solid-import-specifications/solid-js.ts | 26 +++++++++++++++++++ ...ications.ts => solid-styled-components.ts} | 0 5 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 packages/builder-web-solid/solid-import-specifications/solid-js-store.ts create mode 100644 packages/builder-web-solid/solid-import-specifications/solid-js-web.ts create mode 100644 packages/builder-web-solid/solid-import-specifications/solid-js.ts rename packages/builder-web-solid/solid-import-specifications/{styled-import-specifications.ts => solid-styled-components.ts} (100%) diff --git a/packages/builder-web-solid/solid-import-specifications/index.ts b/packages/builder-web-solid/solid-import-specifications/index.ts index f1c0b9bb..58aa1488 100644 --- a/packages/builder-web-solid/solid-import-specifications/index.ts +++ b/packages/builder-web-solid/solid-import-specifications/index.ts @@ -1 +1,2 @@ -export * from "./styled-import-specifications"; +export * from "./solid-styled-components"; +export { solid_js_imports } from "./solid-js"; 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 new file mode 100644 index 00000000..6b349183 --- /dev/null +++ b/packages/builder-web-solid/solid-import-specifications/solid-js-store.ts @@ -0,0 +1,11 @@ +/// +/// solid-js/store +/// + +import { standard_libraries } from "@web-builder/nodejs"; +import { Import } from "coli"; + +export const import_createStore_from_solid_js__store = new Import() + .imports("createSignal") + .from(standard_libraries.solid_js.alias!.store) + .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 new file mode 100644 index 00000000..1dc6b82c --- /dev/null +++ b/packages/builder-web-solid/solid-import-specifications/solid-js-web.ts @@ -0,0 +1,14 @@ +/// +/// solid-js/web +/// + +import { standard_libraries } from "@web-builder/nodejs"; +import { Import } from "coli"; + +/** + * CoLI: `import React from "react";` + */ +export const import_render_from_solid_js__web = new Import() + .imports("render") + .from(standard_libraries.solid_js.alias!.web) + .make(); diff --git a/packages/builder-web-solid/solid-import-specifications/solid-js.ts b/packages/builder-web-solid/solid-import-specifications/solid-js.ts new file mode 100644 index 00000000..7b13ead2 --- /dev/null +++ b/packages/builder-web-solid/solid-import-specifications/solid-js.ts @@ -0,0 +1,26 @@ +/// +/// This contains default and fundamental imports required for using solid-js library +/// + +import { standard_libraries } from "@web-builder/nodejs"; +import { Import } from "coli"; + +import { import_render_from_solid_js__web } from "./solid-js-web"; +import { import_createStore_from_solid_js__store } from "./solid-js-store"; + +const import_createMemo_from_solid_js = new Import() + .imports("createMemo") + .from(standard_libraries.solid_js.name) + .make(); + +const import_createSignal_from_solid_js = new Import() + .imports("createSignal") + .from(standard_libraries.solid_js.name) + .make(); + +export const solid_js_imports = { + render: import_render_from_solid_js__web, + createMemo: import_createMemo_from_solid_js, + createSignal: import_createSignal_from_solid_js, + createStore: import_createStore_from_solid_js__store, +}; diff --git a/packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts b/packages/builder-web-solid/solid-import-specifications/solid-styled-components.ts similarity index 100% rename from packages/builder-web-solid/solid-import-specifications/styled-import-specifications.ts rename to packages/builder-web-solid/solid-import-specifications/solid-styled-components.ts From dc8bdaf0a515e90c106ef61340f1bbfed2717db5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:39:17 +0900 Subject: [PATCH 16/29] add alias to package dec --- packages/builder-web-nodejs/stdlib/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/builder-web-nodejs/stdlib/index.ts b/packages/builder-web-nodejs/stdlib/index.ts index 06b36dde..efaa9928 100644 --- a/packages/builder-web-nodejs/stdlib/index.ts +++ b/packages/builder-web-nodejs/stdlib/index.ts @@ -14,6 +14,9 @@ export interface StandardLibraryManifest { name: string; version: string; website: string; + alias?: { + [key: string]: string; + }; } /** @@ -250,6 +253,10 @@ const SOLIDJS: StandardLibraryManifest = { name: "solid-js", version: "1.4.4", website: "https://www.solidjs.com/", + alias: { + web: "web", + store: "store", + }, }; /** From e679e6f2c7727be4a721eb1a1520409184b3d416 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:39:35 +0900 Subject: [PATCH 17/29] update author --- packages/designto-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/designto-react/package.json b/packages/designto-react/package.json index fd9e7dbd..b1702af6 100644 --- a/packages/designto-react/package.json +++ b/packages/designto-react/package.json @@ -4,7 +4,7 @@ "description": "design to react", "main": "dist/index.js", "repository": "https://github.com/bridgedxyz/design-to-code", - "author": "Bridged authors", + "author": "Grida OSS authors", "license": "Apache 2.0", "private": false, "dependencies": { From fe03594ca1b6d42f2cce99037dee365a71add45e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 06:40:02 +0900 Subject: [PATCH 18/29] init `@designto/solid` package --- packages/designto-solid-js/app/index.ts | 34 +++++++++++++++++++++++++ packages/designto-solid-js/index.ts | 1 + packages/designto-solid-js/package.json | 13 ++++++++++ 3 files changed, 48 insertions(+) create mode 100644 packages/designto-solid-js/app/index.ts create mode 100644 packages/designto-solid-js/index.ts create mode 100644 packages/designto-solid-js/package.json diff --git a/packages/designto-solid-js/app/index.ts b/packages/designto-solid-js/app/index.ts new file mode 100644 index 00000000..cd90f89c --- /dev/null +++ b/packages/designto-solid-js/app/index.ts @@ -0,0 +1,34 @@ +import { Widget } from "@reflect-ui/core"; +import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget"; +import { JsxWidget } from "@web-builder/core"; +import { solid as config } from "@designto/config"; +import { finalizeSolidWidget_StyledComponents } from "@web-builder/solid-js"; +export function buildSolidApp( + entry: JsxWidget, + config: config.SolidFrameworkConfig +): config.SolidComponentOutput { + switch (config.styling.type) { + // TODO: + // case "inline-css": { + // break; + // } + case "styled-components": { + const res = finalizeSolidWidget_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 }, + }; + } + default: { + throw ( + "Unexpected styling type for solid-js framework: " + config.styling.type + ); + } + } + // return; +} diff --git a/packages/designto-solid-js/index.ts b/packages/designto-solid-js/index.ts new file mode 100644 index 00000000..ac5307de --- /dev/null +++ b/packages/designto-solid-js/index.ts @@ -0,0 +1 @@ +export * from "./app"; diff --git a/packages/designto-solid-js/package.json b/packages/designto-solid-js/package.json new file mode 100644 index 00000000..51aa5635 --- /dev/null +++ b/packages/designto-solid-js/package.json @@ -0,0 +1,13 @@ +{ + "name": "@designto/solid-js", + "version": "0.0.0", + "description": "design to solidjs", + "main": "dist/index.js", + "repository": "https://github.com/bridgedxyz/design-to-code", + "author": "Grida OSS authors", + "license": "Apache 2.0", + "private": false, + "dependencies": { + "@web-builder/react": "17.0.2" + } +} \ No newline at end of file From e2da6dbd2e0769690c54f7242e529279f21daa29 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:00:43 +0900 Subject: [PATCH 19/29] bump coli --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index 788a019b..7f353c8f 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit 788a019b2719316ee518ea14b86df0ff2396b60e +Subproject commit 7f353c8f1bb2c6a28b13ac5bd968d9356b33890a From 0ddf42f624cded29d0f6595bb59d733ed6e96e55 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:00:55 +0900 Subject: [PATCH 20/29] update next config with new packages --- editor/next.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/editor/next.config.js b/editor/next.config.js index 68120387..5544e80e 100644 --- a/editor/next.config.js +++ b/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", From 0df48428e8bcd2e8a4128131da928f2bf9920d68 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:01:24 +0900 Subject: [PATCH 21/29] add scripting config for solid (disabled) --- editor/config/scripting-enabled-frameworks.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/editor/config/scripting-enabled-frameworks.ts b/editor/config/scripting-enabled-frameworks.ts index 7de61fd8..4da371b0 100644 --- a/editor/config/scripting-enabled-frameworks.ts +++ b/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; From c398f6632e7d8a1121cc84ab8fd67d2d5505a7e5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:02:00 +0900 Subject: [PATCH 22/29] update solid framework id --- .../framework-solid/solid-config.ts | 2 +- .../designto-code/universal/design-to-code.ts | 63 ++++++++++++++++++- 2 files changed, 63 insertions(+), 2 deletions(-) diff --git a/packages/builder-config/framework-solid/solid-config.ts b/packages/builder-config/framework-solid/solid-config.ts index ea33cb1e..5a8ceac7 100644 --- a/packages/builder-config/framework-solid/solid-config.ts +++ b/packages/builder-config/framework-solid/solid-config.ts @@ -6,7 +6,7 @@ import type { SolidStylingStrategy } from "./solid-config-styling"; * builder configuration input for solidjs applications */ export interface SolidFrameworkConfig { - framework: "solidjs"; + framework: "solid-js"; language: Language.jsx | Language.tsx; styling: SolidStylingStrategy; component_declaration_style: { diff --git a/packages/designto-code/universal/design-to-code.ts b/packages/designto-code/universal/design-to-code.ts index 7ecb111e..8fe3e474 100644 --- a/packages/designto-code/universal/design-to-code.ts +++ b/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 toSolid from "@designto/solid-js"; import * as toReactNative from "@designto/react-native"; import * as toVanilla from "@designto/vanilla"; import * as toFlutter from "@designto/flutter"; @@ -163,6 +164,16 @@ export async function designToCode({ })), ..._extend_result, }; + case "solid-js": + return { + ...(await designToSolid({ + input: _tokenized_widget_input, + build_config: build_config, + solid_config: framework_config, + asset_config: asset_config, + })), + ..._extend_result, + }; } throw `The framework "${ @@ -298,7 +309,57 @@ export async function designToFlutter({ } export function designToVue(input: input.IDesignInput): output.ICodeOutput { - return; + throw "not ready"; +} + +export async function designToSolid({ + input, + solid_config, + build_config, + asset_config, +}: { + input: { widget: Widget; reusable_widget_tree? }; + solid_config: config.SolidFrameworkConfig; + /** + * TODO: pass this to tokenizer +@ + */ + build_config: config.BuildConfiguration; + asset_config?: AssetsConfig; +}): Promise { + if ( + build_config.disable_components || + // automatically fallbacks if no valid data was passed + !input.reusable_widget_tree + ) { + const reactwidget = toReact.buildReactWidget(input.widget); + if (process.env.NODE_ENV === "development") { + console.info("dev::", "final web token composed", { + input: input.widget, + reactwidget, + }); + } + + const res = toSolid.buildSolidApp(reactwidget, solid_config); + // ------------------------------------------------------------------------ + // finilize temporary assets + // this should be placed somewhere else + if ( + asset_config?.asset_repository && + !asset_config.skip_asset_replacement + ) { + const assets = await fetch_all_assets(asset_config.asset_repository); + res.code.raw = dangerous_temporary_asset_replacer(res.code.raw, assets); + res.scaffold.raw = dangerous_temporary_asset_replacer( + res.scaffold.raw, + assets + ); + } + // ------------------------------------------------------------------------ + + return res; + } else { + throw "Reusable components for solid-js is not ready yet."; + } } export async function designToVanillaPreview({ From 5732fb59cbe862c545b25a26feb36283ffc5fc4f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:02:32 +0900 Subject: [PATCH 23/29] mv es widget builder reusable codes --- .../es-component-exporting}/index.ts | 2 +- .../es-module-exportable-declaration.ts | 46 ++++++++++++++++++ .../es-module-file.ts} | 22 ++++----- packages/builder-module-es/index.ts | 3 ++ packages/builder-react-core/index.ts | 2 - .../react-exportable-module-declaration.ts | 47 +------------------ .../rn-inline-style-module-builder.ts | 4 +- .../rn-styled-components-module-builder.ts | 4 +- .../rn-style-sheet-module-builder.ts | 4 +- .../react-css-module-module-builder.ts | 4 +- .../react-inline-css-module-builder.ts | 4 +- .../react-styled-components-module-builder.ts | 4 +- 12 files changed, 74 insertions(+), 72 deletions(-) rename packages/{builder-react-core/react-component-exporting => builder-module-es/es-component-exporting}/index.ts (94%) create mode 100644 packages/builder-module-es/es-module-exportable-declaration.ts rename packages/{builder-react-core/react-module-file/index.ts => builder-module-es/es-module-file.ts} (81%) diff --git a/packages/builder-react-core/react-component-exporting/index.ts b/packages/builder-module-es/es-component-exporting/index.ts similarity index 94% rename from packages/builder-react-core/react-component-exporting/index.ts rename to packages/builder-module-es/es-component-exporting/index.ts index 4b31b678..9b4e74ec 100644 --- a/packages/builder-react-core/react-component-exporting/index.ts +++ b/packages/builder-module-es/es-component-exporting/index.ts @@ -39,7 +39,7 @@ export function add_export_keyword_modifier_to_declaration< * @param id * @returns */ -export function wrap_with_export_assignment_react_component_identifier( +export function wrap_with_export_assignment_jsx_component_identifier( id: Identifier ) { return new ExportAssignment(id); diff --git a/packages/builder-module-es/es-module-exportable-declaration.ts b/packages/builder-module-es/es-module-exportable-declaration.ts new file mode 100644 index 00000000..c3887a8c --- /dev/null +++ b/packages/builder-module-es/es-module-exportable-declaration.ts @@ -0,0 +1,46 @@ +import { BlockStatement, ImportDeclaration } from "coli"; +import { stringfy } from "@coli.codes/export-string"; +import { EsWidgetModuleFile } from "@web-builder/module-es"; +import { react as react_config } from "@designto/config"; + +export abstract class EsWidgetModuleExportable { + readonly name: string; + readonly dependencies: string[]; + readonly body: BlockStatement; + readonly imports: ImportDeclaration[]; + + constructor({ + name, + body, + imports, + dependencies = [], + }: { + name; + body; + imports; + dependencies?: string[]; + }) { + this.name = name; + this.body = body; + this.imports = imports; + this.dependencies = dependencies; + } + + abstract asFile({ + exporting, + }: { + exporting: react_config.ReactComponentExportingCofnig; + }): EsWidgetModuleFile; + + finalize(config: react_config.ReactComponentExportingCofnig) { + const file = this.asFile({ exporting: config }); + const final = stringfy(file.blocks, { + language: "tsx", + }); + return { + code: final, + name: this.name, + dependencies: this.dependencies, + }; + } +} diff --git a/packages/builder-react-core/react-module-file/index.ts b/packages/builder-module-es/es-module-file.ts similarity index 81% rename from packages/builder-react-core/react-module-file/index.ts rename to packages/builder-module-es/es-module-file.ts index ba023f33..68df05e6 100644 --- a/packages/builder-react-core/react-module-file/index.ts +++ b/packages/builder-module-es/es-module-file.ts @@ -8,19 +8,19 @@ import { Declaration, } from "coli"; import { SyntaxKind } from "@coli.codes/core-syntax-kind"; -import { react as react_config } from "@designto/config"; +import { EsComponentExportingCofnig } from "@designto/config/module-es"; import { add_export_keyword_modifier_to_declaration, - wrap_with_export_assignment_react_component_identifier, -} from "../react-component-exporting"; + wrap_with_export_assignment_jsx_component_identifier, +} from "./es-component-exporting"; -export class ReactModuleFile extends SourceFile { +export class EsWidgetModuleFile extends SourceFile { constructor({ name, path }: { name: string; path: string }) { super({ name, path }); } } -export function makeReactModuleFile({ +export function makeEsWidgetModuleFile({ name, path, imports, @@ -34,11 +34,11 @@ export function makeReactModuleFile({ body: BlockStatement; declarations: Declaration[]; config: { - exporting: react_config.ReactComponentExportingCofnig; + exporting: EsComponentExportingCofnig; }; }) { const { exporting } = config; - const file = new ReactModuleFile({ + const file = new EsWidgetModuleFile({ name: `${name}.tsx`, path: path, }); @@ -75,8 +75,8 @@ export function makeReactModuleFile({ case "after-declaration": file.declare(named_function_declaration); file.export( - wrap_with_export_assignment_react_component_identifier( - named_function_declaration.id + wrap_with_export_assignment_jsx_component_identifier( + named_function_declaration.id! ) ); file.declare(...declarations); @@ -85,8 +85,8 @@ export function makeReactModuleFile({ file.declare(named_function_declaration); file.declare(...declarations); file.export( - wrap_with_export_assignment_react_component_identifier( - named_function_declaration.id + wrap_with_export_assignment_jsx_component_identifier( + named_function_declaration.id! ) ); break; diff --git a/packages/builder-module-es/index.ts b/packages/builder-module-es/index.ts index e69de29b..59913eae 100644 --- a/packages/builder-module-es/index.ts +++ b/packages/builder-module-es/index.ts @@ -0,0 +1,3 @@ +export * from "./es-module-file"; +export * from "./es-component-exporting"; +export * from "./es-module-exportable-declaration"; diff --git a/packages/builder-react-core/index.ts b/packages/builder-react-core/index.ts index d2a1d945..ed59087e 100644 --- a/packages/builder-react-core/index.ts +++ b/packages/builder-react-core/index.ts @@ -1,5 +1,3 @@ export * from "./export-result"; -export * from "./react-component-exporting"; export * from "./react-import-specifications"; -export * from "./react-module-file"; export * from "./react-module"; diff --git a/packages/builder-react-core/react-module/react-exportable-module-declaration.ts b/packages/builder-react-core/react-module/react-exportable-module-declaration.ts index 9563256a..3207ab3e 100644 --- a/packages/builder-react-core/react-module/react-exportable-module-declaration.ts +++ b/packages/builder-react-core/react-module/react-exportable-module-declaration.ts @@ -1,46 +1 @@ -import { BlockStatement, ImportDeclaration } from "coli"; -import { stringfy } from "@coli.codes/export-string"; -import { ReactModuleFile } from "../react-module-file"; -import { react as react_config } from "@designto/config"; - -export abstract class ReactWidgetModuleExportable { - readonly name: string; - readonly dependencies: string[]; - readonly body: BlockStatement; - readonly imports: ImportDeclaration[]; - - constructor({ - name, - body, - imports, - dependencies, - }: { - name; - body; - imports; - dependencies?: string[]; - }) { - this.name = name; - this.body = body; - this.imports = imports; - this.dependencies = dependencies; - } - - abstract asFile({ - exporting, - }: { - exporting: react_config.ReactComponentExportingCofnig; - }): ReactModuleFile; - - finalize(config: react_config.ReactComponentExportingCofnig) { - const file = this.asFile({ exporting: config }); - const final = stringfy(file.blocks, { - language: "tsx", - }); - return { - code: final, - name: this.name, - dependencies: this.dependencies, - }; - } -} +export { EsWidgetModuleExportable as ReactWidgetModuleExportable } from "@web-builder/module-es"; diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts index 74fcd7b9..c5c3f2e9 100644 --- a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts +++ b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts @@ -7,7 +7,6 @@ import type { JsxWidget } from "@web-builder/core"; import { react_imports, ReactWidgetModuleExportable, - makeReactModuleFile, } from "@web-builder/react-core"; import { buildJsx, @@ -30,6 +29,7 @@ import { import { cssToJson } from "@web-builder/styles/_utils"; import { CSSProperties } from "@coli.codes/css"; import { reactnative_imports } from ".."; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; /** * CSS In JS Style builder for React Framework @@ -182,7 +182,7 @@ export class ReactNativeInlineStyleWidgetModuleExportable extends ReactWidgetMod }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts index b253bc4a..a6fc341b 100644 --- a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts +++ b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts @@ -3,7 +3,6 @@ import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; import { BlockStatement, ImportDeclaration, Return } from "coli"; import { react_imports, - makeReactModuleFile, ReactWidgetModuleExportable, emotion_styled_imports, styled_components_imports, @@ -25,6 +24,7 @@ import { StyledComponentDeclaration, create_duplication_reduction_map, } from "@web-builder/styled"; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; export class ReactNativeStyledComponentsModuleBuilder { private readonly entry: JsxWidget; @@ -170,7 +170,7 @@ export class ReactNativeStyledComponentWidgetModuleExportable extends ReactWidge }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts index e3a55650..b9a4aa84 100644 --- a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts +++ b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts @@ -12,7 +12,6 @@ import { } from "coli"; import { react_imports, - makeReactModuleFile, ReactWidgetModuleExportable, } from "@web-builder/react-core"; import { JsxWidget } from "@web-builder/core"; @@ -30,6 +29,7 @@ import { import { reactnative_imports } from "../rn-import-specifications"; import { StyleSheetDeclaration } from "../rn-style-sheet"; import { create_duplication_reduction_map } from "@web-builder/styled"; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; export class ReactNativeStyleSheetModuleBuilder { private readonly entry: JsxWidget; @@ -201,7 +201,7 @@ export class ReactStyleSheeteWidgetModuleExportable extends ReactWidgetModuleExp }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, diff --git a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts index 5eacea64..0ad27dd8 100644 --- a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts +++ b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts @@ -12,7 +12,6 @@ import { } from "coli"; import { react_imports, - makeReactModuleFile, ReactWidgetModuleExportable, } from "@web-builder/react-core"; import { JsxWidget } from "@web-builder/core"; @@ -25,6 +24,7 @@ import { } from "@web-builder/core/builders"; import { react as react_config } from "@designto/config"; import { create_duplication_reduction_map } from "@web-builder/styled"; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; /** * CSS Module Builder for React Framework @@ -182,7 +182,7 @@ export class ReactCssModuleWidgetModuleExportable extends ReactWidgetModuleExpor }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, diff --git a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts index d28518ad..6339cf66 100644 --- a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts +++ b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts @@ -4,7 +4,6 @@ import type { JsxWidget } from "@web-builder/core"; import { react_imports, ReactWidgetModuleExportable, - makeReactModuleFile, } from "@web-builder/react-core"; import { buildJsx, @@ -26,6 +25,7 @@ import { } from "coli"; import { cssToJson } from "@web-builder/styles/_utils"; import { CSSProperties } from "@coli.codes/css"; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; /** * InlineCss Style builder for React Framework @@ -174,7 +174,7 @@ export class ReactInlineCssWidgetModuleExportable extends ReactWidgetModuleExpor }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts index 8799b671..bb2292e7 100644 --- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts +++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts @@ -8,7 +8,6 @@ import { } from "@web-builder/styled"; import { react_imports, - makeReactModuleFile, ReactWidgetModuleExportable, emotion_styled_imports, styled_components_imports, @@ -25,6 +24,7 @@ import { StyledComponentDeclaration, create_duplication_reduction_map, } from "@web-builder/styled"; +import { makeEsWidgetModuleFile } from "@web-builder/module-es"; export class ReactStyledComponentsBuilder { private readonly entry: JsxWidget; @@ -162,7 +162,7 @@ export class ReactStyledComponentWidgetModuleExportable extends ReactWidgetModul }: { exporting: react_config.ReactComponentExportingCofnig; }) { - return makeReactModuleFile({ + return makeEsWidgetModuleFile({ name: this.name, path: "src/components", imports: this.imports, From f756de9521d7eb68c5900332e9807f76a6889e97 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Jun 2022 21:02:38 +0900 Subject: [PATCH 24/29] add solid builder --- packages/builder-web-solid/README.md | 0 packages/builder-web-solid/index.ts | 2 + packages/builder-web-solid/package.json | 11 ++ .../from-static-widget-tree.ts | 15 +- .../solid-styled-component-widget/index.ts | 2 + .../solid-styled-components-module-builder.ts | 143 +++++++++++++++++- .../solid-widget-module/index.ts | 0 7 files changed, 164 insertions(+), 9 deletions(-) create mode 100644 packages/builder-web-solid/README.md create mode 100644 packages/builder-web-solid/index.ts create mode 100644 packages/builder-web-solid/package.json create mode 100644 packages/builder-web-solid/solid-styled-component-widget/index.ts create mode 100644 packages/builder-web-solid/solid-widget-module/index.ts diff --git a/packages/builder-web-solid/README.md b/packages/builder-web-solid/README.md new file mode 100644 index 00000000..e69de29b diff --git a/packages/builder-web-solid/index.ts b/packages/builder-web-solid/index.ts new file mode 100644 index 00000000..44a5799a --- /dev/null +++ b/packages/builder-web-solid/index.ts @@ -0,0 +1,2 @@ +export * from "./solid-import-specifications"; +export * from "./solid-styled-component-widget"; diff --git a/packages/builder-web-solid/package.json b/packages/builder-web-solid/package.json new file mode 100644 index 00000000..66d468a3 --- /dev/null +++ b/packages/builder-web-solid/package.json @@ -0,0 +1,11 @@ +{ + "name": "@web-builder/solid-js", + "description": "Grida's Solid code builder for development automation built uppon coli", + "version": "1.4.3", + "license": "Apache 2.0", + "homepage": "https://coli.codes/solid-js", + "author": "Grida Authors", + "dependencies": { + "@web-builder/react-core": "17.0.2" + } +} \ No newline at end of file diff --git a/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts index 66f01d8f..de8fe8f3 100644 --- a/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts +++ b/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts @@ -1,6 +1,17 @@ import { JsxWidget, StylableJsxWidget } from "@web-builder/core"; -import { ReactComponentExportResult } from "@web-builder/react-core"; import { solid as solid_config } from "@designto/config"; import { SolidStyledComponentsBuilder } from "./solid-styled-components-module-builder"; -export function finalizeSolidWidget_StyledComponents() {} +export function finalizeSolidWidget_StyledComponents( + entry: JsxWidget, + { + styling, + exporting, + }: { + styling: solid_config.SolidStyledComponentsConfig; + exporting: solid_config.SolidComponentExportingCofnig; + } +) { + const builder = new SolidStyledComponentsBuilder({ entry, config: styling }); + return builder.asExportableModule().finalize(exporting); +} diff --git a/packages/builder-web-solid/solid-styled-component-widget/index.ts b/packages/builder-web-solid/solid-styled-component-widget/index.ts new file mode 100644 index 00000000..580f8090 --- /dev/null +++ b/packages/builder-web-solid/solid-styled-component-widget/index.ts @@ -0,0 +1,2 @@ +export * from "./from-static-widget-tree"; +export * from "./solid-styled-components-module-builder"; 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 abc1a73b..c7034b9f 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 @@ -6,13 +6,7 @@ import { NoStyleJSXElementConfig, StyledComponentJSXElementConfig, } from "@web-builder/styled"; -import { - react_imports, - makeReactModuleFile, - ReactWidgetModuleExportable, - emotion_styled_imports, - styled_components_imports, -} from "@web-builder/react-core"; +import { solid_js_imports } from "@web-builder/solid-js"; import { JsxWidget } from "@web-builder/core"; import { BlockStatement, ImportDeclaration, Return } from "coli"; import { @@ -26,6 +20,10 @@ import { create_duplication_reduction_map, } from "@web-builder/styled"; import { solid_styled_components_imports } from "../solid-import-specifications"; +import { + EsWidgetModuleExportable, + makeEsWidgetModuleFile, +} from "@web-builder/module-es"; export class SolidStyledComponentsBuilder { private readonly entry: JsxWidget; @@ -35,6 +33,55 @@ export class SolidStyledComponentsBuilder { private readonly namer: ScopedVariableNamer; readonly config: solid_config.SolidStyledComponentsConfig; + constructor({ + entry, + config, + }: { + entry: JsxWidget; + config: solid_config.SolidStyledComponentsConfig; + }) { + this.entry = entry; + this.widgetName = entry.key.name; + this.namer = new ScopedVariableNamer( + entry.key.id, + ReservedKeywordPlatformPresets.react + ); + + this.stylesMapper = new StylesConfigMapBuilder(entry, { + namer: this.namer, + rename_tag: true /** styled component tag shoule be renamed */, + }); + + this.stylesRepository = new StylesRepository( + this.stylesMapper.map, + create_duplication_reduction_map + ); + + this.config = config; + } + + private styledConfig( + id: string + ): StyledComponentJSXElementConfig | NoStyleJSXElementConfig { + return this.stylesRepository.get(id); + } + + private jsxBuilder(widget: JsxWidget) { + return buildJsx( + widget, + { + styledConfig: (id) => this.styledConfig(id), + }, + { + self_closing_if_possible: true, + } + ); + } + + partImports() { + return [this.partImportSolidJS(), this.partImportStyled()]; + } + partImportStyled() { switch (this.config.module) { case "solid-styled-components": @@ -45,4 +92,86 @@ export class SolidStyledComponentsBuilder { this.config.module ); } + + partImportSolidJS() { + return solid_js_imports.render; + } + + partBody(): BlockStatement { + let jsxTree = this.jsxBuilder(this.entry); + return new BlockStatement(new Return(jsxTree)); + } + + partDeclarations() { + return Array.from(this.stylesRepository.uniques()) + .map((k) => { + return (this.stylesRepository.get(k) as StyledComponentJSXElementConfig) + .styledComponent; + }) + .filter((s) => s); + } + + asExportableModule() { + const body = this.partBody(); + const imports = this.partImports(); + const styled_declarations = this.partDeclarations(); + return new SolidStyledComponentWidgetModuleExportable( + this.widgetName, + { + body, + imports, + declarations: styled_declarations, + }, + { + dependencies: ["solid-js", this.config.module], + } + ); + } +} + +export class SolidStyledComponentWidgetModuleExportable extends EsWidgetModuleExportable { + readonly declarations: StyledComponentDeclaration[]; + + constructor( + name, + { + body, + imports, + declarations, + }: { + body: BlockStatement; + imports: ImportDeclaration[]; + declarations: StyledComponentDeclaration[]; + }, + { + dependencies = [], + }: { + dependencies?: string[]; + } + ) { + super({ + name, + body, + imports, + }); + + this.declarations = declarations; + } + + asFile({ + exporting, + }: { + exporting: solid_config.SolidComponentExportingCofnig; + }) { + return makeEsWidgetModuleFile({ + name: this.name, + path: "src/components", + imports: this.imports, + declarations: this.declarations, + body: this.body, + config: { + exporting: exporting, + }, + }); + } } diff --git a/packages/builder-web-solid/solid-widget-module/index.ts b/packages/builder-web-solid/solid-widget-module/index.ts new file mode 100644 index 00000000..e69de29b From dda308ec87c7c883356375fb0b42101b11e67c50 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 05:34:35 +0900 Subject: [PATCH 25/29] bump coli --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index 7f353c8f..c33d80be 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit 7f353c8f1bb2c6a28b13ac5bd968d9356b33890a +Subproject commit c33d80beca3561b8231bf5c1c4e0f7e2708c1964 From d7419f57db6dbad86c39704249774eec1ed7f812 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 05:38:34 +0900 Subject: [PATCH 26/29] 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 ( From 4d3969fc29d68ac0b8a50fd912d95391fac0c0cb Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 07:33:48 +0900 Subject: [PATCH 27/29] bump coli --- externals/coli | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externals/coli b/externals/coli index c33d80be..2edb61d8 160000 --- a/externals/coli +++ b/externals/coli @@ -1 +1 @@ -Subproject commit c33d80beca3561b8231bf5c1c4e0f7e2708c1964 +Subproject commit 2edb61d8faa448cb28b7177f184987520e608964 From 37439dbbe218219fde9aea3d5e6a6a66c62ea4d1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 07:59:07 +0900 Subject: [PATCH 28/29] add parameter call style styled component declaration for solid --- .../rn-inline-style-module-builder.ts | 13 ++- .../rn-styled-components-module-builder.ts | 13 ++- .../rn-style-sheet-module-builder.ts | 13 ++- .../builders/build-style-map.ts | 13 +-- .../react-css-module-module-builder.ts | 13 ++- .../react-inline-css-module-builder.ts | 13 ++- .../react-styled-components-module-builder.ts | 13 ++- .../solid-styled-components-module-builder.ts | 13 ++- .../compose-styled-component-declaration.ts | 6 ++ .../core/styled-component-declaration.ts | 91 ++++++++++++++----- .../builder-web-styled-components/main.ts | 3 + .../html-css-id-module-builder.ts | 13 ++- 12 files changed, 158 insertions(+), 59 deletions(-) diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts index c5c3f2e9..5b431fcd 100644 --- a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts +++ b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts @@ -4,6 +4,7 @@ import { reactnative as reactnative_config, } from "@designto/config"; import type { JsxWidget } from "@web-builder/core"; +import { Framework } from "@grida/builder-platform-types"; import { react_imports, ReactWidgetModuleExportable, @@ -66,10 +67,14 @@ export class ReactNativeInlineStyleBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: false, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: false, + }, + Framework.reactnative + ); } private stylesConfig( diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts index a6fc341b..c9b48905 100644 --- a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts +++ b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts @@ -25,6 +25,7 @@ import { create_duplication_reduction_map, } from "@web-builder/styled"; import { makeEsWidgetModuleFile } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; export class ReactNativeStyledComponentsModuleBuilder { private readonly entry: JsxWidget; @@ -48,10 +49,14 @@ export class ReactNativeStyledComponentsModuleBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: true /** styled component tag shoule be renamed */, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: true /** styled component tag shoule be renamed */, + }, + Framework.reactnative + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts index b9a4aa84..edfb6fda 100644 --- a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts +++ b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts @@ -30,6 +30,7 @@ import { reactnative_imports } from "../rn-import-specifications"; import { StyleSheetDeclaration } from "../rn-style-sheet"; import { create_duplication_reduction_map } from "@web-builder/styled"; import { makeEsWidgetModuleFile } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; export class ReactNativeStyleSheetModuleBuilder { private readonly entry: JsxWidget; @@ -53,10 +54,14 @@ export class ReactNativeStyleSheetModuleBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: false /** rn StyleSheet tag shoule not be renamed */, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: false /** rn StyleSheet tag shoule not be renamed */, + }, + Framework.reactnative + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, diff --git a/packages/builder-web-core/builders/build-style-map.ts b/packages/builder-web-core/builders/build-style-map.ts index bee9caf0..4be15773 100644 --- a/packages/builder-web-core/builders/build-style-map.ts +++ b/packages/builder-web-core/builders/build-style-map.ts @@ -3,6 +3,7 @@ import { WidgetKeyId, StylableJsxWidget, JsxWidget } from "@web-builder/core"; import { JSXAttributes, JSXIdentifier, ScopedVariableNamer } from "coli"; import { buildStyledComponentConfig } from "@web-builder/styled"; import assert from "assert"; +import { Framework } from "@grida/builder-platform-types"; export interface JSXWithStyleElementConfig { id: string; @@ -46,14 +47,13 @@ interface StylesConfigMapBuilderPreference { * optimizer can be passed here to reduce the output size of the config map. */ export class StylesConfigMapBuilder { - readonly root: JsxWidget; - readonly preferences: StylesConfigMapBuilderPreference; private _map: WidgetStyleConfigMap = new Map(); - constructor(root: JsxWidget, preferences: StylesConfigMapBuilderPreference) { - this.root = root; - this.preferences = preferences; - + constructor( + readonly root: JsxWidget, + readonly preferences: StylesConfigMapBuilderPreference, + readonly framework: Framework + ) { this._mapper(this.root); } @@ -75,6 +75,7 @@ export class StylesConfigMapBuilder { context: { root: isRoot, }, + framework: this.framework, }); // set to map diff --git a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts index 0ad27dd8..06c47ba3 100644 --- a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts +++ b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts @@ -25,6 +25,7 @@ import { import { react as react_config } from "@designto/config"; import { create_duplication_reduction_map } from "@web-builder/styled"; import { makeEsWidgetModuleFile } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; /** * CSS Module Builder for React Framework @@ -54,10 +55,14 @@ export class ReactCssModuleBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: false /** css-module tag shoule not be renamed */, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: false /** css-module tag shoule not be renamed */, + }, + Framework.react + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, create_duplication_reduction_map diff --git a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts index 6339cf66..25360856 100644 --- a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts +++ b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts @@ -26,6 +26,7 @@ import { import { cssToJson } from "@web-builder/styles/_utils"; import { CSSProperties } from "@coli.codes/css"; import { makeEsWidgetModuleFile } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; /** * InlineCss Style builder for React Framework @@ -61,10 +62,14 @@ export class ReactInlineCssBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: false, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: false, + }, + Framework.react + ); } private stylesConfig( diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts index bb2292e7..14d66666 100644 --- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts +++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts @@ -25,6 +25,7 @@ import { create_duplication_reduction_map, } from "@web-builder/styled"; import { makeEsWidgetModuleFile } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; export class ReactStyledComponentsBuilder { private readonly entry: JsxWidget; @@ -48,10 +49,14 @@ export class ReactStyledComponentsBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: true /** styled component tag shoule be renamed */, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: true /** styled component tag shoule be renamed */, + }, + Framework.react + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, 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 fd98832b..f578d6d4 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 @@ -24,6 +24,7 @@ import { EsWidgetModuleExportable, makeEsWidgetModuleFile, } from "@web-builder/module-es"; +import { Framework } from "@grida/builder-platform-types"; export class SolidStyledComponentsBuilder { private readonly entry: JsxWidget; @@ -47,10 +48,14 @@ export class SolidStyledComponentsBuilder { ReservedKeywordPlatformPresets.react ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: true /** styled component tag shoule be renamed */, - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: true /** styled component tag shoule be renamed */, + }, + Framework.solid + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, diff --git a/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts b/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts index b190c8a9..78890246 100644 --- a/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts +++ b/packages/builder-web-styled-components/core/compose-styled-component-declaration.ts @@ -4,11 +4,13 @@ import type { NamePreference } from "./types"; import { handle } from "@coli.codes/builder"; import { StyledComponentDeclaration } from "./styled-component-declaration"; import type { Html5IdentifierNames } from "@coli.codes/jsx-core"; +import { Framework } from "@grida/builder-platform-types"; export function composeStyledComponentVariableDeclaration( widgetConfig: WidgetWithStyle, preferences: { name?: NamePreference; + framework?: Framework; } ): StyledComponentDeclaration { const jsxconfg = widgetConfig.jsxConfig() as StylableJSXElementConfig; @@ -36,6 +38,10 @@ export function composeStyledComponentVariableDeclaration( const should_be_styled = style_data !== null; if (should_be_styled) { return new StyledComponentDeclaration(varname, { + type: + preferences.framework == Framework.solid + ? "parameter-call" + : "tagged-template", style: style_data, identifier: handle(jsxconfg.tag).name as Html5IdentifierNames, }); diff --git a/packages/builder-web-styled-components/core/styled-component-declaration.ts b/packages/builder-web-styled-components/core/styled-component-declaration.ts index a77911bc..a50d7813 100644 --- a/packages/builder-web-styled-components/core/styled-component-declaration.ts +++ b/packages/builder-web-styled-components/core/styled-component-declaration.ts @@ -1,7 +1,10 @@ import { + CallExpression, + HTML5IDENTIFIERNAMES, Html5IdentifierNames, Identifier, PropertyAccessExpression, + StringLiteral, TaggedTemplateExpression, TemplateLiteral, VariableDeclaration, @@ -10,32 +13,46 @@ import { SyntaxKind } from "@coli.codes/core-syntax-kind"; import { CSSProperties, buildCSSStyleData } from "@coli.codes/css"; import { formatStyledTempplateString } from "../formatter"; +type StyledComponentDeclarationInitializerIdentifierOption = + | { + type: "tagged-template"; + identifier: T; + } + | { + type: "parameter-call"; + identifier: Html5IdentifierNames; + }; + +/** + * taggged template - styled.div`${style}` + * parameter call - styled("div")`${style(props)}` (only sting) + */ +export type StyledComponentDeclarationInitializer< + T extends string = Html5IdentifierNames +> = { + style: CSSProperties; +} & StyledComponentDeclarationInitializerIdentifierOption; + export class StyledComponentDeclaration extends VariableDeclaration { static styledIdentifier = new Identifier("styled"); - - styledAccessorIdentifier: Html5IdentifierNames; + private initialization: StyledComponentDeclarationInitializer; constructor( readonly name: string, - params: { - style: CSSProperties; - identifier: Html5IdentifierNames; - } + initializer: StyledComponentDeclarationInitializer ) { super(name, { initializer: StyledComponentDeclaration.makeinitializer( - params.style, - params.identifier + initializer.style, + initializer.identifier, + initializer.type ), kind: SyntaxKind.ConstKeyword, }); - this.styledAccessorIdentifier = params.identifier; + this.initialization = initializer; } - static makeinitializer( - style: CSSProperties, - html5tag: Html5IdentifierNames - ): TaggedTemplateExpression { + static makeStyleBody(style: CSSProperties) { const { main, pseudo } = buildCSSStyleData(style); const pseudos = Object.keys(pseudo).map((k) => { @@ -49,14 +66,46 @@ export class StyledComponentDeclaration extends VariableDeclaration { const body = [main, ...pseudos].join("\n"); const _fmted_body = formatStyledTempplateString(body); - return new TaggedTemplateExpression( - new PropertyAccessExpression( - StyledComponentDeclaration.styledIdentifier, - html5tag - ), - { - template: new TemplateLiteral(`\n${_fmted_body}\n`), + + return _fmted_body; + } + + static makeinitializer( + style: CSSProperties, + identifier: string, + type: StyledComponentDeclarationInitializerIdentifierOption["type"] = "tagged-template" + ): TaggedTemplateExpression { + let tag; + switch (type) { + // styled("div")`${style}` + // styled(Container)`${style}` + case "parameter-call": { + // check if the identifier is a html5 identifier. if not, then do not make it a string literal. + let arg; + if (HTML5IDENTIFIERNAMES.includes(identifier)) { + arg = new StringLiteral(identifier); + } else { + arg = new Identifier(identifier); + } + + tag = new CallExpression( + StyledComponentDeclaration.styledIdentifier, + arg + ); + break; + } + // styled.div`${style}` + case "tagged-template": { + tag = new PropertyAccessExpression( + StyledComponentDeclaration.styledIdentifier, + identifier + ); + break; } - ); + } + + return new TaggedTemplateExpression(tag, { + template: new TemplateLiteral(`\n${this.makeStyleBody(style)}\n`), + }); } } diff --git a/packages/builder-web-styled-components/main.ts b/packages/builder-web-styled-components/main.ts index eaf77cfe..91528015 100644 --- a/packages/builder-web-styled-components/main.ts +++ b/packages/builder-web-styled-components/main.ts @@ -1,5 +1,6 @@ import { handle } from "@coli.codes/builder"; import { ScopedVariableNamer } from "@coli.codes/naming"; +import { Framework } from "@grida/builder-platform-types"; import { WidgetWithStyle } from "@web-builder/core"; import { JSXIdentifier } from "coli"; import { @@ -35,6 +36,7 @@ export function buildStyledComponentConfig( */ root: boolean; }; + framework: Framework; } ): StyledComponentJSXElementConfig | NoStyleJSXElementConfig { const config = widget.jsxConfig() as StyledComponentJSXElementConfig; @@ -49,6 +51,7 @@ export function buildStyledComponentConfig( const styledVar = composeStyledComponentVariableDeclaration(widget, { name: namePref, + framework: preferences.framework, }); if (styledVar) { diff --git a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts index 1d57f382..94b40d10 100644 --- a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts +++ b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts @@ -22,6 +22,7 @@ import { stringfy, StringLiteral, } from "coli"; +import { Framework } from "@grida/builder-platform-types"; interface CssDeclaration { key: { @@ -59,10 +60,14 @@ export class HtmlIdCssModuleBuilder { ReservedKeywordPlatformPresets.html ); - this.stylesMapper = new StylesConfigMapBuilder(entry, { - namer: this.namer, - rename_tag: false, // vanilla html tag will be preserved. - }); + this.stylesMapper = new StylesConfigMapBuilder( + entry, + { + namer: this.namer, + rename_tag: false, // vanilla html tag will be preserved. + }, + Framework.vanilla + ); this.stylesRepository = new StylesRepository( this.stylesMapper.map, From c14a4553f328b2a74c6d721ccdaf6f605865daf0 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 28 Jun 2022 08:00:37 +0900 Subject: [PATCH 29/29] rm logs --- editor/scaffolds/code/index.tsx | 1 - .../solid-styled-components-module-builder.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx index 1950deeb..1af38752 100644 --- a/editor/scaffolds/code/index.tsx +++ b/editor/scaffolds/code/index.tsx @@ -57,7 +57,6 @@ 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. 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 f578d6d4..aeb8aadd 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 @@ -90,7 +90,6 @@ 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 (