Skip to content

Instantly share code, notes, and snippets.

@LePichu

LePichu/state-of-js-sfc-frameworks-on-deno.md

Created January 13, 2023 21:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LePichu/a5b92259ee2335a45d6d5c1507115dda to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LePichu/a5b92259ee2335a45d6d5c1507115dda to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. LePichu created this gist Jan 13, 2023.
    29 changes: 29 additions & 0 deletions state-of-js-sfc-frameworks-on-deno.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    # State of Vue, Svelte, and Astro on Deno:
    This gist is a quick summary of how JS Flavors do not _work_ as in _interop_ with Deno, primarily because Deno LSP does not know about them.

    ## The True Issue
    To understand the issue in depth, we need to begin with a sample snippet of some code. The following is an example snippet of Svelte code:
    ```svelte
    <script lang="ts">
    import { example_map } from "some_source_in_my_import_map"
    import { example_url } from "https://some.url/somefile.js"
    example_map()
    example_url()
    </script>
    <style lang="less">
    body {
    a {
    color: white;
    }
    p {
    color: black;
    }
    }
    </style>
    ```
    Given tools like Vite, ESBuild, or even the bare Svelte compiler, this would compile under Deno and can even do Server-Side Rendering (SSR). The real issue comes with IDE support, more so from Svelte LSP as it does not understand Deno's _mechanisms_ like HTTP URL Imports, Import Maps, or even the existence of `deno.jsonc`.

    ## The Solution
    Considering the current technical challenges faced by Deno when it comes to adding language support, a possible solution would be making a userland solution to making language servers for third-party JavaScript frameworks for them; which could include utilities like an endless Development Server loop for Languages like TypeScript, which can be used to feed embedded pieces of TypeScript code in something like a Single-File Component of Svelte or Vue and report to the editor with diagnostics of files including errors or possible better code suggestions.