Skip to content

Commit fdbde25

Browse files
alexfiglioliaalexfigliolia
committed
Upload
0 parents  commit fdbde25

11 files changed

+2504
-0
lines changed

‎.eslintrc.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
es2021: true
6+
},
7+
ignorePatterns: ["node_modules", ".eslintrc.js", "dist"],
8+
extends: [
9+
"eslint:recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"eslint:recommended",
12+
"prettier",
13+
"plugin:@typescript-eslint/recommended-requiring-type-checking",
14+
],
15+
overrides: [
16+
{
17+
files: ["**/*.jsx", "**/*.js", "**/*.ts", "**/*.tsx"],
18+
},
19+
],
20+
parser: "@typescript-eslint/parser",
21+
parserOptions: {
22+
ecmaVersion: 12,
23+
sourceType: "module",
24+
tsconfigRootDir: __dirname,
25+
project: "./tsconfig.json",
26+
ecmaFeatures: {
27+
jsx: true,
28+
},
29+
},
30+
plugins: ["react", "plugin:react-hooks/recommended", "simple-import-sort", "@typescript-eslint", "prettier", "unused-imports"],
31+
rules: {
32+
"radix": 0,
33+
"no-new": 0,
34+
"no-void": 0,
35+
"no-shadow": 0,
36+
"no-bitwise": 0,
37+
"no-unused-vars": 0,
38+
"prettier/prettier": ["error"],
39+
"linebreak-style": ["error", "unix"],
40+
"no-prototype-builtins": 0,
41+
"prefer-rest-params": 0,
42+
"no-mixed-spaces-and-tabs": 0,
43+
"react/react-in-jsx-scope": "off",
44+
"react/jsx-uses-vars": 2,
45+
"unused-imports/no-unused-imports-ts": 2,
46+
"@typescript-eslint/unbound-method": 0,
47+
"@typescript-eslint/no-unsafe-argument": 0,
48+
"@typescript-eslint/no-unsafe-return": 0,
49+
"@typescript-eslint/no-non-null-assertion": 0,
50+
"@typescript-eslint/no-empty-function": 0,
51+
"@typescript-eslint/ban-ts-comment": 0,
52+
"@typescript-eslint/no-var-requires": 0,
53+
"eslint-comments/no-unlimited-disable": 0,
54+
"@typescript-eslint/explicit-module-boundary-types": 0,
55+
"@typescript-eslint/no-explicit-any": 0,
56+
"@typescript-eslint/no-unsafe-call": 0,
57+
"@typescript-eslint/no-unused-vars": 0,
58+
"@typescript-eslint/no-shadow": 0,
59+
"@typescript-eslint/no-unused-vars": "off",
60+
"@typescript-eslint/no-unnecessary-type-constraint": 0,
61+
"@typescript-eslint/restrict-plus-operands": 0,
62+
"@typescript-eslint/no-unsafe-assignment": 0,
63+
"@typescript-eslint/restrict-plus-operands": 2,
64+
"@typescript-eslint/consistent-type-imports": "error",
65+
"@typescript-eslint/no-unsafe-member-access": 0,
66+
"@typescript-eslint/no-floating-promises": [
67+
"error",
68+
{ ignoreVoid: true, ignoreIIFE: true },
69+
],
70+
},
71+
};

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

‎.pretterrc.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
tabWidth: 2,
3+
printWidth: 80,
4+
arrowParens: 'avoid',
5+
bracketSameLine: true,
6+
bracketSpacing: true,
7+
singleQuote: false,
8+
trailingComma: 'all',
9+
};

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎package.json

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"name": "@figliolia/react-metrics",
3+
"version": "1.0.0",
4+
"description": "React bindings for @figliolia/metrics",
5+
"main": "dist/index.js",
6+
"types": "dist/index.d.ts",
7+
"files": [
8+
"dist",
9+
"src/*"
10+
],
11+
"scripts": {
12+
"test": "jest",
13+
"build": "rm -rf dist && tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
14+
"lint": "tsc --noemit && eslint ./ --fix"
15+
},
16+
"homepage": "https://github.com/alexfigliolia/react-metrics#readme",
17+
"repository": {
18+
"type": "git",
19+
"url": "git+https://github.com/alexfigliolia/react-metrics.git"
20+
},
21+
"keywords": [
22+
"performance",
23+
"metrics",
24+
"monitoring",
25+
"CLS",
26+
"interactions",
27+
"reliability",
28+
"critical assets",
29+
"frontend",
30+
"developer tooling",
31+
"Logging",
32+
"Page Load",
33+
"Reporting"
34+
],
35+
"author": "Alex Figliolia",
36+
"license": "MIT",
37+
"dependencies": {
38+
"@figliolia/metrics": "^1.0.0"
39+
},
40+
"devDependencies": {
41+
"@types/node": "^16.7.13",
42+
"@types/react": "^18.2.9",
43+
"@typescript-eslint/eslint-plugin": "^5.59.1",
44+
"@typescript-eslint/parser": "^5.59.1",
45+
"eslint": "^8.39.0",
46+
"eslint-config-airbnb": "^19.0.4",
47+
"eslint-config-airbnb-typescript": "^17.0.0",
48+
"eslint-config-prettier": "^8.8.0",
49+
"eslint-import-resolver-typescript": "^3.5.5",
50+
"eslint-plugin-import": "^2.27.5",
51+
"eslint-plugin-prettier": "^4.2.1",
52+
"eslint-plugin-react": "^7.32.2",
53+
"eslint-plugin-react-hooks": "^4.6.0",
54+
"eslint-plugin-simple-import-sort": "^10.0.0",
55+
"eslint-plugin-unused-imports": "^2.0.0",
56+
"prettier": "^2.8.8",
57+
"ts-node": "^10.9.1",
58+
"tsc-alias": "^1.8.6",
59+
"typescript": "^4.4.2"
60+
},
61+
"peerDependencies": {
62+
"react": "^18.2.0"
63+
},
64+
"publishConfig": {
65+
"access": "public"
66+
}
67+
}

