From a5acf8e0a16e250127d90a34a09b488bffa1a433 Mon Sep 17 00:00:00 2001 From: Trent Mick Date: Thu, 26 Jun 2025 12:11:25 -0700 Subject: [PATCH] chore(examples): lint examples/react-load using shared top-level eslint config Refs: https://github.com/open-telemetry/opentelemetry-js-contrib/issues/2891 --- examples/react-load/preact/.eslintrc.js | 26 +++++++ examples/react-load/preact/.npmrc | 1 + examples/react-load/preact/package.json | 3 + .../preact/src/components/Content.js | 73 +++++++++++-------- .../react-load/preact/src/components/Home.js | 29 ++++++-- .../react-load/preact/src/components/app.js | 55 +++++++++----- examples/react-load/preact/src/index.js | 18 +++++ examples/react-load/preact/src/sw.js | 18 +++++ examples/react-load/preact/src/web-tracer.js | 29 +++++++- examples/react-load/react/.eslintrc.js | 26 +++++++ examples/react-load/react/.npmrc | 1 + examples/react-load/react/package.json | 3 + examples/react-load/react/src/web-tracer.js | 33 +++++++-- 13 files changed, 251 insertions(+), 64 deletions(-) create mode 100644 examples/react-load/preact/.eslintrc.js create mode 100644 examples/react-load/preact/.npmrc create mode 100644 examples/react-load/react/.eslintrc.js create mode 100644 examples/react-load/react/.npmrc diff --git a/examples/react-load/preact/.eslintrc.js b/examples/react-load/preact/.eslintrc.js new file mode 100644 index 0000000000..cc27325c72 --- /dev/null +++ b/examples/react-load/preact/.eslintrc.js @@ -0,0 +1,26 @@ +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +const baseConfig = require('../../../eslint.config'); + +module.exports = { + ...baseConfig, + env: { + browser: true, + }, +}; diff --git a/examples/react-load/preact/.npmrc b/examples/react-load/preact/.npmrc new file mode 100644 index 0000000000..43c97e719a --- /dev/null +++ b/examples/react-load/preact/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/examples/react-load/preact/package.json b/examples/react-load/preact/package.json index 4d72912152..15e51392ec 100644 --- a/examples/react-load/preact/package.json +++ b/examples/react-load/preact/package.json @@ -5,6 +5,8 @@ "description": "Example of using @opentelemetry/plugin-react-load in browser with Preact", "main": "index.js", "scripts": { + "lint": "eslint . --ext=ts,js,mjs", + "lint:fix": "eslint . --ext=ts,js,mjs --fix", "build": "preact build --no-prerender", "docker:start": "cd ./docker && docker-compose down && docker-compose up", "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d", @@ -36,6 +38,7 @@ "sirv-cli": "1.0.3" }, "dependencies": { + "@opentelemetry/api": "^1.0.0", "@opentelemetry/context-zone": "^1.11.0", "@opentelemetry/exporter-trace-otlp-http": "^0.37.0", "@opentelemetry/plugin-react-load": "^0.28.1", diff --git a/examples/react-load/preact/src/components/Content.js b/examples/react-load/preact/src/components/Content.js index afd4d72c5f..13357c758f 100644 --- a/examples/react-load/preact/src/components/Content.js +++ b/examples/react-load/preact/src/components/Content.js @@ -1,59 +1,72 @@ -import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load' +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load'; class Content extends BaseOpenTelemetryComponent { - constructor(props){ - super(props) + constructor(props) { + super(props); this.state = { results: null, - isLoading: false - } + isLoading: false, + }; } - componentDidMount(){ + // eslint-disable-next-line class-methods-use-this + componentDidMount() { // Example, do something here } buttonHandler() { - this.setState({isLoading: true}) - const randomDelay = Math.random() * 10000; + this.setState({ isLoading: true }); + const randomDelay = Math.random() * 10000; setTimeout(() => { this.setState({ isLoading: false, - results: randomDelay - }) - }, - randomDelay); + results: randomDelay, + }); + }, randomDelay); } - renderResults(){ - if(this.state.isLoading){ + renderResults() { + if (this.state.isLoading) { return
Loading results...
; - } - if (!this.state.results){ - return ( -
No Results
- ) } - return ( -
- Request was delayed {this.state.results} ms -
- ) + if (!this.state.results) { + return
No Results
; + } + return
Request was delayed {this.state.results} ms
; } render() { return (

React Plugin Demo App

- -
- {this.renderResults()} -
+
{this.renderResults()}
- ) + ); } } - + export default Content; diff --git a/examples/react-load/preact/src/components/Home.js b/examples/react-load/preact/src/components/Home.js index fbf78e6677..6789351ba8 100644 --- a/examples/react-load/preact/src/components/Home.js +++ b/examples/react-load/preact/src/components/Home.js @@ -1,16 +1,35 @@ +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + import { Link } from 'preact-router/match'; import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load'; class Home extends BaseOpenTelemetryComponent { + // eslint-disable-next-line class-methods-use-this render() { return (
-

- React Plugin Demo App: Preact -

- +

React Plugin Demo App: Preact

