chore: commit vue case

Author: sonofmagic

packages/core/package.json

@@ -51,6 +51,7 @@
     "@babel/types": "^7.22.17",
     "@tailwindcss-mangle/config": "workspace:^",
     "@tailwindcss-mangle/shared": "workspace:^",
+    "@vue/compiler-sfc": "^3.3.4",
     "fast-sort": "^3.4.0",
     "magic-string": "^0.30.3",
     "micromatch": "^4.0.5",
@@ -63,7 +64,8 @@
     "@parse5/tools": "^0.3.0",
     "@types/babel__core": "^7.20.1",
     "@types/babel__traverse": "^7.20.1",
-    "@types/micromatch": "^4.0.2"
+    "@types/micromatch": "^4.0.2",
+    "@vue/compiler-core": "^3.3.4"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
   "repository": {

packages/core/test/__snapshots__/vue.test.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`vue > module mode preamble 1`] = `
+"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return null
+}"
+`;

packages/core/test/utils/svelte-to-tsx.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable camelcase */
+import MagicString from 'magic-string'
+
+/** @see https://github.com/sveltejs/svelte/blob/d3297e2a2595db08c85356d65fd5f953b04a681f/packages/svelte/src/compiler/preprocess/index.js#L255C1-L255C85 */
+const regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
+
+/** @see https://github.com/sveltejs/svelte/blob/d3297e2a2595db08c85356d65fd5f953b04a681f/packages/svelte/src/compiler/preprocess/index.js#L256C1-L256C88 */
+const regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi
+
+export const svelteToTsx = (code: string) => {
+  try {
+    const scripts = []
+    const original = new MagicString(code)
+
+    // Remove script tags & extract script content
+    let match: RegExpExecArray | null
+    while ((match = regex_script_tags.exec(code)) != null) {
+      const [fullMatch, _attributesStr, scriptContent] = match
+      if (scriptContent) {
+        scripts.push(scriptContent)
+        original.remove(match.index, match.index + fullMatch.length)
+      }
+    }
+
+    const templateContent = original.toString().trimStart().replaceAll(regex_style_tags, '').replaceAll(regex_style_tags, '')
+    const transformed = `${scripts.join('')}\nconst render = <div>${templateContent}</div>`
+
+    return transformed.toString().trim()
+  } catch {
+    return ''
+  }
+}

packages/core/test/utils/vue-to-tsx.ts

@@ -0,0 +1,74 @@
+/* eslint-disable unicorn/no-array-for-each */
+import { parse } from '@vue/compiler-sfc'
+import MagicString from 'magic-string'
+import type { BaseElementNode } from '@vue/compiler-core'
+// https://github.com/chakra-ui/panda/blob/09ed20f919113d310c870b136c5a1c55ecc1b1e1/packages/parser/src/vue-to-tsx.ts
+/**
+ * @see https://github.com/vuejs/core/blob/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f/packages/compiler-core/src/ast.ts#L28-L60
+ * import { NodeTypes } from '@vue/compiler-core' isn't working for some reason (?)
+ *  Cannot read properties of undefined (reading 'ELEMENT')
+ */
+const NodeTypes = {
+  ROOT: 0,
+  ELEMENT: 1,
+  TEXT: 2,
+  COMMENT: 3,
+  SIMPLE_EXPRESSION: 4,
+  INTERPOLATION: 5,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+  COMPOUND_EXPRESSION: 8,
+  IF: 9,
+  IF_BRANCH: 10,
+  FOR: 11,
+  TEXT_CALL: 12,
+  VNODE_CALL: 13,
+  JS_CALL_EXPRESSION: 14,
+  JS_OBJECT_EXPRESSION: 15,
+  JS_PROPERTY: 16,
+  JS_ARRAY_EXPRESSION: 17,
+  JS_FUNCTION_EXPRESSION: 18,
+  JS_CONDITIONAL_EXPRESSION: 19,
+  JS_CACHE_EXPRESSION: 20,
+  JS_BLOCK_STATEMENT: 21,
+  JS_TEMPLATE_LITERAL: 22,
+  JS_IF_STATEMENT: 23,
+  JS_ASSIGNMENT_EXPRESSION: 24,
+  JS_SEQUENCE_EXPRESSION: 25,
+  JS_RETURN_STATEMENT: 26
+} as const
+
+export const vueToTsx = (code: string) => {
+  try {
+    const parsed = parse(code)
+    const fileStr = new MagicString(`<template>${parsed.descriptor.template?.content}</template>` ?? '')
+
+    const rewriteProp = (prop: BaseElementNode['props'][number]) => {
+      if (prop.type === NodeTypes.DIRECTIVE && prop.exp?.type === NodeTypes.SIMPLE_EXPRESSION && prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION) {
+        fileStr.replace(prop.loc.source, `${prop.arg.content}={${prop.exp.content}}`)
+      }
+    }
+
+    const stack = [...parsed.descriptor.template!.ast.children]
+    // recursion-free traversal
+    while (stack.length > 0) {
+      const node = stack.pop()
+      if (!node) continue
+
+      if (node.type === NodeTypes.ELEMENT) {
+        node.props.forEach((element) => {
+          rewriteProp(element)
+        })
+        for (const child of node.children) stack.push(child)
+      }
+    }
+
+    const scriptContent = (parsed.descriptor.scriptSetup ?? parsed.descriptor.script)?.content + '\n'
+
+    const transformed = new MagicString(`${scriptContent}\nconst render = ${fileStr.toString()}`)
+
+    return transformed.toString()
+  } catch {
+    return ''
+  }
+}

