@vue.ts/complex-types 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ray <https://github.com/so1ve>
+
+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.

package/README.md

@@ -0,0 +1,225 @@
+# unplugin-vue-complex-types
+
+[![NPM version](https://img.shields.io/npm/v/unplugin-vue-complex-types?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-complex-types)
+
+Use [`@vue/language-core`](https://github.com/vuejs/language-tools/tree/master/packages/language-core) to support complex types for Vue Macros.
+
+For example: fixes https://github.com/vuejs/core/issues/8286.
+
+## 📦 Installation
+
+```bash
+$ npm install -D unplugin-vue-complex-types
+$ yarn add -D unplugin-vue-complex-types
+$ pnpm add -D unplugin-vue-complex-types
+```
+
+## TODOs
+
+- [ ] Add more tests
+
+## 🚀 Usage
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import VueComplexTypes from "unplugin-vue-complex-types/vite";
+
+export default defineConfig({
+	plugins: [
+		VueComplexTypes({
+			/* options */
+		}),
+	],
+});
+```
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import VueComplexTypes from "unplugin-vue-complex-types/rollup";
+
+export default {
+	plugins: [
+		VueComplexTypes({
+			/* options */
+		}),
+		// other plugins
+	],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+	/* ... */
+	plugins: [
+		require("unplugin-vue-complex-types/webpack")({
+			/* options */
+		}),
+	],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Rspack</summary><br>
+
+```ts
+// rspack.config.js
+module.exports = {
+	/* ... */
+	plugins: [
+		require("unplugin-vue-complex-types/rspack")({
+			/* options */
+		}),
+	],
+};
+```
+
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+	modules: ["unplugin-vue-complex-types/nuxt"],
+	complexTypes: {
+		/* options */
+	},
+});
+```
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+	configureWebpack: {
+		plugins: [
+			require("unplugin-vue-complex-types/webpack")({
+				/* options */
+			}),
+		],
+	},
+};
+```
+
+<br></details>
+
+<details>
+<summary>Quasar</summary><br>
+
+```ts
+// quasar.conf.js [Vite]
+module.exports = {
+	vitePlugins: [
+		[
+			"unplugin-vue-complex-types/vite",
+			{
+				/* options */
+			},
+		],
+	],
+};
+```
+
+```ts
+// quasar.conf.js [Webpack]
+const VueComplexTypesPlugin = require("unplugin-vue-complex-types/webpack");
+
+module.exports = {
+	build: {
+		chainWebpack(chain) {
+			chain.plugin("unplugin-vue-complex-types").use(
+				VueComplexTypesPlugin({
+					/* options */
+				}),
+			);
+		},
+	},
+};
+```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from "esbuild";
+
+build({
+	/* ... */
+	plugins: [
+		require("unplugin-vue-complex-types/esbuild")({
+			/* options */
+		}),
+	],
+});
+```
+
+<br></details>
+
+<details>
+<summary>Astro</summary><br>
+
+```ts
+// astro.config.mjs
+import VueComplexTypes from "unplugin-vue-complex-types/astro";
+
+export default defineConfig({
+	integrations: [
+		VueComplexTypes({
+			/* options */
+		}),
+	],
+});
+```
+
+<br></details>
+
+## 📚 Options
+
+### `tsconfigPath`
+
+Path to your `tsconfig.json`.
+
+- Type: `string`
+- Default: `path.join(process.cwd(), "tsconfig.json")`
+
+### `defineEmits`
+
+Transform `defineEmits` or not.
+
+- Type: `boolean`
+- Default: `true`
+
+### `defineProps`
+
+Transform `defineProps` or not.
+
+- Type: `boolean`
+- Default: `true`
+
+## 📝 License
+
+[MIT](./LICENSE). Made with ❤️ by [Ray](https://github.com/so1ve)

package/dist/astro.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('@vue.ts/common');
+require('@vue.ts/language');
+require('unplugin');
+require('magic-string');
+require('typescript');
+require('node:path');
+
+const astro = (options) => ({
+  name: "unplugin-vue-complex-types",
+  hooks: {
+    "astro:config:setup": async (astro) => {
+      var _a;
+      (_a = astro.config.vite).plugins || (_a.plugins = []);
+      astro.config.vite.plugins.push(index.vite(options));
+    }
+  }
+});
+
+module.exports = astro;

package/dist/astro.d.cts

@@ -0,0 +1,13 @@
+import { Options } from './types.cjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options: Options) => {
+    name: string;
+    hooks: {
+        "astro:config:setup": (astro: any) => Promise<void>;
+    };
+};
+
+export { _default as default };

package/dist/astro.d.mts

@@ -0,0 +1,13 @@
+import { Options } from './types.mjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options: Options) => {
+    name: string;
+    hooks: {
+        "astro:config:setup": (astro: any) => Promise<void>;
+    };
+};
+
+export { _default as default };

package/dist/astro.d.ts

@@ -0,0 +1,13 @@
+import { Options } from './types.js';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options: Options) => {
+    name: string;
+    hooks: {
+        "astro:config:setup": (astro: any) => Promise<void>;
+    };
+};
+
+export { _default as default };

