bump dependencies and move to es6

package.json

@@ -40,7 +40,6 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^3.3.2",
         "sharp": "^0.31.1",
-        "ts-jest": "^29.1.5",
         "typescript": "5.5"
     },
     "dependencies": {

packages/frontend/.storybook/preview.jsx

@@ -1,7 +1,7 @@
 import "../src/assets.css";
 import "prismjs/themes/prism-okaidia.css";
 import { domSheet } from "twind/sheets";
-import { setup } from "../src/twind";
+import { setup } from "../src/twind.js";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

packages/frontend/jest.config.mjs

@@ -1,13 +1,7 @@
 /** @type {import('jest').Config} */
 const config = {
   modulePathIgnorePatterns: ["dist"],
-  preset: "ts-jest",
   testEnvironment: "jsdom",
-  globals: {
-    "ts-jest": {
-      useESM: true,
-    },
-  },
   transform: {
     "^.+\\.(t|j)sx?$": "@swc/jest",
   },

packages/frontend/package.json

@@ -7,6 +7,7 @@
   },
   "private": true,
   "main": "dist/index.js",
+  "type": "module",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist node_modules",
@@ -26,7 +27,6 @@
     "@types/prismjs": "^1.26.0",
     "date-fns": "^2.28.0",
     "moment": "^2.29.1",
-    "node-fetch": "^2.6.7",
     "prismjs": "^1.29.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -47,5 +47,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "babel-loader": "^8.2.3"
+  },
+  "alias": {
+    "react/jsx-runtime": "react/jsx-runtime.js"
   }
 }

packages/frontend/src/AsyncContext.spec.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import fetchMock from "jest-fetch-mock";
 import { render, waitFor } from "@testing-library/react";
