From 06ab706137f99ad37ca69fd31d1cf7286b6679b3 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Mon, 23 Mar 2020 17:38:10 +0100 Subject: [PATCH 01/11] Ignore vscode folder --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e9b8312..ff5b1d3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.vscode/ coverage node_modules dist @@ -5,4 +6,4 @@ examples/basic/node_modules examples/basic/dist examples/with-nuxt/node_modules examples/with-nuxt/dist -examples/with-nuxt/.nuxt \ No newline at end of file +examples/with-nuxt/.nuxt From f8c778b0800ca35abe78ae3d465c5e6e992ba40c Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Mon, 23 Mar 2020 17:37:47 +0100 Subject: [PATCH 02/11] Add eslint with vue and prettier support --- .eslintrc.js | 31 +++ .prettierrc | 3 + package-lock.json | 476 ++++++++++++++++++++++++++++++++++++++++++++- package.json | 5 + src/Image/index.js | 1 + 5 files changed, 510 insertions(+), 6 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .prettierrc diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..2a9c756 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,31 @@ +// https://prettier.io/docs/en/integrating-with-linters.html +// https://vuejs.github.io/vetur/linting-error.html#linting +// https://github.com/vuejs/eslint-plugin-vue/blob/v6.2.2/docs/user-guide/README.md +module.exports = { + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": [ + "eslint:recommended", + "plugin:vue/recommended", + "plugin:prettier/recommended" + ], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "plugins": [ + "vue" + ], + "rules": { + // override/add rules settings here, such as: + // 'vue/no-unused-vars': 'error' + "vue/html-self-closing": "off" + } +}; diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..bc691d5 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "trailingComma": "all", +} diff --git a/package-lock.json b/package-lock.json index 3e6b2fa..d4d419f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1494,6 +1494,14 @@ "prettier": "^1.18.2", "source-map": "~0.6.1", "vue-template-es2015-compiler": "^1.9.0" + }, + "dependencies": { + "prettier": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", + "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "dev": true + } } }, "@vue/test-utils": { @@ -3683,6 +3691,15 @@ "integrity": "sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw==", "dev": true }, + "doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, "doctypes": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz", @@ -3849,12 +3866,251 @@ "source-map": "~0.6.1" } }, + "eslint": { + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", + "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "ajv": "^6.10.0", + "chalk": "^2.1.0", + "cross-spawn": "^6.0.5", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "eslint-scope": "^5.0.0", + "eslint-utils": "^1.4.3", + "eslint-visitor-keys": "^1.1.0", + "espree": "^6.1.2", + "esquery": "^1.0.1", + "esutils": "^2.0.2", + "file-entry-cache": "^5.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.0.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "inquirer": "^7.0.0", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.3.0", + "lodash": "^4.17.14", + "minimatch": "^3.0.4", + "mkdirp": "^0.5.1", + "natural-compare": "^1.4.0", + "optionator": "^0.8.3", + "progress": "^2.0.0", + "regexpp": "^2.0.1", + "semver": "^6.1.2", + "strip-ansi": "^5.2.0", + "strip-json-comments": "^3.0.1", + "table": "^5.2.3", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "glob-parent": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "globals": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", + "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", + "dev": true, + "requires": { + "type-fest": "^0.8.1" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + }, + "strip-json-comments": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", + "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true + } + } + }, + "eslint-config-prettier": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz", + "integrity": "sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==", + "dev": true, + "requires": { + "get-stdin": "^6.0.0" + } + }, + "eslint-plugin-prettier": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz", + "integrity": "sha512-GlolCC9y3XZfv3RQfwGew7NnuFDKsfI4lbvRK+PIIo23SFH+LemGs4cKwzAaRa+Mdb+lQO/STaIayno8T5sJJA==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, + "eslint-plugin-vue": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz", + "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==", + "dev": true, + "requires": { + "natural-compare": "^1.4.0", + "semver": "^5.6.0", + "vue-eslint-parser": "^7.0.0" + } + }, + "eslint-scope": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", + "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", + "dev": true, + "requires": { + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" + } + }, + "eslint-utils": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "eslint-visitor-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", + "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==", + "dev": true + }, + "espree": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz", + "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==", + "dev": true, + "requires": { + "acorn": "^7.1.1", + "acorn-jsx": "^5.2.0", + "eslint-visitor-keys": "^1.1.0" + } + }, "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true }, + "esquery": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.2.0.tgz", + "integrity": "sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==", + "dev": true, + "requires": { + "estraverse": "^5.0.0" + }, + "dependencies": { + "estraverse": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.0.0.tgz", + "integrity": "sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==", + "dev": true + } + } + }, + "esrecurse": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", + "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==", + "dev": true, + "requires": { + "estraverse": "^4.1.0" + } + }, "estraverse": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", @@ -4053,6 +4309,12 @@ "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==", "dev": true }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -4089,6 +4351,15 @@ "escape-string-regexp": "^1.0.5" } }, + "file-entry-cache": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz", + "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==", + "dev": true, + "requires": { + "flat-cache": "^2.0.1" + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -4115,6 +4386,34 @@ "path-exists": "^4.0.0" } }, + "flat-cache": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", + "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==", + "dev": true, + "requires": { + "flatted": "^2.0.0", + "rimraf": "2.6.3", + "write": "1.0.3" + }, + "dependencies": { + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } + } + }, + "flatted": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz", + "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==", + "dev": true + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -4166,6 +4465,12 @@ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "dev": true }, + "functional-red-black-tree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", + "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", + "dev": true + }, "generic-names": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz", @@ -4187,6 +4492,12 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -4537,6 +4848,12 @@ "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", "dev": true }, + "ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true + }, "image-size": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", @@ -4959,8 +5276,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, - "optional": true + "dev": true }, "is-fullwidth-code-point": { "version": "3.0.0", @@ -4979,7 +5295,6 @@ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", "dev": true, - "optional": true, "requires": { "is-extglob": "^2.1.1" } @@ -5867,6 +6182,12 @@ "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, + "json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", + "dev": true + }, "json-stringify-safe": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", @@ -7806,11 +8127,20 @@ "dev": true }, "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.2.tgz", + "integrity": "sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==", "dev": true }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "pretty": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz", @@ -7847,6 +8177,12 @@ "dev": true, "optional": true }, + "progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "dev": true + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -8406,6 +8742,12 @@ } } }, + "regexpp": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", + "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", + "dev": true + }, "regexpu-core": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz", @@ -9540,6 +9882,93 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "dev": true }, + "table": { + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", + "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==", + "dev": true, + "requires": { + "ajv": "^6.10.2", + "lodash": "^4.17.14", + "slice-ansi": "^2.1.0", + "string-width": "^3.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "emoji-regex": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, + "slice-ansi": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz", + "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.0", + "astral-regex": "^1.0.0", + "is-fullwidth-code-point": "^2.0.0" + } + }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "dev": true, + "requires": { + "emoji-regex": "^7.0.1", + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^5.1.0" + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + } + } + }, "term-size": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz", @@ -9567,6 +9996,12 @@ "minimatch": "^3.0.4" } }, + "text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "dev": true + }, "throat": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz", @@ -10002,6 +10437,12 @@ "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "dev": true }, + "v8-compile-cache": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz", + "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==", + "dev": true + }, "v8-to-istanbul": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-4.1.2.tgz", @@ -10063,6 +10504,20 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz", "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==" }, + "vue-eslint-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz", + "integrity": "sha512-yR0dLxsTT7JfD2YQo9BhnQ6bUTLsZouuzt9SKRP7XNaZJV459gvlsJo4vT2nhZ/2dH9j3c53bIx9dnqU2prM9g==", + "dev": true, + "requires": { + "debug": "^4.1.1", + "eslint-scope": "^5.0.0", + "eslint-visitor-keys": "^1.1.0", + "espree": "^6.1.2", + "esquery": "^1.0.1", + "lodash": "^4.17.15" + } + }, "vue-runtime-helpers": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz", @@ -10246,6 +10701,15 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true }, + "write": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz", + "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==", + "dev": true, + "requires": { + "mkdirp": "^0.5.1" + } + }, "write-file-atomic": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", diff --git a/package.json b/package.json index ff3bca6..0c228d2 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,14 @@ "@vue/babel-preset-jsx": "^1.1.2", "@vue/test-utils": "^1.0.0-beta.32", "babel-jest": "^25.1.0", + "eslint": "^6.8.0", + "eslint-config-prettier": "^6.10.1", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-vue": "^6.2.2", "jest": "^25.1.0", "jest-serializer-vue": "^2.0.2", "np": "^6.2.0", + "prettier": "^2.0.2", "rimraf": "^3.0.2", "rollup": "^2.0.6", "rollup-plugin-buble": "^0.19.8", diff --git a/src/Image/index.js b/src/Image/index.js index d349ff2..83d3dc6 100644 --- a/src/Image/index.js +++ b/src/Image/index.js @@ -8,6 +8,7 @@ const absolutePositioning = { bottom: 0, }; +// @vue/component export const Image = { props: { data: PropTypes.shape({ From 5ffa0080407f41fc82e81a8379eb34c5284ce55a Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Tue, 24 Mar 2020 15:31:01 +0100 Subject: [PATCH 03/11] Update package.json Fix dev dependencies Add peer dependency on vue Add missing keys to remove warnings --- package-lock.json | 38 +++++++++++++++++++++++--------------- package.json | 21 ++++++++++++++++++--- 2 files changed, 41 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index d4d419f..f3fc85c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -192,6 +192,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz", "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==", + "dev": true, "requires": { "@babel/types": "^7.8.3" } @@ -851,7 +852,7 @@ }, "@babel/preset-env": { "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.7.tgz", + "resolved": false, "integrity": "sha512-BYftCVOdAYJk5ASsznKAUl53EMhfBbr8CJ1X+AJLfGPscQkwJFiaV/Wn9DPH/7fzm2v6iRYJKYHSqyynTGw0nw==", "dev": true, "requires": { @@ -955,6 +956,7 @@ "version": "7.8.7", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.7.tgz", "integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==", + "dev": true, "requires": { "esutils": "^2.0.2", "lodash": "^4.17.13", @@ -1407,7 +1409,7 @@ }, "@vue/babel-preset-jsx": { "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz", + "resolved": false, "integrity": "sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==", "dev": true, "requires": { @@ -1506,7 +1508,7 @@ }, "@vue/test-utils": { "version": "1.0.0-beta.32", - "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.0-beta.32.tgz", + "resolved": false, "integrity": "sha512-ywhe7PATMAk/ZGdsrcuQIliQusOyfe0OOHjKKCCERqgHh1g/kqPtmSMT5Jx4sErx53SYbNucr8QOK6/u5ianAw==", "dev": true, "requires": { @@ -4120,12 +4122,14 @@ "estree-walker": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==" + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==" + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true }, "exec-sh": { "version": "0.3.4", @@ -5563,7 +5567,7 @@ }, "jest": { "version": "25.1.0", - "resolved": "https://registry.npmjs.org/jest/-/jest-25.1.0.tgz", + "resolved": false, "integrity": "sha512-FV6jEruneBhokkt9MQk0WUFoNTwnF76CLXtwNMfsc0um0TlB/LG2yxUd0KqaFjEJ9laQmVWQWS0sG/t2GsuI0w==", "dev": true, "requires": { @@ -5984,7 +5988,7 @@ }, "jest-serializer-vue": { "version": "2.0.2", - "resolved": "https://registry.npmjs.org/jest-serializer-vue/-/jest-serializer-vue-2.0.2.tgz", + "resolved": false, "integrity": "sha1-sjjvKGNX7GtIBCG9RxRQUJh9WbM=", "dev": true, "requires": { @@ -6575,7 +6579,8 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", + "dev": true }, "lodash.kebabcase": { "version": "4.1.1", @@ -7214,7 +7219,7 @@ }, "np": { "version": "6.2.0", - "resolved": "https://registry.npmjs.org/np/-/np-6.2.0.tgz", + "resolved": false, "integrity": "sha512-4VKkGlCvl/iZCxWmS2VU8+s/Lh0TqLwdpuwOofspxEme1Hf7yF3cADG2TzSweuJXNsRDBQPjldZwTh6CxmZEKg==", "dev": true, "requires": { @@ -8981,7 +8986,7 @@ }, "rollup": { "version": "2.0.6", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.0.6.tgz", + "resolved": false, "integrity": "sha512-P42IlI6a/bxh52ed8hEXXe44LcHfep2f26OZybMJPN1TTQftibvQEl3CWeOmJrzqGbFxOA000QXDWO9WJaOQpA==", "dev": true, "requires": { @@ -8992,6 +8997,7 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz", "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==", + "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "rollup-pluginutils": "^2.8.1" @@ -8999,7 +9005,7 @@ }, "rollup-plugin-buble": { "version": "0.19.8", - "resolved": "https://registry.npmjs.org/rollup-plugin-buble/-/rollup-plugin-buble-0.19.8.tgz", + "resolved": false, "integrity": "sha512-8J4zPk2DQdk3rxeZvxgzhHh/rm5nJkjwgcsUYisCQg1QbT5yagW+hehYEW7ZNns/NVbDCTv4JQ7h4fC8qKGOKw==", "dev": true, "requires": { @@ -9009,7 +9015,7 @@ }, "rollup-plugin-commonjs": { "version": "10.1.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz", + "resolved": false, "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==", "dev": true, "requires": { @@ -9022,7 +9028,7 @@ }, "rollup-plugin-vue": { "version": "5.1.6", - "resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-5.1.6.tgz", + "resolved": false, "integrity": "sha512-O8AmNCecKGn8k28UCIBQ6fD4j2UAxeTwjmajR32IxtL2sBBUcJ0vAIwBTGZn75ijmXOoxngYgssJceY3kV/MVA==", "dev": true, "requires": { @@ -9049,6 +9055,7 @@ "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "dev": true, "requires": { "estree-walker": "^0.6.1" } @@ -10038,7 +10045,8 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true }, "to-object-path": { "version": "0.3.0", @@ -10526,7 +10534,7 @@ }, "vue-template-compiler": { "version": "2.6.11", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz", + "resolved": false, "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==", "dev": true, "requires": { diff --git a/package.json b/package.json index 0c228d2..20037c9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,13 @@ { "name": "vue-datocms", "version": "0.0.4", - "description": "", + "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments", + "keywords": [ + "datocms", + "vue.js", + "vue", + "vuejs" + ], "main": "dist/vue-datocms.umd.js", "module": "dist/vue-datocms.esm.js", "unpkg": "dist/vue-datocms.min.js", @@ -18,7 +24,10 @@ }, "license": "MIT", "author": "Stefano Verna ", + "contributors": [], "homepage": "https://github.com/datocms/vue-datocms", + "bugs": "https://github.com/datocms/vue-datocms/issues", + "repository": "github:datocms/vue-datocms", "devDependencies": { "@babel/preset-env": "^7.8.7", "@vue/babel-preset-jsx": "^1.1.2", @@ -36,12 +45,18 @@ "rollup": "^2.0.6", "rollup-plugin-buble": "^0.19.8", "rollup-plugin-commonjs": "^10.1.0", + "rollup-plugin-babel": "^4.4.0", "rollup-plugin-vue": "^5.1.6", "vue-template-compiler": "^2.6.11" }, "dependencies": { - "@znck/prop-types": "^0.6.3", - "rollup-plugin-babel": "^4.4.0" + "@znck/prop-types": "^0.6.3" + }, + "peerDependencies": { + "vue": "^2.6.0" + }, + "engines": { + "node": ">=12" }, "jest": { "moduleFileExtensions": [ From 5621b5ef44e570f43ccd8a8faa8ae6038648d678 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Tue, 24 Mar 2020 15:31:37 +0100 Subject: [PATCH 04/11] Add nvmrc for development --- .nvmrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..e1fcd1e --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/erbium From 8bfc1a00e7bf7687fabbc5c6d8b51dada895e279 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Tue, 24 Mar 2020 16:06:54 +0100 Subject: [PATCH 05/11] Update package.lock on basic example --- examples/basic/package-lock.json | 14 ++++++++++++-- examples/basic/package.json | 2 +- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/examples/basic/package-lock.json b/examples/basic/package-lock.json index f8c8a29..cfefb7f 100644 --- a/examples/basic/package-lock.json +++ b/examples/basic/package-lock.json @@ -10237,8 +10237,7 @@ "vue-datocms": { "version": "file:../..", "requires": { - "@znck/prop-types": "^0.6.3", - "rollup-plugin-babel": "^4.4.0" + "@znck/prop-types": "^0.6.3" }, "dependencies": { "@babel/code-frame": { @@ -11004,6 +11003,7 @@ }, "@babel/preset-env": { "version": "7.8.7", + "resolved": false, "integrity": "sha512-BYftCVOdAYJk5ASsznKAUl53EMhfBbr8CJ1X+AJLfGPscQkwJFiaV/Wn9DPH/7fzm2v6iRYJKYHSqyynTGw0nw==", "requires": { "@babel/compat-data": "^7.8.6", @@ -11512,6 +11512,7 @@ }, "@vue/babel-preset-jsx": { "version": "1.1.2", + "resolved": false, "integrity": "sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==", "requires": { "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", @@ -11595,6 +11596,7 @@ }, "@vue/test-utils": { "version": "1.0.0-beta.32", + "resolved": false, "integrity": "sha512-ywhe7PATMAk/ZGdsrcuQIliQusOyfe0OOHjKKCCERqgHh1g/kqPtmSMT5Jx4sErx53SYbNucr8QOK6/u5ianAw==", "requires": { "dom-event-types": "^1.0.0", @@ -14974,6 +14976,7 @@ }, "jest": { "version": "25.1.0", + "resolved": false, "integrity": "sha512-FV6jEruneBhokkt9MQk0WUFoNTwnF76CLXtwNMfsc0um0TlB/LG2yxUd0KqaFjEJ9laQmVWQWS0sG/t2GsuI0w==", "requires": { "@jest/core": "^25.1.0", @@ -15361,6 +15364,7 @@ }, "jest-serializer-vue": { "version": "2.0.2", + "resolved": false, "integrity": "sha1-sjjvKGNX7GtIBCG9RxRQUJh9WbM=", "requires": { "pretty": "2.0.0" @@ -16449,6 +16453,7 @@ }, "np": { "version": "6.2.0", + "resolved": false, "integrity": "sha512-4VKkGlCvl/iZCxWmS2VU8+s/Lh0TqLwdpuwOofspxEme1Hf7yF3cADG2TzSweuJXNsRDBQPjldZwTh6CxmZEKg==", "requires": { "@samverschueren/stream-to-observable": "^0.3.0", @@ -18004,6 +18009,7 @@ }, "rollup": { "version": "2.0.6", + "resolved": false, "integrity": "sha512-P42IlI6a/bxh52ed8hEXXe44LcHfep2f26OZybMJPN1TTQftibvQEl3CWeOmJrzqGbFxOA000QXDWO9WJaOQpA==", "requires": { "fsevents": "~2.1.2" @@ -18020,6 +18026,7 @@ }, "rollup-plugin-buble": { "version": "0.19.8", + "resolved": false, "integrity": "sha512-8J4zPk2DQdk3rxeZvxgzhHh/rm5nJkjwgcsUYisCQg1QbT5yagW+hehYEW7ZNns/NVbDCTv4JQ7h4fC8qKGOKw==", "requires": { "buble": "^0.19.8", @@ -18028,6 +18035,7 @@ }, "rollup-plugin-commonjs": { "version": "10.1.0", + "resolved": false, "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==", "requires": { "estree-walker": "^0.6.1", @@ -18039,6 +18047,7 @@ }, "rollup-plugin-vue": { "version": "5.1.6", + "resolved": false, "integrity": "sha512-O8AmNCecKGn8k28UCIBQ6fD4j2UAxeTwjmajR32IxtL2sBBUcJ0vAIwBTGZn75ijmXOoxngYgssJceY3kV/MVA==", "requires": { "@vue/component-compiler": "^4.1.0", @@ -19274,6 +19283,7 @@ }, "vue-template-compiler": { "version": "2.6.11", + "resolved": false, "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==", "requires": { "de-indent": "^1.0.2", diff --git a/examples/basic/package.json b/examples/basic/package.json index 6d65826..b10ba02 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -11,7 +11,7 @@ "axios": "^0.19.2", "core-js": "^3.6.4", "vue": "^2.6.11", - "vue-datocms": "../..", + "vue-datocms": "file:../..", "vue-meta": "^2.3.3" }, "devDependencies": { From c16641b9ea7464cc4d960f65f0b7a7b5a5aedce8 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Tue, 24 Mar 2020 18:03:49 +0100 Subject: [PATCH 06/11] Add explicitWidth in readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7975756..6815d8a 100644 --- a/README.md +++ b/README.md @@ -163,6 +163,7 @@ export default { | intersection-treshold | float | 0 | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | | intersection-tmargin | string | "0px 0px 0px 0px" | :x: | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections. | | lazy-load | Boolean | true | :x: | Wheter enable lazy loading or not | +| explicitWidth | Boolean | false | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | #### The `ResponsiveImage` object From 039118ee07b23d7dd5a00d74b7e9c4e38ed47d0d Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Tue, 24 Mar 2020 18:09:52 +0100 Subject: [PATCH 07/11] Define default value in prop for fadeInDuration --- src/Image/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Image/index.js b/src/Image/index.js index 83d3dc6..8dd5a5c 100644 --- a/src/Image/index.js +++ b/src/Image/index.js @@ -25,7 +25,7 @@ export const Image = { title: PropTypes.string }).isRequired, pictureClass: PropTypes.string, - fadeInDuration: PropTypes.number, + fadeInDuration: PropTypes.number.defaultValue(500), intersectionTreshold: PropTypes.number.defaultValue(0), intersectionMargin: PropTypes.string.defaultValue("0px 0px 0px 0px"), lazyLoad: PropTypes.bool.defaultValue(true), @@ -107,7 +107,7 @@ export const Image = { opacity: showImage ? 0 : 1, transition: !fadeInDuration || fadeInDuration > 0 - ? `opacity ${fadeInDuration || 500}ms ${fadeInDuration || 500}ms` + ? `opacity ${fadeInDuration}ms ${fadeInDuration}ms` : null, ...absolutePositioning }} @@ -150,7 +150,7 @@ export const Image = { opacity: showImage ? 1 : 0, transition: !fadeInDuration || fadeInDuration > 0 - ? `opacity ${fadeInDuration || 500}ms` + ? `opacity ${fadeInDuration}ms` : null }} > From 82b30b962195048bad25e6d2e62cbad20acfd151 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Wed, 25 Mar 2020 00:18:31 +0100 Subject: [PATCH 08/11] Disable eslint for props because it does not work well with prop-types --- .eslintrc.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2a9c756..717c7f5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -26,6 +26,7 @@ module.exports = { "rules": { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' - "vue/html-self-closing": "off" + "vue/html-self-closing": "off", + "vue/require-default-prop": "off" // does not work well with prop types } }; From 6b3b515d4c8216ab07883e8a079088c0ee3e871e Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Wed, 25 Mar 2020 00:18:51 +0100 Subject: [PATCH 09/11] Add more default values for image component --- src/Image/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Image/index.js b/src/Image/index.js index 8dd5a5c..1e234f5 100644 --- a/src/Image/index.js +++ b/src/Image/index.js @@ -22,16 +22,16 @@ export const Image = { webpSrcSet: PropTypes.string, bgColor: PropTypes.string, alt: PropTypes.string, - title: PropTypes.string + title: PropTypes.string, }).isRequired, pictureClass: PropTypes.string, fadeInDuration: PropTypes.number.defaultValue(500), intersectionTreshold: PropTypes.number.defaultValue(0), intersectionMargin: PropTypes.string.defaultValue("0px 0px 0px 0px"), lazyLoad: PropTypes.bool.defaultValue(true), - pictureStyle: PropTypes.object, - rootStyle: PropTypes.object, - explicitWidth: PropTypes.bool + pictureStyle: PropTypes.object.defaultValue(() => ({})), + rootStyle: PropTypes.object.defaultValue(() => ({})), + explicitWidth: PropTypes.bool.defaultValue(false), }, inheritAttrs: false, data: () => ({ From 6a6901ae75cd03cc6dd89bd642d90f742123525f Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Wed, 25 Mar 2020 00:41:27 +0100 Subject: [PATCH 10/11] Run autoformatter --- .eslintignore | 2 ++ .prettierignore | 2 ++ .prettierrc | 2 +- babel.config.js | 8 ++--- build/rollup.config.js | 10 +++--- src/Image/index.js | 72 +++++++++++++++++++++--------------------- src/index.js | 24 +++++++------- 7 files changed, 63 insertions(+), 57 deletions(-) create mode 100644 .eslintignore create mode 100644 .prettierignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f189915 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +examples/ +coverage/ diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..f189915 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +examples/ +coverage/ diff --git a/.prettierrc b/.prettierrc index bc691d5..bf357fb 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,3 @@ { - "trailingComma": "all", + "trailingComma": "all" } diff --git a/babel.config.js b/babel.config.js index 7d98f77..890400e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,13 +1,13 @@ module.exports = { presets: [ - '@vue/babel-preset-jsx', + "@vue/babel-preset-jsx", [ - '@babel/preset-env', + "@babel/preset-env", { targets: { - node: 'current', + node: "current", }, }, ], ], -}; \ No newline at end of file +}; diff --git a/build/rollup.config.js b/build/rollup.config.js index 5cc7289..055a347 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -7,15 +7,15 @@ export default { file: "bundle.js", name: "VueDatoCms", globals: { - "@znck/prop-types": "PropTypes" - } + "@znck/prop-types": "PropTypes", + }, }, external: ["@znck/prop-types"], plugins: [ babel({ exclude: "node_modules/**", - runtimeHelpers: true + runtimeHelpers: true, }), - commonjs() - ] + commonjs(), + ], }; diff --git a/src/Image/index.js b/src/Image/index.js index 1e234f5..6beea31 100644 --- a/src/Image/index.js +++ b/src/Image/index.js @@ -10,6 +10,7 @@ const absolutePositioning = { // @vue/component export const Image = { + inheritAttrs: false, props: { data: PropTypes.shape({ aspectRatio: PropTypes.number.isRequired, @@ -33,11 +34,10 @@ export const Image = { rootStyle: PropTypes.object.defaultValue(() => ({})), explicitWidth: PropTypes.bool.defaultValue(false), }, - inheritAttrs: false, data: () => ({ observer: null, inView: false, - loaded: false + loaded: false, }), computed: { addImage() { @@ -69,6 +69,29 @@ export const Image = { } return true; + }, + }, + mounted() { + if ("IntersectionObserver" in window) { + this.observer = new IntersectionObserver( + (entries) => { + const image = entries[0]; + if (image.isIntersecting) { + this.inView = true; + this.observer.disconnect(); + } + }, + { + threshold: this.intersectionTreshold, + rootMargin: this.intersectionMargin, + }, + ); + this.observer.observe(this.$el); + } + }, + destroyed() { + if ("IntersectionObserver" in window && this.observer) { + this.observer.disconnect(); } }, methods: { @@ -76,7 +99,7 @@ export const Image = { if (this.$el.getAttribute("src") !== this.srcPlaceholder) { this.loaded = true; } - } + }, }, render(h) { const { @@ -87,7 +110,7 @@ export const Image = { showImage, addImage, rootStyle, - explicitWidth + explicitWidth, } = this; const webpSource = data.webpSrcSet && ( @@ -109,7 +132,7 @@ export const Image = { !fadeInDuration || fadeInDuration > 0 ? `opacity ${fadeInDuration}ms ${fadeInDuration}ms` : null, - ...absolutePositioning + ...absolutePositioning, }} /> ); @@ -124,7 +147,7 @@ export const Image = { width: explicitWidth ? `${width}px` : "100%", height: "auto", display: "block", - ...pictureStyle + ...pictureStyle, }} height={height} width={width} @@ -137,7 +160,7 @@ export const Image = { display: "inline-block", overflow: "hidden", ...rootStyle, - position: "relative" + position: "relative", }} > {sizer} @@ -151,7 +174,7 @@ export const Image = { transition: !fadeInDuration || fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` - : null + : null, }} > {webpSource} @@ -161,7 +184,7 @@ export const Image = { src={data.src} alt={data.alt} title={data.title} - vOn:load={this.load} + v-on:load={this.load} style={{ width: "100%" }} /> )} @@ -180,39 +203,16 @@ export const Image = { ); }, - staticRenderFns: [] - } + staticRenderFns: [], + }, })} ); }, - mounted() { - if ("IntersectionObserver" in window) { - this.observer = new IntersectionObserver( - entries => { - const image = entries[0]; - if (image.isIntersecting) { - this.inView = true; - this.observer.disconnect(); - } - }, - { - threshold: this.intersectionTreshold, - rootMargin: this.intersectionMargin - } - ); - this.observer.observe(this.$el); - } - }, - destroyed() { - if ("IntersectionObserver" in window && this.observer) { - this.observer.disconnect(); - } - } }; export const DatocmsImagePlugin = { - install: Vue => { + install: (Vue) => { Vue.component("DatocmsImage", Image); - } + }, }; diff --git a/src/index.js b/src/index.js index 49d5112..1a5b154 100644 --- a/src/index.js +++ b/src/index.js @@ -1,23 +1,25 @@ -export * from './Image'; +export * from "./Image"; export const toHead = (...args) => { const tags = [].concat(...args); - const titleTag = tags && tags.find(t => t.tag === 'title'); - const metaTags = tags ? tags.filter(t => t.tag === 'meta') : []; - const linkTags = tags ? tags.filter(t => t.tag === 'link') : []; + const titleTag = tags && tags.find((t) => t.tag === "title"); + const metaTags = tags ? tags.filter((t) => t.tag === "meta") : []; + const linkTags = tags ? tags.filter((t) => t.tag === "link") : []; return { title: titleTag && titleTag.content, - meta: metaTags.map(tag => ({ + meta: metaTags.map((tag) => ({ ...tag.attributes, hid: tag.attributes.name || tag.attributes.property, vmid: tag.attributes.name || tag.attributes.property, })), - link: linkTags.map(tag => ({ + link: linkTags.map((tag) => ({ ...tag.attributes, - hid: tag.attributes.name || (`${tag.attributes.rel}-${tag.attributes.sizes}`), - vmid: tag.attributes.name || (`${tag.attributes.rel}-${tag.attributes.sizes}`), - })) - } -} \ No newline at end of file + hid: + tag.attributes.name || `${tag.attributes.rel}-${tag.attributes.sizes}`, + vmid: + tag.attributes.name || `${tag.attributes.rel}-${tag.attributes.sizes}`, + })), + }; +}; From 2cf9abd329f4dff922a234dfe00daa84f8e71344 Mon Sep 17 00:00:00 2001 From: Fabrizio Monti Date: Wed, 25 Mar 2020 01:12:23 +0100 Subject: [PATCH 11/11] Refactoring fadein transition condition --- src/Image/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Image/index.js b/src/Image/index.js index 6beea31..27588b9 100644 --- a/src/Image/index.js +++ b/src/Image/index.js @@ -129,7 +129,7 @@ export const Image = { backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: - !fadeInDuration || fadeInDuration > 0 + fadeInDuration ? `opacity ${fadeInDuration}ms ${fadeInDuration}ms` : null, ...absolutePositioning, @@ -171,10 +171,7 @@ export const Image = { style={{ ...absolutePositioning, opacity: showImage ? 1 : 0, - transition: - !fadeInDuration || fadeInDuration > 0 - ? `opacity ${fadeInDuration}ms` - : null, + transition: fadeInDuration ? `opacity ${fadeInDuration}ms` : null, }} > {webpSource}