WIP : use typescript compiler to have typescript in examples

[TomSmith27]

No description provided.

[elevatebart]

Oh wow thanks @TomSmith27,

This PR just made my day!

If we manage to combine this with using Monaco to get autocompletion and syntax checking, we could make a real revolution.

[elevatebart]

I think this file should be ignored

[TomSmith27]

Yep I will remove it

[elevatebart]

I found that you don't use typescript in getAst... I wonder if typescript itself could do the trick.

[TomSmith27]

Oh wow thanks @TomSmith27,

This PR just made my day!

If we manage to combine this with using Monaco to get autocompletion and syntax checking, we could make a real revolution.

Ye that is a good idea would be much easier to edit examples using Monaco. There is some more work that needs to be done as this change will only work for the single file component sytanx. We should probably support tsx as well?

[elevatebart]

I had a try integrating with https://github.com/react-monaco-editor/react-monaco-editor. It was pretty smooth sailing.

3 things were missing if we simply replaced prism with it:

• Syntax highlighting for weird syntax (that I kinda want to abandon and use put vue templates instead)
• Editor height adapting to the content as we type
• Context setup for Autocomplete (I would like to benefit from MS Intellisense, so that example become more obvious)

I don't think it's a big deal to get the 2 first working, maybe a day or two of work.
The third one I need to get down the language server tools... spikey!!!!

[elevatebart]

to replace getAst we can use createSourceFile

[TomSmith27]

I had a try integrating with https://github.com/react-monaco-editor/react-monaco-editor. It was pretty smooth sailing.

3 things were missing if we simply replaced prism with it:

• Syntax highlighting for weird syntax (that I kinda want to abandon and use put vue templates instead)
• Editor height adapting to the content as we type
• Context setup for Autocomplete (I would like to benefit from MS Intellisense, so that example become more obvious)

I don't think it's a big deal to get the 2 first working, maybe a day or two of work.
The third one I need to get down the language server tools... spikey!!!!

Ahh this all sounds great, if we can get typescript examples working and a new editor it will make the design system i work on so much better.

I noticed you had a go at using esbuild last night, how did that go?

How do you want to work on this is there anything I can help with or does it make sense for you to make these changes as you know the codebase much better?

[elevatebart]

I worked to make in browser compiler use typescript. It works.
If you can work on trying to set up Monaco, this would be lovely.

Way to go !!
👍

[elevatebart]

I get warnings with typescript when running it. This issue on typescript describes what I see

Critical dependency: the request of a dependency is an expression

TypeScript is doing some stuff not allowed by webpack.

The good news is it compiles typescript in the browser 🦜 🍾

[TomSmith27]

I get warnings with typescript when running it. This issue on typescript describes what I see

Critical dependency: the request of a dependency is an expression

TypeScript is doing some stuff not allowed by webpack.

The good news is it compiles typescript in the browser 🦜 🍾

Ye i did noticed that, as you say everything still works but i guess it needs fixing in that other repo.

So today I managed to get Monoco setup and working

I managed to get the height to update as you type which is good, The syntax highlighting is a bit of problem because there are quite a few types,

Javascript/Typescript
JSX
HTML and Html + js hybrid.

Also the highlighting doesn't work perfectly for Vue SFC's, I tried splitting them into html and script editors which gives you better typing support, but means two editors and you have to put them back together when recompiling.

I also didn't know which editors you wanted to keep and in which situations so the make-webpack.config file needs looking at.

I also had to revert a change to the evalInContext method because SFC's weren't working at all

[elevatebart]

Great Job @TomSmith27 we are making progress.

Very few people understand the Hybrid SFC mode.
Since it cannot be copy/pasted as a code sample and is not "real" Vuejs, I plan on abandoning it.
It was fun while it lasted.

The 3 supported formats would then be:

• Pure template (Use html or vue template highlights)
• TSX with auto imports (Native in Monaco)
• SFC (Use Vetur)

[TomSmith27]

This is all looking great!, can't wait to be able to write my examples in typescript this will really help out the rest of the development team.

So my current understanding is there are 3 editors

Prisim
Code Mirror
Monaco

Which of those do you intend to keep? and which is the default?

[TomSmith27]

Also I think the way you can get Vue intellisense is by running a langauge server? which is how Vetur works, but not sure if thats something you will want to do

[TomSmith27]

I also was trying some stuff out and i believe there may be a pre existing bug

[elevatebart]

The default is going to be Monaco, code mirror will be abandoned, and prism will be an option.

[elevatebart]

We could also use sucrase to do the compilation. We would still have to work out the kinks of the live typings.

[elevatebart]

Hey @TomSmith27,

TypeScript is now allowed in examples using the extra package vue-inbrowser-compiler-sucrase.

Checkout version 4.47.X of vue-styleguidist and more specifically the compilerPackage option.