Skip to content

Commit bd85049

Browse files
jacobmllr95jacobmllr95
authored
fix(utils): improve dom, env, inspect and test utils (#3085)
* fix(utils): improve dom and env utils * coverage * coverage * improve normalize function names * Update dom.js * Use polyfills from `core-js` * Update array.js * Include `core-js` in builds * Update package.json * Fix merge conflicts * Use `lodash` for all non-client code * Always only warn about non-existing API's * Improve util name * Fix return type * Fix import path * Fix util sharing * Mock `MutationObserver` * Migrate to JSDOm v14 and us test utils * Fix `parseEventOptions()` util * Mock `console.warn()` * Use utils wherever possible * Update toolpop.js * Make sure to restore original `console.warn()` * Add tests for `isDate()` util * Update docs * Fix lint * Fix lint
1 parent 824a1e6 commit bd85049

File tree

179 files changed

+1533
-1537
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+1533
-1537
lines changed

‎docs/markdown/intro/README.md

+36-23
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,8 @@ and/or directives.
264264

265265
### Component groups and Directives as Vue plugins
266266

267-
You can import component groups and directives as Vue plugins by importing the component group
268-
or directive directory:
267+
You can import component groups and directives as Vue plugins by importing the component group or
268+
directive directory:
269269

270270
<!-- eslint-disable import/first, import/no-duplicates -->
271271

@@ -368,26 +368,22 @@ module.exports = {
368368

369369
## Browser
370370

371-
Add the Boostrap and BootstrapVue CSS URLs in your HTML `<head>` section, followed by the
372-
required JavaScript files.
371+
Add the Boostrap and BootstrapVue CSS URLs in your HTML `<head>` section, followed by the required
372+
JavaScript files.
373373

374-
When supporting older browsers (see [Browser Support](#browser-support) below), you will need
375-
to include a polyfill for handling modern JavaScript features before loading Vue and
376-
BoostrapVue JavaScript files.
374+
When supporting older browsers (see [Browser Support](#browser-support) below), you will need to
375+
include a polyfill for handling modern JavaScript features before loading Vue and BoostrapVue
376+
JavaScript files.
377377

378378
```html
379379
<!-- Add this to <head> -->
380380

381381
<!-- Load required Bootstrap and BootstrapVue CSS -->
382382
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
383-
<link
384-
type="text/css"
385-
rel="stylesheet"
386-
href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
387-
/>
383+
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
388384

389-
<!-- Load a polyfill to support older browsers -->
390-
<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
385+
<!-- Load polyfills to support older browsers -->
386+
<script src="//polyfill.io/v3/polyfill.min.js?features=default%2CMutationObserver%2CPromise" crossorigin="anonymous"></script>
391387

392388
<!-- Load Vue followed by BootstrapVue -->
393389
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
@@ -407,8 +403,8 @@ bundler supports es modules, it will automatically prefer it over commonjs.
407403
| UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` |
408404

409405
BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), and
410-
`vue-functional-data-merge` (for functional components). These two dependencies are included in
411-
the `commonjs2` and `UMD` bundles.
406+
`vue-functional-data-merge` (for functional components). These two dependencies are included in the
407+
`commonjs2` and `UMD` bundles.
412408

413409
## Migrating a project already using Bootstrap
414410

@@ -430,17 +426,34 @@ information about browsers currently supported by Bootstrap 4.
430426

431427
### JS
432428

433-
BootstrapVue is written in Vue.js! So this is up to your project and bundler which browsers are
429+
BootstrapVue is written in Vue.js! So it is up to your project and bundler which browsers are
434430
supported.
435431

436-
If you want to support older IE, Android and IOS devices, you may want to use
437-
[Babel Polyfill](https://babeljs.io/docs/usage/polyfill):
432+
Following features and APIs are used by BootstrapVue:
438433

439-
- `npm install @babel/polyfill`
440-
- Import it in your app main entry point with `import '@babel/polyfill'`
434+
- ES5 (e.g. `Array.from()`, `Array.isArray()`, `Object.assign()`, `Object.is()`, etc.)
435+
- `Promise`
436+
- `MutationObserver`
441437

442-
Or use [Polyfill.io](https://polyfill.io/) to dynamically serve browser specific polyfills via `<script>`
443-
tags in the HTML `<head>` section.
438+
If you want to support older IE, Android and iOS devices, you may want to use
439+
[@babel/polyfill](https://babeljs.io/docs/usage/polyfill) and
440+
[mutationobserver-shim](https://www.npmjs.com/package/mutationobserver-shim):
441+
442+
- `npm install @babel/polyfill mutationobserver-shim`
443+
- Import the polyfills in your app main entry point:
444+
445+
<!-- eslint-disable no-unused-vars -->
446+
447+
```js
448+
import '@babel/polyfill'
449+
import 'mutationobserver-shim'
450+
import Vue from 'vue'
451+
import BootstrapVue from 'bootstrap-vue'
452+
```
453+
454+
Alternatively use [Polyfill.io](https://polyfill.io/) to dynamically serve browser specific
455+
polyfills via `<script>` tags in the HTML `<head>` section. See [Browser](#browser) section for an
456+
example.
444457

445458
## Tooling Support
446459

‎jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = {
66
'.*\\.(vue)$': 'vue-jest'
77
},
88
coverageDirectory: './coverage/',
9+
testEnvironment: 'jest-environment-jsdom-fourteen',
910
testEnvironmentOptions: {
1011
pretendToBeVisual: true
1112
}

‎nuxt/index.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1+
const camelCase = require('lodash/camelCase')
2+
const kebabCase = require('lodash/kebabCase')
3+
const upperFirst = require('lodash/upperFirst')
14
const { resolve } = require('path')
25

3-
module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
4-
this.nuxt.hook('build:before', () => {
5-
function pickFirst(...args) {
6-
for (const arg of args) {
7-
if (arg !== undefined) {
8-
return arg
9-
}
10-
}
11-
}
6+
// --- Utility methods ---
7+
8+
const pascalCase = str => upperFirst(camelCase(str))
129

13-
const kebabCase = str =>
14-
str.replace(
15-
/([_\s]+([a-zA-Z])|([A-Z]))/g,
16-
(m, $1, $2, $3, o) => (o ? '-' : '') + ($2 || $3 || '').toLowerCase()
17-
)
18-
const pascalCase = str => str.replace(/(^|[-_\s]+)(.)/g, (m, $1, $2) => $2.toUpperCase())
10+
const pickFirst = (...args) => {
11+
for (const arg of args) {
12+
if (arg !== undefined) {
13+
return arg
14+
}
15+
}
16+
}
1917

18+
module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
19+
this.nuxt.hook('build:before', () => {
2020
// Merge moduleOptions with default
2121
const options = {
2222
...this.options.bootstrapVue,

‎package.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@
4848
"es"
4949
],
5050
"sideEffects": [
51-
"./es/utils/object.js",
52-
"./src/utils/object.js",
53-
"./es/utils/array.js",
54-
"./src/utils/array.js",
5551
"**/*.scss",
5652
"**/*.css",
5753
"**/*.vue",
@@ -73,6 +69,7 @@
7369
"dependencies": {
7470
"@nuxt/opencollective": "^0.2.2",
7571
"bootstrap": "^4.3.1",
72+
"core-js": "^2.6.5",
7673
"popper.js": "^1.15.0",
7774
"vue-functional-data-merge": "^2.0.7"
7875
},
@@ -113,6 +110,7 @@
113110
"highlight.js": "^9.15.6",
114111
"html-loader": "^0.5.5",
115112
"jest": "^24.7.1",
113+
"jest-environment-jsdom-fourteen": "^0.1.0",
116114
"loader-utils": "^1.2.3",
117115
"lodash": "^4.17.11",
118116
"marked": "^0.6.2",

‎scripts/check-plugin-meta.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import fs from 'fs'
44
import path from 'path'
55
import assert from 'assert'
6+
import startCase from 'lodash/startCase'
67
import { promisify } from 'util'
7-
import startCase from '../src/utils/startcase'
88

99
const readDir = promisify(fs.readdir)
1010
const stat = promisify(fs.stat)

‎scripts/rollup.config.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const dist = path.resolve(base, 'dist')
1212

1313
const externals = ['vue', ...Object.keys(dependencies)]
1414

15-
// Libs in `external` will not be bundled to dist,
16-
// since they are expected to be provided later.
17-
// In some cases, wee want to include some of them in the build, so we
18-
// exclude the external here.
19-
const externalExcludes = ['popper.js', 'vue-functional-data-merge']
15+
// Libs in `external` will not be bundled to dist, since they
16+
// are expected to be provided later
17+
// In some cases, wee want to include some of them in the build,
18+
// so we exclude the external here
19+
const externalExcludes = ['core-js', 'popper.js', 'vue-functional-data-merge']
2020

2121
// The base rollup configuration
2222
const baseConfig = {

‎src/components/alert/alert.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import Vue from 'vue'
2-
import BButtonClose from '../button/button-close'
32
import { getComponentConfig } from '../../utils/config'
43
import { requestAF } from '../../utils/dom'
4+
import { isBoolean } from '../../utils/inspect'
5+
import BButtonClose from '../button/button-close'
56

67
const NAME = 'BAlert'
78

89
// Convert `show` value to a number
910
const parseCountDown = show => {
10-
if (show === '' || typeof show === 'boolean') {
11+
if (show === '' || isBoolean(show)) {
1112
return 0
1213
}
1314
show = parseInt(show, 10)

0 commit comments

Comments
 (0)