it would be really nice to have an option to import code from plunker by link

As in subject pleas add Vue 2 support

Thanks for this great online editor.

1. delete file is immediately remove without show me any alert that I'm going to lose this file
2. is it possible to automatically add an import?
   for example in angular when I write @component({}) it will suggest to add the relevant import
3. since the angular project use angular cli can I create new component with the angular cli command?

When creating a file and it contains a space this doesn't get removed, spaces should be trimmed from the file name.

ionic-angular is 3.5.2, CSS used is 3.5.3.
Probably not that problematic, but could be cleaned up.

Amazing project!

Would be cool to have a general ES6/babel template like in https://codesandbox.io. This is especially useful for using JSX with other virtual dom libs like preact. I tried the /* @jsx h */ at the top of the module (with the react template) but it doesn't work. Actual workaround is to redefine React.createElement but I think supporting a more general ES6/babel env out of the box is a game changer.

Example - It happens when Chrome Extension is enabled.

Currently System.import('./Foo') returns an empty object.

Ideally that would also work with dynamic expressions like this: System.import(`./${page}`)

And super ideally, import() would be transpiled to System.import(), so users could still use their babel-based code even though it's running in a SystemJS environment :)

Unfortunately that means I won't be able to supply the React Universal Component demo. I mean I could do what I did in the Redux-First Router demo and make it using static imports and a hash, but in this case that would defeat the purpose. It's all good though. You've done tremendous work here and you got other fish to fry.

I'll leave this issue here for when it becomes priority.

PS. though, if at least the System.import() taking a static string worked, then it would make sense to supply the RUC demo. If it accepted dynamic expressions, well that's great--it shows Universal also working in a SystemJS environment (though without the server synchronous rendering aspects).

I want to use the nightly build of @angular/flex-layout.

Normally I can do one of these:

• npm -i github.com/angular/flex-layout-builds, or
• npm -i angular/flex-layout-builds

None of these seem to work in the StackBlizt IDE.

Our deployment repos is www.github.com/angular/flex-layout-builds

Moved the code over from a working prototype I was making to StackBlitz. The example is using ngrx/store and effects. After getting all the pieces over I was greeted with the message "Error occurred:
Can't resolve all parameters for _createStoreReducers: ([object Object], ?)."

Works fine in Webstorm.

Install deps antd failed

Expected behaviour:

Importing glamorous works

Actual behaviour:

Importing glamorous causes the preview to break with

Fatal error:
Cannot read property 'moduleObj' of undefined
Loading index.tsx
Loading app

And after refreshing the preview

Fatal error:
Cannot read property 'isRequired' of undefined
Evaluating https://unpkg.com/[email protected]/dist/glamorous.cjs.js
Evaluating index.tsx
Loading app

Reproduction:

https://stackblitz.com/edit/react-ts-u9qiu6

Hi, Stackblitz is awesome! I'm excited to start trying it out and look forward to seeing it progress.

I have a question regarding adding styles. I normally use Sass in my Angular projects, and often pull in Bootstrap and other libraries via an @import in my style.scss file (in the top level of the src dir). This way I can also import modular styles.

// style.scss
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";
@import url('~https://fonts.googleapis.com/icon?family=Roboto');
@import "./sass/_variables.scss";
@import "./sass/_buttons.scss";
@import "./sass/_forms.scss";

I define the global stylesheet in the angular-cli.json e.g.:

// angular-cli.json
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],

Since we don't have access to Angular CLI on Stackblitz, what is the best way to add in a library e.g. Bootstrap and apply the styles globally?

It would be great if the editor automatically detected the file or at least had a way to manually read a package.json file and install the dependencies that way.

It would be nice to support Typescript for react projects like you do for Angular and Ionic.

Related to #6. To repro, paste:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Begins throwing error about moduleObj, etc.

When I press export the source files are missing. The zip includes index.html, package.json and README.md. To reproduce go to the balldemo and press export.

It will be nice to use git side-by-side with stackblitz. Let me help you with that.

Kind regards
Jalal Hejazi
Instructor

It would be great, if a feature available to add image files such as (SVG, PNG, JPEG), currently it won't allow this type of files to add in the project directory.

