@cascateer/core 2.4.8 → 2.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascateer/core",
-  "version": "2.4.8",
+  "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

@@ -269,8 +269,7 @@ export class Slice<
                           }
                         })({ store: this.store, api, terminal: this.terminal }),
                     }).components,
-                    (componentConstructor) =>
-                      componentConstructor.predicate(key),
+                    (componentConstructor) => componentConstructor(key),
                   ),
                 ),
               ),