Permalink
Browse files

feat: Migrate from tsc to rollup

  • Loading branch information...
znck committed Jan 14, 2019
1 parent bc2823d commit 5ac747407cd00e041ef452c614e674c6583c518a
@@ -1,4 +1,5 @@
dist/
.rpt2_cache/
/.github/sereno/public
/_cache
test/style.css
@@ -1,10 +1,10 @@
# Frequently Asked Questions

- **Why does `__file` use absolute path?**
- **Why does `__file` use absolute path?**
The `__file` variable is used by devtools to provide "open in editor" feature. However, in production mode only filename is used. See issue [#258](https://github.com/vuejs/rollup-plugin-vue/issues/258) to enable production mode.

- **Cannot find module `vue-template-compiler`?**
- **Error: Cannot find module `vue-template-compiler`?**
`vue-template-compiler` has a constraint that it should be exact same version as `vue` that is why it is included as peer dependency. Make sure you install `vue-template-compiler` and `vue` in your project.

- **Cannot find module `less` or `node-sass` or `stylus`?**
- **Error: Cannot find module `less` or `node-sass` or `stylus`?**
If you're using any of the style languages (other than css) supported in `.vue` file, you have to install that language's compiler.
@@ -12,42 +12,42 @@
"vue"
],
"license": "MIT",
"main": "dist/index.js",
"main": "dist/rollup-plugin-vue.js",
"module": "dist/rollup-plugin-vue.mjs",
"typings": "dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/rollup-plugin-vue.git"
},
"standard-version": {
"scripts": {
"postchangelog": "yarn test && yarn build:docs && git add docs/"
"postchangelog": "yarn test && yarn :build:docs && git add docs/"
}
},
"scripts": {
"prepublishOnly": "yarn build",
"prebuild": "yarn lint",
"build": "tsc",
"prebuild:docs": "cp CHANGELOG.md docs/changelog.md",
"build:docs": "vuepress build docs/",
"postbuild:docs": "rm docs/changelog.md",
"build": "yarn :build",
"docs": "yarn :docs",
"pre:build": "yarn lint",
":build": "rollup -c",
"pre:build:docs": "cp CHANGELOG.md docs/changelog.md",
":build:docs": "vuepress build docs/",
"post:build:docs": "rm docs/changelog.md",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
"predocs": "cp CHANGELOG.md docs/changelog.md",
"docs": "vuepress dev docs/",
"postdocs": "rm docs/CHANGELOG.md",
"pre:docs": "cp CHANGELOG.md docs/changelog.md",
":docs": "vuepress dev docs/",
"post:docs": "rm docs/CHANGELOG.md",
"lint": "prettier --no-semi --single-quote --write **/*.js **/*.vue !test/target/** !dist/**",
"release": "standard-version -a",
"pretest": "yarn build",
"test": "jest"
},
"files": [
"dist/",
"src/"
"dist/"
],
"dependencies": {
"@babel/runtime": "^7.0.0-beta.46",
"@vue/component-compiler": "^3.6",
"@vue/component-compiler-utils": "^2.1.0",
"debug": "^2.6.0",
"debug": "^4.1.1",
"hash-sum": "^1.0.2",
"querystring": "^0.2.0",
"rollup-pluginutils": "^2.0.1",
@@ -59,37 +59,39 @@
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
"@babel/plugin-transform-runtime": "^7.0.0-beta.46",
"@babel/preset-env": "^7.0.0-beta.46",
"@types/debug": "^0.0.30",
"@types/jest": "^22.2.3",
"@types/node": "^10.0.4",
"@babel/runtime": "^7.0.0-beta.46",
"@types/debug": "^0.0.31",
"@types/jest": "^23.3.12",
"@types/node": "^10.12.18",
"@types/puppeteer": "^1.3.1",
"@znck/promised": "^1.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^22.4.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"conventional-changelog": "^1.1.24",
"jest": "^22.4.2",
"conventional-changelog": "^3.0.5",
"jest": "^23.6.0",
"node-sass": "^4.9.0",
"postcss": "^6.0.22",
"postcss": "^7.0.11",
"postcss-assets": "^5.0.0",
"prettier": "^1.12.1",
"pug": "^2.0.3",
"puppeteer": "^1.4.0",
"rollup": "^0.58.2",
"rollup": "^1.1.0",
"rollup-plugin-babel": "^4.0.0-beta.4",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-css-only": "^0.4.0",
"rollup-plugin-md": "^0.0.7",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-typescript": "^0.8.1",
"rollup-plugin-url": "^1.4.0",
"ts-jest": "^22.4.5",
"typescript": "^2.8.3",
"rollup-plugin-typescript": "^1.0.0",
"rollup-plugin-typescript2": "^0.18.1",
"rollup-plugin-url": "^2.1.0",
"ts-jest": "^23.10.5",
"typescript": "^3.2.2",
"vue": "^2.5.16",
"vue-class-component": "^6.2.0",
"vue-template-compiler": "^2.5.16",
"vuepress": "^0.13.0"
"vuepress": "^0.14.8"
},
"peerDependencies": {
"vue-template-compiler": "*"
@@ -0,0 +1,32 @@
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'

const input = 'src/index.ts'
const plugins = [typescript({
typescript: require('typescript')
})]

function external(id) {
return id in pkg.dependencies || id in pkg.peerDependencies || ['path'].includes(id)
}

export default [
{
input,
plugins,
external,
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'default',
sourcemap: true,
},
{
file: pkg.module,
format: 'es',
sourcemap: true,
},
],
},
]
@@ -15,7 +15,7 @@ import {
StyleCompileResult,
DescriptorCompileResult,
} from '@vue/component-compiler'
import { Plugin } from 'rollup'
import { Plugin, RawSourceMap } from 'rollup'
import * as path from 'path'
import { parse, SFCDescriptor, SFCBlock } from '@vue/component-compiler-utils'
import debug from 'debug'
@@ -116,7 +116,7 @@ export interface VuePluginOptions {
/**
* Rollup plugin for handling .vue files.
*/
export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
export default function vue(opts: VuePluginOptions = {}): Plugin {
const isVue = createVueFilter(opts.include, opts.exclude)
const isProduction =
process.env.NODE_ENV === 'production' || process.env.BUILD === 'production'
@@ -145,7 +145,9 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
(!blacklisted.has('*') || !blacklisted.has(customBlockType)) &&
(whitelisted.has('*') || whitelisted.has(customBlockType))

const beforeAssemble = opts.beforeAssemble || ((d: DescriptorCompileResult): DescriptorCompileResult => d)
const beforeAssemble =
opts.beforeAssemble ||
((d: DescriptorCompileResult): DescriptorCompileResult => d)

delete opts.beforeAssemble
delete opts.css
@@ -204,14 +206,14 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
load(id: string) {
const request = parseVuePartRequest(id)

if (!request) return
if (!request) return null

const element = resolveVuePart(descriptors, request)
const code =
'code' in element
? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
: element.content
const map = element.map as any
const map = element.map as RawSourceMap

dL(`id: ${id}\ncode: \n${code}\nmap: ${JSON.stringify(map, null, 2)}\n\n`)

@@ -330,7 +332,7 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
'\n' +
`export * from '${createVuePartRequest(
filename,
block.attrs.lang ||
(typeof block.attrs.lang === 'string' && block.attrs.lang) ||
createVuePartRequest.defaultLang[block.type] ||
block.type,
'customBlocks',
No changes.
@@ -1,20 +1,16 @@
const puppeteer = require('puppeteer')
import * as fs from 'fs'
import * as path from 'path'
import * as assertions from './assertions'

import {build, open} from "./setup"
import { build, open } from './setup'
import { Browser } from 'puppeteer'

let browser = null

function toCamelCase(name: string) : string {
return name.replace(/-(.)/g, (_, char) => char.toUpperCase())
}
let browser: Browser | null = null

beforeAll(async () => {
browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox'],
headless: Boolean(process.env.CI)
headless: Boolean(process.env.CI),
})
})

@@ -23,33 +19,43 @@ describe('baseline', () => {
.filter((filename: string) => filename.endsWith('.vue'))
.map((filename: string) => filename.replace(/\.vue$/i, ''))
.forEach(fixture => {
const name = toCamelCase(fixture)
test(fixture, () => testRunner(fixture, true, assertions[name]))
test(fixture + ' (extract css)', () => testRunner(fixture, false, assertions[name]))
test(fixture, () => testRunner(fixture, true))
test(fixture + ' (extract css)', () => testRunner(fixture, false))
})
})

afterAll(async () => browser && (await browser.close()))

async function testRunner(fixture: string, extractCss: boolean, moreAssertions?: Function): Promise<void> {
async function testRunner(
fixture: string,
extractCss: boolean,
moreAssertions?: Function
): Promise<void> {
const filename = path.join(__dirname, 'fixtures', fixture + '.vue')
const code = await build(filename, extractCss)
const page = await open(
fixture + (extractCss ? '-extract' : ''),
browser,
code
)
expect(await page.$('#test')).toBeTruthy()
expect(
await page.evaluate(() => document.getElementById('test').textContent)
).toEqual(expect.stringContaining('Hello'))
expect(
await page.evaluate(
() => window.getComputedStyle(document.getElementById('test')).color
)
).toEqual('rgb(255, 0, 0)')
try {
const code = await build(filename, extractCss)

moreAssertions && moreAssertions(page)

await page.close()
const page = await open(
fixture + (extractCss ? '-extract' : ''),
browser!,
code
)
expect(await page.$('#test')).toBeTruthy()
expect(
await page.evaluate(() => document.getElementById('test')!.textContent)
).toEqual(expect.stringContaining('Hello'))
expect(
await page.evaluate(
() => window.getComputedStyle(document.getElementById('test')!).color
)
).toEqual('rgb(255, 0, 0)')

moreAssertions && moreAssertions(page)

await page.close()
} catch (error) {
console.error({ error })

throw error
}
}
@@ -2,5 +2,4 @@
<h1 id="test" style="color: red;">Hello {{ name }}!</h1>
</template>

<script src="./script.js">
</script>
<script src="./script.js"></script>
@@ -10,5 +10,4 @@ export default {
}
</script>

<style src="./style.css">
</style>
<style src="./style.css"></style>
@@ -64,10 +64,16 @@ h1 {
</style>

<template>
<div>
<div><h1>hi</h1></div>
<p class="abc def">hi</p>
<template v-if="!ok"><p class="test" id="test">Hello</p></template>
<svg><template><p></p></template></svg>
</div>
<div>
<div><h1>hi</h1></div>
<p class="abc def">hi</p>
<template v-if="!ok"
><p class="test" id="test">Hello</p></template
>
<svg>
<template>
<p></p>
</template>
</svg>
</div>
</template>
@@ -1,6 +1,7 @@
<template comments>
<div>
<h2 class="red" id="test">{{msg}}</h2><!-- comment here -->
<h2 class="red" id="test">{{ msg }}</h2>
<!-- comment here -->
</div>
</template>

@@ -1,8 +1,7 @@
<template functional>
<div>
<h2 id="test" style="color: red">Hello! {{ props.msg }}</h2>
<slot></slot>
<slot name="slot2"></slot>
<slot></slot> <slot name="slot2"></slot>
<slot :msg="props.msg" name="scoped"></slot>
<div>Some <span>text</span></div>
<div v-if="false">Not exist</div>
Oops, something went wrong.

0 comments on commit 5ac7474

Please sign in to comment.