@finos/legend-application-repl 0.0.2

package/lib/stores/REPLGridState.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { getAggregationTDSColumnCustomizations, getTDSRowData, } from '../components/grid/GridUtils.js';
+import { action, computed, makeObservable, observable } from 'mobx';
+export class REPLGridState {
+    initialResult;
+    currentResult;
+    columns;
+    currentQuery;
+    currentSubQuery;
+    licenseKey;
+    initialQueryLambda;
+    constructor() {
+        makeObservable(this, {
+            initialResult: observable,
+            initialQueryLambda: observable,
+            currentResult: observable,
+            currentQuery: observable,
+            currentSubQuery: observable,
+            licenseKey: observable,
+            columns: observable,
+            setInitialResult: action,
+            setCurrentQuery: action,
+            setCurrentSubQuery: action,
+            setColumns: action,
+            setInitialQueryLambda: action,
+            setCurrentResult: action,
+            setLicenseKey: action,
+            rowData: computed,
+            columnDefs: computed,
+        });
+    }
+    setInitialQueryLambda(val) {
+        this.initialQueryLambda = val;
+    }
+    setCurrentQuery(val) {
+        this.currentQuery = val;
+    }
+    setCurrentSubQuery(val) {
+        this.currentSubQuery = val;
+    }
+    setInitialResult(val) {
+        this.initialResult = val;
+    }
+    setCurrentResult(val) {
+        this.currentResult = val;
+    }
+    setColumns(val) {
+        this.columns = val;
+    }
+    setLicenseKey(val) {
+        this.licenseKey = val;
+    }
+    get rowData() {
+        return this.initialResult ? getTDSRowData(this.initialResult.result) : [];
+    }
+    get columnDefs() {
+        return this.columns
+            ? this.columns.map((c) => ({
+                field: c,
+                headerName: c,
+                ...getAggregationTDSColumnCustomizations(this.licenseKey ? true : false, guaranteeNonNullable(this.initialResult), c),
+            }))
+            : [];
+    }
+}
+//# sourceMappingURL=REPLGridState.js.map

