@nocobase/client-v2 2.1.0-alpha.30 → 2.1.0-alpha.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.30",
+  "version": "2.1.0-alpha.32",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,17 +24,18 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-alpha.30",
-    "@nocobase/sdk": "2.1.0-alpha.30",
-    "@nocobase/shared": "2.1.0-alpha.30",
+    "@nocobase/flow-engine": "2.1.0-alpha.32",
+    "@nocobase/sdk": "2.1.0-alpha.32",
+    "@nocobase/shared": "2.1.0-alpha.32",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
     "i18next": "^22.4.9",
+    "json5": "^2.2.3",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "292ae0ad87f195ed201b274902d21ecd96f5ddd0"
+  "gitHead": "1ba7d717e156651db17c615f9b9c48edd669d19b"
 }

package/src/BaseApplication.tsx

@@ -356,7 +356,7 @@ export abstract class BaseApplication<
   addRoutes() {
     this.router.add('not-found', {
       path: '*',
-      Component: this.components['AppNotFound'],
+      Component: () => null,
     });
   }
 

package/src/__tests__/app.test.tsx

@@ -72,29 +72,46 @@ describe('app', () => {
     });
   });
 
-  it('should mount the app and display "Not Found"', async () => {
+  it('should mount the base app with blank fallback route', async () => {
     const app = createMockClient();
     const element = document.createElement('div');
     act(() => {
       app.mount(element);
     });
-    await waitFor(() => expect(element.textContent).toContain('Sorry, the page you visited does not exist.'));
+    await waitFor(() => expect(element.querySelector('.ant-app')).not.toBeNull());
+    expect(element.textContent).toBe('');
   });
 
-  it('should render default "Not Found" view', async () => {
+  it('should render blank fallback route by default', async () => {
     const app = createMockClient();
     await renderApp(app);
-    expect(screen.getByText('Sorry, the page you visited does not exist.')).toBeInTheDocument();
+    expect(screen.queryByText('Sorry, the page you visited does not exist.')).not.toBeInTheDocument();
   });
 
-  it('should render custom "Not Found" component', async () => {
+  it('should not render custom "Not Found" component before builtin routes are added', async () => {
     class PluginHelloClient extends Plugin {}
     const app = createMockClient({
       plugins: [PluginHelloClient],
       components: { AppNotFound: () => <div>Not Found2</div> },
     });
     await renderApp(app);
-    expect(screen.getByText('Not Found2')).toBeInTheDocument();
+    expect(screen.queryByText('Not Found2')).not.toBeInTheDocument();
+  });
+
+  it('should render builtin "Not Found" view after builtin routes are added', async () => {
+    const app = createMockClient({
+      plugins: [NocoBaseBuildInPlugin as any],
+      router: { type: 'memory', initialEntries: ['/missing'] },
+    });
+    app.apiMock.onGet('app:getLang').reply(200, {
+      data: {
+        lang: 'en-US',
+        resources: { client: {} },
+        cron: {},
+      },
+    });
+    await renderApp(app);
+    expect(screen.getByText('Sorry, the page you visited does not exist.')).toBeInTheDocument();
   });
 
   it('should support app provider functionality', async () => {

package/src/__tests__/globalDeps.test.ts

@@ -9,6 +9,8 @@
 
 import { defineGlobalDeps } from '../utils/globalDeps';
 
+vi.mock('../index', () => ({}));
+
 describe('client-v2 defineGlobalDeps', () => {
   it('should register shared AMD dependencies for remote plugins', () => {
     const define = vi.fn();
@@ -24,5 +26,8 @@ describe('client-v2 defineGlobalDeps', () => {
     expect(define).toHaveBeenCalledWith('@nocobase/client-v2', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@nocobase/flow-engine', expect.any(Function));
     expect(define).toHaveBeenCalledWith('ahooks', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('dayjs', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('lodash', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@emotion/css', expect.any(Function));
   });
 });

package/src/components/form/JsonTextArea.tsx

@@ -0,0 +1,129 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css, cx } from '@emotion/css';
+import { Input, Typography } from 'antd';
+import type { TextAreaProps } from 'antd/es/input';
+import JSON5 from 'json5';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface JsonTextAreaProps extends Omit<TextAreaProps, 'value' | 'onChange'> {
+  value?: unknown;
+  onChange?: (value: unknown) => void;
+  space?: number;
+  json5?: boolean;
+  showError?: boolean;
+}
+
+const jsonTextAreaClassName = css`
+  font-size: 80%;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+`;
+
+function stringifyJsonValue(value: unknown, json: typeof JSON | typeof JSON5, space: number) {
+  if (value == null) {
+    return '';
+  }
+
+  if (typeof value === 'string') {
+    try {
+      json.parse(value);
+      return value;
+    } catch {
+      return json.stringify(value, undefined, space);
+    }
+  }
+
+  return json.stringify(value, undefined, space);
+}
+
+export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
+  const {
+    value,
+    onChange,
+    space = 2,
+    json5 = false,
+    showError = true,
+    className,
+    status,
+    onBlur,
+    ...textAreaProps
+  } = props;
+  const json = json5 ? JSON5 : JSON;
+  const [text, setText] = useState(() => stringifyJsonValue(value, json, space));
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    setText(stringifyJsonValue(value, json, space));
+  }, [json, space, value]);
+
+  const parseText = useCallback(
+    (nextText: string) => {
+      if (nextText.trim() === '') {
+        return null;
+      }
+
+      return json.parse(nextText);
+    },
+    [json],
+  );
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const nextText = event.target.value;
+      setText(nextText);
+
+      try {
+        parseText(nextText);
+        setError(undefined);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    },
+    [parseText],
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLTextAreaElement>) => {
+      try {
+        const parsed = parseText(event.target.value);
+        setError(undefined);
+        setText(parsed == null ? '' : json.stringify(parsed, undefined, space));
+        onChange?.(parsed);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+
+      onBlur?.(event);
+    },
+    [json, onBlur, onChange, parseText, space],
+  );
+
+  const mergedStatus = useMemo(() => status || (error ? 'error' : undefined), [error, status]);
+
+  return (
+    <>
+      <Input.TextArea
+        {...textAreaProps}
+        value={text}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        status={mergedStatus}
+        className={cx(jsonTextAreaClassName, className)}
+      />
+      {showError && error ? (
+        <Typography.Text type="danger" style={{ display: 'block', marginTop: 4 }}>
+          {error}
+        </Typography.Text>
+      ) : null}
+    </>
+  );
+});
+
+JsonTextArea.displayName = 'JsonTextArea';

package/src/components/index.ts

@@ -10,4 +10,5 @@
 export * from './AppComponents';
 export * from './BlankComponent';
 export * from './Icon';
+export * from './form/JsonTextArea';
 export * from './RouterContextCleaner';