mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate the frontend toolchain onto babel, and ship one bundle (#2178)

Browse Source 
Four upgrades that were finished but never merged, the compiler collapse
they enable, and the dependency sweep that follows. Direct
devDependencies go from 78 to 60 and dependencies from 10 to 9.

Three were doing the same job: `ts-loader` stripped types in webpack,
`babel-loader` did everything else, and `@swc/jest` repeated both for the
tests with its own copy of the JSX settings. Babel is the one that
survives, because the `data-testid` stripper has no equivalent elsewhere.

`ts-loader` ran `transpileOnly: true`, so it only stripped types, which
`@babel/preset-typescript` does; `fork-ts-checker-webpack-plugin` was
already what type-checks. Jest runs `babel-jest` against the same
`.babelrc.js` the bundle uses, passed as `configFile` because a
file-relative babel config does not reach the `node_modules` packages in
`transformIgnorePatterns`, and `jest.config.mjs` is plain ESM because a
`.ts` config is compiled against `tsconfig.json`, whose
`verbatimModuleSyntax` rejects ESM syntax in a file the package has not
declared as a module.

That removes `ts-loader`, `@swc/jest` and `@swc/core`. The last was
pinned to 1.2.205 from 2022 with no way forward, because newer builds
emit non-configurable exports and break `jest.spyOn` across 13 suites.

Babel compiles a file at a time with no type information, so it cannot
tell a type-only import from a real one and keeps the module. One line,
`import { boundActions } from './connected-comment'`, pulled the whole
redux store into `last-comments.mjs` and doubled it. `verbatimModuleSyntax`
and `@typescript-eslint/consistent-type-imports` mark them properly; the
statement has to be a separate `import type`, since verbatim semantics
keep an inline `import { type X }` and load the module anyway.

The legacy and modern compilations produced the same bytes. Both read the
same browserslist query, `defaults, not IE 11, not samsung 12` resolves to
chrome 109 and up, and nothing in the source needs transforming for that
set, so 28 of the 29 output pairs were byte-identical.

That made the module/nomodule switch worse than redundant: it served the
`.js` file to browsers with no ES module support, and those files carried
`??`, `?.` and class fields, so the fallback handed its own audience a
syntax error. There is now one bundle, always loaded as a module, in the
five templates and in the seven `site/` documents integrators copy from.
A production build emits 29 files rather than 58, in about 3 seconds
rather than 17. Two of those documents did not work at all beforehand:
the SPA snippet could not parse, and the subdomain example had an
unterminated string.

`@babel/core` 8 declares `^22.18 || >=24.11` and `size-limit` 13 declares
`^22.18 || ^24 || >=26`, so 20 was below the floor of two things installed
here; pnpm only warns, which is why every build passed. All seven places
the frontend pins it move together. `site/` is untouched: it builds with
yarn and eleventy and installs neither.

`eslint --print-config` before and after gives 173 active rules on an
application file against 172, and 172 on a spec file and a plain JS file
against 171. What is gone is three `flowtype` rules with no Flow here,
`no-new-object` and `no-new-symbol` whose upstream replacements are on,
`react/forbid-foreign-prop-types` with no propTypes anywhere, and, on TS
only, `no-useless-constructor`, whose typescript-eslint version is on at
error. `@babel/core` is pinned to 8 across the workspace because
`@jest/transform` and `istanbul-lib-instrument` depend on 7 outright; a
second scoped override holds `eslint-config-preact` on 7, since its
`@babel/eslint-parser` loads babel 7 syntax plugins.

`fast-async` rewrote every async function into nodent promise chains,
calls babel's `transform` synchronously, which babel 8 removed, and every
browser in the target list runs async natively. `prefresh` blew its stack
on `createContext` under babel 8 with no newer release to move to, which
compiled `intl.tsx` and `store/context.tsx` into throwing stubs, so
`pnpm dev:app` could not run the widget at all. `core-js` is not injected
now that `useBuiltIns` is gone, `postcss-custom-properties` was reached
directly although nothing declared it and resolved only through pnpm's
private hoist directory, and `cssnano` ran in both postcss chains although
`CssMinimizerPlugin` already uses it.

`pnpm lint`, `pnpm test` and `pnpm build` now work from `frontend/` as
`CLAUDE.md` and the contributing guide have always said they do; the
workspace root defined none of them.
This commit is contained in:
Dmitry Verkhoturov
2026-08-21 19:13:25 -05:00
committed by GitHub
parent 7ee3a0da48
commit a5b2fe3cfc
139 changed files with 5027 additions and 4289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/remark42/.babelrc.js
+12 -23
View File
@@ -1,4 +1,3 @@
const getPresetEnv = (options) => ['@babel/preset-env', options];
const preactPreset = [
'@babel/preset-react',
{
@@ -7,28 +6,18 @@ const preactPreset = [
},
];
const plugins = ['module:fast-async'];
const presets = ['@babel/preset-env', preactPreset, '@babel/preset-typescript'];
const removeTestId = './tasks/babel-plugin-remove-test-id.js';
// jest reads this same config and sets BABEL_ENV itself, and babel merges an `env` block over
// the root rather than replacing it, so the test branch is decided here rather than as an `env`:
// the suites query by data-testid and the stripper must not reach them.
const isTest = process.env.BABEL_ENV === 'test';
// core-js is not injected: the polyfill plugin costs 8.5 kB in embed.mjs and saves about
// 50 bytes at these targets
module.exports = {
presets: [
getPresetEnv({
targets: 'defaults, not IE 11, not samsung 12',
useBuiltIns: 'usage',
corejs: 3,
bugfixes: true,
loose: true,
}),
preactPreset,
],
plugins: [...plugins, 'babel-plugin-jsx-remove-data-test-id'],
env: {
modern: {
presets: [getPresetEnv({ targets: { esmodules: true }, loose: true, bugfixes: true }), preactPreset],
plugins: [...plugins, 'babel-plugin-jsx-remove-data-test-id'],
},
test: {
presets: [getPresetEnv({ targets: { node: 'current' } }), preactPreset],
plugins,
},
},
targets: isTest ? { node: 'current' } : 'defaults, not IE 11, not samsung 12',
presets,
plugins: isTest ? [] : [removeTestId],
};
frontend/apps/remark42/.eslintignore
-9
View File
@@ -1,9 +0,0 @@
node_modules
public
!.prettierrc.js
!.eslintrc.js
!.babelrc.js
!.lintstagedrc.js
!.stylelintrc.js
!.size-limit.js
!.huskyrc.js
frontend/apps/remark42/.eslintrc.js
-35
View File
@@ -1,35 +0,0 @@
module.exports = {
root: true,
extends: ['react-app', 'preact', 'plugin:jsx-a11y/recommended', 'prettier'],
overrides: [
{
files: ['*.ts?(x)'],
parser: '@typescript-eslint/parser',
rules: {
'no-undef': 'off',
'no-redeclare': 'off',
'no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'error',
},
},
{
files: ['*.d.ts'],
rules: {
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
},
{
files: ['./jest.config.ts'],
rules: {
'jest/no-jest-import': 'off',
},
},
{
files: ['*.@(test|spec).ts?(x)'],
rules: {
'import/first': 'off',
},
},
],
};
frontend/apps/remark42/.lintstagedrc.cjs
+2 -1
View File
@@ -3,7 +3,8 @@ const stylelint = 'stylelint --fix';
const prettier = 'prettier --write';
module.exports = {
'./**/*.{ts,tsx,js,jsx,cjs,mjs}': [eslint, prettier],
// eslint --fix runs prettier through the prettier/prettier rule, so it is not repeated here
'./**/*.{ts,tsx,js,jsx,cjs,mjs}': [eslint],
'./**/*.css': [stylelint, prettier],
'./templates/**.html': [stylelint, prettier],
};
frontend/apps/remark42/.size-limit.js
+7
View File
@@ -2,29 +2,36 @@ module.exports = [
{
path: 'public/embed.mjs',
limit: '2.5 KB',
gzip: true,
},
{
path: 'public/remark.mjs',
limit: '60 KB',
gzip: true,
},
{
path: 'public/remark.css',
limit: '11 KB',
gzip: true,
},
{
path: 'public/last-comments.mjs',
limit: '20 KB',
gzip: true,
},
{
path: 'public/last-comments.css',
limit: '6 KB',
gzip: true,
},
{
path: 'public/deleteme.mjs',
limit: '9.5 KB',
gzip: true,
},
{
path: 'public/counter.mjs',
limit: '0.8 KB',
gzip: true,
},
];
frontend/apps/remark42/.stylelintrc.js
+16 -8
View File
@@ -1,10 +1,9 @@
const { CUSTOM_PROPERTIES_PATH } = require('./webpack.config');
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
plugins: ['stylelint-value-no-unknown-custom-properties', '@mavrin/stylelint-declaration-use-css-custom-properties'],
extends: ['stylelint-config-standard'],
plugins: ['stylelint-value-no-unknown-custom-properties', 'stylelint-declaration-strict-value'],
rules: {
'max-empty-lines': 1,
'rule-empty-line-before': [
'always-multi-line',
{
@@ -19,11 +18,13 @@ module.exports = {
'value-keyword-case': ['lower', { ignoreProperties: ['composes'], camelCaseSvgKeywords: true }],
'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }],
'property-no-unknown': [true, { ignoreProperties: ['composes'] }],
'mavrin/stylelint-declaration-use-css-custom-properties': {
cssDefinitions: ['color'],
ignoreProperties: ['/^\\$/'],
ignoreValues: ['/\\$/', 'transparent', '-webkit-focus-ring-color', 'currentColor'],
},
'scale-unlimited/declaration-strict-value': [
['color'],
{
ignoreValues: ['transparent', 'inherit', 'currentColor', 'none', '-webkit-focus-ring-color'],
disableFix: true,
},
],
'csstools/value-no-unknown-custom-properties': [
true,
{
@@ -41,6 +42,13 @@ module.exports = {
{
files: ['*.ejs', '**/*.ejs'],
customSyntax: 'postcss-html',
// standalone pages rather than the themeable widget surface, so literal colours are fine
rules: {
'scale-unlimited/declaration-strict-value': null,
// these files are copied to production unprocessed, unlike the module CSS that
// postcss-preset-env downlevels, so their media queries stay in the prefix form
'media-feature-range-notation': 'prefix',
},
},
],
};
frontend/apps/remark42/app/__mocks__/fetch.ts
+1 -3
View File
@@ -1,8 +1,6 @@
import fetchMock from 'jest-fetch-mock';
beforeAll(() => {
fetchMock.enableMocks();
});
fetchMock.enableMocks();
beforeEach(() => {
fetchMock.mockClear();
frontend/apps/remark42/app/common/api.getLastComments.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Comment } from './types';
import type { Comment } from './types';
import { apiFetcher } from './fetcher';
export function getLastComments(siteId: string, max: number): Promise<Comment[]> {
frontend/apps/remark42/app/common/api.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { siteId, url } from './settings';
import { BASE_URL, API_BASE } from './constants';
import {
import type {
Config,
Comment,
Tree,
frontend/apps/remark42/app/common/constants.config.test.ts
+9 -9
View File
@@ -1,3 +1,9 @@
/**
* jsdom seals window.location, so the https protocol these tests need is set through the
* environment URL rather than by redefining the property
*
* @jest-environment-options {"url": "https://test.com"}
*/
import { getBaseUrl } from './constants.config';
describe('constants.config', () => {
@@ -16,15 +22,9 @@ describe('constants.config', () => {
});
describe('BASE_URL validation', () => {
beforeEach(() => {
Object.defineProperty(window, 'location', {
value: { protocol: 'https:' },
writable: true,
});
});
it('should throw error if host is not defined', () => {
window.remark_config.host = undefined;
expect(() => getBaseUrl()).toThrowError(`Remark42: remark_config.host wasn't configured.`);
expect(() => getBaseUrl()).toThrow(`Remark42: remark_config.host wasn't configured.`);
});
it('should show mismatch error', () => {
expect(getBaseUrl()).toBe('http://test.com');
@@ -33,14 +33,14 @@ describe('constants.config', () => {
});
it('should throw error when BASE_URL has wrong protocol', () => {
window.remark_config.host = 'data:application/json;base64';
expect(() => getBaseUrl()).toThrowError('Remark42: Invalid host URL.');
expect(() => getBaseUrl()).toThrow('Remark42: Invalid host URL.');
expect(consoleErrorSpy).toHaveBeenCalledTimes(2);
expect(consoleErrorSpy).toHaveBeenNthCalledWith(1, 'Remark42: Protocol mismatch.');
expect(consoleErrorSpy).toHaveBeenNthCalledWith(2, 'Remark42: Wrong protocol in host URL.');
});
it('should throw error when BASE_URL is invalid', () => {
window.remark_config.host = 'asfasdfa!asds';
expect(() => getBaseUrl()).toThrowError('Remark42: Invalid host URL.');
expect(() => getBaseUrl()).toThrow('Remark42: Invalid host URL.');
expect(consoleErrorSpy).toHaveBeenCalledTimes(0);
});
});
frontend/apps/remark42/app/common/constants.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Sorting, Theme } from './types';
import type { Sorting, Theme } from './types';
export { BASE_URL, API_BASE, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from './constants.config';
export const MAX_SHOWN_ROOT_COMMENTS = 10;
frontend/apps/remark42/app/common/fetcher.test.ts
+1 -1
View File
@@ -276,7 +276,7 @@ describe('fetcher', () => {
mockFetch();
await apiFetcher.post(apiUri, {}, data);
expect(window.fetch).toBeCalledWith(apiUrl, {
expect(window.fetch).toHaveBeenCalledWith(apiUrl, {
method: 'post',
headers: headersWithContentType,
body: JSON.stringify(dataShouldBe),
frontend/apps/remark42/app/common/intl.test.tsx
+1 -1
View File
@@ -258,7 +258,7 @@ describe('every shipped catalogue', () => {
(file) =>
[file.replace('.json', ''), JSON.parse(readFileSync(join(localesDir, file), 'utf8'))] as [
string,
Record<string, string>
Record<string, string>,
]
);
frontend/apps/remark42/app/common/local-storage.ts
+5 -5
View File
@@ -6,20 +6,20 @@ const failMessage = 'remark42: localStorage access denied, check browser prefere
export const setItem = IS_STORAGE_AVAILABLE
? localStorage.setItem.bind(localStorage)
: () => {
console.error(failMessage); // eslint-disable-line no-console
console.error(failMessage);
};
export const getItem = IS_STORAGE_AVAILABLE
? localStorage.getItem.bind(localStorage)
: () => {
console.error(failMessage); // eslint-disable-line no-console
console.error(failMessage);
return null;
};
export const removeItem = IS_STORAGE_AVAILABLE
? localStorage.removeItem.bind(localStorage)
: () => {
console.error(failMessage); // eslint-disable-line no-console
console.error(failMessage);
};
export function getJsonItem<T = unknown>(key: string): T | null {
@@ -34,7 +34,7 @@ export function getJsonItem<T = unknown>(key: string): T | null {
return data;
} catch (e) {
console.error(`remark42: error on read JSON from ${key} in localStorage`, e); // eslint-disable-line no-console
console.error(`remark42: error on read JSON from ${key} in localStorage`, e);
return null;
}
}
@@ -43,7 +43,7 @@ export function setJsonItem<T = unknown>(key: string, data: T) {
try {
setItem(key, JSON.stringify(data));
} catch (e) {
console.error(`remark42: error on parse JSON from ${key} in localStorage`, e); // eslint-disable-line no-console
console.error(`remark42: error on parse JSON from ${key} in localStorage`, e);
}
}
frontend/apps/remark42/app/common/static-store.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Config } from './types';
import type { Config } from './types';
interface StaticStoreType {
config: Config;
frontend/apps/remark42/app/components/auth-panel/auth-panel.test.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import { render } from '@testing-library/preact';
import createMockStore from 'redux-mock-store';
import { Middleware } from 'redux';
import type { Middleware } from 'redux';
import { Provider } from 'store/context';
import { IntlProvider } from 'common/intl';
import type { User } from 'common/types';
import enMessages from 'locales/en.json';
import { AuthPanel, Props } from './auth-panel';
import type { Props } from './auth-panel';
import { AuthPanel } from './auth-panel';
import styles from './auth-panel.module.css';
const DefaultProps = {
frontend/apps/remark42/app/components/auth-panel/auth-panel.tsx
+4 -3
View File
@@ -1,12 +1,13 @@
import { h, Component } from 'preact';
import clsx from 'clsx';
import { FormattedMessage, IntlShape, useIntl } from 'common/intl';
import { User, Theme, PostInfo } from 'common/types';
import type { IntlShape } from 'common/intl';
import { FormattedMessage, useIntl } from 'common/intl';
import type { User, Theme, PostInfo } from 'common/types';
import { IS_STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants';
import { postMessageToParent } from 'utils/post-message';
import { getHandleClickProps } from 'common/accessibility';
import { StoreState } from 'store';
import type { StoreState } from 'store';
import { useTheme } from 'hooks/useTheme';
import { Button } from 'components/button';
import { Auth } from 'components/auth';
frontend/apps/remark42/app/components/auth/auth.api.ts
+6 -3
View File
@@ -72,9 +72,12 @@ export function oauthSignin(url: string): Promise<User | null> {
unsubscribe();
}
setTimeout(() => {
reject();
}, 5 * 60 * 1000);
setTimeout(
() => {
reject();
},
5 * 60 * 1000
);
document.addEventListener('visibilitychange', handleWindowVisibilityChange);
window.addEventListener('focus', handleWindowVisibilityChange);
frontend/apps/remark42/app/components/auth/auth.hooks.ts
+2 -2
View File
@@ -126,8 +126,8 @@ export function useErrorMessage(): [string | null, (e: unknown) => void] {
err instanceof RequestError || isObject(err)
? (err as Record<'error', string>).error
: err instanceof Error
? err.message
: 0;
? err.message
: 0;
setInvalidReason(errorReason);
}
frontend/apps/remark42/app/components/auth/auth.module.css
+7 -6
View File
@@ -14,7 +14,7 @@
position: absolute;
content: '';
height: 100%;
border-left: 1px solid rgba(var(--white-color), 0.5);
border-left: 1px solid rgb(var(--white-color), 0.5);
}
}
@@ -26,7 +26,9 @@
min-width: 240px;
padding: 16px;
background-color: rgb(var(--primary-background-color));
box-shadow: 0 10px 15px rgba(var(--black-color), 0.1), 0 -1px 6px rgba(var(--black-color), 0.05);
box-shadow:
0 10px 15px rgb(var(--black-color), 0.1),
0 -1px 6px rgb(var(--black-color), 0.05);
border-radius: 6px;
}
@@ -115,15 +117,14 @@
}
.radio:checked + .provider {
/* stylelint-disable-next-line mavrin/stylelint-declaration-use-css-custom-properties */
color: rgb(var(--primary-color));
background-color: rgba(var(--primary-color), 0.1);
background-color: rgb(var(--primary-color), 0.1);
border-radius: 2px;
}
:global(.dark) .radio:checked + .provider {
color: rgb(var(--white-color));
background-color: rgba(var(--primary-color), 0.4);
background-color: rgb(var(--primary-color), 0.4);
}
.row {
@@ -154,7 +155,7 @@
align-items: center;
&:hover {
background-color: rgba(var(--primary-color), 0.1);
background-color: rgb(var(--primary-color), 0.1);
}
}
frontend/apps/remark42/app/components/auth/auth.spec.tsx
+19 -19
View File
@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
import { fireEvent, waitFor, screen } from '@testing-library/preact';
import { render } from 'tests/utils';
import { OAuthProvider, User } from 'common/types';
import type { OAuthProvider, User } from 'common/types';
import { StaticStore } from 'common/static-store';
import { BASE_URL } from 'common/constants.config';
import * as userActions from 'store/user/actions';
@@ -177,7 +177,7 @@ describe('<Auth/>', () => {
it('should send email and then verify forms', async () => {
StaticStore.config.auth_providers = ['email'];
jest.spyOn(api, 'emailSignin').mockImplementationOnce(async () => null);
jest.spyOn(api, 'verifyEmailSignin').mockImplementationOnce(async () => ({} as User));
jest.spyOn(api, 'verifyEmailSignin').mockImplementationOnce(async () => ({}) as User);
jest.spyOn(utils, 'getTokenInvalidReason').mockImplementationOnce(() => null);
jest.spyOn(utils, 'persistEmail').mockImplementationOnce(jest.fn());
@@ -191,8 +191,8 @@ describe('<Auth/>', () => {
fireEvent.click(screen.getByText('Submit'));
expect(screen.getByRole('presentation')).toHaveClass('spinner');
await waitFor(() => expect(api.emailSignin).toBeCalled());
expect(api.emailSignin).toBeCalledWith('email@email.com', 'username');
await waitFor(() => expect(api.emailSignin).toHaveBeenCalled());
expect(api.emailSignin).toHaveBeenCalledWith('email@email.com', 'username');
expect(screen.getByText('Back')).toHaveClass('auth-back-button');
expect(screen.getByTitle('Close sign-in dropdown')).toHaveClass('auth-close-button');
@@ -204,9 +204,9 @@ describe('<Auth/>', () => {
fireEvent.click(screen.getByText('Submit'));
await waitFor(() => expect(api.verifyEmailSignin).toBeCalled());
expect(api.verifyEmailSignin).toBeCalledWith('token');
expect(utils.persistEmail).toBeCalledWith('email@email.com');
await waitFor(() => expect(api.verifyEmailSignin).toHaveBeenCalled());
expect(api.verifyEmailSignin).toHaveBeenCalledWith('token');
expect(utils.persistEmail).toHaveBeenCalledWith('email@email.com');
});
it('should show validation error for token', async () => {
@@ -221,7 +221,7 @@ describe('<Auth/>', () => {
target: { value: 'email@email.com' },
});
fireEvent.click(getByText('Submit'));
await waitFor(() => expect(emailSignin).toBeCalled());
await waitFor(() => expect(emailSignin).toHaveBeenCalled());
expect(getByText('Back')).toHaveClass('auth-back-button');
expect(getByTitle('Close sign-in dropdown')).toHaveClass('auth-close-button');
@@ -229,9 +229,9 @@ describe('<Auth/>', () => {
fireEvent.change(getByPlaceholderText('Copy and paste the token from the email'), { target: { value: 'token' } });
fireEvent.click(getByText('Submit'));
await waitFor(() => expect(utils.getTokenInvalidReason).toBeCalled());
await waitFor(() => expect(utils.getTokenInvalidReason).toHaveBeenCalled());
expect(utils.getTokenInvalidReason).toBeCalledWith('token');
expect(utils.getTokenInvalidReason).toHaveBeenCalledWith('token');
await waitFor(() => expect(getByText('Token is invalid')).toBeInTheDocument());
expect(getByText('Token is invalid')).toHaveClass('auth-error');
@@ -239,7 +239,7 @@ describe('<Auth/>', () => {
it('should send anonym form', async () => {
StaticStore.config.auth_providers = ['anonymous'];
jest.spyOn(api, 'anonymousSignin').mockImplementationOnce(async () => ({} as User));
jest.spyOn(api, 'anonymousSignin').mockImplementationOnce(async () => ({}) as User);
render(<Auth />);
@@ -248,7 +248,7 @@ describe('<Auth/>', () => {
fireEvent.click(screen.getByText('Submit'));
expect(screen.getByRole('presentation')).toHaveClass('spinner');
expect(screen.getByRole('presentation')).toHaveAttribute('aria-label', 'Loading...');
await waitFor(() => expect(api.anonymousSignin).toBeCalled());
await waitFor(() => expect(api.anonymousSignin).toHaveBeenCalled());
});
it.each`
@@ -321,11 +321,11 @@ describe('<Auth/>', () => {
fireEvent.click(screen.getByText('Sign In'));
await waitFor(() => fireEvent.click(screen.getByTitle('Sign In with Google')));
await waitFor(() =>
expect(oauthSignin).toBeCalledWith(
expect(oauthSignin).toHaveBeenCalledWith(
`${BASE_URL}/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
)
);
expect(setUser).toBeCalledTimes(0);
expect(setUser).toHaveBeenCalledTimes(0);
expect(screen.getByText('Sign In')).toBeInTheDocument();
});
@@ -342,11 +342,11 @@ describe('<Auth/>', () => {
await waitFor(() => fireEvent.click(screen.getByTitle('Sign In with Google')));
await waitFor(() =>
expect(oauthSignin).toBeCalledWith(
expect(oauthSignin).toHaveBeenCalledWith(
`${BASE_URL}/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
)
);
expect(setUser).toBeCalledWith(user);
expect(setUser).toHaveBeenCalledWith(user);
});
it('should use custom provider route', async () => {
@@ -360,7 +360,7 @@ describe('<Auth/>', () => {
await waitFor(() => fireEvent.click(screen.getByTitle('Sign In with Customoidc')));
await waitFor(() =>
expect(oauthSignin).toBeCalledWith(
expect(oauthSignin).toHaveBeenCalledWith(
`${BASE_URL}/auth/customoidc/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
)
);
@@ -381,7 +381,7 @@ describe('<Auth/>', () => {
fireEvent.click(screen.getByText('Sign In'));
fireEvent.click(screen.getByTitle('Sign In with Telegram'));
await waitFor(() => expect(getTelegramSigninParams).toBeCalledTimes(1));
await waitFor(() => expect(getTelegramSigninParams).toHaveBeenCalledTimes(1));
const telegramLink = screen.getByText('by the link').getAttribute('href');
expect(typeof telegramLink === 'string').toBe(true);
const telegramUrl = new URL(telegramLink as string);
@@ -389,7 +389,7 @@ describe('<Auth/>', () => {
expect(telegramUrl.searchParams.get('start')).toBe('tokentokentoken');
expect(telegramUrl.pathname.startsWith(`/botid`)).toBeTruthy();
fireEvent.click(screen.getByText('Check'));
await waitFor(() => expect(verifyTelegramSignin).toBeCalledTimes(1));
await waitFor(() => expect(verifyTelegramSignin).toHaveBeenCalledTimes(1));
await waitFor(() => expect(setUser).toHaveBeenCalledWith(user));
});
});
frontend/apps/remark42/app/components/auth/auth.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { h, Fragment, JSX } from 'preact';
import type { JSX } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useRef } from 'preact/hooks';
import { useDispatch } from 'store/context';
@@ -37,7 +38,7 @@ export function Auth() {
// UI State
const [isLoading, setLoading] = useState(false);
const [view, setView] = useState<typeof formProviders[number] | 'token' | 'telegram'>(formProviders[0]);
const [view, setView] = useState<(typeof formProviders)[number] | 'token' | 'telegram'>(formProviders[0]);
const [ref, isDropdownShown, toggleDropdownState] = useDropdown(view === 'token' || view === 'telegram');
// Errors
@@ -98,7 +99,7 @@ export function Auth() {
function handleProviderChange(evt: Event) {
const { value } = evt.currentTarget as HTMLInputElement;
setView(value as typeof formProviders[number]);
setView(value as (typeof formProviders)[number]);
setError(null);
}
frontend/apps/remark42/app/components/auth/auth.utils.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { isJwtExpired } from 'utils/jwt';
import { StaticStore } from 'common/static-store';
import type { FormProvider, OAuthProvider } from 'common/types';
import { messages } from './auth.messages';
import type { messages } from './auth.messages';
import { setItem, getItem } from 'common/local-storage';
import { LS_EMAIL_KEY } from 'common/constants';
frontend/apps/remark42/app/components/auth/components/button.module.css
+7 -7
View File
@@ -23,7 +23,7 @@
}
&:focus {
box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.4);
box-shadow: 0 0 0 2px rgb(var(--primary-color), 0.4);
outline: none;
}
@@ -48,7 +48,7 @@
left: 0;
content: '';
height: 36px;
border-left: 1px solid rgba(var(--white-color), 0.2);
border-left: 1px solid rgb(var(--white-color), 0.2);
}
}
@@ -67,11 +67,11 @@
}
.transparent {
background-color: rgba(var(--primary-color), 0.1);
background-color: rgb(var(--primary-color), 0.1);
color: rgb(var(--primary-color));
&:hover {
background-color: rgba(var(--primary-color), 0.2);
background-color: rgb(var(--primary-color), 0.2);
color: rgb(var(--primary-color));
}
}
@@ -83,7 +83,7 @@
width: auto;
&:hover {
background-color: rgba(var(--primary-color), 0.1);
background-color: rgb(var(--primary-color), 0.1);
}
}
@@ -101,12 +101,12 @@
.link[disabled] {
background-color: unset;
color: rgba(var(--primary-color), 0.9);
color: rgb(var(--primary-color), 0.9);
}
:global(.dark) {
& .button {
border-color: rgba(var(--white-color), 0.1);
border-color: rgb(var(--white-color), 0.1);
}
& .transparent {
frontend/apps/remark42/app/components/auth/components/button.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, VNode, type ButtonHTMLAttributes } from 'preact';
import type { VNode } from 'preact';
import { h, type ButtonHTMLAttributes } from 'preact';
import clsx from 'clsx';
import styles from './button.module.css';
frontend/apps/remark42/app/components/auth/components/oauth.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
import clsx from 'clsx';
import { useIntl } from 'common/intl';
frontend/apps/remark42/app/components/auth/components/oauth.utils.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { OAuthProvider, Theme } from 'common/types';
import type { OAuthProvider, Theme } from 'common/types';
import { capitalizeFirstLetter } from 'utils/capitalize-first-letter';
import { OAUTH_DATA } from './oauth.consts';
frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import { emailVerificationForSubscribe, emailConfirmationForSubscribe, unsubscri
import { sleep } from 'utils/sleep';
import { persistEmail } from 'components/auth/auth.utils';
import { StoreState } from 'store';
import type { StoreState } from 'store';
import { SubscribeByEmail, SubscribeByEmailForm } from '.';
import { RequestError } from '../../../utils/errorUtils';
frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx
+8 -5
View File
@@ -1,14 +1,17 @@
import { h, FunctionComponent, Fragment } from 'preact';
import type { FunctionComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useCallback, useRef } from 'preact/hooks';
import { useSelector, useDispatch } from 'store/context';
import clsx from 'clsx';
import { useIntl, defineMessages, IntlShape, FormattedMessage } from 'common/intl';
import { User } from 'common/types';
import { StoreState } from 'store';
import type { IntlShape } from 'common/intl';
import { useIntl, defineMessages, FormattedMessage } from 'common/intl';
import type { User } from 'common/types';
import type { StoreState } from 'store';
import { setUserSubscribed } from 'store/user/actions';
import { sleep } from 'utils/sleep';
import { extractErrorMessageFromResponse, RequestError } from 'utils/errorUtils';
import type { RequestError } from 'utils/errorUtils';
import { extractErrorMessageFromResponse } from 'utils/errorUtils';
import { useTheme } from 'hooks/useTheme';
import { getHandleClickProps } from 'common/accessibility';
import { emailVerificationForSubscribe, emailConfirmationForSubscribe, unsubscribeFromEmailUpdates } from 'common/api';
frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, FunctionComponent } from 'preact';
import type { FunctionComponent } from 'preact';
import { h } from 'preact';
import { useMemo } from 'preact/hooks';
import { useIntl, defineMessages } from 'common/intl';
frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.test.tsx
+6 -6
View File
@@ -8,7 +8,7 @@ import { RequestError } from 'utils/errorUtils';
import { sleep } from 'utils/sleep';
import { SubscribeByTelegram } from '.';
import { StoreState } from 'store';
import type { StoreState } from 'store';
const initialStore = {
user,
@@ -78,7 +78,7 @@ describe('<SubscribeByTelegram />', () => {
fireEvent.click(button); // close modal
fireEvent.click(button);
expect(api.telegramSubscribe).toBeCalledTimes(1);
expect(api.telegramSubscribe).toHaveBeenCalledTimes(1);
});
it('should subscribe', async () => {
@@ -93,7 +93,7 @@ describe('<SubscribeByTelegram />', () => {
await screen.findByLabelText('Loading...');
await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading...'));
expect(api.telegramCurrentSubscribtion).toBeCalledTimes(1);
expect(api.telegramCurrentSubscribtion).toHaveBeenCalledTimes(1);
expect(screen.getByText(/You have been subscribed/)).toBeInTheDocument();
});
@@ -112,7 +112,7 @@ describe('<SubscribeByTelegram />', () => {
await screen.findByLabelText('Loading...');
await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading...'));
expect(api.telegramUnsubcribe).toBeCalledTimes(1);
expect(api.telegramUnsubcribe).toHaveBeenCalledTimes(1);
expect(screen.getByText(/You have been unsubscribed/)).toBeInTheDocument();
});
@@ -134,7 +134,7 @@ describe('<SubscribeByTelegram />', () => {
await screen.findByLabelText('Loading...');
await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading...'));
expect(api.telegramUnsubcribe).toBeCalledTimes(1);
expect(api.telegramUnsubcribe).toHaveBeenCalledTimes(1);
expect(screen.getByText(/You have been unsubscribed/)).toBeInTheDocument();
});
@@ -155,7 +155,7 @@ describe('<SubscribeByTelegram />', () => {
fireEvent.click(await screen.findByText('Resubscribe'));
fireEvent.click(await screen.findByText('Check'));
expect(api.telegramCurrentSubscribtion).toBeCalledTimes(2);
expect(api.telegramCurrentSubscribtion).toHaveBeenCalledTimes(2);
expect(await screen.findByText(/You have been subscribed/)).toBeInTheDocument();
});
frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.tsx
+6 -4
View File
@@ -1,12 +1,14 @@
import clsx from 'clsx';
import { h, FunctionComponent, Fragment } from 'preact';
import type { FunctionComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { useSelector } from 'store/context';
import { useIntl, defineMessages } from 'common/intl';
import { User } from 'common/types';
import { StoreState } from 'store';
import { FetcherError, RequestError, extractErrorMessageFromResponse } from 'utils/errorUtils';
import type { User } from 'common/types';
import type { StoreState } from 'store';
import type { FetcherError, RequestError } from 'utils/errorUtils';
import { extractErrorMessageFromResponse } from 'utils/errorUtils';
import { useTheme } from 'hooks/useTheme';
import { useSessionStorage } from 'hooks/useSessionState';
import { telegramSubscribe, telegramCurrentSubscribtion, telegramUnsubcribe } from 'common/api';
frontend/apps/remark42/app/components/comment-form/comment-form.module.css
+1 -1
View File
@@ -13,7 +13,7 @@
.typeReply {
margin-left: 17px;
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
margin-left: 0;
}
}
frontend/apps/remark42/app/components/comment-form/comment-form.spec.tsx
+3 -2
View File
@@ -6,7 +6,8 @@ import { render } from 'tests/utils';
import { StaticStore } from 'common/static-store';
import * as localStorageModule from 'common/local-storage';
import { CommentForm, Props, messages } from './comment-form';
import type { Props } from './comment-form';
import { CommentForm, messages } from './comment-form';
import { updatePersistedComments, getPersistedComments } from './comment-form.persist';
const user: Props['user'] = {
@@ -19,7 +20,7 @@ const user: Props['user'] = {
verified: false,
};
function setup(overrideProps: Partial<Props> = {}, overrideConfig: Partial<typeof StaticStore['config']> = {}) {
function setup(overrideProps: Partial<Props> = {}, overrideConfig: Partial<(typeof StaticStore)['config']> = {}) {
Object.assign(StaticStore.config, overrideConfig);
const props = {
frontend/apps/remark42/app/components/comment-form/comment-form.tsx
+3 -2
View File
@@ -1,8 +1,9 @@
import { h, Component, createRef, Fragment } from 'preact';
import clsx from 'clsx';
import { FormattedMessage, IntlShape, defineMessages } from 'common/intl';
import { User, Theme, Image } from 'common/types';
import type { IntlShape } from 'common/intl';
import { FormattedMessage, defineMessages } from 'common/intl';
import type { User, Theme, Image } from 'common/types';
import { StaticStore } from 'common/static-store';
import * as settings from 'common/settings';
import { extractErrorMessageFromResponse } from 'utils/errorUtils';
frontend/apps/remark42/app/components/comment-form/markdown-toolbar.tsx
+2 -1
View File
@@ -2,7 +2,8 @@ import '@ungap/custom-elements';
import '@github/markdown-toolbar-element';
import { h, Component } from 'preact';
import { defineMessages, IntlShape } from 'common/intl';
import type { IntlShape } from 'common/intl';
import { defineMessages } from 'common/intl';
import styles from './markdown-toolbar.module.css';
// TODO: Use SVGR
frontend/apps/remark42/app/components/comment-form/text-expander.tsx
+3 -2
View File
@@ -1,10 +1,11 @@
import '@github/text-expander-element';
import { h, Fragment, render, FunctionalComponent } from 'preact';
import type { FunctionalComponent } from 'preact';
import { h, Fragment, render } from 'preact';
import { useEffect, useRef } from 'preact/hooks';
import clsx from 'clsx';
import { StaticStore } from 'common/static-store';
import { Theme } from 'common/types';
import type { Theme } from 'common/types';
import { useTheme } from 'hooks/useTheme';
import styles from './text-expander.module.css';
frontend/apps/remark42/app/components/comment/comment-actions.spec.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { h } from 'preact';
import '@testing-library/jest-dom';
import { CommentActions, Props } from './comment-actions';
import type { Props } from './comment-actions';
import { CommentActions } from './comment-actions';
import { render } from 'tests/utils';
import { fireEvent, screen, waitFor } from '@testing-library/preact';
frontend/apps/remark42/app/components/comment/comment-actions.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import clsx from 'clsx';
import { h, Fragment } from 'preact';
import { defineMessages, useIntl } from 'common/intl';
import { BlockTTL } from 'common/types';
import type { BlockTTL } from 'common/types';
import { Select } from 'components/select';
import { Countdown } from 'components/countdown';
import { Button } from 'components/auth/components/button';
frontend/apps/remark42/app/components/comment/comment-votes.module.css
+5 -3
View File
@@ -21,7 +21,9 @@
padding: 2px;
opacity: 0.4;
color: var(--color13);
transition: opacity 0.15s, color 0.15s;
transition:
opacity 0.15s,
color 0.15s;
}
.root:hover .voteButton {
@@ -52,12 +54,12 @@
.votesNegative {
color: rgb(var(--color30));
background-color: rgba(var(--color30), 0.1);
background-color: rgb(var(--color30), 0.1);
}
.votesPositive {
color: rgb(var(--color12));
background-color: rgba(var(--color12), 0.1);
background-color: rgb(var(--color12), 0.1);
}
.upVoteIcon {
frontend/apps/remark42/app/components/comment/comment.module.css
+6 -6
View File
@@ -154,7 +154,7 @@
display: none;
}
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border: 8px solid;
padding-bottom: 0;
@@ -176,7 +176,7 @@
position: relative;
z-index: 1;
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border: 8px solid;
& .info {
@@ -317,7 +317,7 @@
border-color: var(--color7);
}
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border-color: var(--color7);
}
}
@@ -327,7 +327,7 @@
border-color: var(--color7);
}
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border-color: var(--color7);
}
}
@@ -367,7 +367,7 @@
border-color: var(--color5);
}
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border-color: var(--color5);
}
}
@@ -377,7 +377,7 @@
border-color: var(--color5);
}
@media (pointer: coarse) and (max-width: 768px) {
@media (pointer: coarse) and (width <= 768px) {
border-color: var(--color5);
}
}
frontend/apps/remark42/app/components/comment/comment.test.tsx
+4 -2
View File
@@ -2,11 +2,13 @@ import { h } from 'preact';
import '@testing-library/jest-dom';
import { fireEvent, screen, waitFor } from '@testing-library/preact';
import { useIntl, IntlShape } from 'common/intl';
import type { IntlShape } from 'common/intl';
import { useIntl } from 'common/intl';
import { render } from 'tests/utils';
import { StaticStore } from 'common/static-store';
import { Comment, CommentProps } from './comment';
import type { CommentProps } from './comment';
import { Comment } from './comment';
import { CommentForm } from 'components/comment-form';
import { CommentMode } from 'common/types';
frontend/apps/remark42/app/components/comment/comment.tsx
+11 -8
View File
@@ -1,22 +1,25 @@
import { h, JSX, Component, createRef, ComponentType } from 'preact';
import type { JSX, ComponentType } from 'preact';
import { h, Component, createRef } from 'preact';
import clsx from 'clsx';
import { FormattedMessage, IntlShape, defineMessages } from 'common/intl';
import type { IntlShape } from 'common/intl';
import { FormattedMessage, defineMessages } from 'common/intl';
import { COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
import { StaticStore } from 'common/static-store';
import { debounce } from 'utils/debounce';
import { copy } from 'common/copy';
import { Theme, BlockTTL, Comment as CommentType, PostInfo, User, CommentMode, Profile } from 'common/types';
import type { Theme, BlockTTL, Comment as CommentType, PostInfo, User, Profile } from 'common/types';
import { CommentMode } from 'common/types';
import { isUserAnonymous } from 'utils/isUserAnonymous';
import { Props as CommentFormProps } from 'components/comment-form';
import type { Props as CommentFormProps } from 'components/comment-form';
import { Avatar } from 'components/avatar';
import { VerificationIcon } from 'components/icons/verification';
import { getPreview, uploadImage } from 'common/api';
import type { getPreview, uploadImage } from 'common/api';
import { postMessageToParent } from 'utils/post-message';
import { getBlockingDurations } from './getBlockingDurations';
import { boundActions } from './connected-comment';
import type { boundActions } from './connected-comment';
import { CommentVotes } from './comment-votes';
import { CommentActions } from './comment-actions';
@@ -300,8 +303,8 @@ export class Comment extends Component<CommentProps, State> {
props.view === 'preview'
? getTextSnippet(props.data.text)
: props.data.delete
? intl.formatMessage(messages.deletedComment)
: props.data.text,
? intl.formatMessage(messages.deletedComment)
: props.data.text,
time: new Date(props.data.time),
orig: props.data.orig,
user: props.data.user,
frontend/apps/remark42/app/components/comment/connected-comment.tsx
+4 -2
View File
@@ -5,13 +5,15 @@
import './styles';
import { h, FunctionComponent } from 'preact';
import type { FunctionComponent } from 'preact';
import { h } from 'preact';
import { useAppSelector } from 'store';
import { addComment, removeComment, updateComment, setPinState, setCommentMode } from 'store/comments/actions';
import { blockUser, unblockUser, hideUser, setVerifiedStatus } from 'store/user/actions';
import { Comment, CommentProps } from './comment';
import type { CommentProps } from './comment';
import { Comment } from './comment';
import { getCommentMode } from 'store/comments/getters';
import { uploadImage, getPreview } from 'common/api';
import { getThreadIsCollapsed } from 'store/thread/getters';
frontend/apps/remark42/app/components/comment/getBlockingDurations.ts
+3 -2
View File
@@ -1,5 +1,6 @@
import { defineMessages, IntlShape } from 'common/intl';
import { BlockTTL } from 'common/types';
import type { IntlShape } from 'common/intl';
import { defineMessages } from 'common/intl';
import type { BlockTTL } from 'common/types';
export interface BlockingDuration {
label: string;
frontend/apps/remark42/app/components/comment/raw-content.css
+1 -1
View File
@@ -209,7 +209,7 @@
.dark .raw-content {
/* Syntax Highlight Colors */
--chroma-bg: rgba(255, 255, 255, 0.05);
--chroma-bg: rgb(255, 255, 255, 0.05);
--chroma-base: #a0b2b2;
--chroma-c: #586e75;
--chroma-01: #9ef203;
frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { h, JSX, FunctionComponent } from 'preact';
import type { JSX, FunctionComponent } from 'preact';
import { h } from 'preact';
import styles from './dropdown-item.module.css';
frontend/apps/remark42/app/components/dropdown/dropdown.tsx
+3 -2
View File
@@ -1,7 +1,8 @@
import { h, Component, createRef, RenderableProps } from 'preact';
import type { RenderableProps } from 'preact';
import { h, Component, createRef } from 'preact';
import clsx from 'clsx';
import { Theme } from 'common/types';
import type { Theme } from 'common/types';
import { sleep } from 'utils/sleep';
import { Button } from 'components/button';
import { parseMessage } from 'utils/post-message';
frontend/apps/remark42/app/components/icon-button/icon-button.module.css
+1 -1
View File
@@ -18,6 +18,6 @@
}
&:focus {
box-shadow: inset 0 0 0 2px rgba(var(--primary-color), 0.5);
box-shadow: inset 0 0 0 2px rgb(var(--primary-color), 0.5);
}
}
frontend/apps/remark42/app/components/icon-button/icon-button.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
import styles from './icon-button.module.css';
frontend/apps/remark42/app/components/icons/arrow.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
type Props = JSX.HTMLAttributes<SVGSVGElement> & { size?: number };
frontend/apps/remark42/app/components/icons/cross.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
type Props = Omit<JSX.SVGAttributes<SVGSVGElement>, 'size'> & {
size?: number | string;
frontend/apps/remark42/app/components/icons/signout.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
type Props = Omit<JSX.SVGAttributes<SVGSVGElement>, 'size'> & {
size?: number | string;
frontend/apps/remark42/app/components/icons/verification.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
type Props = JSX.SVGAttributes<SVGSVGElement> & { size?: number };
frontend/apps/remark42/app/components/input/input.module.css
+11 -7
View File
@@ -38,7 +38,9 @@
-webkit-text-fill-color: var(--color7);
&:focus {
box-shadow: 0 0 0 1000px rgb(var(--white-color)) inset, 0 0 0 2px var(--color47);
box-shadow:
0 0 0 1000px rgb(var(--white-color)) inset,
0 0 0 2px var(--color47);
}
&::placeholder {
@@ -49,7 +51,7 @@
:global(.dark) {
& .input {
background-color: var(--color22);
color: rgba(var(--white-color), 0.8);
color: rgb(var(--white-color), 0.8);
&:focus {
border-color: var(--color15);
@@ -57,21 +59,23 @@
}
&::placeholder {
color: rgba(var(--white-color), 0.2);
color: rgb(var(--white-color), 0.2);
}
}
& .input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--color22) inset;
-webkit-text-fill-color: rgba(var(--white-color), 0.8);
-webkit-text-fill-color: rgb(var(--white-color), 0.8);
&:focus {
box-shadow: 0 0 0 1000px var(--color22) inset, 0 0 0 2px var(--color47);
-webkit-text-fill-color: rgba(var(--white-color), 0.8);
box-shadow:
0 0 0 1000px var(--color22) inset,
0 0 0 2px var(--color47);
-webkit-text-fill-color: rgb(var(--white-color), 0.8);
}
&::placeholder {
-webkit-text-fill-color: rgba(var(--white-color), 0.4);
-webkit-text-fill-color: rgb(var(--white-color), 0.4);
}
}
}
frontend/apps/remark42/app/components/profile/components/counter/counter.module.css
+1 -1
View File
@@ -9,5 +9,5 @@
}
:global(.dark) .container {
background-color: rgba(var(--white-color), 0.12);
background-color: rgb(var(--white-color), 0.12);
}
frontend/apps/remark42/app/components/profile/profile.module.css
+6 -6
View File
@@ -6,7 +6,7 @@
transform: translateX(100%);
transition: transform 0.5s ease-out;
@media (min-width: 448px) {
@media (width >= 448px) {
transform: translateX(448px);
}
}
@@ -29,7 +29,7 @@
width: 100%;
height: 100%;
@media (min-width: 448px) {
@media (width >= 448px) {
width: 400px;
}
}
@@ -42,7 +42,7 @@
box-sizing: border-box;
color: rgb(var(--secondary-text-color));
@media (min-width: 448px) {
@media (width >= 448px) {
position: initial;
width: 100%;
padding: 4px;
@@ -144,7 +144,7 @@
color: inherit;
}
@media (min-width: 448px) {
@media (width >= 448px) {
margin-right: 0;
}
}
@@ -166,8 +166,8 @@
height: 20px;
background-image: linear-gradient(
0deg,
rgba(var(--primary-background-color), 0),
rgba(var(--primary-background-color), 1)
rgb(var(--primary-background-color), 0),
rgb(var(--primary-background-color), 1)
);
}
}
frontend/apps/remark42/app/components/root/in-view/in-view.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import { Component, VNode } from 'preact';
import { useState, useEffect, useRef, PropRef } from 'preact/hooks';
import type { Component, VNode } from 'preact';
import type { PropRef } from 'preact/hooks';
import { useState, useEffect, useRef } from 'preact/hooks';
let instanceMap: WeakMap<Element, (inView: boolean) => void>;
let observer: IntersectionObserver;
frontend/apps/remark42/app/components/root/root.tsx
+2 -1
View File
@@ -2,7 +2,8 @@ import { h, Component, Fragment } from 'preact';
import { useSelector } from 'store/context';
import clsx from 'clsx';
import { IntlShape, useIntl, FormattedMessage, defineMessages } from 'common/intl';
import type { IntlShape } from 'common/intl';
import { useIntl, FormattedMessage, defineMessages } from 'common/intl';
import 'styles/global.css';
import type { StoreState } from 'store';
import { COMMENT_NODE_CLASSNAME_PREFIX, MAX_SHOWN_ROOT_COMMENTS, THEMES, IS_MOBILE } from 'common/constants';
frontend/apps/remark42/app/components/select/select.module.css
+1 -1
View File
@@ -12,7 +12,7 @@
}
.rootFocused {
box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.4);
box-shadow: 0 0 0 2px rgb(var(--primary-color), 0.4);
outline: none;
}
frontend/apps/remark42/app/components/select/select.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { h, JSX } from 'preact';
import type { JSX } from 'preact';
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { ArrowIcon } from 'components/icons/arrow';
frontend/apps/remark42/app/components/settings/settings.tsx
+4 -3
View File
@@ -1,10 +1,11 @@
import { h, Component } from 'preact';
import clsx from 'clsx';
import { User, BlockedUser, Theme, BlockTTL } from 'common/types';
import type { User, BlockedUser, Theme, BlockTTL } from 'common/types';
import { getHandleClickProps } from 'common/accessibility';
import { StoreState } from 'store';
import { defineMessages, IntlShape, FormattedMessage, useIntl } from 'common/intl';
import type { StoreState } from 'store';
import type { IntlShape } from 'common/intl';
import { defineMessages, FormattedMessage, useIntl } from 'common/intl';
import { useTheme } from 'hooks/useTheme';
import styles from './settings.module.css';
frontend/apps/remark42/app/components/sort-picker.tsx
+2 -1
View File
@@ -2,7 +2,8 @@ import { h } from 'preact';
import { useMemo } from 'preact/hooks';
import { FormattedMessage, defineMessages, useIntl } from 'common/intl';
import { StoreState, useAppDispatch, useAppSelector } from 'store';
import type { StoreState } from 'store';
import { useAppDispatch, useAppSelector } from 'store';
import { Select } from 'components/select';
import { updateSorting } from 'store/comments/actions';
import type { Sorting } from 'common/types';
frontend/apps/remark42/app/components/spinner/spinner.module.css
+1 -6
View File
@@ -2,7 +2,7 @@
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(var(--white-color), 0.2);
border: 2px solid rgb(var(--white-color), 0.2);
border-right-color: rgb(var(--white-color));
animation: spin 1s linear infinite;
}
@@ -12,11 +12,6 @@
border-right-color: var(--color37);
}
:global(.dark) & {
border: 2px solid rgba(var(--white-color), 0.2);
border-right-color: rgb(var(--white-color));
}
@keyframes spin {
0% {
transform: rotate(0deg);
frontend/apps/remark42/app/components/telegram/telegram-link.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { h, Fragment, FunctionComponent } from 'preact';
import type { FunctionComponent } from 'preact';
import { h, Fragment } from 'preact';
import { messages } from './telegram.messages';
import { BASE_URL, API_BASE } from 'common/constants.config';
import { Button } from 'components/button';
frontend/apps/remark42/app/components/textarea-autosize.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { h, JSX, type RefObject, type TextareaHTMLAttributes } from 'preact';
import type { JSX } from 'preact';
import { h, type RefObject, type TextareaHTMLAttributes } from 'preact';
import { useEffect, useRef } from 'preact/hooks';
function autoResize(textarea: HTMLTextAreaElement) {
frontend/apps/remark42/app/components/thread/thread.tsx
+5 -3
View File
@@ -1,12 +1,14 @@
import { h, FunctionComponent, type AriaRole } from 'preact';
import type { FunctionComponent } from 'preact';
import { h, type AriaRole } from 'preact';
import { shallowEqual } from 'store/context';
import { useCallback } from 'preact/hooks';
import clsx from 'clsx';
import { useIntl } from 'common/intl';
import { Comment as CommentInterface } from 'common/types';
import type { Comment as CommentInterface } from 'common/types';
import { getHandleClickProps } from 'common/accessibility';
import { StoreState, useAppDispatch, useAppSelector } from 'store';
import type { StoreState } from 'store';
import { useAppDispatch, useAppSelector } from 'store';
import { setCollapse } from 'store/thread/actions';
import { getThreadIsCollapsed } from 'store/thread/getters';
import { InView } from 'components/root/in-view/in-view';
frontend/apps/remark42/app/deleteme.ts
+1 -2
View File
@@ -1,8 +1,7 @@
/* eslint-disable no-console */
import { NODE_ID } from 'common/constants';
import { approveDeleteMe, getUser } from 'common/api';
import { token } from 'common/settings';
import { ApiError } from 'common/types';
import type { ApiError } from 'common/types';
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
frontend/apps/remark42/app/hooks/useAction.ts
+1 -1
View File
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useMemo } from 'preact/hooks';
import { useDispatch } from 'store/context';
import { BoundActionCreator, BoundActionCreators } from 'utils/actionBinder';
import type { BoundActionCreator, BoundActionCreators } from 'utils/actionBinder';
/** binds actions to dispatch */
export const useActions = <Actions extends { [key: string]: Function }>(
frontend/apps/remark42/app/hooks/useSessionState.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import { useState, StateUpdater, Dispatch } from 'preact/hooks';
import type { StateUpdater, Dispatch } from 'preact/hooks';
import { useState } from 'preact/hooks';
function useSessionStorage<T>(key: string, initialValue?: T): [T, Dispatch<StateUpdater<T>>] {
const [storedValue, setStoredValue] = useState<T>(() => {
frontend/apps/remark42/app/hooks/useTheme.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { useSelector } from 'store/context';
import { StoreState } from 'store';
import { Theme } from 'common/types';
import type { StoreState } from 'store';
import type { Theme } from 'common/types';
export function useTheme() {
return useSelector<StoreState, Theme>(({ theme }) => theme);
frontend/apps/remark42/app/profile.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import { setAttributes, setStyles, StylesDeclaration } from 'utils/set-dom-props';
import type { StylesDeclaration } from 'utils/set-dom-props';
import { setAttributes, setStyles } from 'utils/set-dom-props';
import { createIframe } from 'utils/create-iframe';
import type { Profile } from 'common/types';
frontend/apps/remark42/app/store/actions.ts
+5 -5
View File
@@ -1,8 +1,8 @@
import { COMMENTS_ACTIONS } from './comments/types';
import { POST_INFO_ACTIONS } from './post-info/types';
import { THEME_ACTIONS } from './theme/types';
import { THREAD_ACTIONS } from './thread/types';
import { USER_ACTIONS } from './user/types';
import type { COMMENTS_ACTIONS } from './comments/types';
import type { POST_INFO_ACTIONS } from './post-info/types';
import type { THEME_ACTIONS } from './theme/types';
import type { THREAD_ACTIONS } from './thread/types';
import type { USER_ACTIONS } from './user/types';
/** Merged store actions */
export type ACTIONS = COMMENTS_ACTIONS | POST_INFO_ACTIONS | THEME_ACTIONS | THREAD_ACTIONS | USER_ACTIONS;
frontend/apps/remark42/app/store/comments/actions.ts
+4 -5
View File
@@ -1,21 +1,20 @@
import * as api from 'common/api';
import { Tree, Comment, CommentMode, Node, Sorting } from 'common/types';
import type { Tree, Comment, Node, Sorting } from 'common/types';
import { CommentMode } from 'common/types';
import { StoreAction, StoreState } from '../index';
import type { StoreAction, StoreState } from '../index';
import { setPostInfo } from '../post-info/actions';
import { filterTree } from './utils';
import type { COMMENT_MODE_SET_ACTION, COMMENT_PATCH_ACTION, COMMENTS_EDIT_ACTION } from './types';
import {
COMMENTS_SET,
COMMENT_MODE_SET,
COMMENTS_APPEND,
COMMENTS_EDIT,
COMMENT_MODE_SET_ACTION,
COMMENTS_SET_SORT,
COMMENTS_REQUEST_FETCHING,
COMMENTS_REQUEST_SUCCESS,
COMMENT_PATCH,
COMMENT_PATCH_ACTION,
COMMENTS_EDIT_ACTION,
} from './types';
import { setItem } from 'common/local-storage';
import { LS_SORT_KEY } from 'common/constants';
frontend/apps/remark42/app/store/comments/getters.ts
+3 -2
View File
@@ -1,5 +1,6 @@
import { Comment, CommentMode } from 'common/types';
import { StoreState } from '../index';
import type { Comment } from 'common/types';
import { CommentMode } from 'common/types';
import type { StoreState } from '../index';
export const getCommentMode =
(id: Comment['id']) =>
frontend/apps/remark42/app/store/comments/reducers.ts
+12 -14
View File
@@ -1,25 +1,27 @@
import { Node, Comment, CommentMode, Sorting } from 'common/types';
import type { Node, Comment, CommentMode, Sorting } from 'common/types';
import { combineReducers } from 'redux';
import {
COMMENTS_SET,
import type {
COMMENTS_SET_ACTION,
COMMENT_MODE_SET,
COMMENT_MODE_SET_ACTION,
COMMENTS_APPEND_ACTION,
COMMENTS_APPEND,
COMMENTS_EDIT_ACTION,
COMMENTS_PATCH_ACTION,
COMMENTS_SET_SORT_ACTION,
COMMENTS_REQUEST_ACTIONS,
COMMENT_PATCH_ACTION,
} from './types';
import {
COMMENTS_SET,
COMMENT_MODE_SET,
COMMENTS_APPEND,
COMMENTS_EDIT,
COMMENTS_PATCH,
COMMENTS_PATCH_ACTION,
COMMENTS_SET_SORT,
COMMENTS_SET_SORT_ACTION,
COMMENTS_REQUEST_FETCHING,
COMMENTS_REQUEST_SUCCESS,
COMMENTS_REQUEST_FAILURE,
COMMENTS_REQUEST_ACTIONS,
COMMENT_PATCH,
COMMENT_PATCH_ACTION,
} from './types';
import { getPinnedComments, getInitialSort } from './utils';
import { cmpRef } from 'utils/cmpRef';
@@ -99,11 +101,7 @@ const reduceComments = (c: Record<Comment['id'], Comment>, x: Node): Record<Comm
export const allComments = (
state: Record<Comment['id'], Comment> = {},
action:
| COMMENTS_SET_ACTION
| COMMENTS_APPEND_ACTION
| COMMENTS_EDIT_ACTION
| COMMENTS_PATCH_ACTION
| COMMENT_PATCH_ACTION
COMMENTS_SET_ACTION | COMMENTS_APPEND_ACTION | COMMENTS_EDIT_ACTION | COMMENTS_PATCH_ACTION | COMMENT_PATCH_ACTION
): Record<Comment['id'], Comment> => {
switch (action.type) {
case COMMENTS_SET: {
frontend/apps/remark42/app/store/comments/types.ts
+3 -5
View File
@@ -1,5 +1,5 @@
import { Node, Comment, Sorting } from 'common/types';
import { StoreState } from '../index';
import type { Node, Comment, Sorting } from 'common/types';
import type { StoreState } from '../index';
export const COMMENT_PATCH = 'COMMENT/PATCH';
@@ -49,9 +49,7 @@ export const COMMENTS_REQUEST_SUCCESS = 'COMMENTS/FETCHING_SUCCESS';
export const COMMENTS_REQUEST_FAILURE = 'COMMENTS/FETCHING_FAILURE';
export type COMMENTS_REQUEST_ACTIONS_TYPE =
| typeof COMMENTS_REQUEST_FETCHING
| typeof COMMENTS_REQUEST_SUCCESS
| typeof COMMENTS_REQUEST_FAILURE;
typeof COMMENTS_REQUEST_FETCHING | typeof COMMENTS_REQUEST_SUCCESS | typeof COMMENTS_REQUEST_FAILURE;
export interface COMMENTS_REQUEST_ACTIONS {
type: COMMENTS_REQUEST_ACTIONS_TYPE;
frontend/apps/remark42/app/store/comments/utils.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Comment, Node, Sorting } from 'common/types';
import type { Comment, Node, Sorting } from 'common/types';
import { LS_SORT_KEY, DEFAULT_SORT } from 'common/constants';
import { getItem } from 'common/local-storage';
frontend/apps/remark42/app/store/index.ts
+5 -3
View File
@@ -1,8 +1,10 @@
import { createStore, applyMiddleware, AnyAction, compose, combineReducers } from 'redux';
import type { AnyAction } from 'redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { useDispatch, useSelector, type TypedUseSelectorHook } from './context';
import thunk, { ThunkAction, ThunkDispatch } from 'redux-thunk';
import type { ThunkAction, ThunkDispatch } from 'redux-thunk';
import thunk from 'redux-thunk';
import { rootProvider } from './reducers';
import { ACTIONS } from './actions';
import type { ACTIONS } from './actions';
const reducers = combineReducers(rootProvider);
const middleware = applyMiddleware(thunk);
frontend/apps/remark42/app/store/post-info/actions.ts
+4 -3
View File
@@ -1,7 +1,8 @@
import { PostInfo } from 'common/types';
import type { PostInfo } from 'common/types';
import { StoreAction } from '../index';
import { POST_INFO_SET, POST_INFO_SET_ACTION } from './types';
import type { StoreAction } from '../index';
import type { POST_INFO_SET_ACTION } from './types';
import { POST_INFO_SET } from './types';
import { disableComments, enableComments } from 'common/api';
import { unsetCommentMode } from '../comments/actions';
frontend/apps/remark42/app/store/post-info/reducers.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import type { PostInfo } from 'common/types';
import { cmpRef } from 'utils/cmpRef';
import { POST_INFO_SET, POST_INFO_SET_ACTION } from './types';
import type { POST_INFO_SET_ACTION } from './types';
import { POST_INFO_SET } from './types';
const DefaultPostInfo: PostInfo = {
url: '',
frontend/apps/remark42/app/store/post-info/types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { PostInfo } from 'common/types';
import type { PostInfo } from 'common/types';
export const POST_INFO_SET = 'POST_INFO/SET';
frontend/apps/remark42/app/store/theme/actions.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { Theme } from 'common/types';
import type { Theme } from 'common/types';
import { StoreAction } from '../';
import type { StoreAction } from '../';
import { THEME_SET } from './types';
export const setTheme =
frontend/apps/remark42/app/store/theme/reducers.ts
+3 -2
View File
@@ -1,7 +1,8 @@
import { Theme } from 'common/types';
import type { Theme } from 'common/types';
import * as settings from 'common/settings';
import { THEME_SET_ACTION, THEME_SET } from './types';
import type { THEME_SET_ACTION } from './types';
import { THEME_SET } from './types';
export function theme(state: Theme = settings.theme, action: THEME_SET_ACTION): Theme {
switch (action.type) {
frontend/apps/remark42/app/store/theme/types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Theme } from 'common/types';
import type { Theme } from 'common/types';
export const THEME_SET = 'THEME/SET';
frontend/apps/remark42/app/store/thread/actions.ts
+4 -3
View File
@@ -1,8 +1,9 @@
import { Comment } from 'common/types';
import type { Comment } from 'common/types';
import { siteId, url } from 'common/settings';
import { StoreAction } from '../index';
import { THREAD_SET_COLLAPSE, THREAD_RESTORE_COLLAPSE_ACTION, THREAD_RESTORE_COLLAPSE } from './types';
import type { StoreAction } from '../index';
import type { THREAD_RESTORE_COLLAPSE_ACTION } from './types';
import { THREAD_SET_COLLAPSE, THREAD_RESTORE_COLLAPSE } from './types';
import { saveCollapsedComments, getCollapsedComments } from './utils';
export const restoreCollapsedThreads = (): THREAD_RESTORE_COLLAPSE_ACTION => ({
frontend/apps/remark42/app/store/thread/getters.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { Comment } from 'common/types';
import { StaticStore } from 'common/static-store';
import { StoreState } from '../index';
import type { StoreState } from '../index';
export const getThreadIsCollapsed =
(comment: Comment) =>
frontend/apps/remark42/app/store/thread/reducers.test.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { Comment } from 'common/types';
import { StoreState } from 'store';
import type { Comment } from 'common/types';
import type { StoreState } from 'store';
import { setCollapse } from './actions';
import { THREAD_SET_COLLAPSE } from './types';
@@ -13,7 +13,7 @@ describe('collapsedThreads', () => {
const getState = jest.fn(() => state);
setCollapse(comment.id, true)(dispatch, getState, undefined);
expect(dispatch).toBeCalledWith({
expect(dispatch).toHaveBeenCalledWith({
type: THREAD_SET_COLLAPSE,
id: 'some-id',
collapsed: true,
@@ -28,7 +28,7 @@ describe('collapsedThreads', () => {
getState.mockReturnValue({ collapsedThreads: { 'some-id': true }, comments: [node] });
setCollapse(comment.id, false)(dispatch, getState, undefined);
expect(dispatch).toBeCalledWith({
expect(dispatch).toHaveBeenCalledWith({
type: THREAD_SET_COLLAPSE,
id: 'some-id',
collapsed: false,
frontend/apps/remark42/app/store/thread/reducers.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import { THREAD_SET_COLLAPSE, THREAD_ACTIONS, THREAD_RESTORE_COLLAPSE } from './types';
import type { THREAD_ACTIONS } from './types';
import { THREAD_SET_COLLAPSE, THREAD_RESTORE_COLLAPSE } from './types';
export interface CollapsedThreadsState {
[key: string]: boolean;
frontend/apps/remark42/app/store/thread/types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Comment } from 'common/types';
import type { Comment } from 'common/types';
export const THREAD_RESTORE_COLLAPSE = 'THREAD/COLLAPSE_RESTORE';
export interface THREAD_RESTORE_COLLAPSE_ACTION {
frontend/apps/remark42/app/store/thread/utils.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { siteId, url } from 'common/settings';
import { LS_COLLAPSE_KEY } from 'common/constants';
import { setItem as localStorageSetItem, getItem as localStorageGetItem } from 'common/local-storage';
import { Comment } from 'common/types';
import type { Comment } from 'common/types';
function getFromLocalStorage(): string[] {
return JSON.parse(localStorageGetItem(LS_COLLAPSE_KEY) || '[]');
frontend/apps/remark42/app/store/user/actions.test.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { mockStore } from '__stubs__/store';
import { User } from 'common/types';
import type { User } from 'common/types';
import { LS_HIDDEN_USERS_KEY } from 'common/constants';
import { COMMENTS_PATCH } from 'store/comments/types';
frontend/apps/remark42/app/store/user/actions.ts
+3 -3
View File
@@ -1,12 +1,13 @@
import * as api from 'common/api';
import { logout } from 'components/auth/auth.api';
import { User, BlockedUser, BlockTTL } from 'common/types';
import type { User, BlockedUser, BlockTTL } from 'common/types';
import { ttlToTime } from 'utils/ttl-to-time';
import { getHiddenUsers } from 'utils/get-hidden-users';
import { LS_HIDDEN_USERS_KEY } from 'common/constants';
import { setItem } from 'common/local-storage';
import { StoreAction } from '../index';
import type { StoreAction } from '../index';
import type { USER_SET_ACTION } from './types';
import {
USER_BAN,
USER_SET,
@@ -16,7 +17,6 @@ import {
USER_HIDE,
USER_UNHIDE,
USER_SUBSCRIPTION_SET,
USER_SET_ACTION,
} from './types';
import { fetchComments, unsetCommentMode } from '../comments/actions';
import { COMMENTS_PATCH } from '../comments/types';
frontend/apps/remark42/app/store/user/reducers.test.ts
+6 -5
View File
@@ -1,9 +1,10 @@
import { getUser } from 'common/api';
import { User } from 'common/types';
import type { User } from 'common/types';
import { fetchUser, signin } from './actions';
import { user } from './reducers';
import { USER_ACTIONS, USER_SET } from './types';
import type { USER_ACTIONS } from './types';
import { USER_SET } from './types';
jest.mock('common/api');
@@ -28,12 +29,12 @@ describe('user', () => {
id: 'john',
name: 'John',
admin: true,
} as User)
}) as User
);
const dispatch = jest.fn();
const getState = jest.fn();
await fetchUser()(dispatch, getState, undefined);
expect(dispatch).toBeCalledWith({
expect(dispatch).toHaveBeenCalledWith({
type: USER_SET,
user: {
id: 'john',
@@ -55,7 +56,7 @@ describe('user', () => {
block: false,
verified: true,
})(dispatch, getState, undefined);
expect(dispatch).toBeCalledWith({
expect(dispatch).toHaveBeenCalledWith({
type: USER_SET,
user: {
name: 'Umputun',
frontend/apps/remark42/app/store/user/reducers.ts
+1 -1
View File
@@ -1,10 +1,10 @@
import type { User, BlockedUser } from 'common/types';
import type { USER_ACTIONS } from './types';
import {
USER_SET,
USER_BAN,
USER_UNBAN,
USER_ACTIONS,
USER_BANLIST_SET,
USER_HIDELIST_SET,
USER_HIDE,
frontend/apps/remark42/app/store/user/types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { User, BlockedUser } from 'common/types';
import type { User, BlockedUser } from 'common/types';
export const USER_SET = 'USER/SET';
frontend/apps/remark42/app/styles/custom-properties.css
+6 -6
View File
@@ -18,11 +18,11 @@
--color1: #aaa;
--color35: #d1d5db;
--color20: #ddd;
--color46: rgba(27, 31, 35, 0.15);
--color45: rgba(0, 0, 0, 0.1);
--color46: rgb(27, 31, 35, 0.15);
--color45: rgb(0, 0, 0, 0.1);
--color41: #efefef;
--color5: #eee;
--color44: rgba(255, 255, 255, 0.3);
--color44: rgb(255, 255, 255, 0.3);
--color6: #fff;
--color3: #e2efef;
--color4: #edf6f7;
@@ -36,8 +36,8 @@
--color40: #9cdddb;
--color43: #b7dddd;
--color42: #c6efef;
--color48: rgba(37, 156, 154, 0.6);
--color47: rgba(37, 156, 154, 0.4);
--color48: rgb(37, 156, 154, 0.6);
--color47: rgb(37, 156, 154, 0.4);
--color28: #672323;
--color25: #9a0000;
--color38: #ef0000;
@@ -47,7 +47,7 @@
--color12: 37, 158, 6;
/* code-highlight */
--chroma-bg: rgba(0, 0, 0, 0.05);
--chroma-bg: rgb(0, 0, 0, 0.05);
--chroma-base: #586e75;
--chroma-c: #7d7d7d;
--chroma-01: #589000;
frontend/apps/remark42/app/tests/utils.tsx
+3 -2
View File
@@ -1,11 +1,12 @@
import { h, ComponentChild } from 'preact';
import type { ComponentChild } from 'preact';
import { h } from 'preact';
import { render as originalRender } from '@testing-library/preact';
import { Provider } from 'store/context';
import { IntlProvider } from 'common/intl';
import en from 'locales/en.json';
import { mockStore } from '__stubs__/store';
import { StoreState } from 'store';
import type { StoreState } from 'store';
export function render(children: ComponentChild, s: Partial<StoreState> = {}) {
const props = originalRender(
frontend/apps/remark42/app/utils/actionBinder.ts
+6 -6
View File
@@ -1,14 +1,14 @@
import { StoreAction } from 'store';
import { Action } from 'redux';
import type { StoreAction } from 'store';
import type { Action } from 'redux';
/** Helper type which is used to convert actionCreator to redux `connect` bound prop */
export type BoundActionCreator<A> = A extends (...args: infer U) => StoreAction<infer R>
? (...args: U) => R
: A extends (...args: infer U) => Action<infer R>
? (...args: U) => Action<R>
: A extends (...args: infer U) => Promise<infer R>
? (...args: U) => Promise<R>
: never;
? (...args: U) => Action<R>
: A extends (...args: infer U) => Promise<infer R>
? (...args: U) => Promise<R>
: never;
/** Helper type which is used to convert actionCreators map to redux `connect` bound props */
export type BoundActionCreators<T extends object> = { [K in keyof T]: BoundActionCreator<T[K]> };
frontend/apps/remark42/app/utils/create-iframe.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import { BASE_URL } from 'common/constants.config';
import { parseMessage } from 'utils/post-message';
import { setStyles, setAttributes, StylesDeclaration } from 'utils/set-dom-props';
import type { StylesDeclaration } from 'utils/set-dom-props';
import { setStyles, setAttributes } from 'utils/set-dom-props';
type Params = {
[key: string]: unknown;

Some files were not shown because too many files have changed in this diff Show More