package/lib/stores/REPLGridState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"REPLGridState.js","sourceRoot":"","sources":["../../src/stores/REPLGridState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,qCAAqC,EACrC,aAAa,GAEd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAIpE,MAAM,OAAO,aAAa;IACxB,aAAa,CAAkC;IAC/C,aAAa,CAAkC;IAC/C,OAAO,CAAwB;IAC/B,YAAY,CAAsB;IAClC,eAAe,CAAsB;IACrC,UAAU,CAAsB;IAChC,kBAAkB,CAAyB;IAE3C;QACE,cAAc,CAAC,IAAI,EAAE;YACnB,aAAa,EAAE,UAAU;YACzB,kBAAkB,EAAE,UAAU;YAC9B,aAAa,EAAE,UAAU;YACzB,YAAY,EAAE,UAAU;YACxB,eAAe,EAAE,UAAU;YAC3B,UAAU,EAAE,UAAU;YACtB,OAAO,EAAE,UAAU;YACnB,gBAAgB,EAAE,MAAM;YACxB,eAAe,EAAE,MAAM;YACvB,kBAAkB,EAAE,MAAM;YAC1B,UAAU,EAAE,MAAM;YAClB,qBAAqB,EAAE,MAAM;YAC7B,gBAAgB,EAAE,MAAM;YACxB,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,QAAQ;YACjB,UAAU,EAAE,QAAQ;SACrB,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB,CAAC,GAA0B;QAC9C,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC;IAChC,CAAC;IAED,eAAe,CAAC,GAAuB;QACrC,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;IAC1B,CAAC;IAED,kBAAkB,CAAC,GAAuB;QACxC,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;IAC7B,CAAC;IAED,gBAAgB,CAAC,GAAmC;QAClD,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,gBAAgB,CAAC,GAAmC;QAClD,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,UAAU,CAAC,GAAa;QACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;IACrB,CAAC;IAED,aAAa,CAAC,GAAuB;QACnC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;IACxB,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,OAAO;YACjB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACvB,KAAK,EAAE,CAAC;gBACR,UAAU,EAAE,CAAC;gBACb,GAAG,qCAAqC,CACtC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC9B,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,EACxC,CAAC,CACF;aACF,CAAC,CAAC;YACL,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;CACF"}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@finos/legend-application-repl",
+  "version": "0.0.2",
+  "description": "Legend REPL Grid client application core",
+  "keywords": [
+    "legend",
+    "legend-application",
+    "legend-repl",
+    "repl"
+  ],
+  "homepage": "https://github.com/finos/legend-studio/tree/master/packages/legend-application-repl",
+  "bugs": {
+    "url": "https://github.com/finos/legend-studio/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finos/legend-studio.git",
+    "directory": "packages/legend-application-repl"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.js",
+    "./lib/index.css": "./lib/index.css"
+  },
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "yarn clean && yarn build:sass && yarn build:ts",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
+    "build:ts": "tsc --project ./tsconfig.build.json",
+    "clean": "npm-run-all clean:cache clean:lib",
+    "clean:cache": "rimraf \"build\"",
+    "clean:lib": "rimraf \"lib\"",
+    "dev": "npm-run-all --parallel dev:sass dev:ts",
+    "dev:sass": "sass style:lib --watch --load-path=../../node_modules/@finos/legend-art/scss",
+    "dev:ts": "tsc --watch --preserveWatchOutput",
+    "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
+    "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
+    "publish:snapshot": "node ../../scripts/release/publishDevSnapshot.js",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {
+    "@ag-grid-community/client-side-row-model": "30.2.0",
+    "@ag-grid-community/core": "30.2.0",
+    "@ag-grid-community/react": "30.2.0",
+    "@ag-grid-community/styles": "30.2.0",
+    "@ag-grid-enterprise/core": "30.2.0",
+    "@ag-grid-enterprise/menu": "30.2.0",
+    "@ag-grid-enterprise/row-grouping": "30.2.0",
+    "@ag-grid-enterprise/server-side-row-model": "30.2.0",
+    "@finos/legend-application": "15.0.72",
+    "@finos/legend-graph": "31.9.5",
+    "@finos/legend-lego": "1.2.18",
+    "@finos/legend-shared": "10.0.33",
+    "@types/react": "18.2.31",
+    "@types/react-dom": "18.2.14",
+    "mobx": "6.10.2",
+    "mobx-react-lite": "4.0.5",
+    "monaco-editor": "0.44.0",
+    "react": "18.2.0",
+    "react-dnd": "16.0.1",
+    "react-dom": "18.2.0",
+    "serializr": "3.0.2"
+  },
+  "devDependencies": {
+    "@finos/legend-dev-utils": "2.1.3",
+    "@jest/globals": "29.7.0",
+    "cross-env": "7.0.3",
+    "eslint": "8.52.0",
+    "jest": "29.7.0",
+    "npm-run-all": "4.1.5",
+    "rimraf": "5.0.5",
+    "sass": "1.69.4",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "publishConfig": {
+    "directory": "build/publishContent"
+  },
+  "extensions": {
+    "applicationREPLGridClientPlugin": "@finos/legend-application-repl-plugin-core"
+  }
+}

package/src/Const.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum LEGEND_REPL_EVENT {
+  FETCH_TDS_FAILURE = 'repl.fetch-tds.failure',
+  BUILD_TDS_EQUEST_FAILURE = 'repl.build-tds-request.failure',
+}
+
+export const FILTER_FUNCTION_NAME = 'filter';
+export const SORT_FUNCTION_NAME = 'sort';
+export const GROUPBY_FUNCTION_NAME = 'groupBy';
+export const NOT_FUNCTION_NAME = 'not';
+
+export const DEFAULT_VARIABLE_NAME = 'x';