-import { useFetch } from "./AsyncContext";
+import { useFetch } from "./AsyncContext.js";
 
 function UseFetchTester({ url }: { url: string }) {
   const { content, loading } = useFetch(url);
@@ -10,7 +11,7 @@ function UseFetchTester({ url }: { url: string }) {
 
 describe("AsyncContext", () => {
   beforeEach(() => {
-    fetchMock.resetMocks();
+    fetchMock.default.resetMocks();
   });
 
   describe("useFetch", () => {
@@ -26,7 +27,7 @@ describe("AsyncContext", () => {
     it("it returns { loading: true } while response is not done", async () => {
       const url = "/url/to/be/fetched/2";
       //eslint-disable-next-line
-      fetchMock.mockReturnValue(new Promise((_) => {}));
+      fetchMock.default.mockReturnValue(new Promise((_) => {}));
 
       const { container } = render(<UseFetchTester url={url} />);
 
@@ -38,7 +39,7 @@ describe("AsyncContext", () => {
     it("it returns { loading: false, content } when response is done", async () => {
       const url = "/url/to/be/fetched/3";
       const content = "this is the content";
-      fetchMock.mockOnce(content);
+      fetchMock.default.mockOnce(content);
 
       const { container } = render(<UseFetchTester url={url} />);
 

packages/frontend/src/AsyncContext.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   DependencyList,
   EffectCallback,
   PropsWithChildren,

packages/frontend/src/DateSpan.tsx

@@ -1,6 +1,6 @@
-import { parseISO } from "date-fns/fp";
-import { format as fnsFormat } from "date-fns";
-import { tw } from "./twind";
+import React from "react";
+import { format as fnsFormat, parseISO } from "date-fns";
+import { tw } from "./twind.js";
 
 export type DateSpanProps = {
   iso?: string;

packages/frontend/src/FetchTracker.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropsWithChildren, useContext, useCallback, useState } from "react";
-import { AsyncContext } from "./AsyncContext";
+import { AsyncContext } from "./AsyncContext.js";
 
 export function FetchTracker({ children }: PropsWithChildren<unknown>) {
   const {

packages/frontend/src/Footer.tsx

@@ -1,6 +1,7 @@
-import { Link } from "./links";
-import { tw } from "./twind";
-import { name } from "./title";
+import React from "react";
+import { Link } from "./links.js";
+import { tw } from "./twind.js";
+import { name } from "./title.js";
 
 export interface FooterProps {
   pkgVersion?: string;

packages/frontend/src/Header.spec.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { render } from "@testing-library/react";
-import { Header } from "./Header";
+import { Header } from "./Header.js";
 
 describe("Header", () => {
   it("should render html with h1 with the given title", () => {

packages/frontend/src/Header.tsx

@@ -1,8 +1,9 @@
-import { DateSpan } from "./DateSpan";
-import { tw } from "./twind";
-import { Icon, IconProps } from "./Icon";
-import { createTitle } from "./title";
-import { Anchor, Link } from "./links";
+import React from "react";
+import { DateSpan } from "./DateSpan.js";
+import { tw } from "./twind.js";
+import { Icon, IconProps } from "./Icon.js";
+import { createTitle } from "./title.js";
+import { Anchor, Link } from "./links.js";
 
 export interface HeaderProps {
   title?: string | null;

packages/frontend/src/Icon.spec.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { render } from "@testing-library/react";
-import { Icon } from "./Icon";
+import { Icon } from "./Icon.js";
 
 describe("Icon", () => {
   it("should render an svg", () => {

packages/frontend/src/Icon.tsx

@@ -1,4 +1,5 @@
-import { tw } from "./twind";
+import React from "react";
+import { tw } from "./twind.js";
 
 function LinkedInIcon() {
   return (

packages/frontend/src/LoadingBar.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { useMemo } from "react";
-import { useFetchCounter } from "./FetchTracker";
-import { tw, animation, keyframes } from "./twind";
+import { useFetchCounter } from "./FetchTracker.js";
+import { tw, animation, keyframes } from "./twind.js";
 
 function creatingAnimation() {
   return animation(

packages/frontend/src/Page.stories.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Page } from "./Page";
+import { Page } from "./Page.js";
 
 export default {
   title: "Page",

packages/frontend/src/Page.tsx

@@ -1,9 +1,10 @@
+import React from "react";
 import { PropsWithChildren, StrictMode } from "react";
-import { tw } from "./twind";
-import { Footer, FooterProps } from "./Footer";
-import { Header, HeaderProps } from "./Header";
-import { LoadingBar } from "./LoadingBar";
-import { FetchTracker } from "./FetchTracker";
+import { tw } from "./twind.js";
+import { Footer, FooterProps } from "./Footer.js";
+import { Header, HeaderProps } from "./Header.js";
+import { LoadingBar } from "./LoadingBar.js";
+import { FetchTracker } from "./FetchTracker.js";
 
 export type PageProps = FooterProps & HeaderProps;
 

packages/frontend/src/PageRenderer.spec.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { act, render } from "@testing-library/react";
-import { PageRenderer } from "./PageRenderer";
-import { history } from "./History";
+import { PageRenderer } from "./PageRenderer.js";
+import { history } from "./History.js";
 
 jest.mock("./History", () => {
   const history = jest.fn();

packages/frontend/src/PageRenderer.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
-import { PageWithItems, PageWithListProps } from "./PageWithItems";
-import { PageWithMarkdown, PageWithMarkdownProps } from "./PageWithMarkdown";
-import { createTitle } from "./title";
-import { history } from "./History";
+import React, { useCallback, useEffect, useState } from "react";
+import { PageWithItems, PageWithListProps } from "./PageWithItems.js";
+import { PageWithMarkdown, PageWithMarkdownProps } from "./PageWithMarkdown.js";
+import { createTitle } from "./title.js";
+import { history } from "./History.js";
 
 function getPageProps(input: PageRendererProps) {
   if ("payload" in input) {

packages/frontend/src/PageWithItems.stories.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { PageWithItems } from "./PageWithItems";
+import { PageWithItems } from "./PageWithItems.js";
 
 export default {
   title: "PageWithItems",

packages/frontend/src/PageWithItems.tsx

@@ -1,8 +1,9 @@
-import { DateSpan } from "./DateSpan";
-import { Page, PageProps } from "./Page";
-import { tw } from "./twind";
-import { Anchor, Link } from "./links";
-import { MarkedContent } from "./marked/MarkedContent";
+import React from "react";
+import { DateSpan } from "./DateSpan.js";
+import { Page, PageProps } from "./Page.js";
+import { tw } from "./twind.js";
+import { Anchor, Link } from "./links.js";
+import { MarkedContent } from "./marked/MarkedContent.js";
 
 export type PageItem = {
   date?: string;

packages/frontend/src/PageWithMarkdown.spec.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { render, screen } from "@testing-library/react";
-import { PageWithMarkdown } from "./PageWithMarkdown";
+import { PageWithMarkdown } from "./PageWithMarkdown.js";
 
 describe("PageWithMarkdown", () => {
   it("should render html", async () => {

packages/frontend/src/PageWithMarkdown.stories.tsx

@@ -1,8 +1,9 @@
+import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import trueArticle from "../../web/src/articles/testing-rxjs.md";
 import articleContainingTweet from "../../web/src/articles/devoxx-2014.md";
-import { PageWithMarkdown } from "./PageWithMarkdown";
-import { AsyncContext, AsyncContextState } from "./AsyncContext";
+import { PageWithMarkdown } from "./PageWithMarkdown.js";
+import { AsyncContext, AsyncContextState } from "./AsyncContext.js";
 
 export default {
   title: "PageWithMarkdown",

packages/frontend/src/PageWithMarkdown.tsx

@@ -1,5 +1,6 @@
-import { Page, PageProps } from "./Page";
-import { MarkedContent } from "./marked/MarkedContent";
+import React from "react";
+import { Page, PageProps } from "./Page.js";
+import { MarkedContent } from "./marked/MarkedContent.js";
 
 export type PageWithMarkdownProps = PageProps & {
   bodyMarkdown?: string;

packages/frontend/src/PrismCodeBlock.spec.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { render } from "@testing-library/react";
-import { PrismCodeBlock } from "./PrismCodeBlock";
+import { PrismCodeBlock } from "./PrismCodeBlock.js";
 
 describe("PrismCode", () => {
   it("should render formated the given code", () => {

packages/frontend/src/PrismCodeBlock.stories.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { PrismCodeBlock } from "./PrismCodeBlock";
-import { Link } from "./links";
+import { PrismCodeBlock } from "./PrismCodeBlock.js";
+import { Link } from "./links.js";
 
 export default {
   title: PrismCodeBlock.name,

packages/frontend/src/PrismCodeBlock.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { PropsWithChildren } from "react";
-import { getGrammar, highlight } from "./prism";
-import { tw } from "./twind";
+import { getGrammar, highlight } from "./prism.js";
+import { tw } from "./twind.js";
 
 export type PrismCodeProps = {
   language?: string;

packages/frontend/src/index.ts

@@ -1,9 +1,9 @@
-import { setup } from "./twind";
-export * from "./PageWithMarkdown";
-export * from "./PageWithItems";
-export * from "./PageRenderer";
-export * from "./md";
-export * from "./title";
-export * from "./History";
+import { setup } from "./twind.js";
+export * from "./PageWithMarkdown.js";
+export * from "./PageWithItems.js";
+export * from "./PageRenderer.js";
+export * from "./md.js";
+export * from "./title.js";
+export * from "./History.js";
 
 setup();

packages/frontend/src/links.spec.tsx

@@ -1,15 +1,16 @@
+import React from "react";
 import fetchMock from "jest-fetch-mock";
 import { render, fireEvent, waitFor } from "@testing-library/react";
-import { Anchor } from "./links";
-import * as history from "./History";
+import { Anchor } from "./links.js";
+import * as history from "./History.js";
 
 jest.mock("./History", () => ({
   history: jest.fn(),
 }));
 
 describe("links", () => {
   beforeEach(() => {
-    fetchMock.resetMocks();
+    fetchMock.default.resetMocks();
 
     jest.mocked(history.history).mockReturnValue({
       pushState: jest.fn(),
@@ -59,7 +60,7 @@ describe("links", () => {
 
     it("pushes the fetched state to history", async () => {
       const payload = "payload";
-      fetchMock.mockOnce(payload);
+      fetchMock.default.mockOnce(payload);
       const pushState = jest.fn();
       jest.mocked(history.history).mockReturnValue({
         pushState,
@@ -84,7 +85,7 @@ describe("links", () => {
 
     it("pushes an href with an ending / to the history", async () => {
       const payload = "payload";
-      fetchMock.mockOnce(payload);
+      fetchMock.default.mockOnce(payload);
       const pushState = jest.fn();
       jest.mocked(history.history).mockReturnValue({
         pushState,

packages/frontend/src/links.stories.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { PageWithMarkdown } from "./PageWithMarkdown";
-import { Link } from "./links";
-import { CodeSpan } from "./marked/CodeSpan";
+import { PageWithMarkdown } from "./PageWithMarkdown.js";
+import { Link } from "./links.js";
+import { CodeSpan } from "./marked/CodeSpan.js";
 
 export default {
   title: "links",

packages/frontend/src/links.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { MouseEvent, useCallback, PropsWithChildren } from "react";
-import { tw } from "./twind";
-import { Icon, IconProps } from "./Icon";
-import { history } from "./History";
+import { tw } from "./twind.js";
+import { Icon, IconProps } from "./Icon.js";
+import { history } from "./History.js";
 
 function computeHref(href: string) {
   if (!href.endsWith("/")) {

packages/frontend/src/marked/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { CodeBlockRendererProps } from "react-marked-renderer";
-import { PrismCodeBlock } from "../PrismCodeBlock";
+import { PrismCodeBlock } from "../PrismCodeBlock.js";
 
 export function CodeBlock({ lang, children }: CodeBlockRendererProps) {
   const code = typeof children === "string" ? children : undefined;

packages/frontend/src/marked/CodeSpan.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { CodeSpanRendererProps } from "react-marked-renderer";
-import { tw } from "../twind";
+import { tw } from "../twind.js";
 
 export function CodeSpan({ children }: CodeSpanRendererProps) {
   return <code className={tw`bg-gray-200 rounded px-1`}>{children}</code>;