Features for the new IDE

[antfu]

WIP...

You can preview the changes on: (wait for Netlify building....)

Let me know what you think about it!

TODO

• explorer view
• move examples to explorer
• persist example selection in url query
• user codes
• localStorage (save on changes)
• when modifying the example, create a copy and save to the user codes
• create / delete button
• download button
• way to change filename/alias
• limit panel size
• hint short cuts

The publish button will not include in this PR

[antfu]

@LingDong- The Netlify deploy for pull requests seem not triggering. May this due to the repo transferring?

[LingDong-]

Yes, it's strange that Netlify no longer deploys previews, yesterday it seems to be working fine

---

The explorer looks great! Can we make the explorer window taller and output window less wide, meaning:

+-----------------+
|    |      |     |
|    |      |     |
|    |      |     |
|    +------+-----+
|____|____________|

Thanks!

And now that we have the explorer window, maybe we can even support creating and opening folders (zip upload), but that's more complex and for the future.

This is looking so nice, that I'm thinking after we're done with the improvements, I can wrap it in an electron app, so we have our own native IDE :D

[antfu]

Maybe you should check out the setting?

[LingDong-]

I think the setting is correct... it's just not deploying.
Not a big problem, I can just copy paste your code and try it out :)

[antfu]

It's almost done. Please check it out when you got some time!

And maybe we need some tips on the pape for the auto-saving mechanism.

[LingDong-]

👍👍Looking awesome! Love the explorer

I see you changed Dark Mode button to float:right, when window is small, this causes the button to wrap to the second line and get hidden behind the CodeMirror div - That's why I made the absolute position hack, wonder if there is a more elegant solution :P

[antfu]

I see you changed Dark Mode button to float:right, when window is small, this causes the button to wrap to the second line and get hidden behind the CodeMirror div - That's why I made the absolute position hack

Noticed too. However, I think the fixed hack is not ideal for buttons like "new" and "delete".

wonder if there is a more elegant solution

We can use grids. I will fix them another time. I need to get some sleep for the flight tmr ;)

[antfu]

Despite the right floating part, I have finished most of the features for this PR.

• Able to rename files
• Download button
• Resize handler restrictions
• "insert" function now presents as code auto complete

Some idea for the future improvements

• Better integrate with snippets site (publish / edit in ide / etc)
• Auto context (import form other user scripts)
• wyg support
• better auto complete (maybe auto replacements)
• theme support?
• better error log
• shortcuts
• use icons for buttons

Let me know what you think about it!

[LingDong-]

@antfu Thanks! I think I myself couldn't have done any better! All your improvement ideas sound good too.

For the auto-complete part, the letters prefix were originally intended to hack <select> for quick entry, but since we have custom widget we can support that better. Also, I'm thinking maybe the ctrl in ctrl-. is redundant, maybe we can map it to single keypress like ; or / or , etc. because these are not valid characters in wenyan. I can look into it.

Also, I just made a draft for the first chapter of the book. Sent an invite to you to the project :)

[antfu]

Better integrate with snippets site (publish / edit in ide / etc)

I would like to do some improvements to the snippet site (and maybe try some online DB and move it out from glitch). The current snippets site seems to have some features broken.

I have sent a request to collaborate on the glitch project. Please have a check. Thanks

[LingDong-]

@antfu thanks, that would be awesome!
I couldn't find your request, but just sent an email to your hotmail with the collaboration link in it

[antfu]

Got it. Thanks. Will keep you up to date of the progress :)

[antfu]

I have fixed some bugs and update the compiler for snippet site. On the other side, I am looking for some serverless db alternative that accessible in mainland China. https://www.bmob.cn/ or https://www.leancloud.cn/ might be some options (haven't tested yet)

---

Also, I am wondering if we should embed the snippet site into the IDE since they share some similar features.

Some ideas

