fix(polyfills): ajout du replaceAll de manière globale

packages/code-du-travail-frontend/.gitignore

@@ -11,5 +11,5 @@ scripts/logs/*
 .env.*
 
 ## Panda
-styled-system
-styled-system-studio
+src/styled-system
+src/styled-system-studio

packages/code-du-travail-frontend/.prettierignore

@@ -1,5 +1,5 @@
 node_modules/
 .next/
-.swc/
-styled-system/
+dist/
+src/styled-system/
 CHANGELOG.md

packages/code-du-travail-frontend/app/layout.tsx

@@ -3,7 +3,6 @@ import { Metadata } from "next/types";
 import { SITE_URL } from "../src/config";
 import { headers } from "next/headers";
 import DefaultLayout from "../src/modules/config/DefaultLayout";
-import { PolyfillComponent } from "../src/modules/utils";
 
 export const metadata: Metadata = {
   title: {
@@ -32,7 +31,6 @@ export default function RootLayout({
       nonce={nonce}
       defaultColorScheme={pathname.includes("/widgets") ? "light" : "system"}
     >
-      <PolyfillComponent />
       {children}
     </DefaultLayout>
   );

packages/code-du-travail-frontend/package.json

@@ -14,10 +14,11 @@
     "lint": "yarn lint:css && next lint",
     "precommit": "lint-staged",
     "start": "next start",
-    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && react-dsfr update-icons && panda codegen",
+    "tsup": "tsup",
+    "prebuild": "yarn tsup && node dist/prebuild.js && react-dsfr update-icons && panda codegen",
     "build": "yarn prebuild && next build",
     "build:analyze": "yarn prebuild && ANALYZE=true next build",
-    "pretest:api": "ELASTICSEARCH_URL=http://localhost:9200 NEXT_PUBLIC_ES_INDEX_PREFIX=cdtn_test NEXT_PUBLIC_APP_ENV=test NODE_ENV=test node -r @swc-node/register scripts/generate-data.ts",
+    "pretest:api": "yarn tsup && ELASTICSEARCH_URL=http://localhost:9200 NEXT_PUBLIC_ES_INDEX_PREFIX=cdtn_test NEXT_PUBLIC_APP_ENV=test NODE_ENV=test node dist/generate-data.js",
     "test": "yarn pretest:api && ELASTICSEARCH_URL=http://localhost:9200 NEXT_PUBLIC_ES_INDEX_PREFIX=cdtn_test NEXT_PUBLIC_APP_ENV=test NODE_ENV=test jest --silent",
     "test:watch": "npm run test -- --watch",
     "test:frontend": "NEXT_PUBLIC_APP_ENV=test NODE_ENV=test jest --silent --testPathIgnorePatterns='.*\\.es\\.test\\.ts$'",
@@ -31,7 +32,7 @@
     "type-check:watch": "npm run type-check -- --watch",
     "format": "prettier --write \"**/*.{js,ts,tsx,jsx,json,md}\"",
     "format:check": "prettier --check \"**/*.{js,ts,tsx,jsx,json,md}\"",
-    "clean:redirects": "node -r @swc-node/register scripts/clean-redirects.ts"
+    "clean:redirects": "yarn tsup && node dist/clean-redirects.js"
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "^1.13.9",
@@ -50,7 +51,6 @@
     "@socialgouv/matomo-next": "^1.6.1",
     "@socialgouv/modeles-social": "workspace:^",
     "@socialgouv/reference-article": "^1.0.1",
-    "core-js": "^3.39.0",
     "cors": "^2.8.5",
     "date-fns": "^2.22.1",
     "debounce-promise": "^3.1.2",
@@ -87,8 +87,6 @@
   },
   "devDependencies": {
     "@pandacss/dev": "^0.45.2",
-    "@swc-node/register": "^1.6.5",
-    "@swc/core": "^1.3.60",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.5",
@@ -121,6 +119,7 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "supertest": "^6.3.3",
     "testing-library-selector": "0.3.1",
+    "tsup": "^8.3.5",
     "typescript": "^5.5.4",
     "xml2js": "^0.6.2"
   }

packages/code-du-travail-frontend/panda.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
       },
     },
   },
-  outdir: "styled-system",
+  outdir: "src/styled-system",
   outExtension: "js",
+  importMap: "@styled-system",
 });

packages/code-du-travail-frontend/postcss.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    "@pandacss/dev/postcss": {},
   },
-}
+};

packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx

@@ -1,5 +1,4 @@
 import parse, { domToReact } from "html-react-parser";
