qlk --

Press a button, and preview a react component in the browser (no fuss no muss!)

!WARNING! qlk is super buggy alpha software™

• Parcel is great
• Typescript rocks
• React is pretty cool
• vscode is good stuff

Let's combine them to quickly look at and preview React Components from a single editor built with Parcel.

Usage

Press the qlk button in the status bar at the bottom of vscode and qlk will look for an export in the currently active editor named: qlk or QLK or else it will use the default export. It will treat that export as a react component and start a local webserver and load it into an html page for previewing.

e.g.

pressing the qlk button in the status bar with MyFile.js

  export const qlk = () => {
    return <div>Hello World!</div>
  }

in the active editor should open a browser window that displays:

Protips

if you are doing typescript you will probably want to make sure you have parcel-plugin-typescript installed in your project

Building

Build / Deploy locally with

bin/package.sh

Develop with

npm run compile to start the compiler in watch mode open this folder in VS Code and press F5

TODO: Use activibar isntead of bottom of screen https://github.com/Microsoft/vscode-docs/blob/vnext/release-notes/v1_23.md#contributions-to-the-activity-bar

JUNK DRAWER NOTES

CSS Properties Preview Sample

This is an sample extension that illustrates the use of virtual documents or TextDocumentContentProviders together with the vscode.previewHtml command.

It is not intended as a product quality extension.

The purpose of the extension is to show a preview of the properties in the declaration block of a CSS rule. To play with the extension:

• Open a CSS file
• Use Show CSS Properties Preview
• Position the cursor inside the declaration block of the rule
• The properties are rendered in the preview
• Edit the properties and the preview is updated

How it works

• The extension implements and registers a TextDocumentContentProvider for a particular URI scheme.
• The content provider creates a HTML document that contains the declaration block of the selected CSS rule in the active editor.
• The generated HTML document contains a link that invokes a contributed command to highlight the CSS rule in the source editor
• The generated HTML document is then opened in an editor in the 2nd Column using the command vscode.previewHtml.

How to run locally

• npm install
• npm run compile to start the compiler in watch mode
• open this folder in VS Code and press F5