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

…#123)

### Changelog
The `@foxglove/studio` NPM package has been renamed to
`@foxglove/extension`. Please update your custom extensions to depend on
`@foxglove/extension` to receive future API updates.

### Description
https://www.npmjs.com/package/@foxglove/extension

Bumped package version to 1.0.0 as it has not been published for a while
and is fairly stable/mature.

.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 {