├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .prettierignore
├── .vscode
    ├── launch.json
    └── tasks.json
├── .vscodeignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.html
├── package.json
├── prettier.config.js
├── src
    ├── asset-resolver.ts
    ├── infra
    │   └── communication
    │   │   ├── connect.ts
    │   │   ├── logger.ts
    │   │   ├── subject.ts
    │   │   └── types.ts
    ├── parser
    │   ├── modifier.ts
    │   ├── script
    │   │   ├── manipulate.ts
    │   │   ├── modify.ts
    │   │   └── types.ts
    │   ├── style
    │   │   ├── codegen.ts
    │   │   ├── manipulate.ts
    │   │   ├── match.ts
    │   │   ├── modify.ts
    │   │   ├── transform.ts
    │   │   └── types.ts
    │   ├── template
    │   │   ├── manipulate.ts
    │   │   ├── modify.ts
    │   │   ├── transform.ts
    │   │   └── types.ts
    │   └── vue-file.ts
    ├── repositories
    │   ├── editor-repository.ts
    │   ├── setting-repository.ts
    │   └── vue-file-repository.ts
    ├── server
    │   ├── main.ts
    │   ├── mutator.ts
    │   ├── resolver.ts
    │   └── subject-type.ts
    ├── types
    │   ├── hash-sum.d.ts
    │   ├── postcss-safe-parser.d.ts
    │   └── xml-name-validator.d.ts
    ├── utils.ts
    ├── view
    │   ├── App.vue
    │   ├── communication
    │   │   └── client.ts
    │   ├── components
    │   │   ├── BaseIcon.vue
    │   │   ├── ComponentCatalog.vue
    │   │   ├── ComponentCatalogPreview.vue
    │   │   ├── ContainerVueComponent.vue
    │   │   ├── ContainerVueNode.vue
    │   │   ├── InputComposition.vue
    │   │   ├── InputJson.vue
    │   │   ├── PageMain.vue
    │   │   ├── Renderer.vue
    │   │   ├── RendererGuide.vue
    │   │   ├── Resizable.vue
    │   │   ├── ScopeInformation.vue
    │   │   ├── StyleDeclaration.vue
    │   │   ├── StyleInformation.vue
    │   │   ├── StyleValue.vue
    │   │   ├── Toolbar.vue
    │   │   ├── Viewport.vue
    │   │   ├── VueChild.vue
    │   │   ├── VueComponent.vue
    │   │   ├── VueExpression.vue
    │   │   ├── VueNode.vue
    │   │   └── VueSlot.vue
    │   ├── eval.ts
    │   ├── global.css
    │   ├── lib
    │   │   └── drag-and-drop.js
    │   ├── load-icons.ts
    │   ├── main.ts
    │   ├── store
    │   │   ├── bounds-calculator.ts
    │   │   ├── index.ts
    │   │   ├── modules
    │   │   │   ├── guide.ts
    │   │   │   ├── index.ts
    │   │   │   ├── project
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── project-actions.ts
    │   │   │   │   ├── project-getters.ts
    │   │   │   │   ├── project-mutations.ts
    │   │   │   │   ├── project-state.ts
    │   │   │   │   └── types.ts
    │   │   │   └── viewport.ts
    │   │   └── style-matcher.ts
    │   ├── ui-logic
    │   │   ├── editing.ts
    │   │   ├── rendering.ts
    │   │   └── style-value-lexer.ts
    │   └── vite-env.d.ts
    ├── vscode
    │   ├── modifier.ts
    │   └── watcher.ts
    └── vue-designer.ts
├── tests
    ├── asset-resolver.spec.ts
    ├── helpers
    │   ├── style.ts
    │   ├── template.ts
    │   ├── vue.ts
    │   └── ws.ts
    ├── infra
    │   └── communication
    │   │   ├── connect.spec.ts
    │   │   └── subject.spec.ts
    ├── parser
    │   ├── modifier.spec.ts
    │   ├── script
    │   │   ├── child-component.spec.ts
    │   │   ├── data.spec.ts
    │   │   ├── modify.spec.ts
    │   │   └── prop.spec.ts
    │   ├── style
    │   │   ├── asset.spec.ts
    │   │   ├── codegen.spec.ts
    │   │   ├── matcher.spec.ts
    │   │   ├── modify.spec.ts
    │   │   ├── scoped.spec.ts
    │   │   ├── transform.spec.ts
    │   │   └── travarse.spec.ts
    │   └── template
    │   │   ├── asset.spec.ts
    │   │   ├── manipulate.spec.ts
    │   │   ├── modify.spec.ts
    │   │   ├── scoped.spec.ts
    │   │   ├── transform.spec.ts
    │   │   └── traverse.spec.ts
    ├── setup.ts
    └── view
    │   ├── InputComposition.spec.ts
    │   ├── InputJson.spec.ts
    │   ├── Renderer.spec.ts
    │   ├── Resizable.spec.ts
    │   ├── StyleDeclaration.spec.ts
    │   ├── StyleInformation.spec.ts
    │   ├── StyleValue
    │       └── basic.spec.ts
    │   ├── Toolbar.spec.ts
    │   ├── VueComponent
    │       ├── __snapshots__
    │       │   ├── else-if.spec.ts.snap
    │       │   ├── else.spec.ts.snap
    │       │   ├── for.spec.ts.snap
    │       │   ├── if.spec.ts.snap
    │       │   ├── scoped-slot.spec.ts.snap
    │       │   └── slot.spec.ts.snap
    │       ├── basic.spec.ts
    │       ├── bind.spec.ts
    │       ├── child-component.spec.ts
    │       ├── else-if.spec.ts
    │       ├── else.spec.ts
    │       ├── error.spec.ts
    │       ├── for.spec.ts
    │       ├── html.spec.ts
    │       ├── if.spec.ts
    │       ├── model.spec.ts
    │       ├── scoped-slot.spec.ts
    │       ├── select.spec.ts
    │       ├── show.spec.ts
    │       ├── slot.spec.ts
    │       └── text.spec.ts
    │   ├── __snapshots__
    │       ├── InputJson.spec.ts.snap
    │       └── StyleInformation.spec.ts.snap
    │   ├── communication
    │       └── client.spec.ts
    │   ├── eval.spec.ts
    │   ├── store
    │       ├── project.spec.ts
    │       └── style-matcher.spec.ts
    │   └── ui-logic
    │       ├── editing.spec.ts
    │       └── style-value-lexer.spec.ts
├── tsconfig.json
├── tsconfig.main.json
├── vite.config.ts
└── yarn.lock


/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 |   pull_request:
 7 |     types: [opened, synchronize, reopened]
 8 | 
 9 | jobs:
10 |   ci:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v4
14 |       - uses: actions/setup-node@v3
15 |         with:
16 |           node-version: '20'
17 |           cache: 'yarn'
18 |       - run: yarn install --frozen-lockfile
19 |       - run: yarn format:check
20 |       - run: yarn test
21 |       - run: yarn build
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | 
4 | .vscode
5 | !.vscode/launch.json
6 | !.vscode/tasks.json
7 | 
8 | node_modules
9 | /lib/


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | *.json
2 | /lib/
3 | /src/view/lib/
4 | CHANGELOG.md


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | // A launch configuration that compiles the extension and then opens it inside a new window
 2 | {
 3 |   "version": "0.1.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "Launch Extension",
 7 |       "type": "extensionHost",
 8 |       "request": "launch",
 9 |       "runtimeExecutable": "${execPath}",
10 |       "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
11 |       "stopOnEntry": false,
12 |       "sourceMaps": true,
13 |       "outFiles": ["${workspaceRoot}/lib/**/*.js"],
14 |       "env": {
15 |         "DEV": "1"
16 |       }
17 |     }
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | // Available variables which can be used inside of strings.
 2 | // ${workspaceRoot}: the root folder of the team
 3 | // ${file}: the current opened file
 4 | // ${fileBasename}: the current opened file's basename
 5 | // ${fileDirname}: the current opened file's dirname
 6 | // ${fileExtname}: the current opened file's extension
 7 | // ${cwd}: the current working directory of the spawned process
 8 | 
 9 | // A task runner that calls a custom npm script that compiles the extension.
10 | {
11 |   "version": "2.0.0",
12 | 
13 |   // we want to run npm
14 |   "command": "npm",
15 | 
16 |   // we run the custom script "compile" as defined in package.json
17 |   "args": ["run", "build", "--loglevel", "silent"],
18 | 
19 |   // The tsc compiler is started in watching mode
20 |   "isBackground": true,
21 | 
22 |   // use the standard tsc in watch mode problem matcher to find compile problems in the output.
23 |   "problemMatcher": "$tsc-watch",
24 | 
25 |   "tasks": [
26 |     {
27 |       "label": "npm",
28 |       "type": "shell",
29 |       "command": "npm",
30 |       "args": [
31 |         "run",
32 |         "build",
33 |         "--loglevel",
34 |         "silent"
35 |       ],
36 |       "isBackground": true,
37 |       "problemMatcher": "$tsc-watch",
38 |       "group": {
39 |         "_id": "build",
40 |         "isDefault": false
41 |       }
42 |     }
43 |   ]
44 | }


--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
 1 | src
 2 | test
 3 | types
 4 | tsconfig.json
 5 | tsconfig.main.json
 6 | tsconfig.view.json
 7 | webpack.config.js
 8 | .gitignore
 9 | .prettierrc.yml