package/src/application/LegendREPLGridClient.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createRoot } from 'react-dom/client';
+import {
+  type LegendApplicationConfig,
+  type LegendApplicationConfigurationInput,
+  LegendApplication,
+  ApplicationStoreProvider,
+  Core_LegendApplicationPlugin,
+  getApplicationRootElement,
+} from '@finos/legend-application';
+import {
+  LegendREPLGridClientApplicationConfig,
+  type LegendREPLGridClientApplicationConfigData,
+} from './LegendREPLGridClientApplicationConfig.js';
+import { LegendREPLGridClientPluginManager } from './LegendREPLGridClientPluginManager.js';
+import { LegendREPLGridClientWebApplication } from '../components/LegendREPLGridClientApplication.js';
+import { Core_LegendREPLGridClientApplicationPlugin } from '../components/Core_LegendREPLGridClientApplicationPlugin.js';
+import type { LegendREPLGridClientApplicationStore } from '../stores/LegendREPLGridClientBaseStore.js';
+
+export class LegendREPLGridClient extends LegendApplication {
+  declare config: LegendREPLGridClientApplicationConfig;
+  declare pluginManager: LegendREPLGridClientPluginManager;
+
+  static create(): LegendREPLGridClient {
+    const application = new LegendREPLGridClient(
+      LegendREPLGridClientPluginManager.create(),
+    );
+    application.withBasePlugins([
+      new Core_LegendApplicationPlugin(),
+      new Core_LegendREPLGridClientApplicationPlugin(),
+    ]);
+    application.withBasePresets([]);
+    return application;
+  }
+
+  async configureApplication(
+    input: LegendApplicationConfigurationInput<LegendREPLGridClientApplicationConfigData>,
+  ): Promise<LegendApplicationConfig> {
+    return new LegendREPLGridClientApplicationConfig(input);
+  }
+
+  async loadApplication(
+    applicationStore: LegendREPLGridClientApplicationStore,
+  ): Promise<void> {
+    createRoot(getApplicationRootElement()).render(
+      <ApplicationStoreProvider store={applicationStore}>
+        <LegendREPLGridClientWebApplication baseUrl={this.baseAddress} />
+      </ApplicationStoreProvider>,
+    );
+  }
+}

package/src/application/LegendREPLGridClientApplicationConfig.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  assertNonNullable,
+  guaranteeNonEmptyString,
+} from '@finos/legend-shared';
+import {
+  type LegendApplicationConfigurationData,
+  type LegendApplicationConfigurationInput,
+  LegendApplicationConfig,
+} from '@finos/legend-application';
+
+export interface LegendREPLGridClientApplicationConfigData
+  extends LegendApplicationConfigurationData {
+  repl: {
+    url: string;
+    // NOTE: configure this to `true` to ignore the URL specified in the config
+    // so we can serve this application staticly with backend
+    dynamic?: boolean;
+  };
+}
+
+export class LegendREPLGridClientApplicationConfig extends LegendApplicationConfig {
+  readonly replUrl: string;
+  readonly useDynamicREPLServer: boolean = false;
+
+  constructor(
+    input: LegendApplicationConfigurationInput<LegendREPLGridClientApplicationConfigData>,
+  ) {
+    super(input);
+
+    assertNonNullable(
+      input.configData.repl,
+      `Can't configure application: 'repl' field is missing`,
+    );
+    this.replUrl = LegendApplicationConfig.resolveAbsoluteUrl(
+      guaranteeNonEmptyString(
+        input.configData.repl.url,
+        `Can't configure application: 'repl.url' field is missing or empty`,
+      ),
+    );
+    if (input.configData.repl.dynamic !== undefined) {
+      this.useDynamicREPLServer = Boolean(input.configData.repl.dynamic);
+    }
+  }
+
+  override getDefaultApplicationStorageKey(): string {
+    return 'legend-repl';
+  }
+}

