@cascateer/core 2.4.7 → 2.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascateer/core",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cascateer/core.git"

package/src/component.ts

@@ -10,8 +10,8 @@ import { asStoreEffects, StoreAdapter, StoreEffects } from "./store";
 import { TerminalAdapter, TerminalEffect } from "./terminal";
 import { Action, Effect } from "./types";
 
-export class ComponentConstructor<Props extends JSX.Props> {
-  constructor(public predicate: UnaryFunction<string, JSX.Component<Props>>) {}
+export interface ComponentConstructor<Props extends JSX.Props> {
+  (key: string): JSX.Component<Props>;
 }
 
 export function createComponent(customElement?: string) {
@@ -23,33 +23,49 @@ export function createComponent(customElement?: string) {
     >(
       constructor: (
         ctx: Context,
-        ...classNamesList: { -readonly [K in keyof Styles]: Awaited<Styles[K]> }
+        ...cn: { -readonly [K in keyof Styles]: Awaited<Styles[K]> }
       ) => JSX.Component<Props>,
     ) =>
-      class extends ComponentConstructor<Props> {
-        constructor(ctx: Context) {
-          super(
-            (key) => (props) =>
-              createFragment({
-                children: defer(() =>
-                  Promise.all(styles).then((cssModules) =>
-                    cssStyleSheets(cssModules).then((cssStyleSheets) => {
-                      const element = constructor(ctx, ...cssModules)(props);
+    (ctx: Context): ComponentConstructor<Props> =>
+    (key) =>
+    (props) =>
+      createFragment({
+        children: defer(() =>
+          Promise.all(styles).then((cssModules) =>
+            cssStyleSheets(cssModules).then((cssStyleSheets) => {
+              const element = constructor(ctx, ...cssModules)(props);
 
-                      return customElement != null
-                        ? new (defineCustomElement(
-                            `${key}-${kebabCase(customElement)}`,
-                          ))(element, cssStyleSheets)
-                        : createFragment({
-                            children: element,
-                          }); /* TODO omit cssModules (whole workflow) */
-                    }),
-                  ),
-                ).pipe(share()),
-              }),
-          );
-        }
-      };
+              return customElement != null
+                ? new (defineCustomElement(
+                    `${key}-${kebabCase(customElement)}`,
+                  ))(element, cssStyleSheets)
+                : createFragment({
+                    children: element,
+                  }); /* TODO omit cssModules (whole workflow) */
+            }),
+          ),
+        ).pipe(share()),
+      });
+
+  return {
+    withStyles: <Styles extends Promise<unknown>[]>(...styles: Styles) => ({
+      withTemplate: withTemplate(...styles),
+    }),
+    withTemplate: withTemplate(),
+  };
+}
+
+export function createStandaloneComponent(customElement?: string) {
+  const withTemplate =
+    <Styles extends Promise<unknown>[]>(...styles: Styles) =>
+    <Props extends JSX.Props>(
+      constructor: (
+        ...cn: { -readonly [K in keyof Styles]: Awaited<Styles[K]> }
+      ) => JSX.Component<Props>,
+    ): ComponentConstructor<Props> =>
+      createComponent(customElement)
+        .withStyles(...styles)
+        .withTemplate<{}, Props>((_, ...cn) => constructor(...cn))({});
 
   return {
     withStyles: <Styles extends Promise<unknown>[]>(...styles: Styles) => ({

package/src/slice.ts

@@ -15,94 +15,106 @@ import { StoreAdapter, StoreProvider } from "./store";
 import { TerminalAdapter, TerminalEffect, TerminalProvider } from "./terminal";
 import { Action } from "./types";
 
-interface SliceConfig<
+interface SliceConfigStore<
   Data,
   StoreSignals extends Dictionary<ComputedSignal<any>>,
   StoreActions extends Dictionary<Action<any, any>>,
+> extends UnaryFunction<
+  {
+    StoreProvider: {
+      new (): StoreProvider<Data>;
+    };
+  },
+  StoreAdapter<StoreSignals, StoreActions>
+> {}
+
+interface SliceConfigApi<
+  ApiEffects extends Dictionary<ApiEffect<any, any>>,
+  ApiActions extends Dictionary<Action<any, any>>,
+> extends ApiAdapter<ApiEffects, ApiActions> {}
+
+interface SliceConfigTerminal<
+  StoreSignals extends Dictionary<ComputedSignal<any>>,
+  StoreActions extends Dictionary<Action<any, any>>,
   ApiEffects extends Dictionary<ApiEffect<any, any>>,
   ApiActions extends Dictionary<Action<any, any>>,
   TerminalEffects extends Dictionary<TerminalEffect<any, any>>,
   TerminalActions extends Dictionary<Action<any, any>>,
-  Components extends Dictionary<ComponentConstructor<any>>,
-> {
-  data: Data;
-  store: UnaryFunction<
-    {
-      StoreProvider: {
-        new (): StoreProvider<Data>;
-      };
-    },
-    StoreAdapter<StoreSignals, StoreActions>
-  >;
-  api: ApiAdapter<ApiEffects, ApiActions>;
-  terminal: UnaryFunction<
-    {
-      TerminalProvider: {
-        new (): TerminalProvider<
-          StoreSignals,
-          StoreActions,
-          ApiEffects,
-          ApiActions
-        >;
-      };
-    },
-    TerminalAdapter<TerminalEffects, TerminalActions>
-  >;
-  components: UnaryFunction<
-    {
-      ComponentsProvider: {
-        new (): ComponentsProvider<
-          StoreSignals,
-          StoreActions,
-          ApiEffects,
-          ApiActions,
-          TerminalEffects,
-          TerminalActions
-        >;
-      };
-    },
-    ComponentsAdapter<Components>
-  >;
-  render: UnaryFunction<
-    {
-      [K in keyof Components]: ReturnType<
-        <
-          Props extends Components[K] extends ComponentConstructor<infer Props>
-            ? Props
-            : never,
-        >() => JSX.Component<Props>
+> extends UnaryFunction<
+  {
+    TerminalProvider: {
+      new (): TerminalProvider<
+        StoreSignals,
+        StoreActions,
+        ApiEffects,
+        ApiActions
       >;
-    },
-    JSX.Element
-  >;
-}
+    };
+  },
+  TerminalAdapter<TerminalEffects, TerminalActions>
+> {}
 
-export const createSlice =
-  <Data>(data: Data) =>
-  <
-    StoreSignals extends Dictionary<ComputedSignal<any>>,
-    StoreActions extends Dictionary<Action<any, any>>,
-    ApiEffects extends Dictionary<ApiEffect<any, any>>,
-    ApiActions extends Dictionary<Action<any, any>>,
-    TerminalEffects extends Dictionary<TerminalEffect<any, any>>,
-    TerminalActions extends Dictionary<Action<any, any>>,
-    Components extends Dictionary<ComponentConstructor<any>>,
-  >(
-    config: Omit<
-      SliceConfig<
-        Data,
+interface SliceConfigComponents<
+  StoreSignals extends Dictionary<ComputedSignal<any>>,
+  StoreActions extends Dictionary<Action<any, any>>,
+  ApiEffects extends Dictionary<ApiEffect<any, any>>,
+  ApiActions extends Dictionary<Action<any, any>>,
+  TerminalEffects extends Dictionary<TerminalEffect<any, any>>,
+  TerminalActions extends Dictionary<Action<any, any>>,
+  Components extends Dictionary<ComponentConstructor<any>>,
+> extends UnaryFunction<
+  {
+    ComponentsProvider: {
+      new (): ComponentsProvider<
         StoreSignals,
         StoreActions,
         ApiEffects,
         ApiActions,
         TerminalEffects,
-        TerminalActions,
-        Components
-      >,
-      "data"
-    >,
-  ): SliceConfig<
-    Data,
+        TerminalActions
+      >;
+    };
+  },
+  ComponentsAdapter<Components>
+> {}
+
+interface SliceConfigTemplate<
+  Components extends Dictionary<ComponentConstructor<any>>,
+> extends UnaryFunction<
+  {
+    [K in keyof Components]: ReturnType<
+      <
+        Props extends Components[K] extends ComponentConstructor<infer Props>
+          ? Props
+          : never,
+      >() => JSX.Component<Props>
+    >;
+  },
+  JSX.Element
+> {}
+
+interface SliceConfig<
+  Data,
+  StoreSignals extends Dictionary<ComputedSignal<any>>,
+  StoreActions extends Dictionary<Action<any, any>>,
+  ApiEffects extends Dictionary<ApiEffect<any, any>>,
+  ApiActions extends Dictionary<Action<any, any>>,
+  TerminalEffects extends Dictionary<TerminalEffect<any, any>>,
+  TerminalActions extends Dictionary<Action<any, any>>,
+  Components extends Dictionary<ComponentConstructor<any>>,
+> {
+  data: Data;
+  store: SliceConfigStore<Data, StoreSignals, StoreActions>;
+  api: SliceConfigApi<ApiEffects, ApiActions>;
+  terminal: SliceConfigTerminal<
+    StoreSignals,
+    StoreActions,
+    ApiEffects,
+    ApiActions,
+    TerminalEffects,
+    TerminalActions
+  >;
+  components: SliceConfigComponents<
     StoreSignals,
     StoreActions,
     ApiEffects,
@@ -110,7 +122,68 @@ export const createSlice =
     TerminalEffects,
     TerminalActions,
     Components
-  > => ({ data, ...config });
+  >;
+  template: SliceConfigTemplate<Components>;
+}
+
+export const createSlice = () => ({
+  withData: <Data>(data: Data) => ({
+    withStore: <
+      StoreSignals extends Dictionary<ComputedSignal<any>>,
+      StoreActions extends Dictionary<Action<any, any>>,
+    >(
+      store: SliceConfigStore<Data, StoreSignals, StoreActions>,
+    ) => ({
+      withApi: <
+        ApiEffects extends Dictionary<ApiEffect<any, any>>,
+        ApiActions extends Dictionary<Action<any, any>>,
+      >(
+        api: SliceConfigApi<ApiEffects, ApiActions>,
+      ) => ({
+        withTerminal: <
+          TerminalEffects extends Dictionary<TerminalEffect<any, any>>,
+          TerminalActions extends Dictionary<Action<any, any>>,
+        >(
+          terminal: SliceConfigTerminal<
+            StoreSignals,
+            StoreActions,
+            ApiEffects,
+            ApiActions,
+            TerminalEffects,
+            TerminalActions
+          >,
+        ) => ({
+          withComponents: <
+            Components extends Dictionary<ComponentConstructor<any>>,
+          >(
+            components: SliceConfigComponents<
+              StoreSignals,
+              StoreActions,
+              ApiEffects,
+              ApiActions,
+              TerminalEffects,
+              TerminalActions,
+              Components
+            >,
+          ) => ({
+            withTemplate: (
+              template: SliceConfigTemplate<Components>,
+            ): SliceConfig<
+              Data,
+              StoreSignals,
+              StoreActions,
+              ApiEffects,
+              ApiActions,
+              TerminalEffects,
+              TerminalActions,
+              Components
+            > => ({ data, store, api, terminal, components, template }),
+          }),
+        }),
+      }),
+    }),
+  }),
+});
 
 export class Slice<
   Data,
@@ -136,7 +209,7 @@ export class Slice<
       api,
       terminal,
       components,
-      render,
+      template,
     }: SliceConfig<
       Data,
       StoreSignals,
@@ -179,7 +252,7 @@ export class Slice<
           map(
             (key) =>
               new (defineCustomElement(`${key}-slice`))(
-                render(
+                template(
                   mapValues(
                     components({
                       ComponentsProvider: ((context) =>
@@ -196,8 +269,7 @@ export class Slice<
                           }
                         })({ store: this.store, api, terminal: this.terminal }),
                     }).components,
-                    (componentConstructor) =>
-                      componentConstructor.predicate(key),
+                    (componentConstructor) => componentConstructor(key),
                   ),
                 ),
               ),