Proposal for dynamic panes

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+typings/rdflib

.eslintrc

@@ -17,6 +17,13 @@
     "@typescript-eslint"
   ],
   "rules": {
-    "@typescript-eslint/no-unused-vars": "warn"
+    "no-unused-vars": ["warn", {
+      "argsIgnorePattern": "^_",
+      "varsIgnorePattern": "^_"
+    }],
+    "@typescript-eslint/no-unused-vars": ["warn", {
+      "argsIgnorePattern": "^_",
+      "varsIgnorePattern": "^_"
+    }]
   }
 }

index.js

@@ -50,7 +50,8 @@ let register = panes.register
 register(require('issue-pane'))
 register(require('contacts-pane'))
 
-register(require('./pad/padPane.js'))
+register(require('./packages/panes/scratchpad').legacyPane)
+register(require('./pad/padPane').default)
 // register(require('./argument/argumentPane.js')) // A position in an argument tree
 
 register(require('./transaction/pane.js'))

jest.config.js

@@ -1,4 +1,20 @@
 module.exports = {
   preset: 'ts-jest/presets/js-with-babel',
-  testEnvironment: 'node',
-};
+  testEnvironment: 'jsdom',
+  collectCoverage: true,
+  // For some reason Jest is not measuring coverage without the below option.
+  // Unfortunately, despite `!(.test)`, it still measures coverage of test files as well:
+  forceCoverageMatch: ['**/*!(.test).ts'],
+  // Since we're only measuring coverage for TypeScript (i.e. added with test infrastructure in place),
+  // we can be fairly strict. However, if you feel that something is not fit for coverage,
+  // mention why in a comment and mark it as ignored:
+  // https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100
+    }
+  }
+}

outline/manager.js

@@ -305,7 +305,7 @@ module.exports = function (doc) {
     };
     for (var i = 0; i < panes.list.length; i++) {
       let pane = panes.list[i]
-      var lab = pane.label(subject, dom)
+      var lab = pane.label(subject, dom, UI.store)
       if (!lab) continue
 
       relevantPanes.push(pane)
@@ -358,10 +358,10 @@ module.exports = function (doc) {
               var paneDiv
               UI.log.info('outline: Rendering pane (2): ' + pane.name)
               if (UI.no_catch_pane_errors) { // for debugging
-                paneDiv = pane.render(subject, dom, options)
+                paneDiv = pane.render(subject, dom, options, UI.store)
               } else {
                 try {
-                  paneDiv = pane.render(subject, dom, options)
+                  paneDiv = pane.render(subject, dom, options, UI.store)
                 } catch (e) { // Easier debugging for pane developers
                   paneDiv = dom.createElement('div')
                   paneDiv.setAttribute('class', 'exceptionPane')
@@ -470,7 +470,7 @@ module.exports = function (doc) {
         var paneDiv
         try {
           UI.log.info('outline: Rendering pane (1): ' + tr1.firstPane.name)
-          paneDiv = tr1.firstPane.render(subject, dom, options)
+          paneDiv = tr1.firstPane.render(subject, dom, options, UI.store)
         } catch (e) { // Easier debugging for pane developers
           paneDiv = dom.createElement('div')
           paneDiv.setAttribute('class', 'exceptionPane')

package.json

@@ -8,9 +8,11 @@
     "build-dist": "webpack --progress --colors",
     "build": "npm run clean && npm run build-dist",
     "watch": "npm run clean && webpack --progress --colors --watch --mode=\"development\"",
+    "watch-all": "cd packages; node initialise.js",
     "clean": "rm -rf dist/",
     "lint": "eslint \"**/*.ts\"",
-    "test": "npm run lint; jest"
+    "test": "npm run lint && jest --onlyChanged --watch",
+    "postinstall": "cd packages; node install.js"
   },
   "repository": {
     "type": "git",
@@ -44,6 +46,7 @@
     "solid-ui": "file://../../solid/solid-ui"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.4.4",
     "@solid/better-simple-slideshow": "^0.1.0",
     "chat-pane": ">=1.2.7",
     "contacts-pane": "^1.0.3",
@@ -70,12 +73,12 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.12",
-    "@types/rdflib": "^0.17.1",
     "@types/webpack-env": "^1.13.9",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
     "babel-loader": "^8.0.5",
     "babel-preset-es2015": "^6.24.1",
+    "concurrently": "^4.1.0",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.17.2",

packages/initialise.js

@@ -0,0 +1,43 @@
+/**
+ * This should be run from one of package.json's `script`s,
+ * and is used to build all pane packages embedded in this repository.
+ * This allows them to be developed and published as separate projects,
+ * but still included automatically when running solid-panes locally.
+ *
+ * The build process is split in three steps:
+ * 1. Collect a list of all embedded packages
+ * 2. Build them once
+ * 3. Watch them all for changes and rebuild if necessary
+ *
+ * Step 2 and step 3 both build the embedded packages. That sounds redundant,
+ * but both are necessary: in tandem with step 3, a watch process is started
+ * for solid-panes. Since that process might be looking for the embedded panes
+ * to be present before they have compiled for the first time, the first
+ * compilation is run explicitly.
+ */
+
+const getPanes = require('./panes/getPanes')
+const concurrently = require('concurrently')
+
+initialise()
+
+async function initialise () {
+  // Step 1: collect a list of embedded packages
+  const panes = getPanes()
+
+  // Step 2: run an initial build
+  const initialBuildCommands = panes.map(({ name, path }) => ({
+    command: `cd ${path}; npm run build-dev`,
+    name: `build ${name}`
+  }))
+  await concurrently(initialBuildCommands)
+
+  // Step 3: watch embedded packages for changes and rebuild when changed
+  const watchCommands = panes.map(({ name, path }) => ({
+    command: `cd ${path}; npm run watch`,
+    name: `watch ${name}`
+  }))
+  // (also make sure that we build solid-panes itself and watch for changes:)
+  watchCommands.push({ command: 'npm run watch', name: 'watch solid-panes' })
+  concurrently(watchCommands)
+}

packages/install.js

@@ -0,0 +1,14 @@
+const getPanes = require('./panes/getPanes')
+const concurrently = require('concurrently')
+
+install()
+
+async function install () {
+  const panes = getPanes()
+
+  const installCommands = panes.map(({ name, path }) => ({
+    command: `cd ${path}; npm install`,
+    name: `install ${name}`
+  }))
+  await concurrently(installCommands)
+}

packages/panes/getPanes.js

@@ -0,0 +1,18 @@
+const path = require('path')
+const fs = require('fs')
+
+function getPanes () {
+  const paneNames = fs.readdirSync(__dirname)
+    .filter(fileOrDir => fs.statSync(path.join(__dirname, fileOrDir)).isDirectory())
+    .filter(directory => directory !== 'webpack-config-panes')
+
+  const panes = paneNames.map(name => ({ name: name, path: getPaneDir(name) }))
+
+  return panes
+}
+
+function getPaneDir (pane) {
+  return path.join(__dirname, pane)
+}
+
+module.exports = getPanes

packages/panes/scratchpad/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist