Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial SolidJS support - with styled components #161

Merged
merged 30 commits into from
Jun 28, 2022
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
00a47f2
qf - add "vanilla" as a valid preset key
softmarshmallow Apr 28, 2022
4d216ce
Merge pull request #147 from gridaco/staging
softmarshmallow May 4, 2022
fbeba02
rm invalid import
softmarshmallow May 11, 2022
ade7cb3
update styled-components module docs
softmarshmallow Jun 10, 2022
9f8fc04
bump coli with solid keyword reservations
softmarshmallow Jun 10, 2022
c98d282
typo fix
softmarshmallow Jun 10, 2022
e1d518c
refactor `@web-builder/styled` module
softmarshmallow Jun 10, 2022
80344b0
rename modules & add solid framework config (initial)
softmarshmallow Jun 10, 2022
941b83b
update configuration typings - modularize
softmarshmallow Jun 12, 2022
05173fe
add solidjs package specification
softmarshmallow Jun 26, 2022
52dff0e
add solid styled component import specifier coli const
softmarshmallow Jun 26, 2022
4a598b2
add solidjs on framework config
softmarshmallow Jun 26, 2022
50a9574
update solid framework config with export options
softmarshmallow Jun 26, 2022
7b28815
bump coli
softmarshmallow Jun 26, 2022
3966f04
init `@web-builder/module-es`
softmarshmallow Jun 26, 2022
339600f
add solid pre defined import specifications
softmarshmallow Jun 26, 2022
dc8bdaf
add alias to package dec
softmarshmallow Jun 26, 2022
e679e6f
update author
softmarshmallow Jun 26, 2022
fe03594
init `@designto/solid` package
softmarshmallow Jun 26, 2022
e2da6db
bump coli
softmarshmallow Jun 27, 2022
0ddf42f
update next config with new packages
softmarshmallow Jun 27, 2022
0df4842
add scripting config for solid (disabled)
softmarshmallow Jun 27, 2022
c398f66
update solid framework id
softmarshmallow Jun 27, 2022
5732fb5
mv es widget builder reusable codes
softmarshmallow Jun 27, 2022
f756de9
add solid builder
softmarshmallow Jun 27, 2022
dda308e
bump coli
softmarshmallow Jun 27, 2022
d7419f5
add solid-js as a valid option input
softmarshmallow Jun 27, 2022
4d3969f
bump coli
softmarshmallow Jun 27, 2022
37439db
add parameter call style styled component declaration for solid
softmarshmallow Jun 27, 2022
c14a455
rm logs
softmarshmallow Jun 27, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update configuration typings - modularize
softmarshmallow committed Jun 12, 2022
commit 941b83bc7791680240e76f7830b4f5f45180c6c8
Original file line number Diff line number Diff line change
@@ -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 ... <other-blocks> ... 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;
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 2 additions & 1 deletion packages/builder-config/framework-react/react-config.ts
Original file line number Diff line number Diff line change
@@ -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
9 changes: 9 additions & 0 deletions packages/builder-config/module-es/README.md
Original file line number Diff line number Diff line change
@@ -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)
Original file line number Diff line number Diff line change
@@ -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 ... <other-blocks> ... export { A }
| "end-of-file";
1 change: 1 addition & 0 deletions packages/builder-config/module-es/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./esmodule-config-exporting-component";
11 changes: 11 additions & 0 deletions packages/builder-config/module-jsx/README.md
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions packages/builder-config/module-jsx/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// export * from "./jsx-config";
export * from "./jsx-config-functional-component-declaration";
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export type JsxFunctionalComponentDeclarationConfig =
JsxFunctionalComponentDeclarationStyle;

interface JsxFunctionalComponentDeclarationStyle {
// props: {} vs {} : {}
props_parameter_style: UnwrappedPropsCodeStyle;
}

interface UnwrappedPropsCodeStyle {
style: "unwrapped-props";
}
12 changes: 12 additions & 0 deletions packages/builder-config/module-jsx/jsx-config.ts
Original file line number Diff line number Diff line change
@@ -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;
};
}