Publish 32.0.5 (#79)

- add ts support to vue

Author: SalvatorePreviti

packages/build-config/templates/vite/node.vite.config.ts

@@ -30,7 +30,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       rollupOptions: {
-        external: [...NODE_MODULES, /^node:/],
+        external: [...NODE_MODULES, /^node:/, '@typescript-eslint/parser'],
       },
     },
   }),

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ag-grid-devtools/cli",
-  "version": "32.0.4",
+  "version": "32.0.5",
   "license": "MIT",
   "description": "AG Grid developer toolkit",
   "author": "AG Grid <[email protected]>",

packages/cli/src/test/e2e/vue-ts-parser/expected/file.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <button v-on:click="onBtReset()">Reset column state</button>
+    <ag-grid-vue
+      :columnDefs="columnDefs"
+      :rowData="rowData"
+      @grid-ready="onGridReady"
+    ></ag-grid-vue>
+  </div>
+</template>
+
+<script lang="ts">
+import { AgGridVue } from '@ag-grid-community/vue';
+
+export interface MyInterfaceToTestTsParser {}
+
+export default {
+  components: {
+    'ag-grid-vue': AgGridVue,
+  },
+  data() {
+    return {
+      columnDefs: [],
+      columnApi: null,
+      rowData: null,
+    };
+  },
+  methods: {
+    onBtReset() {
+      this.columnApi.resetColumnState();
+    },
+    onGridReady(params) {
+      this.columnApi = params.api;
+
+      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        .then((resp) => resp.json())
+        .then((data) => {
+          this.rowData = data;
+          this.onBtReset();
+        });
+    },
+  },
+};
+</script>

packages/cli/src/test/e2e/vue-ts-parser/input-files/file.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <button v-on:click="onBtReset()">Reset column state</button>
+    <ag-grid-vue
+      :columnDefs="columnDefs"
+      :rowData="rowData"
+      @grid-ready="onGridReady"
+    ></ag-grid-vue>
+  </div>
+</template>
+
+<script lang="ts">
+import { AgGridVue } from '@ag-grid-community/vue';
+
+export interface MyInterfaceToTestTsParser {}
+
+export default {
+  components: {
+    'ag-grid-vue': AgGridVue,
+  },
+  data() {
+    return {
+      columnDefs: [],
+      columnApi: null,
+      rowData: null,
+    };
+  },
+  methods: {
+    onBtReset() {
+      this.columnApi.resetColumnState();
+    },
+    onGridReady(params) {
+      this.columnApi = params.columnApi;
+
+      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        .then((resp) => resp.json())
+        .then((data) => {
+          this.rowData = data;
+          this.onBtReset();
+        });
+    },
+  },
+};
+</script>

packages/cli/src/test/e2e/vue-ts-parser/vue-ts-parser.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest';
+import { cli } from '../../../cli';
+import { CliE2ETestEnv } from '../e2e-test-utils';
+
+const env = new CliE2ETestEnv(import.meta.url);
+
+test(
+  'cli e2e - single thread',
+  async () => {
+    await env.init();
+    await cli(['migrate', '--num-threads=0', '--allow-untracked', '--from=30.0.0'], env.cliOptions);
+    expect(await env.loadExpectedSrc('file.vue')).toEqual(await env.loadTempSrc('file.vue'));
+  },
+  env.TIMEOUT,
+);

packages/cli/src/test/expected/custom-imports.js

@@ -21,7 +21,7 @@ export default mergeConfig(
       },
       sourcemap: false,
       rollupOptions: {
-        external: ['@ag-grid-devtools/codemods'],
+        external: ['@ag-grid-devtools/codemods', '@typescript-eslint/parser'],
       },
     },
     plugins: [

packages/cli/src/test/expected/plain.js

@@ -10,7 +10,7 @@ import {
   type NodePath,
   type Types,
 } from '@ag-grid-devtools/ast';
-import { nonNull } from '@ag-grid-devtools/utils';
+import { dynamicRequire, nonNull } from '@ag-grid-devtools/utils';
 import { parse } from 'vue-eslint-parser';
 import { AST } from 'vue-eslint-parser';
 import {
@@ -397,13 +397,29 @@ export function matchVueComponentMethod(method: NodePath): {
   return { component, methodName, method };
 }
 
+let _tsParser: any;
+
+function getTsParser(): any {
+  if (_tsParser === undefined) {
+    _tsParser = null;
+    try {
+      _tsParser = dynamicRequire.requireDefault('@typescript-eslint/parser', import.meta);
+    } catch {}
+  }
+  return _tsParser;
+}
+
 export function parseVueSfcComponent(source: string): AST.ESLintProgram {
-  return parse(source, {
+  const options: any = {
     sourceType: 'module',
-    parser: {
-      ts: '@typescript-eslint/parser',
-    },
-  });
+  };
+
+  const ts = getTsParser();
+  if (ts) {
+    options.parser = { ts };
+  }
+
+  return parse(source, options);
 }
 
 export function parseVueComponentTemplateSource(source: string): VueTemplateNode<VElement> {