sveltejs / sapper-studio Goto Github PK

An electron app for building Sapper projects

License: Other

CSS 8.68% HTML 60.83% JavaScript 17.13% TypeScript 13.36%

sapper-studio's Introduction

Sapper Studio

This is highly experimental, highly incomplete, and completely undocumented. Expect bugs! For now, a traditional development setup will be more productive. That will change.

Rethinking web development

It's a little weird that the process of creating websites — which are inherently visual and interactive — is so heavily centered on the command-line and on blindly manipulating symbols. Previous attempts to improve programming workflows have focused on novel languages and editing paradigms, but they have not become mainstream.

The hypothesis behind Sapper Studio is twofold:

we already have all the pieces to create a more modern development workflow, but we haven't quite put them together
a developer environment that is deeply integrated with a particular framework allows novel features that aren't possible in the context of a general-purpose IDE

Running

Sapper Studio is an Electron app. For now, you'll need to clone this repo and run it locally; there is no pre-packaged version.

git clone https://github.com/sveltejs/sapper-studio.git
cd sapper-studio
yarn
yarn build
yarn start

This will open the launcher window, where you can select an existing Sapper project on your machine, or create a new one.

Using

Sapper Studio uses svelte-subdivide for layout. While pressing the Cmd key, drag from the edge of a 'pane' to create a new one. (TODO demo this with gifs, and improve the interface itself.) Select a new pane type from the dropdown in the pane's top-left corner.

Roadmap/ideas

Integrated devtools
Responsive design mode, with browsersync between panes
Integrated server profiler/debugger
Webpack bundle analysis
Auto-fixes ("it looks like you mistyped 'oncreate'. Click here to fix")
WYSIWYG editing
Automated testing
Integrated component marketplace
Isolated component editor
Design improvements
and lots more

License

LIL

sapper-studio's People

Contributors

Stargazers

Watchers

sapper-studio's Issues

Cmd-K should clear the terminal

Select file for currently viewed page

In the viewer, it would be good if you could cmd-click (or whatever) the current URL (displayed in the switcher? #11) and it would select the relevant file in routes

File tree viewer

Detect whether something is in fact a valid Sapper project

Just found myself scratching my head because I reopened a project from the launcher shortcut menu, but the project had moved

Editor pane

Add some tests!

not exactly sure what the best way to do this would be

Keyboard shortcuts for switching panes

Editor syntax highlighting

Might be possible to reuse parts of https://github.com/UnwrittenFun/svelte-language-server and https://github.com/UnwrittenFun/svelte-vscode ?

Error: Cannot find module 'sapper/api.js'

Hey there,

Congrats on this! Looks like a great idea! I've just tried to create a new project and I see this in the logs:

Build instructions on Windows

While building it, i remember some tricks to build node-pty related stuff.

First one is pretty simple: npm install --global --production windows-build-tools before hand

And second, a troubleshooting list:

PROBLEM: “C:\Microsoft.Cpp.Default.props” was not found
SOLUTION: Change ownership in the install dir (in my case C:\Program Files (x86)\MSBuild\14.0) to your user, instead of admin. (properties>Security>Advanced).

via https://stackoverflow.com/questions/41695251/c-microsoft-cpp-default-props-was-not-found

Should this steps be included in the readme.md? It's pretty crucial, saves a ton of work, and maybe prevent a couple of issue submitions :)

Make items in launcher shortcut menu removable

Cursor Placement In Editor Off By One (Windows)

The more characters on a line, the more the cursor gets offset to the left. For example, if I type the abc's with no spaces it will be be to the left of the 'i' and two to the left of 'v' even though when I type it is still positioned at the end.

I found a suggestion of setting disableMonospaceOptimizations: true for the monaco editor (microsoft/monaco-editor#594) and it resolves the issue for me, but from what I understand in the docs it can remeasure the line and I don't know if that would have negative performance impacts. Is there further perf investigation I could do or should I create a PR?

Environment:
Windows 7
Node 8.11.2

Allow port to be selectable

Sometimes you need to run the app on a specific port, e.g. for authentication callbacks

Reset scroll when changing file in editor

Blur active pane when window itself is blurred

Does not start on Linux

Building works, but warns on build.

When starting, just quietly exits with error code 0, but no window shows up.

Environment: i3 on ubuntu 19.04.

Might this be an issue with electron itself? I would at least expect an error thrown.

USER@laptop:~/projects/sapper-studio$ nvm use 10
Now using node v10.15.3 (npm v6.4.1)
USER@laptop:~/projects/sapper-studio$ yarn
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------] 0/515(node:9956) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ electron-builder install-app-deps
  • electron-builder version=20.13.4
  • rebuilding native production dependencies platform=linux arch=x64
  • rebuilding native dependency name=node-pty
Done in 6.46s.
USER@laptop:~/projects/sapper-studio$ yarn build
yarn run v1.9.4
$ rollup -c

src/main.ts, src/launcher.ts, src/project.ts → dist...
(!) `this` has been rewritten to `undefined`
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
src/main.ts
107:         buttonLabel: 'Create project',
108:         properties: ['openDirectory', 'createDirectory'],
109:     }, (filenames) => tslib_1.__awaiter(this, void 0, void 0, function* () {
                                             ^
110:         if (!filenames)
111:             return;
...and 1 other occurrence
created dist in 1.1s
Done in 1.58s.
USER@laptop:~/projects/sapper-studio$ yarn start
yarn run v1.9.4
$ cross-env NODE_ENV=development electron .
Done in 0.28s.
USER@laptop:~/projects/sapper-studio$ echo $?
0

Tried this on a mac Cataline with a fresh clone.

got this build error tho:


(!) `this` has been rewritten to `undefined`
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
src/main.ts
107:         buttonLabel: 'Create project',
108:         properties: ['openDirectory', 'createDirectory'],
109:     }, (filenames) => tslib_1.__awaiter(this, void 0, void 0, function* () {
                                             ^
110:         if (!filenames)
111:             return;

Doesn't work on Windows

This doesn't work:

export NODE_ENV=development && electron .

Should use cross-env.