Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempt to fix decoder ring for relative hosted riots #13987

Merged
merged 2 commits into from
Jun 11, 2020
Merged

Attempt to fix decoder ring for relative hosted riots #13987

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2419db5
Attempt to fix decoder ring for relative hosted riots
t3chguy Jun 11, 2020
c32d3ef
Add Base URL field to decoder-ring to make it more flexible
t3chguy Jun 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 29 additions & 12 deletions res/decoder-ring/decoder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ class StartupError extends Error {}
* We need to know the bundle path before we can fetch the sourcemap files. In a production environment, we can guess
* it using this.
*/
async function getBundleName() {
const res = await fetch("../index.html");
async function getBundleName(baseUrl) {
const res = await fetch(new URL("index.html", baseUrl).toString());
if (!res.ok) {
throw new StartupError(`Couldn't fetch index.html to prefill bundle; ${res.status} ${res.statusText}`);
}
Expand All @@ -25,15 +25,15 @@ function validateBundle(value) {
* The purpose of this is just to validate that the user entered a real bundle, and provide feedback.
*/
const bundleCache = new Map();
function bundleSubject(bundle) {
function bundleSubject(baseUrl, bundle) {
if (!bundle.match(/^[0-9a-f]{20}$/)) throw new Error("Bad input");
if (bundleCache.has(bundle)) {
return bundleCache.get(bundle);
}
const fetcher = new rxjs.BehaviorSubject(Pending.of());
bundleCache.set(bundle, fetcher);

fetch(`/bundles/${bundle}/bundle.js.map`).then((res) => {
fetch(new URL(`bundles/${bundle}/bundle.js.map`, baseUrl).toString()).then((res) => {
res.body.cancel(); /* Bail on the download immediately - it could be big! */
const status = res.ok;
if (status) {
Expand Down Expand Up @@ -145,6 +145,7 @@ function ProgressBar({ fetchStatus }) {
* The main component.
*/
function BundlePicker() {
const [baseUrl, setBaseUrl] = React.useState(new URL("..", window.location).toString());
const [bundle, setBundle] = React.useState("");
const [file, setFile] = React.useState("");
const [line, setLine] = React.useState("1");
Expand All @@ -153,19 +154,25 @@ function BundlePicker() {
const [bundleFetchStatus, setBundleFetchStatus] = React.useState(None);
const [fileFetchStatus, setFileFetchStatus] = React.useState(None);

/* At startup, try to fill in the bundle name for the user */
/* On baseUrl change, try to fill in the bundle name for the user */
React.useEffect(() => {
getBundleName().then((name) => {
console.log("DEBUG", baseUrl);
getBundleName(baseUrl).then((name) => {
console.log("DEBUG", name);
if (bundle === "" && validateBundle(name) !== None) {
setBundle(name);
}
}, console.log.bind(console));
}, []);

}, [baseUrl]);

/* ------------------------- */
/* Follow user state changes */
/* ------------------------- */
const onBaseUrlChange = React.useCallback((event) => {
const value = event.target.value;
setBaseUrl(value);
}, []);

const onBundleChange = React.useCallback((event) => {
const value = event.target.value;
setBundle(value);
Expand Down Expand Up @@ -195,14 +202,14 @@ function BundlePicker() {
React.useEffect(() =>
validateBundle(bundle).fold({
some: (value) => {
const subscription = bundleSubject(value)
const subscription = bundleSubject(baseUrl, value)
.pipe(rxjs.operators.map(Some.of))
.subscribe(setBundleFetchStatus);
return () => subscription.unsubscribe();
},
none: () => setBundleFetchStatus(None),
}),
[bundle]);
[baseUrl, bundle]);

/* Whenever a valid javascript file is input, see if it corresponds to a sourcemap file and initiate a fetch
* if so. */
Expand All @@ -211,7 +218,7 @@ function BundlePicker() {
setFileFetchStatus(None);
return;
}
const observable = fetchAsSubject(`/bundles/${bundle}/${file}.map`)
const observable = fetchAsSubject(new URL(`bundles/${bundle}/${file}.map`, baseUrl).toString())
.pipe(
rxjs.operators.map((fetchStatus) => fetchStatus.flatMap(value => {
try {
Expand All @@ -224,7 +231,7 @@ function BundlePicker() {
);
const subscription = observable.subscribe(setFileFetchStatus);
return () => subscription.unsubscribe();
}, [bundle, file]);
}, [baseUrl, bundle, file]);

/*
* Whenever we have a valid fetched sourcemap, and a valid line, attempt to find the original position from the
Expand Down Expand Up @@ -255,6 +262,16 @@ function BundlePicker() {
/* ------ */
return e('div', {},
e('div', { className: 'inputs' },
e('div', { className: 'baseUrl' },
e('label', { htmlFor: 'baseUrl'}, 'Base URL'),
e('input', {
name: 'baseUrl',
required: true,
pattern: ".+",
onChange: onBaseUrlChange,
value: baseUrl,
}),
),
e('div', { className: 'bundle' },
e('label', { htmlFor: 'bundle'}, 'Bundle'),
e('input', {
Expand Down