Bump discoveryjs

Author: lahmatiy

package-lock.json

@@ -1,13 +1,12 @@
 {
     "license": "MIT",
     "repository": "csstree/docs",
-    "dependencies": {
-        "@discoveryjs/view-plugin-highcharts": "^1.0.1"
-    },
+    "dependencies": {},
     "devDependencies": {
-        "@discoveryjs/discovery": "1.0.0-beta.51",
-        "@discoveryjs/cli": "^1.15.0",
-        "css-tree": "^1.1.1",
+        "highcharts": "^8.0.0",
+        "@discoveryjs/discovery": "1.0.0-beta.56",
+        "@discoveryjs/cli": "^2.0.0-beta.8",
+        "css-tree": "^1.1.2",
         "diff": "^4.0.1",
         "eslint": "^7.0.0",
         "resolve": "^1.5.0"

package.json

@@ -1,24 +1,15 @@
-const path = require('path');
-const fetchData = require('./data');
-
 module.exports = {
     name: 'CSS syntax reference (mdn/data & CSSTree)',
-    data: fetchData,
+    basedir: __dirname,
     darkmode: 'disabled',
-    prepare: path.join(__dirname, 'prepare.js'),
-    plugins: [
-        '@discoveryjs/view-plugin-highcharts',
-        '@discoveryjs/view-plugin-highcharts/index.css'
-    ],
+    data: './data',
+    prepare: './prepare',
     view: {
-        basedir: __dirname,
-        libs: {
-            csstree: '../../node_modules/css-tree/dist/csstree.min.js',
-            difflib: '../../node_modules/diff/dist/diff.js'
-        },
         assets: [
             'ui/sidebar.css',
             'ui/sidebar.js',
+            'ui/view/chart.css',
+            'ui/view/chart.js',
             'ui/page/default.css',
             'ui/page/default.js',
             'ui/page/problems.css',

src/syntax/config.js

@@ -1,8 +1,8 @@
 /* eslint-env browser */
-/* global discovery, csstree, ga */
-
-const functionSyntaxes = new WeakMap();
+/* global discovery, ga */
+const csstree = require('css-tree');
 const { definitionSyntax } = csstree;
+const functionSyntaxes = new WeakMap();
 
 function syntaxName(syntax) {
     const { type, name, parent } = syntax || {};

src/syntax/prepare.js

@@ -14,3 +14,10 @@
     font-family: Helvetica;
     font-weight: 100;
 }
+
+.view-hstack {
+    display: flex;
+}
+.view-chart {
+    flex: 1;
+}

src/syntax/ui/page/default.css

@@ -0,0 +1,5 @@
+@import url('highcharts/css/highcharts.css');
+
+.view-chart .highcharts-data-label text {
+    font-weight: normal !important;
+}

src/syntax/ui/view/chart.css

@@ -0,0 +1,50 @@
+/* eslint-env browser */
+/* global discovery */
+const Highcharts = require('highcharts');
+
+discovery.view.define('chart', function(el, config, data, context) {
+    const { options } = config;
+    const label = '<b>{point.y}</b> ({point.percentage:.1f}%)';
+    const container = el.appendChild(document.createElement('div'));
+
+    if (!Array.isArray(data)) {
+        data = data ? [data] : [];
+    }
+
+    if (data[0] && !data[0].data) {
+        data = [{ data }];
+    }
+
+    try {
+        const chart = Highcharts.chart(container, Highcharts.merge({
+            chart: {
+                type: 'pie'
+            },
+            title: {
+                text: undefined
+            },
+            credits: {
+                enabled: false
+            },
+            tooltip: {
+                pointFormat: label
+            },
+            plotOptions: {
+                pie: {
+                    cursor: 'pointer',
+                    dataLabels: {
+                        format: '{point.name} – ' + label,
+                        useHTMsL: true
+                    }
+                }
+            },
+            series: data
+        }, options));
+
+        setTimeout(() => {
+            chart.reflow();
+        }, 1);
+    } catch (e) {
+        discovery.view.render(el, { view: 'fallback', reason: e.message }, data, context);
+    }
+});

src/syntax/ui/view/chart.js

@@ -1,6 +1,6 @@
 /* eslint-env browser */
-/* global discovery, difflib */
-
+/* global discovery */
+const difflib = require('diff');
 const diffType = {
     char: difflib.diffChars,
     word: difflib.diffWords,

src/syntax/ui/view/diff.js

@@ -1,4 +1,5 @@
-/* global discovery, csstree */
+/* global discovery */
+const csstree = require('css-tree');
 
 function escapeHtml(str) {
     return str

src/syntax/ui/view/syntax-match-trace.js

@@ -1,4 +1,5 @@
-/* global discovery, csstree */
+/* global discovery */
+const csstree = require('css-tree');
 
 function escapeHtml(str) {
     return str