initial commit

Author: cmoog

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "**/*.d.ts"
+    ]
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto

.gitignore

@@ -0,0 +1,4 @@
+out
+node_modules
+.vscode-test/
+*.vsix

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "eamodio.tsl-problem-matcher"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,51 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "pwa-extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/**/*.js"
+      ],
+      "debugWebviews": {
+        "urlFilter": "*notebookRenderer*"
+      },
+      "trace": true,
+      "preLaunchTask": "npm: dev"
+    },
+    {
+      "name": "Run Extension (no server)",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/**/*.js"
+      ],
+      "debugWebviews": true,
+      "preLaunchTask": "npm: watch"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/test/**/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.exclude": {
+    "out": false // set this to true to hide the "out" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true // set this to false to include "out" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,36 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "problemMatcher": ["$tsc-watch", "$ts-checker-webpack-watch"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": ["$tsc-watch", "$ts-checker-webpack-watch"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": "build"
+    },
+    {
+      "type": "npm",
+      "script": "compile",
+      "problemMatcher": ["$tsc", "$ts-checker-webpack"],
+      "group": "build"
+    }
+  ]
+}

.vscodeignore

@@ -0,0 +1,12 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/*.tsbuildinfo

.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "sqlnotebook" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,28 @@
+# sqlnotebook
+
+⚠️ Work-in-progress starter code for custom notebook renderers in VS Code. Expect this to change as notebooks matures. ⚠️
+
+This starter includes:
+
+ - 🖥️ TypeScript code to create a simple `NotebookOutputRenderer`
+ - 📦 A Webpack build for renderer client code
+ - ⚡ Support for hot module reloading and safe boilerplate
+ - 🎨 CSS modules support
+
+### Running this Sample
+
+ 1. `cd sqlnotebook`
+ 1. `code-insiders .`: Open the folder in VS Code Insiders
+ 1. Hit `F5` to build+debug
+
+### Structure
+
+A Notebook Renderer consists of code that runs in the VS Code Extension Host (Node.js), which registers the renderer and passes data into the UI code running inside a WebView (Browser/DOM).
+
+This uses TypeScript project references. There are three projects in the `src` directory:
+
+ - `extension` contains the code running in Node.js extension host. It's compiled with `tsc`.
+ - `client` is the UI code, built by Webpack, with access to the DOM.
+ - `common` contains code shared between the extension and client.
+
+When you run `watch`, `compile`, or `dev`, we invoke both `tsc` and `webpack` to compile the extension and the client portion of the code.

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "sqlnotebook",
+  "displayName": "sqlnotebook",
+  "description": "A notebook for exploratory SQL work.",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.59.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./out/extension/extension.js",
+  "contributes": {
+    "notebookRenderer": [
+      {
+        "id": "sqlnotebook",
+        "entrypoint": "./out/client/index.js",
+        "displayName": "SQL Notebook",
+        "mimeTypes": ["x-application/sample-json-renderer"]
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run compile && node out/test/checkNoTestProvider.js",
+    "compile": "npm run compile:extension && npm run compile:client",
+    "compile:extension": "tsc -b",
+    "compile:client": "webpack --mode production",
+    "lint": "eslint src --ext ts",
+    "watch": "concurrently -r \"npm:watch:*\"",
+    "watch:extension": "tsc -b --watch",
+    "watch:client": "webpack --mode development --watch",
+    "dev": "concurrently -r npm:watch:extension npm:watch:client",
+    "pretest": "npm run compile && npm run lint",
+    "test": "node ./out/test/runTest.js"
+  },
+  "devDependencies": {
+    "@types/glob": "^7.1.3",
+    "@types/mocha": "^8.2.2",
+    "@types/node": "14.x",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
+    "@types/vscode-notebook-renderer": "^1.57.8",
+    "@types/vscode": "^1.59.0",
+    "concurrently": "^5.3.0",
+    "css-loader": "^4.2.0",
+    "eslint": "^7.27.0",
+    "fork-ts-checker-webpack-plugin": "^5.0.14",
+    "glob": "^7.1.7",
+    "mocha": "^8.4.0",
+    "style-loader": "^1.2.1",
+    "ts-loader": "^9.2.2",
+    "typescript": "^4.3.2",
+    "vscode-notebook-error-overlay": "^1.0.1",
+    "vscode-test": "^1.5.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0"
+  }
+}

src/client/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: { [className: string]: string };
+  export = classes;
+}

src/client/index.ts

@@ -0,0 +1,42 @@
+import { render } from './render';
+import errorOverlay from 'vscode-notebook-error-overlay';
+import type { ActivationFunction } from 'vscode-notebook-renderer';
+
+// Fix the public path so that any async import()'s work as expected.
+declare const __webpack_relative_entrypoint_to_root__: string;
+declare const scriptUrl: string;
+
+__webpack_public_path__ = new URL(scriptUrl.replace(/[^/]+$/, '') + __webpack_relative_entrypoint_to_root__).toString();
+
+// ----------------------------------------------------------------------------
+// This is the entrypoint to the notebook renderer's webview client-side code.
+// This contains some boilerplate that calls the `render()` function when new
+// output is available. You probably don't need to change this code; put your
+// rendering logic inside of the `render()` function.
+// ----------------------------------------------------------------------------
+
+export const activate: ActivationFunction = context => {
+  return {
+    renderOutputItem(outputItem, element) {
+      let shadow = element.shadowRoot;
+      if (!shadow) {
+        shadow = element.attachShadow({ mode: 'open' });
+        const root = document.createElement('div');
+        root.id = 'root';
+        shadow.append(root);
+      }
+      const root = shadow.querySelector<HTMLElement>('#root')!;
+      errorOverlay.wrap(root, () => {
+        root.innerHTML = '';
+        const node = document.createElement('div');
+        root.appendChild(node);
+
+        render({ container: node, mime: outputItem.mime, value: outputItem.json(), context });
+      });
+    },
+    disposeOutputItem(outputId) {
+      // Do any teardown here. outputId is the cell output being deleted, or
+      // undefined if we're clearing all outputs.
+    }
+  };
+};

src/client/render.ts

@@ -0,0 +1,31 @@
+// We've set up this sample using CSS modules, which lets you import class
+// names into JavaScript: https://github.com/css-modules/css-modules
+// You can configure or change this in the webpack.config.js file.
+import * as style from './style.css';
+import type { RendererContext } from 'vscode-notebook-renderer';
+
+interface IRenderInfo {
+  container: HTMLElement;
+  mime: string;
+  value: any;
+  context: RendererContext<unknown>;
+}
+
+// This function is called to render your contents.
+export function render({ container, mime, value }: IRenderInfo) {
+  // Format the JSON and insert it as <pre><code>{ ... }</code></pre>
+  // Replace this with your custom code!
+  const pre = document.createElement('pre');
+  pre.classList.add(style.json);
+  const code = document.createElement('code');
+  code.textContent = `mime type: ${mime}\n\n${JSON.stringify(value, null, 2)}`;
+  pre.appendChild(code);
+  container.appendChild(pre);
+}
+
+if (module.hot) {
+  module.hot.addDisposeHandler(() => {
+    // In development, this will be called before the renderer is reloaded. You
+    // can use this to clean up or stash any state.
+  });
+}

src/client/style.css

@@ -0,0 +1,5 @@
+.json code {
+  font-family: monospace;
+  font-size: 12px;
+  color: lightblue;
+}

src/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig-base.json",
+  "compilerOptions": {
+    // noEmit prevents the default tsc from building this--we use webpack instead
+    "noEmit": true,
+    "rootDir": ".",
+    "module": "esnext",
+    "lib": ["ES2019", "dom"],
+    "types": ["webpack-env", "vscode-notebook-renderer"],
+  }
+}

src/extension/extension.ts

@@ -0,0 +1,13 @@
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from 'vscode';
+
+
+// This method is called when your extension is activated
+// your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+	throw new Error("failed to activie");
+}
+
+// This method is called when your extension is deactivated
+export function deactivate() { }

src/extension/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig-base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "../../out/extension",
+  },
+  "references": []
+}