Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename getXXX functions to onXXX #222

Merged
merged 1 commit into from Apr 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
132 changes: 66 additions & 66 deletions README.md

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions src/deprecated.ts
@@ -0,0 +1,22 @@
/*
* Copyright 2020 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

export {onCLS as getCLS} from './onCLS.js';
export {onFCP as getFCP} from './onFCP.js';
export {onFID as getFID} from './onFID.js';
export {onINP as getINP} from './onINP.js';
export {onLCP as getLCP} from './onLCP.js';
export {onTTFB as getTFB} from './onTTFB.js';
13 changes: 7 additions & 6 deletions src/index.ts
Expand Up @@ -14,11 +14,12 @@
* limitations under the License.
*/

export {getCLS} from './getCLS.js';
export {getFCP} from './getFCP.js';
export {getFID} from './getFID.js';
export {getINP} from './getINP.js';
export {getLCP} from './getLCP.js';
export {getTTFB} from './getTTFB.js';
export {onCLS} from './onCLS.js';
export {onFCP} from './onFCP.js';
export {onFID} from './onFID.js';
export {onINP} from './onINP.js';
export {onLCP} from './onLCP.js';
export {onTTFB} from './onTTFB.js';

export * from './deprecated.js';
export * from './types.js';
6 changes: 3 additions & 3 deletions src/getCLS.ts → src/onCLS.ts
Expand Up @@ -19,18 +19,18 @@ import {initMetric} from './lib/initMetric.js';
import {observe} from './lib/observe.js';
import {onHidden} from './lib/onHidden.js';
import {bindReporter} from './lib/bindReporter.js';
import {getFCP} from './getFCP.js';
import {onFCP} from './onFCP.js';
import {LayoutShift, Metric, ReportHandler} from './types.js';


let isMonitoringFCP = false;
let fcpValue = -1;