‎src/StartMetric.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { useEffect, type FC } from "react";
2+
import type { Metric } from "@figliolia/metrics";
3+
4+
/**
5+
* Start Metric
6+
*
7+
* A React Component that will call the `start()` method on the
8+
* specified `Metric` as soon as it mounts
9+
*
10+
* ```tsx
11+
* import { Metric } from "@figliolia/metrics";
12+
* import { StartMetric, StopMetric } from "@figliolia/react-metrics"
13+
*
14+
* const MyMetric = new Metric("My Metric");
15+
*
16+
* export const MyComponent = () => {
17+
* const [data, setData] = useState(null);
18+
* useEffect(() => {
19+
* fetch("/data").then(async data => {
20+
* setData(await data.json());
21+
* });
22+
* return () => {
23+
* MyMetric.reset();
24+
* }
25+
* }, []);
26+
*
27+
* if(!data) {
28+
* return (
29+
* <StartMetric metric={MyMetric}> // Calls your Metric's start() method on mount
30+
* <Spinner />
31+
* );
32+
* }
33+
*
34+
* return (
35+
* <MyComponentUI data={data} />
36+
* <StopMetric metric={MyMetric} />
37+
* );
38+
* }
39+
* ```
40+
*/
41+
export const StartMetric: FC<{ metric: Metric }> = ({ metric }) => {
42+
useEffect(() => {
43+
metric.start();
44+
}, [])
45+
return null;
46+
}

‎src/StopMetric.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { useEffect, type FC } from "react";
2+
import type { Metric } from "@figliolia/metrics";
3+
4+
/**
5+
* Stop Metric
6+
*
7+
* A React Component that will call the `stop()` method on the
8+
* specified `Metric` as soon as it mounts
9+
*
10+
* ```tsx
11+
* import { Metric } from "@figliolia/metrics";
12+
* import { StopMetric } from "@figliolia/react-metrics"
13+
*
14+
* const MyMetric = new Metric("My Metric");
15+
*
16+
* export const MyComponent = () => {
17+
* const [data, setData] = useState(null);
18+
* useEffect(() => {
19+
* MyMetric.start();
20+
* fetch("/data").then(async data => {
21+
* setData(await data.json());
22+
* });
23+
* return () => {
24+
* MyMetric.reset();
25+
* }
26+
* }, []);
27+
*
28+
* if(!data) {
29+
* return <Spinner />
30+
* }
31+
*
32+
* return (
33+
* <MyComponentUI data={data} />
34+
* <StopMetric metric={MyMetric} /> // Calls your Metric's stop() method on mount
35+
* );
36+
* }
37+
* ```
38+
*/
39+
export const StopMetric: FC<{ metric: Metric }> = ({ metric }) => {
40+
useEffect(() => {
41+
metric.stop();
42+
}, [])
43+
return null;
44+
}

‎src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { StopMetric } from './StopMetric';
2+
export { StartMetric } from './StartMetric'

‎tsconfig.build.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"compilerOptions": {
3+
"noEmit": false,
4+
"outDir": "dist",
5+
"declaration": true,
6+
"lib": [
7+
"dom",
8+
"dom.iterable",
9+
"esnext",
10+
],
11+
"target": "ES2015",
12+
"module": "commonjs",
13+
"jsx": "react-jsx",
14+
"isolatedModules": true,
15+
"strict": true,
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"allowSyntheticDefaultImports": true,
19+
"forceConsistentCasingInFileNames": true,
20+
"esModuleInterop": true,
21+
"skipLibCheck": true,
22+
"baseUrl": "./src",
23+
"paths": {}
24+
},
25+
"include": [
26+
"src"
27+
],
28+
}

‎tsconfig.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"ts-node": {
3+
"compilerOptions": {
4+
"module": "commonjs"
5+
}
6+
},
7+
"compilerOptions": {
8+
"target": "ES2015",
9+
"lib": [
10+
"dom",
11+
"dom.iterable",
12+
"esnext"
13+
],
14+
"allowJs": true,
15+
"skipLibCheck": true,
16+
"jsx": "react-jsx",
17+
"esModuleInterop": true,
18+
"allowSyntheticDefaultImports": true,
19+
"strict": true,
20+
"forceConsistentCasingInFileNames": true,
21+
"noFallthroughCasesInSwitch": true,
22+
"module": "esnext",
23+
"moduleResolution": "node",
24+
"resolveJsonModule": true,
25+
"isolatedModules": true,
26+
"noEmit": true,
27+
"baseUrl": "./src",
28+
"paths": {}
29+
},
30+
"include": [
31+
"src"
32+
]
33+
}

0 commit comments

Comments
 (0)