ktsn/vue-designer

Vue component design tool

Vue Designer

Vue component design tool.

This extension is still work in progress. If you have some feedbacks for this extension, it would be really helpful!

Quick Start

• Download VSCode Extension

• Open the command pallete and select Open Vue Designer. Then you can see a preview pane of currently opened single file component (.vue).

Settings

vueDesigner.sharedStyles

An array of CSS paths which will be loaded in the preview. It is useful when your application has global CSS such as reset CSS.

{
  "vueDesigner.sharedStyles": ["reset.css"]
}

Note that it does not support @import in the loaded CSS yet. You need to specify all depending CSS files.

Supported Preprocessors

Vue Designer currently does not actively support preprocessors on <template>, <script> and <style> blocks. Languages not included in the following list may not work on Vue Designer.

• HTML (<template>)
• JavaScript (<script>)
• TypeScript (<script lang="ts">)
• CSS (<style>)

Development

Vue designer is separated by two modules - server and client.

The server is executed by the editor process and responsible with parsing/analyzing component code and handling client requests. The client is for rendering compnent preview and handling the users' interaction. The server and client communicate by WebSocket to synchronize component data.

The server code is written in TypeScript and compiled to CommonJS format while the client code is in TypeScript too but bundled by Vite.

The codes only for client should be in src/view.

All codes should be formatted by Prettier.

For typings of external packages that does not exist should be in types/(package name).

Visual Studio Code Extension

To debug on VSCode, follow the below steps:

1. Run yarn watch to start dev server.
2. Open VSCode and show debug pane on the left side of the editor.
3. Run Launch Extension so that it opens a new window with enabling local Vue Designer.
4. Select Open Vue Designer on command pallete.

If you want to use dev tools for client code, use Developer: Toggle Developer Tools command on the command pallete.

Commands

# build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

Release

$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add CHANGELOG.md
$ git commit -m "docs: changelog vXXX"

$ vsce publish

vue-designer's Issues

Injected component code should not be self-closing style

Currently, the component that injected by D&D is inserted as self-closing tag (<MyComp/>). But I noticed it is more convenient to inject as separated syntax (<MyComp></MyComp>).

The most of cases, I edit the injected component to separate the start tag and end tag to put slot content.

Photoshop-like viewport scrolling

I'm working on resizable (#19) and zoomable viewport. But I just noticed it is probably needed to implement photoshop-like scrolling UI as well. The normal browser scroller (overflow: auto;) well works on normal documents but does not seems to work on this kind of tool.

For example, if I want to resize the viewport to much large size, it will be immediately blocked because the scroll is limited. I expect the renderer allows to scroll for much large size than viewport size so that I easily resize the viewport more larger.

UI improvement for CSS editing

The main goal of CSS editor in the preview is immediately synchronize the updates in the preview with the actual code. This is already achieved in #11, but it can be improved more in terms of UI.

I think Chrome devtool's CSS editor in the element inspector is really useful, so I would like to make vue-designer like that.

• Change numeric value with up/down key. #70
• Show completion list during editing prop/value.
• Insert declaration to any position. #73
• Focus next item when pressed the enter key. #71, #74
• Add a new declaration when finished editing the last declaration of a rule. #71
• Auto focus a new declaration #12

Reload preview page when coming back from other tab

Looks like preview page will be suspended when the user moves to other tab and hides the preview page. In the development environment, it is automatically reloaded by webpack-dev-server, I guess. But in the production, the page never available after suspended.

We need more research why it happens and how we can fix it.

[BUG] Preview stays white

When starting the designer the designer stays white, nothing gets loaded.

Used .vue file:

<template>
  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs">
    <path d="M15.4688 4.125H13.3594C13.6523 3.74414 13.8281 3.27539 13.8281 2.71875C13.8281 1.42969 12.832 0.375 11.6309 0.375C10.4004 0.375 9.66797 1.13672 8.4375 3.1875C7.17773 1.13672 6.44531 0.375 5.21484 0.375C4.01367 0.375 3.04688 1.42969 3.04688 2.71875C3.04688 3.27539 3.19336 3.74414 3.48633 4.125H1.40625C0.615234 4.125 0 4.76953 0 5.53125V13.9688C0 14.7598 0.615234 15.375 1.40625 15.375H15.4688C16.2305 15.375 16.875 14.7598 16.875 13.9688V5.53125C16.875 4.76953 16.2305 4.125 15.4688 4.125ZM9.02344 4.03711C10.459 1.60547 10.957 1.3125 11.6309 1.3125C12.3047 1.3125 12.8906 1.95703 12.8906 2.71875C12.8906 3.50977 12.3047 4.125 11.6309 4.125H8.96484L9.02344 4.03711ZM5.21484 1.3125C5.88867 1.3125 6.38672 1.60547 7.82227 4.03711L7.88086 4.125H5.21484C4.54102 4.125 3.95508 3.50977 3.95508 2.71875C3.98438 1.95703 4.54102 1.3125 5.21484 1.3125ZM15.9375 13.9688C15.9375 14.2324 15.7031 14.4375 15.4688 14.4375H1.40625C1.14258 14.4375 0.9375 14.2324 0.9375 13.9688V13.0312H15.9375V13.9688ZM15.9375 12.0938H0.9375V10.2188H15.9375V12.0938ZM15.9375 9.28125H0.9375V5.53125C0.9375 5.29688 1.14258 5.0625 1.40625 5.0625H7.29492L4.98047 7.40625C4.89258 7.49414 4.89258 7.64062 4.98047 7.72852L5.30273 8.05078C5.39062 8.13867 5.53711 8.13867 5.625 8.05078L8.4375 5.26758L11.2207 8.05078C11.3086 8.13867 11.4551 8.13867 11.543 8.05078L11.8652 7.72852C11.9531 7.64062 11.9531 7.49414 11.8652 7.40625L9.55078 5.0625H15.4688C15.7031 5.0625 15.9375 5.29688 15.9375 5.53125V9.28125Z" fill="black"/>
  </svg>
