DEV Community

loading...
Cover image for LocalPen: Intellisense

LocalPen: Intellisense

Hatem Hosny
・3 min read

This is a part of the series: LocalPen - code pens that run locally!

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

Let's assume you authored a library, and you want to build the documentation website for it with code sample and code playground. You can provide LocalPen with typescript types declaration file for it and it will have intellisense and auto-complete features like you get in local development in VSCode.

You can even have that for code that is not yet published to NPM. So that as you build your library, the documentation evolves with it.

You get intellisense and the code actually works!

Sounds crazy? Here is a working demo :)

Hint: try changing the names of the methods for the Greeter class. The demo above imports this class.

LocalPen can be configured by a JSON file (by default on the URL '/localpen.json'). Other URL may be used by passing a value to the querystring parameter config. The structure of this file and valid values can be found here. Notice that this may change till the API becomes stable.

In the configuration file, a modules property allows to map module names to URLs to retrieve from.

Example /localpen.json:

{
  "title": "My Project",
  "modules": [
    {
      "name": "my-demo-lib",
      "url": "/modules/my-demo-lib/index.js",
      "typesUrl": "/modules/my-demo-lib/types.d.ts"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This allows code like this is the TypeScript editor

Import { Greeter } from 'my-demo-lib';
const greeter = new Greeter();
greeter.morning();
Enter fullscreen mode Exit fullscreen mode

Working demo - Source Repo

If your library implements this code, the code will actually work in the result page, and you get full intellisense and typing support in the editor. This can be of large benefit for library authors in documentation to serve as playground for their code with editor support and can unleash the full potential of such a strong editor like Monaco editor.

Each item in the modules array may contain the following properties:

  • name: The module name
  • url: The URL to the entry point javascript file
  • typesUrl: The URL to the types declaration file.

The url and typesUrl properties should either be absolute URLs or relative to LocalPen index.html page.

The types declaration file defined by the typesUrl property has to be a single file per module. The module name declared in the file has to match the module name you want to use. The library dts-bundle was found very helpful to prepare such file. (example)

This method can tremendously improve the experience of the developers exploring your code. They do not have to keep revisiting the documentation pages to now the names of the methods or the list of arguments they accept.

You can use this method to get intellisense for your custom modules and also other modules you want. For example you may wish to add the typings for react and lodash.

Discussion (0)