feat: create instanceService (#733)

* feat: create instanceService

* feat: improve the interface

* refactor: improve the inject initial values of localeService

* refactor: improve the localeService

* test: update test cases

* refactor: make provider compatible with create function

* fix: provider should create in useLayoutEffect rather that useEffect

* test: add test cases for instanceService

* test: increase code coverage

* chore: add module.hot.accept

* refactor: fix website generate api structure

* build: fix web script failed

* docs: add builtin doc

README-koKR.md

@@ -50,14 +50,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

README-zhCN.md

@@ -49,14 +49,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extension={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

README.md

@@ -49,14 +49,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

build/web/app.js

@@ -1,14 +1,17 @@
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
-import { Workbench, MoleculeProvider } from '../../esm';
+import { create, Workbench } from '../../esm';
 import '../../esm/style/mo.css';
 
-const App = () => (
+const moInstance = create({
+    extensions: [],
+});
+
+export const App = () => moInstance.render(<Workbench />);
+
+ReactDOM.render(
     <StrictMode>
-        <MoleculeProvider>
-            <Workbench />
-        </MoleculeProvider>
-    </StrictMode>
+        <App />
+    </StrictMode>,
+    document.getElementById('root')
 );
-
-ReactDOM.render(<App />, document.getElementById('root'));

src/controller/settings.tsx

@@ -69,6 +69,7 @@ export class SettingsController
             id: SETTING_ID!,
             value: next,
             render(value) {
+                /* istanbul ignore next */
                 return <LocaleNotification key={next.id} locale={next.name} />;
             },
         };

src/extensions/__tests__/folderTree.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import molecule, { MoleculeProvider, Workbench } from 'mo';
+import molecule, { create, Workbench } from 'mo';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import type { ITreeNodeItemProps } from 'mo/components';
 import type { IEditorTab } from 'mo/model/workbench/editor';
@@ -35,11 +35,10 @@ describe('folderTree extension', () => {
     afterEach(cleanup);
 
     test('Execute the listener function of onUpdateFileName', () => {
-        const { getByRole } = render(
-            <MoleculeProvider>
-                <Workbench />
-            </MoleculeProvider>
-        );
+        const container = create({
+            extensions: [],
+        }).render(<Workbench />);
+        const { getByRole } = render(container);
 
         molecule.folderTree.setState({ folderTree: { data: mockTreeData } });
         expect(molecule.folderTree.getState().folderTree?.data).toEqual(

src/i18n/__tests__/localeService.test.ts

@@ -1,15 +1,27 @@
 import 'reflect-metadata';
 import { container } from 'tsyringe';
+import { expectLoggerErrorToBeCalled } from '@test/utils';
+import { ILocale } from '../localization';
 import { LocaleService } from '..';
-import { BuiltInLocales, BuiltInDefault, ILocale } from '../localization';
 
 describe('The Locale Service', () => {
-    const TestLocale = {
+    const TestLocale: ILocale = {
         id: 'test',
         source: new Map(),
         name: 'test',
     };
 
+    // LocaleService is support to add an object source but ILocale is banned
+    const TestEnLocale: ILocale = {
+        id: 'en',
+        name: 'English',
+        source: {
+            // @ts-ignore
+            'molecule.welcome': 'Welcome to Molecule',
+            'test.id': 'hello ${i}',
+        },
+    };
+
     afterEach(() => {
         localStorage.clear();
     });
@@ -19,82 +31,72 @@ describe('The Locale Service', () => {
         expect(localeService).not.toBeUndefined();
     });
 
-    test('Reset the LocaleService', () => {
+    test('Initialize the locales with testLocale', () => {
         const localeService = new LocaleService();
-        expect(localeService.getCurrentLocale()!.id).toBe(BuiltInDefault.id);
-        localeService.reset();
-        expect(localeService.getCurrentLocale()!.id).toBe(BuiltInDefault.id);
-    });
+        localeService.initialize([TestLocale], TestLocale.id);
 
-    test('Get default Locale', () => {
-        const localeService = new LocaleService();
-        const defaultLocale = localeService.getDefaultLocale();
-        expect(defaultLocale).toEqual(BuiltInDefault);
-    });
+        expect(localeService.getCurrentLocale()?.id).toEqual(TestLocale.id);
+        expect(localeService.getLocales().length).toBe(1);
 
-    test('Get default Locales', () => {
-        const localeService = new LocaleService();
-        const defaultLocale = localeService.getDefaultLocales();
-        expect(defaultLocale).toEqual(BuiltInLocales);
+        localeService.reset();
+        expectLoggerErrorToBeCalled(() => {
+            // @ts-ignore
+            localeService.initialize([TestEnLocale, TestLocale]);
+        });
     });
 
-    test('The size of Built-in Locales should be 3', () => {
+    test('Reset the LocaleService', () => {
         const localeService = new LocaleService();
-        const locales = localeService.getLocales();
-        expect(locales.length).toBe(3);
-    });
+        expect(localeService.getCurrentLocale()).toBeUndefined();
 
-    test('Initialize the locales', () => {
-        const localeService = new LocaleService();
-        localeService.initialize([TestLocale]);
-        expect(localeService.getCurrentLocale()!.id).toEqual(
-            localeService.getDefaultLocale().id
-        );
-        expect(localeService.getLocales().length).toBe(4);
-        localeService.initialize([], 'test');
-        expect(localeService.getCurrentLocale()!.id).toEqual(BuiltInDefault.id);
-        // Clear the cached locale value
-        localStorage.clear();
-        localeService.initialize([], 'test');
-        expect(localeService.getCurrentLocale()!.id).toEqual('test');
-        localeService.initialize([]);
-        // Get from the localStorage cache
-        expect(localeService.getCurrentLocale()!.id).toEqual('test');
+        localeService.initialize([TestLocale], TestLocale.id);
+        expect(localeService.getCurrentLocale()).toEqual(TestLocale);
+
+        localeService.reset();
+        expect(localeService.getCurrentLocale()).toBeUndefined();
     });
 
     test('Get/Set current locale', () => {
         const localeService = new LocaleService();
-        (localeService as any)._current = undefined;
-        expect(localeService.getCurrentLocale()).toBe(BuiltInDefault);
-        localeService.addLocales([TestLocale]);
-        localeService.setCurrentLocale(TestLocale.id);
-        expect(localeService.getCurrentLocale()!.id).toEqual(TestLocale.id);
+        expect(localeService.getCurrentLocale()).toBeUndefined();
+
+        localeService.initialize([TestLocale, TestEnLocale], TestLocale.id);
+
+        expect(localeService.getCurrentLocale()?.id).toEqual(TestLocale.id);
 
+        localeService.setCurrentLocale(TestEnLocale.id);
+        expect(localeService.getCurrentLocale()?.id).toEqual(TestEnLocale.id);
+        // set an unknow locale will fail
         expect(localeService.setCurrentLocale('unknown')).toEqual(false);
     });
 
     test('Add locales', () => {
         const localeService = new LocaleService();
-        expect(localeService.getLocales().length).toBe(3);
+        expect(localeService.getLocales().length).toBe(0);
+
         localeService.addLocales([TestLocale]);
-        expect(localeService.getLocales().length).toBe(4);
+        expect(localeService.getLocales().length).toBe(1);
+
         localeService.addLocales([]);
-        expect(localeService.getLocales().length).toBe(4);
+        expect(localeService.getLocales().length).toBe(1);
+
         // Add an existed locale
         localeService.addLocales([TestLocale]);
-        expect(localeService.getLocales().length).toBe(4);
+        expect(localeService.getLocales().length).toBe(1);
     });
 
     test('Add an locale inherit the en', () => {
         const localeService = new LocaleService();
+        localeService.initialize([TestEnLocale], TestEnLocale.id);
+
         expect(TestLocale.source.size).toBe(0);
-        (TestLocale as ILocale).inherit = 'en';
+        TestLocale.inherit = 'en';
         localeService.addLocales([TestLocale]);
         expect(localeService.getLocale(TestLocale.id)?.source.size).not.toBe(0);
 
         // Inherit an not exist locale
         localeService.removeLocale(TestLocale.id);
-        (TestLocale as ILocale).inherit = 'unknown';
+        TestLocale.inherit = 'unknown';
         localeService.addLocales([TestLocale]);
         expect(localeService.getLocale(TestLocale.id)?.source.size).toBe(0);
     });
@@ -110,38 +112,47 @@ describe('The Locale Service', () => {
 
     test('Remove a locale', () => {
         const localeService = new LocaleService();
-        localeService.addLocales([TestLocale]);
+        localeService.initialize([TestLocale, TestEnLocale], TestLocale.id);
         expect(localeService.getLocale(TestLocale.id)?.id).toEqual(
             TestLocale.id
         );
-        localeService.removeLocale(TestLocale.id);
+
+        const removedLocale = localeService.removeLocale(TestLocale.id);
         expect(localeService.getLocale(TestLocale.id)).toBeUndefined();
+        expect(removedLocale).toEqual(TestLocale);
+
         localeService.addLocales([TestLocale]);
         localeService.setCurrentLocale(TestLocale.id);
 
         //Remove the current locale
-        expect(localeService.getCurrentLocale()!.id).toEqual(TestLocale.id);
+        expect(localeService.getCurrentLocale()?.id).toEqual(TestLocale.id);
         localeService.removeLocale(TestLocale.id);
-        expect(localeService.getCurrentLocale()!.id).toEqual(
-            localeService.getDefaultLocale().id
-        );
+        expect(localeService.getCurrentLocale()!.id).toEqual(TestEnLocale.id);
 
         // Remove an undefined
         expect(localeService.removeLocale(TestLocale.id));
+
+        expect(localeService.getLocales().length).toBe(1);
+        // The last one couldn't be removed
+        expect(localeService.removeLocale(TestEnLocale.id)).toBeFalsy();
     });
 
     test('Listen to the current locale change event', () => {
-        const target = 'zh-CN';
         const localeService = new LocaleService();
         const fn = jest.fn();
         localeService.onChange(fn);
-        localeService.setCurrentLocale(target);
+
+        localeService.initialize([TestLocale, TestEnLocale], TestLocale.id);
+        localeService.setCurrentLocale(TestEnLocale.id);
+
         expect(fn).toBeCalledTimes(1);
-        expect(localeService.getCurrentLocale()!.id).toEqual(target);
+        expect(localeService.getCurrentLocale()!.id).toEqual(TestEnLocale.id);
     });
 
     test('Localize the source key', () => {
         const localeService = new LocaleService();
+
+        localeService.initialize([TestLocale, TestEnLocale], TestEnLocale.id);
         let res = localeService.localize('test');
         expect(res).toEqual('');
 
@@ -154,19 +165,10 @@ describe('The Locale Service', () => {
         res = localeService.localize('molecule.welcome', 'default');
         expect(res).toEqual('Welcome to Molecule');
 
-        const map = new Map();
-        map.set('test.id', 'hello ${i}');
-        const mockData = {
-            id: 'mock',
-            name: 'mock',
-            source: map,
-        };
-        localeService.addLocales([mockData]);
-        localeService.setCurrentLocale(mockData.id);
         res = localeService.localize('test.id', '', 'world');
         expect(res).toEqual('hello world');
 
-        (localeService as any)._current = null;
+        localeService.setCurrentLocale(TestLocale.id);
         res = localeService.localize('molecule.welcome', 'default');
         expect(res).toEqual('default');
     });