+ + +
- ) + ); } } diff --git a/examples/react-load/preact/src/components/app.js b/examples/react-load/preact/src/components/app.js index a240496437..7a7e9420ec 100644 --- a/examples/react-load/preact/src/components/app.js +++ b/examples/react-load/preact/src/components/app.js @@ -1,4 +1,22 @@ -import { h, Component} from 'preact'; +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +import { Component } from 'preact'; import { Router } from 'preact-router'; import Home from './Home'; import Content from './Content'; @@ -7,23 +25,22 @@ import Tracer from '../web-tracer'; Tracer('react-load-preact-examples'); export default class App extends Component { - - /** Gets fired when the route changes. - * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) - * @param {string} event.url The newly routed URL - */ - handleRoute = e => { - this.currentUrl = e.url; - }; + /** Gets fired when the route changes. + * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) + * @param {string} event.url The newly routed URL + */ + handleRoute = e => { + this.currentUrl = e.url; + }; - render() { - return ( -
- - - - -
- ); - } + render() { + return ( +
+ + + + +
+ ); + } } diff --git a/examples/react-load/preact/src/index.js b/examples/react-load/preact/src/index.js index a2f7b30f88..dea915dc8b 100644 --- a/examples/react-load/preact/src/index.js +++ b/examples/react-load/preact/src/index.js @@ -1,3 +1,21 @@ +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + import App from './components/app'; export default App; diff --git a/examples/react-load/preact/src/sw.js b/examples/react-load/preact/src/sw.js index 146aa01dd9..76f52e9639 100644 --- a/examples/react-load/preact/src/sw.js +++ b/examples/react-load/preact/src/sw.js @@ -1,3 +1,21 @@ +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/'; setupRouting(); diff --git a/examples/react-load/preact/src/web-tracer.js b/examples/react-load/preact/src/web-tracer.js index f974a91b96..ecd27dd5a6 100644 --- a/examples/react-load/preact/src/web-tracer.js +++ b/examples/react-load/preact/src/web-tracer.js @@ -1,11 +1,32 @@ -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +import { + ConsoleSpanExporter, + SimpleSpanProcessor, +} from '@opentelemetry/sdk-trace-base'; import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; -export default (serviceName) => { +export default serviceName => { diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG); const exporter = new OTLPTraceExporter({ url: 'http://localhost:4318/v1/traces', @@ -23,7 +44,7 @@ export default (serviceName) => { const tracer = provider.getTracer(serviceName); - BaseOpenTelemetryComponent.setTracer(serviceName) + BaseOpenTelemetryComponent.setTracer(serviceName); return tracer; -} +}; diff --git a/examples/react-load/react/.eslintrc.js b/examples/react-load/react/.eslintrc.js new file mode 100644 index 0000000000..cc27325c72 --- /dev/null +++ b/examples/react-load/react/.eslintrc.js @@ -0,0 +1,26 @@ +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +const baseConfig = require('../../../eslint.config'); + +module.exports = { + ...baseConfig, + env: { + browser: true, + }, +}; diff --git a/examples/react-load/react/.npmrc b/examples/react-load/react/.npmrc new file mode 100644 index 0000000000..43c97e719a --- /dev/null +++ b/examples/react-load/react/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/examples/react-load/react/package.json b/examples/react-load/react/package.json index c6fb74216c..9d1061af80 100644 --- a/examples/react-load/react/package.json +++ b/examples/react-load/react/package.json @@ -5,6 +5,8 @@ "description": "Example of using @opentelemetry/plugin-react-load in browser with React", "main": "index.jsx", "scripts": { + "lint": "eslint . --ext=ts,js,mjs", + "lint:fix": "eslint . --ext=ts,js,mjs --fix", "build": "react-scripts build", "dev": "react-scripts start", "docker:start": "cd ./docker && docker-compose down && docker-compose up", @@ -41,6 +43,7 @@ "@opentelemetry/core": "^0.25.0", "@opentelemetry/exporter-collector": "^0.25.0", "@opentelemetry/plugin-react-load": "^0.23.0", + "@opentelemetry/resources": "^0.25.0", "@opentelemetry/sdk-trace-base": "^0.25.0", "@opentelemetry/sdk-trace-web": "^0.25.0", "@opentelemetry/semantic-conventions": "^1.27.0", diff --git a/examples/react-load/react/src/web-tracer.js b/examples/react-load/react/src/web-tracer.js index 80c2f29ba1..9453ad4c73 100644 --- a/examples/react-load/react/src/web-tracer.js +++ b/examples/react-load/react/src/web-tracer.js @@ -1,20 +1,41 @@ -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +/* + * Copyright The OpenTelemetry Authors + * + * 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. + */ + +'use strict'; + +import { + ConsoleSpanExporter, + SimpleSpanProcessor, +} from '@opentelemetry/sdk-trace-base'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { CollectorTraceExporter } from '@opentelemetry/exporter-collector'; import { diag, DiagConsoleLogger } from '@opentelemetry/api'; import { Resource } from '@opentelemetry/resources'; -import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions' +import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'; -export default (serviceName) => { +export default serviceName => { const exporter = new CollectorTraceExporter({ url: 'http://localhost:55678/v1/trace', }); const provider = new WebTracerProvider({ resource: new Resource({ - [ATTR_SERVICE_NAME]: "react-load-example" + [ATTR_SERVICE_NAME]: 'react-load-example', }), spanProcessors: [ new SimpleSpanProcessor(new ConsoleSpanExporter()), @@ -28,8 +49,8 @@ export default (serviceName) => { const tracer = provider.getTracer(serviceName); - BaseOpenTelemetryComponent.setTracer(serviceName) + BaseOpenTelemetryComponent.setTracer(serviceName); diag.setLogger(new DiagConsoleLogger()); return tracer; -} +};