We are going to build a vite-plugin-svelte-inspector, in which you can hover onto any elements and click to jump to the source.
This may seem impossible at first, but, let's break this down, and figure it out together.
We will need to figure a way to find out where the elements are from, then open an endpoint to launch the editor, and then a runtime code to bind the two together, by adding click event listeners to find the element and firing requests to launch the editor.
📚 vite-plugin-vue-inspector https://github.com/webfansplz/vite-pl...
📚 Vite plugin API https://vitejs.dev/guide/api-plugin.html
📚 launch-editor-middleware https://www.npmjs.com/package/launch-...
📚 magic-string https://www.npmjs.com/package/magic-s...
📚 locate-character https://www.npmjs.com/package/locate-...
---
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: / lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
Discord: / discord
VS Code Theme: Dracula at night https://marketplace.visualstudio.com/...
ZSH Theme: bullet-train https://github.com/caiogondim/bullet-...
#sveltekit #svelte #sveltekitbeginner #sveltekittutorial
Thanks for watching 🥰 -- with love, Li Hau