packages/core/test/vue.test.ts

@@ -0,0 +1,105 @@
+import { parse, walk } from '@vue/compiler-sfc'
+import {
+  generate,
+  baseParse,
+  transform,
+  TransformOptions,
+  RootNode,
+  locStub,
+  createSimpleExpression,
+  CREATE_VNODE,
+  RESOLVE_DIRECTIVE,
+  helperNameMap,
+  NodeTransform
+} from '@vue/compiler-core'
+import { getTestCase } from './utils'
+
+const NodeTypes = {
+  ROOT: 0,
+  ELEMENT: 1,
+  TEXT: 2,
+  COMMENT: 3,
+  SIMPLE_EXPRESSION: 4,
+  INTERPOLATION: 5,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+  COMPOUND_EXPRESSION: 8,
+  IF: 9,
+  IF_BRANCH: 10,
+  FOR: 11,
+  TEXT_CALL: 12,
+  VNODE_CALL: 13,
+  JS_CALL_EXPRESSION: 14,
+  JS_OBJECT_EXPRESSION: 15,
+  JS_PROPERTY: 16,
+  JS_ARRAY_EXPRESSION: 17,
+  JS_FUNCTION_EXPRESSION: 18,
+  JS_CONDITIONAL_EXPRESSION: 19,
+  JS_CACHE_EXPRESSION: 20,
+  JS_BLOCK_STATEMENT: 21,
+  JS_TEMPLATE_LITERAL: 22,
+  JS_IF_STATEMENT: 23,
+  JS_ASSIGNMENT_EXPRESSION: 24,
+  JS_SEQUENCE_EXPRESSION: 25,
+  JS_RETURN_STATEMENT: 26
+} as const
+
+function createRoot(options: Partial<RootNode> = {}): RootNode {
+  return {
+    type: 0, // NodeTypes.ROOT,
+    children: [],
+    helpers: new Set(),
+    components: [],
+    directives: [],
+    imports: [],
+    hoists: [],
+    cached: 0,
+    temps: 0,
+    codegenNode: createSimpleExpression(`null`, false),
+    loc: locStub,
+    ...options
+  }
+}
+// https://github.com/vuejs/core/blob/main/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+describe('vue', () => {
+  test('module mode preamble', () => {
+    const root = createRoot({
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+    })
+    const { code } = generate(root, { mode: 'module' })
+    expect(code).toMatch(
+      `import { ${helperNameMap[CREATE_VNODE]} as _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`
+    )
+    expect(code).toMatchSnapshot()
+  })
+  it('test for vue', () => {
+    const testCase = getTestCase('preserve-fn-case1.vue')
+    const result = parse(testCase)
+
+    console.log(result.descriptor.template, result.descriptor.script, result.descriptor.scriptSetup)
+    const content = result.descriptor.template?.content ?? ''
+    const ast = baseParse(content)
+    const plugin: NodeTransform = (node, context) => {
+      if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
+        // change the node to <p>
+        context.replaceNode(
+          Object.assign({}, node, {
+            tag: 'p',
+            children: [
+              {
+                type: NodeTypes.TEXT,
+                content: 'hello',
+                isEmpty: false
+              }
+            ]
+          })
+        )
+      }
+    }
+    transform(ast, {
+      nodeTransforms: [plugin]
+    })
+    const t = generate(ast, { mode: 'module' })
+    expect(t.code).toBe(content)
+  })
+})