package/src/application/LegendREPLGridClientPluginManager.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  GraphManagerPluginManager,
+  PureGraphManagerPlugin,
+  PureGraphPlugin,
+  PureProtocolProcessorPlugin,
+} from '@finos/legend-graph';
+import { LegendApplicationPluginManager } from '@finos/legend-application';
+import type { LegendREPLGridClientApplicationPlugin } from '../stores/LegendREPLGridClientApplicationPlugin.js';
+
+export class LegendREPLGridClientPluginManager
+  extends LegendApplicationPluginManager<LegendREPLGridClientApplicationPlugin>
+  implements GraphManagerPluginManager
+{
+  private pureProtocolProcessorPlugins: PureProtocolProcessorPlugin[] = [];
+  private pureGraphManagerPlugins: PureGraphManagerPlugin[] = [];
+  private pureGraphPlugins: PureGraphPlugin[] = [];
+
+  private constructor() {
+    super();
+  }
+
+  static create(): LegendREPLGridClientPluginManager {
+    return new LegendREPLGridClientPluginManager();
+  }
+
+  registerPureProtocolProcessorPlugin(
+    plugin: PureProtocolProcessorPlugin,
+  ): void {
+    this.pureProtocolProcessorPlugins.push(plugin);
+  }
+
+  registerPureGraphManagerPlugin(plugin: PureGraphManagerPlugin): void {
+    this.pureGraphManagerPlugins.push(plugin);
+  }
+
+  registerPureGraphPlugin(plugin: PureGraphPlugin): void {
+    this.pureGraphPlugins.push(plugin);
+  }
+
+  getPureGraphManagerPlugins(): PureGraphManagerPlugin[] {
+    return [...this.pureGraphManagerPlugins];
+  }
+
+  getPureProtocolProcessorPlugins(): PureProtocolProcessorPlugin[] {
+    return [...this.pureProtocolProcessorPlugins];
+  }
+
+  getPureGraphPlugins(): PureGraphPlugin[] {
+    return [...this.pureGraphPlugins];
+  }
+}

package/src/components/AgGrid.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  AgGridReact,
+  type AgGridReactProps,
+  type AgReactUiProps,
+} from '@ag-grid-community/react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { ModuleRegistry } from '@ag-grid-community/core';
+import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
+import { MenuModule } from '@ag-grid-enterprise/menu';
+import { getDefaultColumnDefintions } from '../components/grid/GridUtils.js';
+import { LicenseManager } from '@ag-grid-enterprise/core';
+
+const communityModules = [ClientSideRowModelModule];
+const enterpriseModules = [
+  ServerSideRowModelModule,
+  RowGroupingModule,
+  MenuModule,
+];
+const allModules = communityModules.concat(enterpriseModules);
+
+export function AgGridComponent<TData = unknown>(
+  props: (AgGridReactProps<TData> | AgReactUiProps<TData>) & {
+    licenseKey: string;
+  },
+): JSX.Element {
+  let isAgGridLicenseEnabled = false;
+  if (props.licenseKey) {
+    LicenseManager.setLicenseKey(JSON.stringify(props.licenseKey));
+    isAgGridLicenseEnabled = true;
+  }
+
+  return (
+    <AgGridReact
+      rowGroupPanelShow={isAgGridLicenseEnabled ? 'always' : 'never'}
+      suppressBrowserResizeObserver={true}
+      suppressScrollOnNewData={true}
+      alwaysMultiSort={true}
+      rowModelType={isAgGridLicenseEnabled ? 'serverSide' : 'clientSide'}
+      {...props}
+      defaultColDef={getDefaultColumnDefintions(isAgGridLicenseEnabled)}
+      modules={isAgGridLicenseEnabled ? allModules : communityModules}
+    />
+  );
+}
+
+export const configureAgGridComponent = (): void => {
+  ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);
+};

