@plone/volto 19.0.0-alpha.7 → 19.0.0-alpha.8

package/CHANGELOG.md

@@ -17,6 +17,14 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.8 (2025-10-22)
+
+### Internal
+
+- Modernize and update `tsconfig.json` settings for core. @sneridagh [#7531.1](https://github.com/plone/volto/issues/7531.1)
+- Refactor `LanguageSelector` into TypeScript. @sneridagh [#7531.2](https://github.com/plone/volto/issues/7531.2)
+- Re-enable scripts pnpm build. Remove why. @sneridagh [#7532](https://github.com/plone/volto/issues/7532)
+
 ## 19.0.0-alpha.7 (2025-10-21)
 
 ### Breaking

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.7",
+  "version": "19.0.0-alpha.8",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -237,8 +237,8 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
     "@plone/registry": "3.0.0-alpha.6",
-    "@plone/scripts": "4.0.0-alpha.3",
-    "@plone/volto-slate": "19.0.0-alpha.6"
+    "@plone/volto-slate": "19.0.0-alpha.6",
+    "@plone/scripts": "4.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -279,8 +279,10 @@
     "@types/node": "^22.13.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-intl-redux": "^0.1.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
+    "@types/redux-mock-store": "^1.5.0",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -363,8 +365,7 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
-    "why": "0.6.2",
-    "@plone/types": "2.0.0-alpha.6",
+    "@plone/types": "2.0.0-alpha.7",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

package/src/components/theme/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,89 @@
+import { Link } from 'react-router-dom';
+
+import { useSelector } from 'react-redux';
+import cx from 'classnames';
+
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
+
+import { defineMessages, useIntl, type IntlShape } from 'react-intl';
+import type {
+  Content,
+  GetSiteResponse,
+  GetTranslationResponse,
+} from '@plone/types';
+
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  intl: IntlShape;
+  site: {
+    data: GetSiteResponse;
+  };
+};
+
+const LanguageSelector = ({
+  onClickAction = () => {},
+}: {
+  onClickAction?: () => void;
+}) => {
+  const intl = useIntl();
+  const currentLang = useSelector<FormState, IntlShape['locale']>(
+    (state) => state.intl.locale,
+  );
+  const translations = useSelector<
+    FormState,
+    GetTranslationResponse['items'] | undefined
+  >((state) => state.content.data?.['@components']?.translations?.items);
+  const isMultilingual = useSelector<
+    FormState,
+    GetSiteResponse['features']['multilingual']
+  >((state) => state.site.data.features?.multilingual);
+  const availableLanguages = useSelector<
+    FormState,
+    GetSiteResponse['plone.available_languages']
+  >((state) => state.site.data?.['plone.available_languages']);
+
+  return isMultilingual ? (
+    <div className="language-selector">
+      {availableLanguages?.map((lang) => {
+        const langKey = lang as keyof typeof langmap;
+        const translation = translations?.find(
+          (t: { language: string }) => t.language === lang,
+        );
+        return (
+          <Link
+            aria-label={`${intl.formatMessage(
+              messages.switchLanguageTo,
+            )} ${langmap[langKey].nativeName.toLowerCase()}`}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
+            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
+            title={langmap[langKey].nativeName}
+            onClick={() => {
+              onClickAction();
+            }}
+            key={`language-selector-${lang}`}
+          >
+            {langmap[langKey].nativeName}
+          </Link>
+        );
+      })}
+    </div>
+  ) : (
+    <Helmet>
+      <html lang={toReactIntlLang(currentLang)} />
+    </Helmet>
+  );
+};
+
+export default LanguageSelector;

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
     "types": ["vitest/globals", "jest"],
-    "module": "commonjs",
+    "module": "preserve",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -11,7 +11,6 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

package/types/components/theme/LanguageSelector/LanguageSelector.d.ts

@@ -1,11 +1,4 @@
+declare const LanguageSelector: ({ onClickAction, }: {
+    onClickAction?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LanguageSelector;
-declare function LanguageSelector(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace LanguageSelector {
-    namespace propTypes {
-        let onClickAction: any;
-    }
-    namespace defaultProps {
-        export function onClickAction_1(): void;
-        export { onClickAction_1 as onClickAction };
-    }
-}

package/types/reducers/index.d.ts

@@ -50,6 +50,7 @@ declare namespace reducers {
     export { site };
     export { navroot };
 }
+import { intlReducer } from 'react-intl-redux';
 import reduxAsyncConnect from './asyncConnect/asyncConnect';
 import actions from '@plone/volto/reducers/actions/actions';
 import addons from '@plone/volto/reducers/addons/addons';

package/package-why.json

@@ -1,34 +0,0 @@
-{
-  "scripts": {
-    "postinstall": "Description for `npm run postinstall` command",
-    "analyze": "Description for `npm run analyze` command",
-    "start": "Description for `npm run start` command",
-    "build": "Description for `npm run build` command",
-    "build:clean": "Description for `npm run build:clean` command",
-    "dist:clean": "Description for `npm run dist:clean` command",
-    "build:dist": "Description for `npm run build:dist` command",
-    "test": "Description for `npm run test` command",
-    "test:ci": "Description for `npm run test:ci` command",
-    "test:husky": "Description for `npm run test:husky` command",
-    "test:debug": "Description for `npm run test:debug` command",
-    "start:prod": "Description for `npm run start:prod` command",
-    "start:dist": "Description for `npm run start:dist` command",
-    "prettier": "Description for `npm run prettier` command",
-    "prettier:fix": "Description for `npm run prettier:fix` command",
-    "stylelint": "Description for `npm run stylelint` command",
-    "stylelint:overrides": "Description for `npm run stylelint:overrides` command",
-    "stylelint:fix": "Description for `npm run stylelint:fix` command",
-    "lint": "Description for `npm run lint` command",
-    "lint:fix": "Description for `npm run lint:fix` command",
-    "i18n": "Description for `npm run i18n` command",
-    "i18n:ci": "Description for `npm run i18n:ci` command",
-    "stylelint:patches": "Description for `npm run stylelint:patches` command",
-    "patches": "Description for `npm run patches` command",
-    "dry-release": "Description for `npm run dry-release` command",
-    "release": "Description for `npm run release` command",
-    "release-major-alpha": "Description for `npm run release-major-alpha` command",
-    "release-alpha": "Description for `npm run release-alpha` command",
-    "storybook": "Description for `npm run storybook` command",
-    "build-storybook": "Description for `npm run build-storybook` command"
-  }
-}

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -1,79 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import find from 'lodash/find';
-import map from 'lodash/map';
-
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  switchLanguageTo: {
-    id: 'Switch to',
-    defaultMessage: 'Switch to',
-  },
-});
-
-const LanguageSelector = (props) => {
-  const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-  const isMultilingual = useSelector(
-    (state) => state.site.data.features?.multilingual,
-  );
-  const availableLanguages = useSelector(
-    (state) => state.site.data?.['plone.available_languages'],
-  );
-
-  return isMultilingual ? (
-    <div className="language-selector">
-      {map(availableLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
-        return (
-          <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
-            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
-            onClick={() => {
-              props.onClickAction();
-            }}
-            key={`language-selector-${lang}`}
-          >
-            {langmap[lang].nativeName}
-          </Link>
-        );
-      })}
-    </div>
-  ) : (
-    <Helmet>
-      <html lang={toReactIntlLang(currentLang)} />
-    </Helmet>
-  );
-};
-
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
-export default LanguageSelector;