add inline css builder (attributes modification not ready)

Author: softmarshmallow

packages/builder-web-core/builders/build-jsx-tree.ts

@@ -60,6 +60,14 @@ export function buildContainingJsx(
   }
 }
 
+/**
+ *
+ * A Utility-like general jsx builder globally used while building html tree.
+ *
+ * @param widget
+ * @param repository
+ * @returns
+ */
 export function buildJsx(
   widget: JsxWidget,
   repository: {

packages/builder-web-react/index.ts

@@ -1,4 +1,5 @@
 export * from "./react-styled-component-widget";
+export * from "./react-inline-css-widget";
 export * from "./react-import-specifications";
 export * from "./react-project";
 export * from "./widgets-native";

packages/builder-web-react/react-inline-css-widget/from-static-widget-tree.ts

@@ -0,0 +1,20 @@
+import { JsxWidget } from "@web-builder/core";
+import { react as react_config } from "@designto/config";
+import { ReactCssInJSBuilder } from "./react-inline-css-module-builder";
+
+export function finalizeReactWidget_InlineCss(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: react_config.ReactInlineCssConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+) {
+  const builder = new ReactCssInJSBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}

packages/builder-web-react/react-inline-css-widget/index.ts

@@ -1 +1,2 @@
 export * from "./react-inline-css-module-builder";
+export * from "./from-static-widget-tree";

packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts

@@ -1,5 +1,22 @@
+import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
 import { react as react_config } from "@designto/config";
 import type { JsxWidget } from "@web-builder/core";
+import {
+  buildJsx,
+  getWidgetStylesConfigMap,
+  JSXWithoutStyleElementConfig,
+  JSXWithStyleElementConfig,
+  WidgetStyleConfigMap,
+} from "@web-builder/core/builders";
+import {
+  BlockStatement,
+  ImportDeclaration,
+  Return,
+  ScopedVariableNamer,
+} from "coli";
+import { react_imports } from "../react-import-specifications";
+import { ReactWidgetModuleExportable } from "../react-module";
+import { makeReactModuleFile, ReactModuleFile } from "../react-module-file";
 
 /**
  * CSS In JS Style builder for React Framework
@@ -15,7 +32,10 @@ import type { JsxWidget } from "@web-builder/core";
  */
 export class ReactCssInJSBuilder {
   private readonly entry: JsxWidget;
+  private readonly widgetName: string;
   readonly config: react_config.ReactInlineCssConfig;
+  private readonly namer: ScopedVariableNamer;
+  private readonly styledConfigWidgetMap: WidgetStyleConfigMap;
 
   constructor({
     entry,
@@ -25,6 +45,82 @@ export class ReactCssInJSBuilder {
     config: react_config.ReactInlineCssConfig;
   }) {
     this.entry = entry;
+    this.widgetName = entry.key.name;
     this.config = config;
+    this.namer = new ScopedVariableNamer(
+      entry.key.id,
+      ReservedKeywordPlatformPresets.react
+    );
+    this.styledConfigWidgetMap = getWidgetStylesConfigMap(entry, {
+      namer: this.namer,
+      rename_tag: false,
+    });
+  }
+
+  private styledConfig(
+    id: string
+  ): JSXWithStyleElementConfig | JSXWithoutStyleElementConfig {
+    return this.styledConfigWidgetMap.get(id);
+  }
+
+  private jsxBuilder(widget: JsxWidget) {
+    // TODO: add attributes transformer, inject style={{ ...}}
+    return buildJsx(widget, {
+      styledConfig: (id) => this.styledConfig(id),
+    });
+  }
+
+  partImports() {
+    return [react_imports.import_react_from_react];
+  }
+
+  partBody(): BlockStatement {
+    let jsxTree = this.jsxBuilder(this.entry);
+    return new BlockStatement(new Return(jsxTree));
+  }
+
+  asExportableModule() {
+    const body = this.partBody();
+    const imports = this.partImports();
+    return new ReactInlineCssWidgetModuleExportable(this.widgetName, {
+      body,
+      imports,
+    });
+  }
+}
+
+export class ReactInlineCssWidgetModuleExportable extends ReactWidgetModuleExportable {
+  constructor(
+    name,
+    {
+      body,
+      imports,
+    }: {
+      body: BlockStatement;
+      imports: ImportDeclaration[];
+    }
+  ) {
+    super({
+      name,
+      body,
+      imports,
+    });
+  }
+
+  asFile({
+    exporting,
+  }: {
+    exporting: react_config.ReactComponentExportingCofnig;
+  }) {
+    return makeReactModuleFile({
+      name: this.name,
+      path: "src/components",
+      imports: this.imports,
+      declarations: [],
+      body: this.body,
+      config: {
+        exporting: exporting,
+      },
+    });
   }
 }

packages/builder-web-react/react-module-file/index.ts

@@ -1,7 +1,111 @@
-import { SourceFile } from "coli";
+import {
+  SourceFile,
+  BlockStatement,
+  FunctionDeclaration,
+  Import,
+  ImportDeclaration,
+  Return,
+  Declaration,
+} from "coli";
+import { SyntaxKind } from "@coli.codes/core-syntax-kind";
+import { react as react_config } from "@designto/config";
+import {
+  add_export_keyword_modifier_to_declaration,
+  wrap_with_export_assignment_react_component_identifier,
+} from "../react-component-exporting";
 
 export class ReactModuleFile extends SourceFile {
   constructor({ name, path }: { name: string; path: string }) {
     super({ name, path });
   }
 }
+
+export function makeReactModuleFile({
+  name,
+  path,
+  imports,
+  body,
+  declarations,
+  config,
+}: {
+  name: string;
+  path: string;
+  imports: ImportDeclaration[];
+  body: BlockStatement;
+  declarations: Declaration[];
+  config: {
+    exporting: react_config.ReactComponentExportingCofnig;
+  };
+}) {
+  const { exporting } = config;
+  const file = new ReactModuleFile({
+    name: `${name}.tsx`,
+    path: path,
+  });
+  file.imports(...imports);
+
+  // console.log("exporting", exporting);
+  switch (exporting.type) {
+    case "export-default-anonymous-functional-component": {
+      // exporting.declaration_syntax_choice;
+      // exporting.export_declaration_syntax_choice;
+      // exporting.exporting_position;
+
+      const export_default_anaonymous_functional_component =
+        new FunctionDeclaration(undefined, {
+          body: body,
+          modifiers: {
+            default: SyntaxKind.DefaultKeyword,
+            export: SyntaxKind.ExportKeyword,
+          },
+        });
+      file.declare(export_default_anaonymous_functional_component);
+      file.declare(...declarations);
+      break;
+    }
+    case "export-named-functional-component": {
+      // exporting.declaration_syntax_choice;
+      // exporting.export_declaration_syntax_choice;
+
+      const named_function_declaration = new FunctionDeclaration(name, {
+        body: body,
+      });
+
+      switch (exporting.exporting_position) {
+        case "after-declaration":
+          file.declare(named_function_declaration);
+          file.export(
+            wrap_with_export_assignment_react_component_identifier(
+              named_function_declaration.id
+            )
+          );
+          file.declare(...declarations);
+          break;
+        case "end-of-file":
+          file.declare(named_function_declaration);
+          file.declare(...declarations);
+          file.export(
+            wrap_with_export_assignment_react_component_identifier(
+              named_function_declaration.id
+            )
+          );
+          break;
+        case "with-declaration":
+          const _exported_named_function_declaration =
+            add_export_keyword_modifier_to_declaration<FunctionDeclaration>(
+              named_function_declaration
+            );
+          file.declare(_exported_named_function_declaration);
+          file.declare(...declarations);
+          break;
+      }
+      break;
+    }
+    case "export-named-class-component":
+      break;
+    case "export-anonymous-class-component":
+      throw new Error("Class component not supported");
+  }
+
+  return file;
+}

packages/builder-web-react/react-module/index.ts

@@ -0,0 +1 @@
+export * from "./react-exportable-module-declaration";

packages/builder-web-react/react-module/react-exportable-module-declaration.ts

@@ -0,0 +1,46 @@
+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,
+    };
+  }
+}