package/dist/astro.mjs

@@ -0,0 +1,20 @@
+import unplugin from './index.mjs';
+import '@vue.ts/common';
+import '@vue.ts/language';
+import 'unplugin';
+import 'magic-string';
+import 'typescript';
+import 'node:path';
+
+const astro = (options) => ({
+  name: "unplugin-vue-complex-types",
+  hooks: {
+    "astro:config:setup": async (astro) => {
+      var _a;
+      (_a = astro.config.vite).plugins || (_a.plugins = []);
+      astro.config.vite.plugins.push(unplugin.vite(options));
+    }
+  }
+});
+
+export { astro as default };

package/dist/esbuild.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('@vue.ts/common');
+require('@vue.ts/language');
+require('unplugin');
+require('magic-string');
+require('typescript');
+require('node:path');
+
+const esbuild = index.esbuild;
+
+module.exports = esbuild;

package/dist/esbuild.d.cts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.cjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options?: Options | undefined) => unplugin.EsbuildPlugin;
+
+export { _default as default };

package/dist/esbuild.d.mts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.mjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options?: Options | undefined) => unplugin.EsbuildPlugin;
+
+export { _default as default };

package/dist/esbuild.d.ts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.js';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: (options?: Options | undefined) => unplugin.EsbuildPlugin;
+
+export { _default as default };

package/dist/esbuild.mjs

@@ -0,0 +1,11 @@
+import unplugin from './index.mjs';
+import '@vue.ts/common';
+import '@vue.ts/language';
+import 'unplugin';
+import 'magic-string';
+import 'typescript';
+import 'node:path';
+
+const esbuild = unplugin.esbuild;
+
+export { esbuild as default };

package/dist/index.cjs

