feat(setup-block): init

.changeset/metal-keys-drive.md

@@ -0,0 +1,5 @@
+---
+'@vue-macros/setup-block': patch
+---
+
+support `<setup>` block for shortcut of `<script setup lang="ts">`

packages/macros/package.json

@@ -80,6 +80,7 @@
     "@vue-macros/define-slots": "workspace:*",
     "@vue-macros/hoist-static": "workspace:*",
     "@vue-macros/named-template": "workspace:*",
+    "@vue-macros/setup-block": "workspace:*",
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",
     "@vue-macros/short-emits": "workspace:*",

packages/macros/src/index.ts

@@ -7,6 +7,7 @@ import VueDefineRender from '@vue-macros/define-render'
 import VueDefineSlots from '@vue-macros/define-slots'
 import VueHoistStatic from '@vue-macros/hoist-static'
 import VueNamedTemplate from '@vue-macros/named-template'
+import VueSetupBlock from '@vue-macros/setup-block'
 import VueSetupComponent from '@vue-macros/setup-component'
 import VueSetupSFC from '@vue-macros/setup-sfc'
 import VueShortEmits from '@vue-macros/short-emits'
@@ -26,6 +27,7 @@ import type { Options as OptionsDefineRender } from '@vue-macros/define-render'
 import type { Options as OptionsDefineSlots } from '@vue-macros/define-slots'
 import type { Options as OptionsHoistStatic } from '@vue-macros/hoist-static'
 import type { Options as OptionsNamedTemplate } from '@vue-macros/named-template'
+import type { Options as OptionsSetupBlock } from '@vue-macros/setup-block'
 import type { Options as OptionsSetupComponent } from '@vue-macros/setup-component'
 import type { Options as OptionsSetupSFC } from '@vue-macros/setup-sfc'
 import type { Options as OptionsShortEmits } from '@vue-macros/short-emits'
