[WIP] Support module

packages/builder-react-native/index.ts

@@ -2,6 +2,14 @@ export * from "./rn-import-specifications";
 export * from "./rn-widgets";
 
 // building strategies
-export * from "./rn-build-inline-style-widget";
-export * from "./rn-build-stylesheet-widget";
-export * from "./rn-build-styled-component-widget";
+import with_inline_style from "./rn-build-inline-style-widget";
+import with_stylesheet from "./rn-build-stylesheet-widget";
+import with_styled_components from "./rn-build-styled-component-widget";
+
+const finilize = {
+  with_inline_style,
+  with_stylesheet,
+  with_styled_components,
+} as const;
+
+export default finilize;

packages/builder-react-native/rn-build-inline-style-widget/index.ts

@@ -1 +1,31 @@
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import {
+  react as react_config,
+  reactnative as reactnative_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeInlineStyleBuilder,
+  ReactNativeInlineStyleWidgetModuleExportable,
+} from "./rn-inline-style-module-builder";
+
+export default function finalizeReactNativeWidget_InlineStyle(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: reactnative_config.ReactNativeInlineStyleConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+) {
+  const builder = new ReactNativeInlineStyleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeInlineStyleBuilder,
+  ReactNativeInlineStyleWidgetModuleExportable,
+};

packages/builder-react-native/rn-build-styled-component-widget/index.ts

@@ -1 +1,38 @@
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import {
+  reactnative as rn_config,
+  react as react_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeStyledComponentsModuleBuilder,
+  ReactNativeStyledComponentWidgetModuleExportable,
+} from "./rn-styled-components-module-builder";
+
+/**
+ * standard `StyleSheet.create` pattern for react-native
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export default function finalizeReactNativeWidget_StyledComponents(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: rn_config.ReactNativeStyledComponentsConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+): ReactComponentExportResult {
+  const builder = new ReactNativeStyledComponentsModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeStyledComponentsModuleBuilder,
+  ReactNativeStyledComponentWidgetModuleExportable,
+};

packages/builder-react-native/rn-build-stylesheet-widget/index.ts

@@ -1,2 +1,38 @@
-export * from "./from-static-widget-tree";
-export * from "./rn-style-sheet-module-builder";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import {
+  reactnative as rn_config,
+  react as react_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeStyleSheetModuleBuilder,
+  ReactNativeStyleSheeteWidgetModuleExportable,
+} from "./rn-style-sheet-module-builder";
+
+/**
+ * standard `StyleSheet.create` pattern for react-native
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export default function finalizeReactNativeWidget_StyleSheet(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: rn_config.ReactNativeStyleSheetConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+): ReactComponentExportResult {
+  const builder = new ReactNativeStyleSheetModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeStyleSheetModuleBuilder,
+  ReactNativeStyleSheeteWidgetModuleExportable,
+};

packages/builder-web-react/index.ts

@@ -1,5 +1,32 @@
-export * from "./react-styled-component-widget";
-export * from "./react-inline-css-widget";
-export * from "./react-css-module-widget";
+import with_styled_components from "./react-styled-component-widget";
+import with_inline_css from "./react-inline-css-widget";
+import with_css_module from "./react-css-module-widget";
+import type { JsxWidget } from "@web-builder/core";
+import type {
+  ReactComponentExportingCofnig,
+  ReactStyledComponentsConfig,
+  ReactInlineCssConfig,
+  ReactCssModuleConfig,
+  ReactStylingStrategy,
+} from "@grida/builder-config/framework-react";
+import type { ReactComponentExportResult } from "@web-builder/react-core";
+
+const finilize = {
+  with_styled_components:
+    with_styled_components as BuilderFunc<ReactStyledComponentsConfig>,
+  with_inline_css: with_inline_css as BuilderFunc<ReactInlineCssConfig>,
+  with_css_module: with_css_module as BuilderFunc<ReactCssModuleConfig>,
+};
+
+type BuilderFunc<S extends ReactStylingStrategy = ReactStylingStrategy> = (
+  entry: JsxWidget,
+  config: {
+    styling: S;
+    exporting: ReactComponentExportingCofnig;
+  }
+) => ReactComponentExportResult;
+
+export default finilize;
+export type { BuilderFunc };
 export * from "./widgets-native";
 export * from "./widgets-reflect-react";

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

@@ -1,2 +1,25 @@
-export * from "./from-static-widget-tree";
-export * from "./react-css-module-module-builder";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import { react as react_config } from "@grida/builder-config";
+import {
+  ReactCssModuleBuilder,
+  ReactCssModuleWidgetModuleExportable,
+} from "./react-css-module-module-builder";
+
+interface Config {
+  styling: react_config.ReactCssModuleConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
+/**
+ * css-module pattern with
+ */
+export default function finalizeReactWidget_CssModule(
+  entry: JsxWidget,
+  { styling, exporting }: Config
+): ReactComponentExportResult {
+  const builder = new ReactCssModuleBuilder({ entry, config: styling });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export { ReactCssModuleBuilder, ReactCssModuleWidgetModuleExportable };

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

@@ -1,2 +1,24 @@
-export * from "./react-inline-css-module-builder";
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import { react as react_config } from "@grida/builder-config";
+import {
+  ReactInlineCssBuilder,
+  ReactInlineCssWidgetModuleExportable,
+} from "./react-inline-css-module-builder";
+
+interface Config {
+  styling: react_config.ReactInlineCssConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
+export default function finalizeReactWidget_InlineCss(
+  entry: JsxWidget,
+  { styling, exporting }: Config
+) {
+  const builder = new ReactInlineCssBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export { ReactInlineCssBuilder, ReactInlineCssWidgetModuleExportable };

packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts

@@ -1,9 +1,13 @@
+////
+//// LEGACY
+////
+
 import {
   InstanceMetaToken,
   InstanceWidget,
 } from "@code-features/component/tokens/token-instance";
 import { MasterComponentWidget } from "@code-features/component/tokens/token-master-component";
-import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
+import { buildWebWidgetFromTokens } from "@designto/web";
 import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
 
 /**