📌 Overview
Awesomeness Tooltip is a Visual Studio Code extension that provides helpful tooltips for JavaScript files. It extracts schema information based on configured path aliases and displays detailed hover tooltips, making it easier to understand object structures and relationships within your project.
Provides way more information than the default hover, intellisense, or peek definition (even with TS).
🥱 TLDR;
If you want to provide 100% custom tooltips based on custom MD, or Awesomeness Schema files or Awesomeness _info.js files, this is the extension for you.
You can do something like this:
Anytime the cursor hovers over a line that has ui.anthing() you will get a custom tool tip! (Yeah it can be 100% MD)
🚀 Features
📝 Hover Tooltips: Displays structured tooltips with schema descriptions, properties, edges, and related key-value pairs.
🔄 Dynamic Schema Loading: Fetches schema information dynamically from configured paths.
🖥 Customizable Configuration: Supports custom path mappings for schema locations.
📡 Efficient Caching & Watching: Utilizes caching and file watching to enhance performance.
📢 Debugging Output Channel: Provides logs in a dedicated "Awesomeness Tooltip" output channel.
🛠️ Configuration
Project config file: .awesomeness/config.js
As a fallback, you can also configure via: settings.json
But this makes it so you cannot have a dynamic tipMap for site-specific components.
Example .awesomeness/config.js
export default {
// Enable debug logging
// turns on Awesomeness Intellitip output channel
// turns on additional Awesomeness Server logs
debug: true,
siteDir__URL: new URL('../sites/', import.meta.url),
schemas: {
"@schemas": "schemas"
},
// can be strings
// arrays of strings
// arrays of URLs
// or a function that returns an array of URLs
// each key is used as the trigger word in your code
tipMap: {
app: "api/functions",
ui: ({ site }) => {
// build a site-specific base URL relative to the config file
const siteURL = new URL(`../sites/${site}/`, import.meta.url);
return [
new URL('./components/', siteURL), // site-first
new URL('../awesomeness-ui/components/', import.meta.url) // fallback
];
}
},
};
How dynamic tipMap function works
Function are passes an object with the site parameter.
If you are in a file within siteDir__URL,
e.g. ../sites/mysite/pages/home.js,
the site parameter will be mysite.
This way you can have site-specific components loaded first, and then fallback to shared components.
🎯 Usage
Each component, be it an awesomeness-ui component or awesomeness-api/routes should live in its own folder with either a readme.md or _info.js file to describe it.
📚 File Resolution Priority
For components (like those in awesomeness-ui/components or api/functions):
For schemas (like those in schemas), the lookup directly resolves to:
🧑💻 Example Usage
// FRONT END
import ui from '#ui';
// will look for:
// 1. awesomeness-ui/example/readme.md
// 2. awesomeness-ui/example/_info.js
const test = ui._example();
// will look for:
// 1. awesomeness-ui/example/subComponent.md
// 2. awesomeness-ui/example/subComponent/readme.md
// 3. awesomeness-ui/example/subComponent/_info.js
const testGrid = ui._example.subComponent();
// will look for:
// 1. awesomeness-ui/example/subComponent/deep.md
// 2. awesomeness-ui/example/subComponent/deep/readme.md
// 3. awesomeness-ui/example/subComponent/deep/_info.js
const $subDeep = ui._example.subComponent.deep();
Basic Example
Backend Component
Component with Image
📑 Schemas
While Schemas can be any object structure, the following keys have special meaning and display in the hover:
- name: the name of a schema
- description: the description of a schema
- properties: the properties of a schema
- edges: the edges of a schema (vertices that are connected to this schema)
- relatedKVs: the key-value pairs related to this schema
See example schema for a full example.
Example Hover Display
user
A user of an application
user {
id: uuid
first: string
last: string
phone: array
email: array
password: string
}
Details
{
id: {
type: uuid,
description: "the id of the vertex",
default: () => { return uuid(); },
immutable: true,
required: true
},
first: {
type: string,
description: "first name of the user",
default: null,
minLength: 1,
maxLength: 100
},
last: {
type: string,
description: "last name of the user",
default: null,
minLength: 1,
maxLength: 100
},
phone: {
type: array,
description: "phone numbers of the user",
items: {
$ref: "phone"
}
},
email: {
type: array,
description: "email addresses of the user",
items: {
$ref: "email"
}
},
password: {
type: string,
description: "hashed password of the user",
default: null
}
}
Edges
user -- friend --> user
user::{{ application.id }}::email::{{ user.email }}
{
type: string,
description: "uuid of the user",
example: "00000000-0000-0000-0000-000000000000"
}
user::{{ application.id }}::phone::{{ user.phone }}
{
type: string,
description: "uuid of the user",
example: "00000000-0000-0000-0000-000000000000"
}
