本专栏（FE weekly news）文章随缘更新，由于精力有限，每篇周报的内容可能不多，欢迎大家关注

新闻

1. SvelteKit 2发布

其中有一个浅路由功能值得一提。该功能让用户可以通过导航的前进/后退交互改变页面State，从而在提高用户交互体验的同时，尽可能少的切换页面.

比如下面这段代码是一个弹窗的实现逻辑，用户通过手机上的滑动交互即可实现弹窗的关闭，同时不会导致页面回退到上一个页面。

<script>
import { pushState } from '$app/navigation';
import { page } from '$app/stores';
import Modal from './Modal.svelte';

function showModal() {
    pushState('', {
        showModal: true
    });
}
</script>

{#if $page.state.showModal}
	<Modal close={() => history.back()} />
{/if}

再比如下面这段代码，用户点击链接后将直接在当前页面内打开一个弹窗展示详情，滑动交互，关闭弹窗。

<script>
import { preloadData, pushState, goto } from '$app/navigation';
import { page } from '$app/stores';
import Modal from './Modal.svelte';
import PhotoPage from './[id]/+page.svelte';

export let data;
</script>

{#each data.thumbnails as thumbnail}
    <a
        href="/photos/{thumbnail.id}"
        on:click={async (e) => {
            // bail if opening a new tab, or we're on too small a screen
            if (e.metaKey || innerWidth < 640) return;

            // prevent navigation
            e.preventDefault();

            const { href } = e.currentTarget;

            // run `load` functions (or rather, get the result of the `load` functions
            // that are already running because of `data-sveltekit-preload-data`)
            const result = await preloadData(href);

            if (result.type === 'loaded' && result.status === 200) {
                pushState(href, { selected: result.data });
            } else {
                // something bad happened! try navigating
                goto(href);
            }
        }}
    >
        <img alt={thumbnail.alt} src={thumbnail.src} />
    </a>
{/each}

{#if $page.state.selected}
    <Modal on:close={() => history.back()}>
        <!-- pass page data to the +page.svelte component,
                 just like SvelteKit would on navigation -->
        <PhotoPage data={$page.state.selected} />
    </Modal>
{/if}

2. Vue 2 即将终止维护

在12.31号之后Vue 2将不再维护。对于无法迁移至Vue 3的项目，尤雨溪给出几个建议：

1. 将Vue升级至2.7.16版本（这是Vue 2的最后一个版本）
2. 如果有需要的话，也可以购买并使用Vue 2 NES。这是Vue 2与HeroDevs合作后HeroDevs提供的付费版Vue 2，HeroDevs会继续对Vue 2 NES进行维护，从而保证Vue 2 NES与新出现的各现代浏览器、工具包的兼容。
3. 如果有必要的话，和你的用户沟通说明Vue 2停止维护后，后期可能存在的一些隐患。

工具

1. Oxlint——一款类Eslint的开发工具

一款新发布的对标Eslint的工具，Oxlint侧重于对错误代码和无用代码的发现而非代码风格的规范，其运行速度要快于Eslint，输出结果也比Eslint具有更高的可读性。关于Oxlint的详细介绍，可以看看这篇文章

2. v0

一个基于shadcn/ui和Tailwind CSS的在线代码生成网站，你只需要简单描述你的需求，该网站会自动生成能满足你需求的代码。