I see one use case for Stackblitz: Collaborative editing

Imagine having a design sprint, making a mockup of a new application. Participants in the design sprint are a developer, a designer and a client who has data that needs to be in the application. This group has achieved the ideal workflow. The developer starts by going to Stackblitz and pressing the button to start a project, and then quickly fills in some code in the component that comes included in the new project, and the preview soon shows something that is starting to take the form of a real working application. The URL is shared so everyone can see the preview and interact with it at the same time.

The designer drops some pictures into the project, immediately available for the developer to use. The designer also starts editing the CSS file. Although the designer doesn't know much about CSS, with changes instantly previewed, the designer can see how everything turns out, and with collaborative editing, the designer and the developer can work together, editing the same code without waiting for the other person to finish their work and commit and push their changes. The designer feels empowered and even starts editing the JS code for the components. With no difficult technology like Git and an IDE to set up, the designer can easily see how the components are structured, and keep extending them, without knowing any programming, looking at the live preview to see how it turns out.

The client also starts editing the JS files, first starting with copy edits. Although the client would never learn anything about Git or programming, the client can edit texts in the JS files as easily as using Google Documents. The developer creates a JSON file for the data to show in the app, and imports it to use in the component. The client starts editing the JSON file, filling in real data. Although the client doesn't know anything about data structures, the linter instantly tells when data is entered in an invalid format, and the preview instantly shows what the app looks and feels like with the updated data, allowing a non-technical person to do something they could never do before.

The mock application is tested on users. The user's don't notice it's a mock. It works exactly like a real application, even though it was made as fast as making a paper prototype with other prototyping software. Instead of having to ask the users to pretend it's a real application, they can observe how users interact with a real application. Users can take any path they want though the application, not restricted to which slides are included in a paper prototype.

When the design sprint is over, the project is exported, and all of the code is used in the real application. No time is lost recreating things that have already been created in the prototype.

Unfortunately, there's just one thing that makes this scenario impossible: Stackblitz doesn't support collaborative editing. Everything else is already possible.

A project on Stackblitz can only be edited from one computer. When it's opened from another computer, it cannot be saved. It can only be forked. Forking splits the team, making it impossible for more than one person to collaborate on the project. It is technically possible to edit the same project on two computers by signing in with the same Github account an both computer, but you can't changes saved from the other computer without reloading everything, and saving from one computer overwrites the edits saved from the other computer.

The design sprint team is now forced to use traditional prototyping methods. The designer has to draw every screen of the application, manually filling in data on each screen. The designer has to duplicate all screens that can be displayed with different sets of data, manually editing each copy with different data. When the data is changed, the designer has to manually redraw all screens to fill in the new data. Since it would be impossible to draw screens for all possible paths that can be taken through the application, only a few chosen paths can be selected. When testing on users, if the user chooses another option than the one selected to be drawn, the interviewer has to tell the user that because this is not a real application, only one option is possible. The team doesn't learn much about how the user would interact with the real application. When the design sprint is over, the prototype will be thrown away, and all code must be written from scratch.

When starting to create a new file or folder and you have typed the name if you then click anywhere on the page and lose focus, the file or folder never gets created. Visual Studio Code works this way.

Hi ! Thanks for making this awesome editor in the browser. Because of this I can finally code in my iPad Pro :)

There’s one issue that i’m experiencing. I’m using the iPad Pro keyboard and the arrow keys don’t seem to work on the editor. Please look into this :)

An editor settings would be nice, and have an option to set vim-mode. I know most code playgrounds such as jsbin, codepen, etc. have this option. Thanks!

I have tried to add angularfire2 but I get an error. The error is as following

_

unexpected value 'object object' imported by module "appmodule". please add a @NgModule annotation. evaluating

_

I really like this editor and think it has a lot of potential to aid remote pairing.

The current screen sharing solutions are too heavy and slow (ScreenHero, Teamviewer), things like Tmate/Tmux isn't very user friendly. This is a very frustrating problem that this app can solve.

It would be great if this online IDE had similar live collaboration as Google Docs, Sheets etc.

There would be no need for screen sharing at all if we could pair together and see each others cursors making live changes to the code, as well as seeing those changes live reloading.

