Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update remaining foxglove references #165

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .eslintrc.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
extends:
- plugin:@lichtblick/base
- plugin:@lichtblick/jest

env:
node: true

ignorePatterns:
- dist
- examples
- template

overrides:
- files: ["*.ts", "*.tsx"]
extends:
- plugin:@lichtblick/typescript
parserOptions:
project: ./tsconfig.json
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ jobs:
- name: create sample extension
run: npx package.tgz sample

# install local package.tgz to use the foxglove-scripts from this build
# install local package.tgz to use the lichtblick-scripts from this build
- run: npm install ../package.tgz
working-directory: sample

Expand Down
48 changes: 20 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
# create-foxglove-extension
# create-lichtblick-extension

[![npm version](https://img.shields.io/npm/v/create-foxglove-extension.svg?style=flat)](https://www.npmjs.com/package/create-foxglove-extension)
[![npm version](https://img.shields.io/npm/v/create-lichtblick-extension.svg?style=flat)](https://www.npmjs.com/package/create-lichtblick-extension)

## Introduction

[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/extension` SDK.
Lichtblick allows developers to create extensions, or custom code
that is loaded and executed inside the Lichtblick application. Extensions are authored in TypeScript
using the "@lichtblick/suite" SDK.

## Creating Your First Extension

Make sure you have [Node.js](https://nodejs.org/) 14 or newer installed. In a terminal, go
Make sure you have [Node.js](https://nodejs.org/) 16 or newer installed. In a terminal, go
into the directory where you keep source code (ex: `cd ~/Code`) and run the following
command:

```sh
npm init foxglove-extension@latest helloworld
npm init lichtblick-extension@latest helloworld
```

Feel free to choose an extension name other than _helloworld_. Otherwise, this will create
Expand All @@ -29,22 +28,22 @@ npm install

This installs all of the dependencies needed to edit and build the extension. You can use
any editor to work on this project, although [VSCode](https://code.visualstudio.com/) is
the best supported IDE for authoring Foxglove extensions. Look at the files
the best supported IDE for authoring Lichtblick extensions. Look at the files
`src/index.ts` and `src/ExamplePanel.tsx` for a simple example of creating a React element
and registering it as a custom panel. To build and install this extension into your local
Foxglove extensions folder, run:
Lichtblick extensions folder, run:

```sh
npm run local-install
```

This should create a folder under your home directory such as
`~/.foxglove-studio/extensions/unknown.helloworld-0.0.0` containing your compiled
extension. Start Foxglove. If everything succeeded, you should be able to add a new
panel in Foxglove named _"ExamplePanel"_. Each time you make a change to your
`~/.lichtblick-suite/extensions/unknown.helloworld-0.0.0` containing your compiled
extension. Start Lichtblick. If everything succeeded, you should be able to add a new
panel in Lichtblick named _"ExamplePanel"_. Each time you make a change to your
extension, you will need to run `npm run local-install` again to build it and copy the
build output to the Foxglove extensions folder in your home directory. You can
either reload Foxglove or close and reopen it to load your latest extension code.
build output to the Lichtblick extensions folder in your home directory. You can
either reload Lichtblick or close and reopen it to load your latest extension code.

If you just want to confirm your code compiles without installing it locally, run `npm run build`.

Expand Down Expand Up @@ -75,27 +74,20 @@ npm run package

This will produce a _.foxe_ file such as `helloworld-0.0.0.foxe`. This is essentially a
ZIP archive containing your extension manifest and compiled code that can be opened by the
Foxglove application, which will unpack it and install it to the
`~/.foxglove-studio/extensions` folder. Stay tuned for future instructions on how to
publish Foxglove extensions to a registry so other users can easily search for and
install your extension.
Lichtblick application, which will unpack it and install it to the
`~/.lichtblick-suite/extensions` folder.

## Examples

You can find examples of different kinds of extensions in the `./examples` directory.

## Stay in touch

Join our [Discord](https://foxglove.dev/chat) to ask questions, share
feedback, and stay up to date on what our team is working on.

## Developer information

Information on developing `create-foxglove-extension` itself.
Information on developing `create-lichtblick-extension` itself.

### Build and Run Locally

Build the `create-foxglove-extension` package locally with:
Build the `create-lichtblick-extension` package locally with:

```bash
npm pack
Expand All @@ -104,13 +96,13 @@ npm pack
Run the extension generator:

```bash
npx create-foxglove-extension-{VERSION}.tgz example-extension-name
npx create-lichtblick-extension-{VERSION}.tgz example-extension-name
```

### Release process

1. Bump the version in package.json, and merge to main
2. [Create a new release](https://github.com/foxglove/create-foxglove-extension/releases/new)
2. [Create a new release](https://github.com/Lichtblick-Suite/create-lichtblick-extension/releases/new)
3. Create a tag for the version above, with a leading "v" (`v0.0.0`)
4. Generate release notes
5. Publish the release
20 changes: 0 additions & 20 deletions eslint.config.js

This file was deleted.

27 changes: 27 additions & 0 deletions examples/call-service-panel-example/.eslintrc.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
root: true

env:
browser: true
es2020: true
node: false

ignorePatterns:
- dist

plugins:
- jest

extends:
- plugin:@lichtblick/base
- plugin:@lichtblick/react

rules:
react-hooks/exhaustive-deps:
- error

overrides:
- files: ["*.ts", "*.tsx"]
extends:
- plugin:@lichtblick/typescript
parserOptions:
project: ./tsconfig.json
2 changes: 1 addition & 1 deletion examples/call-service-panel-example/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# call-service-panel

This is a simple [Foxglove](http://foxglove.dev/) [extension panel](https://docs.foxglove.dev/docs/visualization/extensions/api/panel) that allows for calling services.
This is a simple [Lichtblick](https://github.com/Lichtblick-Suite) extension panel that allows for calling services.
23 changes: 0 additions & 23 deletions examples/call-service-panel-example/eslint.config.js

This file was deleted.

Loading