• Out-sourcing IDE into another repo
  • We can utilize Netlify to become a CDN that serves the latest build without waiting for npm release
  • We can use https://ide.wy-lang.org/ subdomain and make the IDE as an SPA. This way we can use the URL paths to serve better with files & snippets. Something like https://ide.wy-lang.org/s/antfu/helloworld/edit
  • Maybe account system with Sign in with Github and take your snippets & code in IDE with you
• Snippets
  • Enable comments for snippets
  • Description/Preview for snippets (showcases like https://codepen.io/)
  • Tags for snippets math painting fun etc
• IDE
  • Publish your code to snippets
  • Snippets list as a dialog/tab

[LingDong-]

Out-sourcing IDE into another repo

Yeah. Sounds good. I like the idea with subdomain ide.wy-lang.org. But I think maybe let's first keep the snippet site and the IDE separate, but offer a very easy way to jump from one to the other. Like a button in IDE that says "submit to snippets", and on snippet a button that says "edit in IDE". My concern is that each has its complexity, and it might be better not to mingle them together and introduce more ways to break them. And perhaps people sometimes just want to do one of the two things, and don't care about the other part. What do you think?

Sign in with Github

That would be pretty cool! No idea how to do it though.

comments, Description/Preview, Tags, showcases

All sounds great. For showcases, we might be able to put it off until there are more snippets. By then we'll have a better idea of what people are submitting and better curate them.

https://www.bmob.cn/ or https://www.leancloud.cn/

Judging from the look of their website, the second one looks slightly better. Bmob has a blurry logo right on top of their homepage... Eww!

• I realized that we were using google font apis to do the ui icons. This is probably going to look hideous in China. I saw you added iconify.js. Are we thinking the same thing? :)

[antfu]

But I think maybe let's first keep the snippet site and the IDE separate

Yeah. I thought this at the beginning. But there is editing functionality in snippets site and as we keep improving the IDE (contextual autocomplete, error underlines etc) it's hard to keep the builtin editor of snippets site up to date. Another way is that maybe we can the IDE embeddable that can be utilized in the snippet site and even other 3rd party websites. I think https://codepen.io/ is pretty similar to what we what to achieve in snippet site and it has an editor built-in might be a good reference.

For showcases, we might be able to put it off until there are more snippets.

I was thinking that we could save the result text/image on snippet publishing. This can make people better understand what's going on for the snippet without losing the performance. We should also add a paginate system for that as well.

https://www.bmob.cn/ or https://www.leancloud.cn/

I prefer the second one as well :) Will try them later

realized that we were using google font apis to do the ui icons. This is probably going to look hideous in China. I saw you added iconify.js.

Material Icons seems blocked in China. _{raw.githubusercontent.com is also blocked recently, I am curious how developers in China work 😂}

iconify provides a great service that only loads the icons u used. and has a large collection of icons to use. And yes, it seems to work in China.

[LingDong-]

I think making the IDE embeddable sounds like a great idea, and like you mentioned also useful for 3rd party. I wasn't previously aware of iconify, but after I saw you using it in the IDE, I thought it's awesome :)

[antfu]

Btw I think we can apply for Netlify Open Source Plan which can create a team with unlimited members. If you are ok with it, I can add the badge on the site and fill the form :)

[antfu]

I have done the out-souring, and they works perfectly. I will try to see how could they work together then.

Sent you the invitation to the repos.

https:/antfu/wenyan-ide
https:/antfu/wenyan-snippets

https://wenyan-ide.netlify.com/
https://wenyan-snippets.netlify.com/ (using the same backend as Glitch, will try to migrate to the services mentioned above)

[antfu]

Btw I think we can apply for Netlify Open Source Plan which can create a team with unlimited members. If you are ok with it, I can add the badge on the site and fill the form.

What do you think? :)

---

I have made some progress to the embedding IDE,
you can check https:/antfu/wenyan-ide for documentation
and https://wenyan-snippets.netlify.com/editor for demo.

