Script-Only Pipeline (Non-SFC)
This chapter illustrates the compilation pipeline for *.ts/*.js files (non-.vue) in VuReact.
1. Applicable Scenarios
- Writing standard Hooks.
- Retaining partial script utility files during the migration phase.
- First handling Composition API and dependency analysis, then gradually migrating the template layer.
- Expecting to uniformly process SFCs and scripts through the same CLI/caching system.
2. Input Example (test-script.ts)
❌ Incorrect usage: Using transformable APIs directly anywhere:
ts
import { computed, reactive, ref, watchEffect } from 'vue';
const count = ref(0);
const state = reactive({ step: 2 });
const double = computed(() => count.value * 2);
const inc = () => {
count.value += state.step;
};
watchEffect(() => {
console.log(double.value);
});
export { count, double, inc, state };✅ Correct usage: Using APIs inside top-level functions:
ts
function useMyHook() {
const count = ref(0);
const state = reactive({ step: 2 });
const double = computed(() => count.value * 2);
const inc = () => {
count.value += state.step;
};
watchEffect(() => {
console.log(double.value);
});
return { count, double, inc, state };
}3. Output Example (Simplified)
ts
import { useComputed, useReactive, useVRef, useWatchEffect } from '@vureact/runtime-core';
function useMyHook() {
const count = useVRef(0);
const state = useReactive({ step: 2 });
const double = useComputed(() => count.value * 2);
const inc = useCallback(() => {
count.value += state.step;
}, [count.value, state.step]);
useWatchEffect(() => {
console.log(double.value);
}, [double.value]);
return { count, double, inc, state };
}4. Differences from the SFC Pipeline
- Script-only files skip the template and style processing phases.
- Macros (
defineProps/defineEmits/...) should not be used in regular script files. - API adaptation, dependency analysis, code generation, and plugin hooks are still executed.
- Compilation warnings are likely to be emitted if Hooks are used outside top-level functions.
5. Recommendations
- Only route "genuinely script module" files through this pipeline.
- Component files should still primarily use SFCs to fully leverage template capabilities.
