Move into dedicated packages
MODIFY
internal/core/common/virtual-modules.ts
internal/core/common/virtual-modules.ts
@@ -25,7 +25,7 @@ modules.set(
"package.json",
{
"mtime": 1_594_195_489_483.4382,
- "content": '{\n\t"name": "@romefrontend-runtime/rome",\n\t"type": "module",\n\t"private": true,\n\t"main": "index.ts"\n}\n',
+ "content": '{\n\t"name": "@internal/runtime-rome",\n\t"type": "module",\n\t"private": true,\n\t"main": "index.ts"\n}\n',
},
],
[

MODIFY
internal/core/test-worker/TestAPI.ts
internal/core/test-worker/TestAPI.ts
@@ -29,7 +29,7 @@ import {
TestDiagnosticAdviceItem,
TestHelper,
TestSnapshotOptions,
-} from "@romefrontend-runtime/rome/test";
+} from "@internal/virtual-rome/test";
import {cleanFrames} from "./TestWorkerRunner";
function formatExpectedError(expected: ExpectedError): string {

MODIFY
internal/core/test-worker/TestWorkerRunner.ts
internal/core/test-worker/TestWorkerRunner.ts
@@ -23,7 +23,7 @@ import {
GlobalTestOptions,
TestCallback,
TestOptions,
-} from "@romefrontend-runtime/rome/test";
+} from "@internal/virtual-rome/test";
import {
TestRef,
default as TestWorkerBridge,

RENAME
internal/@romefrontend-runtime/rome/index.ts
internal/virtual-packages/rome/index.ts
RENAME
internal/@romefrontend-runtime/rome/package.json
internal/virtual-packages/rome/package.json
{
- "name": "@romefrontend-runtime/rome",
+ "name": "@internal/virtual-rome",
"type": "module",
"private": true,
"main": "index.ts"

RENAME
internal/@romefrontend-runtime/rome/test.ts
internal/virtual-packages/rome/test.ts
RENAME
internal/@romefrontend-runtime/rome/types.ts
internal/virtual-packages/rome/types.ts
MODIFY
internal/web-ui/Button.tsx
internal/web-ui/Button.tsx
* LICENSE file in the root directory of this source tree.
*/
-import React = require('react');
+import React = require("react");
-const {css, cx} = require('emotion');
+const {css, cx} = require("emotion");
-export default function Button(props: {
+export default function Button(
+ props: {
className?: string;
children: React.ReactNode;
onClick: () => void;
-}) {
- return (
- <div
- onClick={props.onClick}
+ },
+) {
+ return <div onClick={props.onClick}
className={cx(
css`
display: inline-block;
@@ -34,6 +34,5 @@ export default function Button(props: {
props.className,
)}>
{props.children}
- </div>
- );
+ </div>;
}

MODIFY
internal/web-ui/index.tsx
internal/web-ui/index.tsx
* LICENSE file in the root directory of this source tree.
*/
-import {Bridge, createBridgeFromBrowserWebSocket} from '@internal/events';
-import ClientPage from './ClientPage';
-import Button from './Button';
-import Spinner from './Spinner';
-import React = require('react');
-import ReactDOM = require('react-dom');
-import {WebServerRequest, WebServerClient} from '@internal/core';
-import {humanizeTime} from '@internal/string-utils';
+import {Bridge, createBridgeFromBrowserWebSocket} from "@internal/events";
+import ClientPage from "./ClientPage";
+import Button from "./Button";
+import Spinner from "./Spinner";
+import React = require("react");
+import ReactDOM = require("react-dom");
+import {WebServerClient, WebServerRequest} from "@internal/core";
+import {humanizeTime} from "@internal/string-utils";
-const {css, injectGlobal} = require('emotion');
+const {css, injectGlobal} = require("emotion");
type Data = {
clients: Array<WebServerClient>;
@@ -215,18 +215,20 @@ const DataContext = React.createContext<Data>({
requests: [],
});
-function ClientItem({
+function ClientItem(
+ {
client,
setFocused,
}: {
client: WebServerClient;
setFocused: () => void;
-}) {
+ },
+) {
const endTime = client.endTime === undefined ? Date.now() : client.endTime;
const elapsed = endTime - client.startTime;
const data = React.useContext(DataContext);
- const requests = data.requests.filter(req => req.client === client.id);
+ const requests = data.requests.filter((req) => req.client === client.id);
const requestCount: Map<string, number> = new Map();
for (const request of requests) {
@@ -238,22 +240,20 @@ function ClientItem({
requestCount.set(request.query.commandName, count);
}
- let backgroundColor = '#121212';
+ let backgroundColor = "#121212";
const lastRequest = requests[requests.length - 1];
if (lastRequest !== undefined && lastRequest.response !== undefined) {
const lastResponse = lastRequest.response;
- if (lastResponse.type === 'SUCCESS') {
- backgroundColor = '#2DC55E';
- } else if (lastResponse.type === 'ERROR') {
- backgroundColor = 'orange';
- } else if (lastResponse.type === 'DIAGNOSTICS') {
- backgroundColor = '#F81118';
+ if (lastResponse.type === "SUCCESS") {
+ backgroundColor = "#2DC55E";
+ } else if (lastResponse.type === "ERROR") {
+ backgroundColor = "orange";
+ } else if (lastResponse.type === "DIAGNOSTICS") {
+ backgroundColor = "#F81118";
}
}
- return (
- <Button
- key={client.id}
+ return <Button key={client.id}
onClick={setFocused}
className={css`
width: 300px;
@@ -264,125 +264,119 @@ function ClientItem({
position: relative;
background-color: ${backgroundColor};
`}>
- <div
- className={css`
+ <div className={css`
font-weight: bold;
`}>
- {client.flags.clientName} #{String(client.id)}{' '}
+ {client.flags.clientName}
+ #
+ {String(client.id)}
+ {" "}
{client.endTime !== undefined ? <Spinner /> : null}
</div>
-
<ul>
- {Array.from(requestCount, ([commandName, count]) => {
- return (
- <li key={commandName}>
+ {Array.from(
+ requestCount,
+ ([commandName, count]) => {
+ return <li key={commandName}>
{commandName}
- {count === 1 ? '' : ` x ${String(count)}`}
- </li>
- );
- })}
+ {count === 1 ? "" : ` x ${String(count)}`}
+ </li>;
+ },
+ )}
</ul>
-
- <div
- className={css`
+ <div className={css`
position: absolute;
right: 15px;
bottom: 15px;
`}>
{humanizeTime(elapsed)}
</div>
- </Button>
- );
+ </Button>;
}
function Content() {
const data = React.useContext(DataContext);
- const [focusedClientId, setFocusedClient] = React.useState<
- undefined | number
- >(undefined);
+ const [focusedClientId, setFocusedClient] = React.useState<undefined | number>(
+ undefined,
+ );
let focusedClient: undefined | WebServerClient;
if (focusedClientId !== undefined) {
- focusedClient = data.clients.find(client => client.id === focusedClientId);
+ focusedClient = data.clients.find((client) => client.id === focusedClientId);
}
if (focusedClient === undefined) {
- return (
- <>
- {data.clients.map(client => {
- return (
- <ClientItem
- key={client.id}
+ return <>
+ {data.clients.map((client) => {
+ return <ClientItem key={client.id}
client={client}
setFocused={() => {
setFocusedClient(client.id);
- }}
- />
- );
+ }} />;
})}
- </>
- );
+ </>;
} else {
const actualFocusClient: WebServerClient = focusedClient;
- const requests = data.requests.filter(
- req => req.client === actualFocusClient.id,
+ const requests = data.requests.filter((req) =>
+ req.client === actualFocusClient.id
);
- return (
- <ClientPage
- client={actualFocusClient}
+ return <ClientPage client={actualFocusClient}
requests={requests}
goBack={() => {
setFocusedClient(undefined);
- }}
- />
- );
+ }} />;
}
}
-function Container(props: {children: React.ReactNode}) {
- return (
- <div
- className={css`
+function Container(
+ props: {
+ children: React.ReactNode;
+ },
+) {
+ return <div className={css`
padding: 15px;
`}>
{props.children}
- </div>
- );
+ </div>;
}
function App(props: Data) {
- return (
- <DataContext.Provider value={props}>
+ return <DataContext.Provider value={props}>
<Container>
<Content />
</Container>
- </DataContext.Provider>
- );
+ </DataContext.Provider>;
}
-const socket = new WebSocket('ws://localhost:8081/websocket', 'rome');
-const bridge = createBridgeFromBrowserWebSocket(Bridge, socket, {
- type: 'server',
-});
+const socket = new WebSocket("ws://localhost:8081/websocket", "rome");
+const bridge = createBridgeFromBrowserWebSocket(
+ Bridge,
+ socket,
+ {
+ type: "server",
+ },
+);
const event = bridge.createEvent({
- name: 'WebBridge.requests',
- direction: 'server<-client',
+ name: "WebBridge.requests",
+ direction: "server<-client",
});
-event.subscribe((({requests, clients}: Data) => {
+event.subscribe(
+ ((({requests, clients}: Data) => {
ReactDOM.render(
<App requests={requests} clients={clients} />,
- document.querySelector('#app'),
+ document.querySelector("#app"),
+ );
+ }) as any),
);
-}) as any);
socket.onopen = () => {
- console.log('HANDSHAKE START');
+ console.log("HANDSHAKE START");
bridge.handshake({second: true}).then(() => {
- console.log('HANDSHAKE END');
+ console.log("HANDSHAKE END");
});
};

MODIFY
internal/web-ui/package.json
internal/web-ui/package.json
"react": "^16.8.6",
"react-dom": "^16.8.6",
"xterm": "^3.14.5"
+ },
+ "rome": {
+ "extends": "../../package.json",
+ "bundler": {
+ "externals": [
+ "react",
+ "react-dom",
+ "emotion",
+ "xterm",
+ "xterm/lib/addons/fit/fit"
+ ]
+ }
}
}

MODIFY
package.json
package.json
"type-libs",
"lib/modules.js",
"prelude.ts",
- "@romefrontend-web",
+ "internal/web-ui",
"out",
"vscode/node_modules"
]

MODIFY
scripts/generated-files/virtual-modules.ts
scripts/generated-files/virtual-modules.ts
import {INTERNAL, ROOT, modifyGeneratedFile} from "../_utils";
import {lstat, readDirectory, readFileText} from "@internal/fs";
-const runtimeModules = ROOT.append("internal", "@romefrontend-runtime");
-const runtimeIndex = INTERNAL.append("core", "common", "virtual-modules.ts");
+const virtualModules = ROOT.append("internal", "virtual-packages");
+const virtualIndex = INTERNAL.append("core", "common", "virtual-modules.ts");
export async function main() {
await modifyGeneratedFile(
- runtimeIndex,
+ virtualIndex,
async () => {
let lines = [];
let hash = "";
- for (const packagePath of await readDirectory(runtimeModules)) {
+ for (const packagePath of await readDirectory(virtualModules)) {
const packageName = packagePath.getBasename();
const files = [];

MODIFY
tsconfig.json
tsconfig.json
"@internal/*": [
"internal/*"
],
- "@romefrontend-runtime/*": [
- "internal/@romefrontend-runtime/*"
- ],
- "@romefrontend-integration/*": [
- "internal/@romefrontend-integration/*"
- ],
- "@romefrontend-web/*": [
- "internal/@romefrontend-web/*"
+ "@internal/virtual-*": [
+ "internal/virtual-packages/*"
],
"rome": [
- "internal/@romefrontend-runtime/rome"
+ "internal/virtual-packages/rome"
]
}
},

Move @romefrontend-runtime into dedicated packages