Adopt Web Packages for JavaScript packages

.github/workflows/test-packages.yaml

@@ -0,0 +1,30 @@
+name: Test Packages
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    name: Test Packages
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v7
+
+    - uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: ruby
+        bundler-cache: true
+
+    - uses: actions/setup-node@v7
+      with:
+        node-version: 24
+        cache: npm
+
+    - name: Install dependencies
+      run: bundle exec bake web:packages:install frozen=true
+
+    - name: Check static packages
+      run: bundle exec bake web:packages:check

lib/utopia/project/import_map.rb

@@ -7,9 +7,8 @@
 
 module Utopia
 	module Project
-		IMPORT_MAP = Utopia::ImportMap.build(base: "/_components/") do |map|
-			map.import("mermaid", "./mermaid/mermaid.esm.min.mjs")
-			map.import("@socketry/syntax", "./@socketry/syntax/Syntax.js")
-		end
+		IMPORT_MAP = Utopia::ImportMap.load_manifest(
+			File.expand_path("../../../public/_components", __dir__)
+		)
 	end
 end

package.json

@@ -3,13 +3,21 @@
     "@socketry/syntax": "^0.6.1",
     "mermaid": "^11.16.1"
   },
-  "utopia": {
-    "components": {
+  "web-packages": {
+    "packages": {
+      "@socketry/syntax": {
+        "imports": {
+          "@socketry/syntax": "Syntax.js"
+        }
+      },
       "mermaid": {
         "include": [
           "mermaid.esm.min.mjs",
           "chunks/mermaid.esm.min/**/*.mjs"
-        ]
+        ],
+        "imports": {
+          "mermaid": "mermaid.esm.min.mjs"
+        }
       }
     }
   }