I appreciate this is a big feature, one that I'd be happy to help with and also pay for.

Thought it'd be worth creating this issue just to see if there's more demand for this feature than just myself. If you need this, not just interested, give this a 👍

Thanks for a great online IDE :)!

Repo here: https://stackblitz.com/edit/angular-template-routing-edc7h3

You can see by checking the console it throws when trying to use the router

Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

also by inspecting the DOM you can see this tag is indeed not present.
Usually the CLI generates a project with the <base href="/"> in the head on the index.html, inserting this tag will solve this issue when trying to use routing

Support for some of the common IDE color schemes would definitely be nice. I'd be surprised if it's not on the roadmap, and I'm sure not super high priority. Love what you guys have done here, can't wait to get my hands dirty with it!

Would be nice if there was a full log of the build available. I'm seeing an error but it's not helping me without additional context.

Specially the project I'm working at is https://stackblitz.com/edit/react-epqmud but opening that link just shows the default files, and not the files that I imported myself. Maybe there's an additional bug there?

On Safari 10.1.1 I'm seeing some odd behavior wrt tooltips -- they appear blank. If I click on them, though, the content displays. Does not happen on Chrome 59.0.3071.115 on the same system.

One of the biggest advantages of Angular development is the scaffolding using the Angular CLI. If StackBlitz support it, StackBlitz will have very high productivity for Angular.

Yarn site has a fast search box auto complete, IIRC they use Algolia, I believe you can use their service.

HTML5 routing currently is breaking bc of this

Expected behaviour:

Glamorous component factory style arguments autocomplete the same as they do in vscode.

Actual behaviour:

Glamorous component factory style arguments do not autocomplete the same as they do in vscode.

Reproduction:

The screenshot for the stackblitz behaviour was captured from the following project.

https://stackblitz.com/edit/react-ts-u9qiu6?file=components%2FApp%2FApp.glamorous.tsx

This was the precise issue we discussed. If you have a double slash comment on the very last line of a file, it won't compile :)

that was all the issue was.

Right now the only app type is the tab. Ionic supports sidemenu out of the box. Can this be added to stackblitz?

I am experiencing problems with setInterval(). This is because componentWillUnmount() is not getting called when the view is refreshed on key presses. I am making a network request every minute on setInterval. But a new request is being created every minute for every key stroke in the editor.

I had the same problem in ReactPlaygroundStyled and got round it by unmounting the root before re-eval:

ReactDOM.unmountComponentAtNode(this.mountNode)

https://github.com/ncredinburgh/react-playground-buble/blob/master/packages/react-playground-bare/src/components/react-playground-bare.js

This is great project really, able to try quick things or even import projects and work on them is great. But I think it is essential to have a way to use CLI for Ionic and Angular project types which has a big part in development cycle and boosts productivity.

so you can create new blitzes without having to go back to the homepage.

Hey team, good work on this one! 🔥 By any chance, are you open-sourcing the codebase?

@apai4 is looking into this now, originally reported here with this project

Hi!
Absolutely love the app. Totally awesome.
One thing would be really cool - Sass (.scss file) support.
I'm a maintainer on an angular -> materlialize component and it would be handy to create some demo projects here, but we'd need .scss support and the ability to tweak the CLI settings a little to use the scss extension and load a couple of scripts.
Hope you can help!
Cheers,
Luke

Please add aurelia support.

Hi @EricSimons @apai4!

This project looks amazing. I tried to create a simple starter for Hyperapp, but it keeps telling me that React is not defined.

I tried using the JSX pragma like this: /** @jsx h */, but it made no difference.

See: https://hyperapp.stackblitz.io

Any plans to bring VSCode extensions to stackblitz?

Having vim keyboard bindings would be great, as well as other extensions like vscode-styled-components for syntax highlighting of styled-components strings, prettier formatting, etc.

Currently codesandbox.io has Vim and Prettier support, but it seems like having VSCode extension support would open up a lot of functionality, but I'm sure some extensions could not be supported.

I often use Ctrl+P to move the cursor to the line above the current line. In StackBlitz this opens up the command bar.

I am wondering if there is any way to use @types/jquery and declare it in tsconfig types section