In this article, we review process-polyfill file in Refly codebase. We will look at:
process-polyfill.ts
You will find the following code in process-polyfill.ts
/**
* Process polyfill for browser environments
* This is used to provide a 'process' global that some
* libraries expect to exist
*/
// Simply providing minimal process shim
// @ts-ignore - Ignoring type errors to create a simple shim
if (typeof window !== 'undefined') {
// @ts-ignore - Using any to bypass strict type checking
window.process = window.process || {
env: {},
version: '0.0.0',
};
}
export {};
The comment is self explanatory, but I am not sure which package in Refly expects window.process to exist.
I also found the similar code in refly/apps/web/public/index.html.
<!-- Process polyfill -->
<script>
window.process = window.process || {
env: {},
browser: true,
version: '0.0.0'
};
</script>
This process-polyfill file is imported in refly/web/src/index.tsx as shown below:
// Some injects
import './process-polyfill';
import './utils/dom-patch';
import './index.css';
import './tokens.css';
import './antd-overrides.css';
import './audio-controls.css';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '@refly-packages/ai-workspace-common/utils/request';
import { App } from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<App />
</BrowserRouter>
</QueryClientProvider>,
);
This is where I came across another inject, dom-patch.ts. In the section, let’s find out what dom-patch is about.
dom-patch.ts
You will find the following code in refly/web/dom-patch.ts
// @ts-nocheck - Disable all type checking for this file
// Workaround for removeChild and insertBefore errors when
// google translate is enabled
// See https://github.com/facebook/react/issues/11538#issuecomment-417504600.
if (typeof Node === 'function' && Node.prototype) {
const originalRemoveChild = Node.prototype.removeChild;
Node.prototype.removeChild = function (child) {
if (child.parentNode !== this) {
if (console) {
console.error('Cannot remove a child from a different parent', child, this);
}
return child;
}
// biome-ignore lint/style/noArguments: using arguments is simpler
return originalRemoveChild.apply(this, arguments);
};
const originalInsertBefore = Node.prototype.insertBefore;
Node.prototype.insertBefore = function (newNode, referenceNode) {
if (referenceNode && referenceNode.parentNode !== this) {
if (console) {
console.error(
'Cannot insert before a reference node from a different parent',
referenceNode,
this,
);
}
return newNode;
}
// biome-ignore lint/style/noArguments: using arguments is simpler
return originalInsertBefore.apply(this, arguments);
};
}
This function has added the check below in removeChild and insertBefore methods:
if (referenceNode && referenceNode.parentNode !== this) {
if (console) {
console.error(
'Cannot insert before a reference node from a different parent',
referenceNode,
this,
);
}
return newNode;
}
Why? you might ask. Well, I don’t know. I am thinking this has to do with the comment:
// Workaround for removeChild and insertBefore errors when
// google translate is enabled
// See https://github.com/facebook/react/issues/11538#issuecomment-417504600.
In the OSS, it is a common practice to leave links in the comments to justify the work arounds/hacks.
There is also a biome/ignore comment:
// biome-ignore lint/style/noArguments: using arguments is simpler
return originalRemoveChild.apply(this, arguments);
About me:
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com
Top comments (0)