Bump deps and small fixes

.eslintrc

@@ -5,7 +5,8 @@
         "es6": true
     },
     "parserOptions": {
-        "ecmaVersion": 2018
+        "ecmaVersion": 2020,
+        "sourceType": "module"
     },
     "rules": {
         "no-duplicate-case": 2,

package.json

@@ -3,9 +3,9 @@
     "repository": "csstree/docs",
     "dependencies": {},
     "devDependencies": {
-        "@discoveryjs/discovery": "1.0.0-beta.78",
-        "@discoveryjs/cli": "^2.6.0",
-        "css-tree": "^2.3.1",
+        "@discoveryjs/discovery": "1.0.0-beta.84",
+        "@discoveryjs/cli": "^2.9.1",
+        "css-tree": "^3.0.0",
         "diff": "^4.0.1",
         "eslint": "^8.50.0"
     },

src/syntax/config.js

@@ -1,7 +1,7 @@
 module.exports = {
     name: 'CSS syntax reference (mdn/data & CSSTree)',
     basedir: __dirname,
-    data: './data',
+    data: './data/index.mjs',
     prepare: './prepare',
     view: {
         assets: [

src/syntax/data/index.js → src/syntax/data/index.mjs

@@ -1,13 +1,16 @@
-const path = require('path');
+import path from 'node:path';
+import { createRequire } from 'node:module';
 
-module.exports = function() {
+const require = createRequire(import.meta.url);
+
+export default async function() {
     const csstreeRoot = path.dirname(require.resolve('css-tree/package.json'));
     const mdnDataIndex = require.resolve('mdn-data/css', { paths: [csstreeRoot] });
     const mdnPackageJson = require.resolve('mdn-data/package.json', { paths: [csstreeRoot] });
 
     const csstreeVersion = require('css-tree/package.json').version;
-    const csstreeData = require('css-tree/definition-syntax-data');
-    const csstreeDataPatch = require('css-tree/definition-syntax-data-patch');
+    const csstreeData = await import('css-tree/definition-syntax-data');
+    const csstreeDataPatch = await require('css-tree/definition-syntax-data-patch');
     const mdnData = require(mdnDataIndex);
     const mdnVersion = require(mdnPackageJson).version;
 

src/syntax/ui/page/default.js

@@ -30,7 +30,7 @@ discovery.page.define('default', [
             data: `.({
                 label: title,
                 value: query.query(#.data, #).size(),
-                href: href or pageLink('report', { query, title })
+                href: href or pageLink('discovery', { query, title })
             })`
         }
     },
@@ -39,7 +39,7 @@ discovery.page.define('default', [
         header: 'text:"Reports"',
         content: {
             view: 'ul',
-            item: 'link:{ text: title, href: pageLink("report", { ..., noedit: true }) }'
+            item: 'link:{ text: title, href: pageLink("discovery", { ..., noedit: true }) }'
         },
         data: [
             {

src/syntax/ui/page/syntax-page.js

@@ -108,6 +108,7 @@ const page = {
                         {
                             view: 'table',
                             className: 'descriptor-table',
+                            limit: false,
                             data: 'descriptors.values()',
                             cols: [
                                 { header: 'Name', content: ['auto-link{ content: "text:entity.name" }'] },

src/syntax/ui/sidebar.js

@@ -37,7 +37,7 @@ discovery.view.define('sidebar', {
             view: 'toc-section',
             header: [
                 'text:type',
-                'pill-badge:{ text: items.size(), href: pageLink("report", "dict.[type=\\"" + type + "\\"]") }',
+                'pill-badge:{ text: items.size(), href: pageLink("discovery", "dict.[type=\\"" + type + "\\"]") }',
                 {
                     view: 'pill-badge',
                     when: 'badSyntaxes',

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

@@ -1,12 +1,6 @@
 /* global discovery */
-const csstree = require('css-tree');
-
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
+import * as csstree from 'css-tree';
+import { utils } from '@discoveryjs/discovery';
 
 function buildMatchTrace(trace) {
     let childrenSyntaxes = [];
@@ -44,7 +38,7 @@ function buildMatchTrace(trace) {
 
         const syntaxStr = csstree.definitionSyntax.generate(syntax, function(str, node) {
             if (node.type === 'Type' || node.type === 'Property') {
-                str = escapeHtml(str);
+                str = utils.escapeHtml(str);
             }
 
             if (node.type === 'Type' || node.type === 'Property' ||

src/syntax/ui/view/syntax.js

@@ -1,20 +1,14 @@
 /* global discovery */
-const csstree = require('css-tree');
-
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
+import * as csstree from 'css-tree';
+import { utils } from '@discoveryjs/discovery';
 
 function markupSyntax(syntax, match) {
     return csstree.definitionSyntax.generate(syntax, function(str, node) {
         if (node.type === 'Type' || node.type === 'Property') {
             const entityDescriptor = discovery.objectMarkers.lookup(node);
             const error = !entityDescriptor || !entityDescriptor.object.match;
 
-            str = `<a href="#${node.type}:${node.name}"${error ? ' class="error"' : ''}>${escapeHtml(str)}</a>`;
+            str = `<a href="#${node.type}:${node.name}"${error ? ' class="error"' : ''}>${utils.escapeHtml(str)}</a>`;
         }
 
         if (match && match.type === node.type && match.name === node.name) {