From 1a1a83d49e88179c9b321730d1a1ceae8d12cb62 Mon Sep 17 00:00:00 2001 From: Emmanuel Chambon Date: Thu, 29 Sep 2022 00:02:20 +0200 Subject: [PATCH 1/2] feat: introduce outdated-browser --- README.md | 6 ++ packages/outdated-browser/.npmignore | 3 + packages/outdated-browser/README.md | 40 ++++++++++ packages/outdated-browser/package.json | 21 +++++ .../src/__tests__/__snapshots__/index.ts.snap | 68 ++++++++++++++++ .../outdated-browser/src/__tests__/index.ts | 54 +++++++++++++ packages/outdated-browser/src/index.ts | 78 +++++++++++++++++++ 7 files changed, 270 insertions(+) create mode 100644 packages/outdated-browser/.npmignore create mode 100644 packages/outdated-browser/README.md create mode 100644 packages/outdated-browser/package.json create mode 100644 packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap create mode 100644 packages/outdated-browser/src/__tests__/index.ts create mode 100644 packages/outdated-browser/src/index.ts diff --git a/README.md b/README.md index 029c2873b..26b35a658 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,12 @@ scaleway-lib is a set of NPM packages used at Scaleway. ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/jest-helpers) ![npm](https://img.shields.io/npm/v/@scaleway/jest-helpers) +- [`@scaleway/outdated-browser`](./packages/outdated-browser/README.md): A small web script to display outdated banne + + ![npm](https://img.shields.io/npm/dm/@scaleway/outdated-browser) + ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/outdated-browser) + ![npm](https://img.shields.io/npm/v/@scaleway/outdated-browser) + ## Development ### Locally diff --git a/packages/outdated-browser/.npmignore b/packages/outdated-browser/.npmignore new file mode 100644 index 000000000..d1811b877 --- /dev/null +++ b/packages/outdated-browser/.npmignore @@ -0,0 +1,3 @@ +**/__tests__/** +src +!.npmignore diff --git a/packages/outdated-browser/README.md b/packages/outdated-browser/README.md new file mode 100644 index 000000000..45cd113f3 --- /dev/null +++ b/packages/outdated-browser/README.md @@ -0,0 +1,40 @@ +# `@scaleway/outdated-browser` + +A small web script to display outdated banner + +--- + +## Install + +```bash +$ pnpm add @scaleway/outdated-browser +``` + +## Usage + +This package is intended to be used in tandem with a bundler +Only one parameter is required, a regex of accepted browser user agents + +Example with webpack: +```js +import { getUserAgentRegExp } from 'browserslist-useragent-regexp' + +const SUPPORTED_BROWSERS = getUserAgentRegExp({ + browsers: '> 1%, last 2 versions, Firefox ESR, not IE > 0, not IE_Mob > 0', + allowHigherVersions: true, + ignoreMinor: true, + ignorePatch: true, +}).toString() + +export default { + entry: { + outdated: '@scaleway/outdated-browser', + main: './src/index.tsx', + }, + plugins: [ + new webpack.DefinePlugin({ + SUPPORTED_BROWSERS, + }), + ], +} +``` diff --git a/packages/outdated-browser/package.json b/packages/outdated-browser/package.json new file mode 100644 index 000000000..dd1617966 --- /dev/null +++ b/packages/outdated-browser/package.json @@ -0,0 +1,21 @@ +{ + "name": "@scaleway/outdated-browser", + "version": "1.0.0", + "description": "A small web script to display outdated banner", + "type": "module", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "browser": { + "dist/index.js": "./dist/index.browser.js" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/scaleway/scaleway-lib", + "directory": "packages/outdated-browser" + }, + "license": "MIT" +} diff --git a/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap b/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap new file mode 100644 index 000000000..2fd07d13e --- /dev/null +++ b/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen 1`] = ` +"
+ + + + + + +
We are sorry, this app can not be run with an old version of web browser.
+

+ Please update your browser to a more recent version. +

The Scaleway Team

+ Update my browser now + +
" +`; + +exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and match userAgent 1`] = `""`; + +exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is nil 1`] = `""`; diff --git a/packages/outdated-browser/src/__tests__/index.ts b/packages/outdated-browser/src/__tests__/index.ts new file mode 100644 index 000000000..ab3f51478 --- /dev/null +++ b/packages/outdated-browser/src/__tests__/index.ts @@ -0,0 +1,54 @@ +/** + * @jest-environment jsdom + */ + +describe('@outdated-browser', () => { + const originUA = global.navigator.userAgent + let fakeUA: string | undefined + + beforeAll(() => { + Object.defineProperty(global.navigator, 'userAgent', { + get() { + return fakeUA ?? originUA + }, + }) + }) + + afterEach(() => { + jest.resetModules() + jest.restoreAllMocks() + fakeUA = undefined + }) + + test('render nothing if SUPPORTED_BROWSER is nil', () => { + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = '' + + // @ts-expect-error we know it's no a module + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) + + test('render nothing if SUPPORTED_BROWSER is defined and match userAgent ', () => { + fakeUA = 'a' + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = 'a' + + // @ts-expect-error we know it's no a module + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) + + test('render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen ', () => { + fakeUA = 'b' + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = 'a' + + // @ts-expect-error we know it's no a module + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) +}) diff --git a/packages/outdated-browser/src/index.ts b/packages/outdated-browser/src/index.ts new file mode 100644 index 000000000..12c712080 --- /dev/null +++ b/packages/outdated-browser/src/index.ts @@ -0,0 +1,78 @@ +const content = ` + + + + + + +
We are sorry, this app can not be run with an old version of web browser.
+

+ Please update your browser to a more recent version. +

The Scaleway Team

+ Update my browser now + +` + +const style = ` + #outdated { + position: fixed; + z-index: 9999; + width: 100%; + display: flex; + gap: 16px; + background: rgba(242, 86, 72, 0.95); + flex-direction: column; + align-items: center; + text-align: center; + padding: 16px; + color: white; + font-family: 'Open Sans', 'Segoe UI', sans-serif; + } + + #outdated svg { + max-width: 300px; + } + + #outdated a { + color: white; + border: 1px solid white; + border-radius: 4px; + background: transparent; + padding: 10px 20px; + text-decoration: none; + text-transform: uppercase; + transition: all .3s ease-in; + } + + #outdated a:hover { + color: rgb(242, 86, 72); + background: white; + } + + #outdated button { + color: white; + background: transparent; + font-size: 32px; + position: absolute; + border: 0; + right: 60px; + top: 10px; + cursor: pointer; + } +` + +declare const SUPPORTED_BROWSERS: string + +if ( + SUPPORTED_BROWSERS && + !new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent) +) { + const styleElement = document.createElement('style') + styleElement.innerHTML = style + document.head.append(styleElement) + + const element = document.createElement('div') + element.setAttribute('id', 'outdated') + element.innerHTML = content + document.body.prepend(element) +} From 4ff32974b854b524aaeb519c04fe1b3bd51f7195 Mon Sep 17 00:00:00 2001 From: Emmanuel Chambon Date: Thu, 29 Sep 2022 02:03:40 +0200 Subject: [PATCH 2/2] fix: correct type --- packages/outdated-browser/src/__tests__/index.ts | 3 --- packages/outdated-browser/src/index.ts | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/outdated-browser/src/__tests__/index.ts b/packages/outdated-browser/src/__tests__/index.ts index ab3f51478..1d358d701 100644 --- a/packages/outdated-browser/src/__tests__/index.ts +++ b/packages/outdated-browser/src/__tests__/index.ts @@ -24,7 +24,6 @@ describe('@outdated-browser', () => { // @ts-expect-error global mock global.SUPPORTED_BROWSERS = '' - // @ts-expect-error we know it's no a module return import('..').then(() => { expect(document.documentElement.innerHTML).toMatchSnapshot() }) @@ -35,7 +34,6 @@ describe('@outdated-browser', () => { // @ts-expect-error global mock global.SUPPORTED_BROWSERS = 'a' - // @ts-expect-error we know it's no a module return import('..').then(() => { expect(document.documentElement.innerHTML).toMatchSnapshot() }) @@ -46,7 +44,6 @@ describe('@outdated-browser', () => { // @ts-expect-error global mock global.SUPPORTED_BROWSERS = 'a' - // @ts-expect-error we know it's no a module return import('..').then(() => { expect(document.documentElement.innerHTML).toMatchSnapshot() }) diff --git a/packages/outdated-browser/src/index.ts b/packages/outdated-browser/src/index.ts index 12c712080..455e4ac8e 100644 --- a/packages/outdated-browser/src/index.ts +++ b/packages/outdated-browser/src/index.ts @@ -76,3 +76,5 @@ if ( element.innerHTML = content document.body.prepend(element) } + +export {}