Repository: antfu/unplugin-vue2-script-setup Branch: main Commit: 1aaaf584be97 Files: 103 Total size: 109.5 KB Directory structure: gitextract_7eas0mg5/ ├── .eslintignore ├── .eslintrc.json ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ ├── release.yml │ └── test.yml ├── .gitignore ├── .npmrc ├── .tazerc.json ├── LICENSE ├── README.md ├── esbuild.d.ts ├── examples/ │ └── vue-cli/ │ ├── .npmrc │ ├── babel.config.js │ ├── package.json │ ├── public/ │ │ └── index.html │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── HelloWorld.vue │ │ ├── main.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vue.config.cjs ├── index.d.ts ├── jest.js ├── nuxt.d.ts ├── package.json ├── playground/ │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── Async.vue │ │ ├── Bar.vue │ │ ├── ButtonTest.vue │ │ ├── Foo.vue │ │ ├── HelloWorld.vue │ │ ├── main.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-workspace.yaml ├── ref-macros.d.ts ├── rollup.config.mjs ├── rollup.d.ts ├── scripts/ │ └── postbuild.ts ├── shims.d.ts ├── src/ │ ├── core/ │ │ ├── babel.ts │ │ ├── identifiers.ts │ │ ├── index.ts │ │ ├── macros.ts │ │ ├── options.ts │ │ ├── parseSFC.ts │ │ ├── transform.ts │ │ ├── transformScriptSetup.ts │ │ ├── transformSfcRefSugar.ts │ │ └── utils.ts │ ├── esbuild.ts │ ├── index.ts │ ├── lib.ts │ ├── nuxt.ts │ ├── rollup.ts │ ├── types.ts │ ├── vite.ts │ └── webpack.ts ├── test/ │ ├── __snapshots__/ │ │ └── transform.test.ts.snap │ ├── errors.test.ts │ ├── fixtures/ │ │ ├── AsyncImport.vue │ │ ├── ComponentsDirectives.vue │ │ ├── ComponentsDirectivesLocal.vue │ │ ├── ComponentsLocal.vue │ │ ├── DynamicStyle.vue │ │ ├── Empty.vue │ │ ├── Enum.vue │ │ ├── HtmlTag.vue │ │ ├── HtmlTag2.vue │ │ ├── JSLongComment.vue │ │ ├── Macros.vue │ │ ├── MacrosDefineExpose.vue │ │ ├── MacrosPure.vue │ │ ├── MacrosType.vue │ │ ├── MacrosType2.vue │ │ ├── MacrosType3.vue │ │ ├── MacrosType4.vue │ │ ├── MacrosType5.vue │ │ ├── MacrosType6.vue │ │ ├── MacrosTypeAny.vue │ │ ├── Object1.vue │ │ ├── ObjectDestructure.vue │ │ ├── Pug1.vue │ │ ├── RefSugar.ts │ │ ├── RefSugar.vue │ │ ├── RefSugarScriptSetup.vue │ │ ├── ScriptLessThanOrEqualTo.vue │ │ ├── ScriptOnly.vue │ │ ├── TemplateOnly.vue │ │ ├── TemplateOptionalChaining.vue │ │ ├── VFor.vue │ │ └── VariableBinding.vue │ ├── identifiers.test.ts │ ├── nativeTag.test.ts │ ├── transform.test.ts │ └── transform_filter.test.ts ├── tsconfig.json ├── types.d.ts ├── vite.d.ts └── webpack.d.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintignore ================================================ dist node_modules *.vue ================================================ FILE: .eslintrc.json ================================================ { "extends": "@antfu" } ================================================ FILE: .github/FUNDING.yml ================================================ github: [antfu] ================================================ FILE: .github/workflows/release.yml ================================================ name: Release on: push: tags: - 'v*' jobs: release: runs-on: ubuntu-latest permissions: contents: write steps: - uses: actions/checkout@v2 with: fetch-depth: 0 - uses: actions/setup-node@v2 with: node-version: lts/* registry-url: https://registry.npmjs.org/ - run: npm i -g pnpm @antfu/ni - run: nci - run: nr test --if-present # - run: npm publish --access public # env: # NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} - run: npx conventional-github-releaser -p angular env: CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{secrets.GITHUB_TOKEN}} ================================================ FILE: .github/workflows/test.yml ================================================ name: Test on: push: branches: - main - master pull_request: branches: - main - master jobs: build: runs-on: ${{ matrix.os }} strategy: matrix: node: [18.x] os: [ubuntu-latest, windows-latest, macos-latest] fail-fast: false steps: - uses: actions/checkout@v2 - name: Install pnpm uses: pnpm/action-setup@v2 - name: Set node version to ${{ matrix.node }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node }} cache: pnpm - uses: actions/checkout@v2 - name: Install run: pnpm i - name: Lint run: pnpm run lint - name: Build run: pnpm run build - name: Test run: pnpm run test - name: Build Examples run: pnpm run build:examples ================================================ FILE: .gitignore ================================================ # Created by .ignore support plugin (hsz.mobi) ### Node template # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env # parcel-bundler cache (https://parceljs.org/) .cache # next.js build output .next # nuxt.js build output .nuxt # Nuxt generate dist # vuepress build output .vuepress/dist # Serverless directories .serverless # IDE .idea temp.ts .output ================================================ FILE: .npmrc ================================================ ignore-workspace-root-check=true strict-peer-dependencies=false ================================================ FILE: .tazerc.json ================================================ { "exclude": [ "vue", "htmlparser2" ] } ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2021 Anthony Fu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # unplugin-vue2-script-setup [![NPM version](https://img.shields.io/npm/v/unplugin-vue2-script-setup?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue2-script-setup) Bring [` `) ```
## IDE We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it). When using Volar, you need to install `@vue/runtime-dom` as devDependencies to make it work on Vue 2. ```bash npm i -D @vue/runtime-dom ``` [Learn more](https://github.com/johnsoncodehk/volar#using) ###### Global Types If the global types are missing for your IDE, update your `tsconfig.json` with: ```jsonc { "compilerOptions": { "types": [ "unplugin-vue2-script-setup/types" ] } } ``` ###### Support Vue 2 template Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the `experimentalCompatMode` option to support Vue 2 template. ```jsonc { "compilerOptions": { // ... }, "vueCompilerOptions": { "target": 2 } } ``` ###### ESLint If you are using ESLint, you might get `@typescript-eslint/no-unused-vars` warning with ` ================================================ FILE: examples/vue-cli/src/components/HelloWorld.vue ================================================ ================================================ FILE: examples/vue-cli/src/main.ts ================================================ import Vue from 'vue' import VueCompositionAPI, { createApp, h } from '@vue/composition-api' import App from './App.vue' Vue.config.productionTip = false Vue.use(VueCompositionAPI) const app = createApp({ render: () => h(App), }) app.mount('#app') ================================================ FILE: examples/vue-cli/src/shims-vue.d.ts ================================================ /// ================================================ FILE: examples/vue-cli/tsconfig.json ================================================ { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": false, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "types": [ "webpack-env" ], "lib": [ "esnext", "dom", "dom.iterable" ] }, "include": [ "src" ], "exclude": [ "node_modules" ], "vueCompilerOptions": { "target": 2 } } ================================================ FILE: examples/vue-cli/vue.config.cjs ================================================ const { defineConfig } = require('@vue/cli-service') const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default module.exports = defineConfig({ configureWebpack: { plugins: [ ScriptSetup({ reactivityTransform: true, }), ], }, parallel: false, chainWebpack(config) { // disable type check and let `vue-tsc` handles it config.plugins.delete('fork-ts-checker') // disable cache for testing, you should remove this in production config.module.rule('vue').uses.delete('cache-loader') config.module.rule('js').uses.delete('cache-loader') config.module.rule('ts').uses.delete('cache-loader') config.module.rule('tsx').uses.delete('cache-loader') }, }) ================================================ FILE: index.d.ts ================================================ export { default } from './dist/index' ================================================ FILE: jest.js ================================================ const { transform } = require('./dist/index') function requireVueJest() { const names = ['@vue/vue2-jest', 'vue-jest'] for (const name of names) { try { return require(name) } catch (e) { // Try next module } } throw new Error(`Cannot find a Jest transformer for Vue SFC, you should install one of these packages: ${names.join(', ')}`) } module.exports = { async process(source, filename, ...args) { const transformed = await transform(source, filename) const code = transformed ? transformed.code : source return requireVueJest().process.call(this, code, filename, ...args) }, } ================================================ FILE: nuxt.d.ts ================================================ export { default } from './dist/nuxt' ================================================ FILE: package.json ================================================ { "name": "unplugin-vue2-script-setup", "version": "0.11.4", "packageManager": "pnpm@8.6.11", "description": "Bring ================================================ FILE: playground/package.json ================================================ { "private": true, "scripts": { "dev": "vite --open", "build": "vite build" }, "dependencies": { "@vue/composition-api": "^1.7.1", "vue": "^2.6.14" }, "devDependencies": { "vite": "^4.4.8", "vite-plugin-inspect": "^0.7.35", "vite-plugin-vue2": "^2.0.3", "vue-template-compiler": "~2.6.14" } } ================================================ FILE: playground/src/App.vue ================================================ ================================================ FILE: playground/src/Async.vue ================================================ ================================================ FILE: playground/src/Bar.vue ================================================ ================================================ FILE: playground/src/ButtonTest.vue ================================================ ================================================ FILE: playground/src/Foo.vue ================================================ ================================================ FILE: playground/src/HelloWorld.vue ================================================ ================================================ FILE: playground/src/main.ts ================================================ import Vue from 'vue' import VueCompositionAPI, { createApp, h } from '@vue/composition-api' import App from './App.vue' Vue.use(VueCompositionAPI) const app = createApp({ render: () => h(App) }) app.mount('#app') ================================================ FILE: playground/src/shims-vue.d.ts ================================================ /// /// ================================================ FILE: playground/tsconfig.json ================================================ { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": false, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "types": [ "webpack-env" ], "lib": [ "esnext", "dom", "dom.iterable" ] }, "include": [ "src" ], "exclude": [ "node_modules" ], "vueCompilerOptions": { "experimentalCompatMode": 2 } } ================================================ FILE: playground/vite.config.ts ================================================ import { defineConfig } from 'vite' import { createVuePlugin as Vue2 } from 'vite-plugin-vue2' import Inspect from 'vite-plugin-inspect' import { unplugin } from '../src' const ScriptSetup = unplugin.vite export default defineConfig({ plugins: [ Vue2(), Inspect(), ScriptSetup({ reactivityTransform: true, }), ], }) ================================================ FILE: pnpm-workspace.yaml ================================================ - packages - playground - examples/* ================================================ FILE: ref-macros.d.ts ================================================ import type { ComputedRef, Ref, ShallowUnwrapRef, UnwrapRef, WritableComputedOptions, WritableComputedRef, } from '@vue/composition-api' declare const RefMarker: unique symbol type RefValue = T & { [RefMarker]?: any } declare const ComputedRefMarker: unique symbol type ComputedRefValue = T & { [ComputedRefMarker]?: any } declare const WritableComputedRefMarker: unique symbol type WritableComputedRefValue = T & { [WritableComputedRefMarker]?: any } type ToRawRefs = { [K in keyof T]: T[K] extends ComputedRefValue ? ComputedRefValue : T[K] extends WritableComputedRefValue ? WritableComputedRef : T[K] extends RefValue ? Ref : T[K] extends object ? T[K] extends | Function | Map | Set | WeakMap | WeakSet ? T[K] : ToRawRefs : T[K]; } /** * Vue ref transform macro for binding refs as reactive variables. */ declare function _$(arg: ComputedRef): ComputedRefValue declare function _$( arg: WritableComputedRef ): WritableComputedRefValue declare function _$(arg: Ref): RefValue declare function _$(arg?: T): ShallowUnwrapRef /** * Vue ref transform macro for accessing underlying refs of reactive varaibles. */ declare function _$$(value: T): ComputedRef declare function _$$( value: WritableComputedRefValue ): WritableComputedRef declare function _$$(value: RefValue): Ref declare function _$$(arg: T): ToRawRefs declare function _$ref(arg?: T | Ref): RefValue> declare function _$shallowRef(arg?: T): RefValue declare function _$computed( getter: () => T, // debuggerOptions?: DebuggerOptions ): ComputedRefValue declare function _$computed( options: WritableComputedOptions, // debuggerOptions?: DebuggerOptions ): WritableComputedRefValue declare global { const $: typeof _$ const $$: typeof _$$ const $ref: typeof _$ref const $shallowRef: typeof _$shallowRef const $computed: typeof _$computed } ================================================ FILE: rollup.config.mjs ================================================ // @ts-check import * as fs from 'node:fs' import ts from 'rollup-plugin-esbuild' import dts from 'rollup-plugin-dts' import resolve from '@rollup/plugin-node-resolve' import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import alias from '@rollup/plugin-alias' /** @type {import('./package.json')} */ const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8')) const entries = { index: 'src/index.ts', webpack: 'src/webpack.ts', vite: 'src/vite.ts', rollup: 'src/rollup.ts', esbuild: 'src/esbuild.ts', nuxt: 'src/nuxt.ts', types: 'src/types.ts', } const external = [ ...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies), 'esbuild', 'rollup', 'vite', 'webpack', '@nuxt/kit', ] /** @type {import('rollup').RollupOptions[]} */ export default [ { input: entries, external, plugins: [ alias({ entries: [ { find: /^node:(.+)$/, replacement: '$1' }, ], }), resolve({ preferBuiltins: true, }), json(), commonjs(), ts(), ], onwarn({ code, message }) { if(code === 'EMPTY_BUNDLE') return console.error(message) }, output:[ { dir: 'dist', format: 'esm', sourcemap: 'inline', entryFileNames: "[name].mjs", }, { dir: 'dist', format: 'cjs', exports: 'named', sourcemap: 'inline', entryFileNames: "[name].js", }, ] }, { input: entries, external, plugins: [ dts({ respectExternal: true }), ], output: [ { dir: 'dist', entryFileNames: "[name].d.mts", }, { dir: 'dist', entryFileNames: "[name].d.ts", }, ], }, ] ================================================ FILE: rollup.d.ts ================================================ export { default } from './dist/rollup' ================================================ FILE: scripts/postbuild.ts ================================================ import { basename, resolve } from 'node:path' import { promises as fs } from 'node:fs' import fg from 'fast-glob' async function run() { // fix cjs exports const files = await fg('*.js', { ignore: ['chunk-*'], absolute: true, cwd: resolve(__dirname, '../dist'), }) for (const file of files) { console.log('[postbuild]', basename(file)) const name = basename(file, '.js') let code = await fs.readFile(file, 'utf8') code = code.replace('exports.default =', 'module.exports =') code += 'exports.default = module.exports;' await fs.writeFile(file, code) await fs.writeFile(`${name}.d.ts`, `import './shims'\nexport { default } from './dist/${name}'\n`) } } run() ================================================ FILE: shims.d.ts ================================================ // workaround for Volar to infer the ref type in