dc821abd52
we have fully isolated graph & error components with a good api but no way to access them directly from the outside (in console). This PR adds two functions to the window object so that we can render the PDV directly instead of needing the entire app with routing and everything. --------- Co-authored-by: Jack Hsu <jack.hsu@gmail.com>
89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
/* eslint-disable import/first */
|
|
// debug must be first import
|
|
if (process.env.NODE_ENV === 'development') {
|
|
require('preact/debug');
|
|
}
|
|
|
|
import { projectDetailsMachine } from './app/console-project-details/project-details.machine';
|
|
/* eslint-disable @nx/enforce-module-boundaries */
|
|
// nx-ignore-next-line
|
|
import type { ProjectGraphProjectNode } from '@nx/devkit';
|
|
// nx-ignore-next-line
|
|
import type { GraphError } from 'nx/src/command-line/graph/graph';
|
|
/* eslint-enable @nx/enforce-module-boundaries */
|
|
import { StrictMode } from 'react';
|
|
import { inspect } from '@xstate/inspect';
|
|
import { App } from './app/app';
|
|
import { ExternalApiImpl } from './app/external-api-impl';
|
|
import { render } from 'preact';
|
|
import { ErrorPage } from './app/ui-components/error-page';
|
|
import { ProjectDetailsApp } from './app/console-project-details/project-details.app';
|
|
import { interpret } from 'xstate';
|
|
|
|
if (window.__NX_RENDER_GRAPH__ === false) {
|
|
window.externalApi = new ExternalApiImpl();
|
|
|
|
window.renderPDV = (data: {
|
|
project: ProjectGraphProjectNode;
|
|
sourceMap: Record<string, string[]>;
|
|
connectedToCloud: boolean;
|
|
errors?: GraphError[];
|
|
}) => {
|
|
const service = interpret(projectDetailsMachine).start();
|
|
|
|
service.send({
|
|
type: 'loadData',
|
|
...data,
|
|
});
|
|
|
|
render(
|
|
<StrictMode>
|
|
<ProjectDetailsApp service={service} />
|
|
</StrictMode>,
|
|
document.getElementById('app')
|
|
);
|
|
|
|
return service;
|
|
};
|
|
|
|
window.renderError = (data: {
|
|
message: string;
|
|
stack?: string;
|
|
errors: GraphError[];
|
|
}) => {
|
|
render(
|
|
<StrictMode>
|
|
<ErrorPage {...data} />
|
|
</StrictMode>,
|
|
document.getElementById('app')
|
|
);
|
|
};
|
|
} else {
|
|
if (window.useXstateInspect === true) {
|
|
inspect({
|
|
url: 'https://stately.ai/viz?inspect',
|
|
iframe: false, // open in new window
|
|
});
|
|
}
|
|
|
|
window.externalApi = new ExternalApiImpl();
|
|
const container = document.getElementById('app');
|
|
|
|
if (!window.appConfig) {
|
|
render(
|
|
<p>
|
|
No environment could be found. Please run{' '}
|
|
<pre>npx nx run graph-client:generate-dev-environment-js</pre>.
|
|
</p>,
|
|
container
|
|
);
|
|
} else {
|
|
render(
|
|
<StrictMode>
|
|
<App />
|
|
</StrictMode>,
|
|
container
|
|
);
|
|
}
|
|
}
|