-import { ReactHTMLElement } from "react";
 
 export const ContentParser = ({
   children,

packages/code-du-travail-frontend/src/modules/common/ListWithArrow.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { fr } from "@codegouvfr/react-dsfr";
+import { css } from "@styled-system/css";
 import React from "react";
-import { css } from "../../../styled-system/css";
 
 export const ListWithArrow = ({ items }: { items: JSX.Element[] }) => {
   return (

packages/code-du-travail-frontend/src/modules/common/Share.tsx

@@ -5,7 +5,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import { usePathname } from "next/navigation";
 import { SITE_URL } from "../../config";
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { useCommonTracking } from "./tracking";
 
 type Props = {

packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx

@@ -7,6 +7,7 @@ import { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir";
 import { StartDsfrSystem } from "./StartDsfrSystem";
 import { StartDsfrLight } from "./StartDsfrLight";
 import { StartDsfrDark } from "./StartDsfrDark";
+import { PolyfillComponent } from "./PolyfillComponent";
 
 type Props = {
   children: React.ReactNode;
@@ -44,6 +45,7 @@ export default function DefaultLayout({
         />
       </head>
       <body>
+        <PolyfillComponent />
         <DsfrProvider lang={lang}>{children}</DsfrProvider>
         <MatomoAnalytics />
       </body>

packages/code-du-travail-frontend/src/modules/config/PolyfillComponent.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+if (!("canParse" in URL)) {
+  (URL as any).canParse = function canParse(url, base) {
+    try {
+      if (base !== undefined) {
+        new URL(url, base);
+      } else {
+        new URL(url);
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  };
+}
+
+if (!("replaceAll" in String.prototype)) {
+  (String.prototype as any).replaceAll = function (
+    searchValue: string,
+    replaceValue: string
+  ) {
+    return this.split(searchValue).join(replaceValue);
+  };
+}
+
+export const PolyfillComponent = () => {
+  return null;
+};

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsGlossaire.tsx

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import Link from "next/link";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 
 type Props = {
   letters: string[];

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsIntro.tsx

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import Link from "next/link";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 import Image from "next/image";
 import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
 import AgreementSearch from "./AgreementSearch.svg";

packages/code-du-travail-frontend/src/modules/home/Components/HomeButton.tsx

@@ -1,5 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 
 type Props = {

packages/code-du-travail-frontend/src/modules/home/Components/HomeSearch.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import * as Sentry from "@sentry/nextjs";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { useCombobox } from "downshift";
 import { fetchSuggestResults } from "../../layout/header/fetchSuggestResults";
 import { SUGGEST_MAX_RESULTS } from "../../../config";

packages/code-du-travail-frontend/src/modules/home/Components/SectionContainer.tsx

@@ -1,5 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 
 type Props = {
   sectionId: string;

packages/code-du-travail-frontend/src/modules/home/Search.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 import Image from "next/image";
 import { HomeSearch } from "./Components";
 import { useRouter } from "next/navigation";

packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx

@@ -3,7 +3,7 @@ import { useCombobox } from "downshift";
 import { fetchSuggestResults } from "./fetchSuggestResults";
 import { SUGGEST_MAX_RESULTS } from "../../../config";
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { useLayoutTracking } from "../tracking";
 
 type Props = {

packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx

@@ -7,7 +7,7 @@ import { useNeedMoreInfoEvents } from "./tracking";
 import servicesDeRenseignement from "../../../data/services-de-renseignement.json";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 
 type ServiceRenseignement = {
   name: string;

packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx

@@ -2,7 +2,7 @@
 
 import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import { PopupContent } from "./PopupContent";
 import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";

packages/code-du-travail-frontend/src/modules/modeles-de-courriers/components/CopyButton.tsx

@@ -3,7 +3,7 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { useState } from "react";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { useModeleEvents } from "../tracking";
 
 export const CopyButton = ({ slug }: { slug: string }) => {

packages/code-du-travail-frontend/src/modules/modeles-de-courriers/components/LetterModelContent.tsx

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import Html from "../../common/Html";
-import { css } from "../../../../styled-system/css";
+import { css } from "@styled-system/css";
 import { getDisclaimer } from "../helpers";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { DownloadTile } from "./DownloadTile";

packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { CallOut } from "@codegouvfr/react-dsfr/CallOut";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 
 type StatsProps = {
   title: string;

packages/code-du-travail-frontend/src/modules/themes/ThemeTile.tsx

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { Tile } from "@codegouvfr/react-dsfr/Tile";
-import { css } from "../../../styled-system/css";
+import { css } from "@styled-system/css";
 
 type Props = {
   title: string;

packages/code-du-travail-frontend/src/modules/utils/index.ts

@@ -1,3 +1,2 @@
 export * from "./sort";
 export * from "./events";
-export * from "./PolyfillComponent";

packages/code-du-travail-frontend/tsconfig.json

@@ -19,7 +19,11 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@styled-system/*": ["./src/styled-system/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "cypress"]

packages/code-du-travail-frontend/tsup.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["scripts", "!scripts/**/__tests__/**", "!scripts/**/*.test.*"],
+});