Add basic search of TypeScript’s lib.dom.d.ts

Author: royalicing

lib/components_guide/research/source.ex

@@ -120,6 +120,7 @@ defmodule ComponentsGuide.Research.Source do
     end
   end
 
+  # TODO: Use a Source.FetchJSON module instead that conforms to a particular behavior
   defp run({:fetch_json, url}) do
     with {:ok, text} when not is_nil(text) <- read({:fetch_text, url}),
          {:ok, data} <- Jason.decode(text) do
@@ -200,6 +201,7 @@ defmodule ComponentsGuide.Research.Source do
 
   def html_document_at(url), do: read({:html_document, url})
   def json_at(url), do: read({:fetch_json, url})
+  def text_at(url), do: read({:fetch_text, url})
   def content_length(url), do: read({:content_length, url})
 
   def clear_cache() do

lib/components_guide/research/spec.ex

@@ -1,6 +1,8 @@
 defmodule ComponentsGuide.Research.Spec do
   alias ComponentsGuide.Research.Source
 
+  # TODO: search https://cdn.jsdelivr.net/npm/tailwindcss@3.1.8/types/generated/colors.d.ts
+
   def caniuse(query) do
     %{
       source: {:json_url, "https://cdn.jsdelivr.net/npm/caniuse-db@1.0.30001142/data.json"},
@@ -10,6 +12,7 @@ defmodule ComponentsGuide.Research.Spec do
 
   def npm_downloads_last_month(query) do
     query = String.trim(query)
+
     %{
       source: {:json_url, "https://api.npmjs.org/downloads/point/last-month/#{query}"},
       processor: {:npm_downloads, query}
@@ -45,6 +48,12 @@ defmodule ComponentsGuide.Research.Spec do
     end
   end
 
+  def search_for(:typescript_dom, query) when is_binary(query) do
+    types = "https://cdn.jsdelivr.net/npm/typescript@4.7.4/lib/lib.dom.d.ts"
+    result = Source.text_at(types)
+    process_search_for(:typescript_dom, query, result)
+  end
+
   def search_for(:whatwg_html_spec, query) when is_binary(query) do
     # url = "https://html.spec.whatwg.org/"
     url = "https://html.spec.whatwg.org/dev/"
@@ -75,7 +84,8 @@ defmodule ComponentsGuide.Research.Spec do
   end
 
   def search_for(:bundlephobia, query) when is_binary(query) do
-    case Source.json_at("https://bundlephobia.com/api/size?package=#{query}") |> tap(&IO.inspect/1) do
+    case Source.json_at("https://bundlephobia.com/api/size?package=#{query}")
+         |> tap(&IO.inspect/1) do
       {:ok, data} ->
         data
 
@@ -164,5 +174,38 @@ defmodule ComponentsGuide.Research.Spec do
       end)
   end
 
+  defp process_search_for(:typescript_dom, query, {:ok, source}) do
+    start = System.monotonic_time()
+
+    # TODO: add types to a SQLite database?
+    {:ok, db} = Exqlite.Sqlite3.open(":memory:")
+    :ok = Exqlite.Sqlite3.execute(db, "CREATE VIRTUAL TABLE files USING FTS5(name, body)")
+
+    {:ok, statement} = Exqlite.Sqlite3.prepare(db, "insert into files (name, body) values (?, ?)")
+    :ok = Exqlite.Sqlite3.bind(db, statement, ["lib.dom.d.ts", source])
+    :done = Exqlite.Sqlite3.step(db, statement)
+    :ok = Exqlite.Sqlite3.release(db, statement)
+
+    # Prepare a select statement
+    # {:ok, statement} = Exqlite.Sqlite3.prepare(db, "select highlight(files, 1, '<b>', '</b>') body from files where files match ? order by rank")
+    {:ok, statement} = Exqlite.Sqlite3.prepare(db, "select snippet(files, 1, '', '', '…', 64) body from files where files match ? order by rank")
+    :ok = Exqlite.Sqlite3.bind(db, statement, [query])
+
+    # Get the results
+    # {:row, row} = Exqlite.Sqlite3.step(db, statement)
+    # :done = Exqlite.Sqlite3.step(db, statement)
+
+    {:ok, rows} = Exqlite.Sqlite3.fetch_all(db, statement)
+    {:ok, columns} = Exqlite.Sqlite3.columns(db, statement)
+    :ok = Exqlite.Sqlite3.release(db, statement)
+
+    Exqlite.Sqlite3.close(db)
+
+    duration = System.monotonic_time() - start
+    IO.puts("SQLite create + text search took #{System.convert_time_unit(duration, :native, :millisecond)}ms")
+
+    {columns, rows}
+  end
+
   defp process_search_for(_id, _query, _), do: []
 end

lib/components_guide_web/controllers/research_controller.ex

@@ -73,6 +73,7 @@ defmodule ComponentsGuideWeb.ResearchController do
 
   defp bundlephobia(query) do
     IO.puts("BUNDLEPHOBIA!")
+
     case Spec.search_for(:bundlephobia, query) |> tap(&IO.inspect/1) do
       # %{"assets" => [%{"gzip" => 3920, "name" => "main", "size" => 10047, "type" => "js"}], "dependencyCount" => 0, "dependencySizes" => [%{"approximateSize" => 9537, "name" => "preact"}], "description" => "Fast 3kb React-compatible Virtual DOM library.", "gzip" => 3920, "hasJSModule" => "dist/preact.module.js", "hasJSNext" => false, "hasSideEffects" => true, "name" => "preact", "repository" => "https://github.com/preactjs/preact.git", "scoped" => false, "size" => 10047, "version" => "10.4.1"}
       %{"name" => name, "size" => size, "gzip" => size_gzip, "version" => version} ->
@@ -143,6 +144,24 @@ defmodule ComponentsGuideWeb.ResearchController do
     end
   end
 
+  defp typescript_dom(query) do
+    case Spec.search_for(:typescript_dom, query) do
+      {_columns, rows} ->
+        content_tag(
+          :div,
+          for row <- rows do
+            content_tag(:pre, content_tag(:code, row, class: "language-ts"),
+              class: "language-ts m-2 whitespace-pre-wrap border border-indigo-700 rounded"
+            )
+          end,
+          class: "mb-4"
+        )
+
+      other ->
+        content_tag(:div, inspect(other), class: "text-red-100")
+    end
+  end
+
   defmodule CanIUse do
     # use ComponentsGuideWeb, :view
     alias ComponentsGuideWeb.ResearchView.Section, as: Section
@@ -185,10 +204,10 @@ defmodule ComponentsGuideWeb.ResearchController do
                   content_tag(:dt, "Notes", class: "font-bold"),
                   content_tag(:dd, "#{notes}", class: "text-base")
                 ]
