Trying to use language-core to parse and edit SFCs via AST, how can I create new elements on the AST?

[josh-hemphill]

I'm using @vue/language-core/lib/virtualFile/computedSfc with below to get an AST:

import { computedSfc as parseComputed } from '@vue/language-core/lib/virtualFile/computedSfc.js';
import { parse as parseSfc } from '@vue/language-core/lib/utils/parseSfc.js';
import { createParsedCommandLine } from '@vue/language-core/lib/utils/ts.js';
import { getBasePlugins } from '@vue/language-core/lib/plugins.js';
import useVueFilePlugin from '@vue/language-core/lib/plugins/file-vue.js';
const pluginContext: Parameters<VueLanguagePlugin>[0] = {
  modules: {
    '@vue/compiler-dom': CompilerDOM,
    typescript: ts,
  },
  compilerOptions: parsedCommandLine.options,
  vueCompilerOptions: parsedCommandLine.vueOptions,
  globalTypesHolder: undefined,
};
const basePlugins = getBasePlugins(pluginContext);
const vueSfcPlugin = useVueFilePlugin(pluginContext);
const parser = parseComputed(
  options?.ts ?? ts,
  [vueSfcPlugin, ...basePlugins, ...(options?.plugins ?? [])],
  filename,
  () => ts.ScriptSnapshot.fromString(source),
  () => parseSfc(source),
);

const appFilePath = resolve(APP_SRC, 'App.vue');
const appFile = await readFile(appPath, 'utf-8');
const parsed = await parser(appFile, appFilePath);
const templateAst = parsed.template.ast;
templateAst.children.push(
// How can I create a div with Vue attributes
)

I can't find anything in the codebase to create elements that it would expect.

[Shyam-Chen]

import { MagicStringAST, parseSFC, walkAST } from '@vue-macros/common';

 s.overwriteNode

s.removeNode

s.prepend
s.append

[josh-hemphill]

Sorry, I know how to insert it, I just don't know how to create a new element that will be parsable once I insert it.

[Shyam-Chen]

<template is="Foo" />

->

You can insert this element in the line above the </script>:

const Foo = defineComponent({
  setup() {
    return () => h('div', 'foo');
  },
});

Replace <template is="Foo" /> with <component :is="Foo" />:

<component :is="Foo" />

Remember to insert import { defineComponent, h } from 'vue'; on the line following <script setup>.

[josh-hemphill]

That doesn't fit my use case since I'm parsing arbitrary code my program receives and doing static analysis and updates to the source files via the AST, but looking at @vue-macros/common, the MagicStringAST is just a re-export of the magic-string-ast package, so I should be able to use that and the ast-kit package that it's also using to generate AST nodes for insertion into Vue's language-core generated AST.

[josh-hemphill]

Though both of those seem to parse js/ts, I don't know if they'll let me create html AST nodes for the AST of the vue SFC template