Documentation and tutorials for TypeScript

[DanielFlaum]

I'm trying to get started with Golden Layout while using TypeScript, but the tutorials and documentation don't talk about it at all. My best attempt at just getting started by following https://golden-layout.com/tutorials/getting-started.html...

import * as $ from 'jquery';

import { GoldenLayout } from 'golden-layout';

var config = {
    content: [{
        type: 'row',
        content:[{
            type: 'component',
            componentName: 'testComponent',
            componentState: { label: 'A' }
        },{
            type: 'column',
            content:[{
                type: 'component',
                componentName: 'testComponent',
                componentState: { label: 'B' }
            },{
                type: 'component',
                componentName: 'testComponent',
                componentState: { label: 'C' }
            }]
        }]
    }]
};

var myLayout = new GoldenLayout( config );

...gives me this error:

var myLayout = new GoldenLayout( config );
//                               ^^^^^^
// No overload matches this call.
//   Overload 1 of 2, '(container?: HTMLElement | undefined, bindComponentEventHandler?: BindComponentEventHandler | undefined, unbindComponentEventHandler?: UnbindComponentEventHandler | undefined): GoldenLayout', gave the following error.
//     Argument of type '{ content: { type: string; content: ({ type: string; componentName: string; componentState: { label: string; }; content?: undefined; } | { type: string; content: { type: string; componentName: string; componentState: { ...; }; }[]; componentName?: undefined; componentState?: undefined; })[]; }[]; }' is not assignable to parameter of type 'HTMLElement'.
//       Type '{ content: { type: string; content: ({ type: string; componentName: string; componentState: { label: string; }; content?: undefined; } | { type: string; content: { type: string; componentName: string; componentState: { ...; }; }[]; componentName?: undefined; componentState?: undefined; })[]; }[]; }' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more.
//   Overload 2 of 2, '(config: LayoutConfig, container?: HTMLElement | undefined): GoldenLayout', gave the following error.
//     Argument of type '{ content: { type: string; content: ({ type: string; componentName: string; componentState: { label: string; }; content?: undefined; } | { type: string; content: { type: string; componentName: string; componentState: { ...; }; }[]; componentName?: undefined; componentState?: undefined; })[]; }[]; }' is not assignable to parameter of type 'LayoutConfig'.
//       Property 'root' is missing in type '{ content: { type: string; content: ({ type: string; componentName: string; componentState: { label: string; }; content?: undefined; } | { type: string; content: { type: string; componentName: string; componentState: { ...; }; }[]; componentName?: undefined; componentState?: undefined; })[]; }[]; }' but required in type 'LayoutConfig'.ts(2769)

After a few hours, if I persevere, I might figure it out. I foresee a great deal of repetitive copying and pasting of huge, non syntax-highlighted error messages into text editors and manually formatting them to try and find out what they actually mean.

A Google search (https://www.google.com/search?q=golden+layout+typescript+tutorial) turns up no tutorials.

Are there plans to write help for using Golden Layout with TypeScript? If not, can there be? Thanks very much!

[pbklink]

Have a look at https://github.com/golden-layout/golden-layout#learn.

Does the CodePen help? What other CodePen's would help?

Yes - better documentation and examples are needed. Unfortunately there are no solid plans in place for this. We certainly would appreciate any help with this.

[aak72dev]

@DanielFlaum, my research have next result: if used 2+ version:

1. config must have structure (root):

let config = {
        root: {
          type: "row",
          content: [{
              type: 'component',
              componentType: 'testComponent',
              componentState: { label: 'A' }
          },{
              type: 'column',
              content:[{
                  type: 'component',
                  componentType: 'testComponent',
                  componentState: { label: 'B' }
              },{
                  type: 'component',
                  componentType: 'testComponent',
                  componentState: { label: 'C' }
              }]
          }]
        }
    };

2. constructor GoldenLayout(config: LayoutConfig, container?: HTMLElement | undefined) is @deprecated need use construcor GoldenLayout(container?: HTMLElement | undefined) and goldenLayout.loadLayout(config)

[DanielFlaum]

@pbklink I can help put together loose specifications for good documentation, though I'm not skilled enough with TypeScript and Golden Layout to write the actual docs myself. Basically, I could prepare a document that suggests what information should be documented and how it should be organized. And I could help iterate on it to better fit the project's needs and community's resources. Does this sound like something you might be interested in?

@aakotelnikov72 Thanks! That did end up working because I didn't realize I was reading outdated docs.

[martin31821]

@DanielFlaum Documentation updates and proposals are very welcome. Unfortunately at the time of writing neither @pbklink nor I have access to update the website, that is why there is no updated version of that yet.

@pbklink what do you think of putting a section into the README to make clear that the website is outdated and we can't updated it and direct people to github?

[pbklink]

I think we need to create a new website.

Probably the easiest way to do this is to use GitHub pages. Create a website folder in golden-layout repository and publish this as a GitHub pages website. We can then move content from the existing website and the readme into this site.

While it won't be as pretty as the existing one, it probably has the lowest impedance for getting documentation out. Anyone can submit a PR with (markdown) documentation changes/improvements and then it will be published when @martin31821 accepts the PR.

The readme can then be made minimalist and refer to the website as @martin31821 mentioned above.

Once the content has been transferred from the existing website to the new one, we can ask @WolframHempel to point golden-layout.com to the new website at GitHub pages.

Note that documentation was also discussed at #690.

[andreeamanarca]

@DanielFlaum I have the same issue. How did you solve the problem? Thanks.

[DanielFlaum]

Hey @andreeamanarca, I'm afraid I've forgotten, and my project ended up switching to https://github.com/caplin/FlexLayout instead for another reason.

I'm a bit confused myself though, because I @'d aakotelnikov72 back in August, but it was @pbklink and @kaa72 who offered me solutions. I do see that I thumbed up @kaa72's comment though, so my best guess is that one of their suggestions worked (see https://github.com/golden-layout/golden-layout/issues/698#issuecomment-890769451).