Typescript plugin claims there's unexpected tokens in sane TS

[turt2live]

It says there's an unexpected token here:
https://github.com/turt2live/matrix-js-bot-sdk/blob/41eda8a224e2b63ad55659c805df28a9fc8521f5/src/appservice/Appservice.ts#L584

Parsing F:\Workspaces\matrix-misc\matrix-js-bot-sdk\src\appservice\Appservice.ts ...
ERROR: Unable to parse F:\Workspaces\matrix-misc\matrix-js-bot-sdk\src\appservice\Appservice.ts: Unexpected token (584:0)

The other is here:
https://github.com/turt2live/matrix-js-bot-sdk/blob/41eda8a224e2b63ad55659c805df28a9fc8521f5/src/appservice/MatrixBridge.ts#L53

Parsing F:\Workspaces\matrix-misc\matrix-js-bot-sdk\src\appservice\MatrixBridge.ts ...
ERROR: Unable to parse F:\Workspaces\matrix-misc\matrix-js-bot-sdk\src\appservice\MatrixBridge.ts: Unexpected token (53:24)

Finally, it explodes with the following when it hits its first interface (https://github.com/turt2live/matrix-js-bot-sdk/blob/41eda8a224e2b63ad55659c805df28a9fc8521f5/src/logging/ILogger.ts):

F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript\type-converter.js:84
  if (type.types && type.types.length) {
           ^

TypeError: Cannot read property 'types' of undefined
    at convertMembers (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript\type-converter.js:84:12)
    at statement.members.forEach.member (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript\type-converter.js:164:27)
    at Array.forEach (<anonymous>)
    at ast.statements.map.statement (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript\type-converter.js:154:27)
    at Array.map (<anonymous>)
    at typeConverter (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript\type-converter.js:134:25)
    at Parser.beforeParse (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\better-docs\typescript.js:27:21)
    at Parser.emit (events.js:189:13)
    at Parser._parseSourceCode (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\lib\jsdoc\src\parser.js:288:18)
    at Parser.parse (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\lib\jsdoc\src\parser.js:202:22)
    at Object.module.exports.cli.parseFiles (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\cli.js:365:46)
    at module.exports.cli.main (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\cli.js:234:18)
    at Object.module.exports.cli.runCommand.cb [as runCommand] (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\cli.js:186:9)
    at F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\jsdoc.js:93:9
    at Object.<anonymous> (F:\Workspaces\matrix-misc\matrix-js-bot-sdk\node_modules\jsdoc\jsdoc.js:94:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)

Tested on both Windows and Ubuntu with the same results. It's quite possible that I've done some human error thing - if that's the case, please point me in the right direction :D

---

jsdoc.json:

{
  "tags": {
    "allowUnknownTags": true
  },
  "plugins": [
    "node_modules/better-docs/category",
    "node_modules/better-docs/typescript"
  ],
  "source": {
    "include": [
      "src"
    ],
    "includePattern": ".ts$"
  },
  "opts": {
    "encoding": "utf8",
    "destination": ".jsdoc",
    "readme": "README.md",
    "recurse": true,
    "verbose": true,
    "template": "node_modules/better-docs"
  }
}

Using command: jsdoc -c jsdoc.json -P package.json

[wojtek-krysiak]

no - its probably better-docs error - I will check it out and let you know (probably today)

[wojtek-krysiak]

Ok - there were 3 problems in the examples you mentioned:

1. arrays defined like this {sth: 'sth'}[] (fixed in version 1.4.4)
2. for some reason ts treated this as a React code (fixed in version 1.4.5)
3. function definition in the interface defined like this: functionName(params) instead of functionnNme: () => any - (fixed in 1.4.6)

PS: here: https://github.com/turt2live/matrix-js-bot-sdk/blob/41eda8a224e2b63ad55659c805df28a9fc8521f5/src/logging/ILogger.ts#L9 you use {*[]} as a type - it is not supported by jsdoc. You can change it to {any[]}

So please download version 1.4.6 and check it out. In case of any more problems - let me know and I will try to fix them.

[turt2live]

Works great! Thanks for the quick fix.

The asterisks are indeed not supposed to be there - my IDE unhelpfully thinks that any is wrong and uses asterisks instead. I'll get these fixed.

[DylanLyon]

Ok - there were 3 problems in the examples you mentioned:

1. arrays defined like this {sth: 'sth'}[] (fixed in version 1.4.4)
2. for some reason ts treated this as a React code (fixed in version 1.4.5)
3. function definition in the interface defined like this: functionName(params) instead of functionnNme: () => any - (fixed in 1.4.6)

PS: here: https://github.com/turt2live/matrix-js-bot-sdk/blob/41eda8a224e2b63ad55659c805df28a9fc8521f5/src/logging/ILogger.ts#L9 you use {*[]} as a type - it is not supported by jsdoc. You can change it to {any[]}

So please download version 1.4.6 and check it out. In case of any more problems - let me know and I will try to fix them.

@wojtek-krysiak I think this may have caused issues with @component now but it's highly possible I'm making my own errors since I've modified things quite a bit to get it working with my project. No matter what component I add @component to it doesn't seem to want to parse it when building entry.js

  20 |     return (
> 21 |         <div>
     |        ^
  22 |             <div style={{ paddingLeft: 0, paddingRight: 0 }}>
  23 |                 <Select
  24 |                     options={zones}

/workspace/node_modules/better-docs/bundler.js:83
    throw error
    ^

Error: Command failed: parcel build documentation/entry.js --out-dir documentation/build
    at checkExecSyncError (child_process.js:601:13)
    at execSync (child_process.js:641:13)
    at bundle (/workspace/node_modules/better-docs/bundler.js:78:5)
    at Object.exports.publish (/workspace/node_modules/better-docs/publish.js:655:5)
    at Object.module.exports.cli.generateDocs (/usr/local/lib/node_modules/jsdoc/cli.js:448:35)
    at Object.module.exports.cli.processParseResults (/usr/local/lib/node_modules/jsdoc/cli.js:399:20)
    at module.exports.cli.main (/usr/local/lib/node_modules/jsdoc/cli.js:240:14)
    at Object.module.exports.cli.runCommand (/usr/local/lib/node_modules/jsdoc/cli.js:189:5)
    at /usr/local/lib/node_modules/jsdoc/jsdoc.js:105:9
    at Object.<anonymous> (/usr/local/lib/node_modules/jsdoc/jsdoc.js:106:3)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)

I should add though that I've slightly modified component.js so that I could include a react-docgen resolver. Without this resolver react-docgen doesn't seem to want to work when a file has multiple exported components. I've added;

var allComponents = require('react-docgen/dist/resolver/findAllExportedComponentDefinitions')
and I call the parse method like so;
docGen = reactDocs.parse(src, allComponents.default)

But now I get the error above.

Here is my conf file.

{
    "plugins": [
        "node_modules/better-docs/category",
        "node_modules/better-docs/component"
    ],
    "recurseDepth": 10,
    "source": {
        "includePattern": ".+\\.js(doc|x)?$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "sourceType": "module",
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc","closure"]
    },
    "templates": {
        "better-docs": {
            "name": "AdminBro Documentation",
            "logo": "images/logo.png"
        }
    }
}

I also get this error from a babel plugin my project uses but it doesn't seem to be a show stopper and probably unrelated?

npm ERR! code E404
npm ERR! 404 Not Found: babel-plugin-babel-root-slash-import@latest

My CLI argument.

jsdoc -c documentation/conf.json -t ./node_modules/better-docs -r ./imports/ui/components/ -d ./documentation/

Running version 1.4.7 of better-docs

[wojtek-krysiak]

can you paste the component code. i will try to jsdoc it localy

[DylanLyon]

Sure thing. If I leave the jsdoc block as is below it doesn't seem to get picked up unless I add @method (or @component I would assume as well). Oddly it only generates for components with a jsdoc block and with @method which I thought react-docgen was supposed to generate regardless of jsdocs unless I'm misremembering and react-docgen doesn't do functional components? I think I'm confusing myself haha.

import React from 'react';
import T from 'prop-types';
import moment from 'moment-timezone';
import Select from 'react-select';
import sortBy from 'lodash/sortBy';
import isString from 'lodash/isString';

const zones = sortBy(moment.tz.names().map(name => ({
    label: `(GMT ${moment().tz(name).format('Z')}) ${name.replace(/_/g, ' ')}`,
    value: name,
})), val => moment.tz(val.value)._offset);

/**
 * @name TimeZonePicker
 * @param {Function} onChange
 * @param {String} className
 * @param {String} value
 * @param {String} timezone
 */
const TimeZonePicker = ({ onChange, className, value, timezone }) => {
    if (!isString(value))
        value = isString(timezone) ? timezone : '';

    return (
        <div>
            <div style={{ paddingLeft: 0, paddingRight: 0 }}>
                <Select
                    options={zones}
                    className={className}
                    placeholder="Time Zone"
                    value={value}
                    onChange={(val) => {
                        val = val && val.value;
                        onChange(isString(val) && val);
                    }}
                    clearable={false}
                />
            </div>
        </div>
    );
};

TimeZonePicker.propTypes = {
    timezone: T.string,
    value: T.string,
    onChange: T.func.isRequired,
    className: T.string,
};

TimeZonePicker.defaultProps = {
    timezone: null,
    value: null,
    className: '',
};

export default TimeZonePicker;

I'm sure it's something to do with my project setup or something but any help you can give I'm greatly appreciative of!

[wojtek-krysiak]

hmmm - can you run parcel build documentation/entry.js --out-dir documentation/build (it just builds the entry file) - maybe it will show some more information.

[DylanLyon]

No such luck.

npm ERR! code E404
npm ERR! 404 Not Found: babel-plugin-babel-root-slash-import@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     user/.npm/_logs/2019-11-18T19_47_03_659Z-debug.log
npm ERR! code E404
npm ERR! 404 Not Found: babel-plugin-babel-root-slash-import@latest

npm ERR! A complete log of this run can be found in:
npm ERR!    user/.npm/_logs/2019-11-18T19_47_07_528Z-debug.log
🚨  workspace/imports/ui/components/navbarNotificationList.jsx:26:8: Unexpected token (26:8
  24 |     const hoverClass = hover ? 'li-hover' : '';
  25 |     return (
> 26 |         <li
     |        ^
  27 |             className={`${notification.status} ${notification.status === 'unread' ? 'unreadNotification' : ''} unselectable notification ${hoverClass}`}
  28 |             style={{ paddingRight: '5px', paddingLeft: '5px' }}
  29 |             onMouseEnter={() => {

I also removed that babel plugin from my .babelrc and the error is gone but the core problem remains.

The strange part however is that that component jsdoc block doesn't have @component in it which leads me to believe I haven't configured parcel correctly perhaps? It's only one of two components in that directory that have a jsdoc block.

If I use jsdoc -c documentation/conf.json -t ./node_modules/better-docs -r -d ./documentation/
Then it works and picks up the jsdoc block and builds fine. But calling parcel build documentation/entry.js --out-dir documentation/build causes it to fail even without @component. In fact, I deleted that jsdoc block completely and it still errors out on that component inexplicably...

[DylanLyon]

I think maybe I'm just not understanding the entry.js and how that works in regards to parcel. I thought that was automatically generated when running the jsdoc -c documentation/conf.json -t ./node_modules/better-docs -r -d ./documentation/ command while using the @component plugin? Should I have had one defined already before calling the command?

[wojtek-krysiak]

no - it is like you sad - automatically generated here (https://github.com/SoftwareBrothers/better-docs/blob/master/bundler.js)

[wojtek-krysiak]

It seems like a parcel issue. Maybe you don't have React in devDependencies in package.json file?.

[DylanLyon]

Doesn't seem to be the cause. I think you're right that it's a parcel issue. I'll keep plugging away at it today and see what I turn up. I really appreciate the help, thank you!

Sidenote, have you considered adding the ability to collapse the side nav ul for grouped categories under the category h2? We have a lot of different areas with a lot of different methods and such and the scrolling was getting a bit confusing. I made the change on my local (as well as made the nav col position fixed so it would scroll with you) and I must say it's very nice!

Sidenote sidenote, your category tag is amazingly flexible and powerful and I love it!