@@ -0,0 +1,228 @@
+'use strict';
+
+const common = require('@vue.ts/common');
+const language = require('@vue.ts/language');
+const unplugin$1 = require('unplugin');
+const MagicString = require('magic-string');
+const ts = require('typescript');
+const node_path = require('node:path');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
+const ts__default = /*#__PURE__*/_interopDefaultCompat(ts);
+
+const resolveOptions = (rawOptions) => ({
+  include: rawOptions.include ?? ["**/*.vue"],
+  exclude: rawOptions.exclude ?? ["node_modules/**"],
+  tsconfigPath: rawOptions.tsconfigPath ?? node_path.join(process.cwd(), "tsconfig.json"),
+  defineEmits: rawOptions.defineEmits ?? true,
+  defineProps: rawOptions.defineProps ?? true
+});
+const quotesReg = /"/g;
+const escapeQuotes = (s) => s.replace(quotesReg, '\\"');
+
+class Printer {
+  constructor(checker) {
+    this.checker = checker;
+  }
+  getBaseType(nodeOrType) {
+    if ("kind" in nodeOrType) {
+      nodeOrType = this.checker.getTypeAtLocation(nodeOrType);
+    }
+    return this.checker.getBaseConstraintOfType(nodeOrType) ?? this.checker.getBaseTypeOfLiteralType(nodeOrType);
+  }
+  printIntersectionTypeNode(node) {
+    return node.types.map((t) => this.printTypeArg(t)).join(" & ");
+  }
+  printUnionTypeNode(node) {
+    return node.types.map((t) => this.printTypeArg(t)).join(" | ");
+  }
+  printTypeLiteralNode(node) {
+    const parts = ["{"];
+    for (const member of node.members) {
+      if (ts__default.isPropertySignature(member)) {
+        const stringBaseType = member.type ? this.checker.typeToString(this.getBaseType(member.type)) : "any";
+        parts.push(
+          [
+            member.name.getText(),
+            member.questionToken?.getText(),
+            ": ",
+            stringBaseType
+          ].filter(Boolean).join("")
+        );
+      }
+    }
+    parts.push("}");
+    return parts.join("\n");
+  }
+  printByType(node) {
+    const type = this.checker.getTypeAtLocation(node);
+    const properties = type.getProperties();
+    const parts = ["{"];
+    let questionToken = "";
+    if (ts__default.isMappedTypeNode(node)) {
+      questionToken = node.questionToken?.getText() ?? "";
+    }
+    for (const property of properties) {
+      const valueType = this.checker.getTypeOfSymbol(property);
+      const stringValueType = this.checker.typeToString(
+        this.getBaseType(valueType)
+      );
+      parts.push(
+        `${this.checker.symbolToString(
+          property
+        )}${questionToken}: ${stringValueType}`
+      );
+    }
+    parts.push("}");
+    return parts.join("\n");
+  }
+  printTypeArg(node) {
+    if (ts__default.isIntersectionTypeNode(node)) {
+      return this.printIntersectionTypeNode(node);
+    } else if (ts__default.isUnionTypeNode(node)) {
+      return this.printUnionTypeNode(node);
+    } else if (ts__default.isTypeLiteralNode(node)) {
+      return this.printTypeLiteralNode(node);
+    } else if (ts__default.isMappedTypeNode(node) || ts__default.isTypeReferenceNode(node)) {
+      return this.printByType(node);
+    } else {
+      console.error(
+        `[unplugin-vue-complex-types] \`${ts__default.SyntaxKind[node.kind]}\` is not supported.`
+      );
+      return node.getText();
+    }
+  }
+  printEventsByCallSignatures(callSignatures) {
+    return callSignatures.map((c) => {
+      const parameters = c.getParameters();
+      const event = parameters[0];
+      return this.checker.typeToString(this.checker.getTypeOfSymbol(event));
+    });
+  }
+  printEventsByMembers(members) {
+    return members.map((m) => `"${escapeQuotes(m.getName())}"`);
+  }
+  printEventsRuntimeArg(node) {
+    const parts = [];
+    const type = this.checker.getTypeAtLocation(node);
+    const callSignatures = type.getCallSignatures();
+    const members = type.getProperties();
+    if (callSignatures.length > 0 && members.length > 0) {
+      throw new Error(
+        "[unplugin-vue-complex-types] You may not use old style `defineEmits` and `defineEmits` shorthand together."
+      );
+    }
+    if (members.length > 0) {
+      parts.push(...this.printEventsByMembers(members));
+    } else {
+      parts.push(...this.printEventsByCallSignatures(callSignatures));
+    }
+    return `[${parts.join(", ")}]`;
+  }
+}
+
+const transformDefineEmits = (printer, s, id) => {
+  const language$1 = language.getLanguage();
+  const defineEmits = language$1.findNodeByRange(
+    id,
+    (scriptSetupRanges) => scriptSetupRanges.emits.define
+  );
+  if (!defineEmits) {
+    return;
+  }
+  const scriptSetupAst = language$1.getScriptSetupAst(id);
+  const {
+    scriptNode: defineEmitsNode,
+    virtualFileNode: virtualFileDefineEmitsNode,
+    offset
+  } = defineEmits;
+  const defineEmitsTypeArg = ts__default.isCallExpression(virtualFileDefineEmitsNode) && virtualFileDefineEmitsNode.typeArguments?.[0];
+  const defineEmitsRuntimeArg = ts__default.isCallExpression(virtualFileDefineEmitsNode) && virtualFileDefineEmitsNode.arguments[0];
+  if (!defineEmitsTypeArg) {
+    return;
+  }
+  if (defineEmitsRuntimeArg) {
+    throw new Error(
+      "[unplugin-vue-complex-types] `defineEmits` cannot accept both runtime argument and type argument."
+    );
+  }
+  const tokens = defineEmitsNode.getChildren(scriptSetupAst);
+  const lessThanToken = tokens.find(
+    (t) => t.kind === ts__default.SyntaxKind.LessThanToken
+  );
+  const greaterThanToken = tokens.find(
+    (t) => t.kind === ts__default.SyntaxKind.GreaterThanToken
+  );
+  const openParenToken = tokens.find(
+    (t) => t.kind === ts__default.SyntaxKind.OpenParenToken
+  );
+  if (!lessThanToken || !greaterThanToken || !openParenToken) {
+    return;
+  }
+  const defineEmitsTypeArgRange = [
+    offset + lessThanToken.pos,
+    offset + greaterThanToken.end
+  ];
+  const runtimeArgPos = offset + openParenToken.end;
+  const printedRuntimeArg = printer.printEventsRuntimeArg(defineEmitsTypeArg);
+  s.remove(...defineEmitsTypeArgRange);
+  s.appendRight(runtimeArgPos, printedRuntimeArg);
+};
+
+const transformDefineProps = (printer, s, id) => {
+  const language$1 = language.getLanguage();
+  const definePropsTypeArg = language$1.findNodeByRange(
+    id,
+    (scriptSetupRanges) => scriptSetupRanges.props.define?.typeArg
+  );
+  if (!definePropsTypeArg) {
+    return;
+  }
+  const { virtualFileNode: typeArgNode, setupRange: typeArgRange } = definePropsTypeArg;
+  const printedType = printer.printTypeArg(typeArgNode);
+  s.overwrite(typeArgRange.start, typeArgRange.end, printedType);
+};
+
+const transformers = [
+  ["defineEmits", transformDefineEmits],
+  ["defineProps", transformDefineProps]
+];
+const getTransformers = (options) => transformers.filter(([key]) => !!options[key]);
+
+function transform(code, id, options) {
+  const s = new MagicString__default(code);
+  const language$1 = language.getLanguage();
+  const typeChecker = language$1.__internal__.typeChecker;
+  const printer = new Printer(typeChecker);
+  const transformers = getTransformers(options);
+  for (const [, transform2] of transformers) {
+    transform2(printer, s, id);
+  }
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true })
+  };
+}
+
+const unplugin = unplugin$1.createUnplugin((options = {}) => ({
+  name: "@vue.ts/complex-types",
+  buildStart() {
+    const resolvedOptions = resolveOptions(options);
+    language.ensureLanguage(resolvedOptions.tsconfigPath);
+  },
+  transform(code, id) {
+    const resolvedOptions = resolveOptions(options);
+    const filter = common.createFilter(
+      resolvedOptions.include,
+      resolvedOptions.exclude
+    );
+    if (!filter(id)) {
+      return;
+    }
+    return transform(code, id, resolvedOptions);
+  }
+}));
+
+module.exports = unplugin;

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.cjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: unplugin.UnpluginInstance<Options | undefined, boolean>;
+
+export { _default as default };

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.mjs';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: unplugin.UnpluginInstance<Options | undefined, boolean>;
+
+export { _default as default };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import * as unplugin from 'unplugin';
+import { Options } from './types.js';
+import '@vue.ts/common';
+import 'magic-string';
+import 'typescript';
+
+declare const _default: unplugin.UnpluginInstance<Options | undefined, boolean>;
+
+export { _default as default };