mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 07:04:04 -05:00
## Summary This PR makes URL serialization logic available to Node.js contexts (like Cypress tests) and replaces a hard-coded 4812-character base64 URL in tests with programmatically generated state. This builds on the shared utilities refactoring from #8246. ### Changes #### 1. Extract URL Serialization to Shared Module **Problem:** URL serialization code depended on GoldenLayout's browser-only ConfigMinifier, preventing Cypress spec files from importing it (they load in Node.js before running in browser). **Solution:** Created `shared/url-serialization.ts` with a Node-compatible ConfigMinifier reimplementation. **Technical Details:** - Reimplemented GoldenLayout's ConfigMinifier without browser dependencies - Moved serialization functions (`serialiseState`, `deserialiseState`, `risonify`, `unrisonify`) to shared module - Moved minification functions (`minifyConfig`, `unminifyConfig`) to shared module - Updated `static/url.ts` to use shared module instead of GoldenLayout - Added comprehensive test coverage in `test/url-serialization.ts` **Files:** - **New:** `shared/url-serialization.ts` (~279 lines) - **Modified:** `static/url.ts` (removed ~30 lines, eliminated GoldenLayout dependency) - **New:** `test/url-serialization.ts` (~96 lines) #### 2. Replace Hard-coded Cypress URL with Programmatic State **Before:** A hard-coded 4812-character base64 URL containing state for all panes ```typescript cy.visit('http://localhost:10240/#z:OYLghAFBqd5TB8IAsQGMD2ATApgUWwEsAXTAJwBoiQIAzIgG...'); ``` **After:** Programmatically generated state using `buildKnownGoodState()` function ```typescript const state = buildKnownGoodState(); const hash = serialiseState(state); cy.visit(`http://localhost:10240/#${hash}`, {...}); ``` **Benefits:** - Human-readable, maintainable test state - Programmatic generation from `PANE_DATA_MAP` keys - Layout optimized with 8 panes per row - Produces identical compressed URL format - Much easier to add/modify panes in the future #### 3. PANE_DATA_MAP Consistency Improvements Updated `PANE_DATA_MAP` to use component names exactly as registered with GoldenLayout: **Key renames:** - `preprocessor` → `pp` - `llvmir` → `ir` - `pipeline` → `llvmOptPipelineView` - `mir` → `rustmir` - `hir` → `rusthir` - `macro` → `rustmacroexp` - `core` → `haskellCore` - `stg` → `haskellStg` - `cmm` → `haskellCmm` - `dump` → `gccdump` - `tree` → `gnatdebugtree` - `debug` → `gnatdebug` **Added panes:** `codeEditor`, `compiler`, `conformance`, `output` (were missing from map) **Re-enabled tests:** - `yul` pane test (was commented out, now fixed) - `clojuremacroexp` pane test (was commented out, now fixed) - `cfg` pane test (had TODO, now removed) **Why this matters:** The `buildKnownGoodState()` function uses `Object.keys(PANE_DATA_MAP)` as the `componentName` property, so keys must match the actual registered component names for GoldenLayout to find them. ## Test Plan - [x] All Cypress tests pass (confirmed by @mattgodbolt) - [x] TypeScript compilation passes (`npm run ts-check`) - [x] Linting passes (`npm run lint`) - [x] URL serialization tests pass (3/3 tests) - [x] Pre-commit hooks pass - [x] Related vitest tests pass ## Dependencies - Builds on #8246 (shared utilities refactoring - already merged) 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude <noreply@anthropic.com>
106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
// Copyright (c) 2021, Compiler Explorer Authors
|
|
// All rights reserved.
|
|
//
|
|
// Redistribution and use in source and binary forms, with or without
|
|
// modification, are permitted provided that the following conditions are met:
|
|
//
|
|
// * Redistributions of source code must retain the above copyright notice,
|
|
// this list of conditions and the following disclaimer.
|
|
// * Redistributions in binary form must reproduce the above copyright
|
|
// notice, this list of conditions and the following disclaimer in the
|
|
// documentation and/or other materials provided with the distribution.
|
|
//
|
|
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
|
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
|
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
|
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
|
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
// POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
import lzstring from 'lz-string';
|
|
import _ from 'underscore';
|
|
import * as urlSerialization from '../shared/url-serialization.js';
|
|
import * as Components from './components.js';
|
|
|
|
export function convertOldState(state: any): any {
|
|
const sc = state.compilers[0];
|
|
if (!sc) throw new Error('Unable to determine compiler from old state');
|
|
// TODO: Restrict type once Components has been tsfied
|
|
const content: any[] = [];
|
|
let source;
|
|
if (sc.sourcez) {
|
|
source = lzstring.decompressFromBase64(sc.sourcez);
|
|
} else {
|
|
source = sc.source;
|
|
}
|
|
const options = {
|
|
compileOnChange: true,
|
|
colouriseAsm: state.filterAsm.colouriseAsm,
|
|
};
|
|
const filters = _.clone(state.filterAsm);
|
|
delete filters.colouriseAsm;
|
|
// TODO(junlarsen): find the missing language field here
|
|
// @ts-expect-error: this is missing the language field, which was never noticed because the import was untyped
|
|
content.push(Components.getEditorWith(1, source, options));
|
|
content.push(Components.getCompilerWith(1, filters, sc.options, sc.compiler));
|
|
return {version: 4, content: [{type: 'row', content: content}]};
|
|
}
|
|
|
|
export function loadState(state: any): any {
|
|
if (!state || state.version === undefined) return false;
|
|
switch (state.version) {
|
|
case 1:
|
|
state.filterAsm = {};
|
|
state.version = 2;
|
|
/* falls through */
|
|
case 2:
|
|
state.compilers = [state];
|
|
state.version = 3;
|
|
/* falls through */
|
|
case 3:
|
|
state = convertOldState(state);
|
|
break; // no fall through
|
|
case 4:
|
|
state = urlSerialization.unminifyConfig(state);
|
|
break;
|
|
default:
|
|
throw new Error("Invalid version '" + state.version + "'");
|
|
}
|
|
return state;
|
|
}
|
|
|
|
export function deserialiseState(stateText: string): any {
|
|
let state;
|
|
let exception;
|
|
try {
|
|
state = urlSerialization.unrisonify(stateText);
|
|
if (state?.z) {
|
|
const data = lzstring.decompressFromBase64(state.z);
|
|
// If lzstring fails to decompress this it'll return an empty string rather than throwing an error
|
|
if (data === '') {
|
|
throw new Error('lzstring decompress error, url is corrupted');
|
|
}
|
|
state = urlSerialization.unrisonify(data);
|
|
}
|
|
} catch (ex) {
|
|
exception = ex;
|
|
}
|
|
|
|
// This handles prehistoric urls, assumes rison fails with an error
|
|
if (!state) {
|
|
try {
|
|
state = JSON.parse(decodeURIComponent(stateText));
|
|
exception = null;
|
|
} catch (ex) {
|
|
if (!exception) exception = ex;
|
|
}
|
|
}
|
|
if (exception) throw exception;
|
|
return loadState(state);
|
|
}
|