10 | .prettierignore
11 | .circleci


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017-present katashin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p>
 2 |   <h1 align="center">Vue Designer</h1>
 3 | </p>
 4 | 
 5 | Vue component design tool.
 6 | 
 7 | > This extension is still work in progress. If you have some feedbacks for this extension, it would be really helpful!
 8 | 
 9 | ![demo](https://user-images.githubusercontent.com/5158436/49339360-c26e8780-f645-11e8-8115-3784eff63814.gif)
10 | 
11 | ## Quick Start
12 | 
13 | - Download [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=ktsn.vue-designer)
14 | 
15 | - Open the command pallete and select `Open Vue Designer`. Then you can see a preview pane of currently opened single file component (`.vue`).
16 | 
17 | ## Settings
18 | 
19 | ### `vueDesigner.sharedStyles`
20 | 
21 | 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.
22 | 
23 | ```json
24 | {
25 |   "vueDesigner.sharedStyles": ["reset.css"]
26 | }
27 | ```
28 | 
29 | Note that it does not support `@import` in the loaded CSS yet. You need to specify all depending CSS files.
30 | 
31 | ## Supported Preprocessors
32 | 
33 | 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.
34 | 
35 | - HTML (`<template>`)
36 | - JavaScript (`<script>`)
37 | - TypeScript (`<script lang="ts">`)
38 | - CSS (`<style>`)
39 | 
40 | ## Development
41 | 
42 | Vue designer is separated by two modules - server and client.
43 | 
44 | 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.
45 | 
46 | The server code is written in TypeScript and compiled to CommonJS format while the client code is in TypeScript too but bundled by Vite.
47 | 
48 | The codes only for client should be in `src/view`.
49 | 
50 | All codes should be formatted by [Prettier](https://prettier.io/).
51 | 
52 | For typings of external packages that does not exist should be in `types/(package name)`.
53 | 
54 | ### Visual Studio Code Extension
55 | 
56 | To debug on VSCode, follow the below steps:
57 | 
58 | 1.  Run `yarn watch` to start dev server.
59 | 2.  Open VSCode and show debug pane on the left side of the editor.
60 | 3.  Run `Launch Extension` so that it opens a new window with enabling local Vue Designer.
61 | 4.  Select `Open Vue Designer` on command pallete.
62 | 
63 | If you want to use dev tools for client code, use **Developer: Toggle Developer Tools** command on the command pallete.
64 | 
65 | ### Commands
66 | 
67 | ```sh
68 | # build sources
69 | $ yarn build
70 | 
71 | # build and watch sources
72 | $ yarn watch
73 | 
74 | # run test
75 | $ yarn test
76 | 
77 | # format sources with prettier
78 | $ yarn format
79 | ```
80 | 
81 | ### Release
82 | 
83 | ```sh
84 | $ npm version XXX # -> update version & generate changelog
85 | 
86 | # after edit changelog if needed
87 | $ git add CHANGELOG.md
88 | $ git commit -m "docs: changelog vXXX"
89 | 
90 | $ vsce publish
91 | ```
92 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html lang="en">
3 |   <body>
4 |     <div id="app"></div>
5 |     <script type="module" src="/src/view/main.ts"></script>
6 |   </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-designer",
  3 |   "displayName": "Vue Designer",
  4 |   "main": "./lib/vue-designer",
  5 |   "version": "0.7.1",
  6 |   "description": "Vue component design tool",
  7 |   "keywords": [
  8 |     "Vue",
  9 |     "component",
 10 |     "design tool",
 11 |     "single file component",
 12 |     "preview"
 13 |   ],
 14 |   "categories": [
 15 |     "Other"
 16 |   ],
 17 |   "scripts": {
 18 |     "vscode:prepublish": "yarn clean && yarn build",
 19 |     "preversion": "yarn test --run",
 20 |     "version": "conventional-changelog -p angular -s -i CHANGELOG.md",
 21 |     "postinstall": "node ./node_modules/vscode/bin/install",
 22 |     "clean": "rimraf lib",
 23 |     "watch": "run-p watch:*",
 24 |     "watch:server": "tsc --watch -p tsconfig.main.json",
 25 |     "watch:client": "vite",
 26 |     "build": "vue-tsc && tsc --sourceMap false -p tsconfig.main.json && vite build",
 27 |     "format": "prettier --write .",
 28 |     "format:check": "prettier --check .",
 29 |     "test": "vitest"
 30 |   },
 31 |   "repository": "https://github.com/ktsn/vue-designer",
 32 |   "license": "MIT",
 33 |   "publisher": "ktsn",
 34 |   "activationEvents": [
 35 |     "onCommand:extension.openVueDesigner"
 36 |   ],
 37 |   "contributes": {
 38 |     "configuration": {
 39 |       "type": "object",
 40 |       "title": "Vue Designer configuration",
 41 |       "properties": {
 42 |         "vueDesigner.sharedStyles": {
 43 |           "type": "array",
 44 |           "default": [],
 45 |           "description": "Path to css files which will be loaded globally in the preview"
 46 |         }
 47 |       }
 48 |     },
 49 |     "commands": [
 50 |       {
 51 |         "command": "extension.openVueDesigner",
 52 |         "title": "Open Vue Designer"
 53 |       }
 54 |     ],
 55 |     "menus": {
 56 |       "editor/title": [
 57 |         {
 58 |           "command": "extension.openVueDesigner",
 59 |           "when": "resourceLangId == vue-html"
 60 |         }
 61 |       ]
 62 |     }
 63 |   },
 64 |   "engines": {
 65 |     "vscode": "^1.23.0"
 66 |   },
 67 |   "dependencies": {
 68 |     "@babel/parser": "^7.23.6",
 69 |     "@babel/types": "^7.23.6",
 70 |     "@vue/compiler-sfc": "^3.4.1",
 71 |     "eslint": "^8.56.0",
 72 |     "hash-sum": "^2.0.0",
 73 |     "lodash.debounce": "^4.0.8",
 74 |     "postcss": "^8.4.32",
 75 |     "postcss-safe-parser": "^7.0.0",
 76 |     "postcss-selector-parser": "^6.0.14",
 77 |     "vue-eslint-parser": "^9.3.2",
 78 |     "ws": "^8.16.0"
 79 |   },
 80 |   "devDependencies": {
 81 |     "@types/eslint-scope": "^3.7.7",
 82 |     "@types/eslint-visitor-keys": "^3.3.0",
 83 |     "@types/lodash.debounce": "^4.0.9",
 84 |     "@types/ws": "^8.5.10",
 85 |     "@vitejs/plugin-vue": "^5.0.1",
 86 |     "conventional-changelog-cli": "^4.1.0",
 87 |     "jsdom": "^23.0.1",
 88 |     "lodash.camelcase": "^4.3.0",
 89 |     "material-design-icons": "^3.0.1",
 90 |     "npm-run-all": "^4.1.3",
 91 |     "prettier": "^3.1.1",
 92 |     "pretty": "^2.0.0",
 93 |     "rimraf": "^5.0.5",
 94 |     "sinai": "^0.4.4",
 95 |     "typescript": "~5.3.3",
 96 |     "vite": "^5.0.8",
 97 |     "vitest": "^1.1.0",
 98 |     "vscode": "^1.1.37",
 99 |     "vue": "^3.4.1",
100 |     "vue-global-events": "^3.0.1",
101 |     "vue-tsc": "^1.8.27",
102 |     "xml-name-validator": "^5.0.0"
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: false,
3 |   singleQuote: true,
4 | }
5 | 


--------------------------------------------------------------------------------
/src/asset-resolver.ts:
--------------------------------------------------------------------------------
 1 | import { URL } from 'url'
 2 | import path from 'path'
 3 | 
 4 | const assetsEndpoint = '/assets'
 5 | 
 6 | // https://tools.ietf.org/html/rfc3986#section-3.1
 7 | const uriRegExp = /^\w[\w\d\+\-\.]*:/
 8 | 
 9 | export class AssetResolver {
10 |   pathToUrl(assetPath: string, basePath: string): string {
11 |     // If it is full url, don't try to resolve it
12 |     if (uriRegExp.test(assetPath)) {
13 |       return assetPath
14 |     }
15 | 
16 |     const resolved = path.resolve(basePath, assetPath)
17 |     return assetsEndpoint + '?path=' + encodeURIComponent(resolved)
18 |   }
19 | 
20 |   urlToPath(assetUrl: string): string | null {
21 |     const url = new URL(assetUrl, 'file://')
22 |     if (url.pathname !== assetsEndpoint) {
23 |       return null
24 |     }
25 | 
26 |     const assetPath = url.searchParams.get('path')
27 |     return assetPath && decodeURIComponent(assetPath)
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/infra/communication/connect.ts:
--------------------------------------------------------------------------------
 1 | import assert from 'assert'
 2 | import { WebSocketServer, WebSocket, Resolver, Mutator } from './types'
 3 | 
 4 | export interface ConnectConfig {
 5 |   resolver: Resolver
 6 |   mutator: Mutator
 7 |   server: WebSocketServer
 8 | }
 9 | 
10 | export function connectWsServer({
11 |   resolver,
12 |   mutator,
13 |   server,
14 | }: ConnectConfig): void {
15 |   server.on('connection', (ws) => {
16 |     listenMessage(ws, resolver, mutator)
17 |   })
18 | }
19 | 
20 | function listenMessage(ws: WebSocket, resolver: Resolver, mutator: Mutator) {
21 |   ws.on('message', async (message) => {
22 |     const data = JSON.parse(message.toString())
23 | 
24 |     assert(typeof data.type === 'string')
25 |     assert(Array.isArray(data.args))
26 |     assert('requestId' in data)
27 | 
28 |     const [type, method] = data.type.split(':')
29 |     const target = type === 'resolver' ? resolver : mutator
30 | 
31 |     assert(type === 'resolver' || type === 'mutator')
32 |     assert(typeof target[method] === 'function')
33 | 
34 |     const res = await target[method].apply(target, data.args)
35 |     ws.send(
36 |       JSON.stringify({
37 |         type: data.type,
38 |         data: res,
39 |         requestId: data.requestId,
40 |       }),
41 |     )
42 |   })
43 | 
44 |   ws.on('error', (err) => {
45 |     // To avoid clashing extension by ECONNRESET error...
46 |     // https://github.com/websockets/ws/issues/1256
47 |     if ((err as any).code === 'ECONNRESET') return
48 |     throw err
49 |   })
50 | }
51 | 


--------------------------------------------------------------------------------
/src/infra/communication/logger.ts:
--------------------------------------------------------------------------------
 1 | import { WebSocketServer, WebSocket } from './types'
 2 | 
 3 | export function enableLogging(ws: WebSocketServer): WebSocketServer {
 4 |   return {
 5 |     get clients() {
 6 |       return new Set(Array.from(ws.clients.values()).map(enableSocketLogging))
 7 |     },
 8 | 
 9 |     on(event, fn) {
10 |       ws.on(event, (socket) => {
11 |         if (event === 'connection') {
12 |           console.log(`----- ${formattedNow()} New connection appears`)
13 |         }
14 |         fn(enableSocketLogging(socket))
15 |       })
16 |     },
17 |   }
18 | }
19 | 
20 | function enableSocketLogging(socket: WebSocket): WebSocket {
21 |   return {
22 |     on(event: any, fn: Function) {
23 |       socket.on(event, (payload) => {
24 |         fn(payload)
25 | 
26 |         if (event === 'message') {
27 |           console.log(`<===  ${formattedNow()}`, JSON.parse(payload))
28 |         } else if (event === 'error') {
29 |           console.log(`ERROR ${formattedNow()}`, payload)
30 |         }
31 |       })
32 |     },
33 | 
34 |     once(event, fn) {
35 |       socket.once(event, () => {
36 |         fn()
37 |       })
38 |     },
39 | 
40 |     send(payload) {
41 |       socket.send(payload)
42 |       console.log(`===>  ${formattedNow()}`, JSON.parse(payload))
43 |     },
44 |   }
45 | }
46 | 
47 | function formattedNow(): string {
48 |   const now = new Date()
49 |   const year = now.getFullYear().toString()
50 |   const month = (now.getMonth() + 1).toString().padStart(2, '0')
51 |   const date = now.getDate().toString().padStart(2, '0')
52 |   const hour = now.getHours().toString().padStart(2, '0')
53 |   const minute = now.getMinutes().toString().padStart(2, '0')
54 |   const second = now.getSeconds().toString().padStart(2, '0')
55 | 
56 |   return `${year}-${month}-${date} ${hour}:${minute}:${second}`
57 | }
58 | 


--------------------------------------------------------------------------------
/src/infra/communication/subject.ts:
--------------------------------------------------------------------------------
 1 | import { WebSocketServer } from './types'
 2 | 
 3 | export class Subject<T extends Record<string, any>> {
 4 |   constructor(private server: WebSocketServer) {}
 5 | 
 6 |   notify<K extends keyof T & string>(key: K, data: T[K]) {
 7 |     this.server.clients.forEach((ws) => {
 8 |       ws.send(
 9 |         JSON.stringify({
10 |           type: 'subject:' + key,
11 |           data,
12 |         }),
13 |       )
14 |     })
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/infra/communication/types.ts:
--------------------------------------------------------------------------------
 1 | export interface WebSocketServer {
 2 |   clients: Set<WebSocket>
 3 |   on(event: 'connection', cb: (socket: WebSocket) => void): void
 4 | }
 5 | 
 6 | export interface WebSocket {
 7 |   send(payload: string): void
 8 |   on(event: 'message', cb: (message: string) => void): void
 9 |   on(event: 'error', cb: (error: Error) => void): void
10 |   once(event: 'close', cb: () => void): void
11 | }
12 | 
13 | export type Resolver = Record<string, (...args: any[]) => any>
14 | 
15 | export type Mutator = Record<string, (...args: any[]) => void>
16 | 


--------------------------------------------------------------------------------
/src/parser/modifier.ts:
--------------------------------------------------------------------------------
  1 | import { flatten } from '../utils'
  2 | 
  3 | export type Modifiers = (Modifier | Modifier[])[]
  4 | 
  5 | export type Modifier = Add | Remove
  6 | 
  7 | export interface Range {
  8 |   range: [number, number]
  9 | }
 10 | 
 11 | interface Add {
 12 |   type: 'Add'
 13 |   pos: number
 14 |   value: string
 15 | }
 16 | 
 17 | interface Remove {
 18 |   type: 'Remove'
 19 |   pos: number
 20 |   length: number
 21 | }
 22 | 
 23 | export const empty = insertAt(0, '')
 24 | export const singleIndentStr = '  '
 25 | 
 26 | export function modify(code: string, modfiers: Modifiers): string {
 27 |   const ms = flatten(modfiers).sort(modifierComperator)
 28 | 
 29 |   function loop(
 30 |     acc: string,
 31 |     pos: number,
 32 |     cur: Modifier | undefined,
 33 |     rest: Modifier[],
 34 |   ): string {
 35 |     if (!cur) {
 36 |       return acc + code.slice(pos)
 37 |     }
 38 | 
 39 |     // Fix the current position to resolve overwraps of nodes.
 40 |     // e.g.
 41 |     //  remove: [4, 8] -> insert: 6
 42 |     //  then insert position will be 8.
 43 |     const fixedPos = pos <= cur.pos ? cur.pos : pos
 44 |     const pre = code.slice(pos, fixedPos)
 45 |     switch (cur.type) {
 46 |       case 'Add':
 47 |         return loop(acc + pre + cur.value, fixedPos, rest[0], rest.slice(1))
 48 |       case 'Remove':
 49 |         const endPos = cur.pos + cur.length
 50 |         const fixedEnd = pos <= endPos ? endPos : pos
 51 |         return loop(acc + pre, fixedEnd, rest[0], rest.slice(1))
 52 |       default:
 53 |         throw new Error(
 54 |           '[modifier] Unexpected modifier type: ' + (cur as any).type,
 55 |         )
 56 |     }
 57 |   }
 58 |   return loop('', 0, ms[0], ms.slice(1))
 59 | }
 60 | 
 61 | export function reduce<T>(
 62 |   modifiers: Modifiers,
 63 |   fn: (acc: T, modifier: Modifier) => T,
 64 |   initial: T,
 65 | ): T {
 66 |   const ms = flatten(modifiers).sort(modifierComperator)
 67 |   return ms.reduce(fn, initial)
 68 | }
 69 | 
 70 | function modifierComperator(a: Modifier, b: Modifier): number {
 71 |   if (a.pos < b.pos) {
 72 |     return -1
 73 |   } else if (a.pos > b.pos) {
 74 |     return 1
 75 |   } else {
 76 |     return 0
 77 |   }
 78 | }
 79 | 
 80 | export function insertAt(pos: number, value: string): Modifier {
 81 |   return {
 82 |     type: 'Add',
 83 |     pos,
 84 |     value,
 85 |   }
 86 | }
 87 | 
 88 | export function insertBefore(node: Range, value: string): Modifier {
 89 |   return insertAt(node.range[0], value)
 90 | }
 91 | 
 92 | export function insertAfter(node: Range, value: string): Modifier {
 93 |   return insertAt(node.range[1], value)
 94 | }
 95 | 
 96 | export function removeRange(from: number, to: number): Modifier {
 97 |   return {
 98 |     type: 'Remove',
 99 |     pos: from,
100 |     length: to - from,
101 |   }
102 | }
103 | 
104 | export function remove(node: Range): Modifier {
105 |   return removeRange(node.range[0], node.range[1])
106 | }
107 | 
108 | export function replace(node: Range, value: string): Modifier[] {
109 |   return [remove(node), insertAfter(node, value)]
110 | }
111 | 


--------------------------------------------------------------------------------
/src/parser/script/modify.ts:
--------------------------------------------------------------------------------
  1 | import assert from 'assert'
  2 | import * as t from '@babel/types'
  3 | import { findComponentOptions, findProperty } from './manipulate'
  4 | import { Modifier, singleIndentStr, insertAt } from '../modifier'
  5 | 
  6 | export function insertComponentScript(
  7 |   ast: t.Program,
  8 |   code: string,
  9 |   componentName: string,
 10 |   componentPath: string,
 11 | ): Modifier[] {
 12 |   const options = findComponentOptions(ast.body)
 13 |   if (!options) return []
 14 | 
 15 |   const componentOptions = findProperty(options.properties, 'components')
 16 |   if (!componentOptions) {
 17 |     return [
 18 |       insertComponentImport(ast, code, componentName, componentPath),
 19 |       insertComponentOptions(options, code, componentName),
 20 |     ]
 21 |   }
 22 | 
 23 |   const value = componentOptions.value
 24 |   if (!t.isObjectExpression(value)) return []
 25 | 
 26 |   return [
 27 |     insertComponentImport(ast, code, componentName, componentPath),
 28 |     insertComponentOptionItem(value, code, componentName),
 29 |   ]
 30 | }
 31 | 
 32 | function insertComponentImport(
 33 |   ast: t.Program,
 34 |   code: string,
 35 |   componentName: string,
 36 |   componentPath: string,
 37 | ): Modifier {
 38 |   assert(
 39 |     ast.body[0],
 40 |     '[modifier] script block should have at least one statement.',
 41 |   )
 42 | 
 43 |   const imports = ast.body.filter((el) => t.isImportDeclaration(el))
 44 |   const lastImport = imports[imports.length - 1]
 45 | 
 46 |   const indent = inferScriptIndent(code, lastImport || ast.body[0])
 47 |   const insertedCode = `import ${componentName} from '${componentPath}'`
 48 | 
 49 |   if (lastImport) {
 50 |     return insertAt(lastImport.end!, '\n' + indent + insertedCode)
 51 |   } else {
 52 |     return insertAt(ast.body[0].start!, insertedCode + '\n' + indent)
 53 |   }
 54 | }
 55 | 
 56 | function insertComponentOptions(
 57 |   options: t.ObjectExpression,
 58 |   code: string,
 59 |   componentName: string,
 60 | ): Modifier {
 61 |   const indent = inferScriptIndent(code, options) + singleIndentStr
 62 |   const comma = options.properties.length > 0 ? ',' : ''
 63 | 
 64 |   // prettier-ignore
 65 |   const value = [
 66 |     '',
 67 |     indent + 'components: {',
 68 |     indent + singleIndentStr + componentName,
 69 |     indent + '}' + comma,
 70 |     ''
 71 |   ].join('\n')
 72 | 
 73 |   return insertAt(options.start! + 1, value)
 74 | }
 75 | 
 76 | function insertComponentOptionItem(
 77 |   componentOptions: t.ObjectExpression,
 78 |   code: string,
 79 |   componentName: string,
 80 | ): Modifier {
 81 |   const indent = inferScriptIndent(code, componentOptions) + singleIndentStr
 82 |   const { start, end } = componentOptions
 83 |   const shouldAddComma = !/\{\s*\}$/.test(code.slice(start!, end!))
 84 |   const comma = shouldAddComma ? ',' : ''
 85 | 
 86 |   const properties = componentOptions.properties
 87 |   const lastProperty = properties[properties.length - 1]
 88 | 
 89 |   const insertedCode = comma + '\n' + indent + componentName
 90 | 
 91 |   if (lastProperty) {
 92 |     return insertAt(lastProperty.end!, insertedCode)
 93 |   } else {
 94 |     return insertAt(start! + 1, insertedCode)
 95 |   }
 96 | }
 97 | 
 98 | function inferScriptIndent(code: string, node: t.Node): string {
 99 |   const pre = code.slice(0, node.end!)
100 |   const match = /[\^\n]([\t ]+).*$/.exec(pre)
101 |   if (match) {
102 |     return match[1]
103 |   } else {
104 |     return ''
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/parser/script/types.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable typescript/no-empty-interface */
 2 | interface RecordDefaultValue extends Record<string, DefaultValue> {}
 3 | interface ArrayDefaultValue extends Array<DefaultValue> {}
 4 | /* eslint-enable typescript/no-empty-interface */
 5 | 
 6 | export type DefaultValue =
 7 |   | RecordDefaultValue
 8 |   | ArrayDefaultValue
 9 |   | boolean
10 |   | number
11 |   | string
12 |   | null
13 |   | undefined
14 | 
15 | export interface Prop {
16 |   name: string
17 |   type: string
18 |   default?: DefaultValue
19 | }
20 | 
21 | export interface Data {
22 |   name: string
23 |   default?: DefaultValue
24 | }
25 | 
26 | export interface ChildComponent {
27 |   name: string
28 |   uri: string
29 | }
30 | 


--------------------------------------------------------------------------------
/src/parser/style/codegen.ts:
--------------------------------------------------------------------------------
  1 | import * as t from './types'
  2 | 
  3 | export function genStyle(ast: t.STStyle): string {
  4 |   return ast.children
  5 |     .map((node) => {
  6 |       switch (node.type) {
  7 |         case 'AtRule':
  8 |           return genAtRule(node)
  9 |         case 'Rule':
 10 |           return genRule(node)
 11 |         default:
 12 |           throw new Error(
 13 |             `[style codegen] Unexpected node type ${
 14 |               (node as any).type
 15 |             } on root`,
 16 |           )
 17 |       }
 18 |     })
 19 |     .join('\n')
 20 | }
 21 | 
 22 | function genAtRule(atRule: t.STAtRule): string {
 23 |   let buf = `@${atRule.name} ${atRule.params}`
 24 | 
 25 |   if (atRule.children.length > 0) {
 26 |     const children = atRule.children
 27 |       .map((child) => {
 28 |         switch (child.type) {
 29 |           case 'AtRule':
 30 |             return genAtRule(child)
 31 |           case 'Rule':
 32 |             return genRule(child)
 33 |           case 'Declaration':
 34 |             return genDeclaration(child)
 35 |           default:
 36 |             throw new Error(
 37 |               `[style codegen] Unexpected node type ${
 38 |                 (child as any).type
 39 |               } as child of AtRule`,
 40 |             )
 41 |         }
 42 |       })
 43 |       .join(' ')
 44 | 
 45 |     buf += ' {' + children + '}'
 46 |   } else {
 47 |     buf += ';'
 48 |   }
 49 | 
 50 |   return buf
 51 | }
 52 | 
 53 | export function genRule(rule: t.STRule): string {
 54 |   const selectors = rule.selectors.map(genSelector).join(', ')
 55 |   const declarations = rule.children.map(genDeclaration).join(' ')
 56 | 
 57 |   return `${selectors} {${declarations}}`
 58 | }
 59 | 
 60 | export function genSelector(s: t.STSelector): string {
 61 |   let buf = ''
 62 |   if (s.universal) {
 63 |     buf += '*'
 64 |   } else if (s.tag) {
 65 |     buf += s.tag
 66 |   }
 67 | 
 68 |   if (s.id) {
 69 |     buf += '#' + s.id
 70 |   }
 71 | 
 72 |   if (s.class.length > 0) {
 73 |     buf += s.class.map((c) => '.' + c).join('')
 74 |   }
 75 | 
 76 |   if (s.attributes.length > 0) {
 77 |     const attrsCodes = s.attributes.map((attr) => {
 78 |       if (attr.operator != null && attr.value != null) {
 79 |         const suffix = attr.insensitive ? ' i' : ''
 80 |         const quote = attr.value.includes('"') ? "'" : '"'
 81 |         return `[${attr.name}${attr.operator}${quote}${attr.value}${quote}${suffix}]`
 82 |       } else {
 83 |         return `[${attr.name}]`
 84 |       }
 85 |     })
 86 |     buf += attrsCodes.join('')
 87 |   }
 88 | 
 89 |   if (s.pseudoClass.length > 0) {
 90 |     buf += s.pseudoClass.map(genPseudoClass).join('')
 91 |   }
 92 | 
 93 |   if (s.pseudoElement) {
 94 |     buf += '::' + s.pseudoElement.value
 95 | 
 96 |     const pseudoClass = s.pseudoElement.pseudoClass
 97 |     if (pseudoClass.length > 0) {
 98 |       buf += pseudoClass.map(genPseudoClass).join('')
 99 |     }
100 |   }
101 | 
102 |   if (s.leftCombinator) {
103 |     buf =
104 |       genSelector(s.leftCombinator.left) +
105 |       ' ' +
106 |       s.leftCombinator.operator +
107 |       ' ' +
108 |       buf
109 |   }
110 | 
111 |   return buf
112 | }
113 | 
114 | function genPseudoClass(node: t.STPseudoClass): string {
115 |   if (node.params.length > 0) {
116 |     const selectors = node.params.map(genSelector).join(', ')
117 |     return ':' + node.value + '(' + selectors + ')'
118 |   } else {
119 |     return ':' + node.value
120 |   }
121 | }
122 | 
123 | export function genDeclaration(decl: t.STDeclaration): string {
124 |   let buf = decl.prop + ': ' + decl.value
125 | 
126 |   if (decl.important) {
127 |     buf += ' !important'
128 |   }
129 | 
130 |   return buf + ';'
131 | }
132 | 


--------------------------------------------------------------------------------
/src/parser/style/modify.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   STStyle,
 3 |   STDeclarationForUpdate,
 4 |   STDeclarationForAdd,
 5 |   STDeclaration,
 6 | } from './types'
 7 | import { getDeclaration, getNode } from './manipulate'
 8 | import {
 9 |   Modifier,
10 |   empty,
11 |   replace,
12 |   removeRange,
13 |   insertBefore,
14 |   insertAfter,
15 | } from '../modifier'
16 | import { genDeclaration, genRule } from './codegen'
17 | import { clone } from '../../utils'
18 | 
19 | export function insertDeclaration(
20 |   styles: STStyle[],
21 |   decl: STDeclarationForAdd,
22 |   to: number[],
23 | ): Modifier | Modifier[] {
24 |   const target = getDeclaration(styles, to)
25 |   if (target) {
26 |     return insertBefore(
27 |       target,
28 |       genDeclaration(clone(target, decl)) + target.before,
29 |     )
30 |   }
31 | 
32 |   const parentPath = to.slice(0, -1)
33 |   const last = to[to.length - 1]
34 |   const before = getDeclaration(styles, parentPath.concat(last - 1))
35 |   if (before) {
36 |     return insertAfter(
37 |       before,
38 |       before.before + genDeclaration(clone(before, decl)),
39 |     )
40 |   }
41 | 
42 |   const rule = getNode(styles, parentPath)
43 |   if (rule && rule.type === 'Rule') {
44 |     const d: STDeclaration = {
45 |       type: 'Declaration',
46 |       path: to,
47 |       before: '',
48 |       range: [-1, -1],
49 |       ...decl,
50 |     }
51 | 
52 |     const inserted = clone(rule, {
53 |       children: [
54 |         ...rule.children.slice(last),
55 |         d,
56 |         ...rule.children.slice(last + 1),
57 |       ],
58 |     })
59 | 
60 |     return replace(rule, genRule(inserted))
61 |   }
62 | 
63 |   return empty
64 | }
65 | 
66 | export function removeDeclaration(styles: STStyle[], path: number[]): Modifier {
67 |   const target = getDeclaration(styles, path)
68 |   return target
69 |     ? removeRange(target.range[0] - target.before.length, target.range[1])
70 |     : empty
71 | }
72 | 
73 | export function updateDeclaration(
74 |   styles: STStyle[],
75 |   decl: STDeclarationForUpdate,
76 | ): Modifier[] {
77 |   const target = getDeclaration(styles, decl.path)
78 |   return target ? replace(target, genDeclaration(clone(target, decl))) : [empty]
79 | }
80 | 


--------------------------------------------------------------------------------
/src/parser/style/types.ts:
--------------------------------------------------------------------------------
  1 | import { Range } from '../modifier'
  2 | 
  3 | export interface HasChildren<T extends STChild> {
  4 |   children: T[]
  5 | }
  6 | 
  7 | export interface STStyle extends Range, HasChildren<STAtRule | STRule> {
  8 |   path: [number]
  9 | }
 10 | 
 11 | export interface STRule extends Range, HasChildren<STDeclaration> {
 12 |   type: 'Rule'
 13 |   before: string
 14 |   after: string
 15 |   path: number[]
 16 |   selectors: STSelector[]
 17 | }
 18 | 
 19 | export interface STDeclaration extends Range {
 20 |   type: 'Declaration'
 21 |   before: string
 22 |   path: number[]
 23 |   prop: string
 24 |   value: string
 25 |   important: boolean
 26 | }
 27 | 
 28 | export interface STAtRule extends Range, HasChildren<STChild> {
 29 |   type: 'AtRule'
 30 |   before: string
 31 |   after: string
 32 |   path: number[]
 33 |   name: string
 34 |   params: string
 35 | }
 36 | 
 37 | export type STChild = STAtRule | STRule | STDeclaration
 38 | 
 39 | export interface STSelector {
 40 |   type: 'Selector'
 41 |   universal: boolean
 42 |   tag?: string
 43 |   id?: string
 44 |   class: string[]
 45 |   attributes: STAttribute[]
 46 |   pseudoClass: STPseudoClass[]
 47 |   pseudoElement?: STPseudoElement
 48 |   leftCombinator?: STCombinator
 49 | }
 50 | 
 51 | export interface STPseudoClass {
 52 |   type: 'PseudoClass'
 53 |   value: string
 54 |   params: STSelector[]
 55 | }
 56 | 
 57 | export interface STPseudoElement {
 58 |   type: 'PseudoElement'
 59 |   value: string
 60 |   pseudoClass: STPseudoClass[]
 61 | }
 62 | 
 63 | export type STAttributeOperator = '=' | '~=' | '|=' | '^=' | '$=' | '*='
 64 | 
 65 | export interface STAttribute {
 66 |   type: 'Attribute'
 67 |   operator?: STAttributeOperator
 68 |   name: string
 69 |   value?: string
 70 |   insensitive: boolean
 71 | }
 72 | 
 73 | export interface STCombinator {
 74 |   type: 'Combinator'
 75 |   operator: string
 76 |   left: STSelector
 77 | }
 78 | 
 79 | /*
 80 |  * Used to print in the preview
 81 |  */
 82 | export interface STRuleForPrint {
 83 |   path: number[]
 84 |   selectors: string[]
 85 |   children: STDeclarationForPrint[]
 86 | }
 87 | 
 88 | export interface STDeclarationForPrint {
 89 |   path: number[]
 90 |   prop: string
 91 |   value: string
 92 | }
 93 | 
 94 | /**
 95 |  * Used to update ast
 96 |  */
 97 | export interface STDeclarationForAdd {
 98 |   prop: string
 99 |   value: string
100 |   important: boolean
101 | }
102 | 
103 | export interface STDeclarationForUpdate {
104 |   path: number[]
105 |   prop?: string
106 |   value?: string
107 |   important?: boolean
108 | }
109 | 


--------------------------------------------------------------------------------
/src/parser/template/modify.ts:
--------------------------------------------------------------------------------
  1 | import { TETemplate, TETextNode, TEChild, TEElement } from './types'
  2 | import { getNode } from './manipulate'
  3 | import {
  4 |   insertBefore,
  5 |   singleIndentStr,
  6 |   insertAfter,
  7 |   Modifier,
  8 |   empty,
  9 | } from '../modifier'
 10 | 
 11 | export function insertToTemplate(
 12 |   template: TETemplate,
 13 |   path: number[],
 14 |   value: string,
 15 | ): Modifier {
 16 |   const parentPath = path.slice(0, -1)
 17 |   const indent = inferTemplateIndentAt(template, parentPath)
 18 |   const target = getNode(template, path)
 19 |   if (target) {
 20 |     // If target path points an existing node, we can insert a new string before it.
 21 |     const post = '\n' + indent + singleIndentStr
 22 |     return insertBefore(target, value + post)
 23 |   }
 24 | 
 25 |   const index = path[path.length - 1]
 26 |   const last = getNode(template, parentPath.concat(index - 1))
 27 |   if (last) {
 28 |     // If target path points nothing, it indicates we will insert a new string
 29 |     // as the last element. If the current last node has indentation, we need
 30 |     // to add an extra indentation to align the children nodes and inserted one.
 31 |     //
 32 |     // ```
 33 |     // <div>
 34 |     //   <h1>Test</h1>
 35 |     // </div>
 36 |     // ```
 37 |     //
 38 |     // In the above case, the end tag has two spaces. If we want to insert a node
 39 |     // as the last child of `<div>` element, we will reuse the last text (indentation)
 40 |     // and add two spaces for indentation.
 41 |     //
 42 |     // ```
 43 |     // <div>
 44 |     //   <h1>Test</h1>
 45 |     //   <p>Hello</p>
 46 |     // </div>
 47 |     // ```
 48 |     //
 49 |     // But we should not add extra spaces if the end tag has no indentation. For example:
 50 |     //
 51 |     // ```
 52 |     // <div><strong>Test</strong></div>
 53 |     // ```
 54 |     //
 55 |     // In that case, we simply add a line break and appropriate indentation like:
 56 |     //
 57 |     // ```
 58 |     // <div><strong>Test</strong>
 59 |     //   <p>Hello</p>
 60 |     // </div>
 61 |     // ```
 62 |     const hasIndent = last.type === 'TextNode' && last.text.endsWith(indent)
 63 |     const pre = (hasIndent ? '' : '\n' + indent) + singleIndentStr
 64 |     const post = '\n' + indent
 65 |     return insertAfter(last, pre + value + post)
 66 |   }
 67 | 
 68 |   const parent = getNode(template, parentPath) as TEElement | undefined
 69 |   if (parent) {
 70 |     const pre = '\n' + indent + singleIndentStr
 71 |     const post = '\n' + indent
 72 |     return insertAfter(parent.startTag, pre + value + post)
 73 |   }
 74 | 
 75 |   return empty
 76 | }
 77 | 
 78 | function inferTemplateIndentAt(template: TETemplate, path: number[]): string {
 79 |   if (path.length === 0) {
 80 |     return ''
 81 |   }
 82 | 
 83 |   const parentPath = path.slice(0, -1)
 84 | 
 85 |   let node: TETextNode | undefined, iterating: TEChild | undefined
 86 |   for (let i = 0; (iterating = getNode(template, parentPath.concat(i))); i++) {
 87 |     if (iterating.type === 'TextNode') {
 88 |       node = iterating
 89 |       break
 90 |     }
 91 |   }
 92 | 
 93 |   if (!node) {
 94 |     return inferTemplateIndentAt(template, parentPath) + singleIndentStr
 95 |   }
 96 | 
 97 |   const match = /\n(\s+)/.exec(node.text)
 98 |   if (!match) {
 99 |     return ''
100 |   }
101 |   return match[1]
102 | }
103 | 


--------------------------------------------------------------------------------
/src/parser/template/types.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from '../modifier'
 2 | 
 3 | export type TEChild = TEElement | TETextNode | TEExpressionNode
 4 | 
 5 | interface TEBaseNode extends Range {
 6 |   type: string
 7 | }
 8 | 
 9 | export interface TETemplate extends TEBaseNode {
10 |   type: 'Template'
11 |   attrs: Record<string, TEAttribute>
12 |   children: TEChild[]
13 | }
14 | 
15 | export interface TEElement extends TEBaseNode {
16 |   type: 'Element'
17 |   path: number[]
18 |   name: string
19 |   startTag: TEStartTag
20 |   endTag?: TEEndTag
21 |   children: TEChild[]
22 | }
23 | 
24 | export interface TEStartTag extends TEBaseNode {
25 |   type: 'StartTag'
26 | 
27 |   // It simply maps attributes with the following rule:
28 |   // 1. Static attributes are mapped to `attrs`
29 |   // 2. Normal v-bind attributes are mapped to `props`
30 |   // 3. v-bind attributes having `prop` modifier are mapped to `domProps`
31 |   // 4. Other directives are in `directives`
32 |   // `attrs` and `props` may include `class` and `style` unlike Vue.js template compiler.
33 |   // Object style v-bind (v-bind="obj") is not supported yet. It will be in `directives`.
34 |   attrs: Record<string, TEAttribute>
35 |   props: Record<string, TEDirective>
36 |   domProps: Record<string, TEDirective>
37 |   directives: TEDirective[]
38 | 
39 |   selfClosing: boolean
40 | }
41 | 
42 | export interface TEEndTag extends TEBaseNode {
43 |   type: 'EndTag'
44 | }
45 | 
46 | export interface TETextNode extends TEBaseNode {
47 |   type: 'TextNode'
48 |   path: number[]
49 |   text: string
50 | }
51 | 
52 | export interface TEExpressionNode extends TEBaseNode {
53 |   type: 'ExpressionNode'
54 |   path: number[]
55 |   expression: string
56 | }
57 | 
58 | export interface TEAttribute extends TEBaseNode {
59 |   type: 'Attribute'
60 |   attrIndex: number
61 |   name: string
62 |   value?: string
63 | }
64 | 
65 | export interface TEDirective extends TEBaseNode {
66 |   type: 'Directive'
67 |   attrIndex: number
68 |   name: string
69 |   argument?: string
70 |   modifiers: Record<string, boolean>
71 |   expression?: string
72 |   value?: any
73 | }
74 | 
75 | export interface TEForDirective extends TEDirective {
76 |   name: 'for'
77 |   left: string[]
78 |   right?: string
79 | }
80 | 


--------------------------------------------------------------------------------
/src/parser/vue-file.ts:
--------------------------------------------------------------------------------
  1 | import { URL } from 'url'
  2 | import * as path from 'path'
  3 | import { parse } from '@vue/compiler-sfc'
  4 | import { parse as parseTemplate } from 'vue-eslint-parser'
  5 | import { parse as parseScript } from '@babel/parser'
  6 | import * as Babel from '@babel/types'
  7 | import postcssParse from 'postcss-safe-parser'
  8 | import hashsum from 'hash-sum'
  9 | import { TETemplate } from './template/types'
 10 | import { transformTemplate } from './template/transform'
 11 | import { resolveAsset as resolveTemplateAsset } from './template/manipulate'
 12 | import { Prop, Data, ChildComponent } from './script/types'
 13 | import {
 14 |   extractChildComponents,
 15 |   extractProps,
 16 |   extractData,
 17 | } from './script/manipulate'
 18 | import { STStyle } from './style/types'
 19 | import { resolveAsset as resolveStyleAsset } from './style/manipulate'
 20 | import { transformStyle } from './style/transform'
 21 | import { AssetResolver } from '../asset-resolver'
 22 | 
 23 | export interface VueFilePayload {
 24 |   uri: string
 25 |   template: TETemplate | undefined
 26 |   props: Prop[]
 27 |   data: Data[]
 28 |   childComponents: ChildComponent[]
 29 |   styles: STStyle[]
 30 |   scopeId: string
 31 | }
 32 | 
 33 | export interface VueFile {
 34 |   uri: URL
 35 |   name: string
 36 |   code: string
 37 |   template: TETemplate | undefined
 38 |   script: Babel.Program
 39 |   props: Prop[]
 40 |   data: Data[]
 41 |   childComponents: ChildComponent[]
 42 |   styles: STStyle[]
 43 | }
 44 | 
 45 | export function parseVueFile(code: string, uri: string): VueFile {
 46 |   const parsedUri = new URL(uri)
 47 |   const name = path.basename(parsedUri.pathname).replace(/\..+$/, '')
 48 | 
 49 |   const {
 50 |     descriptor: { script, styles },
 51 |   } = parse(code, { pad: 'space' })
 52 | 
 53 |   const { program: scriptBody } = parseScript(script ? script.content : '', {
 54 |     sourceType: 'module',
 55 |     plugins: ['typescript', 'objectRestSpread'],
 56 |   })
 57 | 
 58 |   const childComponents = extractChildComponents(
 59 |     scriptBody,
 60 |     uri,
 61 |     (childPath) => {
 62 |       const resolved = new URL(parsedUri.toString())
 63 |       const dirPath = path.dirname(resolved.pathname)
 64 |       resolved.pathname = path
 65 |         .resolve(dirPath, childPath)
 66 |         .split(path.sep)
 67 |         .join('/')
 68 |       return resolved.toString()
 69 |     },
 70 |   )
 71 | 
 72 |   const styleAsts = styles.map((s, i) => {
 73 |     return transformStyle(postcssParse(s.content), s.content, i)
 74 |   })
 75 | 
 76 |   return {
 77 |     uri: parsedUri,
 78 |     name,
 79 |     code,
 80 |     template: parseTemplateBlock(code),
 81 |     script: scriptBody,
 82 |     props: extractProps(scriptBody),
 83 |     data: extractData(scriptBody),
 84 |     childComponents,
 85 |     styles: styleAsts,
 86 |   }
 87 | }
 88 | 
 89 | export function vueFileToPayload(
 90 |   vueFile: VueFile,
 91 |   assetResolver: AssetResolver,
 92 | ): VueFilePayload {
 93 |   const scopeId = hashsum(vueFile.uri.toString())
 94 |   const basePath = path.dirname(vueFile.uri.pathname)
 95 | 
 96 |   return {
 97 |     uri: vueFile.uri.toString(),
 98 |     scopeId,
 99 |     template:
100 |       vueFile.template &&
101 |       resolveTemplateAsset(vueFile.template, basePath, assetResolver),
102 |     props: vueFile.props,
103 |     data: vueFile.data,
104 |     childComponents: vueFile.childComponents,
105 |     styles: vueFile.styles.map((s) =>
106 |       resolveStyleAsset(s, basePath, assetResolver),
107 |     ),
108 |   }
109 | }
110 | 
111 | function parseTemplateBlock(template: string): TETemplate | undefined {
112 |   // TODO: Use parsed SFCBlock after it is fixed that the issue vue-template-compiler
113 |   // breaks original source position by deindent
114 |   const code = template.replace(/<script.*>[\s\S]*<\/script>/, (matched) => {
115 |     return matched.replace(/./g, ' ')
116 |   })
117 | 
118 |   const { templateBody } = parseTemplate(code, {})
119 | 
120 |   return templateBody && transformTemplate(templateBody, code)
121 | }
122 | 
123 | export function resolveImportPath(from: VueFile, to: VueFile): string {
124 |   const fromPath = path.dirname(from.uri.pathname)
125 |   const toPath = to.uri.pathname
126 |   const componentPath = path.relative(fromPath, toPath)
127 |   return componentPath.startsWith('.') ? componentPath : './' + componentPath
128 | }
129 | 


--------------------------------------------------------------------------------
/src/repositories/editor-repository.ts:
--------------------------------------------------------------------------------
 1 | import { VueFile } from '../parser/vue-file'
 2 | import { getNode as getTemplateNode } from '../parser/template/manipulate'
 3 | import { getNode as getStyleNode } from '../parser/style/manipulate'
 4 | 
 5 | interface VueFileRepository {
 6 |   get(uri: string): VueFile | undefined
 7 | }
 8 | 
 9 | interface Highlight {
10 |   dispose(): void
11 | }
12 | 
13 | export interface EditorRepositoryOperations {
14 |   highlight(uri: string, ranges: Array<[number, number]>): Highlight | undefined
15 | }
16 | 
17 | export class EditorRepository {
18 |   private currentHighlight: Highlight | undefined
19 | 
20 |   constructor(
21 |     public activeDocumentUrl: string | undefined,
22 |     private vueFiles: VueFileRepository,
23 |     private operations: EditorRepositoryOperations,
24 |   ) {}
25 | 
26 |   selectNode(
27 |     uri: string,
28 |     templatePath: number[],
29 |     stylePaths: number[][],
30 |   ): void {
31 |     if (this.currentHighlight) {
32 |       this.currentHighlight.dispose()
33 |       this.currentHighlight = undefined
34 |     }
35 | 
36 |     const vueFile = this.vueFiles.get(uri)
37 |     if (!vueFile || !vueFile.template || templatePath.length === 0) {
38 |       return
39 |     }
40 | 
41 |     const element = getTemplateNode(vueFile.template, templatePath)
42 |     if (!element) {
43 |       return
44 |     }
45 | 
46 |     function notUndef<T>(n: T | undefined): n is T {
47 |       return n !== undefined
48 |     }
49 | 
50 |     const styleRules = stylePaths
51 |       .map((path) => getStyleNode(vueFile.styles, path))
52 |       .filter(notUndef)
53 | 
54 |     const highlightRanges = [element, ...styleRules].map((node) => {
55 |       return node.range
56 |     })
57 | 
58 |     this.currentHighlight = this.operations.highlight(uri, highlightRanges)
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/repositories/setting-repository.ts:
--------------------------------------------------------------------------------
 1 | export interface RawSetting {
 2 |   sharedStyles?: string[]
 3 | }
 4 | 
 5 | export interface SettingRepositoryFs {
 6 |   readFile(path: string): Promise<string>
 7 | }
 8 | 
 9 | export class SettingRepository {
10 |   sharedStylePaths!: string[]
11 | 
12 |   constructor(
13 |     rawSetting: RawSetting,
14 |     private fs: SettingRepositoryFs,
15 |   ) {
16 |     this.updateSetting(rawSetting)
17 |   }
18 | 
19 |   updateSetting(rawSetting: RawSetting): void {
20 |     this.sharedStylePaths = rawSetting.sharedStyles || []
21 |   }
22 | 
23 |   async readSharedStyle(): Promise<string> {
24 |     const styles = await Promise.all(
25 |       this.sharedStylePaths.map((path) => this.fs.readFile(path)),
26 |     )
27 |     return styles.join('\n')
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/server/main.ts:
--------------------------------------------------------------------------------
  1 | import * as path from 'path'
  2 | import { promises as fs } from 'fs'
  3 | import * as http from 'http'
  4 | import WebSocket from 'ws'
  5 | import { AssetResolver } from '../asset-resolver'
  6 | 
  7 | function readContent(file: string): Promise<string> {
  8 |   return fs.readFile(path.join(__dirname, '..', file), 'utf8')
  9 | }
 10 | 
 11 | export function startStaticServer(assetResolver: AssetResolver): http.Server {
 12 |   const server = http.createServer((req, res) => {
 13 |     if (req.headers.host && !/^localhost(:\d+)?$/.test(req.headers.host)) {
 14 |       res.statusCode = 403
 15 |       res.end()
 16 |       return
 17 |     }
 18 | 
 19 |     if (req.url) {
 20 |       const assetPath = assetResolver.urlToPath(req.url)
 21 |       if (assetPath) {
 22 |         return fs
 23 |           .readFile(assetPath)
 24 |           .then((data) => {
 25 |             res.setHeader('Content-Type', inferMimeType(assetPath))
 26 |             res.end(data)
 27 |           })
 28 |           .catch((err) => {
 29 |             if (!err) {
 30 |               res.statusCode = 404
 31 |               res.end()
 32 |             } else {
 33 |               res.statusCode = 500
 34 |               res.end(err.message)
 35 |             }
 36 |           })
 37 |       }
 38 | 
 39 |       const filePath = req.url === '/' ? '/index.html' : req.url
 40 |       if (allowedPath(filePath)) {
 41 |         return readContent(filePath)
 42 |           .then((content) => {
 43 |             res.setHeader('Content-Type', inferMimeType(filePath))
 44 |             res.end(content)
 45 |           })
 46 |           .catch((err) => {
 47 |             if (!err) {
 48 |               res.statusCode = 404
 49 |               res.end()
 50 |             } else {
 51 |               res.statusCode = 500
 52 |               res.end(err.message)
 53 |             }
 54 |           })
 55 |       }
 56 |     }
 57 | 
 58 |     res.statusCode = 404
 59 |     res.end()
 60 |   })
 61 | 
 62 |   const port = process.env.DEV ? 50001 : 0
 63 |   server.listen(port)
 64 | 
 65 |   return server
 66 | }
 67 | 
 68 | function allowedPath(path: string): boolean {
 69 |   return path === '/index.html' || path.startsWith('/app/')
 70 | }
 71 | 
 72 | function inferMimeType(filePath: string): string {
 73 |   const ext = path.extname(filePath)
 74 |   switch (ext) {
 75 |     case '.html':
 76 |       return 'text/html'
 77 |     case '.css':
 78 |       return 'text/css'
 79 |     case '.js':
 80 |       return 'application/javascript'
 81 |     case '.png':
 82 |       return 'image/png'
 83 |     case '.jpg':
 84 |       return 'image/jpeg'
 85 |     case '.gif':
 86 |       return 'image/gif'
 87 |     case '.svg':
 88 |       return 'image/svg+xml'
 89 |     case '.woff':
 90 |       return 'font/woff'
 91 |     case '.woff2':
 92 |       return 'font/woff2'
 93 |     default:
 94 |       return 'application/octet-stream'
 95 |   }
 96 | }
 97 | 
 98 | export function startWebSocketServer(http: http.Server): WebSocket.Server {
 99 |   return new WebSocket.Server({
100 |     host: 'localhost',
101 |     server: http,
102 |     path: '/api',
103 |   })
104 | }
105 | 


--------------------------------------------------------------------------------
/src/server/mutator.ts:
--------------------------------------------------------------------------------
 1 | import { VueFileRepository } from '../repositories/vue-file-repository'
 2 | import { EditorRepository } from '../repositories/editor-repository'
 3 | import {
 4 |   STDeclarationForAdd,
 5 |   STDeclarationForUpdate,
 6 | } from '../parser/style/types'
 7 | 
 8 | interface SelectNodePayload {
 9 |   uri: string
10 |   templatePath: number[]
11 |   stylePaths: number[][]
12 | }
13 | 
14 | interface AddNodePayload {
15 |   uri: string
16 |   insertNodeUri: string
17 |   path: number[]
18 | }
19 | 
20 | interface AddDeclarationPayload {
21 |   uri: string
22 |   declaration: STDeclarationForAdd
23 |   path: number[]
24 | }
25 | 
26 | interface RemoveDeclarationPayload {
27 |   uri: string
28 |   path: number[]
29 | }
30 | 
31 | interface UpdateDeclarationPayload {
32 |   uri: string
33 |   declaration: STDeclarationForUpdate
34 | }
35 | 
36 | export const mutator = (
37 |   vueFiles: VueFileRepository,
38 |   editor: EditorRepository,
39 | ) => ({
40 |   selectNode({ uri, templatePath, stylePaths }: SelectNodePayload): void {
41 |     editor.selectNode(uri, templatePath, stylePaths)
42 |   },
43 | 
44 |   addNode({ uri, insertNodeUri, path }: AddNodePayload): void {
45 |     vueFiles.addTemplateNode(uri, insertNodeUri, path)
46 |   },
47 | 
48 |   addDeclaration({ uri, declaration, path }: AddDeclarationPayload): void {
49 |     vueFiles.addStyleDeclaration(uri, declaration, path)
50 |   },
51 | 
52 |   removeDeclaration({ uri, path }: RemoveDeclarationPayload): void {
53 |     vueFiles.removeStyleDeclaration(uri, path)
54 |   },
55 | 
56 |   updateDeclaration({ uri, declaration }: UpdateDeclarationPayload): void {
57 |     vueFiles.updateStyleDeclaration(uri, declaration)
58 |   },
59 | })
60 | 
61 | export type MutatorType = ReturnType<typeof mutator>
62 | 


--------------------------------------------------------------------------------
/src/server/resolver.ts:
--------------------------------------------------------------------------------
 1 | import { VueFileRepository } from '../repositories/vue-file-repository'
 2 | import { SettingRepository } from '../repositories/setting-repository'
 3 | import { EditorRepository } from '../repositories/editor-repository'
 4 | import { VueFilePayload, vueFileToPayload } from '../parser/vue-file'
 5 | import { AssetResolver } from '../asset-resolver'
 6 | 
 7 | interface InitialData {
 8 |   vueFiles: Record<string, VueFilePayload>
 9 |   sharedStyle: string
10 |   activeUri: string | undefined
11 | }
12 | 
13 | export const resolver = (
14 |   vueFiles: VueFileRepository,
15 |   setting: SettingRepository,
16 |   editor: EditorRepository,
17 |   assetResolver: AssetResolver,
18 | ) => ({
19 |   async init(): Promise<InitialData> {
20 |     return {
21 |       vueFiles: vueFiles.map((file) => vueFileToPayload(file, assetResolver)),
22 |       sharedStyle: await setting.readSharedStyle(),
23 |       activeUri: editor.activeDocumentUrl,
24 |     }
25 |   },
26 | })
27 | 
28 | export type ResolverType = ReturnType<typeof resolver>
29 | 


--------------------------------------------------------------------------------
/src/server/subject-type.ts:
--------------------------------------------------------------------------------
 1 | import { VueFilePayload } from '../parser/vue-file'
 2 | 
 3 | export interface SubjectType {
 4 |   initProject: {
 5 |     vueFiles: Record<string, VueFilePayload>
 6 |   }
 7 |   initSharedStyle: {
 8 |     style: string
 9 |   }
10 |   changeActiveDocument: {
11 |     uri: string
12 |   }
13 |   saveDocument: {
14 |     vueFile: VueFilePayload
15 |   }
16 |   removeDocument: {
17 |     uri: string
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/types/hash-sum.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'hash-sum' {
2 |   function sum(value: any): string
3 |   export default sum
4 | }
5 | 


--------------------------------------------------------------------------------
/src/types/postcss-safe-parser.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'postcss-safe-parser' {
2 |   import { parse } from 'postcss'
3 |   const parser: typeof parse
4 |   export default parser
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/xml-name-validator.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'xml-name-validator' {
2 |   export function name(name: string): boolean
3 |   export function qname(qname: string): boolean
4 | }
5 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export function assert(
 2 |   condition: unknown,
 3 |   message?: string,
 4 | ): asserts condition {
 5 |   if (!condition) {
 6 |     throw new Error(message)
 7 |   }
 8 | }
 9 | 
10 | export function mapValues<T, R>(
11 |   record: Record<string, T>,
12 |   fn: (value: T, key: string) => R,
13 | ): Record<string, R> {
14 |   const res: Record<string, R> = {}
15 |   Object.keys(record).forEach((key) => {
16 |     res[key] = fn(record[key], key)
17 |   })
18 |   return res
19 | }
20 | 
21 | export function takeWhile<T, R extends T>(
22 |   list: T[],
23 |   fn: (value: T) => value is R,
24 | ): R[]
25 | export function takeWhile<T>(list: T[], fn: (value: T) => boolean): T[]
26 | export function takeWhile<T>(list: T[], fn: (value: T) => boolean): T[] {
27 |   const res = []
28 |   for (const item of list) {
29 |     if (fn(item)) {
30 |       res.push(item)
31 |     } else {
32 |       return res
33 |     }
34 |   }
35 |   return res
36 | }
37 | 
38 | export function dropWhile<T>(list: T[], fn: (value: T) => boolean): T[] {
39 |   const skip = takeWhile(list, fn)
40 |   return list.slice(skip.length)
41 | }
42 | 
43 | export function flatten<T>(list: (T | T[])[]): T[] {
44 |   return list.reduce<T[]>((acc, item) => {
45 |     return acc.concat(item)
46 |   }, [])
47 | }
48 | 
49 | export function clone<T>(value: T, changes: any = {}): T {
50 |   return {
51 |     ...(value as any),
52 |     ...changes,
53 |   }
54 | }
55 | 
56 | export function range(min: number, max: number): number[] {
57 |   return Array.apply(null, Array(max - min + 1)).map(
58 |     (_: any, i: number) => min + i,
59 |   )
60 | }
61 | 
62 | export function minmax(min: number, n: number, max: number): number {
63 |   return Math.min(max, Math.max(min, n))
64 | }
65 | 
66 | export function isObject(value: any): boolean {
67 |   return value !== null && typeof value === 'object'
68 | }
69 | 
70 | export function unquote(str: string): string {
71 |   const quotes = str[0] + str[str.length - 1]
72 |   if (quotes === "''" || quotes === '""') {
73 |     return str.slice(1, -1)
74 |   } else {
75 |     return str
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/view/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PageMain />
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent } from 'vue'
 7 | import PageMain from './components/PageMain.vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'App',
11 | 
12 |   components: {
13 |     PageMain,
14 |   },
15 | })
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/view/communication/client.ts:
--------------------------------------------------------------------------------
  1 | import { Resolver, Mutator } from '../../infra/communication/types'
  2 | import { assert } from '../../utils'
  3 | 
  4 | type Arguments<F extends Function> = F extends (...args: infer T) => any
  5 |   ? T
  6 |   : never
  7 | 
  8 | type Unwrap<T> = T extends Promise<infer R> ? R : T
  9 | 
 10 | export type CommunicationClientObserver<T extends Record<string, any>> = {
 11 |   [K in keyof T]: (data: T[K]) => void
 12 | }
 13 | 
 14 | export interface CommunicationClientConfig {
 15 |   ws: WebSocketClient
 16 | }
 17 | 
 18 | export interface WebSocketClient {
 19 |   addEventListener(event: 'open', fn: () => void): void
 20 |   addEventListener(event: 'message', fn: (event: MessageEvent) => void): void
 21 |   removeEventListener(event: 'message', fn: (event: MessageEvent) => void): void
 22 |   send(payload: string): void
 23 | }
 24 | 
 25 | export class CommunicationClient<
 26 |   R extends Resolver,
 27 |   M extends Mutator,
 28 |   S extends Record<string, any>,
 29 | > {
 30 |   private ws: WebSocketClient
 31 |   private nextRequestId = 1
 32 |   private observers: Set<CommunicationClientObserver<S>> = new Set()
 33 | 
 34 |   private onEvent = (event: MessageEvent) => {
 35 |     const data = JSON.parse(event.data)
 36 | 
 37 |     assert(typeof data.type === 'string')
 38 |     const [type, method] = data.type.split(':')
 39 | 
 40 |     if (type !== 'subject') {
 41 |       return
 42 |     }
 43 | 
 44 |     this.observers.forEach((ob) => {
 45 |       const f = ob[method]
 46 |       if (f) {
 47 |         f(data.data)
 48 |       }
 49 |     })
 50 |   }
 51 | 
 52 |   constructor(config: CommunicationClientConfig) {
 53 |     this.ws = config.ws
 54 | 
 55 |     // Observe the events from subject
 56 |     this.ws.addEventListener('message', this.onEvent)
 57 |   }
 58 | 
 59 |   onReady(fn: () => void): void {
 60 |     this.ws.addEventListener('open', fn)
 61 |   }
 62 | 
 63 |   resolve<K extends keyof R & string>(
 64 |     key: K,
 65 |     ...args: Arguments<R[K]>
 66 |   ): Promise<Unwrap<ReturnType<R[K]>>> {
 67 |     return this.genericRequest('resolver', key, args, this.nextRequestId++)
 68 |   }
 69 | 
 70 |   mutate<K extends keyof M & string>(
 71 |     key: K,
 72 |     ...args: Arguments<M[K]>
 73 |   ): Promise<Unwrap<ReturnType<M[K]>>> {
 74 |     return this.genericRequest('mutator', key, args, this.nextRequestId++)
 75 |   }
 76 | 
 77 |   observe(observer: CommunicationClientObserver<S>): () => void {
 78 |     this.observers.add(observer)
 79 |     return () => {
 80 |       this.observers.delete(observer)
 81 |     }
 82 |   }
 83 | 
 84 |   dispose(): void {
 85 |     this.ws.removeEventListener('message', this.onEvent)
 86 |   }
 87 | 
 88 |   private genericRequest<
 89 |     T extends Record<string, (...args: any[]) => any>,
 90 |     K extends keyof T & string,
 91 |   >(
 92 |     type: string,
 93 |     key: K,
 94 |     args: Arguments<T[K]>,
 95 |     requestId: number,
 96 |   ): Promise<Unwrap<ReturnType<T[K]>>> {
 97 |     return new Promise((resolve) => {
 98 |       const combinedType = type + ':' + key
 99 | 
100 |       const receive = (event: MessageEvent): void => {
101 |         const data = JSON.parse(event.data)
102 | 
103 |         assert(typeof data.type === 'string')
104 |         if (data.type !== combinedType) {
105 |           return
106 |         }
107 | 
108 |         assert('requestId' in data)
109 | 
110 |         if (data.requestId === requestId) {
111 |           resolve(data.data)
112 |           this.ws.removeEventListener('message', receive)
113 |         }
114 |       }
115 | 
116 |       this.ws.send(
117 |         JSON.stringify({
118 |           type: combinedType,
119 |           args,
120 |           requestId,
121 |         }),
122 |       )
123 | 
124 |       this.ws.addEventListener('message', receive)
125 |     })
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------
/src/view/components/BaseIcon.vue:
--------------------------------------------------------------------------------
 1 | <!-- See also: view/load-icons.ts -->
 2 | <template>
 3 |   <svg class="base-icon"><use :href="'#ic_' + icon + '_24px'" /></svg>
 4 | </template>
 5 | 
 6 | <script lang="ts">
 7 | import { defineComponent } from 'vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'BaseIcon',
11 | 
12 |   props: {
13 |     icon: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |   },
18 | })
19 | </script>
20 | 
21 | <style scoped>
22 | .base-icon {
23 |   display: inline-block;
24 |   height: 1em;
25 |   width: 1em;
26 |   fill: currentColor;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/view/components/ComponentCatalog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="catalog-list">
 3 |     <li
 4 |       v-for="c in components"
 5 |       :key="c.uri"
 6 |       class="catalog-item"
 7 |       draggable="true"
 8 |       @dragstart="onDragStart($event, c)"
 9 |       @dragend="onDragEnd()"
10 |     >
11 |       <div class="catalog-preview">
12 |         <ComponentCatalogPreview :component="c" />
13 |       </div>
14 |       <p class="catalog-component-name">{{ c.displayName }}</p>
15 |     </li>
16 |   </ul>
17 | </template>
18 | 
19 | <script lang="ts">
20 | import { defineComponent } from 'vue'
21 | import ComponentCatalogPreview from './ComponentCatalogPreview.vue'
22 | import { ScopedDocument } from '../store/modules/project/types'
23 | 
24 | export default defineComponent({
25 |   name: 'ComponentCatalog',
26 | 
27 |   components: {
28 |     ComponentCatalogPreview,
29 |   },
30 | 
31 |   props: {
32 |     components: {
33 |       type: Array as () => ScopedDocument[],
34 |       required: true,
35 |     },
36 |   },
37 | 
38 |   emits: ['dragstart', 'dragend'],
39 | 
40 |   methods: {
41 |     onDragStart(event: DragEvent, component: ScopedDocument): void {
42 |       const dt = event.dataTransfer
43 |       if (dt) {
44 |         dt.effectAllowed = 'copy'
45 |         this.$emit('dragstart', component.uri)
46 |       }
47 |     },
48 | 
49 |     onDragEnd(): void {
50 |       this.$emit('dragend')
51 |     },
52 |   },
53 | })
54 | </script>
55 | 
56 | <style scoped>
57 | .catalog-list {
58 |   display: flex;
59 |   flex-wrap: wrap;
60 |   margin: 0;
61 |   padding: 7.5px;
62 |   list-style: none;
63 | }
64 | 
65 | .catalog-item {
66 |   padding: 7.5px;
67 |   width: 50%;
68 |   box-sizing: border-box;
69 |   position: relative;
70 | }
71 | 
72 | .catalog-item:first-child .catalog-item-inner {
73 |   border-top-width: 0;
74 | }
75 | 
76 | .catalog-preview {
77 |   width: 100%;
78 | }
79 | 
80 | .catalog-component-name {
81 |   margin-top: 5px;
82 |   margin-bottom: 0;
83 |   font-size: var(--vd-font-size);
84 |   text-align: center;
85 |   word-wrap: break-word;
86 |   overflow-wrap: break-word;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/view/components/ComponentCatalogPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="preview-viewport">
 3 |     <div class="preview-content">
 4 |       <VueComponent
 5 |         :uri="component.uri"
 6 |         :template="component.template"
 7 |         :styles="component.styleCode"
 8 |         :scope="scope"
 9 |         :child-components="component.childComponents"
10 |       />
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import { defineComponent } from 'vue'
17 | import VueComponent from './VueComponent.vue'
18 | import { ScopedDocument, DocumentScope } from '../store/modules/project/types'
19 | 
20 | export default defineComponent({
21 |   name: 'ComponentCatalogPreview',
22 | 
23 |   components: {
24 |     VueComponent,
25 |   },
26 | 
27 |   props: {
28 |     component: {
29 |       type: Object as () => ScopedDocument,
30 |       required: true,
31 |     },
32 |   },
33 | 
34 |   computed: {
35 |     scope(): DocumentScope {
36 |       const scope: DocumentScope = { props: {}, data: {} }
37 | 
38 |       this.component.props.forEach((prop) => {
39 |         scope.props[prop.name] = {
40 |           type: prop.type,
41 |           value: prop.default,
42 |         }
43 |       })
44 | 
45 |       this.component.data.forEach((d) => {
46 |         scope.data[d.name] = {
47 |           type: null,
48 |           value: d.default,
49 |         }
50 |       })
51 | 
52 |       return scope
53 |     },
54 |   },
55 | })
56 | </script>
57 | 
58 | <style scoped>
59 | .preview-viewport {
60 |   overflow: hidden;
61 |   position: relative;
62 |   box-sizing: border-box;
63 |   border: 1px solid var(--vd-border-color);
64 |   background-color: #fff;
65 |   height: 0;
66 |   width: 100%;
67 |   padding-bottom: 100%;
68 | }
69 | 
70 | .preview-content {
71 |   position: absolute;
72 |   top: 0;
73 |   left: 0;
74 |   width: 200%;
75 |   height: 200%;
76 |   transform: scale(0.5);
77 |   transform-origin: left top;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/view/components/ContainerVueComponent.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { Comment, defineComponent, h, VNode } from 'vue'
 3 | import VueComponent from './VueComponent.vue'
 4 | import { ScopedDocument, DocumentScope } from '../store/modules/project/types'
 5 | import { mapper } from '../store'
 6 | 
 7 | const projectMapper = mapper.module('project')
 8 | 
 9 | export default defineComponent({
10 |   name: 'ContainerVueComponent',
11 | 
12 |   props: {
13 |     uri: {
14 |       type: String,
15 |       required: true,
16 |     },
17 | 
18 |     propsData: {
19 |       type: Object as () => Record<string, any>,
20 |       required: true,
21 |     },
22 |   },
23 | 
24 |   computed: {
25 |     ...projectMapper.mapState({
26 |       scopes: 'documentScopes',
27 |     }),
28 | 
29 |     ...projectMapper.mapGetters({
30 |       documents: 'scopedDocuments',
31 |     }),
32 | 
33 |     document(): ScopedDocument | undefined {
34 |       return this.documents[this.uri]
35 |     },
36 | 
37 |     scope(): DocumentScope | undefined {
38 |       return this.scopes[this.uri]
39 |     },
40 |   },
41 | 
42 |   render(): VNode {
43 |     if (!this.document) return h(Comment)
44 | 
45 |     return h(
46 |       VueComponent,
47 |       {
48 |         uri: this.uri,
49 |         template: this.document.template,
50 |         scope: this.scope,
51 |         childComponents: this.document.childComponents,
52 |         styles: this.document.styleCode,
53 |         propsData: this.propsData,
54 |       },
55 |       this.$slots,
56 |     )
57 |   },
58 | })
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/view/components/ContainerVueNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <VueNode
 3 |     v-bind="$props"
 4 |     :selectable="currentUri === uri"
 5 |     :selected="selected"
 6 |   />
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { defineComponent } from 'vue'
11 | import VueNode from './VueNode.vue'
12 | import { TEElement } from '../../parser/template/types'
13 | import { DefaultValue, ChildComponent } from '../../parser/script/types'
14 | import { mapper } from '../store'
15 | 
16 | const projectMapper = mapper.module('project')
17 | 
18 | export default defineComponent({
19 |   name: 'ContainerVueNode',
20 | 
21 |   props: {
22 |     uri: {
23 |       type: String,
24 |       required: true,
25 |     },
26 | 
27 |     data: {
28 |       type: Object as { (): TEElement },
29 |       required: true,
30 |     },
31 | 
32 |     scope: {
33 |       type: Object as { (): Record<string, DefaultValue> },
34 |       required: true,
35 |     },
36 | 
37 |     childComponents: {
38 |       type: Array as { (): ChildComponent[] },
39 |       required: true,
40 |     },
41 | 
42 |     slots: {
43 |       type: Object as { (): Record<string, any> },
44 |       required: true,
45 |     },
46 |   },
47 | 
48 |   computed: {
49 |     ...projectMapper.mapState(['selectedPath', 'currentUri']),
50 | 
51 |     selected(): boolean {
52 |       const path = this.data.path
53 | 
54 |       if (path.length !== this.selectedPath.length) {
55 |         return false
56 |       }
57 | 
58 |       return path.reduce((acc, p, i) => {
59 |         return acc && p === this.selectedPath[i]
60 |       }, true)
61 |     },
62 |   },
63 | 
64 |   beforeCreate() {
65 |     this.$options.components ??= {}
66 |     this.$options.components.VueNode = VueNode
67 |   },
68 | })
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/view/components/InputComposition.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input
 3 |     v-bind="attrs"
 4 |     :value="value"
 5 |     @input="$emit('update:value', ($event.target as HTMLInputElement).value)"
 6 |     @compositionstart="compositing = true"
 7 |     @compositionend="compositing = false"
 8 |   />
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { defineComponent } from 'vue'
13 | import { mapValues } from '../../utils'
14 | 
15 | export default defineComponent({
16 |   name: 'InputComposition',
17 |   inheritAttrs: false,
18 | 
19 |   props: {
20 |     value: {
21 |       type: String,
22 |       required: true,
23 |     },
24 |   },
25 | 
26 |   data() {
27 |     return {
28 |       compositing: false,
29 |     }
30 |   },
31 | 
32 |   computed: {
33 |     attrs(): Record<string, unknown> {
34 |       const convert = (value: unknown, key: string): unknown => {
35 |         if (!/^on[A-Z1-9]/.test(key)) {
36 |           return value
37 |         }
38 | 
39 |         if (!Array.isArray(value)) {
40 |           return convert([value], key)
41 |         }
42 | 
43 |         return value.map((f) => {
44 |           return (event: Event) => {
45 |             const isKeyEvent = /^key/.test(event.type)
46 |             if (isKeyEvent && this.compositing) {
47 |               return
48 |             }
49 | 
50 |             const value = (event.target as HTMLInputElement).value
51 |             f(value, event)
52 |           }
53 |         })
54 |       }
55 | 
56 |       return mapValues(this.$attrs, convert)
57 |     },
58 |   },
59 | })
60 | </script>
61 | 


--------------------------------------------------------------------------------
/src/view/components/RendererGuide.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="guide" :style="wrapperStyle" class="renderer-guide">
  3 |     <!-- <div class="renderer-guide-margin" :style="marginStyle" />
  4 |     <div class="renderer-guide-border" :style="borderStyle" />
  5 |     <div class="renderer-guide-padding" :style="paddingStyle" /> -->
  6 |     <div class="renderer-guide-select" />
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script lang="ts">
 11 | import { defineComponent } from 'vue'
 12 | import { mapper } from '../store'
 13 | 
 14 | const guideMapper = mapper.module('guide')
 15 | 
 16 | export default defineComponent({
 17 |   name: 'RendererGuide',
 18 | 
 19 |   computed: {
 20 |     ...guideMapper.mapGetters({
 21 |       guide: 'scaledTarget',
 22 |     }),
 23 | 
 24 |     wrapperStyle(): Record<string, string> {
 25 |       const { guide } = this
 26 |       if (!guide) return {}
 27 | 
 28 |       return {
 29 |         left: guide.left + 'px',
 30 |         top: guide.top + 'px',
 31 |         width: guide.width + 'px',
 32 |         height: guide.height + 'px',
 33 |       }
 34 |     },
 35 | 
 36 |     marginStyle(): Record<string, string> {
 37 |       if (!this.guide) return {}
 38 | 
 39 |       const { margin } = this.guide
 40 |       return {
 41 |         top: -margin.top + 'px',
 42 |         bottom: -margin.bottom + 'px',
 43 |         left: -margin.left + 'px',
 44 |         right: -margin.right + 'px',
 45 |         borderTopWidth: margin.top + 'px',
 46 |         borderBottomWidth: margin.bottom + 'px',
 47 |         borderLeftWidth: margin.left + 'px',
 48 |         borderRightWidth: margin.right + 'px',
 49 |       }
 50 |     },
 51 | 
 52 |     borderStyle(): Record<string, string> {
 53 |       if (!this.guide) return {}
 54 | 
 55 |       const { border } = this.guide
 56 |       return {
 57 |         borderTopWidth: border.top + 'px',
 58 |         borderBottomWidth: border.bottom + 'px',
 59 |         borderLeftWidth: border.left + 'px',
 60 |         borderRightWidth: border.right + 'px',
 61 |       }
 62 |     },
 63 | 
 64 |     paddingStyle(): Record<string, string> {
 65 |       if (!this.guide) return {}
 66 | 
 67 |       const { border, padding } = this.guide
 68 |       return {
 69 |         top: border.top + 'px',
 70 |         bottom: border.bottom + 'px',
 71 |         left: border.left + 'px',
 72 |         right: border.right + 'px',
 73 |         borderTopWidth: padding.top + 'px',
 74 |         borderBottomWidth: padding.bottom + 'px',
 75 |         borderLeftWidth: padding.left + 'px',
 76 |         borderRightWidth: padding.right + 'px',
 77 |       }
 78 |     },
 79 |   },
 80 | })
 81 | </script>
 82 | 
 83 | <style scoped>
 84 | .renderer-guide {
 85 |   position: absolute;
 86 |   pointer-events: none;
 87 | }
 88 | 
 89 | .renderer-guide-margin,
 90 | .renderer-guide-border,
 91 | .renderer-guide-padding,
 92 | .renderer-guide-select {
 93 |   position: absolute;
 94 |   top: 0;
 95 |   bottom: 0;
 96 |   left: 0;
 97 |   right: 0;
 98 |   border-style: solid;
 99 | }
100 | 
101 | .renderer-guide-margin {
102 |   border-color: var(--vd-color-guide-margin);
103 | }
104 | 
105 | .renderer-guide-border {
106 |   border-color: var(--vd-color-guide-border);
107 | }
108 | 
109 | .renderer-guide-padding {
110 |   border-color: var(--vd-color-guide-padding);
111 | }
112 | 
113 | .renderer-guide-select {
114 |   border: 1px solid var(--vd-color-selected-border);
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/view/components/ScopeInformation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="information">
  3 |     <section class="information-group">
  4 |       <h2 class="information-title">Props</h2>
  5 |       <ul v-if="hasProps" class="information-list">
  6 |         <li
  7 |           v-for="(prop, name) in scope?.props"
  8 |           :key="name"
  9 |           class="information-list-item"
 10 |         >
 11 |           <InputJson
 12 |             :field="{ name, value: prop.value }"
 13 |             @change="updateProp"
 14 |           />
 15 |         </li>
 16 |       </ul>
 17 |       <div v-else><slot name="not-found-prop" /></div>
 18 |     </section>
 19 | 
 20 |     <section class="information-group">
 21 |       <h2 class="information-title">Data</h2>
 22 |       <ul v-if="hasData" class="information-list">
 23 |         <li
 24 |           v-for="(d, name) in scope?.data"
 25 |           :key="name"
 26 |           class="information-list-item"
 27 |         >
 28 |           <InputJson :field="{ name, value: d.value }" @change="updateData" />
 29 |         </li>
 30 |       </ul>
 31 |       <div v-else><slot name="not-found-data" /></div>
 32 |     </section>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import { defineComponent } from 'vue'
 38 | import InputJson from './InputJson.vue'
 39 | import { DocumentScope } from '../store/modules/project/types'
 40 | 
 41 | export default defineComponent({
 42 |   name: 'ScopeInformation',
 43 | 
 44 |   components: {
 45 |     InputJson,
 46 |   },
 47 | 
 48 |   props: {
 49 |     scope: {
 50 |       type: Object as () => DocumentScope,
 51 |     },
 52 |   },
 53 | 
 54 |   computed: {
 55 |     hasProps(): boolean {
 56 |       if (!this.scope) {
 57 |         return false
 58 |       }
 59 |       return Object.keys(this.scope.props).length > 0
 60 |     },
 61 | 
 62 |     hasData(): boolean {
 63 |       if (!this.scope) {
 64 |         return false
 65 |       }
 66 |       return Object.keys(this.scope.data).length > 0
 67 |     },
 68 |   },
 69 | 
 70 |   methods: {
 71 |     updateProp({ name, value }: { name: string; value: any }): void {
 72 |       this.$emit('update-prop', {
 73 |         name,
 74 |         value,
 75 |       })
 76 |     },
 77 | 
 78 |     updateData({ name, value }: { name: string; value: any }): void {
 79 |       this.$emit('update-data', {
 80 |         name,
 81 |         value,
 82 |       })
 83 |     },
 84 |   },
 85 | })
 86 | </script>
 87 | 
 88 | <style scoped>
 89 | .information {
 90 |   overflow-y: auto;
 91 |   max-height: 100%;
 92 |   padding: 13px 15px;
 93 | }
 94 | 
 95 | .information-group:not(:first-child) {
 96 |   margin-top: 16px;
 97 | }
 98 | 
 99 | .information-title {
100 |   margin-top: 0;
101 |   margin-bottom: 6px;
102 |   font-weight: bold;
103 |   font-size: inherit;
104 | }
105 | 
106 | .information-list {
107 |   margin: 0;
108 |   padding: 0;
109 |   list-style: none;
110 | }
111 | 
112 | .information-list-item {
113 |   margin-top: 8px;
114 | }
115 | 
116 | .information-list-item:first-child {
117 |   margin-top: 0;
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/view/components/StyleDeclaration.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="style-declaration">
  3 |     <span class="style-declaration-prop">
  4 |       <StyleValue
  5 |         :auto-focus="autoFocus === 'prop'"
  6 |         :value="prop"
  7 |         class="style-declaration-prop-text"
  8 |         @input-start="$emit('input-start:prop')"
  9 |         @input="inputProp"
 10 |         @input-end="finishInputProp"
 11 |       />
 12 |     </span>
 13 |     <span class="style-declaration-value">
 14 |       <StyleValue
 15 |         :auto-focus="autoFocus === 'value'"
 16 |         :value="value"
 17 |         @input-start="$emit('input-start:value')"
 18 |         @input="inputValue"
 19 |         @input-end="finishInputValue"
 20 |       />
 21 |     </span>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script lang="ts">
 26 | import { defineComponent } from 'vue'
 27 | import StyleValue from './StyleValue.vue'
 28 | 
 29 | export default defineComponent({
 30 |   name: 'StyleDeclaration',
 31 | 
 32 |   components: {
 33 |     StyleValue,
 34 |   },
 35 | 
 36 |   props: {
 37 |     prop: {
 38 |       type: String,
 39 |       required: true,
 40 |     },
 41 | 
 42 |     value: {
 43 |       type: String,
 44 |       required: true,
 45 |     },
 46 | 
 47 |     autoFocus: {
 48 |       type: String,
 49 |       default: null,
 50 |       validator(value: string) {
 51 |         return value === 'prop' || value === 'value'
 52 |       },
 53 |     },
 54 |   },
 55 | 
 56 |   methods: {
 57 |     inputProp(prop: string): void {
 58 |       this.$emit('update:prop', prop)
 59 |     },
 60 | 
 61 |     inputValue(value: string): void {
 62 |       this.$emit('update:value', value)
 63 |     },
 64 | 
 65 |     finishInputProp(
 66 |       rawProp: string,
 67 |       meta: { reason: string; shiftKey: boolean },
 68 |     ): void {
 69 |       this.$emit('input-end:prop', meta)
 70 | 
 71 |       const prop = rawProp.trim()
 72 |       if (!prop) {
 73 |         this.$emit('remove')
 74 |       } else {
 75 |         this.inputProp(prop)
 76 |       }
 77 |     },
 78 | 
 79 |     finishInputValue(
 80 |       rawValue: string,
 81 |       meta: { reason: string; shiftKey: boolean },
 82 |     ): void {
 83 |       this.$emit('input-end:value', meta)
 84 | 
 85 |       const value = rawValue.trim()
 86 |       if (!value) {
 87 |         this.$emit('remove')
 88 |       } else {
 89 |         this.inputValue(value)
 90 |       }
 91 |     },
 92 |   },
 93 | })
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | .style-declaration-prop::after {
 98 |   content: ':';
 99 |   margin-right: 0.3em;
100 | }
101 | 
102 | .style-declaration-value::after {
103 |   content: ';';
104 | }
105 | 
106 | .style-declaration-prop-text {
107 |   color: var(--vd-color-accent);
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/view/components/Toolbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="toolbar">
  3 |     <div class="toolbar-item">
  4 |       <input
  5 |         v-model="dirtyWidth"
  6 |         type="text"
  7 |         class="toolbar-input viewport-size-input"
  8 |         @focus="selectAll($event.currentTarget as HTMLInputElement)"
  9 |         @keydown.enter="applySize"
 10 |       />
 11 |       <span class="toolbar-input-char">x</span>
 12 |       <input
 13 |         v-model="dirtyHeight"
 14 |         type="text"
 15 |         class="toolbar-input viewport-size-input"
 16 |         @focus="selectAll($event.currentTarget as HTMLInputElement)"
 17 |         @keydown.enter="applySize"
 18 |       />
 19 |     </div>
 20 | 
 21 |     <div class="toolbar-item">
 22 |       <input
 23 |         v-model="dirtyScale"
 24 |         type="text"
 25 |         class="toolbar-input viewport-scale-input"
 26 |         @focus="selectAll($event.currentTarget as HTMLInputElement)"
 27 |         @keydown.enter="applyScale"
 28 |       />
 29 |       <span class="toolbar-input-char">%</span>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script lang="ts">
 35 | import { defineComponent } from 'vue'
 36 | 
 37 | const scaleFormatter = new Intl.NumberFormat(undefined, {
 38 |   maximumFractionDigits: 2,
 39 |   useGrouping: false,
 40 | })
 41 | 
 42 | export default defineComponent({
 43 |   name: 'Toolbar',
 44 | 
 45 |   props: {
 46 |     width: {
 47 |       type: Number,
 48 |       required: true,
 49 |     },
 50 |     height: {
 51 |       type: Number,
 52 |       required: true,
 53 |     },
 54 |     scale: {
 55 |       type: Number,
 56 |       required: true,
 57 |     },
 58 |   },
 59 | 
 60 |   data() {
 61 |     return {
 62 |       dirtyWidth: this.width,
 63 |       dirtyHeight: this.height,
 64 |       dirtyScale: scaleFormatter.format(this.scale * 100),
 65 |     }
 66 |   },
 67 | 
 68 |   watch: {
 69 |     width: 'resetSize',
 70 |     height: 'resetSize',
 71 |     scale: 'resetScale',
 72 |   },
 73 | 
 74 |   methods: {
 75 |     resetSize(): void {
 76 |       this.dirtyWidth = this.width
 77 |       this.dirtyHeight = this.height
 78 |     },
 79 | 
 80 |     resetScale(): void {
 81 |       this.dirtyScale = scaleFormatter.format(this.scale * 100)
 82 |     },
 83 | 
 84 |     selectAll(target: HTMLInputElement): void {
 85 |       target.select()
 86 |     },
 87 | 
 88 |     applySize(): void {
 89 |       const width = Number(this.dirtyWidth)
 90 |       const height = Number(this.dirtyHeight)
 91 | 
 92 |       if (Number.isNaN(width) || Number.isNaN(height)) {
 93 |         this.resetSize()
 94 |       } else {
 95 |         this.$emit('resize', {
 96 |           width,
 97 |           height,
 98 |         })
 99 |       }
100 |     },
101 | 
102 |     applyScale(): void {
103 |       const scale = Number(this.dirtyScale)
104 | 
105 |       if (Number.isNaN(scale)) {
106 |         this.resetScale()
107 |       } else {
108 |         this.$emit('zoom', scale / 100)
109 |       }
110 |     },
111 |   },
112 | })
113 | </script>
114 | 
115 | <style scoped>
116 | .toolbar {
117 |   display: flex;
118 |   align-items: center;
119 |   justify-content: flex-start;
120 |   padding: 0 12px;
121 |   height: 100%;
122 |   background-color: #333;
123 |   color: #fff;
124 | }
125 | 
126 | .toolbar-item {
127 |   margin-left: 30px;
128 | }
129 | 
130 | .toolbar-item:first-child {
131 |   margin-left: 0;
132 | }
133 | 
134 | .toolbar-input {
135 |   padding: 2px 4px;
136 |   border-width: 0;
137 |   font-size: inherit;
138 |   font-family: inherit;
139 | }
140 | 
141 | .toolbar-input,
142 | .toolbar-input-char {
143 |   vertical-align: middle;
144 | }
145 | 
146 | .toolbar-input-char {
147 |   margin: 0 5px;
148 | }
149 | 
150 | .viewport-size-input {
151 |   width: 3.2em;
152 |   text-align: center;
153 | }
154 | 
155 | .viewport-scale-input {
156 |   width: 4em;
157 |   text-align: center;
158 | }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/src/view/components/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Resizable
 3 |     :width="width"
 4 |     :height="height"
 5 |     :offset-weight="2 / scale"
 6 |     :style="viewportStyle"
 7 |     class="viewport-wrapper"
 8 |     @resize="$emit('resize', $event)"
 9 |   >
10 |     <!-- Since viewport is aligned by center, the offset needs to be multiplied by 2 in default scale -->
11 | 
12 |     <!-- Hack for avoiding template compile error of style elements -->
13 |     <div is="style" :text-content.prop="sharedStyle" />
14 | 
15 |     <div class="viewport"><slot /></div>
16 | 
17 |     <!-- To detect mac trackpad's pinch, we need to listen wheel event with ctrl is pressed -->
18 |     <GlobalEvents @wheel.ctrl.prevent="onZoom" />
19 |   </Resizable>
20 | </template>
21 | 
22 | <script lang="ts">
23 | import { defineComponent } from 'vue'
24 | import { GlobalEvents } from 'vue-global-events'
25 | import Resizable from './Resizable.vue'
26 | import { minmax } from '../../utils'
27 | 
28 | export default defineComponent({
29 |   name: 'Viewport',
30 | 
31 |   components: {
32 |     GlobalEvents,
33 |     Resizable,
34 |   },
35 | 
36 |   props: {
37 |     width: {
38 |       type: Number,
39 |       required: true,
40 |     },
41 |     height: {
42 |       type: Number,
43 |       required: true,
44 |     },
45 |     scale: {
46 |       type: Number,
47 |       required: true,
48 |     },
49 |     sharedStyle: {
50 |       type: String,
51 |       required: true,
52 |     },
53 |   },
54 | 
55 |   computed: {
56 |     viewportStyle(): Record<string, string> {
57 |       return {
58 |         transform: `scale(${this.scale})`,
59 |       }
60 |     },
61 |   },
62 | 
63 |   methods: {
64 |     onZoom(event: WheelEvent): void {
65 |       const normalized = minmax(-0.1, event.deltaY * 0.01, 0.1)
66 |       this.$emit('zoom', this.scale - normalized)
67 |     },
68 |   },
69 | })
70 | </script>
71 | 
72 | <style scoped>
73 | .viewport-wrapper {
74 |   position: absolute;
75 |   top: 0;
76 |   bottom: 0;
77 |   left: 0;
78 |   right: 0;
79 |   margin: auto;
80 | }
81 | 
82 | .viewport {
83 |   overflow: auto;
84 |   width: 100%;
85 |   height: 100%;
86 |   background-color: #fff;
87 |   box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/view/components/VueChild.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { Comment, defineComponent, h } from 'vue'
 3 | import VueSlot from './VueSlot.vue'
 4 | import ContainerVueNode from './ContainerVueNode.vue'
 5 | import VueExpression from './VueExpression.vue'
 6 | import { TEChild } from '../../parser/template/types'
 7 | import { DefaultValue, ChildComponent } from '../../parser/script/types'
 8 | 
 9 | export default defineComponent({
10 |   name: 'VueChild',
11 | 
12 |   props: {
13 |     uri: {
14 |       type: String,
15 |       required: true,
16 |     },
17 | 
18 |     data: {
19 |       type: Object as { (): TEChild },
20 |       required: true,
21 |     },
22 | 
23 |     scope: {
24 |       type: Object as { (): Record<string, DefaultValue> },
25 |       required: true,
26 |     },
27 | 
28 |     childComponents: {
29 |       type: Array as { (): ChildComponent[] },
30 |       required: true,
31 |     },
32 | 
33 |     slots: {
34 |       type: Object as { (): Record<string, any> },
35 |       required: true,
36 |     },
37 |   },
38 | 
39 |   emits: ['select', 'dragover', 'add'],
40 | 
41 |   render() {
42 |     const { data, scope } = this
43 |     switch (data.type) {
44 |       case 'Element': {
45 |         const props: any = {
46 |           ...this.$props,
47 |           onSelect: (...args: any[]) => this.$emit('select', ...args),
48 |           onDragover: (...args: any[]) => this.$emit('dragover', ...args),
49 |           onAdd: (...args: any[]) => this.$emit('add', ...args),
50 |         }
51 | 
52 |         if (data.name === 'slot') {
53 |           return h(VueSlot, props)
54 |         } else {
55 |           return h(ContainerVueNode, props)
56 |         }
57 |       }
58 |       case 'TextNode':
59 |         return [data.text]
60 |       case 'ExpressionNode':
61 |         return h(VueExpression, {
62 |           expression: data.expression,
63 |           scope,
64 |         })
65 |       default:
66 |         return h(Comment)
67 |     }
68 |   },
69 | })
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/view/components/VueComponent.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { defineComponent, h, VNode, PropType } from 'vue'
  3 | import VueChild from './VueChild.vue'
  4 | import { TETemplate } from '../../parser/template/types'
  5 | import { ChildComponent } from '../../parser/script/types'
  6 | import { DocumentScope } from '../store/modules/project/types'
  7 | import { resolveControlDirectives, ResolvedChild } from '../ui-logic/rendering'
  8 | 
  9 | export default defineComponent({
 10 |   name: 'VueComponent',
 11 | 
 12 |   props: {
 13 |     uri: {
 14 |       type: String,
 15 |       required: true,
 16 |     },
 17 |     template: {
 18 |       type: Object as { (): TETemplate | undefined },
 19 |       default: undefined,
 20 |     },
 21 |     styles: {
 22 |       type: String,
 23 |       required: true,
 24 |     },
 25 |     scope: {
 26 |       type: Object as { (): DocumentScope },
 27 |     },
 28 |     childComponents: {
 29 |       type: Array as { (): ChildComponent[] },
 30 |       required: true,
 31 |     },
 32 |     propsData: {
 33 |       type: Object as PropType<Record<string, any>>,
 34 |       default: () => ({}) as Record<string, any>,
 35 |     },
 36 |   },
 37 | 
 38 |   emits: ['click', 'select', 'dragover', 'add'],
 39 | 
 40 |   computed: {
 41 |     scopeValues(): Record<string, any> {
 42 |       const values: Record<string, any> = {}
 43 |       const scope = this.scope
 44 | 
 45 |       if (scope) {
 46 |         Object.keys(scope.props).forEach((name) => {
 47 |           const prop = scope.props[name]
 48 | 
 49 |           if (name in this.propsData) {
 50 |             const propValue = this.propsData[name]
 51 | 
 52 |             // Coerce empty string to `true` when it is declared as boolean prop
 53 |             values[name] =
 54 |               prop.type === 'Boolean' && propValue === '' ? true : propValue
 55 |           } else {
 56 |             values[name] = prop.value
 57 |           }
 58 |         })
 59 | 
 60 |         Object.keys(scope.data).forEach((name) => {
 61 |           values[name] = scope.data[name].value
 62 |         })
 63 |       }
 64 | 
 65 |       return values
 66 |     },
 67 |   },
 68 | 
 69 |   render(): VNode {
 70 |     const children = [h('style', { textContent: this.styles })]
 71 | 
 72 |     if (this.template) {
 73 |       this.template.children
 74 |         .reduce<ResolvedChild[]>((acc, child) => {
 75 |           return resolveControlDirectives(acc, {
 76 |             el: child,
 77 |             scope: this.scopeValues,
 78 |           })
 79 |         }, [])
 80 |         .forEach((child) => {
 81 |           children.push(
 82 |             h(VueChild, {
 83 |               uri: this.uri,
 84 |               data: child.el,
 85 |               scope: child.scope,
 86 |               childComponents: this.childComponents,
 87 |               slots: this.$slots,
 88 | 
 89 |               onSelect: (...args: any[]) => {
 90 |                 this.$emit('select', ...args)
 91 |               },
 92 | 
 93 |               onDragover: (...args: any[]) => {
 94 |                 this.$emit('dragover', ...args)
 95 |               },
 96 | 
 97 |               onAdd: (...args: any[]) => {
 98 |                 this.$emit('add', ...args)
 99 |               },
100 |             }),
101 |           )
102 |         })
103 |     }
104 | 
105 |     return h(
106 |       'div',
107 |       {
108 |         onClick: (...args: any[]) => {
109 |           this.$emit('click', ...args)
110 |         },
111 |       },
112 |       children,
113 |     )
114 |   },
115 | })
116 | </script>
117 | 


--------------------------------------------------------------------------------
/src/view/components/VueExpression.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent, h, VNode } from 'vue'
 3 | import { DefaultValue } from '../../parser/script/types'
 4 | import { evalWithScope, EvalSuccess } from '../eval'
 5 | 
 6 | export default defineComponent({
 7 |   name: 'VueExpression',
 8 | 
 9 |   props: {
10 |     expression: {
11 |       type: String,
12 |       required: true,
13 |     },
14 | 
15 |     scope: {
16 |       type: Object as { (): Record<string, DefaultValue> },
17 |       required: true,
18 |     },
19 |   },
20 | 
21 |   render(): VNode {
22 |     const { expression: exp, scope } = this
23 |     const result = evalWithScope(exp, scope)
24 |     const resolved = result.isSuccess && result.value != null
25 |     const str = resolved
26 |       ? String((result as EvalSuccess).value)
27 |       : '{{ ' + exp + ' }}'
28 | 
29 |     return h(
30 |       'span',
31 |       {
32 |         class: {
33 |           unresolved: !resolved,
34 |         },
35 |       },
36 |       [str],
37 |     )
38 |   },
39 | })
40 | </script>
41 | 
42 | <style scoped>
43 | .unresolved {
44 |   padding: 2px;
45 |   margin: -2px;
46 |   background-color: var(--vd-color-unresolved);
47 |   border-radius: 3px;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/view/components/VueSlot.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent, h, VNode } from 'vue'
 3 | import VueChild from './VueChild.vue'
 4 | import { TEElement } from '../../parser/template/types'
 5 | import { DefaultValue, ChildComponent } from '../../parser/script/types'
 6 | import { convertToSlotScope } from '../ui-logic/rendering'
 7 | 
 8 | export default defineComponent({
 9 |   name: 'VueSlot',
10 |   inheritAttrs: false,
11 | 
12 |   props: {
13 |     uri: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |     data: {
18 |       type: Object as { (): TEElement },
19 |       required: true,
20 |     },
21 |     scope: {
22 |       type: Object as { (): Record<string, DefaultValue> },
23 |       required: true,
24 |     },
25 |     childComponents: {
26 |       type: Array as { (): ChildComponent[] },
27 |       required: true,
28 |     },
29 |     slots: {
30 |       type: Object as { (): Record<string, any> },
31 |       required: true,
32 |     },
33 |   },
34 | 
35 |   render(): VNode[] {
36 |     const { data, scope, slots } = this
37 | 
38 |     const slotScope = convertToSlotScope(data.startTag, scope)
39 | 
40 |     const slotName = String(slotScope.name || 'default')
41 |     delete slotScope.name
42 | 
43 |     const slot = slots[slotName]
44 |     if (slot) {
45 |       return slot(slotScope)
46 |     }
47 | 
48 |     // placeholder content
49 |     return this.data.children.map((child) => {
50 |       return h(VueChild, {
51 |         ...this.$attrs,
52 |         uri: this.uri,
53 |         data: child,
54 |         scope: this.scope,
55 |         childComponents: this.childComponents,
56 |         slots,
57 |       })
58 |     })
59 |   },
60 | })
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/view/eval.ts:
--------------------------------------------------------------------------------
 1 | export type EvalResult = EvalSuccess | EvalError
 2 | 
 3 | export interface EvalSuccess {
 4 |   isSuccess: true
 5 |   value: any
 6 | }
 7 | 
 8 | export interface EvalError {
 9 |   isSuccess: false
10 |   error: Error
11 | }
12 | 
13 | export function evalWithScope(expression: string, scope: object): EvalResult {
14 |   try {
15 |     const proxy = createScopeProxy(scope)
16 |     return {
17 |       isSuccess: true,
18 |       value: new Function(`with (this) { return ${expression} }`).call(proxy),
19 |     }
20 |   } catch (error) {
21 |     return {
22 |       isSuccess: false,
23 |       error: error as Error,
24 |     }
25 |   }
26 | }
27 | 
28 | function createScopeProxy(scope: Record<string, any>): Record<string, any> {
29 |   return new Proxy(scope, {
30 |     get(target, name) {
31 |       if (name === Symbol.unscopables) {
32 |         return (target as any)[name]
33 |       }
34 | 
35 |       const value = (target as any)[name]
36 |       if (value !== null && typeof value === 'object') {
37 |         return createScopeProxy(value)
38 |       } else {
39 |         return value
40 |       }
41 |     },
42 | 
43 |     set() {
44 |       return true
45 |     },
46 |   })
47 | }
48 | 


--------------------------------------------------------------------------------
/src/view/global.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --vd-color-text: #333;
 3 |   --vd-color-text-weak: #666;
 4 |   --vd-color-text-weakest: #aaa;
 5 |   --vd-color-accent: #058136;
 6 |   --vd-color-number: #0e00ab;
 7 |   --vd-color-string: #c40e0e;
 8 |   --vd-color-boolean: #8d40d0;
 9 |   --vd-border-color: #ccc;
10 |   --vd-color-bg-pane: #f5f5f5;
11 |   --vd-color-selected-border: #0f2fff;
12 |   --vd-color-guide-margin: rgba(249, 205, 158, 0.5);
13 |   --vd-color-guide-border: rgba(254, 232, 183, 0.4);
14 |   --vd-color-guide-padding: rgba(195, 207, 138, 0.3);
15 |   --vd-color-unresolved: rgba(119, 166, 255, 0.3);
16 |   --vd-font-size: 16px;
17 |   --vd-font-size-small: 12px;
18 |   --vd-font-size-large: 20px;
19 | }
20 | 
21 | body {
22 |   padding: 0;
23 |   margin: 0;
24 |   background-color: #ddd;
25 | }
26 | 
27 | .vd-reset {
28 |   all: initial;
29 |   font-family: sans-serif;
30 |   font-size: var(--vd-font-size);
31 |   color: var(--vd-text-color);
32 | }
33 | 
34 | .vd-reset *,
35 | .vd-reset *::before,
36 | .vd-reset *::after {
37 |   box-sizing: border-box;
38 | }
39 | 


--------------------------------------------------------------------------------
/src/view/load-icons.ts:
--------------------------------------------------------------------------------
 1 | import action from 'material-design-icons/sprites/svg-sprite/svg-sprite-action-symbol.svg?raw'
 2 | import content from 'material-design-icons/sprites/svg-sprite/svg-sprite-content-symbol.svg?raw'
 3 | 
 4 | const iconsWrapper = document.createElement('div')
 5 | iconsWrapper.style.display = 'none'
 6 | 
 7 | // Load all the SVG symbols
 8 | const icons = [action, content]
 9 | 
10 | icons.forEach((icon) => {
11 |   iconsWrapper.innerHTML += icon
12 | })
13 | 
14 | document.body.appendChild(iconsWrapper)
15 | 


--------------------------------------------------------------------------------
/src/view/main.ts:
--------------------------------------------------------------------------------
 1 | import './global.css'
 2 | import './lib/drag-and-drop'
 3 | import './load-icons'
 4 | 
 5 | import { createApp } from 'vue'
 6 | import App from './App.vue'
 7 | import { store } from './store'
 8 | 
 9 | const app = createApp(App)
10 | app.use(store)
11 | app.mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/view/store/bounds-calculator.ts:
--------------------------------------------------------------------------------
 1 | export interface GuidePosition {
 2 |   left: number
 3 |   right: number
 4 |   top: number
 5 |   bottom: number
 6 | }
 7 | 
 8 | export interface GuideBounds {
 9 |   left: number
10 |   top: number
11 |   width: number
12 |   height: number
13 | 
14 |   margin: GuidePosition
15 |   border: GuidePosition
16 |   padding: GuidePosition
17 | }
18 | 
19 | const f = (str: string | null) => parseFloat(str || '0')
20 | 
21 | export class BoundsCalculator {
22 |   private viewport: HTMLElement | undefined
23 |   private target: HTMLElement | undefined
24 | 
25 |   targetBounds: GuideBounds | undefined
26 | 
27 |   setViewport(el: HTMLElement): void {
28 |     this.viewport = el
29 |   }
30 | 
31 |   setTarget(el: HTMLElement): void {
32 |     this.target = el
33 |   }
34 | 
35 |   unset(): void {
36 |     this.viewport = undefined
37 |     this.target = undefined
38 |     this.targetBounds = undefined
39 |   }
40 | 
41 |   calculate(): void {
42 |     const { target, viewport } = this
43 |     if (!target || !viewport) {
44 |       this.targetBounds = undefined
45 |       return
46 |     }
47 | 
48 |     const viewportBounds = viewport.getBoundingClientRect()
49 |     const bounds = target.getBoundingClientRect()
50 |     const s = window.getComputedStyle(target)
51 | 
52 |     const margin = {
53 |       top: f(s.marginTop),
54 |       bottom: f(s.marginBottom),
55 |       left: f(s.marginLeft),
56 |       right: f(s.marginRight),
57 |     }
58 | 
59 |     const border = {
60 |       top: f(s.borderTopWidth),
61 |       bottom: f(s.borderBottomWidth),
62 |       left: f(s.borderLeftWidth),
63 |       right: f(s.borderRightWidth),
64 |     }
65 | 
66 |     const padding = {
67 |       top: f(s.paddingTop),
68 |       bottom: f(s.paddingBottom),
69 |       left: f(s.paddingLeft),
70 |       right: f(s.paddingRight),
71 |     }
72 | 
73 |     this.targetBounds = {
74 |       left: bounds.left - viewportBounds.left,
75 |       top: bounds.top - viewportBounds.top,
76 |       width: bounds.width,
77 |       height: bounds.height,
78 |       margin,
79 |       border,
80 |       padding,
81 |     }
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/view/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { nextTick } from 'vue'
 2 | import { store as createStore, createMapper } from 'sinai'
 3 | import rootModule from './modules'
 4 | import { CommunicationClient } from '../communication/client'
 5 | import { StyleMatcher } from './style-matcher'
 6 | import { BoundsCalculator } from './bounds-calculator'
 7 | import { ResolverType } from '../../server/resolver'
 8 | import { MutatorType } from '../../server/mutator'
 9 | import { SubjectType } from '../../server/subject-type'
10 | 
11 | export const store = createStore(rootModule, {
12 |   strict: import.meta.env.MODE !== 'production',
13 | })
14 | export const mapper = createMapper<typeof store>()
15 | 
16 | const ws = new WebSocket(`ws://localhost:${location.port}/api`)
17 | const client = new CommunicationClient<ResolverType, MutatorType, SubjectType>({
18 |   ws,
19 | })
20 | const styleMatcher = new StyleMatcher()
21 | const boundsCalculator = new BoundsCalculator()
22 | 
23 | store.actions.project.init({
24 |   client,
25 |   styleMatcher,
26 | })
27 | 
28 | store.actions.guide.init(boundsCalculator)
29 | 
30 | store.subscribe((path: any) => {
31 |   const mayRelayout = [
32 |     'project.setDocument',
33 |     'project.addElement',
34 |     'project.addChildComponent',
35 |     'project.setSharedStyle',
36 |     'project.refreshScope',
37 |     'project.cleanScope',
38 |     'project.updatePropValue',
39 |     'project.updateDataValue',
40 |     'viewport.resize',
41 |     'viewport.zoom',
42 |   ]
43 | 
44 |   const shouldReset = [
45 |     'project.setDocuments',
46 |     'project.removeDocument',
47 |     'project.changeActiveDocument',
48 |   ]
49 | 
50 |   const pathStr = path.join('.')
51 |   const guideActions = store.actions.guide
52 | 
53 |   if (mayRelayout.indexOf(pathStr) >= 0) {
54 |     nextTick(guideActions.calculate)
55 |   } else if (shouldReset.indexOf(pathStr) >= 0) {
56 |     nextTick(guideActions.deselect)
57 |   }
58 | })
59 | 


--------------------------------------------------------------------------------
/src/view/store/modules/guide.ts:
--------------------------------------------------------------------------------
 1 | import { module, inject } from 'sinai'
 2 | import { GuideBounds, BoundsCalculator } from '../bounds-calculator'
 3 | import { viewport } from '../modules/viewport'
 4 | 
 5 | const { Getters, Mutations, Actions } = inject('viewport', viewport)
 6 | 
 7 | class GuideState {
 8 |   target: GuideBounds | undefined = undefined
 9 | }
10 | 
11 | class GuideGetters extends Getters<GuideState>() {
12 |   get scaledTarget(): GuideBounds | undefined {
13 |     if (!this.state.target) return
14 | 
15 |     const scale = this.modules.viewport.state.scale
16 |     const target = this.state.target
17 | 
18 |     // The bounds may be modified by the current viewport scale.
19 |     // To show the selected border with accurate bounds,
20 |     // we need to get original bounds by dividing them by the scale.
21 |     return {
22 |       ...target,
23 |       left: target.left / scale,
24 |       top: target.top / scale,
25 |       width: target.width / scale,
26 |       height: target.height / scale,
27 |     }
28 |   }
29 | }
30 | 
31 | class GuideMutations extends Mutations<GuideState>() {
32 |   setTargetBounds(bounds?: GuideBounds): void {
33 |     this.state.target = bounds
34 |   }
35 | }
36 | 
37 | class GuideActions extends Actions<GuideState, GuideGetters, GuideMutations>() {
38 |   private boundsCalculator!: BoundsCalculator
39 | 
40 |   init(calculator: BoundsCalculator): void {
41 |     this.boundsCalculator = calculator
42 |   }
43 | 
44 |   selectTarget(el: HTMLElement, viewport: HTMLElement): void {
45 |     this.boundsCalculator.setTarget(el)
46 |     this.boundsCalculator.setViewport(viewport)
47 |     this.calculate()
48 |   }
49 | 
50 |   deselect(): void {
51 |     this.boundsCalculator.unset()
52 |     this.mutations.setTargetBounds()
53 |   }
54 | 
55 |   calculate(): void {
56 |     this.boundsCalculator.calculate()
57 |     this.mutations.setTargetBounds(this.boundsCalculator.targetBounds)
58 |   }
59 | }
60 | 
61 | export const guide = module({
62 |   state: GuideState,
63 |   getters: GuideGetters,
64 |   mutations: GuideMutations,
65 |   actions: GuideActions,
66 | })
67 | 


--------------------------------------------------------------------------------
/src/view/store/modules/index.ts:
--------------------------------------------------------------------------------
 1 | import { module } from 'sinai'
 2 | import { project } from './project'
 3 | import { viewport } from './viewport'
 4 | import { guide } from './guide'
 5 | 
 6 | export default module()
 7 |   .child('project', project)
 8 |   .child('viewport', viewport)
 9 |   .child('guide', guide)
10 | 


--------------------------------------------------------------------------------
/src/view/store/modules/project/index.ts:
--------------------------------------------------------------------------------
 1 | import { module } from 'sinai'
 2 | import { ProjectState } from './project-state'
 3 | import { ProjectGetters } from './project-getters'
 4 | import { ProjectMutations } from './project-mutations'
 5 | import { ProjectActions } from './project-actions'
 6 | 
 7 | export const project = module({
 8 |   state: ProjectState,
 9 |   getters: ProjectGetters,
10 |   mutations: ProjectMutations,
11 |   actions: ProjectActions,
12 | })
13 | 


--------------------------------------------------------------------------------
/src/view/store/modules/project/project-state.ts:
--------------------------------------------------------------------------------
 1 | import { VueFilePayload } from '../../../../parser/vue-file'
 2 | import { STRuleForPrint } from '../../../../parser/style/types'
 3 | import { DocumentScope } from './types'
 4 | 
 5 | export class ProjectState {
 6 |   documents: Record<string, VueFilePayload> = {}
 7 |   documentScopes: Record<string, DocumentScope> = {}
 8 |   sharedStyle = ''
 9 |   currentUri: string | undefined = undefined
10 |   draggingUri: string | undefined = undefined
11 |   selectedPath: number[] = []
12 |   draggingPath: number[] = []
13 |   matchedRules: STRuleForPrint[] = []
14 | }
15 | 


--------------------------------------------------------------------------------
/src/view/store/modules/project/types.ts:
--------------------------------------------------------------------------------
 1 | import { TETemplate } from '../../../../parser/template/types'
 2 | import { Prop, Data, ChildComponent } from '../../../../parser/script/types'
 3 | 
 4 | export interface ScopedDocument {
 5 |   uri: string
 6 |   displayName: string
 7 |   template: TETemplate | undefined
 8 |   props: Prop[]
 9 |   data: Data[]
10 |   childComponents: ChildComponent[]
11 |   styleCode: string
12 | }
13 | 
14 | export interface DocumentScopeItem {
15 |   type: string | null
16 |   value: any
17 | }
18 | 
19 | export interface DocumentScope {
20 |   props: Record<string, DocumentScopeItem>
21 |   data: Record<string, DocumentScopeItem>
22 | }
23 | 
24 | export type DraggingPlace = 'before' | 'after' | 'first' | 'last'
25 | 


--------------------------------------------------------------------------------
/src/view/store/modules/viewport.ts:
--------------------------------------------------------------------------------
 1 | import { Mutations, Actions, module } from 'sinai'
 2 | import { minmax } from '../../../utils'
 3 | 
 4 | class ViewportState {
 5 |   width = 600
 6 |   height = 800
 7 |   scale = 1.0
 8 | }
 9 | 
10 | class ViewportMutations extends Mutations<ViewportState>() {
11 |   resize({ width, height }: { width: number; height: number }): void {
12 |     const min = 10
13 |     const { state } = this
14 |     state.width = Math.max(min, Math.floor(width))
15 |     state.height = Math.max(min, Math.floor(height))
16 |   }
17 | 
18 |   zoom(scale: number) {
19 |     const max = 5
20 |     const min = 0.1
21 |     const { state } = this
22 |     state.scale = minmax(min, scale, max)
23 |   }
24 | }
25 | 
26 | class ViewportActions extends Actions<ViewportState, ViewportMutations>() {
27 |   resize(payload: { width: number; height: number }): void {
28 |     this.mutations.resize(payload)
29 |   }
30 | 
31 |   zoom(payload: number): void {
32 |     this.mutations.zoom(payload)
33 |   }
34 | }
35 | 
36 | export const viewport = module({
37 |   state: ViewportState,
38 |   mutations: ViewportMutations,
39 |   actions: ViewportActions,
40 | })
41 | 


--------------------------------------------------------------------------------
/src/view/store/style-matcher.ts:
--------------------------------------------------------------------------------
 1 | import { STStyle, STRule } from '../../parser/style/types'
 2 | import { TETemplate } from '../../parser/template/types'
 3 | import { createStyleMatcher } from '../../parser/style/match'
 4 | 
 5 | type Matcher = (template: TETemplate, path: number[]) => STRule[]
 6 | 
 7 | export class StyleMatcher {
 8 |   private matchers = new Map<string, Matcher>()
 9 | 
10 |   match(uri: string, template: TETemplate, path: number[]): STRule[] {
11 |     const matcher = this.matchers.get(uri)
12 |     if (!matcher) {
13 |       return []
14 |     }
15 |     return matcher(template, path)
16 |   }
17 | 
18 |   register(uri: string, styles: STStyle[]): void {
19 |     const matcher = createStyleMatcher(styles)
20 |     this.matchers.set(uri, matcher)
21 |   }
22 | 
23 |   unregister(uri: string): void {
24 |     this.matchers.delete(uri)
25 |   }
26 | 
27 |   clear(): void {
28 |     this.matchers.clear()
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/view/ui-logic/editing.ts:
--------------------------------------------------------------------------------
 1 | import { lexStyleValue, lexToString } from './style-value-lexer'
 2 | 
 3 | export function selectNodeContents(el: Node): void {
 4 |   // Skip if selection does not exist (in case of testing environment)
 5 |   if (!('getSelection' in window)) return
 6 | 
 7 |   const selection = window.getSelection()
 8 |   if (selection) {
 9 |     const range = new Range()
10 |     range.selectNodeContents(el)
11 |     selection.removeAllRanges()
12 |     selection.addRange(range)
13 |   }
14 | }
15 | 
16 | export function getTextOffset(node: Node, offset?: number): number {
17 |   if (node.nodeType === Node.TEXT_NODE) {
18 |     return offset !== undefined ? offset : (node as Text).wholeText.length
19 |   }
20 | 
21 |   if (
22 |     node.nodeType === Node.COMMENT_NODE ||
23 |     node.nodeType === Node.CDATA_SECTION_NODE
24 |   ) {
25 |     // Ignore comments and cdata...
26 |     return 0
27 |   }
28 | 
29 |   const targetChildren =
30 |     offset !== undefined
31 |       ? Array.from(node.childNodes).slice(0, offset)
32 |       : Array.from(node.childNodes)
33 | 
34 |   return targetChildren.reduce((acc, c) => {
35 |     return acc + getTextOffset(c)
36 |   }, 0)
37 | }
38 | 
39 | export function updateStyleValue(
40 |   value: string,
41 |   position: number,
42 |   offset: number,
43 | ): {
44 |   value: string
45 |   range?: [number, number]
46 | } {
47 |   return lexStyleValue(value).reduce(
48 |     (acc, n) => {
49 |       if (n.range[0] <= position && position < n.range[1]) {
50 |         if (n.type === 'numeric') {
51 |           const updated = {
52 |             ...n,
53 |             value: n.value + offset,
54 |           }
55 | 
56 |           const str = lexToString(updated)
57 | 
58 |           return {
59 |             value: acc.value + str,
60 |             range: [acc.value.length, acc.value.length + str.length],
61 |           }
62 |         }
63 |       }
64 |       return {
65 |         ...acc,
66 |         value: acc.value + lexToString(n),
67 |       }
68 |     },
69 |     {
70 |       value: '',
71 |     },
72 |   )
73 | }
74 | 


--------------------------------------------------------------------------------
/src/view/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/vscode/modifier.ts:
--------------------------------------------------------------------------------
 1 | import * as vscode from 'vscode'
 2 | import { Modifiers, reduce } from '../parser/modifier'
 3 | 
 4 | export async function applyModifiers(
 5 |   uri: string,
 6 |   modifiers: Modifiers,
 7 | ): Promise<void> {
 8 |   const parsedUri = vscode.Uri.parse(uri)
 9 |   const doc = await vscode.workspace.openTextDocument(parsedUri)
10 | 
11 |   const wsEdit = reduce(
12 |     modifiers,
13 |     (edit, m) => {
14 |       switch (m.type) {
15 |         case 'Add':
16 |           edit.insert(parsedUri, doc.positionAt(m.pos), m.value)
17 |           break
18 |         case 'Remove':
19 |           edit.delete(
20 |             parsedUri,
21 |             new vscode.Range(
22 |               doc.positionAt(m.pos),
23 |               doc.positionAt(m.pos + m.length),
24 |             ),
25 |           )
26 |           break
27 |         default:
28 |       }
29 |       return edit
30 |     },
31 |     new vscode.WorkspaceEdit(),
32 |   )
33 | 
34 |   await vscode.workspace.applyEdit(wsEdit)
35 | }
36 | 


--------------------------------------------------------------------------------
/src/vscode/watcher.ts:
--------------------------------------------------------------------------------
 1 | import * as vscode from 'vscode'
 2 | import * as path from 'path'
 3 | 
 4 | export class Watcher extends vscode.Disposable {
 5 |   private sharedStyleUris: vscode.Uri[]
 6 |   private innerWatcher: vscode.FileSystemWatcher
 7 | 
 8 |   constructor(rootPath: string, sharedStyleUris: string[]) {
 9 |     super(() => {
10 |       this.innerWatcher.dispose()
11 |     })
12 | 
13 |     this.sharedStyleUris = sharedStyleUris.map((stylePath) => {
14 |       return vscode.Uri.file(path.join(rootPath, stylePath))
15 |     })
16 | 
17 |     const pattern = new vscode.RelativePattern(rootPath, '**/*.{vue,css}')
18 |     this.innerWatcher = vscode.workspace.createFileSystemWatcher(pattern)
19 |   }
20 | 
21 |   onDidSwitchComponent(fn: (uri: vscode.Uri) => void): void {
22 |     vscode.window.onDidChangeActiveTextEditor((editor) => {
23 |       if (editor && path.extname(editor.document.uri.fsPath) === '.vue') {
24 |         fn(editor.document.uri)
25 |       }
26 |     })
27 |   }
28 | 
29 |   onDidEditComponent(
30 |     fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void,
31 |   ): void {
32 |     vscode.workspace.onDidChangeTextDocument((event) => {
33 |       if (event.document !== vscode.window.activeTextEditor!.document) {
34 |         return
35 |       }
36 |       const uri = event.document.uri
37 |       this.createVueListener(fn)(uri)
38 |     })
39 |   }
40 | 
41 |   onDidCreateComponent(
42 |     fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void,
43 |   ): void {
44 |     this.innerWatcher.onDidCreate(this.createVueListener(fn))
45 |   }
46 | 
47 |   onDidChangeComponent(
48 |     fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void,
49 |   ): void {
50 |     this.innerWatcher.onDidChange(this.createVueListener(fn))
51 |   }
52 | 
53 |   onDidDeleteComponent(fn: (uri: vscode.Uri) => void): void {
54 |     this.innerWatcher.onDidDelete(fn)
55 |   }
56 | 
57 |   onDidChangeSharedStyle(fn: () => void): void {
58 |     const uris = this.sharedStyleUris.map((uri) => uri.toString())
59 | 
60 |     const interpolate = (uri: vscode.Uri): void => {
61 |       if (uris.indexOf(uri.toString()) >= 0) {
62 |         fn()
63 |       }
64 |     }
65 | 
66 |     const w = this.innerWatcher
67 |     w.onDidCreate(interpolate)
68 |     w.onDidChange(interpolate)
69 |     w.onDidDelete(interpolate)
70 |   }
71 | 
72 |   destroy(): void {
73 |     this.innerWatcher.dispose()
74 |   }
75 | 
76 |   private createVueListener(
77 |     fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void,
78 |   ): (uri: vscode.Uri) => void {
79 |     return (uri) => {
80 |       if (path.extname(uri.fsPath) !== '.vue') {
81 |         return
82 |       }
83 |       vscode.workspace.openTextDocument(uri).then((doc) => {
84 |         fn(uri, doc)
85 |       })
86 |     }
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/tests/asset-resolver.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { AssetResolver } from '../src/asset-resolver'
 3 | 
 4 | describe('AssetResolver', () => {
 5 |   const asset = new AssetResolver()
 6 | 
 7 |   it('converts path to url', () => {
 8 |     const url = asset.pathToUrl('../assets/logo.png', '/path/to/components')
 9 |     expect(url).toBe(
10 |       '/assets?path=' + encodeURIComponent('/path/to/assets/logo.png'),
11 |     )
12 |   })
13 | 
14 |   it('should not convert url', () => {
15 |     const value = 'https://example.com/logo.png'
16 |     const url = asset.pathToUrl(value, '/path/to/components')
17 |     expect(url).toBe(value)
18 |   })
19 | 
20 |   it('convers url to path', () => {
21 |     const expected = '/path/to/assets/logo.png'
22 |     const path = asset.urlToPath('/assets?path=' + encodeURIComponent(expected))
23 |     expect(path).toBe(expected)
24 |   })
25 | 
26 |   it('returns null if invalid format', () => {
27 |     const invalidEndpoint = asset.urlToPath(
28 |       '/assets/foo?path=' + encodeURIComponent('/logo.png'),
29 |     )
30 |     expect(invalidEndpoint).toBe(null)
31 | 
32 |     const noPath = asset.urlToPath(
33 |       '/assets?test=' + encodeURIComponent('/logo.png'),
34 |     )
35 |     expect(noPath).toBe(null)
36 |   })
37 | })
38 | 


--------------------------------------------------------------------------------
/tests/helpers/style.ts:
--------------------------------------------------------------------------------
  1 | import { expect } from 'vitest'
  2 | import { AttributeOperator } from 'postcss-selector-parser'
  3 | import {
  4 |   STStyle,
  5 |   STDeclaration,
  6 |   STRule,
  7 |   STCombinator,
  8 |   STSelector,
  9 |   STAtRule,
 10 |   STPseudoClass,
 11 |   STPseudoElement,
 12 |   STAttribute,
 13 |   STChild,
 14 | } from '../../src/parser/style/types'
 15 | 
 16 | export function createStyle(children: (STAtRule | STRule)[]): STStyle {
 17 |   modifyPath(children)
 18 |   return {
 19 |     path: [0],
 20 |     children,
 21 |     range: [-1, -1],
 22 |   }
 23 | }
 24 | 
 25 | function modifyPath(nodes: (STAtRule | STRule | STDeclaration)[]): void {
 26 |   function loop(
 27 |     nodes: (STAtRule | STRule | STDeclaration)[],
 28 |     path: number[],
 29 |   ): void {
 30 |     nodes.forEach((node, i) => {
 31 |       const nextPath = path.concat(i)
 32 |       node.path = nextPath
 33 | 
 34 |       if (node.type !== 'Declaration') {
 35 |         loop(node.children, nextPath)
 36 |       }
 37 |     })
 38 |   }
 39 |   loop(nodes, [0])
 40 | }
 41 | 
 42 | export function atRule(
 43 |   name: string,
 44 |   params: string,
 45 |   children: STChild[] = [],
 46 | ): STAtRule {
 47 |   return {
 48 |     type: 'AtRule',
 49 |     path: [],
 50 |     before: '',
 51 |     after: '',
 52 |     name,
 53 |     params,
 54 |     children,
 55 |     range: [-1, -1],
 56 |   }
 57 | }
 58 | 
 59 | export function rule(
 60 |   selectors: STSelector[],
 61 |   children: STDeclaration[] = [],
 62 | ): STRule {
 63 |   return {
 64 |     type: 'Rule',
 65 |     path: [],
 66 |     before: '',
 67 |     after: '',
 68 |     selectors,
 69 |     children,
 70 |     range: [-1, -1],
 71 |   }
 72 | }
 73 | 
 74 | export function selector(
 75 |   options: Partial<STSelector>,
 76 |   next?: STCombinator,
 77 | ): STSelector {
 78 |   const s: STSelector = {
 79 |     type: 'Selector',
 80 |     universal: options.universal || false,
 81 |     class: options.class || [],
 82 |     attributes: options.attributes || [],
 83 |     pseudoClass: options.pseudoClass || [],
 84 |   }
 85 | 
 86 |   if (options.tag) {
 87 |     s.tag = options.tag
 88 |   }
 89 | 
 90 |   if (options.id) {
 91 |     s.id = options.id
 92 |   }
 93 | 
 94 |   if (options.pseudoElement) {
 95 |     s.pseudoElement = options.pseudoElement
 96 |   }
 97 | 
 98 |   if (next) {
 99 |     s.leftCombinator = next
100 |   }
101 | 
102 |   return s
103 | }
104 | 
105 | export function attribute(
106 |   name: string,
107 |   operator?: AttributeOperator,
108 |   value?: string,
109 |   insensitive: boolean = false,
110 | ): STAttribute {
111 |   return {
112 |     type: 'Attribute',
113 |     name,
114 |     operator,
115 |     value,
116 |     insensitive,
117 |   }
118 | }
119 | 
120 | export function combinator(operator: string, next: STSelector): STCombinator {
121 |   return {
122 |     type: 'Combinator',
123 |     operator,
124 |     left: next,
125 |   }
126 | }
127 | 
128 | export function declaration(
129 |   prop: string,
130 |   value: string,
131 |   important: boolean = false,
132 | ): STDeclaration {
133 |   return {
134 |     type: 'Declaration',
135 |     path: [],
136 |     before: '',
137 |     prop,
138 |     value,
139 |     important,
140 |     range: [-1, -1],
141 |   }
142 | }
143 | 
144 | export function pClass(
145 |   value: string,
146 |   params: STSelector[] = [],
147 | ): STPseudoClass {
148 |   return {
149 |     type: 'PseudoClass',
150 |     value,
151 |     params,
152 |   }
153 | }
154 | 
155 | export function pElement(
156 |   value: string,
157 |   pseudoClass: STPseudoClass[] = [],
158 | ): STPseudoElement {
159 |   return {
160 |     type: 'PseudoElement',
161 |     value,
162 |     pseudoClass,
163 |   }
164 | }
165 | 
166 | export function assertStyleNode(result: STStyle, expected: STStyle): void {
167 |   expect(exclude(result)).toEqual(exclude(expected))
168 | }
169 | 
170 | function exclude(obj: any): any {
171 |   if (Array.isArray(obj)) {
172 |     return obj.map(exclude)
173 |   } else if (obj === null || typeof obj !== 'object') {
174 |     return obj
175 |   }
176 | 
177 |   const res: any = {}
178 |   Object.keys(obj).forEach((key) => {
179 |     if (key !== 'range' && key !== 'before' && key !== 'after') {
180 |       const value = obj[key]
181 |       res[key] = exclude(value)
182 |     }
183 |   })
184 |   return res
185 | }
186 | 


--------------------------------------------------------------------------------
/tests/helpers/vue.ts:
--------------------------------------------------------------------------------
 1 | import { createApp, h, ref, Plugin } from 'vue'
 2 | 
 3 | export function mount<V extends new () => any>(
 4 |   Component: V,
 5 |   propsData?: Record<string, any>,
 6 |   plugins: Plugin[] = [],
 7 | ) {
 8 |   const props = ref(propsData ?? {})
 9 | 
10 |   function updateProps(newProps: Record<string, any>) {
11 |     props.value = {
12 |       ...props.value,
13 |       ...newProps,
14 |     }
15 |   }
16 | 
17 |   const app = createApp({
18 |     render() {
19 |       return h(Component, {
20 |         ref: 'comp',
21 |         ...props.value,
22 |       })
23 |     },
24 |   })
25 | 
26 |   for (const plugin of plugins) {
27 |     app.use(plugin)
28 |   }
29 | 
30 |   const el = document.createElement('div')
31 |   const root = app.mount(el)
32 | 
33 |   return {
34 |     vm: root.$refs.comp as InstanceType<V>,
35 |     updateProps,
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/tests/helpers/ws.ts:
--------------------------------------------------------------------------------
 1 | import { EventEmitter } from 'events'
 2 | import { WebSocket, WebSocketServer } from '../../src/infra/communication/types'
 3 | import { WebSocketClient } from '../../src/view/communication/client'
 4 | 
 5 | export class MockWebSocketServer
 6 |   extends EventEmitter
 7 |   implements WebSocketServer
 8 | {
 9 |   clients = new Set<WebSocket>()
10 | 
11 |   connectClient(): MockWebSocketClientForServer {
12 |     const client = new MockWebSocketClientForServer()
13 | 
14 |     this.clients.add(client.connection)
15 | 
16 |     this.emit('connection', client.connection)
17 |     return client
18 |   }
19 | }
20 | 
21 | export class MockWebSocketClient
22 |   extends EventEmitter
23 |   implements WebSocketClient
24 | {
25 |   sent: any[] = []
26 | 
27 |   send(payload: string): void {
28 |     this.sent.push(JSON.parse(payload))
29 |   }
30 | 
31 |   receive(payload: any): void {
32 |     this.emit('message', { data: JSON.stringify(payload) })
33 |   }
34 | 
35 |   addEventListener(event: 'open', cb: () => void): void
36 |   addEventListener(event: 'message', cb: (event: MessageEvent) => void): void
37 |   addEventListener(event: string, cb: (...args: any[]) => void): void {
38 |     this.on(event, cb)
39 |   }
40 | 
41 |   removeEventListener(
42 |     event: 'message',
43 |     cb: (event: MessageEvent) => void,
44 |   ): void {
45 |     this.removeListener(event, cb)
46 |   }
47 | }
48 | 
49 | class MockWebSocketClientForServer {
50 |   connection: MockWebSocket
51 |   received: any[] = []
52 |   private closed = false
53 | 
54 |   constructor() {
55 |     this.connection = new MockWebSocket(this)
56 |   }
57 | 
58 |   send(payload: any): void {
59 |     this.assertConnection()
60 |     this.connection.emit('message', JSON.stringify(payload))
61 |   }
62 | 
63 |   close(): void {
64 |     this.assertConnection()
65 |     this.connection.emit('close')
66 |     this.closed = true
67 |   }
68 | 
69 |   pushMessage(payload: string): void {
70 |     this.assertConnection()
71 |     this.received.push(JSON.parse(payload))
72 |   }
73 | 
74 |   assertConnection(): void {
75 |     if (this.closed) {
76 |       throw new Error('already closed')
77 |     }
78 |   }
79 | }
80 | 
81 | class MockWebSocket extends EventEmitter implements WebSocket {
82 |   constructor(private client: MockWebSocketClientForServer) {
83 |     super()
84 |   }
85 | 
86 |   send(payload: string): void {
87 |     this.client.pushMessage(payload)
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/tests/infra/communication/connect.spec.ts:
--------------------------------------------------------------------------------
  1 | import { connectWsServer } from '../../../src/infra/communication/connect'
  2 | import { describe, beforeEach, it, expect } from 'vitest'
  3 | import { MockWebSocketServer } from '../../helpers/ws'
  4 | 
  5 | describe('Communication infra', () => {
  6 |   interface Foo {
  7 |     id: string
  8 |     value: string
  9 |   }
 10 | 
 11 |   let mockServer: MockWebSocketServer
 12 |   let dummyData: Foo[]
 13 | 
 14 |   beforeEach(() => {
 15 |     mockServer = new MockWebSocketServer()
 16 | 
 17 |     dummyData = [
 18 |       {
 19 |         id: '1',
 20 |         value: 'test',
 21 |       },
 22 |       {
 23 |         id: '2',
 24 |         value: 'test 2',
 25 |       },
 26 |     ]
 27 |   })
 28 | 
 29 |   describe('resolver', () => {
 30 |     const resolver = {
 31 |       get(id: string): Foo | undefined {
 32 |         return dummyData.find((d) => d.id === id)
 33 |       },
 34 | 
 35 |       all(): Foo[] {
 36 |         return dummyData
 37 |       },
 38 | 
 39 |       promise(id: string): Promise<Foo | undefined> {
 40 |         return Promise.resolve(dummyData.find((d) => d.id === id))
 41 |       },
 42 |     }
 43 | 
 44 |     beforeEach(() => {
 45 |       connectWsServer({
 46 |         resolver,
 47 |         mutator: {},
 48 |         server: mockServer,
 49 |       })
 50 |     })
 51 | 
 52 |     it('resolves a value with a resolver method', async () => {
 53 |       const ws = mockServer.connectClient()
 54 | 
 55 |       ws.send({
 56 |         type: 'resolver:get',
 57 |         args: ['2'],
 58 |         requestId: '1',
 59 |       })
 60 | 
 61 |       await Promise.resolve()
 62 | 
 63 |       expect(ws.received.length).toBe(1)
 64 |       const res = ws.received[0]
 65 | 
 66 |       expect(res.type).toBe('resolver:get')
 67 |       expect(res.data).toEqual(dummyData[1])
 68 |       expect(res.requestId).toBe('1')
 69 |     })
 70 | 
 71 |     it('resolves values with a resolver method', async () => {
 72 |       const ws = mockServer.connectClient()
 73 | 
 74 |       ws.send({
 75 |         type: 'resolver:all',
 76 |         args: [],
 77 |         requestId: '2',
 78 |       })
 79 | 
 80 |       await Promise.resolve()
 81 | 
 82 |       expect(ws.received.length).toBe(1)
 83 |       const res = ws.received[0]
 84 | 
 85 |       expect(res.type).toBe('resolver:all')
 86 |       expect(res.data).toEqual(dummyData)
 87 |       expect(res.requestId).toBe('2')
 88 |     })
 89 | 
 90 |     it('resolves returned promise', async () => {
 91 |       const ws = mockServer.connectClient()
 92 | 
 93 |       ws.send({
 94 |         type: 'resolver:promise',
 95 |         args: ['2'],
 96 |         requestId: '3',
 97 |       })
 98 | 
 99 |       await Promise.resolve()
100 | 
101 |       expect(ws.received.length).toBe(1)
102 |       const res = ws.received[0]
103 | 
104 |       expect(res.type).toBe('resolver:promise')
105 |       expect(res.data).toEqual(dummyData[1])
106 |       expect(res.requestId).toBe('3')
107 |     })
108 |   })
109 | 
110 |   describe('mutator', () => {
111 |     const mutator = {
112 |       update(id: string, value: string): void {
113 |         const data = dummyData.find((d) => d.id === id)
114 |         if (data) {
115 |           data.value = value
116 |         }
117 |       },
118 |     }
119 | 
120 |     beforeEach(() => {
121 |       connectWsServer({
122 |         resolver: {},
123 |         mutator,
124 |         server: mockServer,
125 |       })
126 |     })
127 | 
128 |     it('mutates a value with a mutator method', async () => {
129 |       const ws = mockServer.connectClient()
130 | 
131 |       ws.send({
132 |         type: 'mutator:update',
133 |         args: ['2', 'updated'],
134 |         requestId: '1',
135 |       })
136 | 
137 |       await Promise.resolve()
138 | 
139 |       expect(ws.received.length).toBe(1)
140 |       const res = ws.received[0]
141 | 
142 |       expect(res.type).toBe('mutator:update')
143 |       expect(res.requestId).toBe('1')
144 | 
145 |       expect(dummyData[1]).toEqual({
146 |         id: '2',
147 |         value: 'updated',
148 |       })
149 |     })
150 |   })
151 | })
152 | 


--------------------------------------------------------------------------------
/tests/infra/communication/subject.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, beforeEach, it, expect } from 'vitest'
 2 | import { Subject } from '../../../src/infra/communication/subject'
 3 | import { MockWebSocketServer } from '../../helpers/ws'
 4 | 
 5 | interface SubjectTypes {
 6 |   foo: {
 7 |     message: string
 8 |   }
 9 |   bar: {
10 |     value: number
11 |   }
12 | }
13 | 
14 | describe('Communication infra Subjct', () => {
15 |   let subject: Subject<SubjectTypes>
16 |   let mockServer: MockWebSocketServer
17 | 
18 |   beforeEach(() => {
19 |     mockServer = new MockWebSocketServer()
20 |     subject = new Subject(mockServer)
21 |   })
22 | 
23 |   it('sends notification to clients', () => {
24 |     const a = mockServer.connectClient()
25 |     const b = mockServer.connectClient()
26 | 
27 |     subject.notify('foo', {
28 |       message: 'test',
29 |     })
30 | 
31 |     expect(a.received.length).toBe(1)
32 |     expect(b.received.length).toBe(1)
33 |     expect(a.received[0]).toEqual({
34 |       type: 'subject:foo',
35 |       data: {
36 |         message: 'test',
37 |       },
38 |     })
39 |     expect(b.received[0]).toEqual({
40 |       type: 'subject:foo',
41 |       data: {
42 |         message: 'test',
43 |       },
44 |     })
45 |   })
46 | })
47 | 


--------------------------------------------------------------------------------
/tests/parser/modifier.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest'
  2 | import { parse as parseTemplate } from 'vue-eslint-parser'
  3 | import {
  4 |   modify,
  5 |   insertBefore,
  6 |   insertAfter,
  7 |   remove,
  8 |   replace,
  9 |   insertAt,
 10 |   reduce,
 11 | } from '../../src/parser/modifier'
 12 | import { transformTemplate } from '../../src/parser/template/transform'
 13 | 
 14 | describe('modify', () => {
 15 |   it('should insert string before specified range', () => {
 16 |     const code = 'const foo = "World";'
 17 |     const actual = modify(code, [
 18 |       insertBefore({ range: [12, 19] }, '"Hello" + '),
 19 |     ])
 20 |     const expected = 'const foo = "Hello" + "World";'
 21 | 
 22 |     expect(actual).toBe(expected)
 23 |   })
 24 | 
 25 |   it('should insert string after specified range', () => {
 26 |     const code = 'const foo = "Hello";'
 27 |     const actual = modify(code, [insertAfter({ range: [6, 9] }, ': string')])
 28 |     const expected = 'const foo: string = "Hello";'
 29 | 
 30 |     expect(actual).toBe(expected)
 31 |   })
 32 | 
 33 |   it('should remove specified range', () => {
 34 |     const code = 'let foo; let bar;'
 35 |     const actual = modify(code, [remove({ range: [0, 9] })])
 36 |     const expected = 'let bar;'
 37 | 
 38 |     expect(actual).toBe(expected)
 39 |   })
 40 | 
 41 |   it('should replace specified range with a string', () => {
 42 |     const code = 'let foo; let bar;'
 43 |     const actual = modify(code, [
 44 |       replace({ range: [4, 7] }, 'message = "Hello"'),
 45 |     ])
 46 |     const expected = 'let message = "Hello"; let bar;'
 47 | 
 48 |     expect(actual).toBe(expected)
 49 |   })
 50 | 
 51 |   it('should work in complex case', () => {
 52 |     const code = `<template><div id="foo"><h1>Hello</h1><p>World</p></div></template>`
 53 |     const template = parseTemplate(code, {}).templateBody!
 54 |     const ast: any = transformTemplate(template, code)
 55 | 
 56 |     const actual = modify(code, [
 57 |       remove(ast.children[0].startTag.attrs.id),
 58 |       replace(ast.children[0].children[0].children[0], 'Hi'),
 59 |       insertBefore(ast.children[0].children[1], 'Test'),
 60 |     ])
 61 |     const expected =
 62 |       '<template><div ><h1>Hi</h1>Test<p>World</p></div></template>'
 63 | 
 64 |     expect(actual).toBe(expected)
 65 |   })
 66 | 
 67 |   it('should work when the modifiers does not ordered by pos', () => {
 68 |     const code = 'let foo, bar;'
 69 |     const actual = modify(code, [
 70 |       remove({ range: [7, 12] }),
 71 |       insertBefore({ range: [3, 7] }, ' baz,'),
 72 |     ])
 73 |     const expected = 'let baz, foo;'
 74 |     expect(actual).toBe(expected)
 75 |   })
 76 | 
 77 |   it('should work when modifier ranges are overwrapped: remove -> add', () => {
 78 |     const code = 'let foo, bar;'
 79 |     const actual = modify(code, [
 80 |       remove({ range: [4, 12] }),
 81 |       insertAfter({ range: [4, 8] }, 'baz'),
 82 |     ])
 83 |     const expected = 'let baz;'
 84 |     expect(actual).toBe(expected)
 85 |   })
 86 | 
 87 |   it('should work when modifier ranges are overwrapped: add -> remove', () => {
 88 |     const code = 'let foo, bar;'
 89 |     const actual = modify(code, [
 90 |       insertAfter({ range: [4, 8] }, 'baz'),
 91 |       remove({ range: [4, 12] }),
 92 |     ])
 93 |     const expected = 'let baz;'
 94 |     expect(actual).toBe(expected)
 95 |   })
 96 | 
 97 |   it('should work when modifier ranges are overwrapped: remove -> remove', () => {
 98 |     const code = 'let foo, bar, baz;'
 99 |     const actual = modify(code, [
100 |       remove({ range: [4, 17] }),
101 |       remove({ range: [9, 12] }),
102 |     ])
103 |     const expected = 'let ;'
104 |     expect(actual).toBe(expected)
105 |   })
106 | })
107 | 
108 | describe('reduce', () => {
109 |   it('flattens and sorts the modifiers', () => {
110 |     const modifiers = [
111 |       insertAt(9, 'test'),
112 |       remove({ range: [0, 4] }),
113 |       replace({ range: [5, 10] }, 'foo'),
114 |     ]
115 | 
116 |     const r = reduce(
117 |       modifiers,
118 |       (acc, m) => {
119 |         return {
120 |           pos: m.pos,
121 |           result: acc.result && acc.pos <= m.pos,
122 |         }
123 |       },
124 |       {
125 |         pos: 0,
126 |         result: true,
127 |       },
128 |     )
129 | 
130 |     expect(r.result).toBe(true)
131 |   })
132 | })
133 | 


--------------------------------------------------------------------------------
/tests/parser/script/data.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { parse } from '@babel/parser'
 3 | import { extractData } from '../../../src/parser/script/manipulate'
 4 | import { Data } from '../../../src/parser/script/types'
 5 | 
 6 | describe('Script data parser', () => {
 7 |   it('should extract data', () => {
 8 |     const code = `
 9 |     export default {
10 |       data () {
11 |         return { foo: 'test' }
12 |       }
13 |     }`
14 | 
15 |     const { program } = parse(code, { sourceType: 'module' })
16 |     const extracted = extractData(program)
17 |     const expected: Data[] = [
18 |       {
19 |         name: 'foo',
20 |         default: 'test',
21 |       },
22 |     ]
23 |     expect(extracted).toEqual(expected)
24 |   })
25 | 
26 |   it('should extract data from arrow function', () => {
27 |     const code = `
28 |     export default {
29 |       data: () => ({
30 |         abc: 123,
31 |         cde: true
32 |       })
33 |     }`
34 | 
35 |     const { program } = parse(code, { sourceType: 'module' })
36 |     const extracted = extractData(program)
37 |     const expected: Data[] = [
38 |       {
39 |         name: 'abc',
40 |         default: 123,
41 |       },
42 |       {
43 |         name: 'cde',
44 |         default: true,
45 |       },
46 |     ]
47 |     expect(extracted).toEqual(expected)
48 |   })
49 | 
50 |   it('should extract array data', () => {
51 |     const code = `
52 |     export default {
53 |       data: () => ({
54 |         foo: ['test', 123]
55 |       })
56 |     }`
57 | 
58 |     const { program } = parse(code, { sourceType: 'module' })
59 |     const extracted = extractData(program)
60 |     const expected: Data[] = [
61 |       {
62 |         name: 'foo',
63 |         default: ['test', 123],
64 |       },
65 |     ]
66 |     expect(extracted).toEqual(expected)
67 |   })
68 | 
69 |   it('should extract object data', () => {
70 |     const code = `
71 |     export default {
72 |       data: () => ({
73 |         obj: {
74 |           foo: 'test',
75 |           bar: 123
76 |         }
77 |       })
78 |     }`
79 | 
80 |     const { program } = parse(code, { sourceType: 'module' })
81 |     const extracted = extractData(program)
82 |     const expected: Data[] = [
83 |       {
84 |         name: 'obj',
85 |         default: {
86 |           foo: 'test',
87 |           bar: 123,
88 |         },
89 |       },
90 |     ]
91 |     expect(extracted).toEqual(expected)
92 |   })
93 | })
94 | 


--------------------------------------------------------------------------------
/tests/parser/script/modify.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest'
  2 | import { parse as parseSFC } from '@vue/compiler-sfc'
  3 | import { parse as _parse } from '@babel/parser'
  4 | import { insertComponentScript } from '../../../src/parser/script/modify'
  5 | import { modify } from '../../../src/parser/modifier'
  6 | 
  7 | describe('Script modifier', () => {
  8 |   function parse(code: string) {
  9 |     return _parse(code, {
 10 |       sourceType: 'module',
 11 |     }).program
 12 |   }
 13 | 
 14 |   it('should add child component', () => {
 15 |     const code = `
 16 |     import Foo from './Foo.vue'
 17 | 
 18 |     export default {
 19 |       components: {
 20 |         Foo
 21 |       }
 22 |     }
 23 |     `
 24 | 
 25 |     const program = parse(code)
 26 |     const actual = modify(code, [
 27 |       insertComponentScript(program, code, 'Bar', './Bar.vue'),
 28 |     ])
 29 | 
 30 |     const expected = `
 31 |     import Foo from './Foo.vue'
 32 |     import Bar from './Bar.vue'
 33 | 
 34 |     export default {
 35 |       components: {
 36 |         Foo,
 37 |         Bar
 38 |       }
 39 |     }
 40 |     `
 41 |     expect(actual).toBe(expected)
 42 |   })
 43 | 
 44 |   it('should handle the existing trailing comma', () => {
 45 |     const code = `
 46 |     import Foo from './Foo.vue'
 47 | 
 48 |     export default {
 49 |       components: {
 50 |         Foo,
 51 |       }
 52 |     }
 53 |     `
 54 | 
 55 |     const program = parse(code)
 56 |     const actual = modify(code, [
 57 |       insertComponentScript(program, code, 'Bar', './Bar.vue'),
 58 |     ])
 59 | 
 60 |     const expected = `
 61 |     import Foo from './Foo.vue'
 62 |     import Bar from './Bar.vue'
 63 | 
 64 |     export default {
 65 |       components: {
 66 |         Foo,
 67 |         Bar,
 68 |       }
 69 |     }
 70 |     `
 71 |     expect(actual).toBe(expected)
 72 |   })
 73 | 
 74 |   it('should add into empty component options', () => {
 75 |     const code = `
 76 |     export default {
 77 |       components: {
 78 |       }
 79 |     }
 80 |     `
 81 | 
 82 |     const program = parse(code)
 83 |     const actual = modify(code, [
 84 |       insertComponentScript(program, code, 'Foo', './Foo.vue'),
 85 |     ])
 86 | 
 87 |     const expected = `
 88 |     import Foo from './Foo.vue'
 89 |     export default {
 90 |       components: {
 91 |         Foo
 92 |       }
 93 |     }
 94 |     `
 95 |     expect(actual).toBe(expected)
 96 |   })
 97 | 
 98 |   it('should add component options if not exist', () => {
 99 |     const code = `
100 |     export default {
101 |     }
102 |     `
103 | 
104 |     const program = parse(code)
105 |     const actual = modify(code, [
106 |       insertComponentScript(program, code, 'Foo', './Foo.vue'),
107 |     ])
108 | 
109 |     const expected = `
110 |     import Foo from './Foo.vue'
111 |     export default {
112 |       components: {
113 |         Foo
114 |       }
115 | 
116 |     }
117 |     `
118 |     expect(actual).toBe(expected)
119 |   })
120 | 
121 |   it('should only insert into script block', () => {
122 |     const code = `
123 | <template>
124 |   <p>Hi</p>
125 | </template>
126 | 
127 | <script>
128 | export default {
129 | }
130 | </script>
131 | `
132 | 
133 |     const {
134 |       descriptor: { script },
135 |     } = parseSFC(code, { pad: 'space' })
136 |     const scriptCode = script!.content
137 |     const program = parse(scriptCode)
138 |     const actual = modify(scriptCode, [
139 |       insertComponentScript(program, scriptCode, 'Foo', './Foo.vue'),
140 |     ])
141 | 
142 |     const spacify = (matched: string) => matched.replace(/./g, ' ')
143 | 
144 |     const expected = `
145 | <template>
146 |   <p>Hi</p>
147 | </template>
148 | 
149 | <script>
150 | import Foo from './Foo.vue'
151 | export default {
152 |   components: {
153 |     Foo
154 |   }
155 | 
156 | }
157 | `.replace(/<template>[\S\s]+<script>/, spacify)
158 | 
159 |     expect(actual).toBe(expected)
160 |   })
161 | })
162 | 


--------------------------------------------------------------------------------
/tests/parser/script/prop.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { parse } from '@babel/parser'
 3 | import { extractProps } from '../../../src/parser/script/manipulate'
 4 | import { Prop } from '../../../src/parser/script/types'
 5 | 
 6 | describe('Script props parser', () => {
 7 |   it('should extract props', () => {
 8 |     const code = `
 9 |     export default {
10 |       props: {
11 |         foo: String,
12 |         bar: {
13 |           type: Number,
14 |           default: 42
15 |         }
16 |       }
17 |     }`
18 | 
19 |     const { program } = parse(code, { sourceType: 'module' })
20 |     const extracted = extractProps(program)
21 |     const expected: Prop[] = [
22 |       {
23 |         name: 'foo',
24 |         type: 'String',
25 |         default: undefined,
26 |       },
27 |       {
28 |         name: 'bar',
29 |         type: 'Number',
30 |         default: 42,
31 |       },
32 |     ]
33 |     expect(extracted).toEqual(expected)
34 |   })
35 | 
36 |   it('should extract props from array definition', () => {
37 |     const code = `export default { props: ['test'] }`
38 | 
39 |     const { program } = parse(code, { sourceType: 'module' })
40 |     const extracted = extractProps(program)
41 |     const expected: Prop[] = [
42 |       {
43 |         name: 'test',
44 |         type: 'any',
45 |         default: undefined,
46 |       },
47 |     ]
48 |     expect(extracted).toEqual(expected)
49 |   })
50 | 
51 |   it('should extract props from Vue.extend defintion', () => {
52 |     const code = `export default Vue.extend({ props: ['foo'] })`
53 | 
54 |     const { program } = parse(code, { sourceType: 'module' })
55 |     const extracted = extractProps(program)
56 |     const expected: Prop[] = [
57 |       {
58 |         name: 'foo',
59 |         type: 'any',
60 |         default: undefined,
61 |       },
62 |     ]
63 |     expect(extracted).toEqual(expected)
64 |   })
65 | 
66 |   it('should extract default props from function', () => {
67 |     const code = `
68 |     export default {
69 |       props: {
70 |         foo: {
71 |           type: String,
72 |           default: () => 'test'
73 |         }
74 |       }
75 |     }`
76 | 
77 |     const { program } = parse(code, { sourceType: 'module' })
78 |     const extracted = extractProps(program)
79 |     const expected: Prop[] = [
80 |       {
81 |         name: 'foo',
82 |         type: 'String',
83 |         default: 'test',
84 |       },
85 |     ]
86 |     expect(extracted).toEqual(expected)
87 |   })
88 | })
89 | 


--------------------------------------------------------------------------------
/tests/parser/style/asset.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { AssetResolver } from '../../../src/asset-resolver'
 3 | import { createStyle, rule, selector, declaration } from '../../helpers/style'
 4 | import { resolveAsset } from '../../../src/parser/style/manipulate'
 5 | import { STRule } from '../../../src/parser/style/types'
 6 | 
 7 | describe('Style asset resolution', () => {
 8 |   const basePath = '/path/to/components'
 9 |   const asset = new AssetResolver()
10 | 
11 |   it('resolves assets in url function', () => {
12 |     const style = createStyle([
13 |       rule(
14 |         [selector({ tag: 'p' })],
15 |         [declaration('background', 'url(../assets/bg.png)')],
16 |       ),
17 |     ])
18 | 
19 |     const resolved = resolveAsset(style, basePath, asset)
20 |     const decl = (resolved.children[0] as STRule).children[0]
21 |     expect(decl.prop).toBe('background')
22 |     expect(decl.value).toBe(
23 |       'url("/assets?path=' +
24 |         encodeURIComponent('/path/to/assets/bg.png') +
25 |         '")',
26 |     )
27 |   })
28 | 
29 |   it('resolves url function with other kind of values', () => {
30 |     const style = createStyle([
31 |       rule(
32 |         [selector({ tag: 'p' })],
33 |         [
34 |           declaration('font-size', '18px'),
35 |           declaration(
36 |             'background',
37 |             'cyan url("../assets/bg.png") repeat, url("test/icon.gif") no-repeat',
38 |           ),
39 |         ],
40 |       ),
41 |     ])
42 | 
43 |     const resolved = resolveAsset(style, basePath, asset)
44 |     const decls = (resolved.children[0] as STRule).children
45 |     expect(decls.length).toBe(2)
46 |     expect(decls[0].prop).toBe('font-size')
47 |     expect(decls[0].value).toBe('18px')
48 |     expect(decls[1].prop).toBe('background')
49 |     expect(decls[1].value).toBe(
50 |       'cyan url("/assets?path=' +
51 |         encodeURIComponent('/path/to/assets/bg.png') +
52 |         '") repeat, ' +
53 |         'url("/assets?path=' +
54 |         encodeURIComponent('/path/to/components/test/icon.gif') +
55 |         '") no-repeat',
56 |     )
57 |   })
58 | })
59 | 


--------------------------------------------------------------------------------
/tests/parser/style/scoped.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it } from 'vitest'
 2 | import parse from 'postcss-safe-parser'
 3 | import { transformStyle } from '../../../src/parser/style/transform'
 4 | import { addScope } from '../../../src/parser/style/manipulate'
 5 | import { attribute, assertStyleNode } from '../../helpers/style'
 6 | 
 7 | function getAst(code: string) {
 8 |   const root = parse(code)
 9 |   return transformStyle(root, code, 0)
10 | }
11 | 
12 | describe('Scoped style', () => {
13 |   it('should add scope attribute on the last selector', () => {
14 |     const scope = 'abcdef'
15 |     const code = 'h1 > .foo .bar {}'
16 | 
17 |     const ast = getAst(code)
18 |     const result = addScope(ast, scope)
19 | 
20 |     const expected: any = ast
21 |     expected.children[0].selectors[0].attributes.push(
22 |       attribute('data-scope-' + scope),
23 |     )
24 | 
25 |     assertStyleNode(result, expected)
26 |   })
27 | 
28 |   it('should add scope attribute in at-rule', () => {
29 |     const scope = 'abcdef'
30 |     const code = '@media screen { .foo {} }'
31 | 
32 |     const ast = getAst(code)
33 |     const result = addScope(ast, scope)
34 | 
35 |     const expected: any = ast
36 |     expected.children[0].children[0].selectors[0].attributes.push(
37 |       attribute('data-scope-' + scope),
38 |     )
39 | 
40 |     assertStyleNode(result, expected)
41 |   })
42 | 
43 |   it('adds scope id to keyframes and animation name', () => {
44 |     const scope = 'abcdef'
45 |     const code = `
46 |     .foo {
47 |       animate: test 2s;
48 |     }
49 | 
50 |     @keyframes test {
51 |       from {
52 |         opacity: 0;
53 |       }
54 | 
55 |       to {
56 |         opacity: 1;
57 |       }
58 |     }
59 |     `
60 | 
61 |     const ast = getAst(code)
62 |     const result = addScope(ast, scope)
63 | 
64 |     const expected: any = ast
65 |     expected.children[0].selectors[0].attributes.push(
66 |       attribute('data-scope-' + scope),
67 |     )
68 |     expected.children[0].children[0].value = 'test-' + scope + ' 2s'
69 |     expected.children[1].params = 'test-' + scope
70 | 
71 |     assertStyleNode(result, expected)
72 |   })
73 | 
74 |   it('does not add scope id to no-matched animation name', () => {
75 |     const scope = 'abcdef'
76 |     const code = `
77 |     .foo {
78 |       animate: test 2s;
79 |     }
80 |     `
81 | 
82 |     const ast = getAst(code)
83 |     const result = addScope(ast, scope)
84 | 
85 |     const expected: any = ast
86 |     expected.children[0].selectors[0].attributes.push(
87 |       attribute('data-scope-' + scope),
88 |     )
89 | 
90 |     assertStyleNode(result, expected)
91 |   })
92 | })
93 | 


--------------------------------------------------------------------------------
/tests/parser/style/travarse.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { getDeclaration } from '../../../src/parser/style/manipulate'
 3 | import { createStyle, rule, selector, declaration } from '../../helpers/style'
 4 | 
 5 | describe('Get style node', () => {
 6 |   it('should find declaration node', () => {
 7 |     const styles = [
 8 |       createStyle([]),
 9 |       createStyle([
10 |         rule([selector({ tag: 'a' })], [declaration('color', 'red')]),
11 |         rule(
12 |           [selector({ class: ['foo'] })],
13 |           [declaration('color', 'blue'), declaration('font-size', '22px')],
14 |         ),
15 |       ]),
16 |     ]
17 | 
18 |     const result = getDeclaration(styles, [1, 1, 1])!
19 |     expect(result).toBeTruthy()
20 |     expect(result.prop).toBe('font-size')
21 |     expect(result.value).toBe('22px')
22 |   })
23 | 
24 |   it('should return undefined if the path does not indicate declaration', () => {
25 |     const styles = [
26 |       createStyle([]),
27 |       createStyle([
28 |         rule([selector({ tag: 'a' })], [declaration('color', 'red')]),
29 |         rule(
30 |           [selector({ class: ['foo'] })],
31 |           [declaration('color', 'blue'), declaration('font-size', '22px')],
32 |         ),
33 |       ]),
34 |     ]
35 | 
36 |     const result = getDeclaration(styles, [1, 0])!
37 |     expect(result).toBeUndefined()
38 |   })
39 | 
40 |   it('should return undefined if the path points nothing', () => {
41 |     const styles = [
42 |       createStyle([]),
43 |       createStyle([
44 |         rule([selector({ tag: 'a' })], [declaration('color', 'red')]),
45 |         rule(
46 |           [selector({ class: ['foo'] })],
47 |           [declaration('color', 'blue'), declaration('font-size', '22px')],
48 |         ),
49 |       ]),
50 |     ]
51 | 
52 |     const result = getDeclaration(styles, [0, 1, 1])!
53 |     expect(result).toBeUndefined()
54 |   })
55 | })
56 | 


--------------------------------------------------------------------------------
/tests/parser/template/asset.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { AssetResolver } from '../../../src/asset-resolver'
 3 | import { createTemplate, h, a } from '../../helpers/template'
 4 | import { resolveAsset } from '../../../src/parser/template/manipulate'
 5 | import { TEElement } from '../../../src/parser/template/types'
 6 | 
 7 | describe('Template asset resolution', () => {
 8 |   const basePath = '/path/to/component'
 9 |   const asset = new AssetResolver()
10 | 
11 |   it('resolves all src paths on img elements', () => {
12 |     const template = createTemplate([
13 |       h('img', [a('src', '../assets/logo.png'), a('alt', 'test')], []),
14 |     ])
15 | 
16 |     const resolved = resolveAsset(template, basePath, asset)
17 |     const img = resolved.children[0] as TEElement
18 |     const attrs = img.startTag.attrs
19 | 
20 |     expect(img.name).toBe('img')
21 |     expect(Object.keys(attrs).length).toBe(2)
22 | 
23 |     // should convert src value
24 |     expect(attrs.src.value).toBe(
25 |       '/assets?path=' + encodeURIComponent('/path/to/assets/logo.png'),
26 |     )
27 | 
28 |     // should not touch other attribute
29 |     expect(attrs.alt.value).toBe('test')
30 |   })
31 | })
32 | 


--------------------------------------------------------------------------------
/tests/parser/template/manipulate.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest'
  2 | import { createTemplate, h, exp, a } from '../../helpers/template'
  3 | import { insertNode } from '../../../src/parser/template/manipulate'
  4 | 
  5 | describe('AST manipulation', () => {
  6 |   it('should insert a node', () => {
  7 |     // prettier-ignore
  8 |     const template = createTemplate([
  9 |       h('div', [], [
 10 |         h('p', [], ['Text']),
 11 |         h('div', [], [
 12 |           h('a', [a('href', '#foo')], ['Test'])
 13 |         ]),
 14 |         h('button', [], [])
 15 |       ])
 16 |     ])
 17 | 
 18 |     const target = h('a', [], ['inserted'])
 19 |     const inserted = insertNode(template, [0, 1], target)
 20 | 
 21 |     const expected: any = template
 22 |     expected.children[0].children.splice(1, 0, target)
 23 | 
 24 |     expect(inserted).toEqual(expected)
 25 |   })
 26 | 
 27 |   it('should insert a node to end of children', () => {
 28 |     // prettier-ignore
 29 |     const template = createTemplate([
 30 |       h('div', [], [
 31 |         h('p', [], ['Text']),
 32 |         h('div', [], [
 33 |           h('a', [a('href', '#foo')], ['Test'])
 34 |         ]),
 35 |         h('button', [], [])
 36 |       ])
 37 |     ])
 38 | 
 39 |     const target = h('a', [], ['inserted'])
 40 |     const inserted = insertNode(template, [0, 3], target)
 41 | 
 42 |     const expected: any = template
 43 |     expected.children[0].children.push(target)
 44 | 
 45 |     expect(inserted).toEqual(expected)
 46 |   })
 47 | 
 48 |   it('should insert a node to an empty children', () => {
 49 |     // prettier-ignore
 50 |     const template = createTemplate([
 51 |       h('div', [], [
 52 |         h('p', [], ['Text']),
 53 |         h('div', [], [
 54 |           h('a', [a('href', '#foo')], ['Test'])
 55 |         ]),
 56 |         h('button', [], [])
 57 |       ])
 58 |     ])
 59 | 
 60 |     const target = h('a', [], ['inserted'])
 61 |     const inserted = insertNode(template, [0, 2, 0], target)
 62 | 
 63 |     const expected: any = template
 64 |     expected.children[0].children[2].children.push(target)
 65 | 
 66 |     expect(inserted).toEqual(expected)
 67 |   })
 68 | 
 69 |   it('should throw if passing empty path', () => {
 70 |     const template = createTemplate([h('div', [], [])])
 71 |     const el = h('div', [], [])
 72 | 
 73 |     expect(() => insertNode(template, [], el)).toThrow(
 74 |       '[template] index should not be null or undefined',
 75 |     )
 76 |   })
 77 | 
 78 |   it('should throw if the path is unreachable as a node is missing', () => {
 79 |     // prettier-ignore
 80 |     const template = createTemplate([
 81 |       h('div', [], [
 82 |         h('div', [], [
 83 |           h('button', [], [])
 84 |         ]),
 85 |         h('div', [], [])
 86 |       ])
 87 |     ])
 88 | 
 89 |     const el = h('h1', [], [])
 90 | 
 91 |     expect(() => insertNode(template, [0, 2, 0], el)).toThrow(
 92 |       "[template] cannot reach to the path '0->2->0' as there is no node on the way",
 93 |     )
 94 |   })
 95 | 
 96 |   it('should throw if the path is unreachable as a node is text or expression', () => {
 97 |     // prettier-ignore
 98 |     const template = createTemplate([
 99 |       h('div', [], [
100 |         h('div', [], [
101 |           h('button', [], [])
102 |         ]),
103 |         exp('foo')
104 |       ])
105 |     ])
106 | 
107 |     const el = h('h1', [], [])
108 | 
109 |     expect(() => insertNode(template, [0, 1, 0], el)).toThrow(
110 |       "[template] cannot reach to the path '0->1->0' as there is text or expression node on the way",
111 |     )
112 |   })
113 | })
114 | 


--------------------------------------------------------------------------------
/tests/parser/template/modify.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest'
  2 | import { parse } from 'vue-eslint-parser'
  3 | import { transformTemplate } from '../../../src/parser/template/transform'
  4 | import { modify } from '../../../src/parser/modifier'
  5 | import { insertToTemplate } from '../../../src/parser/template/modify'
  6 | 
  7 | describe('Template modifier', () => {
  8 |   it('should insert a node code', () => {
  9 |     const code = `
 10 |     <template>
 11 |       <div>
 12 |         <a href="#">Test</a>
 13 |       </div>
 14 |     </template>
 15 |     `
 16 | 
 17 |     const program = parse(code, {})
 18 |     const ast = transformTemplate(program.templateBody!, code)
 19 | 
 20 |     const actual = modify(code, [
 21 |       insertToTemplate(ast, [1, 1], '<h1>Hello!</h1>'),
 22 |     ])
 23 |     const expected = `
 24 |     <template>
 25 |       <div>
 26 |         <h1>Hello!</h1>
 27 |         <a href="#">Test</a>
 28 |       </div>
 29 |     </template>
 30 |     `
 31 |     expect(actual).toBe(expected)
 32 |   })
 33 | 
 34 |   it('should insert to the last children', () => {
 35 |     const code = `
 36 |     <template>
 37 |       <div>
 38 |         <a href="#">Test</a>
 39 |       </div>
 40 |     </template>
 41 |     `
 42 | 
 43 |     const program = parse(code, {})
 44 |     const ast = transformTemplate(program.templateBody!, code)
 45 | 
 46 |     const actual = modify(code, [
 47 |       insertToTemplate(ast, [1, 3], '<p>Message</p>'),
 48 |     ])
 49 |     const expected = `
 50 |     <template>
 51 |       <div>
 52 |         <a href="#">Test</a>
 53 |         <p>Message</p>
 54 |       </div>
 55 |     </template>
 56 |     `
 57 |     expect(actual).toBe(expected)
 58 |   })
 59 | 
 60 |   it('should insert into an empty element', () => {
 61 |     const code = `
 62 |     <template>
 63 |       <div></div>
 64 |     </template>
 65 |     `
 66 | 
 67 |     const program = parse(code, {})
 68 |     const ast = transformTemplate(program.templateBody!, code)
 69 | 
 70 |     const actual = modify(code, [
 71 |       insertToTemplate(ast, [1, 0], '<p>Message</p>'),
 72 |     ])
 73 |     const expected = `
 74 |     <template>
 75 |       <div>
 76 |         <p>Message</p>
 77 |       </div>
 78 |     </template>
 79 |     `
 80 |     expect(actual).toBe(expected)
 81 |   })
 82 | 
 83 |   it('should insert into one line code', () => {
 84 |     const code = `
 85 |     <template>
 86 |       <div>
 87 |         <h1>Test</h1>
 88 |       </div>
 89 |     </template>
 90 |     `
 91 | 
 92 |     const program = parse(code, {})
 93 |     const ast = transformTemplate(program.templateBody!, code)
 94 | 
 95 |     const actual = modify(code, [
 96 |       insertToTemplate(ast, [1, 1, 1], '<span>Message</span>'),
 97 |     ])
 98 |     const expected = `
 99 |     <template>
100 |       <div>
101 |         <h1>Test
102 |           <span>Message</span>
103 |         </h1>
104 |       </div>
105 |     </template>
106 |     `
107 |     expect(actual).toBe(expected)
108 |   })
109 | })
110 | 


--------------------------------------------------------------------------------
/tests/parser/template/scoped.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { parse } from 'vue-eslint-parser'
 3 | import { TEAttribute } from '../../../src/parser/template/types'
 4 | import { transformTemplate } from '../../../src/parser/template/transform'
 5 | import { addScope } from '../../../src/parser/template/manipulate'
 6 | 
 7 | describe('Scope attribute', () => {
 8 |   it('should add scope attribute for all elements', () => {
 9 |     const code = `
10 |     <template>
11 |       <div id="foo">
12 |         <p class="bar">Test</p>
13 |         <p data-v-abcde>{{ test }}</p>
14 |       </div>
15 |     </template>
16 |     `
17 |     const program = parse(code, {})
18 |     const ast = transformTemplate(program.templateBody!, code)
19 | 
20 |     const scope = '1a2s3d'
21 |     const scopeName = 'data-scope-' + scope
22 |     const scopeAttr: TEAttribute = {
23 |       type: 'Attribute',
24 |       attrIndex: -1,
25 |       name: scopeName,
26 |       range: [-1, -1],
27 |     }
28 | 
29 |     const result = addScope(ast, scope)
30 | 
31 |     const expected: any = ast
32 |     expected.children[1].startTag.attrs[scopeName] = scopeAttr // #foo
33 |     expected.children[1].children[1].startTag.attrs[scopeName] = scopeAttr // .bar
34 |     expected.children[1].children[3].startTag.attrs[scopeName] = scopeAttr // [data-v-abcde]
35 | 
36 |     expect(result).toEqual(expected)
37 |   })
38 | })
39 | 


--------------------------------------------------------------------------------
/tests/parser/template/transform.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it } from 'vitest'
  2 | import { parse } from 'vue-eslint-parser'
  3 | import {
  4 |   createTemplate,
  5 |   h,
  6 |   exp,
  7 |   a,
  8 |   d,
  9 |   vFor,
 10 |   assertWithoutRange,
 11 | } from '../../helpers/template'
 12 | import { transformTemplate } from '../../../src/parser/template/transform'
 13 | 
 14 | describe('Template AST transformer', () => {
 15 |   it('should transform element', () => {
 16 |     const code = '<template><div>Test {{ foo }}<p>bar</p></div></template>'
 17 |     const program = parse(code, {})
 18 |     const ast = program.templateBody!
 19 | 
 20 |     // prettier-ignore
 21 |     const expected = createTemplate([
 22 |       h('div', [], [
 23 |         'Test ',
 24 |         exp('foo'),
 25 |         h('p', [], [
 26 |           'bar'
 27 |         ])
 28 |       ])
 29 |     ])
 30 | 
 31 |     assertWithoutRange(transformTemplate(ast, code), expected)
 32 |   })
 33 | 
 34 |   it('should transform attributes', () => {
 35 |     const code = '<template><h1 id="test" title="title" foo></h1></template>'
 36 |     const program = parse(code, {})
 37 |     const ast = program.templateBody!
 38 | 
 39 |     // prettier-ignore
 40 |     const expected = createTemplate([
 41 |       h(
 42 |         'h1',
 43 |         [
 44 |           a('id', 'test'),
 45 |           a('title', 'title'),
 46 |           a('foo')
 47 |         ],
 48 |         []
 49 |       )
 50 |     ])
 51 | 
 52 |     assertWithoutRange(transformTemplate(ast, code), expected)
 53 |   })
 54 | 
 55 |   it('should transform directives', () => {
 56 |     const code = '<template><input :name="foo" v-model="value"></template>'
 57 |     const program = parse(code, {})
 58 |     const ast = program.templateBody!
 59 | 
 60 |     // prettier-ignore
 61 |     const expected = createTemplate([
 62 |       h(
 63 |         'input',
 64 |         [
 65 |           d('bind', { argument: 'name' }, 'foo'),
 66 |           d('model', 'value')
 67 |         ],
 68 |         [],
 69 |         { hasEndTag: false }
 70 |       )
 71 |     ])
 72 | 
 73 |     assertWithoutRange(transformTemplate(ast, code), expected)
 74 |   })
 75 | 
 76 |   it('should transform v-bind.prop directive', () => {
 77 |     const code = '<template><div :lang.prop="en"></div></template>'
 78 |     const program = parse(code, {})
 79 |     const ast = program.templateBody!
 80 | 
 81 |     // prettier-ignore
 82 |     const expected = createTemplate([
 83 |       h(
 84 |         'div',
 85 |         [
 86 |           d('bind', { argument: 'lang', modifiers: ['prop'] }, 'en')
 87 |         ],
 88 |         []
 89 |       )
 90 |     ])
 91 | 
 92 |     assertWithoutRange(transformTemplate(ast, code), expected)
 93 |   })
 94 | 
 95 |   it('should evaluate literal value of directives', () => {
 96 |     const code = '<template><p v-if="true">test</p></template>'
 97 |     const program = parse(code, {})
 98 |     const ast = program.templateBody!
 99 | 
100 |     // prettier-ignore
101 |     const expected = createTemplate([
102 |       h(
103 |         'p',
104 |         [d('if', 'true')],
105 |         ['test']
106 |       )
107 |     ])
108 | 
109 |     assertWithoutRange(transformTemplate(ast, code), expected)
110 |   })
111 | 
112 |   it('should extract v-for directive', () => {
113 |     const code =
114 |       '<template><ul><li v-for="(item, key, i) in obj"></li></ul></template>'
115 |     const program = parse(code, {})
116 |     const ast = program.templateBody!
117 | 
118 |     // prettier-ignore
119 |     const expected = createTemplate([
120 |       h('ul', [], [
121 |         h('li', [vFor(['item', 'key', 'i'], 'obj')], []),
122 |       ])
123 |     ])
124 | 
125 |     assertWithoutRange(transformTemplate(ast, code), expected)
126 |   })
127 | })
128 | 


--------------------------------------------------------------------------------
/tests/parser/template/traverse.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { parse } from 'vue-eslint-parser'
 3 | import { transformTemplate } from '../../../src/parser/template/transform'
 4 | import { getNode } from '../../../src/parser/template/manipulate'
 5 | import { TEElement } from '../../../src/parser/template/types'
 6 | 
 7 | describe('AST traversal', () => {
 8 |   it('should return a node by path', () => {
 9 |     const code = `
10 |     <template>
11 |       <div>
12 |         <p></p>
13 |         <input type="text">
14 |       </div>
15 |     </template>`
16 |     const program = parse(code, {})
17 |     const ast = transformTemplate(program.templateBody!, code)
18 | 
19 |     const res = getNode(ast, [1, 3])! as TEElement
20 |     expect(res.type === 'Element')
21 |     expect(res.name === 'input')
22 |   })
23 | 
24 |   it('should return undefined if not exists', () => {
25 |     const code = `
26 |     <template>
27 |       <div>
28 |         <p></p>
29 |         <input type="text">
30 |       </div>
31 |     </template>`
32 |     const program = parse(code, {})
33 |     const ast = transformTemplate(program.templateBody!, code)
34 | 
35 |     const res = getNode(ast, [1, 5])
36 |     expect(res === undefined)
37 |   })
38 | })
39 | 


--------------------------------------------------------------------------------
/tests/setup.ts:
--------------------------------------------------------------------------------
 1 | import { expect } from 'vitest'
 2 | 
 3 | // @ts-expect-error
 4 | import beautify from 'pretty'
 5 | 
 6 | /*
 7 |  * Prettify Vue component html snapshots
 8 |  */
 9 | 
10 | const isHtmlString = (received: unknown): boolean =>
11 |   !!received && typeof received === 'string' && received[0] === '<'
12 | 
13 | const removeServerRenderedText = (html: string) =>
14 |   html.replace(/ data-server-rendered="true"/, '')
15 | 
16 | const removeDataTestAttributes = (html: string) =>
17 |   html.replace(/ data-test="[-\w]+"/g, '')
18 | 
19 | const removeVueScopeIdAttributes = (html: string) =>
20 |   html.replace(/ data-v-[\w]+(="[^"]*")?/g, '')
21 | 
22 | expect.addSnapshotSerializer({
23 |   test(received: unknown): boolean {
24 |     return isHtmlString(received)
25 |   },
26 |   print(received: any): string {
27 |     let html = received ?? ''
28 |     html = removeServerRenderedText(html)
29 |     html = removeDataTestAttributes(html)
30 |     html = removeVueScopeIdAttributes(html)
31 |     return beautify(html, { indent_size: 2 })
32 |   },
33 | })
34 | 


--------------------------------------------------------------------------------
/tests/view/InputComposition.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it, vitest } from 'vitest'
 2 | import InputComposition from '../../src/view/components/InputComposition.vue'
 3 | import { mount } from '../helpers/vue'
 4 | import { nextTick } from 'vue'
 5 | 
 6 | describe('InputComposition', () => {
 7 |   it('ports value to real input element', async () => {
 8 |     const spy = vitest.fn()
 9 | 
10 |     const { vm } = mount(InputComposition, {
11 |       value: 'test',
12 |       onInput: spy,
13 |     })
14 | 
15 |     const input = vm.$el as HTMLInputElement
16 | 
17 |     expect(input.value).toBe('test')
18 | 
19 |     input.value = 'updated'
20 |     input.dispatchEvent(new InputEvent('input'))
21 | 
22 |     await nextTick()
23 | 
24 |     expect(spy).toHaveBeenCalled()
25 |     expect(spy.mock.calls[0][0]).toBe('updated')
26 |   })
27 | 
28 |   it('does not emit key events during composition', async () => {
29 |     const listeners = {
30 |       onInput: vitest.fn(),
31 |       onKeydown: vitest.fn(),
32 |     }
33 | 
34 |     const { vm } = mount(InputComposition, {
35 |       value: 'test',
36 |       ...listeners,
37 |     })
38 | 
39 |     const input = vm.$el as HTMLInputElement
40 |     input.dispatchEvent(new InputEvent('input'))
41 |     input.dispatchEvent(new KeyboardEvent('keydown'))
42 |     await nextTick()
43 | 
44 |     expect(listeners.onInput).toHaveBeenCalledTimes(1)
45 |     expect(listeners.onKeydown).toHaveBeenCalledTimes(1)
46 | 
47 |     input.dispatchEvent(new CompositionEvent('compositionstart'))
48 |     input.dispatchEvent(new InputEvent('input'))
49 |     input.dispatchEvent(new KeyboardEvent('keydown'))
50 |     await nextTick()
51 | 
52 |     expect(listeners.onInput).toHaveBeenCalledTimes(2)
53 |     expect(listeners.onKeydown).toHaveBeenCalledTimes(1)
54 | 
55 |     input.dispatchEvent(new CompositionEvent('compositionend'))
56 |     input.dispatchEvent(new InputEvent('input'))
57 |     input.dispatchEvent(new KeyboardEvent('keydown'))
58 |     await nextTick()
59 | 
60 |     expect(listeners.onInput).toHaveBeenCalledTimes(3)
61 |     expect(listeners.onKeydown).toHaveBeenCalledTimes(2)
62 |   })
63 | })
64 | 


--------------------------------------------------------------------------------
/tests/view/Renderer.spec.ts:
--------------------------------------------------------------------------------
  1 | import { beforeAll, beforeEach, describe, expect, it } from 'vitest'
  2 | import { mount } from '../helpers/vue'
  3 | import Renderer from '../../src/view/components/Renderer.vue'
  4 | import { store, module } from 'sinai'
  5 | 
  6 | describe('Renderer', () => {
  7 |   let mockWidth = 1000
  8 |   let mockHeight = 1000
  9 | 
 10 |   const dummyDocument = {
 11 |     uri: 'file:///test.html',
 12 |     styleCode: '',
 13 |     childComponents: [],
 14 |   }
 15 | 
 16 |   const emptyScope = {
 17 |     props: {},
 18 |     data: {},
 19 |   }
 20 | 
 21 |   const dummyStore = store(module().child('guide', module()))
 22 | 
 23 |   function mockGetBoundingClientRect(): DOMRect {
 24 |     return {
 25 |       x: 0,
 26 |       y: 0,
 27 |       bottom: 0,
 28 |       left: 0,
 29 |       top: 0,
 30 |       right: 0,
 31 |       width: mockWidth,
 32 |       height: mockHeight,
 33 |       toJSON: () => {},
 34 |     }
 35 |   }
 36 | 
 37 |   beforeAll(() => {
 38 |     Element.prototype.getBoundingClientRect = mockGetBoundingClientRect
 39 |   })
 40 | 
 41 |   beforeEach(() => {
 42 |     mockWidth = 1000
 43 |     mockHeight = 1000
 44 |   })
 45 | 
 46 |   it('scroll content has the same size with renderer when the viewport is not over the renderer size', () => {
 47 |     const { vm } = mount(
 48 |       Renderer,
 49 |       {
 50 |         document: dummyDocument,
 51 |         scope: emptyScope,
 52 |         width: 800,
 53 |         height: 600,
 54 |         scale: 1,
 55 |         sharedStyle: '',
 56 |       },
 57 |       [dummyStore],
 58 |     )
 59 | 
 60 |     const size = vm.scrollContentSize
 61 |     expect(size.width).toBe(1000)
 62 |     expect(size.height).toBe(1000)
 63 |   })
 64 | 
 65 |   it('scroll content has the much larger size than renderer when the viewport is over the renderer size', () => {
 66 |     const { vm } = mount(
 67 |       Renderer,
 68 |       {
 69 |         document: dummyDocument,
 70 |         scope: emptyScope,
 71 |         width: 800,
 72 |         height: 1200,
 73 |         scale: 1,
 74 |         sharedStyle: '',
 75 |       },
 76 |       [dummyStore],
 77 |     )
 78 | 
 79 |     const size = vm.scrollContentSize
 80 |     expect(size.width).toBe(1000) // width is not changed since is smaller than renderer width
 81 |     expect(size.height).toBe(3000)
 82 |   })
 83 | 
 84 |   it('considers scale value for scroll content size', () => {
 85 |     const { vm } = mount(
 86 |       Renderer,
 87 |       {
 88 |         document: dummyDocument,
 89 |         scope: emptyScope,
 90 |         width: 500,
 91 |         height: 500,
 92 |         scale: 2,
 93 |         sharedStyle: '',
 94 |       },
 95 |       [dummyStore],
 96 |     )
 97 | 
 98 |     const size = vm.scrollContentSize
 99 |     expect(size.width).toBe(2800)
100 |     expect(size.height).toBe(2800)
101 |   })
102 | })
103 | 


--------------------------------------------------------------------------------
/tests/view/Resizable.spec.ts:
--------------------------------------------------------------------------------
  1 | import { beforeAll, describe, expect, it, vitest } from 'vitest'
  2 | import assert from 'assert'
  3 | import { mount } from '../helpers/vue'
  4 | import Resizable from '../../src/view/components/Resizable.vue'
  5 | import { ComponentPublicInstance, nextTick } from 'vue'
  6 | 
  7 | describe('Resizable', () => {
  8 |   beforeAll(() => {
  9 |     Element.prototype.setPointerCapture = vitest.fn()
 10 |     Element.prototype.releasePointerCapture = vitest.fn()
 11 |   })
 12 | 
 13 |   it('tells resized size on dragging', () => {
 14 |     const t = new ResizableTest(300, 300)
 15 |     t.dragStart('se', 295, 305)
 16 |     t.dragTo(395, 355)
 17 | 
 18 |     expect(t.size.width).toBe(400)
 19 |     expect(t.size.height).toBe(350)
 20 |   })
 21 | 
 22 |   it('multiplies offset by offsetWeight prop', async () => {
 23 |     const t = new ResizableTest(300, 300)
 24 |     t.updateProps({
 25 |       offsetWeight: 2,
 26 |     })
 27 |     await nextTick()
 28 |     t.dragStart('se', 300, 300)
 29 |     t.dragTo(350, 370)
 30 | 
 31 |     expect(t.size.width).toBe(400)
 32 |     expect(t.size.height).toBe(440)
 33 |   })
 34 | 
 35 |   it('north handler', () => {
 36 |     const t = new ResizableTest(300, 300)
 37 |     t.dragStart('n', 200, 0)
 38 |     t.dragTo(150, 50)
 39 | 
 40 |     expect(t.size.width).toBe(300)
 41 |     expect(t.size.height).toBe(250)
 42 |   })
 43 | 
 44 |   it('south handler', () => {
 45 |     const t = new ResizableTest(300, 300)
 46 |     t.dragStart('s', 200, 300)
 47 |     t.dragTo(150, 350)
 48 | 
 49 |     expect(t.size.width).toBe(300)
 50 |     expect(t.size.height).toBe(350)
 51 |   })
 52 | 
 53 |   it('west handler', () => {
 54 |     const t = new ResizableTest(300, 300)
 55 |     t.dragStart('w', 0, 150)
 56 |     t.dragTo(50, 200)
 57 | 
 58 |     expect(t.size.width).toBe(250)
 59 |     expect(t.size.height).toBe(300)
 60 |   })
 61 | 
 62 |   it('east handler', () => {
 63 |     const t = new ResizableTest(300, 300)
 64 |     t.dragStart('e', 300, 150)
 65 |     t.dragTo(350, 200)
 66 | 
 67 |     expect(t.size.width).toBe(350)
 68 |     expect(t.size.height).toBe(300)
 69 |   })
 70 | 
 71 |   it('north-west handler', () => {
 72 |     const t = new ResizableTest(300, 300)
 73 |     t.dragStart('nw', 0, 0)
 74 |     t.dragTo(50, 70)
 75 | 
 76 |     expect(t.size.width).toBe(250)
 77 |     expect(t.size.height).toBe(230)
 78 |   })
 79 | 
 80 |   it('north-east handler', () => {
 81 |     const t = new ResizableTest(300, 300)
 82 |     t.dragStart('ne', 300, 0)
 83 |     t.dragTo(350, 70)
 84 | 
 85 |     expect(t.size.width).toBe(350)
 86 |     expect(t.size.height).toBe(230)
 87 |   })
 88 | 
 89 |   it('south-west handler', () => {
 90 |     const t = new ResizableTest(300, 300)
 91 |     t.dragStart('sw', 0, 300)
 92 |     t.dragTo(50, 370)
 93 | 
 94 |     expect(t.size.width).toBe(250)
 95 |     expect(t.size.height).toBe(370)
 96 |   })
 97 | 
 98 |   it('south-east handler', () => {
 99 |     const t = new ResizableTest(300, 300)
100 |     t.dragStart('se', 300, 300)
101 |     t.dragTo(350, 370)
102 | 
103 |     expect(t.size.width).toBe(350)
104 |     expect(t.size.height).toBe(370)
105 |   })
106 | })
107 | 
108 | class ResizableTest {
109 |   vm: ComponentPublicInstance
110 |   handler!: HTMLElement
111 |   size: {
112 |     width: number
113 |     height: number
114 |   }
115 | 
116 |   updateProps: (props: Record<string, any>) => void
117 | 
118 |   constructor(width: number, height: number) {
119 |     const { vm, updateProps } = mount(Resizable, {
120 |       width,
121 |       height,
122 |       onResize: (value: any) => {
123 |         this.size.width = value.width
124 |         this.size.height = value.height
125 |       },
126 |     })
127 | 
128 |     this.vm = vm
129 |     this.updateProps = updateProps
130 | 
131 |     this.size = {
132 |       width,
133 |       height,
134 |     }
135 |   }
136 | 
137 |   dragStart(direction: string, x: number, y: number): void {
138 |     this.handler = this.vm.$el.querySelector('.resizable-handler-' + direction)!
139 |     this.handler.dispatchEvent(
140 |       new MouseEvent('pointerdown', {
141 |         clientX: x,
142 |         clientY: y,
143 |       }),
144 |     )
145 |   }
146 | 
147 |   dragTo(x: number, y: number): void {
148 |     assert(this.handler)
149 |     this.handler.dispatchEvent(
150 |       new MouseEvent('pointermove', {
151 |         clientX: x,
152 |         clientY: y,
153 |       }),
154 |     )
155 |     this.handler.dispatchEvent(new MouseEvent('pointerup'))
156 |   }
157 | }
158 | 


--------------------------------------------------------------------------------
/tests/view/StyleDeclaration.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it, vitest } from 'vitest'
  2 | import { mount } from '../helpers/vue'
  3 | import StyleDeclaration from '../../src/view/components/StyleDeclaration.vue'
  4 | import { nextTick } from 'vue'
  5 | 
  6 | describe('StyleDeclaration', () => {
  7 |   it('should notify prop update', async () => {
  8 |     const listeners = {
  9 |       'onUpdate:prop': vitest.fn(),
 10 |       onRemove: vitest.fn(),
 11 |     }
 12 | 
 13 |     const { vm } = mount(StyleDeclaration, {
 14 |       prop: 'color',
 15 |       value: 'red',
 16 |       ...listeners,
 17 |     })
 18 | 
 19 |     vm.$el.querySelector('button')!.dispatchEvent(new MouseEvent('click'))
 20 |     await nextTick()
 21 | 
 22 |     const prop = vm.$el.querySelector('[contenteditable=true]')!
 23 |     prop.textContent = 'background-color'
 24 |     prop.dispatchEvent(new InputEvent('input'))
 25 |     prop.dispatchEvent(new Event('blur'))
 26 | 
 27 |     expect(listeners['onUpdate:prop']).toHaveBeenCalledWith('background-color')
 28 |     expect(listeners.onRemove).not.toHaveBeenCalled()
 29 |   })
 30 | 
 31 |   it('should notify value update', async () => {
 32 |     const listeners = {
 33 |       'onUpdate:value': vitest.fn(),
 34 |       onRemove: vitest.fn(),
 35 |     }
 36 | 
 37 |     const { vm } = mount(StyleDeclaration, {
 38 |       prop: 'color',
 39 |       value: 'red',
 40 |       ...listeners,
 41 |     })
 42 | 
 43 |     vm.$el.querySelectorAll('button')[1]!.dispatchEvent(new MouseEvent('click'))
 44 |     await nextTick()
 45 | 
 46 |     const value = vm.$el.querySelector('[contenteditable=true]')!
 47 |     value.textContent = 'blue'
 48 |     value.dispatchEvent(new InputEvent('input'))
 49 |     value.dispatchEvent(new Event('blur'))
 50 | 
 51 |     expect(listeners['onUpdate:value']).toHaveBeenCalledWith('blue')
 52 |     expect(listeners.onRemove).not.toHaveBeenCalled()
 53 |   })
 54 | 
 55 |   it('should request removing when prop is empty', async () => {
 56 |     const listeners = {
 57 |       'onUpdate:prop': vitest.fn(),
 58 |       onRemove: vitest.fn(),
 59 |     }
 60 | 
 61 |     const { vm } = mount(StyleDeclaration, {
 62 |       prop: 'color',
 63 |       value: 'red',
 64 |       ...listeners,
 65 |     })
 66 | 
 67 |     vm.$el.querySelector('button')!.dispatchEvent(new MouseEvent('click'))
 68 |     await nextTick()
 69 | 
 70 |     const prop = vm.$el.querySelector('[contenteditable=true]')!
 71 |     prop.textContent = ''
 72 |     prop.dispatchEvent(new InputEvent('input'))
 73 |     prop.dispatchEvent(new Event('blur'))
 74 | 
 75 |     expect(listeners['onUpdate:prop']).toHaveBeenCalledTimes(1)
 76 |     expect(listeners['onUpdate:prop']).toHaveBeenCalledWith('')
 77 |     expect(listeners.onRemove).toHaveBeenCalled()
 78 |   })
 79 | 
 80 |   it('should request removing when value is empty', async () => {
 81 |     const listeners = {
 82 |       'onUpdate:value': vitest.fn(),
 83 |       onRemove: vitest.fn(),
 84 |     }
 85 | 
 86 |     const { vm } = mount(StyleDeclaration, {
 87 |       prop: 'color',
 88 |       value: 'red',
 89 |       ...listeners,
 90 |     })
 91 | 
 92 |     vm.$el.querySelectorAll('button')[1]!.dispatchEvent(new MouseEvent('click'))
 93 |     await nextTick()
 94 | 
 95 |     const value = vm.$el.querySelector('[contenteditable=true]')!
 96 |     value.textContent = ''
 97 |     value.dispatchEvent(new InputEvent('input'))
 98 |     value.dispatchEvent(new Event('blur'))
 99 | 
100 |     expect(listeners['onUpdate:value']).toHaveBeenCalledTimes(1)
101 |     expect(listeners['onUpdate:value']).toHaveBeenCalledWith('')
102 |     expect(listeners.onRemove).toHaveBeenCalled()
103 |   })
104 | })
105 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/else-if.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 | 
3 | exports[`VueComponent v-else-if > resolves template children as the else-if block 1`] = `
4 | <div>
5 |   <style></style><strong class="">Bar</strong>Content
6 | </div>
7 | `;
8 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/else.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 | 
3 | exports[`VueComponent v-else > resolves template children as the else block 1`] = `
4 | <div>
5 |   <style></style><strong class="">Bar</strong>Content
6 | </div>
7 | `;
8 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/for.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 2 | 
 3 | exports[`VueComponent v-for > repeats template element children 1`] = `
 4 | <div>
 5 |   <style></style>
 6 |   <div class="">
 7 |     <div class="">first - <span class="">1</span></div>
 8 |     <div class="">second - <span class="">1</span></div>
 9 |     <div class="">first - <span class="">2</span></div>
10 |     <div class="">second - <span class="">2</span></div>
11 |     <div class="">first - <span class="">3</span></div>
12 |     <div class="">second - <span class="">3</span></div>
13 |   </div>
14 | </div>
15 | `;
16 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/if.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 2 | 
 3 | exports[`VueComponent v-if > gathers the contents in the template element 1`] = `
 4 | <div>
 5 |   <style></style>
 6 |   <p class="">foo</p>barbaz
 7 | </div>
 8 | `;
 9 | 
10 | exports[`VueComponent v-if > gathers the contents in the template element 2`] = `
11 | <div>
12 |   <style></style>baz
13 | </div>
14 | `;
15 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/scoped-slot.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 2 | 
 3 | exports[`VueComponent scoped slot > renders named scoped slot content 1`] = `
 4 | <div>
 5 |   <style></style>
 6 |   <div class="">
 7 |     <style></style>
 8 |     <div class="" data-scope-scope-id="">
 9 |       <p class="" data-scope-scope-id="">foo content</p>
10 |       <p class="" slot-scope="props"><span class="">test1</span></p>
11 |       <p class="" slot-scope="props"><span class="">test2</span></p>
12 |     </div>
13 |   </div>
14 | </div>
15 | `;
16 | 
17 | exports[`VueComponent scoped slot > renders scoped slot content 1`] = `
18 | <div>
19 |   <style></style>
20 |   <div class="">
21 |     <style></style>
22 |     <div class="" data-scope-scope-id="">
23 |       <p class="" data-scope-scope-id="">foo content</p>
24 |       <p class="" slot-scope="props"><span class="">test</span></p>
25 |     </div>
26 |   </div>
27 | </div>
28 | `;
29 | 
30 | exports[`VueComponent scoped slot > resolves template element children as a slot 1`] = `
31 | <div>
32 |   <style></style>
33 |   <div class="">
34 |     <style></style>
35 |     <div class="" data-scope-scope-id="">
36 |       <div class="">named</div>
37 |       <div class=""><span class="">test</span></div>
38 |     </div>
39 |   </div>
40 | </div>
41 | `;
42 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/__snapshots__/slot.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 2 | 
 3 | exports[`VueComponent slot > renders named slot content 1`] = `
 4 | <div>
 5 |   <style></style>
 6 |   <div class="">
 7 |     <style></style>
 8 |     <div class="" data-scope-scope-id="">
 9 |       <p class="" data-scope-scope-id="">foo content</p>
10 |       <p class="">named</p>
11 |     </div>
12 |   </div>
13 | </div>
14 | `;
15 | 
16 | exports[`VueComponent slot > renders placeholder slot content 1`] = `
17 | <div>
18 |   <style></style>
19 |   <div class="">
20 |     <p class="">placeholder content</p>
21 |   </div>
22 | </div>
23 | `;
24 | 
25 | exports[`VueComponent slot > renders slot content 1`] = `
26 | <div>
27 |   <style></style>
28 |   <div class="">
29 |     <style></style>
30 |     <div class="" data-scope-scope-id="">
31 |       <p class="" data-scope-scope-id="">foo content</p>
32 |       <p class="">injected</p>
33 |     </div>
34 |   </div>
35 | </div>
36 | `;
37 | 
38 | exports[`VueComponent slot > resolves template element children as the named slot 1`] = `
39 | <div>
40 |   <style></style>
41 |   <div class="">
42 |     <style></style>
43 |     <div class="" data-scope-scope-id=""><strong class="">named</strong><span class="">content</span></div>
44 |   </div>
45 | </div>
46 | `;
47 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/basic.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { createTemplate, render, h, a, exp } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent basic', () => {
  5 |   it('should render template', () => {
  6 |     const template = createTemplate([
  7 |       h('p', [a('title', 'Hello')], ['Hello World!']),
  8 |     ])
  9 | 
 10 |     const vm = render(template)
 11 |     const p = vm.$el.querySelector('p')!
 12 |     expect(p.textContent).toBe('Hello World!')
 13 |     expect(p.getAttribute('title')).toBe('Hello')
 14 |   })
 15 | 
 16 |   it('should render empty value attribute', () => {
 17 |     const template = createTemplate([h('p', [a('data-scope-123456')], [])])
 18 | 
 19 |     const p = render(template).$el.querySelector('p')!
 20 |     expect(p.getAttribute('data-scope-123456')).toBe('')
 21 |   })
 22 | 
 23 |   it('should render expression', () => {
 24 |     // prettier-ignore
 25 |     const template = createTemplate([
 26 |       h('p', [], [
 27 |         'This is ',
 28 |         exp('foo + bar')
 29 |       ])
 30 |     ])
 31 | 
 32 |     const vm = render(template)
 33 |     expect(vm.$el.querySelector('p')?.textContent).toBe(
 34 |       'This is {{ foo + bar }}',
 35 |     )
 36 |   })
 37 | 
 38 |   it('should replace resolved expression', () => {
 39 |     // prettier-ignore
 40 |     const template = createTemplate([
 41 |       h('p', [], [
 42 |         'This is ',
 43 |         exp('test')
 44 |       ])
 45 |     ])
 46 | 
 47 |     const vm = render(template, [
 48 |       {
 49 |         name: 'test',
 50 |         type: 'String',
 51 |         default: 'replaced text',
 52 |       },
 53 |     ])
 54 |     expect(vm.$el.querySelector('p')?.textContent).toBe('This is replaced text')
 55 |   })
 56 |   it('should print an expression if it is resolved as null or undefined', () => {
 57 |     // prettier-ignore
 58 |     const template = createTemplate([
 59 |       h('div', [], [
 60 |         h('p', [a('id', 'foo')], [
 61 |           exp('foo')
 62 |         ]),
 63 |         h('p', [a('id', 'bar')], [
 64 |           exp('bar')
 65 |         ])
 66 |       ])
 67 |     ])
 68 | 
 69 |     const vm = render(
 70 |       template,
 71 |       [],
 72 |       [
 73 |         {
 74 |           name: 'foo',
 75 |           default: null,
 76 |         },
 77 |         {
 78 |           name: 'bar',
 79 |           default: undefined,
 80 |         },
 81 |       ],
 82 |     )
 83 |     expect(vm.$el.querySelector('#foo')?.textContent).toBe('{{ foo }}')
 84 |     expect(vm.$el.querySelector('#bar')?.textContent).toBe('{{ bar }}')
 85 |   })
 86 | 
 87 |   it('should add class', () => {
 88 |     // prettier-ignore
 89 |     const template = createTemplate([
 90 |       h('p', [a('class', 'foo bar')], [])
 91 |     ])
 92 | 
 93 |     const vm = render(template)
 94 |     expect(Array.from(vm.$el.querySelector('p')?.classList ?? [])).toEqual([
 95 |       'foo',
 96 |       'bar',
 97 |     ])
 98 |   })
 99 | 
100 |   it('should add style', () => {
101 |     // prettier-ignore
102 |     const template = createTemplate([
103 |       h('p', [a('style', 'color: red; background: url(img;test.png);')], [])
104 |     ])
105 | 
106 |     const vm = render(template)
107 |     const p = vm.$el.querySelector('p')
108 |     expect(p?.style.color).toBe('red')
109 |     expect(p?.style.background).toBe('url(img;test.png)')
110 |   })
111 | 
112 |   it('should not generate html node for text', () => {
113 |     // prettier-ignore
114 |     const template = createTemplate([
115 |       h('p', [], [
116 |         'test'
117 |       ])
118 |     ])
119 | 
120 |     const vm = render(template)
121 |     const p = vm.$el.querySelector('p')
122 |     expect(p?.innerHTML).toBe('test')
123 |   })
124 | })
125 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/bind.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, render, h, a, d } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent v-bind', () => {
 5 |   it('should bind attributes with v-bind', () => {
 6 |     // prettier-ignore
 7 |     const template = createTemplate([
 8 |       h('input', [
 9 |         d('bind', { argument: 'value' }, 'foo')
10 |       ], [])
11 |     ])
12 | 
13 |     const vm = render(template, [
14 |       {
15 |         name: 'foo',
16 |         type: 'String',
17 |         default: 'default value',
18 |       },
19 |     ])
20 |     expect(vm.$el.querySelector('input')?.value).toBe('default value')
21 |   })
22 | 
23 |   it('should bind properties with v-bind', () => {
24 |     // prettier-ignore
25 |     const template = createTemplate([
26 |       h('div', [
27 |         a('class', 'foo'),
28 |         d('bind', { argument: 'innerHTML', modifiers: ['prop'] }, '"<p>Hi</p>"')
29 |       ], [])
30 |     ])
31 | 
32 |     const vm = render(template)
33 |     expect(vm.$el.querySelector('.foo')?.innerHTML).toBe('<p>Hi</p>')
34 |   })
35 | 
36 |   it('should merge a bound class with a static class', () => {
37 |     // prettier-ignore
38 |     const template = createTemplate([
39 |       h('p', [
40 |         a('class', 'foo'),
41 |         d('bind', { argument: 'class' }, 'bar')
42 |       ], [])
43 |     ])
44 | 
45 |     const vm = render(template, [
46 |       {
47 |         name: 'bar',
48 |         type: 'String',
49 |         default: 'test-class',
50 |       },
51 |     ])
52 |     const p = vm.$el.querySelector('p')!
53 |     expect(Array.from(p.classList)).toEqual(['foo', 'test-class'])
54 |   })
55 | 
56 |   it('should merge a bound style with a static style', () => {
57 |     // prettier-ignore
58 |     const template = createTemplate([
59 |       h('p', [
60 |         a('style', 'color: red;'),
61 |         d('bind', { argument: 'style' }, 'foo')
62 |       ], [])
63 |     ])
64 | 
65 |     const vm = render(template, [
66 |       {
67 |         name: 'foo',
68 |         type: 'String',
69 |         default: 'font-size: 20px;',
70 |       },
71 |     ])
72 |     const p = vm.$el.querySelector('p')!
73 |     expect(p.style.color).toBe('red')
74 |     expect(p.style.fontSize).toBe('20px')
75 |   })
76 | })
77 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/else-if.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, render, h, a, d } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent v-else-if', () => {
 5 |   it('should be removed if corresponding v-if appears', () => {
 6 |     // prettier-ignore
 7 |     const template = createTemplate([
 8 |       h('p', [a('id', 'foo'), d('if', 'true')], [
 9 |         'Foo'
10 |       ]),
11 |       h('p', [a('id', 'bar'), d('else-if', 'true')], [
12 |         'Bar'
13 |       ])
14 |     ])
15 | 
16 |     const vm = render(template)
17 |     const foo = vm.$el.querySelector('#foo')!
18 |     const bar = vm.$el.querySelector('#bar')!
19 |     expect(foo).not.toBeNull()
20 |     expect(bar).toBeNull()
21 |   })
22 | 
23 |   it('should appear if the expression is truthy and previous v-if is falsy', () => {
24 |     // prettier-ignore
25 |     const template = createTemplate([
26 |       h('p', [a('id', 'foo'), d('if', 'false')], [
27 |         'Foo'
28 |       ]),
29 |       h('p', [a('id', 'bar'), d('else-if', 'true')], [
30 |         'Bar'
31 |       ])
32 |     ])
33 | 
34 |     const vm = render(template)
35 |     const foo = vm.$el.querySelector('#foo')!
36 |     const bar = vm.$el.querySelector('#bar')!
37 |     expect(foo).toBeNull()
38 |     expect(bar).not.toBeNull()
39 |   })
40 | 
41 |   it('should appear only first truthy v-else-if', () => {
42 |     // prettier-ignore
43 |     const template = createTemplate([
44 |       h('p', [d('if', 'false')], [
45 |         'Foo'
46 |       ]),
47 |       h('p', [d('else-if', 'true')], [
48 |         'Bar'
49 |       ]),
50 |       h('p', [d('else-if', 'false')], [
51 |         'Baz'
52 |       ]),
53 |       h('p', [d('else-if', 'true')], [
54 |         'Qux'
55 |       ])
56 |     ])
57 | 
58 |     const vm = render(template)
59 |     const list = vm.$el.querySelectorAll('p')
60 |     expect(list.length).toBe(1)
61 |     expect(list[0]!.textContent).toBe('Bar')
62 |   })
63 | 
64 |   it('resolves template children as the else-if block', () => {
65 |     // prettier-ignore
66 |     const template = createTemplate([
67 |       h('p', [d('if', 'false')], [
68 |         'Foo'
69 |       ]),
70 |       h('template', [d('else-if', 'true')], [
71 |         h('strong', [], ['Bar']),
72 |         'Content'
73 |       ])
74 |     ])
75 | 
76 |     const vm = render(template)
77 |     expect(vm.$el.outerHTML).toMatchSnapshot()
78 |   })
79 | })
80 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/else.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { createTemplate, render, h, a, d } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent v-else', () => {
  5 |   it('should be removed if corresponding v-if appears', () => {
  6 |     // prettier-ignore
  7 |     const template = createTemplate([
  8 |       h('p', [a('id', 'foo'), d('if', 'true')], [
  9 |         'Foo'
 10 |       ]),
 11 |       h('p', [a('id', 'bar'), d('else')], [
 12 |         'Bar'
 13 |       ])
 14 |     ])
 15 | 
 16 |     const vm = render(template)
 17 |     const foo = vm.$el.querySelector('#foo')
 18 |     const bar = vm.$el.querySelector('#bar')
 19 |     expect(foo).not.toBe(null)
 20 |     expect(bar).toBe(null)
 21 |   })
 22 | 
 23 |   it('should appear if corresponding v-if is removed', () => {
 24 |     // prettier-ignore
 25 |     const template = createTemplate([
 26 |       h('p', [a('id', 'foo'), d('if', 'false')], [
 27 |         'Foo'
 28 |       ]),
 29 |       h('p', [a('id', 'bar'), d('else')], [
 30 |         'Bar'
 31 |       ])
 32 |     ])
 33 | 
 34 |     const vm = render(template)
 35 |     const foo = vm.$el.querySelector('#foo')
 36 |     const bar = vm.$el.querySelector('#bar')
 37 |     expect(foo).toBe(null)
 38 |     expect(bar).not.toBe(null)
 39 |   })
 40 | 
 41 |   it('should ignore empty text between v-if and v-else', () => {
 42 |     // prettier-ignore
 43 |     const template = createTemplate([
 44 |       h('p', [a('id', 'foo'), d('if', 'true')], [
 45 |         'Foo'
 46 |       ]),
 47 |       '\n    ',
 48 |       h('p', [a('id', 'bar'), d('else')], [
 49 |         'Bar'
 50 |       ])
 51 |     ])
 52 | 
 53 |     const vm = render(template)
 54 |     const foo = vm.$el.querySelector('#foo')
 55 |     const bar = vm.$el.querySelector('#bar')
 56 |     expect(foo).not.toBe(null)
 57 |     expect(bar).toBe(null)
 58 |   })
 59 | 
 60 |   it('should be ignored if there is no v-if before it', () => {
 61 |     // prettier-ignore
 62 |     const template = createTemplate([
 63 |       h('div', [], [
 64 |         'First'
 65 |       ]),
 66 |       h('p', [a('id', 'bar'), d('else')], [
 67 |         'Bar'
 68 |       ]),
 69 |       h('p', [a('id', 'foo'), d('if', 'true')], [
 70 |         'Foo'
 71 |       ])
 72 |     ])
 73 | 
 74 |     const vm = render(template)
 75 |     const foo = vm.$el.querySelector('#foo')
 76 |     const bar = vm.$el.querySelector('#bar')
 77 |     expect(foo).not.toBe(null)
 78 |     expect(bar).not.toBe(null)
 79 |   })
 80 | 
 81 |   it('should be ignored if there is another element between if and else', () => {
 82 |     // prettier-ignore
 83 |     const template = createTemplate([
 84 |       h('p', [a('id', 'foo'), d('if', 'true')], [
 85 |         'Foo'
 86 |       ]),
 87 |       h('div', [], [
 88 |         'Another'
 89 |       ]),
 90 |       h('p', [a('id', 'bar'), d('else')], [
 91 |         'Bar'
 92 |       ])
 93 |     ])
 94 | 
 95 |     const vm = render(template)
 96 |     const foo = vm.$el.querySelector('#foo')
 97 |     const bar = vm.$el.querySelector('#bar')
 98 |     expect(foo).not.toBe(null)
 99 |     expect(bar).not.toBe(null)
100 |   })
101 | 
102 |   it('should be removed if at least one of v-else-if is true', () => {
103 |     // prettier-ignore
104 |     const template = createTemplate([
105 |       h('p', [a('id', 'foo'), d('if', 'false')], [
106 |         'Foo'
107 |       ]),
108 |       h('p', [a('id', 'bar'), d('else-if', 'true')], [
109 |         'Bar'
110 |       ]),
111 |       h('p', [a('id', 'baz'), d('else-if', 'false')], [
112 |         'Baz'
113 |       ]),
114 |       h('p', [a('id', 'qux'), d('else')], [
115 |         'Qux'
116 |       ])
117 |     ])
118 | 
119 |     const vm = render(template)
120 |     const foo = vm.$el.querySelector('#foo')
121 |     const bar = vm.$el.querySelector('#bar')
122 |     const baz = vm.$el.querySelector('#baz')
123 |     const qux = vm.$el.querySelector('#qux')
124 |     expect(foo).toBe(null)
125 |     expect(bar).not.toBe(null)
126 |     expect(baz).toBe(null)
127 |     expect(qux).toBe(null)
128 |   })
129 | 
130 |   it('resolves template children as the else block', () => {
131 |     // prettier-ignore
132 |     const template = createTemplate([
133 |       h('p', [d('if', 'false')], [
134 |         'Foo'
135 |       ]),
136 |       h('template', [d('else')], [
137 |         h('strong', [], ['Bar']),
138 |         'Content'
139 |       ])
140 |     ])
141 | 
142 |     const vm = render(template)
143 |     expect(vm.$el.outerHTML).toMatchSnapshot()
144 |   })
145 | })
146 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/error.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, h, a, render } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent error handling', () => {
 5 |   it('should not throw when invalid attribute name is passed', () => {
 6 |     // prettier-ignore
 7 |     // This may cause for the intermediate state of user's typing
 8 |     // e.g.
 9 |     //   <div>
10 |     //     <p| <!-- The user is typing here -->
11 |     //   </div>
12 |     const template = createTemplate([
13 |       h('div', [], [
14 |         h('p', [a('<')], [])
15 |       ])
16 |     ])
17 | 
18 |     expect(() => render(template)).not.toThrow()
19 |   })
20 | })
21 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/for.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { render, createTemplate, h, exp, vFor } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent v-for', () => {
  5 |   it('should iterate array value', () => {
  6 |     // prettier-ignore
  7 |     const template = createTemplate([
  8 |       h('ul', [], [
  9 |         h('li', [vFor(['item', 'i'], 'list')], [
 10 |           exp('item + " - " + i')
 11 |         ])
 12 |       ])
 13 |     ])
 14 | 
 15 |     const wrapper = render(template, [
 16 |       {
 17 |         name: 'list',
 18 |         type: 'Array',
 19 |         default: ['first', 'second', 'third'],
 20 |       },
 21 |     ])
 22 |     const list = wrapper.$el.querySelectorAll('li')
 23 |     expect(list.length).toBe(3)
 24 |     expect(list[0].textContent).toBe('first - 0')
 25 |     expect(list[1].textContent).toBe('second - 1')
 26 |     expect(list[2].textContent).toBe('third - 2')
 27 |   })
 28 | 
 29 |   it('should iterate object value', () => {
 30 |     // prettier-ignore
 31 |     const template = createTemplate([
 32 |       h('ul', [], [
 33 |         h('li', [vFor(['item', 'key', 'i'], 'obj')], [
 34 |           exp('item + " - " + key + " - " + i')
 35 |         ])
 36 |       ])
 37 |     ])
 38 | 
 39 |     const wrapper = render(template, [
 40 |       {
 41 |         name: 'obj',
 42 |         type: 'Object',
 43 |         default: {
 44 |           foo: 'first',
 45 |           bar: 'second',
 46 |           baz: 'third',
 47 |         },
 48 |       },
 49 |     ])
 50 |     const list = wrapper.$el.querySelectorAll('li')
 51 |     expect(list.length).toBe(3)
 52 |     expect(list[0].textContent).toBe('first - foo - 0')
 53 |     expect(list[1].textContent).toBe('second - bar - 1')
 54 |     expect(list[2].textContent).toBe('third - baz - 2')
 55 |   })
 56 | 
 57 |   it('should iterate range', () => {
 58 |     const template = createTemplate([
 59 |       h('ul', [], [h('li', [vFor(['i'], '3')], [exp('i')])]),
 60 |     ])
 61 | 
 62 |     const wrapper = render(template)
 63 |     const list = wrapper.$el.querySelectorAll('li')
 64 |     expect(list.length).toBe(3)
 65 |     expect(list[0].textContent).toBe('1')
 66 |     expect(list[1].textContent).toBe('2')
 67 |     expect(list[2].textContent).toBe('3')
 68 |   })
 69 | 
 70 |   it('should be removed if v-for is invalid', () => {
 71 |     // prettier-ignore
 72 |     const template = createTemplate([
 73 |       h('ul', [], [
 74 |         h('li', [vFor([])], [])
 75 |       ])
 76 |     ])
 77 | 
 78 |     const wrapper = render(template)
 79 |     const list = wrapper.$el.querySelectorAll('li')
 80 |     expect(list.length).toBe(0)
 81 |   })
 82 | 
 83 |   it('should be removed if iteratee cannot be resolved', () => {
 84 |     // prettier-ignore
 85 |     const template = createTemplate([
 86 |       h('ul', [], [
 87 |         h('li', [vFor(['item'], 'list')], [])
 88 |       ])
 89 |     ])
 90 | 
 91 |     const wrapper = render(template)
 92 |     const list = wrapper.$el.querySelectorAll('li')
 93 |     expect(list.length).toBe(0)
 94 |   })
 95 | 
 96 |   it('should be removed if iteratee is not iterable', () => {
 97 |     // prettier-ignore
 98 |     const template = createTemplate([
 99 |       h('ul', [], [
100 |         h('li', [vFor(['item'], '"Test"')], [])
101 |       ])
102 |     ])
103 | 
104 |     const wrapper = render(template)
105 |     const list = wrapper.$el.querySelectorAll('li')
106 |     expect(list.length).toBe(0)
107 |   })
108 | 
109 |   it('repeats template element children', () => {
110 |     // prettier-ignore
111 |     const template = createTemplate([
112 |       h('div', [], [
113 |         h('template', [vFor(['i'], '3')], [
114 |           h('div', [], ['first - ', exp('i')]),
115 |           h('div', [], ['second - ', exp('i')])
116 |         ])
117 |       ])
118 |     ])
119 | 
120 |     const wrapper = render(template)
121 |     expect(wrapper.$el.outerHTML).toMatchSnapshot()
122 |   })
123 | })
124 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/html.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, h, d, render } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent v-html', () => {
 5 |   it('should render html into an element', () => {
 6 |     // prettier-ignore
 7 |     const template = createTemplate([
 8 |       h('p', [d('html', 'message')], [])
 9 |     ])
10 | 
11 |     const wrapper = render(
12 |       template,
13 |       [],
14 |       [
15 |         {
16 |           name: 'message',
17 |           default: '<strong>Hello text!</strong>',
18 |         },
19 |       ],
20 |     )
21 |     const p = wrapper.$el.querySelector('p')!
22 |     expect(p.innerHTML).toBe('<strong>Hello text!</strong>')
23 |   })
24 | 
25 |   it('should overwrite default content', () => {
26 |     // prettier-ignore
27 |     const template = createTemplate([
28 |       h('p', [d('html', 'message')], [
29 |         h('span', [], ['This should not be rendered'])
30 |       ])
31 |     ])
32 | 
33 |     const wrapper = render(
34 |       template,
35 |       [],
36 |       [
37 |         {
38 |           name: 'message',
39 |           default: '<strong>overwritten</strong>',
40 |         },
41 |       ],
42 |     )
43 |     const p = wrapper.$el.querySelector('p')!
44 |     expect(p.innerHTML).toBe('<strong>overwritten</strong>')
45 |   })
46 | 
47 |   it('should not render if the value is not resolved', () => {
48 |     // prettier-ignore
49 |     const template = createTemplate([
50 |       h('p', [d('html', 'message')], [])
51 |     ])
52 | 
53 |     const wrapper = render(template)
54 |     const p = wrapper.$el.querySelector('p')!
55 |     expect(p.innerHTML).toBe('')
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/if.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { createTemplate, render, h, d } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent v-if', () => {
  5 |   it('should appear if v-if="true"', () => {
  6 |     // prettier-ignore
  7 |     const template = createTemplate([
  8 |       h('p', [d('if', 'true')], [
  9 |         'test'
 10 |       ])
 11 |     ])
 12 | 
 13 |     const vm = render(template)
 14 |     const p = vm.$el.querySelector('p')
 15 |     expect(p).not.toBeNull()
 16 |   })
 17 | 
 18 |   it('should be removed if v-if="false"', () => {
 19 |     // prettier-ignore
 20 |     const template = createTemplate([
 21 |       h('p', [d('if', 'false')], [
 22 |         'test'
 23 |       ])
 24 |     ])
 25 | 
 26 |     const vm = render(template)
 27 |     const p = vm.$el.querySelector('p')
 28 |     expect(p).toBeNull()
 29 |   })
 30 | 
 31 |   it('should appear if the expression is resolved to truthy', () => {
 32 |     // prettier-ignore
 33 |     const template = createTemplate([
 34 |       h('p', [d('if', 'foo')], [
 35 |         'test'
 36 |       ])
 37 |     ])
 38 | 
 39 |     const vm = render(template, [
 40 |       {
 41 |         name: 'foo',
 42 |         type: 'Number',
 43 |         default: 123,
 44 |       },
 45 |     ])
 46 |     const p = vm.$el.querySelector('p')
 47 |     expect(p).not.toBeNull()
 48 |   })
 49 | 
 50 |   it('should be removed if the expression is resolved to falthy', () => {
 51 |     // prettier-ignore
 52 |     const template = createTemplate([
 53 |       h('p', [d('if', 'bar')], [
 54 |         'test'
 55 |       ])
 56 |     ])
 57 | 
 58 |     const vm = render(
 59 |       template,
 60 |       [],
 61 |       [
 62 |         {
 63 |           name: 'bar',
 64 |           default: null,
 65 |         },
 66 |       ],
 67 |     )
 68 |     const p = vm.$el.querySelector('p')
 69 |     expect(p).toBeNull()
 70 |   })
 71 | 
 72 |   it('should be removed if the expression cannot be resolved', () => {
 73 |     // prettier-ignore
 74 |     const template = createTemplate([
 75 |       h('p', [d('if', 'foo + bar')], [
 76 |         'test'
 77 |       ])
 78 |     ])
 79 | 
 80 |     const vm = render(template)
 81 |     const p = vm.$el.querySelector('p')
 82 |     expect(p).toBeNull()
 83 |   })
 84 | 
 85 |   it('gathers the contents in the template element', () => {
 86 |     // prettier-ignore
 87 |     const shown = createTemplate([
 88 |       h('template', [d('if', 'true')], [
 89 |         h('p', [], ['foo']),
 90 |         'bar'
 91 |       ]),
 92 |       'baz'
 93 |     ])
 94 | 
 95 |     const vmShown = render(shown)
 96 |     expect(vmShown.$el.outerHTML).toMatchSnapshot()
 97 | 
 98 |     // prettier-ignore
 99 |     const hidden = createTemplate([
100 |       h('template', [d('if', 'false')], [
101 |         h('p', [], ['foo']),
102 |         'bar'
103 |       ]),
104 |       'baz'
105 |     ])
106 | 
107 |     const vmHidden = render(hidden)
108 |     expect(vmHidden.$el.outerHTML).toMatchSnapshot()
109 |   })
110 | })
111 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/scoped-slot.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { createTemplate, h, render, a, exp } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent scoped slot', () => {
  5 |   it('renders scoped slot content', () => {
  6 |     // prettier-ignore
  7 |     const template = createTemplate([
  8 |       h('Foo', [], [
  9 |         h('p', [a('slot-scope', 'props')], [exp('props.foo')])
 10 |       ])
 11 |     ])
 12 | 
 13 |     const components = {
 14 |       'file://Foo.vue': {
 15 |         // prettier-ignore
 16 |         template: createTemplate([
 17 |           h('div', [], [
 18 |             h('p', [], ['foo content']),
 19 |             h('slot', [a('foo', 'test')], [])
 20 |           ])
 21 |         ]),
 22 |       },
 23 |     }
 24 | 
 25 |     const vm = render(
 26 |       template,
 27 |       [],
 28 |       [],
 29 |       [
 30 |         {
 31 |           name: 'Foo',
 32 |           uri: 'file://Foo.vue',
 33 |         },
 34 |       ],
 35 |       components,
 36 |     )
 37 | 
 38 |     expect(vm.$el.outerHTML).toMatchSnapshot()
 39 |   })
 40 | 
 41 |   it('renders named scoped slot content', () => {
 42 |     // prettier-ignore
 43 |     const template = createTemplate([
 44 |       h('Foo', [], [
 45 |         h('p', [a('slot-scope', 'props')], [exp('props.foo')]),
 46 |         h('p', [a('slot', 'test'), a('slot-scope', 'props')], [exp('props.foo')])
 47 |       ])
 48 |     ])
 49 | 
 50 |     const components = {
 51 |       'file://Foo.vue': {
 52 |         // prettier-ignore
 53 |         template: createTemplate([
 54 |           h('div', [], [
 55 |             h('p', [], ['foo content']),
 56 |             h('slot', [a('foo', 'test1')], []),
 57 |             h('slot', [a('name', 'test'), a('foo', 'test2')], [])
 58 |           ])
 59 |         ]),
 60 |       },
 61 |     }
 62 | 
 63 |     const vm = render(
 64 |       template,
 65 |       [],
 66 |       [],
 67 |       [
 68 |         {
 69 |           name: 'Foo',
 70 |           uri: 'file://Foo.vue',
 71 |         },
 72 |       ],
 73 |       components,
 74 |     )
 75 | 
 76 |     expect(vm.$el.outerHTML).toMatchSnapshot()
 77 |   })
 78 | 
 79 |   it('resolves template element children as a slot', () => {
 80 |     // prettier-ignore
 81 |     const template = createTemplate([
 82 |       h('Foo', [], [
 83 |         h('template', [a('slot-scope', 'props')], [
 84 |           h('div', [], ['named']),
 85 |           h('div', [], [exp('props.foo')])
 86 |         ])
 87 |       ])
 88 |     ])
 89 | 
 90 |     const components = {
 91 |       'file://Foo.vue': {
 92 |         // prettier-ignore
 93 |         template: createTemplate([
 94 |           h('div', [], [
 95 |             h('slot', [a('foo', 'test')], [])
 96 |           ])
 97 |         ]),
 98 |       },
 99 |     }
100 | 
101 |     const vm = render(
102 |       template,
103 |       [],
104 |       [],
105 |       [
106 |         {
107 |           name: 'Foo',
108 |           uri: 'file://Foo.vue',
109 |         },
110 |       ],
111 |       components,
112 |     )
113 | 
114 |     expect(vm.$el.outerHTML).toMatchSnapshot()
115 |   })
116 | })
117 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/select.spec.ts:
--------------------------------------------------------------------------------
  1 | import { beforeAll, describe, expect, it, vitest } from 'vitest'
  2 | import { createTemplate, h, a, render } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent select event', () => {
  5 |   beforeAll(() => {
  6 |     Element.prototype.getBoundingClientRect = vitest.fn(() => ({
  7 |       x: 0,
  8 |       y: 0,
  9 |       left: 0,
 10 |       right: 0,
 11 |       top: 0,
 12 |       bottom: 0,
 13 |       width: 0,
 14 |       height: 0,
 15 |       toJSON: () => {},
 16 |     }))
 17 |   })
 18 | 
 19 |   it('should catch select event from descendant nodes', () => {
 20 |     const third = h('button', [a('id', 'third')], [])
 21 |     // prettier-ignore
 22 |     const second = h('div', [a('id', 'second')], [
 23 |       third
 24 |     ])
 25 |     const first = h('button', [a('id', 'first')], [])
 26 |     // prettier-ignore
 27 |     const root = h('div', [a('id', 'root')], [
 28 |       first,
 29 |       second
 30 |     ])
 31 | 
 32 |     const template = createTemplate([root])
 33 | 
 34 |     const spy = vitest.fn()
 35 |     const vm = render(
 36 |       template,
 37 |       [],
 38 |       [],
 39 |       [],
 40 |       {},
 41 |       {
 42 |         onSelect: spy,
 43 |       },
 44 |     )
 45 | 
 46 |     vm.$el.querySelector('#root')!.click()
 47 |     vm.$el.querySelector('#first')!.click()
 48 |     vm.$el.querySelector('#second')!.click()
 49 |     vm.$el.querySelector('#third')!.click()
 50 | 
 51 |     expect(spy).toHaveBeenCalledTimes(4)
 52 |     expect(spy).toHaveBeenCalledWith(expect.objectContaining({ ast: root }))
 53 |     expect(spy).toHaveBeenCalledWith(expect.objectContaining({ ast: first }))
 54 |     expect(spy).toHaveBeenCalledWith(expect.objectContaining({ ast: second }))
 55 |     expect(spy).toHaveBeenCalledWith(expect.objectContaining({ ast: third }))
 56 |   })
 57 | 
 58 |   it('should catch select event of child component', () => {
 59 |     const comp = h('Foo', [], [])
 60 |     // prettier-ignore
 61 |     const template = createTemplate([
 62 |       h('div', [], [
 63 |         comp
 64 |       ])
 65 |     ])
 66 | 
 67 |     const components = {
 68 |       'file:///Foo.vue': {
 69 |         // prettier-ignore
 70 |         template: createTemplate([
 71 |           h('div', [], [
 72 |             h('button', [a('id', 'child-button')], [])
 73 |           ])
 74 |         ]),
 75 |       },
 76 |     }
 77 | 
 78 |     const spy = vitest.fn()
 79 |     const vm = render(
 80 |       template,
 81 |       [],
 82 |       [],
 83 |       [
 84 |         {
 85 |           name: 'Foo',
 86 |           uri: 'file:///Foo.vue',
 87 |         },
 88 |       ],
 89 |       components,
 90 |       {
 91 |         onSelect: spy,
 92 |       },
 93 |     )
 94 | 
 95 |     vm.$el.querySelector('#child-button')!.click()
 96 |     expect(spy).toHaveBeenCalledTimes(1)
 97 |     expect(spy).toHaveBeenCalledWith(expect.objectContaining({ ast: comp }))
 98 |   })
 99 | })
100 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/show.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, render, h, d } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent v-show', () => {
 5 |   it('should show if v-show="true"', () => {
 6 |     // prettier-ignore
 7 |     const template = createTemplate([
 8 |       h('p', [d('show', 'true')], [
 9 |         'test'
10 |       ])
11 |     ])
12 | 
13 |     const vm = render(template)
14 |     const p = vm.$el.querySelector('p')!
15 |     expect(p.style.display).not.toBe('none')
16 |   })
17 | 
18 |   it('should hide if v-show="false"', () => {
19 |     // prettier-ignore
20 |     const template = createTemplate([
21 |       h('p', [d('show', 'false')], [
22 |         'test'
23 |       ])
24 |     ])
25 | 
26 |     const vm = render(template)
27 |     const p = vm.$el.querySelector('p')!
28 |     expect(p.style.display).toBe('none')
29 |   })
30 | 
31 |   it('should show if expression is resolved to truthy', () => {
32 |     // prettier-ignore
33 |     const template = createTemplate([
34 |       h('p', [d('show', 'foo')], [
35 |         'test'
36 |       ])
37 |     ])
38 | 
39 |     const vm = render(template, [
40 |       {
41 |         name: 'foo',
42 |         type: 'String',
43 |         default: 'abc',
44 |       },
45 |     ])
46 |     const p = vm.$el.querySelector('p')!
47 |     expect(p.style.display).not.toBe('none')
48 |   })
49 | 
50 |   it('should hide if expression is resolved to falsy', () => {
51 |     // prettier-ignore
52 |     const template = createTemplate([
53 |       h('p', [d('show', 'bar')], [
54 |         'test'
55 |       ])
56 |     ])
57 | 
58 |     const vm = render(template, [
59 |       {
60 |         name: 'bar',
61 |         type: 'Number',
62 |         default: 0,
63 |       },
64 |     ])
65 |     const p = vm.$el.querySelector('p')!
66 |     expect(p.style.display).toBe('none')
67 |   })
68 | 
69 |   it('should hide if cannot be resolved', () => {
70 |     // prettier-ignore
71 |     const template = createTemplate([
72 |       h('p', [d('show', 'foo || bar')], [
73 |         'test'
74 |       ])
75 |     ])
76 | 
77 |     const vm = render(template)
78 |     const p = vm.$el.querySelector('p')!
79 |     expect(p.style.display).toBe('none')
80 |   })
81 | })
82 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/slot.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import { createTemplate, h, render, a } from '../../helpers/template'
  3 | 
  4 | describe('VueComponent slot', () => {
  5 |   it('renders placeholder slot content', () => {
  6 |     // prettier-ignore
  7 |     const template = createTemplate([
  8 |       h('div', [], [
  9 |         h('slot', [], [
 10 |           h('p', [], ['placeholder content'])
 11 |         ])
 12 |       ])
 13 |     ])
 14 | 
 15 |     const vm = render(template)
 16 |     expect(vm.$el.outerHTML).toMatchSnapshot()
 17 |   })
 18 | 
 19 |   it('renders slot content', () => {
 20 |     // prettier-ignore
 21 |     const template = createTemplate([
 22 |       h('Foo', [], [
 23 |         h('p', [], ['injected'])
 24 |       ])
 25 |     ])
 26 | 
 27 |     const components = {
 28 |       'file:///Foo.vue': {
 29 |         // prettier-ignore
 30 |         template: createTemplate([
 31 |           h('div', [], [
 32 |             h('p', [], ['foo content']),
 33 |             h('slot', [], [])
 34 |           ])
 35 |         ]),
 36 |       },
 37 |     }
 38 | 
 39 |     const vm = render(
 40 |       template,
 41 |       [],
 42 |       [],
 43 |       [
 44 |         {
 45 |           name: 'Foo',
 46 |           uri: 'file:///Foo.vue',
 47 |         },
 48 |       ],
 49 |       components,
 50 |     )
 51 | 
 52 |     expect(vm.$el.outerHTML).toMatchSnapshot()
 53 |   })
 54 | 
 55 |   it('renders named slot content', () => {
 56 |     // prettier-ignore
 57 |     const template = createTemplate([
 58 |       h('Foo', [], [
 59 |         h('p', [], ['default']),
 60 |         h('p', [a('slot', 'test')], ['named'])
 61 |       ])
 62 |     ])
 63 | 
 64 |     const components = {
 65 |       'file:///Foo.vue': {
 66 |         // prettier-ignore
 67 |         template: createTemplate([
 68 |           h('div', [], [
 69 |             h('p', [], ['foo content']),
 70 |             h('slot', [a('name', 'test')], [])
 71 |           ])
 72 |         ]),
 73 |       },
 74 |     }
 75 | 
 76 |     const vm = render(
 77 |       template,
 78 |       [],
 79 |       [],
 80 |       [
 81 |         {
 82 |           name: 'Foo',
 83 |           uri: 'file:///Foo.vue',
 84 |         },
 85 |       ],
 86 |       components,
 87 |     )
 88 | 
 89 |     expect(vm.$el.outerHTML).toMatchSnapshot()
 90 |   })
 91 | 
 92 |   it('resolves template element children as the named slot', () => {
 93 |     // prettier-ignore
 94 |     const template = createTemplate([
 95 |       h('Foo', [], [
 96 |         h('template', [a('slot', 'test')], [
 97 |           h('strong', [], ['named']),
 98 |           h('span', [], ['content'])
 99 |         ])
100 |       ])
101 |     ])
102 | 
103 |     const components = {
104 |       'file:///Foo.vue': {
105 |         // prettier-ignore
106 |         template: createTemplate([
107 |           h('div', [], [
108 |             h('slot', [a('name', 'test')], [])
109 |           ])
110 |         ]),
111 |       },
112 |     }
113 | 
114 |     const vm = render(
115 |       template,
116 |       [],
117 |       [],
118 |       [
119 |         {
120 |           name: 'Foo',
121 |           uri: 'file:///Foo.vue',
122 |         },
123 |       ],
124 |       components,
125 |     )
126 | 
127 |     expect(vm.$el.outerHTML).toMatchSnapshot()
128 |   })
129 | })
130 | 


--------------------------------------------------------------------------------
/tests/view/VueComponent/text.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createTemplate, h, d, render } from '../../helpers/template'
 3 | 
 4 | describe('VueComponent v-text', () => {
 5 |   it('should render text into an element', () => {
 6 |     // prettier-ignore
 7 |     const template = createTemplate([
 8 |       h('p', [d('text', 'message')], [])
 9 |     ])
10 | 
11 |     const vm = render(
12 |       template,
13 |       [],
14 |       [
15 |         {
16 |           name: 'message',
17 |           default: 'Hello text!',
18 |         },
19 |       ],
20 |     )
21 |     const p = vm.$el.querySelector('p')!
22 |     expect(p.textContent).toBe('Hello text!')
23 |   })
24 | 
25 |   it('should overwrite default content', () => {
26 |     // prettier-ignore
27 |     const template = createTemplate([
28 |       h('p', [d('text', 'message')], [
29 |         h('span', [], ['This should not be rendered'])
30 |       ])
31 |     ])
32 | 
33 |     const vm = render(
34 |       template,
35 |       [],
36 |       [
37 |         {
38 |           name: 'message',
39 |           default: 'overwritten',
40 |         },
41 |       ],
42 |     )
43 |     const p = vm.$el.querySelector('p')!
44 |     expect(p.textContent).toBe('overwritten')
45 |     expect(p.querySelector('span')).toBe(null)
46 |   })
47 | 
48 |   it('should not render if the value is not resolved', () => {
49 |     // prettier-ignore
50 |     const template = createTemplate([
51 |       h('p', [d('text', 'message')], [])
52 |     ])
53 | 
54 |     const vm = render(template)
55 |     const p = vm.$el.querySelector('p')!
56 |     expect(p.textContent).toBe('')
57 |   })
58 | })
59 | 


