Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: experimental add module from DevTools (#222)
- Loading branch information
Showing
22 changed files
with
1,124 additions
and
281 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <script setup lang="ts"> | ||
| import { diffLines } from 'diff' | ||
| import { unrefElement } from '@vueuse/core' | ||
| const props = defineProps<{ | ||
| from: string | ||
| to: string | ||
| lang: string | ||
| }>() | ||
| function calculateDiff(from: string, to: string) { | ||
| const diffs = diffLines(from.trim(), to.trim()) | ||
| const added: number[] = [] | ||
| const removed: number[] = [] | ||
| const result = [] | ||
| for (const diff of diffs) { | ||
| const lines = diff.value.trimEnd().split('\n') | ||
| for (const line of lines) { | ||
| if (diff.added) { | ||
| added.push(result.length) | ||
| result.push(line) | ||
| } | ||
| else if (diff.removed) { | ||
| removed.push(result.length) | ||
| result.push(line) | ||
| } | ||
| else { | ||
| result.push(line) | ||
| } | ||
| } | ||
| } | ||
| return { | ||
| added, | ||
| removed, | ||
| result: result.join('\n'), | ||
| } | ||
| } | ||
| const diff = computed(() => calculateDiff(props.from, props.to)) | ||
| function transformRendered(code: string) { | ||
| let count = 0 | ||
| return code | ||
| .replace(/class="shiki/, 'class="shiki diff') | ||
| .replace(/class="line"/g, (_) => { | ||
| count++ | ||
| if (diff.value.added.includes(count - 1)) | ||
| return 'class="line line-added"' | ||
| if (diff.value.removed.includes(count - 1)) | ||
| return 'class="line line-removed"' | ||
| return _ | ||
| }) | ||
| } | ||
| const elRef = ref<HTMLDivElement>() | ||
| onMounted(scrollTo) | ||
| function scrollTo() { | ||
| const el = unrefElement(elRef) | ||
| if (el) | ||
| el.querySelector('.line-added,.line-removed')?.scrollIntoView() | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <NCodeBlock | ||
| ref="elRef" | ||
| :code="diff.result" | ||
| :lang="lang" | ||
| :transform-rendered="transformRendered" | ||
| @loaded="scrollTo" | ||
| /> | ||
| </template> |
124 changes: 124 additions & 0 deletions
124
packages/devtools/client/components/ModuleInstallList.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| <script setup lang="ts"> | ||
| // @ts-expect-error missing types | ||
| import { RecycleScroller } from 'vue-virtual-scroller' | ||
| import type { InstallModuleReturn, ModuleStaticInfo } from '@nuxt/devtools-kit/types' | ||
| import Fuse from 'fuse.js' | ||
| const Dialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn]>() | ||
| const collection = await useModulesInfo() | ||
| const nuxt3only = collection.filter(i => i.compatibility.nuxt.includes('^3')) | ||
| const config = useServerConfig() | ||
| const router = useRouter() | ||
| const search = ref('') | ||
| const fuse = computed(() => new Fuse(nuxt3only, { | ||
| keys: [ | ||
| 'name', | ||
| 'description', | ||
| 'npm', | ||
| 'category', | ||
| ], | ||
| })) | ||
| const items = computed(() => { | ||
| if (!search.value) | ||
| return nuxt3only | ||
| return fuse.value.search(search.value).map(r => r.item) | ||
| }) | ||
| async function install(item: ModuleStaticInfo) { | ||
| const result = await rpc.installNuxtModule(item.npm, true) | ||
| if (!result.commands) | ||
| return | ||
| if (!await Dialog.start(item, result)) | ||
| return | ||
| router.push(`/modules/terminals?id=${encodeURIComponent(result.processId)}`) | ||
| await rpc.installNuxtModule(item.npm, false) | ||
| } | ||
| const openInEditor = useOpenInEditor() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div h-full flex="~ col gap-4"> | ||
| <NIconTitle | ||
| mx6 mt6 | ||
| text-xl op75 | ||
| icon="i-carbon-3d-mpr-toggle" | ||
| text="Install Module" | ||
| /> | ||
|
|
||
| <NTextInput | ||
| v-model="search" | ||
| placeholder="Search..." | ||
| icon="carbon-search" n="primary" | ||
| mx6 px-5 py-2 | ||
| /> | ||
|
|
||
| <div flex-auto of-auto flex="~ col gap-2" pl6 pr4> | ||
| <RecycleScroller | ||
| v-slot="{ item }" | ||
| class="scroller" | ||
| :items="items" | ||
| :item-size="160" | ||
| key-field="name" | ||
| > | ||
| <ModuleItemBase | ||
| :mod="{}" | ||
| role="button" | ||
| :info="item" | ||
| mb2 h-full class="hover:bg-active!" | ||
| :compact="true" | ||
| @click="install(item)" | ||
| /> | ||
| </RecycleScroller> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Dialog v-slot="{ resolve, args }"> | ||
| <NDialog :model-value="true" @close="resolve(false)"> | ||
| <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids /> | ||
| <div flex="~ col gap-2" w-150 p4 border="t base"> | ||
| <h2 text-xl> | ||
| Installing <span capitalize text-primary>{{ args[0].name }}</span> module? | ||
| </h2> | ||
|
|
||
| <p op50> | ||
| Following command will be executed in your terminal: | ||
| </p> | ||
| <NCodeBlock :code="args[1].commands.join(' ')" lang="bash" px4 py2 border="~ base rounded" :lines="false" /> | ||
|
|
||
| <p op50> | ||
| Then your <NLink role="button" n="primary" @click="openInEditor(config?._nuxtConfigFile)" v-text="'Nuxt config'" /> will be updated as: | ||
| </p> | ||
| <CodeDiff | ||
| :from="args[1].configOriginal" | ||
| :to="args[1].configGenerated" | ||
| max-h-80 of-auto py2 border="~ base rounded" | ||
| lang="ts" | ||
| /> | ||
| <p> | ||
| <span op50>After module installed, Nuxt will </span><span text-orange>restart automatically</span>. | ||
| </p> | ||
| <div flex="~ gap-3" mt2 justify-end> | ||
| <NTip n="sm purple" flex-auto icon="carbon-chemistry"> | ||
| Experimental. Make sure to backup your project. | ||
| </NTip> | ||
| <NButton @click="resolve(false)"> | ||
| Cancel | ||
| </NButton> | ||
| <NButton n="solid primary" @click="resolve(true)"> | ||
| Install | ||
| </NButton> | ||
| </div> | ||
| </div> | ||
| </NDialog> | ||
| </Dialog> | ||
| </template> |
Oops, something went wrong.