github
html_url | issue_url | id | node_id | user | created_at | updated_at | author_association | body | reactions | issue | performed_via_github_app |
---|---|---|---|---|---|---|---|---|---|---|---|
https://github.com/simonw/datasette/pull/2052#issuecomment-1510423051 | https://api.github.com/repos/simonw/datasette/issues/2052 | 1510423051 | IC_kwDOBm6k_c5aBzoL | 9020979 | 2023-04-16T16:12:14Z | 2023-04-20T05:14:39Z | CONTRIBUTOR | # Javascript Plugin Docs (alpha) ## Motivation The Datasette JS Plugin API allows developers to add interactive features to the UI, without having to modify the Python source code. ## Setup No external/NPM dependencies are needed. Plugin behavior is coordinated by the Datasette `manager`. Every page has 1 `manager`. There are 2 ways to add your plugin to the `manager`. 1. Read `window.__DATASETTE__` if the manager was already loaded. ```js const manager = window.__DATASETTE__; ``` 2. Wait for the `datasette_init` event to fire if your code was loaded before the manager is ready. ```js document.addEventListener("datasette_init", function (evt) { const { detail: manager } = evt; // register plugin here }); ``` 3. Add plugin to the manager by calling `manager.registerPlugin` in a JS file. Each plugin will supply 1 or more hooks with - unique name (`YOUR_PLUGIN_NAME`) - a numeric version (starting at `0.1`), - configuration value, the details vary by hook. (In this example, `getColumnActions` takes a function) ```js manager.registerPlugin("YOUR_PLUGIN_NAME", { version: 0.1, makeColumnActions: (columnMeta) => { return [ { label: "Copy name to clipboard", // evt = native click event onClick: (evt) => copyToClipboard(columnMeta.column), } ]; }, }); ``` There are 2 plugin hooks available to `manager.registerPlugin`: - `makeColumnActions` - Add items to the cog menu for headers on datasette table pages - `makeAboveTablePanelConfigs` - Add items to "tabbed" panel above the `<table/>` on pages that use the Datasette table template. While there are additional properties on the `manager`, but it's not advised to depend on them directly as the shape is subject to change. 4. To make your JS file available as a Datasette plugin from the Python side, you can add a python file resembling [this](https://github.com/simonw/datasette/pull/2052/files#diff-c5ecf3d22075a60d04a4e95da2… | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1651082214 | |
https://github.com/simonw/datasette/pull/2052#issuecomment-1510423215 | https://api.github.com/repos/simonw/datasette/issues/2052 | 1510423215 | IC_kwDOBm6k_c5aBzqv | 9020979 | 2023-04-16T16:12:59Z | 2023-04-16T16:12:59Z | CONTRIBUTOR | ## Research notes - I stuck to the "minimal dependencies" ethos of datasette (no React, Typescript, JS linting, etc). - Main threads on JS plugin development - Main: sketch of pluggy-inspired system: https://github.com/simonw/datasette/issues/983 - Main: provide locations in Datasette HTML that are designed for multiple plugins to safely cooperate with each other (starting with the panel, but eventually could extend to "search boxes"): https://github.com/simonw/datasette/issues/1191 - Main: HTML hooks for JS plugin authors: https://github.com/simonw/datasette/issues/987 - Prior threads on JS plugins in Datasette for future design directions - Idea: pass useful strings to JS plugins: https://github.com/simonw/datasette/issues/1565 - Idea: help with plugin dependency loading: https://github.com/simonw/datasette/issues/1542 . (IMO - the plugin providing the dependency can emit an event once it's done. Other plugins can listen for it, or ask the manager to inform them when the dependency is available). - Idea: help plugins to manage state in shareable URLs (plugins shouldn't have to interact with the URL directly, should have some basic insulation from clobbering each others' keys): https://github.com/simonw/datasette/issues/1144 - Articles on plugins reviewed - https://css-tricks.com/designing-a-javascript-plugin-system/ - Plugin/Extension systems reviewed (mostly JS). - Yarn: https://yarnpkg.com/advanced/plugin-tutorial - Tappable https://github.com/webpack/tapable (used by Auto, webpack) - Pluggy: https://pluggy.readthedocs.io/en/stable/ - VSCode: https://code.visualstudio.com/api/get-started/your-first-extension - Chrome: https://developer.chrome.com/docs/extensions/reference/ - Figma/Figjam Widget: https://www.figma.com/widget-docs/ - Datadog Apps: [Programming Model](https://github.com/DataDog/apps/blob/master/docs/en/programming-model.md) - Storybook: https://storybook.js.org/docs/react/addons/addons-api | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1651082214 |