--------------------------------------------------------------------------------
/tests/view/eval.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { evalWithScope, EvalSuccess, EvalError } from '../../src/view/eval'
 3 | 
 4 | describe('Expression evaluation', () => {
 5 |   it('should evaluate JS expression', () => {
 6 |     const res = evalWithScope('1 + 2', {}) as EvalSuccess
 7 |     expect(res.value).toBe(3)
 8 |   })
 9 | 
10 |   it('should able to use a variable in scope', () => {
11 |     const res = evalWithScope('"Hello, " + person', {
12 |       person: 'John',
13 |     }) as EvalSuccess
14 |     expect(res.value).toBe('Hello, John')
15 |   })
16 | 
17 |   it('should return error if the expression uses a variable which scope does not have', () => {
18 |     const res = evalWithScope('foo + bar', { foo: 'Test' }) as EvalError
19 |     expect(res.error.message).toBe('bar is not defined')
20 |   })
21 | 
22 |   it('should not mutate scope object', () => {
23 |     const scope = { foo: 'initial' }
24 |     const res = evalWithScope('foo = "mutated"', scope) as EvalSuccess
25 |     expect(res.value).toBe('mutated')
26 |     expect(scope.foo).toBe('initial')
27 |   })
28 | })
29 | 


--------------------------------------------------------------------------------
/tests/view/store/style-matcher.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { createStyle, rule, selector } from '../../helpers/style'
 3 | import { StyleMatcher } from '../../../src/view/store/style-matcher'
 4 | import { createTemplate, h, a } from '../../helpers/template'
 5 | 
 6 | describe('StyleMatcher', () => {
 7 |   it('should match specified uri styles', () => {
 8 |     const style1 = createStyle([rule([selector({ tag: 'p' })])])
 9 |     const style2 = createStyle([rule([selector({ class: ['foo'] })])])
10 | 
11 |     const matcher = new StyleMatcher()
12 |     matcher.register('file:///test1.vue', [style1])
13 |     matcher.register('file:///test2.vue', [style2])
14 | 
15 |     const actual = matcher.match(
16 |       'file:///test1.vue',
17 |       createTemplate([h('p', [a('class', 'foo')], [])]),
18 |       [0],
19 |     )
20 |     expect(actual.length).toBe(1)
21 |     expect(actual[0].selectors[0].tag).toBe('p')
22 |   })
23 | 
24 |   it('should ignore if styles are not registered with uri', () => {
25 |     const matcher = new StyleMatcher()
26 |     const actual = matcher.match(
27 |       'file:///test1.vue',
28 |       createTemplate([h('p', [a('class', 'foo')], [])]),
29 |       [0],
30 |     )
31 |     expect(actual.length).toBe(0)
32 |   })
33 | 
34 |   it('should unregister styles from matcher', () => {
35 |     const style = createStyle([rule([selector({ tag: 'p' })])])
36 | 
37 |     const matcher = new StyleMatcher()
38 |     matcher.register('file:///test1.vue', [style])
39 | 
40 |     let actual = matcher.match(
41 |       'file:///test1.vue',
42 |       createTemplate([h('p', [a('class', 'foo')], [])]),
43 |       [0],
44 |     )
45 |     expect(actual.length).toBe(1)
46 |     expect(actual[0].selectors[0].tag).toBe('p')
47 | 
48 |     matcher.unregister('file:///test1.vue')
49 | 
50 |     actual = matcher.match(
51 |       'file:///test1.vue',
52 |       createTemplate([h('p', [a('class', 'foo')], [])]),
53 |       [0],
54 |     )
55 |     expect(actual.length).toBe(0)
56 |   })
57 | 
58 |   it('should clear all styles', () => {
59 |     const style1 = createStyle([rule([selector({ tag: 'p' })])])
60 |     const style2 = createStyle([rule([selector({ class: ['foo'] })])])
61 | 
62 |     const matcher = new StyleMatcher()
63 |     matcher.register('file:///test1.vue', [style1])
64 |     matcher.register('file:///test2.vue', [style2])
65 | 
66 |     matcher.clear()
67 | 
68 |     const actual1 = matcher.match(
69 |       'file:///test1.vue',
70 |       createTemplate([h('p', [a('class', 'foo')], [])]),
71 |       [0],
72 |     )
73 |     const actual2 = matcher.match(
74 |       'file:///test2.vue',
75 |       createTemplate([h('p', [a('class', 'foo')], [])]),
76 |       [0],
77 |     )
78 | 
79 |     expect(actual1.length).toBe(0)
80 |     expect(actual2.length).toBe(0)
81 |   })
82 | })
83 | 


