@celljs/react 3.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@celljs/react",
+  "version": "3.0.0",
+  "description": "",
+  "main": "lib/browser/index.js",
+  "typings": "lib/browser/index.d.ts",
+  "dependencies": {
+    "@celljs/cli-common": "3.0.0",
+    "@celljs/core": "3.0.0",
+    "@celljs/widget": "3.0.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
+    "autoprefixer": "^10.4.20",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "cssnano": "^7.0.6",
+    "fs-extra": "^11.1.1",
+    "less": "^4.1.1",
+    "less-loader": "^9.0.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "^5.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.0.5",
+    "react-router-dom": "^6.3.0",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^3.3.1",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "cell-component"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cellbang/cell.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cellbang/cell/issues"
+  },
+  "homepage": "https://github.com/cellbang/cell",
+  "files": [
+    "lib",
+    "src",
+    "cell.yml",
+    "cell-cdn.yml"
+  ],
+  "scripts": {
+    "lint": "cell-component lint",
+    "build": "cell-component build",
+    "watch": "cell-component watch",
+    "clean": "cell-component clean",
+    "test": "cell-component test:js"
+  },
+  "devDependencies": {
+    "@celljs/cli-service": "3.0.0",
+    "@celljs/component": "3.0.0"
+  },
+  "gitHead": "c0ef8d269e33a795406bcbb240cac4b845c6c24c"
+}

