From 36909065b544d06e8487f1e0679e595fd01a7f22 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Mon, 29 Apr 2024 10:02:41 +0200 Subject: Convert easy entrypoints files to Typescript (#30102) --- app/javascript/entrypoints/application.js | 15 ------------- app/javascript/entrypoints/application.ts | 15 +++++++++++++ app/javascript/entrypoints/error.js | 14 ------------ app/javascript/entrypoints/error.ts | 18 ++++++++++++++++ app/javascript/entrypoints/inert.js | 4 ---- app/javascript/entrypoints/inert.ts | 4 ++++ app/javascript/entrypoints/mailer.js | 3 --- app/javascript/entrypoints/mailer.ts | 3 +++ app/javascript/entrypoints/public-path.js | 21 ------------------ app/javascript/entrypoints/public-path.ts | 23 ++++++++++++++++++++ app/javascript/entrypoints/share.jsx | 32 --------------------------- app/javascript/entrypoints/share.tsx | 36 +++++++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 8 +++++++ 14 files changed, 108 insertions(+), 89 deletions(-) delete mode 100644 app/javascript/entrypoints/application.js create mode 100644 app/javascript/entrypoints/application.ts delete mode 100644 app/javascript/entrypoints/error.js create mode 100644 app/javascript/entrypoints/error.ts delete mode 100644 app/javascript/entrypoints/inert.js create mode 100644 app/javascript/entrypoints/inert.ts delete mode 100644 app/javascript/entrypoints/mailer.js create mode 100644 app/javascript/entrypoints/mailer.ts delete mode 100644 app/javascript/entrypoints/public-path.js create mode 100644 app/javascript/entrypoints/public-path.ts delete mode 100644 app/javascript/entrypoints/share.jsx create mode 100644 app/javascript/entrypoints/share.tsx diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js deleted file mode 100644 index d13388b4791..00000000000 --- a/app/javascript/entrypoints/application.js +++ /dev/null @@ -1,15 +0,0 @@ -import './public-path'; -import main from "mastodon/main"; - -import { start } from '../mastodon/common'; -import { loadLocale } from '../mastodon/locales'; -import { loadPolyfills } from '../mastodon/polyfills'; - -start(); - -loadPolyfills() - .then(loadLocale) - .then(main) - .catch(e => { - console.error(e); - }); diff --git a/app/javascript/entrypoints/application.ts b/app/javascript/entrypoints/application.ts new file mode 100644 index 00000000000..1087b1c4cb5 --- /dev/null +++ b/app/javascript/entrypoints/application.ts @@ -0,0 +1,15 @@ +import './public-path'; +import main from 'mastodon/main'; + +import { start } from '../mastodon/common'; +import { loadLocale } from '../mastodon/locales'; +import { loadPolyfills } from '../mastodon/polyfills'; + +start(); + +loadPolyfills() + .then(loadLocale) + .then(main) + .catch((e: unknown) => { + console.error(e); + }); diff --git a/app/javascript/entrypoints/error.js b/app/javascript/entrypoints/error.js deleted file mode 100644 index 6376dc2f5df..00000000000 --- a/app/javascript/entrypoints/error.js +++ /dev/null @@ -1,14 +0,0 @@ -import './public-path'; -import ready from '../mastodon/ready'; - -ready(() => { - const image = document.querySelector('img'); - - image.addEventListener('mouseenter', () => { - image.src = '/oops.gif'; - }); - - image.addEventListener('mouseleave', () => { - image.src = '/oops.png'; - }); -}); diff --git a/app/javascript/entrypoints/error.ts b/app/javascript/entrypoints/error.ts new file mode 100644 index 00000000000..db68484f3a8 --- /dev/null +++ b/app/javascript/entrypoints/error.ts @@ -0,0 +1,18 @@ +import './public-path'; +import ready from '../mastodon/ready'; + +ready(() => { + const image = document.querySelector('img'); + + if (!image) return; + + image.addEventListener('mouseenter', () => { + image.src = '/oops.gif'; + }); + + image.addEventListener('mouseleave', () => { + image.src = '/oops.png'; + }); +}).catch((e: unknown) => { + console.error(e); +}); diff --git a/app/javascript/entrypoints/inert.js b/app/javascript/entrypoints/inert.js deleted file mode 100644 index 7c04a97fafd..00000000000 --- a/app/javascript/entrypoints/inert.js +++ /dev/null @@ -1,4 +0,0 @@ -/* Placeholder file to have `inert.scss` compiled by Webpack - This is used by the `wicg-inert` polyfill */ - -import '../styles/inert.scss'; diff --git a/app/javascript/entrypoints/inert.ts b/app/javascript/entrypoints/inert.ts new file mode 100644 index 00000000000..7c04a97fafd --- /dev/null +++ b/app/javascript/entrypoints/inert.ts @@ -0,0 +1,4 @@ +/* Placeholder file to have `inert.scss` compiled by Webpack + This is used by the `wicg-inert` polyfill */ + +import '../styles/inert.scss'; diff --git a/app/javascript/entrypoints/mailer.js b/app/javascript/entrypoints/mailer.js deleted file mode 100644 index a2ad5e73ac2..00000000000 --- a/app/javascript/entrypoints/mailer.js +++ /dev/null @@ -1,3 +0,0 @@ -import '../styles/mailer.scss'; - -require.context('../icons'); diff --git a/app/javascript/entrypoints/mailer.ts b/app/javascript/entrypoints/mailer.ts new file mode 100644 index 00000000000..a2ad5e73ac2 --- /dev/null +++ b/app/javascript/entrypoints/mailer.ts @@ -0,0 +1,3 @@ +import '../styles/mailer.scss'; + +require.context('../icons'); diff --git a/app/javascript/entrypoints/public-path.js b/app/javascript/entrypoints/public-path.js deleted file mode 100644 index f4d166a7713..00000000000 --- a/app/javascript/entrypoints/public-path.js +++ /dev/null @@ -1,21 +0,0 @@ -// Dynamically set webpack's loading path depending on a meta header, in order -// to share the same assets regardless of instance configuration. -// See https://webpack.js.org/guides/public-path/#on-the-fly - -function removeOuterSlashes(string) { - return string.replace(/^\/*/, '').replace(/\/*$/, ''); -} - -function formatPublicPath(host = '', path = '') { - let formattedHost = removeOuterSlashes(host); - if (formattedHost && !/^http/i.test(formattedHost)) { - formattedHost = `//${formattedHost}`; - } - const formattedPath = removeOuterSlashes(path); - return `${formattedHost}/${formattedPath}/`; -} - -const cdnHost = document.querySelector('meta[name=cdn-host]'); - -// eslint-disable-next-line no-undef -__webpack_public_path__ = formatPublicPath(cdnHost ? cdnHost.content : '', process.env.PUBLIC_OUTPUT_PATH); diff --git a/app/javascript/entrypoints/public-path.ts b/app/javascript/entrypoints/public-path.ts new file mode 100644 index 00000000000..ac4b9355b95 --- /dev/null +++ b/app/javascript/entrypoints/public-path.ts @@ -0,0 +1,23 @@ +// Dynamically set webpack's loading path depending on a meta header, in order +// to share the same assets regardless of instance configuration. +// See https://webpack.js.org/guides/public-path/#on-the-fly + +function removeOuterSlashes(string: string) { + return string.replace(/^\/*/, '').replace(/\/*$/, ''); +} + +function formatPublicPath(host = '', path = '') { + let formattedHost = removeOuterSlashes(host); + if (formattedHost && !/^http/i.test(formattedHost)) { + formattedHost = `//${formattedHost}`; + } + const formattedPath = removeOuterSlashes(path); + return `${formattedHost}/${formattedPath}/`; +} + +const cdnHost = document.querySelector('meta[name=cdn-host]'); + +__webpack_public_path__ = formatPublicPath( + cdnHost ? cdnHost.content : '', + process.env.PUBLIC_OUTPUT_PATH, +); diff --git a/app/javascript/entrypoints/share.jsx b/app/javascript/entrypoints/share.jsx deleted file mode 100644 index 7b5723091c8..00000000000 --- a/app/javascript/entrypoints/share.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import './public-path'; -import { createRoot } from 'react-dom/client'; - -import { start } from '../mastodon/common'; -import ComposeContainer from '../mastodon/containers/compose_container'; -import { loadPolyfills } from '../mastodon/polyfills'; -import ready from '../mastodon/ready'; - -start(); - -function loaded() { - const mountNode = document.getElementById('mastodon-compose'); - - if (mountNode) { - const attr = mountNode.getAttribute('data-props'); - - if (!attr) return; - - const props = JSON.parse(attr); - const root = createRoot(mountNode); - - root.render(); - } -} - -function main() { - ready(loaded); -} - -loadPolyfills().then(main).catch(error => { - console.error(error); -}); diff --git a/app/javascript/entrypoints/share.tsx b/app/javascript/entrypoints/share.tsx new file mode 100644 index 00000000000..79262508510 --- /dev/null +++ b/app/javascript/entrypoints/share.tsx @@ -0,0 +1,36 @@ +import './public-path'; +import { createRoot } from 'react-dom/client'; + +import { start } from '../mastodon/common'; +import ComposeContainer from '../mastodon/containers/compose_container'; +import { loadPolyfills } from '../mastodon/polyfills'; +import ready from '../mastodon/ready'; + +start(); + +function loaded() { + const mountNode = document.getElementById('mastodon-compose'); + + if (mountNode) { + const attr = mountNode.getAttribute('data-props'); + + if (!attr) return; + + const props = JSON.parse(attr) as object; + const root = createRoot(mountNode); + + root.render(); + } +} + +function main() { + ready(loaded).catch((error: unknown) => { + console.error(error); + }); +} + +loadPolyfills() + .then(main) + .catch((error: unknown) => { + console.error(error); + }); diff --git a/package.json b/package.json index 0b5c3484d2a..24d81ea476a 100644 --- a/package.json +++ b/package.json @@ -167,6 +167,7 @@ "@types/redux-immutable": "^4.0.3", "@types/requestidlecallback": "^0.3.5", "@types/webpack": "^4.41.33", + "@types/webpack-env": "^1.18.4", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "babel-jest": "^29.5.0", diff --git a/yarn.lock b/yarn.lock index 0b60c39c91c..ffc64ba08c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2766,6 +2766,7 @@ __metadata: "@types/redux-immutable": "npm:^4.0.3" "@types/requestidlecallback": "npm:^0.3.5" "@types/webpack": "npm:^4.41.33" + "@types/webpack-env": "npm:^1.18.4" "@typescript-eslint/eslint-plugin": "npm:^7.0.0" "@typescript-eslint/parser": "npm:^7.0.0" arrow-key-navigation: "npm:^1.2.0" @@ -3990,6 +3991,13 @@ __metadata: languageName: node linkType: hard +"@types/webpack-env@npm:^1.18.4": + version: 1.18.4 + resolution: "@types/webpack-env@npm:1.18.4" + checksum: 10c0/3fa77dbff0ed71685404576b0a1cf74587567fe2ee1cfd11d56d6eefcab7a61e4c9ead0eced264e289d2cf0fc74296dbd55ed6c95774fe0fd6264d156c5a59f0 + languageName: node + linkType: hard + "@types/webpack-sources@npm:*": version: 3.2.2 resolution: "@types/webpack-sources@npm:3.2.2" -- cgit v1.2.3