--------------------------------------------------------------------------------
/tests/view/ui-logic/editing.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import {
 3 |   updateStyleValue,
 4 |   getTextOffset,
 5 | } from '../../../src/view/ui-logic/editing'
 6 | 
 7 | describe('getTextOffset', () => {
 8 |   it('just uses given offset if the node is text node', () => {
 9 |     const text = document.createTextNode('test')
10 |     const offset = getTextOffset(text, 3)
11 |     expect(offset).toBe(3)
12 |   })
13 | 
14 |   it('converts node offset to text offset', () => {
15 |     const root = document.createElement('div')
16 | 
17 |     const a = document.createElement('p')
18 |     a.textContent = 'test1'
19 | 
20 |     const b = document.createTextNode('test2')
21 | 
22 |     const c = document.createElement('div')
23 |     c.textContent = 'test3'
24 | 
25 |     root.appendChild(a)
26 |     root.appendChild(b)
27 |     root.appendChild(c)
28 | 
29 |     const offset = getTextOffset(root, 2)
30 |     expect(offset).toBe(10)
31 |   })
32 | })
33 | 
34 | describe('updateStyleValue', () => {
35 |   it('updates numeric value', () => {
36 |     const updated = updateStyleValue('10px 20px', 7, 1)
37 |     expect(updated.value).toBe('10px 21px')
38 |     expect(updated.range).toEqual([5, 9])
39 |   })
40 | 
41 |   it('does not updates textual value', () => {
42 |     const updated = updateStyleValue('1px solid black', 6, 1)
43 |     expect(updated.value).toBe('1px solid black')
44 |     expect(updated.range).toBe(undefined)
45 |   })
46 | 
47 |   it('boundary: start, positive', () => {
48 |     const updated = updateStyleValue('inset 1px', 6, 1)
49 |     expect(updated.value).toBe('inset 2px')
50 |     expect(updated.range).toEqual([6, 9])
51 |   })
52 | 
53 |   it('boundary: start, negative', () => {
54 |     const updated = updateStyleValue('inset 1px', 5, 1)
55 |     expect(updated.value).toBe('inset 1px')
56 |     expect(updated.range).toBe(undefined)
57 |   })
58 | 
59 |   it('boundary: end, positive', () => {
60 |     const updated = updateStyleValue('1px solid', 2, 1)
61 |     expect(updated.value).toBe('2px solid')
62 |     expect(updated.range).toEqual([0, 3])
63 |   })
64 | 
65 |   it('boundary: end, negative', () => {
66 |     const updated = updateStyleValue('1px solid', 3, 1)
67 |     expect(updated.value).toBe('1px solid')
68 |     expect(updated.range).toBe(undefined)
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "bundler",
 6 |     "lib": [
 7 |       "ES2022",
 8 |       "DOM",
 9 |       "DOM.Iterable"
10 |     ],
11 |     "useDefineForClassFields": true,
12 |     "esModuleInterop": true,
13 |     "strict": true,
14 |     "noUnusedLocals": true,
15 |     "noUnusedParameters": true,
16 |     "noFallthroughCasesInSwitch": true,
17 |     "allowImportingTsExtensions": true,
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "skipLibCheck": true,
21 |     "sourceMap": true,
22 |     "allowJs": true,
23 |     "noEmit": true
24 |   },
25 |   "include": [
26 |     "src/**/*.ts",
27 |     "src/**/*.vue",
28 |     "types/**/*.d.ts",
29 |     "tests/**/*.ts"
30 |   ]
31 | }


--------------------------------------------------------------------------------
/tsconfig.main.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "outDir": "lib",
 7 |     "noEmit": false,
 8 |     "allowImportingTsExtensions": false
 9 |   },
10 |   "exclude": [
11 |     "src/view/**",
12 |     "tests/**"
13 |   ]
14 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | ///<reference types="vitest" />
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 | 
 8 |   clearScreen: false,
 9 | 
10 |   build: {
11 |     outDir: 'lib',
12 |     assetsDir: 'app',
13 |     emptyOutDir: false,
14 |   },
15 | 
16 |   server: {
17 |     port: 50000,
18 |     proxy: {
19 |       '/api': {
20 |         target: 'http://localhost:50001',
21 |         ws: true,
22 |       },
23 |     },
24 |   },
25 | 
26 |   test: {
27 |     environment: 'jsdom',
28 |     setupFiles: ['./tests/setup.ts'],
29 |   },
30 | })
31 | 


--------------------------------------------------------------------------------