-            end,
-            #content_tag(:dt, "Browsers", class: "font-bold"),
-            #content_tag(:dd, "#{inspect(stats)}", class: "text-sm"),
-            #content_tag(:dd, "#{inspect(item)}")
+            end
+            # content_tag(:dt, "Browsers", class: "font-bold"),
+            # content_tag(:dd, "#{inspect(stats)}", class: "text-sm"),
+            # content_tag(:dd, "#{inspect(item)}")
           ],
           class: "grid grid-flow-col gap-2 pt-2",
           style: "grid-template-rows: repeat(2, auto);"
@@ -277,9 +296,10 @@ defmodule ComponentsGuideWeb.ResearchController do
     # ComponentsGuide.Research.Source.clear_cache()
     [
       npm_downloads(query),
+      typescript_dom(query),
       bundlephobia(query),
       caniuse(query),
-      static(query),
+      static(query)
       # html_spec(query),
       # aria_practices(query),
       # html_aria(query)

lib/components_guide_web/templates/research/loading.html.eex

@@ -3,12 +3,22 @@
 <div class="text-white bg-gray-900 py-8">
   <div class="container">
     <div class="px-6" data-links="underline">
-      <include-fragment src="/research?q=<%= @query %>&results=1">
+      <include-fragment src="/research?q=<%= @query %>&results=1" data-results>
         <div>
           Loading…
           <loading-stopwatch class="inline-flex opacity-25"></loading-stopwatch>
         </div>
       </include-fragment>
+
+      <script type="module">
+        const loader = document.querySelector('include-fragment[data-results]');
+        const container = loader.parentElement;
+        //loader.addEventListener('loadstart', () => container.classList.add('is-loading'))
+        //loader.addEventListener('loadend', () => window.Prism.highlightAll());
+        loader.addEventListener('loadend', () => window.Prism.highlightAllUnder(container));
+        //loader.addEventListener('load', () => container.classList.add('is-success'))
+        //loader.addEventListener('error', () => container.classList.add('is-error'))
+      </script>
     </div>
   </div>
 </div>

mix.exs

@@ -63,6 +63,7 @@ defmodule ComponentsGuide.MixProject do
       {:ex_image_info, "~> 0.2.4"},
       {:rustler, "~> 0.25.0"},
       {:rustler_precompiled, "~> 0.5.1"},
+      {:exqlite, "~> 0.11.4"},
       {:redix, "~> 1.1"},
       {:benchee, "~> 1.0", only: :dev},
       {:reverse_proxy_plug, "~> 1.3.1", only: :dev}

mix.lock

@@ -3,18 +3,22 @@
   "cachex": {:hex, :cachex, "3.4.0", "868b2959ea4aeb328c6b60ff66c8d5123c083466ad3c33d3d8b5f142e13101fb", [:mix], [{:eternal, "~> 1.2", [hex: :eternal, repo: "hexpm", optional: false]}, {:jumper, "~> 1.0", [hex: :jumper, repo: "hexpm", optional: false]}, {:sleeplocks, "~> 1.1", [hex: :sleeplocks, repo: "hexpm", optional: false]}, {:unsafe, "~> 1.0", [hex: :unsafe, repo: "hexpm", optional: false]}], "hexpm", "370123b1ab4fba4d2965fb18f87fd758325709787c8c5fce35b3fe80645ccbe5"},
   "castore": {:hex, :castore, "0.1.17", "ba672681de4e51ed8ec1f74ed624d104c0db72742ea1a5e74edbc770c815182f", [:mix], [], "hexpm", "d9844227ed52d26e7519224525cb6868650c272d4a3d327ce3ca5570c12163f9"},
   "certifi": {:hex, :certifi, "2.9.0", "6f2a475689dd47f19fb74334859d460a2dc4e3252a3324bd2111b8f0429e7e21", [:rebar3], [], "hexpm", "266da46bdb06d6c6d35fde799bcb28d36d985d424ad7c08b5bb48f5b5cdd4641"},
+  "connection": {:hex, :connection, "1.1.0", "ff2a49c4b75b6fb3e674bfc5536451607270aac754ffd1bdfe175abe4a6d7a68", [:mix], [], "hexpm", "722c1eb0a418fbe91ba7bd59a47e28008a189d47e37e0e7bb85585a016b2869c"},
   "cowboy": {:hex, :cowboy, "2.9.0", "865dd8b6607e14cf03282e10e934023a1bd8be6f6bacf921a7e2a96d800cd452", [:make, :rebar3], [{:cowlib, "2.11.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "2c729f934b4e1aa149aff882f57c6372c15399a20d54f65c8d67bef583021bde"},
   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
   "cowlib": {:hex, :cowlib, "2.11.0", "0b9ff9c346629256c42ebe1eeb769a83c6cb771a6ee5960bd110ab0b9b872063", [:make, :rebar3], [], "hexpm", "2b3e9da0b21c4565751a6d4901c20d1b4cc25cbb7fd50d91d2ab6dd287bc86a9"},
+  "db_connection": {:hex, :db_connection, "2.4.2", "f92e79aff2375299a16bcb069a14ee8615c3414863a6fef93156aee8e86c2ff3", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4fe53ca91b99f55ea249693a0229356a08f4d1a7931d8ffa79289b145fe83668"},
   "decimal": {:hex, :decimal, "2.0.0", "a78296e617b0f5dd4c6caf57c714431347912ffb1d0842e998e9792b5642d697", [:mix], [], "hexpm", "34666e9c55dea81013e77d9d87370fe6cb6291d1ef32f46a1600230b1d44f577"},
   "deep_merge": {:hex, :deep_merge, "1.0.0", "b4aa1a0d1acac393bdf38b2291af38cb1d4a52806cf7a4906f718e1feb5ee961", [:mix], [], "hexpm", "ce708e5f094b9cd4e8f2be4f00d2f4250c4095be93f8cd6d018c753894885430"},
   "earmark": {:hex, :earmark, "1.4.25", "43fd256e37f671528727745f0fc760227e16f40dced303216f766eade06b7b10", [:mix], [{:earmark_parser, "~> 1.4.25", [hex: :earmark_parser, repo: "hexpm", optional: false]}], "hexpm", "073c606ea4c3cc52920e8ae8ebe788c6af03d3e39782b25e5d14ceaa2f692998"},
   "earmark_parser": {:hex, :earmark_parser, "1.4.25", "2024618731c55ebfcc5439d756852ec4e85978a39d0d58593763924d9a15916f", [:mix], [], "hexpm", "56749c5e1c59447f7b7a23ddb235e4b3defe276afc220a6227237f3efe83f51e"},
   "ecto": {:hex, :ecto, "3.8.4", "e06b8b87e62b27fea17fd2ff6041572ddd10339fd16cdf58446e402c6c90a74b", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f9244288b8d42db40515463a008cf3f4e0e564bb9c249fe87bf28a6d79fe82d4"},
+  "elixir_make": {:hex, :elixir_make, "0.6.3", "bc07d53221216838d79e03a8019d0839786703129599e9619f4ab74c8c096eac", [:mix], [], "hexpm", "f5cbd651c5678bcaabdbb7857658ee106b12509cd976c2c2fca99688e1daf716"},
   "esbuild": {:hex, :esbuild, "0.5.0", "d5bb08ff049d7880ee3609ed5c4b864bd2f46445ea40b16b4acead724fb4c4a3", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "f183a0b332d963c4cfaf585477695ea59eef9a6f2204fdd0efa00e099694ffe5"},
   "eternal": {:hex, :eternal, "1.2.2", "d1641c86368de99375b98d183042dd6c2b234262b8d08dfd72b9eeaafc2a1abd", [:mix], [], "hexpm", "2c9fe32b9c3726703ba5e1d43a1d255a4f3f2d8f8f9bc19f094c7cb1a7a9e782"},
   "ex_doc": {:hex, :ex_doc, "0.23.0", "a069bc9b0bf8efe323ecde8c0d62afc13d308b1fa3d228b65bca5cf8703a529d", [:mix], [{:earmark_parser, "~> 1.4.0", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}], "hexpm", "f5e2c4702468b2fd11b10d39416ddadd2fcdd173ba2a0285ebd92c39827a5a16"},
   "ex_image_info": {:hex, :ex_image_info, "0.2.4", "610002acba43520a9b1cf1421d55812bde5b8a8aeaf1fe7b1f8823e84e762adb", [:mix], [], "hexpm", "fd1a7e02664e3b14dfd3b231d22fdd48bd3dd694c4773e6272b3a6228f1106bc"},
+  "exqlite": {:hex, :exqlite, "0.11.4", "d659b1e12797787097670d2d9fe183bc40563c78f849c57f762fe043c655c5b6", [:make, :mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.6", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "514f1246ffb2d14287a34d74b7c40fbbf58485720c2b3de9156662c6063dfe87"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
   "floki": {:hex, :floki, "0.33.1", "f20f1eb471e726342b45ccb68edb9486729e7df94da403936ea94a794f072781", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "461035fd125f13fdf30f243c85a0b1e50afbec876cbf1ceefe6fddd2e6d712c6"},
   "gettext": {:hex, :gettext, "0.20.0", "75ad71de05f2ef56991dbae224d35c68b098dd0e26918def5bb45591d5c8d429", [:mix], [], "hexpm", "1c03b177435e93a47441d7f681a7040bd2a816ece9e2666d1c9001035121eb3d"},