diff --git a/.eslintrc.js b/.eslintrc.js
index e1e212f..233d950 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,6 +7,7 @@ module.exports = {
},
extends: [
'airbnb-base',
+ 'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/typescript',
],
diff --git a/__tests__/index.test.ts b/__tests__/core.test.ts
similarity index 68%
rename from __tests__/index.test.ts
rename to __tests__/core.test.ts
index e3beafc..e85c78b 100644
--- a/__tests__/index.test.ts
+++ b/__tests__/core.test.ts
@@ -1,23 +1,23 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { CCGram } from '../src';
+import { CCgram } from '../src';
import { DEFAULT_FILTERS } from '../src/filters';
describe('Read/Write filter list', (): void => {
- let cg: CCGram | null = null;
+ let cg: CCgram | null = null;
- beforeEach(() => { cg = new CCGram({ init: false }); });
+ beforeEach(() => { cg = new CCgram({ init: false }); });
- test('get filter names list', (): void => {
+ it('should get all filter name', (): void => {
expect(cg!.filterNames).toEqual([...DEFAULT_FILTERS.keys()]);
});
- test('add filter', (): void => {
+ it('should add filter', (): void => {
cg!.setFilter('my-filter', { saturate: 0.8 });
expect(cg!.filterNames).toContain('my-filter');
});
- test('remove filter', (): void => {
+ it('should remove filter', (): void => {
const { filterNames } = cg!;
const targetFilterName = filterNames[Math.floor(Math.random() * (filterNames.length - 1))]!;
@@ -37,22 +37,21 @@ const getTargetImage = (dateAttr = 'filter'): HTMLImageElement | null => (
describe('Apply filter to target Image', () => {
beforeEach(() => { document.body.innerHTML = ''; });
- test('apply filter from init', (): void => {
+ it('should apply CSS filter when init', (): void => {
document.body.innerHTML = `
`;
- const cg = new CCGram();
-
+ const cg = new CCgram();
const { style } = getTargetImage()!;
expect(cg.getFilterStyle(FILTER_NAME)).toBe(style.filter);
});
- test('apply filter use applyFilter method', (): void => {
- const cg = new CCGram({ init: false });
+ it('should apply CSS filter when call applyFilter method', (): void => {
+ const cg = new CCgram({ init: false });
document.body.innerHTML = `
![]()
{
`;
cg.applyFilter();
-
const { style } = getTargetImage()!;
expect(cg.getFilterStyle(FILTER_NAME)).toBe(style.filter);
});
- test('apply filter with customized data attr', (): void => {
+ it(' should apply filter with customized data attr', (): void => {
const DATA_ATTR = 'cg';
document.body.innerHTML = `
@@ -76,8 +74,7 @@ describe('Apply filter to target Image', () => {
data-${DATA_ATTR}="${FILTER_NAME}">
`;
- const cg = new CCGram({ dataAttribute: DATA_ATTR });
-
+ const cg = new CCgram({ dataAttribute: DATA_ATTR });
const { style } = getTargetImage(DATA_ATTR)!;
expect(cg.getFilterStyle(FILTER_NAME)).toBe(style.filter);
@@ -85,7 +82,7 @@ describe('Apply filter to target Image', () => {
});
describe.skip('Access filter image data', () => {
- let cg: CCGram | null = null;
+ let cg: CCgram | null = null;
beforeEach(() => {
document.body.innerHTML = `
@@ -94,22 +91,21 @@ describe.skip('Access filter image data', () => {
data-filter="${FILTER_NAME}">
`;
- cg = new CCGram();
+ cg = new CCgram();
});
- test('use getDataURL method', async (): Promise => {
+ it('should return dataURL when call getDataURL method', async (): Promise => {
const target = getTargetImage()!;
-
const dataURL = await cg!.getDataURL(target, { quality: 0.8 });
- expect(dataURL).toBeTruthy();
+ const regEx = /data:([\w/+]+);(charset=[\w-]+|base64).*,([a-zA-Z0-9+/]+={0,2})/;
+ expect(regEx.test(dataURL!)).toBe(true);
});
- test('use getBlob method', async (): Promise => {
+ test('should return blob when call getBlob method', async (): Promise => {
const target = getTargetImage()!;
-
const blob = await cg!.getBlob(target, { quality: 0.8 });
- expect(blob).toBeTruthy();
+ expect(blob instanceof Blob).toBe(true);
});
});
diff --git a/demo/config/webpack.config.js b/demo/config/webpack.config.js
index 4f92cd4..121610a 100644
--- a/demo/config/webpack.config.js
+++ b/demo/config/webpack.config.js
@@ -1,5 +1,10 @@
+/* eslint-disable lines-around-directive */
+
+// eslint-disable-next-line strict
'use strict';
+/* eslint-disable global-require */
+/* eslint-disable @typescript-eslint/no-var-requires */
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
@@ -16,17 +21,18 @@ const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+// const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const postcssNormalize = require('postcss-normalize');
+const getClientEnvironment = require('./env');
+const modules = require('./modules');
+const paths = require('./paths');
+// eslint-disable-next-line import/no-dynamic-require
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -36,7 +42,8 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const imageInlineSizeLimit = parseInt(
- process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+ process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
+ 10,
);
// Check if TypeScript is setup
@@ -50,14 +57,13 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
- const isEnvProductionProfile =
- isEnvProduction && process.argv.includes('--profile');
+ const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
@@ -129,7 +135,7 @@ module.exports = function(webpackEnv) {
options: {
sourceMap: true,
},
- }
+ },
);
}
return loaders;
@@ -139,6 +145,7 @@ module.exports = function(webpackEnv) {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
+ // eslint-disable-next-line no-nested-ternary
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
@@ -157,8 +164,8 @@ module.exports = function(webpackEnv) {
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
- isEnvDevelopment &&
- require.resolve('react-dev-utils/webpackHotDevClient'),
+ isEnvDevelopment
+ && require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
@@ -183,15 +190,14 @@ module.exports = function(webpackEnv) {
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
- publicPath: publicPath,
+ publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
- ? info =>
- path
- .relative(paths.appSrc, info.absoluteResourcePath)
- .replace(/\\/g, '/')
- : isEnvDevelopment &&
- (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+ ? (info) => path
+ .relative(paths.appSrc, info.absoluteResourcePath)
+ .replace(/\\/g, '/')
+ : isEnvDevelopment
+ && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple Webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
@@ -249,13 +255,13 @@ module.exports = function(webpackEnv) {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
- // `inline: false` forces the sourcemap to be output into a
- // separate file
- inline: false,
- // `annotation: true` appends the sourceMappingURL to the end of
- // the css file, helping the browser find the sourcemap
- annotation: true,
- }
+ // `inline: false` forces the sourcemap to be output into a
+ // separate file
+ inline: false,
+ // `annotation: true` appends the sourceMappingURL to the end of
+ // the css file, helping the browser find the sourcemap
+ annotation: true,
+ }
: false,
},
}),
@@ -271,7 +277,7 @@ module.exports = function(webpackEnv) {
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
- name: entrypoint => `runtime-${entrypoint.name}`,
+ name: (entrypoint) => `runtime-${entrypoint.name}`,
},
},
resolve: {
@@ -280,7 +286,7 @@ module.exports = function(webpackEnv) {
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
- modules.additionalModulePaths || []
+ modules.additionalModulePaths || [],
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
@@ -289,8 +295,8 @@ module.exports = function(webpackEnv) {
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
- .map(ext => `.${ext}`)
- .filter(ext => useTypeScript || !ext.includes('ts')),
+ .map((ext) => `.${ext}`)
+ .filter((ext) => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -311,7 +317,7 @@ module.exports = function(webpackEnv) {
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
- new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+ // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
@@ -339,7 +345,7 @@ module.exports = function(webpackEnv) {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
-
+
},
loader: require.resolve('eslint-loader'),
},
@@ -370,9 +376,9 @@ module.exports = function(webpackEnv) {
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
- 'babel-preset-react-app/webpack-overrides'
+ 'babel-preset-react-app/webpack-overrides',
),
-
+
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
@@ -398,7 +404,7 @@ module.exports = function(webpackEnv) {
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
- test: /\.(js|mjs)$/,
+ test: /\.(js|mjs|ts|tsx)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
@@ -414,7 +420,7 @@ module.exports = function(webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
-
+
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
@@ -465,7 +471,7 @@ module.exports = function(webpackEnv) {
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
- 'sass-loader'
+ 'sass-loader',
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
@@ -485,7 +491,7 @@ module.exports = function(webpackEnv) {
getLocalIdent: getCSSModuleLocalIdent,
},
},
- 'sass-loader'
+ 'sass-loader',
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
@@ -513,36 +519,34 @@ module.exports = function(webpackEnv) {
plugins: [
// Generates an `index.html` file with the