@@ -39,6 +41,7 @@ export interface FeatureOptionsMap {
   defineSlots: OptionsDefineSlots
   hoistStatic: OptionsHoistStatic
   namedTemplate: OptionsNamedTemplate
+  setupBlock: OptionsSetupBlock
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
   shortEmits: OptionsShortEmits
@@ -79,6 +82,7 @@ function resolveOptions({
   defineSlots,
   hoistStatic,
   namedTemplate,
+  setupBlock,
   setupComponent,
   setupSFC,
   shortEmits,
@@ -112,6 +116,7 @@ function resolveOptions({
     defineSlots: resolveSubOptions<'defineSlots'>(defineSlots),
     hoistStatic: resolveSubOptions<'hoistStatic'>(hoistStatic),
     namedTemplate: resolveSubOptions<'namedTemplate'>(namedTemplate),
+    setupBlock: resolveSubOptions<'setupBlock'>(setupBlock),
     setupComponent: resolveSubOptions<'setupComponent'>(setupComponent, {
       root,
     }),
@@ -149,6 +154,7 @@ export default createCombinePlugin((userOptions: Options = {}) => {
   const plugins: OptionsPlugin[] = [
     resolvePlugin(options.setupSFC, VueSetupSFC),
     resolvePlugin(options.setupComponent, VueSetupComponent, 0),
+    resolvePlugin(options.setupBlock, VueSetupBlock),
     resolvePlugin(options.hoistStatic, VueHoistStatic),
     resolvePlugin(options.namedTemplate, VueNamedTemplate, 0),
     resolvePlugin(options.defineProps, VueDefineProps),

packages/setup-block/README.md

@@ -0,0 +1,3 @@
+# @vue-macros/setup-block [![npm](https://img.shields.io/npm/v/@vue-macros/setup-block.svg)](https://npmjs.com/package/@vue-macros/setup-block)
+
+Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)

packages/setup-block/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@vue-macros/setup-block",
+  "version": "0.0.0",
+  "packageManager": "pnpm@7.17.0",
+  "description": "",
+  "keywords": [
+    "unplugin",
+    "vue",
+    "sfc",
+    "setup",
+    "macros",
+    "script-setup",
+    "setup-block"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/sxzz/unplugin-vue-macros#readme",
+  "bugs": {
+    "url": "https://github.com/sxzz/unplugin-vue-macros/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sxzz/unplugin-vue-macros.git"
+  },
+  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./vite": {
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
+    "./webpack": {
+      "require": "./dist/webpack.js",
+      "import": "./dist/webpack.mjs"
+    },
+    "./rollup": {
+      "require": "./dist/rollup.js",
+      "import": "./dist/rollup.mjs"
+    },
+    "./esbuild": {
+      "require": "./dist/esbuild.js",
+      "import": "./dist/esbuild.mjs"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsx ../../scripts/postbuild.mts",
+    "dev": "DEV=1 tsup"
+  },
+  "dependencies": {
+    "@rollup/pluginutils": "^4.2.1",
+    "@vue-macros/common": "workspace:~",
+    "@vue/compiler-dom": "^3.2.45",
+    "unplugin": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=14.19.0"
+  }
+}

packages/setup-block/src/core/index.ts

@@ -0,0 +1,59 @@
+import { MagicString, getTransformResult } from '@vue-macros/common'
+import { parse } from '@vue/compiler-dom'
+
+export const transformSetupBlock = (
+  code: string,
+  id: string,
+  lang?: string
+) => {
+  const s = new MagicString(code)
+
+  const node = parse(code, {
+    // there are no components at SFC parsing level
+    isNativeTag: () => true,
+    // preserve all whitespaces
+    isPreTag: () => true,
+    getTextMode: ({ tag, props }, parent) => {
+      // all top level elements except <template> are parsed as raw text
+      // containers
+      if (
+        (!parent && tag !== 'template') ||
+        // <template lang="xxx"> should also be treated as raw text
+        (tag === 'template' &&
+          props.some(
+            (p) =>
+              p.type === 6 /* NodeTypes.ATTRIBUTE */ &&
+              p.name === 'lang' &&
+              p.value &&
+              p.value.content &&
+              p.value.content !== 'html'
+          ))
+      ) {
+        return 2 /* TextModes.RAWTEXT */
+      } else {
+        return 0 /* TextModes.DATA */
+      }
+    },
+  })
+  for (const child of node.children) {
+    if (child.type === 1 && child.tag === 'setup') {
+      const hasLang = child.props.some((p) => p.name === 'lang')
+      let codegen = 'script setup'
+      if (!hasLang && lang) {
+        codegen += ` lang="${lang}"`
+      }
+      s.overwrite(
+        child.loc.start.offset + 1 /* '<'.length */,
+        child.loc.start.offset + 6 /* '<setup'.length */,
+        codegen
+      )
+      s.overwrite(
+        child.loc.end.offset - 6 /* `setup>`.length */,
+        child.loc.end.offset - 1 /* '>'.length */,
+        'script'
+      )
+    }
+  }
+
+  return getTransformResult(s, id)
+}

packages/setup-block/src/esbuild.ts

@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.esbuild

packages/setup-block/src/index.ts

@@ -0,0 +1,47 @@
+import { createUnplugin } from 'unplugin'
+import { createFilter } from '@rollup/pluginutils'
+import { REGEX_SETUP_SFC, REGEX_VUE_SFC } from '@vue-macros/common'
+import { transformSetupBlock } from './core'
+import type { FilterPattern } from '@rollup/pluginutils'
+
+export interface Options {
+  include?: FilterPattern
+  exclude?: FilterPattern
+  defaultLang?: string
+}
+
+export type OptionsResolved = Omit<Required<Options>, 'exclude'> & {
+  exclude?: FilterPattern
+}
+
+function resolveOption(options: Options): OptionsResolved {
+  return {
+    include: [REGEX_VUE_SFC, REGEX_SETUP_SFC],
+    defaultLang: 'ts',
+    ...options,
+  }
+}
+
+const name = 'unplugin-vue-setup-block'
+
+export default createUnplugin((userOptions: Options = {}) => {
+  const options = resolveOption(userOptions)
+  const filter = createFilter(options.include, options.exclude)
+
+  return {
+    name,
+    enforce: 'pre',
+
+    transformInclude(id) {
+      return filter(id)
+    },
+
+    transform(code, id) {
+      try {
+        return transformSetupBlock(code, id, options.defaultLang)
+      } catch (err: unknown) {
+        this.error(`${name} ${err}`)
+      }
+    },
+  }
+})

packages/setup-block/src/rollup.ts

@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rollup

packages/setup-block/src/vite.ts

@@ -0,0 +1,4 @@
+import unplugin from '.'
+import type {} from 'vite'
+
+export default unplugin.vite

packages/setup-block/src/webpack.ts

@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.webpack

packages/setup-block/tests/__snapshots__/fixtures.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1
+
+exports[`fixtures > ./fixtures/basic.vue 1`] = `
+"<script setup lang=\\"magic\\">
+import { ref } from 'vue'
+
+console.log('Hello World')
+
+const msg = ref('Hello World')
+</script>
+"
+`;
+
+exports[`fixtures > ./fixtures/with-lang.vue 1`] = `
+"<script setup lang=\\"ts\\">
+import { ref } from 'vue'
+
+console.log('Hello World')
+
+const msg = ref('Hello World')
+</script>
+"
+`;

packages/setup-block/tests/fixtures.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest'
+import { transformSetupBlock } from '../src/core'
+
+describe('fixtures', () => {
+  const files = import.meta.glob('./fixtures/*.vue', {
+    eager: true,
+    as: 'raw',
+  })
+
+  for (const [id, code] of Object.entries(files)) {
+    test(id.replace(/\\/g, '/'), () => {
+      const exec = () => transformSetupBlock(code, id, 'magic')?.code
+
+      if (id.includes('error')) {
+        expect(exec).toThrowErrorMatchingSnapshot()
+      } else {
+        expect(exec()).toMatchSnapshot()
+      }
+    })
+  }
+})

packages/setup-block/tests/fixtures/basic.vue

@@ -0,0 +1,7 @@
+<setup>
+import { ref } from 'vue'
+
+console.log('Hello World')
+
+const msg = ref('Hello World')
+</setup>

packages/setup-block/tests/fixtures/with-lang.vue

@@ -0,0 +1,7 @@
+<setup lang="ts">
+import { ref } from 'vue'
+
+console.log('Hello World')
+
+const msg = ref('Hello World')
+</setup>

packages/setup-block/tsup.config.ts

@@ -0,0 +1,3 @@
+import cfg from '../common/tsup.config.js'
+
+export default cfg

playground/vue3/src/App.vue

@@ -8,6 +8,7 @@ import DefineModelRuntimeVue from './examples/define-model/runtime/parent.vue'
 import DefineSlotsVue from './examples/define-slots/parent.vue'
 import BetterDefineVue from './examples/better-define/index.vue'
 import NamedTemplateVue from './examples/named-template/index.vue'
+import SetupBlockVue from './examples/setup-block/index.vue'
 
 import { SetupComponentFoo } from './examples/setup-component'
 
@@ -69,6 +70,11 @@ import Full from './examples/full.setup'
     <SetupSFC />
   </fieldset>
 
+  <fieldset>
+    <legend>setupBlock</legend>
+    <SetupBlockVue />
+  </fieldset>
+
   <fieldset>
     <legend>Short v-model</legend>
     <short-vmodel />

playground/vue3/src/examples/setup-block/index.vue

@@ -0,0 +1,9 @@
+<setup>
+import { ref } from 'vue'
+const msg = ref('Hello World')
+</setup>
+
+<template>
+  <div>setupBlock</div>
+  {{ msg }}
+</template>