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
.github/workflows/ci-frontend.yml
+4 -4
View File
@@ -22,7 +22,7 @@ jobs:
contents: read
strategy:
matrix:
node: [20]
node: [24]
steps:
- name: Checkout
@@ -58,7 +58,7 @@ jobs:
contents: read
strategy:
matrix:
node: [20]
node: [24]
steps:
- name: Checkout
@@ -94,7 +94,7 @@ jobs:
contents: read
strategy:
matrix:
node: [20]
node: [24]
steps:
- name: Checkout
@@ -158,7 +158,7 @@ jobs:
contents: read
strategy:
matrix:
node: [20]
node: [24]
steps:
- name: Checkout
.github/workflows/release.yml
+2 -2
View File
@@ -45,7 +45,7 @@ jobs:
- name: install node
uses: actions/setup-node@v7
with:
node-version: 20
node-version: 24
cache: "pnpm"
cache-dependency-path: frontend/pnpm-lock.yaml
@@ -121,7 +121,7 @@ jobs:
- name: install node
uses: actions/setup-node@v7
with:
node-version: 20
node-version: 24
cache: "pnpm"
cache-dependency-path: frontend/pnpm-lock.yaml
CLAUDE.md
+1 -1
View File
@@ -44,7 +44,7 @@ git push origin backend/vX.Y.Z
GoReleaser must ignore `backend/*` tags in `.goreleaser.yml` so release notes and current-tag detection use only product tags. Docker image publishing stays separate and is handled by the existing Docker workflow.
For local artifact runs, install GoReleaser, Go 1.25, Node 20+, PNPM 10, and Perl, then use `make release`. The target runs a snapshot/no-publish GoReleaser build, leaves local artifacts and metadata in `dist/`, and cleans generated frontend embed files after GoReleaser exits. Do not run raw `goreleaser release` for local artifacts unless you also run `./scripts/cleanup-release-assets.sh` afterward.
For local artifact runs, install GoReleaser, Go 1.25, Node 24+, PNPM 10, and Perl, then use `make release`. The target runs a snapshot/no-publish GoReleaser build, leaves local artifacts and metadata in `dist/`, and cleans generated frontend embed files after GoReleaser exits. Do not run raw `goreleaser release` for local artifacts unless you also run `./scripts/cleanup-release-assets.sh` afterward.
## Milestones and Issue Labels
Dockerfile
+1 -1
View File
@@ -1,4 +1,4 @@
FROM --platform=$BUILDPLATFORM node:20-alpine AS frontend-deps
FROM --platform=$BUILDPLATFORM node:24-alpine AS frontend-deps
ARG SKIP_FRONTEND_TEST
ARG SKIP_FRONTEND_BUILD
backend/app/webassets/assets/markdown-help.html
+6 -7
View File
@@ -181,7 +181,7 @@
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
@@ -192,7 +192,7 @@
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
clip-path: none;
height: auto;
margin: 0;
overflow: visible;
@@ -253,7 +253,7 @@
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
break-inside: avoid;
}
thead {
@@ -262,7 +262,7 @@
tr,
img {
page-break-inside: avoid;
break-inside: avoid;
}
img {
@@ -278,7 +278,7 @@
h2,
h3 {
page-break-after: avoid;
break-after: avoid;
}
}
</style>
@@ -366,8 +366,7 @@
|------------ | -------------|
|Content from cell 1 | Content from cell 2|
|Content in the first column | Content in the second column|
</pre
>
</pre>
</article>
<aside>
frontend/.husky/pre-commit
+5 -2
View File
@@ -1,4 +1,7 @@
# .husky/pre-commit
cd frontend
pnpm lint-staged || true
# lint-staged resolves its cwd from the config it finds, and there is only one, so it stays
# where it was launched. eslint and prettier are dependencies of the app, not of the workspace
# root, so the hook has to run from the app directory or they are not on PATH
cd frontend/apps/remark42
pnpm exec lint-staged || true
frontend/.nvmrc
+1 -1
View File
@@ -1 +1 @@
20
24
frontend/CLAUDE.md
+58 -12
View File
@@ -14,7 +14,7 @@ CI staying green does **not** mean every pin is consistent — `.nvmrc` in parti
When bumping pnpm/node, also re-check `frontend/apps/remark42/package.json`'s `engines` field — it's separate from `packageManager` and won't update itself.
`engines.node` states the major we support, currently `>=20`, and the docs say the same. Individual dev dependencies can be stricter within that major (`undici` wants `>=20.18.1`), which any current Node 20 satisfies; do not chase those patch floors into `engines` or the docs, or every lockfile refresh becomes a documentation change.
`engines.node` states the major we support, currently `>=24`, which is the active LTS; 22 has dropped to maintenance. `@babel/core` 8 wants `^22.18 || >=24.11` and `size-limit` 13 wants `^22.18 || ^24 || >=26`, so 22 was the floor rather than the target. Individual dev dependencies can be stricter within that major (`undici` wants `>=20.18.1`); do not chase those patch floors into `engines` or the docs, or every lockfile refresh becomes a documentation change.
## pnpm 10's stricter `node-linker` layout needs explicit pins
@@ -23,13 +23,45 @@ One dep is pinned specifically because of pnpm 10's hoisting changes, not becaus
If a dependency bump mysteriously breaks types or module resolution only after a pnpm major bump, suspect the layout change before suspecting the dependency.
## node 20's native fetch requires absolute URLs in tests
## node's native fetch requires absolute URLs in tests
Unlike the polyfilled fetch in node 16 and 18, it rejects relative request URLs, and the failure is
It rejects relative request URLs, and the failure is
silent: requests simply never match. Any test harness that mocks fetch needs absolute base URLs and
a jsdom base URL set.
## JSX runs on the automatic runtime, in three places that must agree
## Babel is the only thing that compiles
`.babelrc.js` drives both the bundle, through `babel-loader`, and the tests, which get it as
`babel-jest`'s `configFile` in `jest.config.mjs`. That indirection is not decoration: `.babelrc.js`
is a file-relative config and would not reach `node_modules`, so the ESM-only packages in
`transformIgnorePatterns` would arrive at jest untransformed.
Babel merges an `env` block over the root rather than replacing it, so anything the test run must
not see has to be decided before the object is built rather than put in an `env`. `jest.config.mjs`
sets `BABEL_ENV` itself and `.babelrc.js` reads it for two things: the compile targets, and the
`data-testid` stripper, which the suites query by and the bundle must not carry. Verify with
`grep -c data-testid public/*.mjs` after a production build; it must be 0. The plugin matches a
literal `JSXAttribute`, which is every use in the tree; a spread such as
`{...{'data-testid': x}}` would reach production, and that grep is what would catch it.
`tsconfig.json` types but never emits, so its `target` has no effect on output; browserslist in
`.babelrc.js` decides that. Type checking runs out of band through
`fork-ts-checker-webpack-plugin`.
## Type-only imports have to say so
Babel compiles one file at a time with no type information, so it cannot tell that an import is
types-only. Left unmarked, the module and everything it imports stay in the bundle, and a single
type import of a store-connected component is enough to pull the whole redux graph into an entry
that never uses it.
`verbatimModuleSyntax` in `tsconfig.json` and `@typescript-eslint/consistent-type-imports` are what
enforce this, and the fix has to be a separate `import type { ... }` statement. Inline
`import { type X }` does **not** work here: verbatim semantics keep the statement, so the module is
still loaded. That is also why `no-duplicate-imports` runs with `allowSeparateTypeImports`, since a
module legitimately appears twice.
## JSX runs on the automatic runtime, in two places that must agree
`preact` 10.29 types a component's return as `ComponentChildren`, which only satisfies a JSX check on
TypeScript 5.1+ via `JSX.ElementType`, and it scopes the `JSX` namespace to `preact/jsx-runtime` rather
@@ -37,22 +69,24 @@ than declaring it globally. So the type layer has to use the automatic runtime:
- `tsconfig.json`: `jsx: react-jsx` with `jsxImportSource: preact`
- `.babelrc.js`: `@babel/preset-react` with `runtime: 'automatic'`, `importSource: 'preact'`
- `jest.config.ts`: `@swc/jest` with `transform.react.runtime: 'automatic'`, `importSource: 'preact'`
`ts-loader` in `webpack.config.js` overrides `jsx` back to `preserve`. That is deliberate: JSX has to
survive as JSX until babel runs, or `babel-plugin-jsx-remove-data-test-id` has nothing to strip and
`data-testid` attributes ship to production. Verify with `grep -c data-testid public/*.mjs` after a
production build; it must be 0.
Keep all three in step. If babel alone were left on the classic `pragma: 'h'` transform, a new `.tsx`
Keep both in step. If babel were left on the classic `pragma: 'h'` transform, a new `.tsx`
without `import { h }` would type-check and lint clean, then throw at runtime, because
`eslint-config-preact` sets `react/react-in-jsx-scope` to 0 and the local config turns `no-undef` off.
## `@babel/core` is pinned to 8 for the whole workspace
`@jest/transform` and `istanbul-lib-instrument` depend on `@babel/core` 7 outright, and a babel 8
preset loaded into a babel 7 core fails on the first `enum` it meets. The `pnpm.overrides` entry in
`frontend/package.json` is what stops that. `eslint-config-preact` is the one consumer that cannot
take it: its `@babel/eslint-parser` loads babel 7 syntax plugins that babel 8 rejects, so a second
scoped override, `eslint-config-preact>@babel/core`, holds that subtree on 7.
## Held-back majors
These were deliberately not bumped because each is a config-migration or bundle-changing major, not a drop-in update — don't bump them opportunistically inside an unrelated dependency PR:
- `eslint` 8 (9/10 need flat-config migration), `stylelint` 14 (16 has breaking rule changes), `babel` 7, `jest` 28 (30 needs config changes)
- `eslint` 10 (`eslint-config-preact` peers on ^9), `typescript` 7, `redux` 5 with `redux-thunk` 3, `node-emoji` 2 (renames the field `search()` returns), `@formatjs/cli` 6 (the translation extraction pipeline), and `postcss-preset-env` 11 with `cssnano` 8 and `postcss-html` 2, which change generated CSS
- `redux` 4
## `/web` has a second source
@@ -65,6 +99,18 @@ populated one. These three sit outside this toolchain: prettier, stylelint and `
see them, and they are served unminified. `devServer.static` lists the build output first and that
directory second, matching the backend's order, so links to them resolve on the dev port too.
## eslint config resolves from the process cwd
`eslint.config.mjs` lives in `apps/remark42`, and eslint loads the config next to the directory it
is *run from* rather than the one nearest the file being linted. Anything that invokes eslint has
to have `apps/remark42` as its working directory: the workspace-root `lint` script filters to the
app, `.husky/pre-commit` cd's into it, and an IDE integration needs
`"eslint.workingDirectories": ["frontend/apps/remark42"]`.
Rules that only exist under a plugin's flat-config export are spread in explicitly; the block that
re-enables project rules is the last entry in the array, because `eslint-config-prettier` (pulled in
by `prettierRecommended`) switches several of them off and later entries win.
## Verifying a build didn't regress
There's no automated build-output diff in CI. Before merging a dependency PR that touches the bundler/build tooling, manually diff the build output against a clean `master` checkout:
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';

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