…onent-widget/from-vanilla-widget-tree.ts …ponent-widget/from-static-widget-tree.tspackages/builder-web-react/react-styled-component-widget/from-vanilla-widget-tree.ts renamed to packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts packages/builder-web-react/react-styled-component-widget/from-vanilla-widget-tree.ts renamed to packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts

@@ -1,6 +1,6 @@
 import { JsxWidget, StylableJsxWidget } from "@web-builder/core";
 import { ReactComponentExportResult } from "../export-result";
-import { react } from "@designto/config";
+import { react as react_config } from "@designto/config";
 import { ReactStyledComponentsBuilder } from "./react-styled-components-module-builder";
 
 /**
@@ -15,8 +15,8 @@ export function finalizeReactWidget_StyledComponents(
     styling,
     exporting,
   }: {
-    styling: react.ReactStyledComponentsConfig;
-    exporting: react.ReactComponentExportingCofnig;
+    styling: react_config.ReactStyledComponentsConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
   }
 ): ReactComponentExportResult {
   const builder = new ReactStyledComponentsBuilder({ entry, config: styling });

packages/builder-web-react/react-styled-component-widget/index.ts

@@ -1,2 +1,2 @@
-export * from "./from-vanilla-widget-tree";
+export * from "./from-static-widget-tree";
 export * from "./from-reusable-widget-tree";