Chore/jsdoc4 update

README.md

@@ -1,6 +1,6 @@
 <img src="./readme/logo.png" />
 
-Documentation toolbox for your **javascript** / **typescript** projects based on JSDoc3 with **@category**, **@component** and **@optional** plugins.
+Documentation toolbox for your **javascript** / **typescript** projects based on JSDoc4 with **@category**, **@component** and **@optional** plugins.
 
 This is how it looks:
 
@@ -270,10 +270,10 @@ Since __component__ plugin uses [parcel](https://parceljs.org) as a bundler you
 
 ```
 # if you use npm
-npm install -g parcel-bundler
+npm install -g parcel
 
 # or yarn
-yarn global add parcel-bundler
+yarn global add parcel
 ```
 
 ## Usage

bundler.js

@@ -78,9 +78,9 @@ module.exports = function bundle (Components, out, config) {
 
   console.log('Generating entry file for "components" plugin')
   fs.writeFileSync(entry, entryFile)
-  console.log('Bundling components')
+  console.log('Bundling components...')
   const outDist = path.join(out, 'build')
-  const cmd = `${process.platform === 'win32' ? 'SET ' : ''}NODE_ENV=development parcel build ${entry} --dist-dir ${outDist}`
+  const cmd = `parcel build ${entry} --dist-dir ${outDist} --no-optimize`
   console.log(`running: ${cmd}`)
   try {
     execSync(cmd)

component.js

@@ -24,6 +24,7 @@ exports.handlers = {
         doclet.component.type = 'react'
       }
       doclet.kind = 'class'
+      doclet.type = 'component'
     } else {
       if (path.extname(filePath) === '.vue') {
         const docGen = vueDocs.parse(filePath)
@@ -36,9 +37,9 @@ exports.handlers = {
       }
 
       if (path.extname(filePath) === '.jsx') {
-        if (doclet.kind !== 'function' && doclet.kind !== 'event') {
-          doclet.undocumented = true
-        }
+        // if (doclet.kind !== 'function' && doclet.kind !== 'event') {
+        //   doclet.undocumented = true
+        // }
       }
     }
   }
@@ -55,7 +56,7 @@ var parseReact = function (filePath, doclet) {
   var src = fs.readFileSync(filePath, 'UTF-8')
   var docGen
   try {
-    docGen = reactDocs.parse(src)
+    docGen = reactDocs.parse(src, reactDocs.resolver.findAllComponentDefinitions)[0];
   } catch (error) {
     if (error.message === 'No suitable component definition found.') {
       return {
@@ -67,7 +68,7 @@ var parseReact = function (filePath, doclet) {
       throw error
     }
   }
-  
+
   return {
     props: Object.entries(docGen.props || {}).map(([key, prop]) => ({
       name: key,

lib/load/fill-component-preview.js

@@ -11,10 +11,10 @@ const fillComponentPreview = (text, mdParser) => {
       <div id="${uniqId}"></div>
 
       <script>
-        ReactDOM.render(ReactWrapper({
+        ReactDOM.createRoot(document.getElementById('${uniqId}')).render(ReactWrapper({
           example: ${JSON.stringify(group)},
           uniqId: ${JSON.stringify(uniqId)},
-        }), document.getElementById('${uniqId}'));
+        }));
       </script>
     `;
         return uniqId;

lib/react-wrapper.js

@@ -122,9 +122,9 @@ function (_React$Component) {
       var height = this.state.height;
       var padding = 5; // buffer for any unstyled margins
 
-      if (this.iframeRef.current && this.iframeRef.current.node.contentDocument && this.iframeRef.current.node.contentDocument.body.offsetHeight !== 0 && this.iframeRef.current.node.contentDocument.body.offsetHeight !== height - padding) {
+      if (this.iframeRef.current && this.iframeRef.current && this.iframeRef.current.contentDocument && this.iframeRef.current.contentDocument.body && this.iframeRef.current.contentDocument.body.offsetHeight !== 0 && this.iframeRef.current.contentDocument.body.offsetHeight !== height - padding) {
         this.setState({
-          height: this.iframeRef.current.node.contentDocument.body.offsetHeight + padding
+          height: this.iframeRef.current.contentDocument.body.offsetHeight + padding
         });
       }
     }

package.json

@@ -15,49 +15,49 @@
   "license": "MIT",
   "dependencies": {
     "brace": "^0.11.1",
-    "react-ace": "^9.5.0",
-    "react-docgen": "^5.4.0",
-    "react-frame-component": "^5.2.1",
-    "typescript": "^4.5.4",
-    "underscore": "^1.13.2",
-    "vue-docgen-api": "^3.26.0",
+    "react-ace": "^10.1.0",
+    "react-docgen": "^5.4.3",
+    "react-frame-component": "^5.2.6",
+    "typescript": "^4.9.5",
+    "underscore": "^1.13.6",
+    "vue-docgen-api": "^4.56.4",
     "vue2-ace-editor": "^0.0.15"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@commitlint/cli": "^16.0.2",
-    "@commitlint/config-conventional": "^16.0.0",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
     "@semantic-release/git": "^10.0.1",
     "@vue/component-compiler-utils": "^3.3.0",
-    "browser-sync": "^2.27.7",
-    "bulma": "^0.9.3",
-    "chai": "^4.3.4",
-    "eslint": "^8.7.0",
+    "browser-sync": "^2.27.12",
+    "bulma": "^0.9.4",
+    "chai": "^4.3.7",
+    "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-vue": "^8.3.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-vue": "^9.9.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-uglify": "^3.0.2",
-    "husky": "^7.0.4",
-    "jsdoc": "^3.6.7",
-    "mocha": "^9.1.4",
-    "sass": "^1.48.0",
-    "semantic-release": "^18.0.1"
+    "husky": "^8.0.3",
+    "jsdoc": "^4.0.2",
+    "mocha": "^10.2.0",
+    "sass": "^1.58.3",
+    "semantic-release": "^19.0.5"
   },
   "husky": {
     "hooks": {

publish.js

@@ -6,7 +6,7 @@ var fs = require('jsdoc/fs')
 var helper = require('jsdoc/util/templateHelper')
 var logger = require('jsdoc/util/logger')
 var path = require('jsdoc/path')
-var taffy = require('taffydb').taffy
+const { taffy } = require('@jsdoc/salty');
 var template = require('jsdoc/template')
 var util = require('util')
 const { getParser } = require('jsdoc/util/markdown')
@@ -369,7 +369,7 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn) {
       if (itemsNav !== '') {
         var heading = itemHeading
         if (subCategoryName) {
-          heading = heading + ' / ' + subCategoryName
+          heading = heading === 'Globals' ? subCategoryName : heading + ' / ' + subCategoryName
         }
         nav += '<h3>' + heading + '</h3><ul>' + itemsNav + '</ul>'
       }
@@ -405,6 +405,7 @@ function buildGroupNav (members, title) {
   nav += buildMemberNav(members.events || [], 'Events', seen, linkto)
   nav += buildMemberNav(members.mixins || [], 'Mixins', seen, linkto)
   nav += buildMemberNav(members.components || [], 'Components', seen, linkto)
+  nav += buildMemberNav(members.globals || [], 'Globals', seen, linkto)
 
   if (members.globals && members.globals.length) {
     globalNav = ''
@@ -693,7 +694,7 @@ exports.publish = function(taffyData, opts, tutorials) {
     members.tutorials = tutorials.children
   }
   view.tutorials = members.tutorials
-  members.components = helper.find(data, {kind: 'class', component: {isUndefined: false}})
+  members.components = helper.find(data, { type: 'component' })
   members.classes = helper.find(data, {kind: 'class', component: {isUndefined: true}})
 
   // output pretty-printed source files by default

src/react-wrapper.jsx

@@ -69,12 +69,13 @@ class Wrapper extends React.Component {
     const padding = 5 // buffer for any unstyled margins
     if (
       this.iframeRef.current
-      && this.iframeRef.current.node.contentDocument
-      && this.iframeRef.current.node.contentDocument.body.offsetHeight !== 0
-      && this.iframeRef.current.node.contentDocument.body.offsetHeight !== (height - padding)
+      && this.iframeRef.current.contentDocument
+      && this.iframeRef.current.contentDocument.body
+      && this.iframeRef.current.contentDocument.body.offsetHeight !== 0
+      && this.iframeRef.current.contentDocument.body.offsetHeight !== (height - padding)
     ) {
       this.setState({
-        height: this.iframeRef.current.node.contentDocument.body.offsetHeight + padding,
+        height: this.iframeRef.current.contentDocument.body.offsetHeight + padding,
       })
     }
   }

tmpl/head.tmpl

@@ -9,7 +9,7 @@
 
   <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <script src="./build/entry.js"></script>
+  <script src="build/entry.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

tmpl/react-component.tmpl

@@ -6,8 +6,8 @@ var uniqId = ['component', number].join('')
 <div id='<?js= uniqId ?>'></div>
 
 <script>
-  ReactDOM.render(ReactWrapper({
+    ReactDOM.createRoot(document.getElementById('<?js= uniqId ?>')).render(ReactWrapper({
     example: <?js= JSON.stringify(example.code || null) ?>,
     uniqId: <?js= JSON.stringify(uniqId) ?>,
-  }), document.getElementById('<?js= uniqId ?>'));
+  }));
 </script>