package/src/browser/annotation/app.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ReactComponent } from './react-component';
+import { APP } from '../app/app-protocol';
+
+export const App =
+    function (component?: React.ComponentType<any>, rebind: boolean = true): ClassDecorator {
+        return (t: any) => {
+            ReactComponent(APP, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/context.ts

@@ -0,0 +1,10 @@
+import { ReactComponent } from './react-component';
+import { CONTEXT } from '../context/context-protocol';
+import * as React from 'react';
+
+export const Context =
+    function (component?: React.ComponentType<any>, rebind: boolean = false): ClassDecorator {
+        return (t: any) => {
+            ReactComponent(CONTEXT, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/default-layout.ts

@@ -0,0 +1,10 @@
+import { ReactComponent } from './react-component';
+import { DEFAULT_LAYOUT } from '../layout/layout-protocol';
+import * as React from 'react';
+
+export const DefaultLayout =
+    function (component?: React.ComponentType<any>, rebind: boolean = true): ClassDecorator {
+        return (t: any) => {
+            ReactComponent(DEFAULT_LAYOUT, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/icon.ts

@@ -0,0 +1,10 @@
+import { ReactComponent } from './react-component';
+import { ICON } from '../icon/icon-protocol';
+import * as React from 'react';
+
+export const Icon =
+    function (component?: React.ComponentType<any>, rebind: boolean = false): ClassDecorator {
+        return (t: any) => {
+            ReactComponent(ICON, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/index.ts

@@ -0,0 +1,8 @@
+export * from './react-component';
+export * from './route';
+export * from './view';
+export * from './router';
+export * from './app';
+export * from './icon';
+export * from './context';
+export * from './default-layout';

package/src/browser/annotation/react-component.ts

@@ -0,0 +1,9 @@
+import { Constant, ComponentId } from '@celljs/core';
+import * as React from 'react';
+
+export const ReactComponent =
+    function (id?: ComponentId | ComponentId[], component?: React.ComponentType<any>, rebind: boolean = false): ClassDecorator {
+        return (t: any) => {
+            Constant(id || t, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/route.ts

@@ -0,0 +1,19 @@
+import { Constant } from '@celljs/core';
+import { RouteMetadata, ROUTE_METADATA } from '../router/router-protocol';
+import { ReactComponent } from './react-component';
+
+export function Route(pathOrRouteMetadata?: string | RouteMetadata, rebind: boolean = false): ClassDecorator {
+    return function (target: any) {
+        let routeMetadata: RouteMetadata;
+        if (typeof pathOrRouteMetadata === 'string') {
+            routeMetadata = { path: pathOrRouteMetadata, priority: 1000 };
+        } else {
+            routeMetadata = <RouteMetadata>{ priority: 1000, isDefaultLayout: true, ...pathOrRouteMetadata };
+        }
+        if (!routeMetadata.component) {
+            routeMetadata.component = target;
+        }
+        Constant(ROUTE_METADATA, routeMetadata, false)(target);
+        ReactComponent('@Route:' + routeMetadata.path, undefined, rebind)(target);
+    };
+}

package/src/browser/annotation/router.ts

@@ -0,0 +1,10 @@
+import { ReactComponent } from './react-component';
+import { ROUTER } from '../router/router-protocol';
+import * as React from 'react';
+
+export const Router =
+    function (component?: React.ComponentType<any>, rebind: boolean = true): ClassDecorator {
+        return (t: any) => {
+            ReactComponent(ROUTER, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/view.ts

@@ -0,0 +1,8 @@
+import { RouteMetadata } from '../router/router-protocol';
+import { Route } from './route';
+
+export function View(pathOrRouteMetadata?: string | RouteMetadata, rebind: boolean = false): ClassDecorator {
+    return function (target: any) {
+        Route(pathOrRouteMetadata, rebind)(target);
+    };
+}

package/src/browser/app/app-protocol.ts

@@ -0,0 +1 @@
+export const APP = Symbol('APP');

package/src/browser/app/app.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ROUTER } from '../router';
+import { Autowired } from '@celljs/core/lib/common/annotation/detached';
+import { App } from '../annotation';
+import { ContextProvider } from '../context';
+
+@App(AppImpl, false)
+export class AppImpl extends React.Component {
+
+    @Autowired(ContextProvider)
+    protected readonly contextProvider: ContextProvider;
+
+    @Autowired(ROUTER)
+    protected readonly router: React.ComponentType;
+
+    override render(): React.ReactNode {
+        return this.createContextAndRouter();
+    }
+
+    protected createContextAndRouter() {
+        let child = React.createElement(this.router);
+        this.contextProvider.provide().forEach((context, index) => child = React.createElement(context, { key: index }, child));
+        return child;
+    }
+}

package/src/browser/app/index.ts

@@ -0,0 +1,2 @@
+export * from './app-protocol';
+export * from './app';

package/src/browser/context/context-protocol.ts

@@ -0,0 +1,8 @@
+
+export const CONTEXT = Symbol('CONTEXT');
+
+export const ContextProvider = Symbol('ContextProvider');
+
+export interface ContextProvider {
+    provide(): React.ComponentType[];
+}

package/src/browser/context/context-provider.ts

@@ -0,0 +1,21 @@
+import { Component, Autowired, Prioritizeable } from '@celljs/core';
+import { ContextProvider, CONTEXT } from './context-protocol';
+
+@Component(ContextProvider)
+export class ContextProviderImpl implements ContextProvider {
+
+    protected prioritized: React.ComponentType[];
+
+    constructor(
+        @Autowired(CONTEXT)
+        protected readonly contexts: React.ComponentType[]
+    ) { }
+
+    provide(): React.ComponentType<any>[] {
+        if (!this.prioritized) {
+            this.prioritized = Prioritizeable.prioritizeAllSync(this.contexts).map(c => c.value);
+        }
+        return this.prioritized;
+    }
+
+}

package/src/browser/context/context.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Context } from '../annotation';
+
+export interface ContextProps extends React.PropsWithChildren {}
+
+export interface ContextState {}
+
+@Context()
+export class NoOpContext extends React.Component<ContextProps, ContextState> {
+
+    static priority = 1000;
+
+    override render(): React.ReactElement<{}> {
+        return <>{this.props.children}</>;
+    }
+}

package/src/browser/context/index.ts

@@ -0,0 +1,3 @@
+export * from './context-protocol';
+export * from './context-provider';
+export * from './context';

package/src/browser/icon/icon-protocol.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ICON = Symbol('Icon');
+
+export const IconResolver = Symbol('IconResolver');
+
+export interface IconResolver<T> {
+    resolve(iconProps: T): Promise<React.ReactNode>;
+}

package/src/browser/icon/icon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ContainerUtil } from '@celljs/core';
+import { IconResolver } from './icon-protocol';
+
+const { useState, useEffect } = React;
+
+export function Icon<T>(iconProps: T) {
+    const [iconNode, setIconNode] = useState<React.ReactNode>([]);
+
+    useEffect(() => {
+        const resolve = async () => {
+            const iconResolver = ContainerUtil.get<IconResolver<T>>(IconResolver);
+            setIconNode(await iconResolver.resolve(iconProps));
+        };
+        resolve();
+    }, [JSON.stringify(iconProps)]);
+
+    return (<>{iconNode}</>);
+}

package/src/browser/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon-protocol';

package/src/browser/index.ts

@@ -0,0 +1,11 @@
+export * from './annotation';
+export * from './app';
+export * from './layout';
+export * from './context';
+export * from './router';
+export * from './shell';
+export * from './resolver';
+export * from './widget';
+export * from './slot';
+export * from './icon';
+export * from './locale';

package/src/browser/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './layout-protocol';
+export * from './layout';

package/src/browser/layout/layout-protocol.ts

@@ -0,0 +1 @@
+export const DEFAULT_LAYOUT = Symbol('DEFAULT_LAYOUT');

package/src/browser/layout/layout.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { DefaultLayout } from '../annotation';
+
+@DefaultLayout(EmptyLayout, false)
+export class EmptyLayout extends React.Component<React.PropsWithChildren> {
+
+    override render() {
+        return <>{this.props.children}</>;
+    }
+}

package/src/browser/locale/index.ts

@@ -0,0 +1,2 @@
+export * from './locale-protocol';
+export * from './locale-context';

package/src/browser/locale/locale-context.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { LOCALE_REACT_CONTEXT_PRIORITY } from './locale-protocol';
+import { IntlProvider } from 'react-intl';
+import { ContainerUtil, Logger } from '@celljs/core';
+import { LocaleManager } from '@celljs/widget';
+import { Context } from '../annotation';
+
+export function LocaleContext({ children }: React.PropsWithChildren) {
+    const localeManager = ContainerUtil.get<LocaleManager>(LocaleManager);
+    const [locale, setLocale] = React.useState(localeManager.currentSubject.value);
+    React.useEffect(() => {
+        const subscription = localeManager.currentSubject.subscribe(l => setLocale(l));
+        return () => subscription.unsubscribe();
+    }, []);
+
+    return (
+        <IntlProvider locale={locale?.lang || navigator.language} messages={locale?.messages} onError={err => {
+            const logger = ContainerUtil.get<Logger>(Logger);
+            if (err.code !== 'MISSING_TRANSLATION') {
+                logger.warn(err);
+            }
+        }}>
+            {children}
+        </IntlProvider>);
+}
+
+LocaleContext.priority = LOCALE_REACT_CONTEXT_PRIORITY;
+
+@Context(LocaleContext)
+export default class {}

package/src/browser/locale/locale-protocol.ts

@@ -0,0 +1 @@
+export const LOCALE_REACT_CONTEXT_PRIORITY = 3000;

package/src/browser/module.ts

@@ -0,0 +1,4 @@
+import './index';
+import { autoBind } from '@celljs/core';
+
+export default autoBind();

package/src/browser/resolver/index.ts

@@ -0,0 +1,2 @@
+export * from './resolver-protocol';
+export * from './path-resolver';

package/src/browser/resolver/path-resolver.ts

@@ -0,0 +1,13 @@
+import { PathResolver } from './resolver-protocol';
+import { Value, Component, UrlUtil } from '@celljs/core';
+
+@Component(PathResolver)
+export class PathResolverImpl implements PathResolver {
+
+    @Value('cell.react.path')
+    protected readonly path: string;
+
+    resolve(...parts: string[]): string {
+        return UrlUtil.join(this.path, ...parts.filter(v => !!v));
+    }
+}

package/src/browser/resolver/resolver-protocol.ts

@@ -0,0 +1,5 @@
+export const PathResolver = Symbol('PathResolver');
+
+export interface PathResolver {
+    resolve(...parts: string[]): string;
+}

package/src/browser/router/index.ts

@@ -0,0 +1,5 @@
+export * from './router-protocol';
+export * from './route-metadata-provider';
+export * from './router';
+export * from './route-metadata-converter-provider';
+export * from './route-metadata-converter';

package/src/browser/router/route-metadata-converter-provider.ts

@@ -0,0 +1,19 @@
+import { Component, Autowired, Prioritizeable, Optional } from '@celljs/core';
+import { RouteMetadataConverterProvider, RouteMetadataConverter } from './router-protocol';
+
+@Component(RouteMetadataConverterProvider)
+export class RouteMetadataConverterProviderImpl implements RouteMetadataConverterProvider {
+
+    protected prioritized: RouteMetadataConverter[];
+
+    @Autowired(RouteMetadataConverter) @Optional()
+    protected readonly routeMetadataConverters: RouteMetadataConverter[] = [];
+
+    provide(): RouteMetadataConverter[] {
+        if (!this.prioritized) {
+            this.prioritized = Prioritizeable.prioritizeAllSync(this.routeMetadataConverters).map(c => c.value);
+        }
+        return this.prioritized;
+    }
+
+}

package/src/browser/router/route-metadata-converter.ts

@@ -0,0 +1,34 @@
+import { Autowired, Component, Value } from '@celljs/core';
+import { DEFAULT_LAYOUT } from '../layout';
+import { PathResolver } from '../resolver';
+import { RouteMetadata, RouteMetadataConverter } from './router-protocol';
+
+@Component(RouteMetadataConverter)
+export class DefaultRouteMetadataConverter implements RouteMetadataConverter {
+    readonly priority: number = 500;
+
+    @Autowired(PathResolver)
+    protected readonly pathResolver: PathResolver;
+
+    @Autowired(DEFAULT_LAYOUT)
+    protected readonly defaultLayout: React.ComponentType;
+
+    @Value('cell.react.router.routes')
+    protected readonly routes: any;
+
+    convert(metadata: RouteMetadata): RouteMetadata {
+        if (metadata.path) {
+            metadata.path = this.pathResolver.resolve(metadata.path);
+        }
+        metadata.layout = metadata.layout || this.defaultLayout;
+        return metadata;
+    }
+
+    protected getMergedConfig(routeMetadata: RouteMetadata): RouteMetadata {
+        if (!this.routes || !routeMetadata.path) {
+            return routeMetadata;
+        }
+
+        return { ...routeMetadata, ...this.routes[routeMetadata.path] };
+    }
+}

package/src/browser/router/route-metadata-provider.tsx

@@ -0,0 +1,39 @@
+import { Component, Autowired, Prioritizeable } from '@celljs/core';
+import { RouteMetadataProvider, RouteMetadata, RouteMetadataConverterProvider, ROUTE_METADATA } from './router-protocol';
+
+@Component(RouteMetadataProvider)
+export class RouteMetadataProviderImpl implements RouteMetadataProvider {
+
+    protected prioritized: RouteMetadata[];
+
+    @Autowired(ROUTE_METADATA)
+    protected readonly routeMetadatas: RouteMetadata[];
+
+    @Autowired(RouteMetadataConverterProvider)
+    protected readonly routeMetadataConverterProvider: RouteMetadataConverterProvider;
+
+    provide(): RouteMetadata[] {
+        if (!this.prioritized) {
+            this.prioritized = this.parseRouteMetadatas();
+        }
+        return this.prioritized;
+    }
+
+    protected parseRouteMetadatas(): RouteMetadata[] {
+        const list: RouteMetadata[] = [];
+        for (const routeMetadata of this.routeMetadatas) {
+            let parsed = routeMetadata;
+            for (const converter of this.routeMetadataConverterProvider.provide()) {
+                parsed = converter.convert(parsed);
+            }
+            list.push(parsed);
+        }
+
+        return this.sort(list);
+
+    }
+
+    protected sort(list: RouteMetadata[]) {
+        return Prioritizeable.prioritizeAllSync(list).map(c => c.value);
+    }
+}

package/src/browser/router/router-protocol.ts

@@ -0,0 +1,28 @@
+export const ROUTER = Symbol('Router');
+export const ROUTE_METADATA = Symbol('ROUTE_METADATA');
+
+export const RouteMetadataProvider = Symbol('RouteMetadataProvider');
+export const RouteMetadataConverter = Symbol('RouteMetadataConverter');
+export const RouteMetadataConverterProvider = Symbol('RouteMetadataConverterProvider');
+
+export interface RouteMetadata {
+    caseSensitive?: boolean;
+    index?: boolean;
+    path?: string;
+    component?: React.ComponentType;
+    layout?: React.ComponentType;
+    priority?: number;
+}
+
+export interface RouteMetadataConverter {
+    readonly priority: number;
+    convert(metadata: RouteMetadata): RouteMetadata;
+}
+
+export interface RouteMetadataConverterProvider {
+    provide(): RouteMetadataConverter[];
+}
+
+export interface RouteMetadataProvider {
+    provide(): RouteMetadata[];
+}

package/src/browser/router/router.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { RouteMetadataProvider } from './router-protocol';
+import { useRoutes, BrowserRouter, HashRouter, RouteObject } from 'react-router-dom';
+import { Router } from '../annotation';
+import { ConfigUtil, ContainerUtil } from '@celljs/core';
+
+const routerMap = {
+    browser: BrowserRouter,
+    hash: HashRouter
+};
+
+const RouteComponent = () => {
+    const element = useRoutes(buildRoutes());
+    return element;
+};
+
+const RouterComponent = () => {
+    const routerType = ConfigUtil.get<'browser' | 'hash'>('cell.react.router.type');
+    return React.createElement(routerMap[routerType], {}, React.createElement(RouteComponent));
+};
+
+const buildRoutes = (): RouteObject[] => {
+    const routeMetadataProvider = ContainerUtil.get<RouteMetadataProvider>(RouteMetadataProvider);
+    return routeMetadataProvider.provide().map(metadata => {
+        // eslint-disable-next-line no-null/no-null
+        let element: React.ReactNode | null;
+        if (metadata.component) {
+            if (metadata.layout) {
+                element = React.createElement(metadata.layout, {}, React.createElement(metadata.component));
+            } else {
+                element = React.createElement(metadata.component);
+            }
+        }
+        return {
+            path: metadata.path,
+            index: metadata.index,
+            caseSensitive: metadata.caseSensitive,
+            element
+        };
+    });
+};
+
+@Router(RouterComponent, false)
+export default class {}

package/src/browser/shell/index.ts

@@ -0,0 +1 @@
+export * from './shell';

package/src/browser/shell/shell.tsx

@@ -0,0 +1,16 @@
+import { ApplicationShell } from '@celljs/core/lib/browser';
+import { Component, Autowired } from '@celljs/core';
+import { createRoot } from 'react-dom/client';
+import * as React from 'react';
+import { APP } from '../app';
+
+@Component({ id: ApplicationShell, rebind: true })
+export class Shell implements ApplicationShell {
+
+    @Autowired(APP)
+    protected readonly app: React.ComponentType;
+
+    attach(host: HTMLElement): void {
+        createRoot(host).render(React.createElement(this.app));
+    }
+}

package/src/browser/slot/index.ts

@@ -0,0 +1 @@
+export * from './slot';

package/src/browser/slot/slot.tsx

@@ -0,0 +1,18 @@
+import { ContainerUtil } from '@celljs/core';
+import * as React from 'react';
+import { WidgetManager } from '@celljs/widget';
+const { useState, useEffect } = React;
+
+export function Slot({ area }: { area: string }) {
+    const [nodes, setNodes] = useState<React.ReactNode[]>([]);
+
+    useEffect(() => {
+        const load = async () => {
+            const widgetManager = ContainerUtil.get<WidgetManager<React.ReactNode>>(WidgetManager);
+            setNodes(await widgetManager.render(area));
+        };
+        load();
+    }, [area]);
+
+    return (<>{nodes.map(n => n)}</>);
+}

package/src/browser/widget/index.ts

@@ -0,0 +1 @@
+export * from './widget-factory';

package/src/browser/widget/widget-factory.ts

@@ -0,0 +1,13 @@
+import { Component } from '@celljs/core';
+import * as React from 'react';
+import { AbstractWidgetFactory, WidgetFactory, WidgetModel } from '@celljs/widget';
+
+@Component(WidgetFactory)
+export class DecoratorWidgetFactory extends AbstractWidgetFactory<React.ReactNode> {
+
+    protected async doRender(widgetModel: WidgetModel): Promise<React.ReactNode> {
+        const component = widgetModel.matedata!.component;
+        return React.createElement(component,  { key: widgetModel.id,  ...widgetModel.props });
+    }
+
+}