export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => {
// Start monitoring FCP so we can only report CLS if FCP is also reported.
// Note: this is done to match the current behavior of CrUX.
if (!isMonitoringFCP) {
getFCP((metric) => {
onFCP((metric) => {
fcpValue = metric.value;
});
isMonitoringFCP = true;
Expand Down
2 changes: 1 addition & 1 deletion src/getFCP.ts → src/onFCP.ts
Expand Up @@ -22,7 +22,7 @@ import {observe} from './lib/observe.js';
import {Metric, ReportHandler} from './types.js';


export const getFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
const visibilityWatcher = getVisibilityWatcher();
let metric = initMetric('FCP');
let report: ReturnType<typeof bindReporter>;
Expand Down
2 changes: 1 addition & 1 deletion src/getFID.ts → src/onFID.ts
Expand Up @@ -24,7 +24,7 @@ import {firstInputPolyfill, resetFirstInputPolyfill} from './lib/polyfills/first
import {FirstInputPolyfillCallback, Metric, PerformanceEventTiming, ReportHandler} from './types.js';


export const getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onFID = (onReport: ReportHandler, reportAllChanges?: boolean) => {
const visibilityWatcher = getVisibilityWatcher();
let metric = initMetric('FID');
let report: ReturnType<typeof bindReporter>;
Expand Down
2 changes: 1 addition & 1 deletion src/getINP.ts → src/onINP.ts
Expand Up @@ -104,7 +104,7 @@ const estimateP98LongestInteraction = () => {
return longestInteractionList[candidateInteractionIndex];
}

export const getINP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onINP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
// TODO(philipwalton): remove once the polyfill is no longer needed.
initInteractionCountPolyfill();

Expand Down
2 changes: 1 addition & 1 deletion src/getLCP.ts → src/onLCP.ts
Expand Up @@ -25,7 +25,7 @@ import {Metric, ReportHandler} from './types.js';

const reportedMetricIDs: Record<string, boolean> = {};

export const getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
const visibilityWatcher = getVisibilityWatcher();
let metric = initMetric('LCP');
let report: ReturnType<typeof bindReporter>;
Expand Down
2 changes: 1 addition & 1 deletion src/getTTFB.ts → src/onTTFB.ts
Expand Up @@ -31,7 +31,7 @@ const afterLoad = (callback: () => void) => {
}
}

export const getTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => {
export const onTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => {
let metric = initMetric('TTFB');
let report = bindReporter(onReport, metric, reportAllChanges);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getCLS-test.js → test/e2e/onCLS-test.js
Expand Up @@ -23,7 +23,7 @@ const {stubForwardBack} = require('../utils/stubForwardBack.js');
const {stubVisibilityChange} = require('../utils/stubVisibilityChange.js');


describe('getCLS()', async function() {
describe('onCLS()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getFCP-test.js → test/e2e/onFCP-test.js
Expand Up @@ -20,7 +20,7 @@ const {browserSupportsEntry} = require('../utils/browserSupportsEntry.js');
const {stubForwardBack} = require('../utils/stubForwardBack.js');
const {stubVisibilityChange} = require('../utils/stubVisibilityChange.js');

describe('getFCP()', async function() {
describe('onFCP()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getFID-test.js → test/e2e/onFID-test.js
Expand Up @@ -21,7 +21,7 @@ const {stubForwardBack} = require('../utils/stubForwardBack.js');
const {stubVisibilityChange} = require('../utils/stubVisibilityChange.js');


describe('getFID()', async function() {
describe('onFID()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getINP-test.js → test/e2e/onINP-test.js
Expand Up @@ -21,7 +21,7 @@ const {stubForwardBack} = require('../utils/stubForwardBack.js');
const {stubVisibilityChange} = require('../utils/stubVisibilityChange.js');


describe('getINP()', async function() {
describe('onINP()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getLCP-test.js → test/e2e/onLCP-test.js
Expand Up @@ -22,7 +22,7 @@ const {stubForwardBack} = require('../utils/stubForwardBack.js');
const {stubVisibilityChange} = require('../utils/stubVisibilityChange.js');


describe('getLCP()', async function() {
describe('onLCP()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/getTTFB-test.js → test/e2e/onTTFB-test.js
Expand Up @@ -61,7 +61,7 @@ function assertValidEntry(entry) {
}
}

describe('getTTFB()', async function() {
describe('onTTFB()', async function() {
// Retry all tests in this suite up to 2 times.
this.retries(2);

Expand Down
4 changes: 2 additions & 2 deletions test/views/cls.njk
Expand Up @@ -28,9 +28,9 @@
<p><a id="navigate-away" href="https://example.com">Navigate away</a></p>

<script type="module">
import {getCLS} from '{{ modulePath }}';
import {onCLS} from '{{ modulePath }}';

getCLS((cls) => {
onCLS((cls) => {
// Log for easier manual testing.
console.log(cls);

Expand Down
4 changes: 2 additions & 2 deletions test/views/fcp.njk
Expand Up @@ -25,9 +25,9 @@
<p><a id="navigate-away" href="https://example.com">Navigate away</a></p>

<script type="module">
import {getFCP} from '{{ modulePath }}';
import {onFCP} from '{{ modulePath }}';

getFCP((fcp) => {
onFCP((fcp) => {
// Log for easier manual testing.
console.log(fcp);

Expand Down
4 changes: 2 additions & 2 deletions test/views/fid.njk
Expand Up @@ -24,9 +24,9 @@
<p><a id="navigate-away" href="https://example.com">Navigate away</a></p>

<script type="module">
import {getFID} from '{{ modulePath }}';
import {onFID} from '{{ modulePath }}';

getFID((fid) => {
onFID((fid) => {
// Log for easier manual testing.
console.log(fid);

Expand Down
4 changes: 2 additions & 2 deletions test/views/inp.njk
Expand Up @@ -79,9 +79,9 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec porta orci, ac sagittis augue. Nullam orci tellus, suscipit sed magna id, mattis iaculis ex. Etiam felis lectus, accumsan eu magna lacinia, lobortis tempus lacus. Donec nulla metus, blandit eget ullamcorper in, placerat eu massa. Curabitur vitae elementum orci, ac tincidunt neque. Maecenas accumsan odio sit amet arcu elementum, non vestibulum enim finibus. Phasellus malesuada lacinia suscipit. Cras ac gravida urna. In et mauris non tellus pretium ultrices. Fusce mattis a risus at tincidunt. Donec ac fringilla magna, nec suscipit lectus. Sed risus massa, rutrum ut leo quis, tempor dapibus dui. Proin in mauris non risus maximus tincidunt quis a mauris.</p>

<script type="module">
import {getINP} from '{{ modulePath }}';
import {onINP} from '{{ modulePath }}';

getINP((inp) => {
onINP((inp) => {
// Log for easier manual testing.
console.log(inp);

Expand Down
4 changes: 2 additions & 2 deletions test/views/lcp.njk
Expand Up @@ -32,9 +32,9 @@
<footer>Text below the full-height element.</footer>

<script type="module">
import {getLCP} from '{{ modulePath }}';
import {onLCP} from '{{ modulePath }}';

getLCP((lcp) => {
onLCP((lcp) => {
// Log for easier manual testing.
console.log(lcp);

Expand Down
4 changes: 2 additions & 2 deletions test/views/ttfb.njk
Expand Up @@ -25,14 +25,14 @@
<p><a id="navigate-away" href="https://example.com">Navigate away</a></p>

<script type="module">
import {getTTFB} from '{{ modulePath }}';
import {onTTFB} from '{{ modulePath }}';

(async function() {
{% if awaitLoad %}
await new Promise((resolve) => addEventListener('load', resolve));
{% endif %}

getTTFB((ttfb) => {
onTTFB((ttfb) => {
// Log for easier manual testing.
console.log(ttfb);

Expand Down