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

Cleanup embed.ts and add limit-size checker (#601)

Browse Source 
* Cleanup embed.ts and add limit-size checker

* add  size limit for dist files

* check only size of files
This commit is contained in:
Konstantin Krivlenia
2020-02-19 16:08:35 -06:00
committed by GitHub
parent 11327cee5b
commit 390ecbe8d9
9 changed files with 553 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/ci-test-frontend.yml
+3
View File
@@ -26,3 +26,6 @@ jobs:
- run: npx run-p check lint lint:style test
working-directory: ./frontend
- run: npm run size
working-directory: ./frontend
frontend/.eslintignore
+1
View File
@@ -5,3 +5,4 @@ public
!.babelrc.js
!.lintstagedrc.js
!.stylelintrc.js
!.size-limit.js
frontend/.size-limit.js
+22
View File
@@ -0,0 +1,22 @@
module.exports = [
{
path: 'public/embed.js',
limit: '2.5 KB',
},
{
limit: '92 KB',
path: 'public/remark.js',
},
{
limit: '77 KB',
path: 'public/last-comments.js',
},
{
path: 'public/deleteme.js',
limit: '32 KB',
},
{
path: 'public/counter.js',
limit: '32.5 KB',
},
];
frontend/app/common/constants.config.ts
+5
View File
@@ -0,0 +1,5 @@
export const BASE_URL: string =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
((window as any).remark_config && (window as any).remark_config.host) || process.env.REMARK_URL!;
export const NODE_ID: string = process.env.REMARK_NODE!;
export const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
frontend/app/common/constants.ts
+4 -5
View File
@@ -1,12 +1,11 @@
import { Sorting, AuthProvider, BlockingDuration, Theme } from './types';
import * as configConstant from './constants.config';
export const BASE_URL: string =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
((window as any).remark_config && (window as any).remark_config.host) || process.env.REMARK_URL!;
export const BASE_URL = configConstant.BASE_URL;
export const API_BASE = '/api/v1';
export const NODE_ID: string = process.env.REMARK_NODE!;
export const NODE_ID = configConstant.NODE_ID;
export const COUNTER_NODE_CLASSNAME = 'remark42__counter';
export const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
export const COMMENT_NODE_CLASSNAME_PREFIX = configConstant.COMMENT_NODE_CLASSNAME_PREFIX;
export const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
export const DEFAULT_LAST_COMMENTS_MAX = 15;
export const DEFAULT_MAX_COMMENT_SIZE = 1000;
frontend/app/embed.ts
+10 -9
View File
@@ -1,9 +1,7 @@
/* eslint-disable no-console, @typescript-eslint/no-explicit-any */
declare let remark_config: CommentsConfig;
import loadPolyfills from '@app/common/polyfills';
import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from '@app/common/constants';
import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from '@app/common/constants.config';
import { UserInfo, Theme } from '@app/common/types';
import { CommentsConfig } from '@app/common/config-types';
@@ -15,10 +13,13 @@ if (document.readyState === 'loading') {
init();
}
async function init(): Promise<void> {
__webpack_public_path__ = HOST + '/web/';
await loadPolyfills();
function removeDomNode(node: HTMLElement | null) {
if (node && node.parentNode) {
node.parentNode.removeChild(node);
}
}
function init(): void {
const node = document.getElementById(remark_config.node || NODE_ID);
if (!node) {
@@ -238,9 +239,9 @@ async function init(): Promise<void> {
},
remove() {
const t = userInfo;
t.node && t.node.remove();
t.back && t.back.remove();
t.style && t.style.remove();
removeDomNode(t.node);
removeDomNode(t.back);
removeDomNode(t.style);
},
};
frontend/package-lock.json
Generated
+448 -140
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+4 -1
View File
@@ -9,7 +9,8 @@
"lint:style": "stylelint \"**/*.scss\" \"**/*.pcss\" \"**/*.css\" \"iframe.html\"",
"test": "jest",
"test:coverage": "jest --coverage",
"prettier": "prettier --write \"./**/*.{js,jsx,ts,tsx,scss}\""
"prettier": "prettier --write \"./**/*.{js,jsx,ts,tsx,scss}\"",
"size": "NODE_ENV=production npm run build && size-limit"
},
"husky": {
"hooks": {
@@ -24,6 +25,7 @@
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@size-limit/file": "^4.0.1",
"@types/cheerio": "^0.22.13",
"@types/core-js": "^2.5.2",
"@types/enzyme": "^3.10.4",
@@ -76,6 +78,7 @@
"postcss-wrap": "0.0.4",
"prettier": "^1.19.1",
"redux-mock-store": "^1.5.3",
"size-limit": "^4.0.1",
"style-loader": "^1.0.0",
"stylelint": "^13.1.0",
"stylelint-config-prettier": "^8.0.1",
frontend/webpack.config.js
+56 -39
View File
@@ -85,50 +85,67 @@ module.exports = () => ({
module: {
rules: [
{
test: /\.js(x?)$/,
use: [{ loader: 'babel-loader', options: { configFile: babelConfigPath } }],
...getExcluded(),
},
{
test: /\.ts(x?)$/,
use: [{ loader: 'babel-loader', options: { configFile: babelConfigPath } }, 'ts-loader'],
...getExcluded(),
},
{
test: /\.s?css$/,
use: [
oneOf: [
{
loader: MiniCssExtractPlugin.loader,
},
...commonStyleLoaders,
],
},
{
test: /\.module\.pcss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: {
mode: `local`,
localIdentName: `${NODE_ID}__[name]__[local]`,
include: [path.resolve(__dirname, './app/embed.ts')],
use: {
loader: 'ts-loader',
options: {
compilerOptions: {
lib: ['es5', 'dom'],
target: 'es5',
downlevelIteration: true,
},
},
},
},
postCssLoader(false),
],
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: `files/[name].[hash].[ext]`,
{
test: /\.js(x?)$/,
use: [{ loader: 'babel-loader', options: { configFile: babelConfigPath } }],
...getExcluded(),
},
},
{
test: /\.ts(x?)$/,
use: [{ loader: 'babel-loader', options: { configFile: babelConfigPath } }, 'ts-loader'],
...getExcluded(),
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
...commonStyleLoaders,
],
},
{
test: /\.module\.pcss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: {
mode: `local`,
localIdentName: `${NODE_ID}__[name]__[local]`,
},
},
},
postCssLoader(false),
],
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: `files/[name].[hash].[ext]`,
},
},
},
],
},
],
},