</template>

<script>
export default {
  name: 'CotapPresent',
};
</script>

Use recast for script transformation

https://github.com/benjamn/recast

The advantage of recast is that it will not touch non-modified code. So we would retain the existing code format of script block.

[Collaboration Request] This is cool, maybe we can work together

Hello @ktsn ,

I am currently in the progress of setting up a Proof of Concept for Vue Visual Editor for a narrowcasting system, but I wll build it up as a separate editor first as Proof of Concept. Then I came across your project and thought, maybe we can work together to both supply a standalone editor and an extension.

So, what do you think about this?

Greetings,
Dylan Vos

Limit viewport size to avoid going minus value

Camelize v-bind.prop keys

Vue.js converts the attribute name of v-bind with prop modifier on the compile time. We need to support that behavior too. Also, it converts inner-html to innerHTML as a special case.

https://template-explorer.vuejs.org/#%3CTest%20foo-bar%3D%22foo%22%20v-bind%3Abar-baz%3D%22foo%22%20v-bind%3Abaz-foo.prop%3D%22foo%22%20v-bind%3Ainner-html.prop%3D%22foo%22%20%2F%3E

Placeholder for slots

As same as expression placeholder, it would be useful if slot shows placeholder when it's not specified especially on dragging and dropping some node into slot.

Auto focus to newly added declaration

Currently, if the users add a declaration in the preview, it has a default value and they need to focus and edit it by themselves. I think we should at least auto focus the declaration property so that they smoothly edit its prop and value.

Nuxt support??

@pi0, @ktsn, guys, how I can use it with Nuxt? I don't got a ./src folder

command 'extension.openVueDesigner' not found

When I try to open the extension as described on the extension Details, I get the error: command 'extension.openVueDesigner' not found

Reproduction

Ctrl + Shift + P ; Open Vue Designer
Note I can see the option, just I get an error when clicking it.

Versions

Version: 1.30.1 (system setup)
Commit: dea8705087adb1b5e5ae1d9123278e178656186a
Date: 2018-12-18T18:12:07.165Z
Electron: 2.0.12
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
OS: Windows_NT x64 10.0.16299

Matched styles of selected node is not updated when the editor code is updated

This is introduced after #6. We need to reconsider how to derive matchedRules.

Refactoring

Naming

• Rename ambiguous type to more concrete one (e.g. Element -> TEElement)
• Rename component name to more specific one (e.g. Node -> VueNode)

Data Structure

• Make attributes on template element AST to Record<attrName, attrValue>.
• Pre transform some directives like v-bind / v-model / v-for.
• Extract scoped slot / normal slot on AST transformation phase.
  • Don't do this because slot attribute may dynamic.

Tidy Up Logics

• Abstract websocket communication to reduce code
• Simplify resolving v-if/-else/-else-if/-for and slots/scoped slots.
• Simplify converting AST to Vue VNode.
• Reduce many props just for transferring to a child component especially for rendering related components.

External Libs / APIs

• Use GraphQL + WebSocket for server-client communication
  • It does not appropriate for vue-designer because it has nested data structure.
• Use VSCode WebView API https://code.visualstudio.com/docs/extensions/webview
• Migrate to Vue CLI v3

Discussion

• Should we include code position in transformed ASTs so that we eliminate path/index from them?

Improve dragging and dropping of template nodes

The current D&D is not practicable in terms of availability and understandability. I'm seeing there are the following problems:

• Cannot insert a node if the drop area does not have height.
• Difficult to realize / handle where the dropped node will be inserted.
• Codemod outputs messy code still.

We have to consider to solve the above things before v1.0.0.

UI improvements of scroll / zoom

• Zoom by Ctrl + Scroll
• Horizontal scroll by Shift + Scroll

Is this repository developed any more?

Develpement has already stopped in this repo?
Is there any successor project?

Use pointer event for resize

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

The highlighting in style block is inaccurate if there are root indentation

Avoid saving prop value by pressing enter during composition

As the most of users apply the composition phase of IME by pressing enter key, we should not save editing prop value by doing that during composition phase.