Last year, we migrated a large project form JS to TS.
We did this with ts-migrate, and we renamed all instances of any to $TSFixMe, to differentiate them from real uses of any.
In order to see our progress on removing $TSFixMe, we build the a github workflow that adds comments to PRs with our progress, eg:
| :where(abbr), :where(address), :where(area), :where(article), :where(aside), :where(audio), :where(b), :where(base), :where(bdi), :where(bdo), :where(big), :where(blockquote), :where(body), :where(br), :where(caption), :where(cite), :where(code), :where(col), :where(colgroup), :where(data), :where(datalist), :where(dd), :where(del), :where(details), :where(dfn), :where(dialog), :where(dl), :where(dt), :where(em), :where(embed), :where(fieldset), :where(figcaption), :where(figure), :where(footer), :where(form), :where(h1), :where(h2), :where(h3), :where(h4), :where(h5), :where(h6), :where(head), :where(header), :where(hgroup), :where(hr), :where(i), :where(input), :where(ins), :where(kbd), :where(keygen), :where(label), :where(legend), :where(li), :where(link), :where(main), :where(map), :where(mark), :where(menu), :where(menuitem), :where(meta), :where(meter), :where(nav), :where(object), :where(ol), :where(optgroup), :where(option), :where(output), :where(param), :where(picture), :where(pre), :where(progress |
| import React from 'react' | |
| import { usePrevious } from './usePrevious' | |
| export type QueryStatus = 'idle' | 'loading' | 'error' | 'success' | |
| type QueryClientProviderProps = { | |
| children: React.ReactNode | |
| client: QueryClient | |
| } |
| import { RemixBrowser } from '@remix-run/react' | |
| import { startTransition, StrictMode } from 'react' | |
| import { hydrateRoot } from 'react-dom/client' | |
| function clearBrowserExtensionInjectionsBeforeHydration() { | |
| document | |
| .querySelectorAll( | |
| [ | |
| 'html > *:not(body, head)', | |
| 'script[src*="extension://"]', |
| // TODO: make `pages` optional and measure the div when unspecified, this will | |
| // allow more normal document flow and make it easier to do both mobile and | |
| // desktop. | |
| import { | |
| createContext, | |
| useCallback, | |
| useContext, | |
| useEffect, | |
| useMemo, | |
| useRef, |
While it's not possible to define a <script type="importmap"> within a module, it is possible to define it in a synchronous <script> tag, as long as it's before any module starts executing.
Example (works in Chrome / Edge / WebKit / Safari / Firefox)
<!DOCTYPE html>
<html lang="en">
<head>
For this to work, we are going serve React's static files for the client, and are going to proxy our Express server to /api.
Disclaimer - Ensure you are the root user, otherwise some of these commands may not work. The Express app also needs to server under a seperate route from the client (e.g /api), so all backend routes will look like this: /api/signup.
| #!/usr/bin/env python3 | |
| # from pdb import set_trace as bkp | |
| from sys import argv, exit | |
| from os import listdir, path, mkdir, utime | |
| from json import loads as to_dict | |
| from datetime import datetime as date | |
| if '-h' in argv or '--help' in argv: | |
| print(''' |
| /* | |
| This program is free software: you can redistribute it and/or modify | |
| it under the terms of the GNU General Public License as published by | |
| the Free Software Foundation, either version 3 of the License, or | |
| (at your option) any later version. | |
| This program is distributed in the hope that it will be useful, | |
| but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| GNU General Public License for more details. |