package/src/components/Core_LegendREPLGridClientApplicationPlugin.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { LegendApplicationSetup } from '@finos/legend-application';
+import packageJson from '../../package.json' assert { type: 'json' };
+import { LegendREPLGridClientApplicationPlugin } from '../stores/LegendREPLGridClientApplicationPlugin.js';
+import { configureAgGridComponent } from './AgGrid.js';
+import {
+  configureCodeEditorComponent,
+  setupPureLanguageService,
+} from '@finos/legend-lego/code-editor';
+
+export class Core_LegendREPLGridClientApplicationPlugin extends LegendREPLGridClientApplicationPlugin {
+  static NAME = packageJson.extensions.applicationREPLGridClientPlugin;
+
+  constructor() {
+    super(Core_LegendREPLGridClientApplicationPlugin.NAME, packageJson.version);
+  }
+
+  override getExtraApplicationSetups(): LegendApplicationSetup[] {
+    return [
+      async (applicationStore) => {
+        configureAgGridComponent();
+        await configureCodeEditorComponent(applicationStore);
+        setupPureLanguageService();
+      },
+    ];
+  }
+}

package/src/components/LegendREPLGridClientApplication.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  BrowserEnvironmentProvider,
+  Route,
+  Switch,
+  type TEMPORARY__ReactRouterComponentType,
+} from '@finos/legend-application/browser';
+import { Editor } from './REPLGridClient.js';
+import { LegendREPLGridClientFrameworkProvider } from './LegendREPLGridClientFrameworkProvider.js';
+import { observer } from 'mobx-react-lite';
+import { withEditorStore } from './REPLGridClientStoreProvider.js';
+
+export const LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN = Object.freeze({
+  GRID: `/grid`,
+});
+
+export const LegendREPLGridClientRouter = withEditorStore(
+  observer(() => (
+    <div className="app">
+      <Switch>
+        <Route
+          exact={true}
+          path={[LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN.GRID]}
+          component={
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            Editor as TEMPORARY__ReactRouterComponentType
+          }
+        />
+      </Switch>
+    </div>
+  )),
+);
+
+export const LegendREPLGridClientWebApplication: React.FC<{
+  baseUrl: string;
+}> = (props) => {
+  const { baseUrl } = props;
+
+  return (
+    <BrowserEnvironmentProvider baseUrl={baseUrl}>
+      <LegendREPLGridClientFrameworkProvider>
+        <LegendREPLGridClientRouter />
+      </LegendREPLGridClientFrameworkProvider>
+    </BrowserEnvironmentProvider>
+  );
+};

package/src/components/LegendREPLGridClientFrameworkProvider.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import {
+  ApplicationFrameworkProvider,
+  useApplicationStore,
+} from '@finos/legend-application';
+import type { LegendREPLGridClientPluginManager } from '../application/LegendREPLGridClientPluginManager.js';
+import type { LegendREPLGridClientApplicationConfig } from '../application/LegendREPLGridClientApplicationConfig.js';
+import {
+  type LegendREPLGridClientApplicationStore,
+  LegendREPLGridClientBaseStore,
+} from '../stores/LegendREPLGridClientBaseStore.js';
+
+export const useLegendREPLGridClientApplicationStore =
+  (): LegendREPLGridClientApplicationStore =>
+    useApplicationStore<
+      LegendREPLGridClientApplicationConfig,
+      LegendREPLGridClientPluginManager
+    >();
+
+const LegendREPLGridClientBaseStoreContext = createContext<
+  LegendREPLGridClientBaseStore | undefined
+>(undefined);
+
+const LegendREPLGridClientBaseStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendREPLGridClientApplicationStore();
+  const store = useLocalObservable(
+    () => new LegendREPLGridClientBaseStore(applicationStore),
+  );
+  return (
+    <LegendREPLGridClientBaseStoreContext.Provider value={store}>
+      {children}
+    </LegendREPLGridClientBaseStoreContext.Provider>
+  );
+};
+
+export const LegendREPLGridClientFrameworkProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => (
+  <ApplicationFrameworkProvider>
+    <LegendREPLGridClientBaseStoreProvider>
+      {children}
+    </LegendREPLGridClientBaseStoreProvider>
+  </ApplicationFrameworkProvider>
+);