From f23626efc757e3f7094a7d543ab31e66a02103a5 Mon Sep 17 00:00:00 2001 From: Barthelemy Ledoux Date: Sat, 4 May 2019 18:39:22 -0500 Subject: [PATCH 01/18] build: use rollup to deliver --- package.json | 10 +- rollup.config.js | 43 ++ src/Preview.vue | 3 +- src/VueLive.vue | 4 +- src/{index.js => main.js} | 0 src/utils/compileCode.js | 15 +- src/utils/normalizeSfcComponent.js | 7 +- vue.config.js | 16 - yarn.lock | 605 +++++++++++++++++++++++++++-- 9 files changed, 647 insertions(+), 56 deletions(-) create mode 100644 rollup.config.js rename src/{index.js => main.js} (100%) diff --git a/package.json b/package.json index 39d5d0f..192f420 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.0-dev", "scripts": { "serve": "vue-cli-service serve", - "build": "cross-env LIB_MAKING=true vue-cli-service build --target lib --entry ./src/index.js", + "start": "vue-cli-service serve", + "build": "rollup -c", "build:demo": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" @@ -45,6 +46,13 @@ "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "raw-loader": "^2.0.0", + "rollup": "^1.11.2", + "rollup-plugin-babel": "^4.3.2", + "rollup-plugin-commonjs": "^9.3.4", + "rollup-plugin-css-only": "^1.0.0", + "rollup-plugin-json": "^4.0.0", + "rollup-plugin-node-resolve": "^4.2.3", + "rollup-plugin-vue": "^5.0.0", "vuejs-datepicker": "^1.5.4" }, "eslintConfig": { diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..fd5a00b --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,43 @@ +import * as path from "path"; +import cjs from "rollup-plugin-commonjs"; +import node from "rollup-plugin-node-resolve"; +import babel from "rollup-plugin-babel"; +import vue from "rollup-plugin-vue"; +import css from "rollup-plugin-css-only"; +import json from "rollup-plugin-json"; + +const resolve = _path => path.resolve(__dirname, _path); + +export default { + input: resolve("./src/main.js"), + output: { + file: resolve(`./dist/vue-live.common.js`), + format: "cjs" + }, + plugins: [ + cjs(), + node(), + babel({ + babelrc: false, + presets: [["@vue/babel-preset-app", { useBuiltIns: false }]], + extensions: [".js"], + runtimeHelpers: true + }), + vue(), + css(), + json() + ], + external: [ + "acorn", + "buble", + "walkes", + "hash-sum", + "vue-template-compiler", + "rewrite-imports", + "prismjs", + "prismjs/themes/prism-tomorrow.css", + "prismjs/components/prism-jsx.min", + "vue-prism-editor/dist/VuePrismEditor.css", + "vue-prism-editor" + ] +}; diff --git a/src/Preview.vue b/src/Preview.vue index 258ef12..71da090 100644 --- a/src/Preview.vue +++ b/src/Preview.vue @@ -6,7 +6,6 @@ `) - eval(sut.script) - expect(dummySet).toMatchObject({ param: 'Foo' }) - }) +`); + eval(sut.script); + expect(dummySet).toMatchObject({ param: "Foo" }); + }); - it('shoud be fine with using the `new Vue` structure', () => { + it("shoud be fine with using the `new Vue` structure", () => { const sut = compileCode(` let param = 'Bar'; new Vue({ param -});`) - eval(sut.script) - expect(dummySet).toMatchObject({ param: 'Bar' }) - }) +});`); + eval(sut.script); + expect(dummySet).toMatchObject({ param: "Bar" }); + }); - it('shoud work with the vsg way', () => { + it("shoud work with the vsg way", () => { const sut = compileCode(` let param = 'BazBaz';
- `) - expect(sut.script.trim()).toBe("let param = 'BazBaz';") - }) -}) + `); + expect(sut.script.trim()).toBe("var param = 'BazBaz';"); + }); +}); diff --git a/src/utils/__tests__/getVueConfigObject.unit.js b/src/utils/__tests__/getVueConfigObject.unit.js new file mode 100644 index 0000000..f5d9fe1 --- /dev/null +++ b/src/utils/__tests__/getVueConfigObject.unit.js @@ -0,0 +1,13 @@ +import getVueConfigObject from "../getVueConfigObject"; + +describe("getVueConfigObject", () => { + it("should extract parameters", () => { + const data = getVueConfigObject("new Vue({param:'baz'})", []); + expect(data.param).toBe("baz"); + }); + + it("should assign variables to data", () => { + const data = getVueConfigObject("var foo = 'baz'; new Vue({})", ["foo"]); + expect(data.data().foo).toBe("baz"); + }); +}); From b746ff918b85ef433d17efe78390ef6eb4ae86a5 Mon Sep 17 00:00:00 2001 From: Barthelemy Ledoux Date: Sat, 4 May 2019 19:18:52 -0500 Subject: [PATCH 03/18] test: add transformImport tests --- .../__tests__/transformOneImport.unit.js | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/utils/__tests__/transformOneImport.unit.js diff --git a/src/utils/__tests__/transformOneImport.unit.js b/src/utils/__tests__/transformOneImport.unit.js new file mode 100644 index 0000000..127f6b0 --- /dev/null +++ b/src/utils/__tests__/transformOneImport.unit.js @@ -0,0 +1,46 @@ +import transformOneImport from "../transformOneImport"; +import walkes from "walkes"; +import getAst from "../getAst"; + +describe("transformOneImport", () => { + function getFirstImportNode(code) { + const ast = getAst(code); + let firstNode = undefined; + walkes(ast, { + ImportDeclaration(node) { + firstNode = node; + } + }); + return firstNode; + } + + it("should transform default import into require", () => { + const code = `import foo from 'baz';`; + const node = getFirstImportNode(code); + const transformed = transformOneImport(node, code, 0); + expect(transformed.code).toBe("const foo = require('baz');"); + }); + + it("should transform named import into require", () => { + const code = `import { foo } from 'baz';`; + const node = getFirstImportNode(code); + const transformed = transformOneImport(node, code, 0); + expect(transformed.code).toBe("const { foo } = require('baz');"); + }); + + it("should transform re-named import into require", () => { + const code = `import { bar as foo } from 'baz';`; + const node = getFirstImportNode(code); + const transformed = transformOneImport(node, code, 0); + expect(transformed.code).toBe("const { bar:foo } = require('baz');"); + }); + + it("should transform mixed imports into require", () => { + const code = `import hola, { bar as foo } from 'baz';`; + const node = getFirstImportNode(code); + const transformed = transformOneImport(node, code, 0); + expect(transformed.code).toBe( + ["const hola = require('baz');", "const { bar:foo } = hola;"].join("\n") + ); + }); +}); From 7160456a7d9ecc7475314367a30426fa93829f40 Mon Sep 17 00:00:00 2001 From: Barthelemy Ledoux Date: Sat, 4 May 2019 19:31:55 -0500 Subject: [PATCH 04/18] docs: make demo work on mobile --- demo/CustomLayout.vue | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/demo/CustomLayout.vue b/demo/CustomLayout.vue index f3ff001..bbc9d69 100644 --- a/demo/CustomLayout.vue +++ b/demo/CustomLayout.vue @@ -33,4 +33,28 @@ text-align: center; border-radius: 0 10px 10px 0; } + +@media only screen and (max-width: 1000px) { + .preview-code { + width: 90vw; + } +} + +@media only screen and (max-width: 568px) { + .preview-code { + display: block; + } + + .preview-code > div { + width: auto; + } + + .preview-code > div:first-child { + border-radius: 10px 10px 0 0; + } + + .preview-code > div:last-child { + border-radius: 0 0 10px 10px; + } +} \ No newline at end of file From da9bfec93c2834b4ef284266f514614948bc3433 Mon Sep 17 00:00:00 2001 From: Barthelemy Ledoux Date: Sat, 4 May 2019 21:45:19 -0500 Subject: [PATCH 05/18] test: add first e2e test --- .travis.yml | 1 + cypress.json | 3 + package.json | 34 ++- src/VueLive.vue | 9 +- tests/e2e/.eslintrc.js | 12 + tests/e2e/plugins/index.js | 24 ++ tests/e2e/specs/LiveRefresh.js | 28 ++ tests/e2e/support/commands.js | 25 ++ tests/e2e/support/index.js | 20 ++ yarn.lock | 513 +++++++++++++++++++++++++++++++-- 10 files changed, 622 insertions(+), 47 deletions(-) create mode 100644 cypress.json create mode 100644 tests/e2e/.eslintrc.js create mode 100644 tests/e2e/plugins/index.js create mode 100644 tests/e2e/specs/LiveRefresh.js create mode 100644 tests/e2e/support/commands.js create mode 100644 tests/e2e/support/index.js diff --git a/.travis.yml b/.travis.yml index 577de87..daa0827 100644 --- a/.travis.yml +++ b/.travis.yml @@ -28,6 +28,7 @@ jobs: script: - yarn lint - yarn test:unit --runInBand + - yarn test:e2e - npx danger ci - stage: demo diff --git a/cypress.json b/cypress.json new file mode 100644 index 0000000..470c720 --- /dev/null +++ b/cypress.json @@ -0,0 +1,3 @@ +{ + "pluginsFile": "tests/e2e/plugins/index.js" +} diff --git a/package.json b/package.json index 192f420..277d3ff 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,16 @@ { "name": "vue-live", "version": "0.0.0-dev", + "author": "Bart Ledoux ", "scripts": { "serve": "vue-cli-service serve", - "start": "vue-cli-service serve", "build": "rollup -c", - "build:demo": "vue-cli-service build", "lint": "vue-cli-service lint", + "build:demo": "vue-cli-service build", + "start": "vue-cli-service serve", + "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" }, - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/vue-styleguidist/vue-live.git" - }, - "bugs": { - "url": "https://github.com/vue-styleguidist/vue-live/issues" - }, - "author": "Bart Ledoux ", - "main": "./dist/vue-live.common.js", - "files": [ - "./dist" - ], "dependencies": { "acorn": "^6.1.1", "buble": "^0.19.7", @@ -35,6 +24,7 @@ }, "devDependencies": { "@vue/cli-plugin-babel": "^3.6.0", + "@vue/cli-plugin-e2e-cypress": "^3.7.0", "@vue/cli-plugin-eslint": "^3.6.0", "@vue/cli-plugin-unit-jest": "^3.6.3", "@vue/cli-service": "^3.6.0", @@ -97,5 +87,17 @@ "> 1%", "last 2 versions", "not ie <= 8" - ] + ], + "bugs": { + "url": "https://github.com/vue-styleguidist/vue-live/issues" + }, + "files": [ + "./dist" + ], + "license": "MIT", + "main": "./dist/vue-live.common.js", + "repository": { + "type": "git", + "url": "git+https://github.com/vue-styleguidist/vue-live.git" + } } diff --git a/src/VueLive.vue b/src/VueLive.vue index 5de55c2..cf69e22 100644 --- a/src/VueLive.vue +++ b/src/VueLive.vue @@ -1,7 +1,7 @@