Advanced Features

/**
 * Better integration for defineProps and defineEmits
 * Converts runtime props/emits to type-only when possible
 */
declare function betterDefine(): void;

// Configuration options
interface OptionsBetterDefine extends BaseOptions {
  /** Enable reactive props destructuring */
  reactivePropsDestructure?: boolean;
}

<script setup>
// Better define automatically optimizes these
const props = defineProps({
  name: String,
  age: Number,
  config: Object,
});

const emit = defineEmits(['update', 'change', 'delete']);

// Reactive destructuring (when enabled)
const { name, age } = props; // Automatically reactive

// Better define optimizes the above to:
// const props = defineProps<{ name?: string; age?: number; config?: object }>();
// const emit = defineEmits<{ update: []; change: []; delete: [] }>();
</script>

/**
 * Reactivity transform with $ prefix syntax
 */
declare const $ref: typeof ref;
declare const $shallowRef: typeof shallowRef;
declare const $computed: typeof computed;
declare const $customRef: typeof customRef;
declare const $toRef: typeof toRef;

// Transform macros
declare function $$(expr: any): any; // Escape reactivity transform
declare function $(expr: any): any;   // Force reactivity transform

// Configuration options
interface OptionsReactivityTransform extends BaseOptions {
  /** File patterns to include */
  include?: string | RegExp | (string | RegExp)[];
  /** File patterns to exclude */
  exclude?: string | RegExp | (string | RegExp)[];
}

<script setup>
// Reactivity transform syntax
let count = $ref(0);              // Same as: const count = ref(0);
let doubled = $computed(() => count * 2);  // Same as: const doubled = computed(() => count.value * 2);
let name = $ref('Vue');           // Same as: const name = ref('Vue');

// Direct access without .value
console.log(count);               // No need for count.value
count++;                          // No need for count.value++

// In templates, works normally
// <template>{{ count }}</template>

// Escape when needed
const rawRef = $$(someRef);       // Get the actual ref object

// Arrays and objects
let items = $ref([1, 2, 3]);
let user = $ref({ name: 'John', age: 30 });

items.push(4);                    // Reactive
user.age++;                       // Reactive

// Computed with complex logic
let filteredItems = $computed(() => {
  return items.filter(item => item > count);
});

// Custom ref
let myCustom = $customRef((track, trigger) => ({
  get() {
    track();
    return count;
  },
  set(newValue) {
    count = newValue;
    trigger();
  },
}));
</script>

/**
 * Setup component with enhanced syntax
 * @param options - Setup component options
 */
declare function setupComponent<T = {}>(
  options: SetupComponentOptions<T>
): void;

interface SetupComponentOptions<T = {}> {
  name?: string;
  props?: T;
  emits?: string[] | Record<string, any>;
  setup?: (props: T, context: SetupContext) => any;
}

// Configuration options
interface OptionsSetupComponent extends BaseOptions {
  /** Enable component-level setup */
  enabled?: boolean;
}

<script setup>
// Setup component syntax
setupComponent({
  name: 'MyAdvancedComponent',
  
  props: {
    title: String,
    items: Array,
  },
  
  emits: ['update', 'change'],
  
  setup(props, { emit, slots }) {
    const internalState = ref('internal');
    
    const processedItems = computed(() => {
      return props.items?.map(item => ({
        ...item,
        processed: true,
      }));
    });
    
    function handleUpdate(value: any) {
      emit('update', value);
    }
    
    return {
      internalState,
      processedItems,
      handleUpdate,
    };
  },
});
</script>

/**
 * Setup SFC with enhanced capabilities
 */
declare function setupSFC(): void;

// Configuration options
interface OptionsSetupSFC extends BaseOptions {
  /** Enable SFC-level enhancements */
  enabled?: boolean;
}

/**
 * Setup block for component logic separation
 */
declare function setupBlock(): void;

// Configuration options  
interface OptionsSetupBlock extends BaseOptions {
  /** Enable setup block syntax */
  enabled?: boolean;
}

<!-- Setup block syntax -->
<setup>
const count = ref(0);
const doubled = computed(() => count.value * 2);

function increment() {
  count.value++;
}

return {
  count,
  doubled,
  increment,
};
</setup>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

/**
 * Hoist static elements and expressions for performance
 */
interface OptionsHoistStatic extends BaseOptions {
  /** Enable static hoisting */
  enabled?: boolean;
  /** Hoist static props */
  hoistStaticProps?: boolean;
}

/**
 * Export props for parent access
 * @param props - Props to export
 */
declare function exportProps<T>(props: T): void;

/**
 * Export render function
 * @param render - Render function to export
 */
declare function exportRender(render: RenderFunction): void;

// Configuration options
interface OptionsExportProps extends BaseOptions {
  /** Enable export props */
  enabled?: boolean;
}

interface OptionsExportRender extends BaseOptions {
  /** Enable export render */
  enabled?: boolean;
}

<script setup>
// Export props for parent component
const myProps = defineProps<{
  title: string;
  items: any[];
}>();

exportProps(myProps); // Parent can access via ref

// Export render function
const customRender = () => h('div', 'Custom content');
exportRender(customRender);
</script>

/**
 * Extended script language capabilities
 */
interface OptionsScriptLang extends BaseOptions {
  /** Enable script language extensions */
  enabled?: boolean;
  /** Supported languages */
  languages?: string[];
}

/**
 * JSX directive support for Vue directives in JSX
 */
interface OptionsJsxDirective extends BaseOptions {
  /** Enable JSX directive transformations */
  enabled?: boolean;
  /** Custom directive mappings */
  directives?: Record<string, string>;
}

// JSX with Vue directives
function MyComponent() {
  const isVisible = ref(true);
  const inputRef = ref();
  
  return (
    <div>
      <input 
        ref={inputRef}
        v-show={isVisible.value}
        v-focus
        onInput={(e) => console.log(e.target.value)}
      />
      <button v-on:click={() => isVisible.value = !isVisible.value}>
        Toggle
      </button>
    </div>
  );
}

/**
 * Named template functionality (deprecated)
 * @deprecated Use createReusableTemplate from VueUse instead
 */
interface OptionsNamedTemplate extends BaseOptions {
  /** Enable named template */
  enabled?: boolean;
}

// Base configuration interface
interface BaseOptions {
  /** Vue version override */
  version?: string;
  /** Enable production optimizations */
  isProduction?: boolean;
  /** Root directory */
  root?: string;
}

// Setup context from Vue
interface SetupContext<E = EmitsOptions> {
  attrs: Data;
  slots: Slots;
  emit: EmitFunction<E>;
  expose: (exposed?: Record<string, any>) => void;
}

// Reactivity transform types
type RefSymbol = unique symbol;

interface TransformRef<T> {
  [RefSymbol]: T;
}

// Custom ref types
type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T;
  set: (value: T) => void;
};

// JSX types
namespace JSX {
  interface IntrinsicElements {
    [elem: string]: any;
  }
  
  interface ElementAttributesProperty {
    $props: {};
  }
  
  interface IntrinsicAttributes {
    key?: string | number;
    ref?: any;
  }
}