I think it's kinda ready to transfer to the org and setup ide.wy-lang.org 😃

---

As for the snippet site, I have tried both services a little and seem bmob is much more mature (than how it looks XD). I think I would probably go with that one first. _{And I do miss Firebase anyway.}

[LingDong-]

What do you think?

I think it's a great idea. I think it's basically the same as the donation system, where netlify donate a premium plan to us, and we put their ads on our site. I prefer the "Light Badge" one. The colored ones don't fit with our theme :)

The embed thing looks nice! I know the style is still in progress, but I feel the title bars are too thick, since embed is supposed to be small thing on the page. In fact, I think we might even get rid of the bars. Just show a small triangle on top right corner for running.

bmob is much more mature (than how it looks XD). I think I would probably go with that one first

Sure!

[antfu]

The embed thing looks nice! I know the style is still in progress, but I feel the title bars are too thick, since embed is supposed to be small thing on the page. In fact, I think we might even get rid of the bars. Just show a small triangle on top right corner for running.

I think we can probably add with another option show-bars and default to false. and even hide-output 😄

[antfu]

I have updated the editor and demo. You can have a look when you go some free time :)

[LingDong-]

👍Very Nice, thanks a lot! I think functionality-wise it's perfect, but

Some small issues, likely related to browser, since it breaks differently on my chrome and safari :P

• On Chrome, when bars are hidden, the resize handles/borders are funny. The horizontal handle (the one above output window) can only be dragged upwards and not downwards. Dragging the vertical handle causes the horizontal handle to be dragged too.

• On chrome, even when bars are shown, the horizontal handle cannot be dragged too fast, otherwise it will stop following the mouse. Strangely enough, the vertical handle does not have this issue. Of course this is not important, only very slightly annoying.

• On safari, the handles works (surprisingly) well. However, the output window does not respect dark mode.

Chrome Version 79.0.3945.88 (Official Build) (64-bit)
Safari Version 12.0 (14606.1.36.1.9)
macOS Version 10.14 (18A391)

I totally understand you might not be able to reproduce these problems on your system/browser. In which case I can look into them when you're finished with the features :)

[antfu]

On chrome, even when bars are shown, the horizontal handle cannot be dragged too fast, otherwise it will stop following the mouse. Strangely enough, the vertical handle does not have this issue

Noticed too. I think I might be some performance limitation or something for iframe on Chrome. I will try to rewrite the mechanism for dragging the handlers to see if it solves the issue.

On safari. However, the output window does not respect dark mode.

The dark mode issue probably due to the safari hack. The outdiv should set background: white in order to make the invert filter work (it's transparent now I believe). It's just a line of css to fix.

According to your description, the buttons in the demo seem to work in safari (surprisingly). It actually uses postMessages (which are the same as the output iframe). So iframe for output might be workable for safari. I am planning to get a macbook next month. Hope I can dive into it then.

[antfu]

The iframe bug in safari is fixed in wenyan-lang/ide@f58b83e

The problem is running outIframe.contentWindow.location.reload() before outIframe actually load once making the src attr of iframe becomes empty(wtf?). I add a flag to ignore the first reload the problem gets solved :)

---

I have changed the layout mechanism to css vars. The handler lag should be fixed too. Please check it out.

[LingDong-]

Awesome, thanks a lot! Both iframe and handlebar work perfectly now. Nice problem solving with the iframe, I also saw src become empty, but couldn't figure out how come.

BTW Congrats on getting your new macbook :)

[antfu]

I also saw src become empty, but couldn't figure out how come.

Will have a look tmr

[LingDong-]

@antfu, What I meant was that previously, when it WASN'T working on Safari, src was empty, and I couldn't figure out how to fix it. That was two weeks ago. Today, now that you figured out the reason and totally fixed it, everything is working great :)
Sorry for the confusion, no action required.

[antfu]

Haha my bad. 😅