Update @foxglove/studio package to @foxglove/extension, bump to 1.0.0

.vscode/settings.json

@@ -1,7 +1,7 @@
 // -*- jsonc -*-
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

README.md

@@ -7,7 +7,7 @@
 [Foxglove](https://foxglove.dev) allows developers to create
 [extensions](https://docs.foxglove.dev/docs/visualization/extensions/introduction), or custom code
 that is loaded and executed inside the Foxglove application. Extensions are authored in TypeScript
-using the `@foxglove/studio` SDK.
+using the `@foxglove/extension` SDK.
 
 ## Creating Your First Extension
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-foxglove-extension",
-  "version": "0.8.6",
+  "version": "1.0.0",
   "publisher": "foxglove",
   "description": "Create and package Foxglove extensions",
   "license": "MIT",

src/create.ts

@@ -9,7 +9,7 @@ import { info } from "./log";
 
 const DEPENDENCIES = [
   "@foxglove/eslint-plugin@^1",
-  "@foxglove/studio@^1",
+  "@foxglove/extension@^2",
   "@types/react@^18",
   "@types/react-dom@^18",
   "@typescript-eslint/eslint-plugin@^6",

src/webpackConfigExtension.ts

@@ -26,7 +26,7 @@ export default (
     // the source file. Using a separate source map file does not work.
     devtool: "eval-source-map",
     externals: {
-      "@foxglove/studio": "@foxglove/studio",
+      "@foxglove/extension": "@foxglove/extension",
     },
     resolve: {
       extensions: [".js", ".ts", ".jsx", ".tsx"],

template/README.md

@@ -1,6 +1,6 @@
 # ${NAME}
 
-[Foxglove](https://foxglove.dev) allows developers to create [extensions](https://docs.foxglove.dev/docs/visualization/extensions/introduction), or custom code that is loaded and executed inside the Foxglove application. This can be used to add custom panels. Extensions are authored in TypeScript using the `@foxglove/studio` SDK.
+[Foxglove](https://foxglove.dev) allows developers to create [extensions](https://docs.foxglove.dev/docs/visualization/extensions/introduction), or custom code that is loaded and executed inside the Foxglove application. This can be used to add custom panels. Extensions are authored in TypeScript using the `@foxglove/extension` SDK.
 
 ## Develop
 

template/src/ExamplePanel.tsx

@@ -1,4 +1,4 @@
-import { Immutable, MessageEvent, PanelExtensionContext, Topic } from "@foxglove/studio";
+import { Immutable, MessageEvent, PanelExtensionContext, Topic } from "@foxglove/extension";
 import { useEffect, useLayoutEffect, useState } from "react";
 import ReactDOM from "react-dom";
 

template/src/index.ts

@@ -1,4 +1,4 @@
-import { ExtensionContext } from "@foxglove/studio";
+import { ExtensionContext } from "@foxglove/extension";
 import { initExamplePanel } from "./ExamplePanel";
 
 export function activate(extensionContext: ExtensionContext): void {