Skip to content

Commit

Permalink
refactor(web): migrate to "moduleResolution": "node16" (#14)
Browse files Browse the repository at this point in the history 
* refactor(web): migrate to moduleResolution node16

also revert cec630d because "imports" is not supported well enough yet

* chore(deps): ignore updates for "esbuild"

because of kentcdodds/mdx-bundler#205
  • Loading branch information
@pkerschbaum
pkerschbaum authored Feb 3, 2023
1 parent 0502bc7 commit f758096
Show file tree
Hide file tree
Showing 73 changed files with 1,781 additions and 317 deletions.
7 changes: 7 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,12 @@
"packageManager": "pnpm@7.11.0",
"engines": {
"pnpm": "^7.11.0"
},
"pnpm": {
"updateConfig": {
"ignoreDependencies": [
"esbuild"
]
}
}
}
1 change: 1 addition & 0 deletions packages/apps/web/.eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ module.exports = {
...noRestrictedSyntax_preferNextJsImage,
...noRestrictedSyntax_preferElements,
],
'@next/next/no-html-link-for-pages': ['error', 'src/pages/'],
},
overrides: [
...(baseEslintConfig.overrides ?? []),
Expand Down
1 change: 1 addition & 0 deletions packages/apps/web/next-env-custom.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="next/image-types/global.js" />
10 changes: 10 additions & 0 deletions packages/apps/web/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ let nextConfig = {
ignoreBuildErrors: true,
},

webpack(config) {
// moduleResolution: node16 support for Next.js (https://github.com/vercel/next.js/discussions/41189#discussioncomment-4026895)
config.resolve.extensionAlias = {
...config.resolve.extensionAlias,
'.js': ['.js', '.ts'],
'.jsx': ['.jsx', '.tsx'],
};
return config;
},

async rewrites() {
/*
* https://plausible.io/docs/proxy/guides/nextjs#step-1-add-url-rewrite-rules
Expand Down
14 changes: 6 additions & 8 deletions packages/apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,23 @@
"private": true,
"type": "module",
"version": "1.0.0",
"imports": {
"#pkg/*": "./dist/*"
},
"scripts": {
"dev": "next dev",
"fetch-favicons-for-articles": "ts-node --esm --project ./tsconfig.project.json ./scripts/fetch-favicons-for-articles.ts && prettier --write ./generated/favicons-for-websites.json && git add ./generated/favicons-for-websites.json",
"build:next": "next build",
"build:sitemap": "next-sitemap --config next-sitemap.cjs",
"compile": "tsc -p ./tsconfig.project.json --noEmit",
"export": "next export",
"start": "next start",
"lint:eslint": "eslint --max-warnings 0",
"lint:css": "stylelint \"./src/**/*.(css|ts|tsx)\"",
"pkg:nuke": "pnpm run pkg:nuke:artifacts && rimraf node_modules",
"pkg:nuke:artifacts": "rimraf dist *.tsbuildinfo",
"pkg:build": "pnpm run pkg:nuke:artifacts && pnpm run build:next && pnpm run build:sitemap",
"pkg:build": "pnpm run pkg:nuke:artifacts && pnpm run compile && pnpm run build:next && pnpm run build:sitemap",
"pkg:lint": "pnpm run lint:eslint . && pnpm run lint:css",
"pkg:lint:fix": "pnpm run lint:eslint . --fix",
"pkg:lint:file": "pnpm run lint:eslint",
"pkg:compile:dry-run": "tsc -p ./tsconfig.project.json --noEmit",
"pkg:compile:dry-run": "pnpm run compile",
"pkg:lib:watch": "pnpm run pkg:compile:dry-run --watch --preserveWatchOutput"
},
"nx": {
Expand Down Expand Up @@ -53,9 +51,9 @@
"react-dom": "^18.2.0",
"react-feather": "^2.0.10",
"react-is": "^18.2.0",
"sanitize-html": "^2.8.1",
"sanitize-html": "^2.9.0",
"sharp": "^0.31.3",
"styled-components": "^5.3.6",
"styled-components": "6.0.0-beta.9",
"tiny-invariant": "^1.3.1",
"unist-util-visit": "^4.1.2",
"zod": "^3.20.2"
Expand Down Expand Up @@ -83,7 +81,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-regexp": "^1.12.0",
"next-remote-refresh": "^0.10.0",
"next-sitemap": "^3.1.48",
"next-sitemap": "^3.1.49",
"postcss": "^8.4.21",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.3",
Expand Down
4 changes: 2 additions & 2 deletions packages/apps/web/src/components/article-tile/ArticleTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

import type { MDXFile } from '@pkerschbaum-homepage/mdx/schema';

import { Description, Tile, TileAnchor, TileContent, Title } from '#pkg/elements';
import { Description, Tile, TileAnchor, TileContent, Title } from '#pkg/elements/index.js';

type ArticleTileProps = {
article: MDXFile;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/article-tile/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/article-tile/ArticleTile';
export * from '#pkg/components/article-tile/ArticleTile.jsx';
10 changes: 6 additions & 4 deletions packages/apps/web/src/components/article-viewer/ArticleViewer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import styled, { css } from 'styled-components';
import { styled, css } from 'styled-components';
import invariant from 'tiny-invariant';

import { StyledAnchor } from '#pkg/components/fancy-anchor';
import { CodeBlockContainer } from '#pkg/components/mdx-viewer';
import { ColorTheme, DataAttribute } from '#pkg/constants';
import { StyledAnchor } from '#pkg/components/fancy-anchor/index.js';
import { CodeBlockContainer } from '#pkg/components/mdx-viewer/index.js';
import { ColorTheme, DataAttribute } from '#pkg/constants.js';

type IconURLToAssociatedWebsitesMap = {
[iconURL in string]?: {
Expand Down Expand Up @@ -90,6 +90,7 @@ export const ArticleViewerContent = styled.div<{ styleProps: StyleProps }>`
invariant(icon);
return css`
${icon.associatedWebsites
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
.map((url) => `& ${StyledAnchor}[href="${url}"]::before`)
.join(', ')} {
display: inline-block;
Expand All @@ -106,6 +107,7 @@ export const ArticleViewerContent = styled.div<{ styleProps: StyleProps }>`
${icon.associatedWebsites
.map(
(url) =>
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
`*:root[${DataAttribute.THEME}='${ColorTheme.DARK}'] & ${StyledAnchor}[href="${url}"]::before`,
)
.join(', ')} {
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/article-viewer/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/article-viewer/ArticleViewer';
export * from '#pkg/components/article-viewer/ArticleViewer.jsx';
6 changes: 3 additions & 3 deletions packages/apps/web/src/components/articles-list/ArticlesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import dayjs from 'dayjs';
import type React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

import type { MDXFile } from '@pkerschbaum-homepage/mdx/schema';

import { ArticleTile } from '#pkg/components/article-tile';
import { QUERIES } from '#pkg/constants';
import { ArticleTile } from '#pkg/components/article-tile/index.js';
import { QUERIES } from '#pkg/constants.js';

type ArticlesListProps = {
pathPrefix: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/articles-list/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/articles-list/ArticlesList';
export * from '#pkg/components/articles-list/ArticlesList.jsx';
6 changes: 3 additions & 3 deletions packages/apps/web/src/components/fancy-anchor/FancyAnchor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { Anchor, AnchorProps } from '#pkg/elements';
import { urlUtils } from '#pkg/utils/url.utils';
import { Anchor, AnchorProps } from '#pkg/elements/index.js';
import { urlUtils } from '#pkg/utils/url.utils.js';

export type FancyAnchorProps = AnchorProps & {};

Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/fancy-anchor/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/fancy-anchor/FancyAnchor';
export * from '#pkg/components/fancy-anchor/FancyAnchor.jsx';
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/favicon/Favicon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

type FaviconProps = {
width: number;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/favicon/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/favicon/Favicon';
export * from '#pkg/components/favicon/Favicon.jsx';
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

export const Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/header/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/header/Header';
export * from '#pkg/components/header/Header.jsx';
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/icon-library/IconLibrary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import type { IconProps as ReactFeatherIconProps } from 'react-feather';
import styled from 'styled-components';
import { styled } from 'styled-components';

type IconProps = {
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/icon-library/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/icon-library/IconLibrary';
export * from '#pkg/components/icon-library/IconLibrary.jsx';
8 changes: 5 additions & 3 deletions packages/apps/web/src/components/introduction/Introduction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import Image from 'next/image';
import _Image from 'next/image.js';
import type React from 'react';
import { MapPin } from 'react-feather';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { commonStyles } from '#pkg/styles/common.styles';
import { commonStyles } from '#pkg/styles/common.styles.js';
import profilePic from '../../../public/profile-picture.jpg';

const Image = _Image as unknown as typeof _Image.default;

export const Introduction: React.FC = () => {
return (
<IntroductionContainer>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/introduction/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/introduction/Introduction';
export * from '#pkg/components/introduction/Introduction.jsx';
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/main/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

type MainProps = {
children: React.ReactNode;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/main/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/main/Main';
export * from '#pkg/components/main/Main.jsx';
10 changes: 5 additions & 5 deletions packages/apps/web/src/components/mdx-viewer/MDXViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { getMDXComponent } from 'mdx-bundler/client';
import * as React from 'react';
import { CheckCircle, Clipboard } from 'react-feather';
import * as ReactIs from 'react-is';
import styled, { StyledComponentProps } from 'styled-components';
import { styled } from 'styled-components';
import invariant from 'tiny-invariant';

import { FancyAnchor, FancyAnchorProps } from '#pkg/components/fancy-anchor';
import { Classes, ColorTheme, DataAttribute } from '#pkg/constants';
import { Anchor, Button } from '#pkg/elements';
import { FancyAnchor, FancyAnchorProps } from '#pkg/components/fancy-anchor/index.js';
import { Classes, ColorTheme, DataAttribute } from '#pkg/constants.js';
import { Anchor, Button } from '#pkg/elements/index.js';

export type MDXViewerProps = {
codeOfMdxParseResult: string;
Expand Down Expand Up @@ -57,7 +57,7 @@ export const MDXViewer: React.FC<MDXViewerProps> = ({ codeOfMdxParseResult }) =>
// based on https://tomekdev.com/posts/anchors-for-headings-in-mdx
type HeadingWithAnchorProps = {
as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
headingProps: StyledComponentProps<'h1', any, {}, never>;
headingProps: React.HTMLAttributes<HTMLHeadingElement>;
};

const HeadingWithAnchor: React.FC<HeadingWithAnchorProps> = ({ as, headingProps }) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/mdx-viewer/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/mdx-viewer/MDXViewer';
export * from '#pkg/components/mdx-viewer/MDXViewer.jsx';
4 changes: 3 additions & 1 deletion packages/apps/web/src/components/metadata-tags/MetadataTags.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import Head from 'next/head';
import _Head from 'next/head.js';

const Head = _Head as unknown as typeof _Head.default;

type MetadataTagsProps = {
title: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/metadata-tags/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/metadata-tags/MetadataTags';
export * from '#pkg/components/metadata-tags/MetadataTags.jsx';
12 changes: 6 additions & 6 deletions packages/apps/web/src/components/nav/Nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { PenTool } from 'react-feather';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { Favicon } from '#pkg/components/favicon';
import { Cookie, Topic } from '#pkg/components/icon-library';
import { config } from '#pkg/config';
import { Animations, DataAttribute, IsScrolled } from '#pkg/constants';
import { Anchor } from '#pkg/elements';
import { Favicon } from '#pkg/components/favicon/index.js';
import { Cookie, Topic } from '#pkg/components/icon-library/index.js';
import { config } from '#pkg/config.js';
import { Animations, DataAttribute, IsScrolled } from '#pkg/constants.js';
import { Anchor } from '#pkg/elements/index.js';

export const Nav: React.FC = () => {
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/nav/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/nav/Nav';
export * from '#pkg/components/nav/Nav.jsx';
10 changes: 6 additions & 4 deletions packages/apps/web/src/components/project-tile/ProjectTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import Image from 'next/image';
import _Image from 'next/image.js';
import type React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { Description, Tile, TileAnchor, TileContent, Title } from '#pkg/elements';
import type { Project } from '#pkg/schema';
import { Description, Tile, TileAnchor, TileContent, Title } from '#pkg/elements/index.js';
import type { Project } from '#pkg/schema.js';

const Image = _Image as unknown as typeof _Image.default;

type ProjectTileProps = {
project: Project;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/project-tile/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/project-tile/ProjectTile';
export * from '#pkg/components/project-tile/ProjectTile.jsx';
6 changes: 3 additions & 3 deletions packages/apps/web/src/components/projects-overview/ProjectsOverview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type React from 'react';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { ProjectTile } from '#pkg/components/project-tile';
import { QUERIES } from '#pkg/constants';
import { ProjectTile } from '#pkg/components/project-tile/index.js';
import { QUERIES } from '#pkg/constants.js';

type ProjectsOverviewProps = {};

Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/rss-feed-anchor/RssFeedAnchor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Rss } from 'react-feather';

import { Anchor } from '#pkg/elements';
import { Anchor } from '#pkg/elements/index.js';

export const RssFeedAnchor: React.FC = () => {
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/rss-feed-anchor/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/rss-feed-anchor/RssFeedAnchor';
export * from '#pkg/components/rss-feed-anchor/RssFeedAnchor.jsx';
8 changes: 4 additions & 4 deletions packages/apps/web/src/components/social-media-links/SocialMediaLinks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type React from 'react';
import { GitHub, Linkedin, Twitter } from 'react-feather';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { config } from '#pkg/config';
import { Anchor } from '#pkg/elements';
import { config } from '#pkg/config.js';
import { Anchor } from '#pkg/elements/index.js';

export const SocialMediaLinks: React.FC = () => (
<LinksList>
Expand Down Expand Up @@ -39,4 +39,4 @@ const LinkElement = styled.li``;
const SocialMediaAnchor = styled(Anchor).attrs({
target: '_blank',
rel: 'noopener noreferrer',
})``;
} satisfies React.AnchorHTMLAttributes<HTMLAnchorElement> as any)``;
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/social-media-links/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/social-media-links/SocialMediaLinks';
export * from '#pkg/components/social-media-links/SocialMediaLinks.jsx';
8 changes: 4 additions & 4 deletions packages/apps/web/src/components/toggle-theme-button/ToggleThemeButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import { Moon, Sun } from 'react-feather';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { Animations, Classes, ColorTheme, DataAttribute } from '#pkg/constants';
import { useColorTheme } from '#pkg/context/color-theme';
import { IconButton } from '#pkg/elements/IconButton';
import { Animations, Classes, ColorTheme, DataAttribute } from '#pkg/constants.js';
import { useColorTheme } from '#pkg/context/color-theme.jsx';
import { IconButton } from '#pkg/elements/index.js';

export const ToggleThemeButton: React.FC = () => {
const { toggleColorTheme } = useColorTheme();
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/toggle-theme-button/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/toggle-theme-button/ToggleThemeButton';
export * from '#pkg/components/toggle-theme-button/ToggleThemeButton.jsx';
10 changes: 6 additions & 4 deletions packages/apps/web/src/components/webmention-tile/WebmentionTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { assertIsUnreachable } from '@pkerschbaum/ts-utils';
import dayjs from 'dayjs';
import Image from 'next/image';
import _Image from 'next/image.js';
import type React from 'react';
import sanitizeHTML from 'sanitize-html';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { Anchor } from '#pkg/elements';
import type { Webmention } from '#pkg/webmentions';
import { Anchor } from '#pkg/elements/index.js';
import type { Webmention } from '#pkg/webmentions/index.js';

const Image = _Image as unknown as typeof _Image.default;

type WebmentionTileProps = {
webmention: Webmention;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/web/src/components/webmention-tile/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '#pkg/components/webmention-tile/WebmentionTile';
export * from '#pkg/components/webmention-tile/WebmentionTile.jsx';
Loading

1 comment on commit f758096

@vercel
Copy link

@vercel vercel bot commented on f758096 Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

pkerschbaum-homepage – ./

pkerschbaum-homepage-pkerschbaum.vercel.app
www.pkerschbaum.com
pkerschbaum-homepage-git-main-pkerschbaum.vercel.app
pkerschbaum.com

Please sign in to comment.