├── .gitignore
├── src
    ├── server
    │   ├── vars.styl
    │   ├── index.js
    │   ├── router.js
    │   ├── components
    │   │   ├── agents
    │   │   │   ├── index.js
    │   │   │   ├── range.vue
    │   │   │   ├── number.vue
    │   │   │   ├── boolean.vue
    │   │   │   ├── enum.vue
    │   │   │   ├── text.vue
    │   │   │   ├── trigger.vue
    │   │   │   └── agent.vue
    │   │   ├── search.vue
    │   │   └── group.vue
    │   ├── modules
    │   │   ├── settings.vue
    │   │   ├── devices.vue
    │   │   ├── frame.vue
    │   │   ├── scale.vue
    │   │   ├── rotate.vue
    │   │   ├── log.vue
    │   │   ├── navigation.vue
    │   │   ├── headline.vue
    │   │   ├── layout.vue
    │   │   ├── agents.vue
    │   │   └── panel.vue
    │   ├── transitions
    │   │   └── expand.vue
    │   ├── app.vue
    │   └── store.js
    ├── client
    │   ├── layouts
    │   │   ├── index.js
    │   │   ├── simple.vue
    │   │   ├── centered.vue
    │   │   └── fluid.vue
    │   ├── index.js
    │   ├── api.js
    │   ├── types.js
    │   ├── app.vue
    │   └── store.js
    └── connector.js
├── www
    ├── microscope.html
    └── index.html
├── bin
    └── whiteroom
├── index.js
├── logo.svg
├── package.json
├── LICENSE
├── api
    └── index.js
├── webpack.config.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/src/server/vars.styl:
--------------------------------------------------------------------------------
1 | $fg=#00c300
2 | $fg=#2dd28d
3 | $bg=#ffffff
4 | $vp=#f6f6f6
5 | $bd=darken($vp, 5%)
6 | 


--------------------------------------------------------------------------------
/src/client/layouts/index.js:
--------------------------------------------------------------------------------
1 | import simple from './simple.vue'
2 | import centered from './centered.vue'
3 | import fluid from './fluid.vue'
4 | 
5 | export default {
6 |   centered, fluid, simple
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import store from './store'
 3 | 
 4 | import App from './app.vue'
 5 | 
 6 | new Vue({
 7 |   store,
 8 |   render: h => h(App)
 9 | }).$mount("#microscope")
10 | 


--------------------------------------------------------------------------------
/src/server/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import store from './store'
 3 | import router from './router'
 4 | 
 5 | new Vue({
 6 |   store,
 7 |   router,
 8 |   render: h => h(Vue.component('RouterView'))
 9 | }).$mount("#whiteroom")
10 | 


--------------------------------------------------------------------------------
/src/server/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | 
 4 | import App from "./app.vue";
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   routes: [{
10 |     path: "*",
11 |     component: App
12 |   }]
13 | });
14 | 


--------------------------------------------------------------------------------
/src/client/layouts/simple.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   abstract: true,
 4 |   functional: true,
 5 | 
 6 |   render(h, { props, children }) {
 7 |     const { child, ...options } = props.proxy
 8 | 
 9 |     return h(child, options, children)
10 |   }
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/src/server/components/agents/index.js:
--------------------------------------------------------------------------------
 1 | import boolean from './boolean.vue'
 2 | import number from './number.vue'
 3 | import range from './range.vue'
 4 | import text from './text.vue'
 5 | 
 6 | import _enum from './enum.vue'
 7 | 
 8 | export default {
 9 |   boolean,
10 |   number,
11 |   range,
12 |   text,
13 |   'enum': _enum
14 | }
15 | 


--------------------------------------------------------------------------------
/src/server/components/agents/range.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input type="range" :value="value" @input="e => $emit('input', e.target.value)" v-bind="$attrs" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     value: {
 9 |       type: String,
10 |       default: ''
11 |     }
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/server/components/agents/number.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input type="number" :value="value" @input="e => $emit('input', e.target.value)" v-bind="$attrs" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     value: {
 9 |       type: [String, Number],
10 |       default: ''
11 |     }
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/client/api.js:
--------------------------------------------------------------------------------
 1 | export default api => {
 2 |   // execute message cue
 3 |   if (Array.isArray(window.__whiteroom__)) {
 4 |     window.__whiteroom__
 5 |       .filter(({ command }) => command in api)
 6 |       .forEach(({ command, parameters }) => api[command](parameters))
 7 |   }
 8 | 
 9 |   // deliver api to userland
10 |   window.__whiteroom__ = api
11 | }
12 | 


--------------------------------------------------------------------------------
/www/microscope.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>microscope</title>
 6 |     <style>
 7 |     html, body {
 8 |       position: relative;
 9 |       width: 100vw;
10 |       height: 100vh;
11 |       margin: 0;
12 |       padding: 0;
13 |       overflow: scroll;
14 |     }
15 |   </style>
16 |   </head>
17 |   <body>
18 |     <div id="microscope"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/server/components/agents/boolean.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input type="checkbox" :ckecked="value === true || value === 'true'" @click="e => $emit('input', e.target.checked.toString())" v-bind="$attrs" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     value: {
 9 |       type: [String, Boolean],
10 |       default: 'false'
11 |     }
12 |   }
13 | }
14 | </script>
15 | 
16 | <style lang="stylus" scoped>
17 | input
18 |   display inline !important
19 |   width 1rem !important
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/server/components/agents/enum.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <select @input="e => $emit('input', e.target.value)" v-bind="$attrs">
 3 |     <option :key="i" v-for="(v, k, i) in $props.enum" :value="Array.isArray($props.enum) ? v : k">{{ v }}</option>
 4 |   </select>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     enum: {
11 |       type: [Array, Object],
12 |       default() { return [] },
13 |     },
14 | 
15 |     value: {
16 |       type: String,
17 |       default: '',
18 |     }
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/client/layouts/centered.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   abstract: true,
 4 |   functional: true,
 5 | 
 6 |   render(h, { props, injections, children }) {
 7 |     const { child, ...options } = props.proxy
 8 | 
 9 |     return h('div', { class: 'centeredlayout' }, [
10 |       h(child, options, children)
11 |     ])
12 |   }
13 | }
14 | </script>
15 | 
16 | <style lang="stylus">
17 | .centeredlayout
18 |   position absolute
19 |   left 50%
20 |   top 50%
21 |   max-width 100vw
22 |   max-height 100vh
23 |   transform translate(-50%, -50%)
24 | </style>
25 | 


--------------------------------------------------------------------------------
/bin/whiteroom:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | const { existsSync } = require('fs')
 3 | const { resolve } = require('path')
 4 | 
 5 | // convenient argv
 6 | let options = require('minimist')(process.argv.slice(2))
 7 | 
 8 | // ignore argv if config file is here or provided
 9 | if (existsSync(resolve(process.env.PWD, '.whiteroomrc')))
10 |   options = require(resolve(process.env.PWD, '.whiteroomrc'))
11 | else if (!!options.config)
12 |   options = require(resolve(process.env.PWD, options.config))
13 | 
14 | const { entrypoint, host, port } = options
15 | 
16 | require('../index')({ entrypoint, host, port })
17 | 
18 | 


--------------------------------------------------------------------------------
/src/server/modules/settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="settings">
 3 |     <devices />
 4 |     <rotate />
 5 |     <layout />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Devices from './devices.vue'
11 | import Rotate from './rotate.vue'
12 | import Layout from './layout.vue'
13 | 
14 | export default {
15 |   components: { Devices, Rotate, Layout }
16 | }
17 | </script>
18 | 
19 | <style lang="stylus" scoped>
20 | @import('../vars.styl')
21 | 
22 | .settings
23 |   display flex
24 |   flex-direction row
25 |   justify-content flex-end
26 |   height 2rem
27 |   border-bottom 1px solid $bd
28 | </style>
29 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, user-scalable=no">
 6 |     <title>whiteroom</title>
 7 |     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
 8 |     <style>
 9 |       html, body {
10 |         position: relative;
11 |         min-width: 100vw;
12 |         min-height: 100vh;
13 |         margin: 0;
14 |         padding: 0;
15 |         font-family: 'Montserrat', sans-serif;
16 |       }
17 | 
18 |       * { box-sizing: border-box; }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="whiteroom"></div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/server/components/agents/text.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input v-if="!multiline" type="text" :value="value" @input="e => $emit('input', e.target.value)" v-bind="$attrs" />
 3 |   <textarea v-else :value="value" @input="e => $emit('input', e.target.value)" v-bind="$attrs" />
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     value: {
10 |       type: String,
11 |       default: ''
12 |     },
13 | 
14 |     multiline: {
15 |       type: Boolean,
16 |       default: false,
17 |     },
18 |   }
19 | }
20 | </script>
21 | 
22 | <style lang="stylus" scoped>
23 | textarea
24 |   resize vertical
25 |   min-height calc(2em + 1px)
26 |   height calc(2em + 1px)
27 |   max-height 10em
28 | </style>
29 | 
30 | 


--------------------------------------------------------------------------------
/src/server/components/agents/trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="trigger" @click="() => $root.$emit('frame', 'trigger', trigger)">trigger</button>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     trigger: String,
 9 |   }
10 | }
11 | </script>
12 | 
13 | <style lang="stylus" scoped>
14 | @import('../../vars.styl')
15 | 
16 | .trigger
17 |   background transparent !important
18 |   border 2px solid $fg !important
19 |   color $fg !important
20 |   font-weight bold !important
21 |   text-transform uppercase
22 |   cursor pointer
23 |   transition background .2s
24 | 
25 |   &:hover
26 |     background rgba(#fff, .5) !important
27 | 
28 |   &:active
29 |     background rgba(#fff, .1) !important
30 | </style>
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const Webpack = require('webpack')
 3 | const Server = require('webpack-dev-server')
 4 | 
 5 | module.exports = ({ entrypoint, host, port }) => {
 6 |   const config = require('./webpack.config')
 7 | 
 8 |   if (!!entrypoint)
 9 |     config.entry.experiments = resolve(process.env.PWD, entrypoint)
10 | 
11 |   if (!!host)
12 |     config.devServer.host = host
13 | 
14 |   if (!!port)
15 |     config.devServer.port = parseInt(port)
16 | 
17 |   Server.addDevServerEntrypoints(config, config.devServer)
18 | 
19 |   const compiler = Webpack(config);
20 | 
21 |   const server = new Server(compiler, config.devServer);
22 | 
23 |   server.listen(
24 |     config.devServer.port, config.devServer.host,
25 |     () => {
26 |     console.log(`Starting server on http://${config.devServer.host}:${config.devServer.port}`);
27 |   });
28 | }
29 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="302" height="302" viewBox="0 0 302 302">
 2 |   <defs>
 3 |     <rect id="logo-a" width="270" height="270" x="30" y="30" rx="30"/>
 4 |   </defs>
 5 |   <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
 6 |     <path fill="#FFF" stroke="#B4B4B4" stroke-dasharray="10 2" d="M-5.68434189e-14,0 L100.302665,4.26325641e-14 L130.527998,52.3519987 L160.753331,4.26325641e-14 L209.055996,1.42108547e-14 L261.759993,0 L130.879997,226.689328 L-5.68434189e-14,0 Z"/>
 7 |     <path stroke="#B4B4B4" stroke-dasharray="10 2" d="M209.055996,0 L130.527998,136.01333 L52,0"/>
 8 |     <use fill="#DBF1FF" xlink:href="#logo-a" style="mix-blend-mode:multiply"/>
 9 |     <rect width="271" height="271" x="29.5" y="29.5" stroke="#D2D2D2" rx="30"/>
10 |     <rect width="265" height="265" x="32.5" y="32.5" stroke="#FFF" stroke-linejoin="square" stroke-width="5" rx="30"/>
11 |   </g>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-whiteroom",
 3 |   "version": "1.3.6",
 4 |   "description": "storybook copycat with Vue.js in mind",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "MIT",
11 |   "dependencies": {
12 |     "@babel/core": "^7.1.2",
13 |     "@babel/preset-env": "^7.1.0",
14 |     "babel-loader": "^8.0.4",
15 |     "clean-terminal-webpack-plugin": "^1.1.0",
16 |     "clean-webpack-plugin": "^0.1.19",
17 |     "css-loader": "^1.0.0",
18 |     "gsap": "^2.0.2",
19 |     "html-webpack-plugin": "^3.2.0",
20 |     "minimist": "^1.2.0",
21 |     "query-string": "^6.2.0",
22 |     "stylus": "^0.54.5",
23 |     "stylus-loader": "^3.0.2",
24 |     "vue": "^2.5.17",
25 |     "vue-loader": "^15.4.2",
26 |     "vue-router": "^3.0.1",
27 |     "vue-style-loader": "^4.1.2",
28 |     "vue-template-compiler": "^2.5.17",
29 |     "vuex": "^3.0.1",
30 |     "webpack": "^4.20.2",
31 |     "webpack-dev-server": "^3.4.1"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/connector.js:
--------------------------------------------------------------------------------
 1 | export default bridge => {
 2 |   let listeners = []
 3 | 
 4 |   window.addEventListener('message', event => {
 5 |     if (event.data.whiteroom) {
 6 |       listeners.forEach(({ cb }) => cb(event.data))
 7 |       listeners = listeners.filter(l => l.i === -1 || --l.i > 0)
 8 |     }
 9 |   })
10 | 
11 |   return {
12 |     bridge,
13 | 
14 |     on(cb) {
15 |       listeners.push({ cb, i: -1 })
16 |       return this
17 |     },
18 | 
19 |     once(cb) {
20 |       listeners.push({ cb, i: 1 })
21 |       return this
22 |     },
23 | 
24 |     off(cb) {
25 |       const i = listeners.find(l => l.cb === cb)
26 | 
27 |       if (i !== -1)
28 |         listeners.splice(i, 1)
29 | 
30 |       return this
31 |     },
32 | 
33 |     emit(command, parameters) {
34 |       if (!this.bridge)
35 |         return
36 | 
37 |       try {
38 |         this.bridge.postMessage({
39 |           whiteroom: true, command, parameters,
40 |         }, window.origin)
41 |       }
42 |       catch(err) { console.log(err) }
43 | 
44 |       return this
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/client/types.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   this converts a typed type of a prop to a string type definition,
 3 |   because we cannot serialize "String" or any function to pass in
 4 |   postMessage...
 5 | */
 6 | 
 7 | export const convert = definition => {
 8 |   if (!!definition.enum)
 9 |     return 'enum'
10 | 
11 |   switch(definition.type) {
12 |     case Number:
13 |       return definition.range ? 'range' : 'number'
14 | 
15 |     case Boolean:
16 |       return 'boolean'
17 | 
18 |     case Date:
19 |       return 'date'
20 | 
21 |     default:
22 |     case String:
23 |       return 'text'
24 |   }
25 | }
26 | 
27 | /*
28 |   values come from querystring,
29 |   so we should consider string as input value
30 |   and output a casted value according to property definition
31 | */
32 | 
33 | export const cast = (definition, value) => {
34 |   if (definition.type === Number)
35 |     return parseFloat(value)
36 |   else if (definition.type === Date)
37 |     return new Date(value)
38 |   else if (definition.type === Boolean)
39 |     return value === 'true'
40 | 
41 |   return value
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Julien Barbay
 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 | 


--------------------------------------------------------------------------------
/src/server/transitions/expand.vue:
--------------------------------------------------------------------------------
 1 |  <script>
 2 |  export default {
 3 |   name: 'TransitionExpand',
 4 |   functional: true,
 5 | 
 6 |   render(h, context) {
 7 |     const data = {
 8 |       props: { name: 'expand', },
 9 | 
10 |       on: {
11 |         enter(el) {
12 |           Object.entries({
13 |             position: 'absolute',
14 |             visibility: 'hidden',
15 |             width: getComputedStyle(el).width,
16 |             height: 'auto',
17 |           }).forEach(([k, v]) => el.style.setProperty(k, v))
18 | 
19 |           const height = getComputedStyle(el).height;
20 | 
21 |           Object.entries({
22 |             position: null,
23 |             visibility: null,
24 |             width: null,
25 |             height: 0,
26 |           }).forEach(([k, v]) => el.style.setProperty(k, v))
27 | 
28 |           setTimeout(() => el.style.height = height)
29 |         },
30 | 
31 |         leave(el) {
32 |           el.style.height = getComputedStyle(el).height;
33 |           setTimeout(() => el.style.height = 0)
34 |         },
35 |       }
36 |     }
37 | 
38 |     return h('transition', data, context.children)
39 |   },
40 | }
41 |  </script>
42 | 


--------------------------------------------------------------------------------
/src/client/layouts/fluid.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   abstract: true,
 4 |   functional: true,
 5 | 
 6 |   render(h, { props, children }) {
 7 |     const { child, ...options } = props.proxy
 8 | 
 9 |     const grid = [
10 |       'b r',  'b',   'b l r',  'b',  'b l',
11 |       'r', null, 'l r', null, 'l',
12 |       'r t b',  't b',  'f',  't b',  'l t b',
13 |       'r', null, 'l r', null, 'l',
14 |       't r',  't',   't l r',  't',  't l',
15 |     ]
16 | 
17 |     return h('div', { class: 'fluidlayout' }, grid.map(e => (
18 |       e === null ? h(child, options, children)
19 |                  : h('div', { class: e })
20 |     )))
21 |   }
22 | }
23 | </script>
24 | 
25 | <style lang="stylus">
26 | .fluidlayout
27 |   display grid
28 |   width calc(100vw - 2rem)
29 |   height calc(100vh - 2rem)
30 |   margin 1rem
31 | 
32 |   grid-template-columns 1rem min-content 2rem auto 1rem
33 |   grid-template-rows 1rem min-content 2rem auto 1rem
34 | 
35 |   $style = 1px dashed #888
36 | 
37 |   .f
38 |     border $style
39 | 
40 |   .t
41 |     border-top $style
42 | 
43 |   .r
44 |    border-right $style
45 | 
46 |   .b
47 |    border-bottom $style
48 | 
49 |   .l
50 |     border-left $style
51 | </style>
52 | 
53 | 


--------------------------------------------------------------------------------
/src/server/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="whiteroom">
 3 |     <headline />
 4 | 
 5 |     <panel name="navigation" class="left">
 6 |       <navigation />
 7 |     </panel>
 8 | 
 9 |     <frame />
10 | 
11 |     <panel class="right" name="controls" closet>
12 |       <settings />
13 |       <scale />
14 |       <agents />
15 |       <log slot="closet" />
16 |     </panel>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import Headline from './modules/headline.vue'
22 | import Frame from './modules/frame.vue'
23 | import Navigation from './modules/navigation.vue'
24 | import Panel from './modules/panel.vue'
25 | import Settings from './modules/settings.vue'
26 | import Scale from './modules/scale.vue'
27 | import Agents from './modules/agents.vue'
28 | import Log from './modules/log.vue'
29 | 
30 | export default {
31 |   components: { Headline, Frame, Navigation, Panel, Settings, Scale, Agents, Log },
32 | }
33 | </script>
34 | 
35 | <style lang="stylus">
36 | body
37 |   background #f0f0f0
38 | 
39 | .whiteroom
40 |   position absolute
41 |   overflow hidden
42 |   top 0
43 |   right 0
44 |   bottom 0
45 |   left 0
46 | 
47 | .panel.left
48 |   height auto
49 | 
50 | .panel.right
51 |   width 20rem
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/server/components/search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="search">
 3 |     <fieldset>
 4 |       <input ref="input" type="text" v-model="input" />
 5 |       <span @click="input = ''">⨯</span>
 6 |     </fieldset>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     value: String
14 |   },
15 | 
16 |   data() { return {
17 |     input: this.value
18 |   }; },
19 | 
20 |   watch: {
21 |     input(val) {
22 |       this.$emit('input', val)
23 |     }
24 |   }
25 | }
26 | </script>
27 | 
28 | 
29 | <style lang="stylus" scoped>
30 | @import('../vars.styl')
31 | 
32 | .search fieldset
33 |     position relative
34 |     height 1.5rem
35 |     margin 0
36 |     padding 0
37 |     background #fff
38 |     border 1px solid #eee
39 | 
40 |   input
41 |     display block
42 |     width 100%
43 |     height 100%
44 |     padding .25rem
45 |     background transparent
46 |     border none
47 |     outline none
48 |     color #000
49 |     font-family inherit
50 |     font-size .5rem
51 |     letter-spacing .1rem
52 | 
53 |   span
54 |     position absolute
55 |     display block
56 |     top 0
57 |     right 0
58 |     width calc(1.5rem - 2px)
59 |     height calc(1.5rem - 2px)
60 |     cursor pointer
61 |     color $fg
62 |     line-height 1.1rem
63 |     text-align center
64 | 
65 |     &:hover
66 |       background #eee
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/server/modules/devices.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="devices">
 3 |     <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'>
 4 |       <path d='M58,13h-4V9h-4V5H8v4H4v4H0v32h4v4h4v4h42v-4h4v-4h4V13z M2,43V15h2v28H2z M6,47v-2V13v-2h2v36H6z M48,51H10v-2V9V7h38v2v40V51z M52,47h-2V11h2v2v32V47z M56,43h-2V15h2V43z' fill='#666'/>
 5 |     </svg>
 6 | 
 7 |     <select :value="device" @input="e => $store.commit('device', e.target.value)">
 8 |       <option :key="i" v-for="(device, i) in devices">{{ device }}</option>
 9 |     </select>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { mapState } from 'vuex'
15 | 
16 | export default {
17 |   computed: {
18 |     ...mapState({
19 |       devices: state => Object.keys(state.devices),
20 |       device: state => state.device
21 |     })
22 |   },
23 | }
24 | </script>
25 | 
26 | <style lang="stylus" scoped>
27 | .devices
28 |   position relative
29 |   width 1rem
30 |   height 1rem
31 |   margin .5rem
32 |   cursor pointer
33 | 
34 |   svg
35 |     position absolute
36 |     left 0
37 |     top 0
38 |     width 100%
39 |     height 100%
40 |     pointer-events none
41 | 
42 |   select
43 |     width 100%
44 |     height 100%
45 |     border none
46 |     cursor pointer
47 |     outline none
48 |     font-size 0
49 |     -moz-appearance none
50 |     -webkit-appearance none
51 | 
52 |     &:-ms-expand
53 |       display none
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/server/modules/frame.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="frame" :style="dimensions">
 3 |     <iframe
 4 |         ref="frame"
 5 |         :src="`./microscope.html#${$route.fullPath}`"
 6 |         @load="frame.bridge = $refs.frame.contentWindow" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapState } from 'vuex'
12 | import connect from '../../connector'
13 | 
14 | export default {
15 |   computed: {
16 |     ...mapState(['devices', 'device', 'rotate']),
17 | 
18 |     dimensions() {
19 |       const style = this.devices[this.device];
20 |       return this.rotate ? { width: style.height, height: style.width } : style
21 |     },
22 |   },
23 | 
24 |   data() { return {
25 |     frame: connect()
26 |   }; },
27 | 
28 |   beforeCreate() {
29 |     this.$root.$on('frame', (command, parameters) => {
30 |       this.frame.emit(command, parameters)
31 |     })
32 |   },
33 | }
34 | </script>
35 | 
36 | <style lang="stylus" scoped>
37 | .frame
38 |   z-index 0
39 |   position absolute
40 |   left 50%
41 |   top 50%
42 |   width 100%
43 |   height 100%
44 |   transform translate(-50%, -50%)
45 |   background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAPklEQVQ4T+2TsQkAQAwCE7L/xgZ/AsEyD1qLxeE1SZaR3TVaVZ1BySkMJZoPbgPAMmVmPFMyKDmFoTbl/G0e08Nta2ZMKSUAAAAASUVORK5CYII=')
46 |   transition width .4s, height .4s, transform .4s
47 |   box-shadow 0 0 1rem -.25rem rgba(0,0,0,.5)
48 | 
49 | .frame > iframe
50 |   width 100%
51 |   height 100%
52 |   border none
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/server/components/group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="group" :class="{ complete: toggle }">
 3 |     <div @click="toggle = !toggle">{{ name }}</div>
 4 |     <transition-expand>
 5 |       <section v-if="toggle"><slot /></section>
 6 |     </transition-expand>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import TransitionExpand from '../transitions/expand.vue'
12 | 
13 | export default {
14 |   components: { TransitionExpand },
15 | 
16 |   props: {
17 |     name: {
18 |       type: String,
19 |       default: '',
20 |     },
21 |   },
22 | 
23 |   data: () => ({ toggle: false })
24 | }
25 | </script>
26 | 
27 | <style lang="stylus" scoped>
28 | @import('../vars.styl')
29 | 
30 | .group
31 |   & > div
32 |     position relative
33 |     display block
34 |     width 100%
35 |     padding 1rem
36 |     font-size .8rem
37 |     font-weight bold
38 |     cursor pointer
39 | 
40 |     &:after
41 |       content ''
42 |       position absolute
43 |       right 1rem
44 |       top 50%
45 |       width .3rem
46 |       height .3rem
47 |       border-top .2rem solid $fg
48 |       border-right .2rem solid $fg
49 |       transition transform .4s
50 |       transform translateY(-50%) rotate(45deg)
51 | 
52 |   &.complete > div:after
53 |       transform translateY(-50%) rotate(135deg)
54 | 
55 |   section
56 |     overflow hidden
57 | 
58 |     &.expand-enter-active, &.expand-leave-active
59 |       transition opacity .4s, height .4s
60 | 
61 |     &.expand-enter, &.expand-leave-to
62 |       opacity 0
63 | 
64 |   & + .group
65 |     border-top 1px solid $bd
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/server/modules/scale.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="scale"
 3 |     @mousemove="e => e.buttons > 0 ? update(e.offsetX / e.target.clientWidth) : null"
 4 |     @dblclick="reset()">
 5 |     <div ref="track" class="track">
 6 |       <div class="thumb" :style="`width: ${100 * (fontsize - MIN) / (MAX - MIN)}%`" />
 7 |     </div>
 8 | 
 9 |     <p class="info">font-size <strong>{{fontsize.toFixed(3)}}em</strong></p>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { mapState } from 'vuex'
15 | 
16 | const MIN = .25
17 | const MAX = 2.5
18 | 
19 | export default {
20 |   computed: {
21 |     ...mapState(['fontsize'])
22 |   },
23 | 
24 |   data() {
25 |     return {
26 |       MIN, MAX
27 |     }
28 |   },
29 | 
30 |   methods: {
31 |     update(val) {
32 |       this.$store.commit('scale', MIN + val * (MAX - MIN))
33 |       this.$root.$emit('frame', 'scale', MIN + val * (MAX - MIN))
34 |     },
35 | 
36 |     reset() {
37 |       this.$store.commit('scale', 1)
38 |       this.$root.$emit('frame', 'scale', 1)
39 |     }
40 |   },
41 | }
42 | </script>
43 | 
44 | <style lang="stylus" scoped>
45 | @import('../vars.styl')
46 | 
47 | .scale
48 |   position relative
49 |   width 100%
50 |   padding 1rem
51 |   border-bottom 1px solid #eaeaea
52 | 
53 |   .track, .thumb
54 |     cursor pointer
55 |     pointer-events none
56 | 
57 |   .track
58 |     position relative
59 |     width 100%
60 |     height 1rem
61 |     background rgba(0,0,0,.1)
62 |     clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
63 | 
64 |   .thumb
65 |     position absolute
66 |     left 0
67 |     top 0
68 |     height 100%
69 |     background $fg
70 | 
71 |   .info
72 |     margin .5rem 0 0
73 |     font-size .5rem
74 |     color #888
75 |     text-align right
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/server/modules/rotate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rotate">
 3 |     <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 477.867 477.867'><path d='M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479 c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933 c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207 c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4 C426.667,7.641,419.026,0,409.6,0z' fill='#999'/><path d='M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696 c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606 c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4 c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068 c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z' fill='#999'/></svg>
 4 |     <button @click="() => $store.commit('rotate')"></button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style lang="stylus" scoped>
 9 | .rotate
10 |   position relative
11 |   width .8rem
12 |   height 1rem
13 |   margin .5rem
14 |   cursor pointer
15 | 
16 |   svg
17 |     position absolute
18 |     left 0
19 |     top 0
20 |     width 100%
21 |     height 100%
22 |     pointer-events none
23 | 
24 |   button
25 |     z-index 1
26 |     position absolute
27 |     left 0
28 |     top 0
29 |     width 100%
30 |     height 100%
31 |     cursor pointer
32 |     background transparent
33 |     border none
34 |     outline none
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/server/modules/log.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="log">
 3 |     <div class="header">
 4 |       <search v-model="filter" />
 5 |       <span class="clear" @click="$store.dispatch('clear')">clear</span>
 6 |     </div>
 7 |     <ul>
 8 |       <li :key="i" v-for="(log, i) in filtered">{{ log }}</li>
 9 |     </ul>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { mapState } from 'vuex'
15 | 
16 | import Search from '../components/search.vue'
17 | 
18 | export default {
19 |   components: { Search },
20 | 
21 |   data() { return {
22 |     filter: ''
23 |   }; },
24 | 
25 |   computed: {
26 |     ...mapState({
27 |       logs: state => state.log
28 |     }),
29 | 
30 |     filtered() {
31 |       return this.logs.filter(log => log.indexOf(this.filter) !== -1)
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style lang="stylus" scoped>
38 | @import('../vars.styl')
39 | 
40 | .log
41 |   display flex
42 |   flex-direction column
43 | 
44 |   .header
45 |     display flex
46 |     flex 0 0 auto
47 |     padding 1rem
48 | 
49 |     .search
50 |       flex 1 0 auto
51 | 
52 |     .clear
53 |       display block
54 |       flex 0
55 |       margin-left 1rem
56 |       padding .25rem .5rem
57 |       border none
58 |       background transparent
59 |       cursor pointer
60 |       background transparent
61 |       transition background .2s, color .2s
62 |       color #333
63 |       font-size .5rem
64 |       line-height 1rem
65 | 
66 |       &:hover
67 |         background rgba($bg, .8)
68 |         color $fg
69 | 
70 |   ul
71 |     flex 1 1 auto
72 |     overflow scroll
73 |     margin 0rem 1rem 1rem
74 |     padding 0
75 |     list-style none
76 |     font-size .8rem
77 | 
78 |     li
79 |       padding .5rem 0
80 |       border-bottom 1px solid $bd
81 |       color #888
82 |       font-family Menlo, monospace
83 |       font-size .6rem
84 | 
85 |       &:last-child
86 |         border none
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/server/components/agents/agent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="agent">
 3 |     <div class="container">
 4 |       <label v-if="name" class="label" :class="!!description ? 'clickable' :null" @click="toggle = !toggle">
 5 |         <span>{{ name }}</span>
 6 |       </label>
 7 |       <div><slot /></div>
 8 |     </div>
 9 | 
10 |     <transition name="plode">
11 |       <div class="description" v-if="toggle && description">{{ description }}</div>
12 |     </transition>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: {
19 |     name: String,
20 |     description: String,
21 |   },
22 | 
23 |   data() { return {
24 |     toggle: false,
25 |   }; }
26 | }
27 | </script>
28 | 
29 | <style lang="stylus" scoped>
30 | @import('../../vars.styl')
31 | 
32 | .agent
33 |   transition border .2s
34 | 
35 |   &:hover
36 |     border-left 4px solid $fg
37 | 
38 |   & > .container
39 |     display flex
40 | 
41 |     & > .label
42 |       flex 1 1 auto
43 |       padding .25rem 0
44 |       font-size .8rem
45 |       font-weight bold
46 | 
47 |       &.clickable
48 |         cursor pointer
49 | 
50 |         & > span
51 |           padding-bottom .25rem
52 |           border-bottom 1px dotted rgba($fg, .5)
53 | 
54 |     & > div
55 |       display flex
56 |       justify-content flex-end
57 |       align-items center
58 |       width 50%
59 | 
60 |       & >>> *
61 |         display block
62 |         width 100%
63 |         height 100%
64 |         padding .25rem .5rem
65 |         background #fff
66 |         border none
67 |         border-radius .3rem
68 |         outline none
69 | 
70 | .agent.trigger > .container > div >>> *
71 |   background transparent
72 | 
73 | .agent > .description
74 |   max-height 100px
75 |   margin-top 1rem
76 |   color #444
77 |   font-size .5rem
78 | 
79 |   &.plode-enter-active, &.plode-leave-active
80 |     transition max-height .4s, margin-top .4s, opacity .4s
81 | 
82 |   &.plode-enter, &.plode-leave-to
83 |     max-height 0
84 |     margin-top 0
85 |     opacity 0
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/server/modules/navigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="navigation">
 3 |     <search v-model="filter" />
 4 | 
 5 |     <template v-for="(links, group, i) in groups">
 6 |       <group :key="i" ref="groups" :name="group">
 7 |         <router-link :key="link.path" v-for="link in links"
 8 |                       class="link" :to="link.path">{{ link.name }}</router-link>
 9 |       </group>
10 |     </template>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import { mapState } from 'vuex'
16 | 
17 | import Search from '../components/search.vue'
18 | import Group from '../components/group.vue'
19 | 
20 | export default {
21 |   components: { Search, Group },
22 | 
23 |   data() { return {
24 |       filter: '',
25 |   }; },
26 | 
27 |   computed: {
28 |     ...mapState({
29 |       links: state => Object
30 |         .entries(state.db)
31 |         .map(([path, data]) => ({
32 |           path: `/${path}`,
33 |           name: data.title || path,
34 |           group: data.group || '',
35 |           description: data.description,
36 |         }))
37 |     }),
38 | 
39 |     filtered() {
40 |       return this.filter.length
41 |            ? this.links.filter(link => link.name.indexOf(this.filter) !== -1)
42 |            : this.links
43 |     },
44 | 
45 |     groups() {
46 |       return this.filtered.reduce((object, link) => {
47 |         (object[link.group] = object[link.group] || []).push(link)
48 |         return object
49 |       }, {})
50 |     },
51 |   },
52 | }
53 | </script>
54 | 
55 | <style lang="stylus" scoped>
56 | @import('../vars.styl')
57 | 
58 | .navigation
59 |   .search
60 |     margin 1rem
61 | 
62 |   .link
63 |     display block
64 |     position relative
65 |     padding 1rem
66 |     border-top 1px solid lighten($bd, 5%)
67 |     cursor pointer
68 |     color #bbb
69 |     font-size .8rem
70 |     font-weight bold
71 |     text-decoration none
72 |     transition background .2s, color .2s, padding-left .2s
73 | 
74 |     &:first-child
75 |       border-top-color $fg
76 | 
77 |     &:hover
78 |       background rgba(#000, .05)
79 |       padding-left 1.5rem
80 | 
81 |     &.router-link-active
82 |       background $fg
83 |       color $bg
84 |       padding-left 2rem
85 | 
86 | </style>
87 | 


--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const client = (command, parameters, context = window) => {
 4 |   if (!context.__whiteroom__)
 5 |     context.__whiteroom__ = [{ command, parameters }]
 6 |   else if (Array.isArray(context.__whiteroom__))
 7 |     context.__whiteroom__.push({ command, parameters })
 8 |   else if (command in context.__whiteroom__)
 9 |     context.__whiteroom__[command](parameters)
10 | }
11 | 
12 | export const inspect = (experiment, { path, group, ...parameters } = {}) => {
13 |   if (experiment.__file && !path)
14 |     path = experiment.__file.replace(/.vue$/, '')
15 | 
16 |   if (!group)
17 |     group = ''
18 | 
19 |   client('inspect', { path, experiment, group, ...parameters })
20 | }
21 | 
22 | export const device = (name, dimensions) => client('device', { name, dimensions })
23 | export const layout = (name, file) => client('layout', { name, file })
24 | 
25 | export const log    = (...parameters) => client('log', parameters)
26 | 
27 | export const wrap = component => {
28 |   return {
29 |     abstract: true,
30 |     functional: true,
31 | 
32 |     inject: component.inject,
33 |     props: component.props,
34 | 
35 |     triggers: component.triggers || Object
36 |       .keys(component.methods || {})
37 |       .filter(method => !method.startsWith('_') && !method.startsWith('$'))
38 |       .reduce((object, method) => ({ ...object, [method]: {} }), {}),
39 | 
40 |     render(h, { props, parent, children }) {
41 |       const { $store } = parent
42 |       const child = h(component, { props }, children)
43 | 
44 |       // we use internal Vue insert hook to get into the instance
45 |       const insert = child.data.hook.insert;
46 |       child.data.hook.insert = function(vnode) {
47 |         const vm = vnode.componentInstance;
48 | 
49 |         // and hijack $emit to add store dispatch and event pop in the console
50 |         const emit = vm.$emit;
51 |         vm.$emit = function() {
52 |           const event = Array.from(arguments)
53 |           $store.dispatch('log', ['[EVENT TRIGGER]', event.shift(), ...event])
54 |           return emit.apply(vm, arguments)
55 |         }
56 | 
57 |         return insert(vnode)
58 |       }
59 | 
60 |       return child
61 |     },
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/server/modules/headline.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="headline" :class="toggle && fullscreen ? null : 'small'" @click="toggle = !toggle">
  3 |     <hgroup>
  4 |       <h6 v-if="title">{{ title }}</h6>
  5 |       <h1>{{ path }}</h1>
  6 |       <transition name="plode">
  7 |         <aside v-if="description">{{ description }}</aside>
  8 |       </transition>
  9 |     </hgroup>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import { mapState } from 'vuex'
 15 | 
 16 | export default {
 17 |   computed: {
 18 |     ...mapState({
 19 |       fullscreen: state => state.fullscreen === 0,
 20 | 
 21 |       title: state => state.title,
 22 | 
 23 |       path(state) {
 24 |         const path = this.$route.path.substr(1)
 25 | 
 26 |         return path in state.db
 27 |              ? state.db[path].title || path
 28 |              : 'unknown'
 29 |       },
 30 | 
 31 |       description(state) {
 32 |         const path = this.$route.path.substr(1)
 33 | 
 34 |         return path in state.db && state.db[path].description
 35 |              ? state.db[path].description
 36 |              : null
 37 |       }
 38 |     }),
 39 |   },
 40 | 
 41 |   data() { return {
 42 |     toggle: false,
 43 |   }; },
 44 | }
 45 | </script>
 46 | 
 47 | <style lang="stylus" scoped>
 48 | @import('../vars.styl')
 49 | 
 50 | .headline
 51 |   position absolute
 52 |   left 0
 53 |   top 0
 54 |   padding 2rem 0 0 2rem
 55 |   z-index 2
 56 |   transition padding .4s
 57 | 
 58 |   /*
 59 |   &:before // shadow
 60 |     content ''
 61 |     position absolute
 62 |     z-index 1
 63 |     left 0
 64 |     bottom 0
 65 |     width 100vw
 66 |     height 10vh
 67 |     background linear-gradient(to top, rgba(0,0,0,.25) -100%,rgba(0,0,0,0) 100%)
 68 |     pointer-events none
 69 |     transform rotate(2.5deg)
 70 |     transform-origin left bottom
 71 |   */
 72 | 
 73 |   &.small
 74 |     padding 1rem 0 0 1rem
 75 | 
 76 |     hgroup
 77 |       transform scale(.5)
 78 | 
 79 |   hgroup
 80 |     position relative
 81 |     z-index 3
 82 |     display flex
 83 |     flex-direction column
 84 |     align-items flex-start
 85 |     transform-origin left top
 86 |     transition transform .4s
 87 | 
 88 |   h6
 89 |     display inline-block
 90 |     margin 0
 91 |     padding .5rem .75rem
 92 |     background #fff
 93 |     font-size .75rem
 94 | 
 95 |   h1
 96 |     display inline-block
 97 |     margin 0
 98 |     padding .5rem .75rem
 99 |     background $fg
100 |     color $bg
101 |     font-size 4rem
102 | 
103 |   aside
104 |     max-width 50vw
105 |     max-height 5rem
106 |     margin-top 1rem
107 |     overflow hidden
108 | 
109 |     &.plode-enter-active, &.plode-leave-active
110 |       transition max-height .4s, margin-top .4s, opacity .4s
111 | 
112 |     &.plode-enter, &.plode-leave-to
113 |       max-height 0
114 |       margin-top 0
115 |       opacity 0
116 | </style>
117 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const { resolve } = require('path')
  2 | const { HotModuleReplacementPlugin } = require('webpack')
  3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  4 | const CleanWebpackPlugin = require('clean-webpack-plugin')
  5 | const { VueLoaderPlugin } = require("vue-loader")
  6 | const CleanTerminalPlugin = require('clean-terminal-webpack-plugin')
  7 | 
  8 | module.exports = {
  9 |   mode: 'development',
 10 |   node: { fs: 'empty' },
 11 | 
 12 |   resolveLoader: {
 13 |     modules: [ resolve(__dirname, './node_modules') ],
 14 |   },
 15 | 
 16 |   resolve: {
 17 |     alias: {
 18 |       '@': resolve(process.env.PWD, './src'),
 19 |     },
 20 |   },
 21 | 
 22 |   entry: {
 23 |     'whiteroom' : resolve(__dirname, './src/server/'),
 24 |     'microscope' : resolve(__dirname, './src/client/'),
 25 |     'experiments'   : resolve(process.env.PWD, './experiments'),
 26 |   },
 27 | 
 28 |   output: {
 29 |     path: resolve(__dirname, 'dist'),
 30 |     filename: '[name].bundle.js',
 31 |     publicPath: '',
 32 |   },
 33 | 
 34 |   module: {
 35 |     rules: [
 36 |       {
 37 |         test: /\.vue$/,
 38 |         loader: require.resolve('vue-loader')
 39 |       },
 40 |       {
 41 |         test: /\.js$/,
 42 |         exclude: /(node_modules)/,
 43 |         use: {
 44 |           loader: require.resolve('babel-loader'),
 45 |           options: {
 46 |             presets: [
 47 |               require.resolve('@babel/preset-env')
 48 |             ]
 49 |           }
 50 |         }
 51 |       },
 52 |       {
 53 |         test: /\.css$/,
 54 |         use: [
 55 |           require.resolve('vue-style-loader'),
 56 |           require.resolve('css-loader'),
 57 |         ]
 58 |       },
 59 |       {
 60 |         test: /\.styl(us)?$/,
 61 |         use: [
 62 |           require.resolve('vue-style-loader'),
 63 |           require.resolve('css-loader'),
 64 |           require.resolve('stylus-loader'),
 65 |         ]
 66 |       }
 67 |     ]
 68 |   },
 69 | 
 70 |   plugins: [
 71 |     new CleanWebpackPlugin(['dist']),
 72 | 
 73 |     new HotModuleReplacementPlugin(),
 74 | 
 75 |     new VueLoaderPlugin(),
 76 | 
 77 |     new HtmlWebpackPlugin({
 78 |       filename: 'index.html',
 79 |       chunks: ['whiteroom'],
 80 |       template: resolve(__dirname, './www/index.html'),
 81 |       inject: true,
 82 |     }),
 83 | 
 84 |     new HtmlWebpackPlugin({
 85 |       filename: 'microscope.html',
 86 |       chunks: ['microscope', 'experiments'],
 87 |       template: resolve(__dirname, './www/microscope.html'),
 88 |       inject: true,
 89 |     }),
 90 | 
 91 |     new CleanTerminalPlugin()
 92 |   ],
 93 | 
 94 |   devServer: {
 95 |     contentBase: './dist',
 96 |     host: '0.0.0.0',
 97 |     port: 9999,
 98 |     hot: true,
 99 |     watchOptions: {
100 |       poll: true
101 |     }
102 |   },
103 | 
104 |   stats: { colors: true },
105 | 
106 |   watch: true,
107 | }
108 | 


--------------------------------------------------------------------------------
/src/server/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import Vuex from "vuex";
  3 | import connect from '../connector';
  4 | 
  5 | Vue.use(Vuex);
  6 | 
  7 | // whiteroom <-> microscope communication
  8 | const microscope = connect()
  9 | 
 10 | microscope.on(({ command, parameters }) => {
 11 |   const commands = ['register', 'devices', 'layouts', 'log']
 12 | 
 13 |   if (commands.includes(command))
 14 |     store.commit(command, parameters)
 15 | })
 16 | 
 17 | // store
 18 | const store = new Vuex.Store({
 19 |   state: {
 20 |     title: '',
 21 |     fullscreen: 0,
 22 | 
 23 |     db: {},
 24 |     log: [],
 25 | 
 26 |     layouts: [],
 27 | 
 28 |     devices: {
 29 |       'responsive'    : { width: '100%',   height: '100%' },
 30 |       'Galaxy S5'     : { width: '360px',  height: '640px' },
 31 |       'Pixel 2'       : { width: '411px',  height: '731px' },
 32 |       'Pixel 2 XL'    : { width: '411px',  height: '823px' },
 33 |       'iPhone 5/SE'   : { width: '320px',  height: '568px' },
 34 |       'iPhone 6/7/8'  : { width: '375px',  height: '667px' },
 35 |       'iPhone 6/7/8 +': { width: '414px',  height: '736px' },
 36 |       'iPhone X'      : { width: '375px',  height: '812px' },
 37 |       'iPad'          : { width: '768px',  height: '1024px' },
 38 |       'iPad Pro'      : { width: '1024px', height: '1366px' },
 39 |     },
 40 | 
 41 |     device: 'responsive',
 42 | 
 43 |     rotate: false,
 44 | 
 45 |     fontsize: 1,
 46 |   },
 47 | 
 48 |   mutations: {
 49 |     register(state, { path, ...parameters }) {
 50 |       state.db = { ...state.db, [path]: {
 51 |         ...parameters,
 52 | 
 53 |         // we have to manipulate agents data structure a little bit...
 54 |         agents: (parameters.agents || []).map(agent => {
 55 |           const { name, type, description, ...properties } = agent
 56 | 
 57 |           // we cant deconstruct 'default' property, so we manually handle it
 58 |           delete properties.default
 59 | 
 60 |           return {
 61 |             name, type, description, properties, default: agent.default
 62 |           }
 63 |         }),
 64 | 
 65 |         injects: (parameters.inject || {})
 66 |       } }
 67 |     },
 68 | 
 69 |     log(state, parameters) {
 70 |       if (parameters)
 71 |         state.log = [parameters.join(' ')].concat(state.log).slice(0, 50)
 72 |       else
 73 |         state.log = []
 74 |     },
 75 | 
 76 |     layouts(state, parameters) {
 77 |       state.layouts = [...state.layouts, ...parameters]
 78 |         .filter((e, i, a) => a.indexOf(e) === i)
 79 |     },
 80 | 
 81 |     devices(state, parameters) {
 82 |       state.devices = { ...state.devices, ...parameters }
 83 |     },
 84 | 
 85 |     device(state, parameters) {
 86 |       state.device = parameters
 87 |     },
 88 | 
 89 |     rotate(state) {
 90 |       state.rotate = !state.rotate
 91 |     },
 92 | 
 93 |     fullscreen(state, value) {
 94 |       state.fullscreen += value
 95 |     },
 96 | 
 97 |     scale(state, parameters) {
 98 |       state.fontsize = parameters
 99 |     },
100 |   },
101 | 
102 |   actions: {
103 |     clear(context) {
104 |       context.commit('log', null)
105 |     },
106 |   }
107 | });
108 | 
109 | 
110 | export default store;
111 | 


--------------------------------------------------------------------------------
/src/client/app.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Vue from 'vue'
  3 | import { compileToFunctions } from 'vue-template-compiler'
  4 | 
  5 | import { mapState } from 'vuex'
  6 | import { cast } from './types'
  7 | 
  8 | export default {
  9 |   provide() {
 10 |     return null // this is a hack, check about `query` watcher
 11 |   },
 12 | 
 13 |   computed: {
 14 |     ...mapState({
 15 |       layout  : state => state.layout,
 16 | 
 17 |       path    : state => state.path,
 18 |       query   : state => state.query,
 19 |       trigger : state => state.trigger,
 20 | 
 21 |       child   : state => state.path in state.db ? state.db[state.path] : null,
 22 |     }),
 23 |   },
 24 | 
 25 |   watch: {
 26 |     trigger(val) {
 27 |       if (!val)
 28 |         return
 29 | 
 30 |       this.$children.forEach(child => {
 31 |         try { child[val]() }
 32 |         catch(err) {}
 33 |       })
 34 | 
 35 |       this.$store.commit('trigger')
 36 |     },
 37 | 
 38 |     query(val) {
 39 |       if (!this.child)
 40 |         return
 41 | 
 42 |       this._provided = Object
 43 |         .entries(this.child.inject || {})
 44 |         .map(([prop, def]) => ({
 45 |           [prop]: prop in val ? val[prop] : def.default
 46 |         }))
 47 |         .reduce((a, b) => ({ ...a, ...b }), {})
 48 | 
 49 |       if (this.$children.length) {
 50 |         Vue.config.silent = true // we ignore Vue.js warning on purpose
 51 | 
 52 |         this.$children.forEach(child => {
 53 |           Object.entries(this._provided)
 54 |             .forEach(([prop, def]) => child[prop] = def)
 55 |         })
 56 | 
 57 |         Vue.config.silent = false // :)
 58 |       }
 59 |     }
 60 |   },
 61 | 
 62 |   render(h) {
 63 |     if (!this.child)
 64 |       return h('div')
 65 | 
 66 |     const mixins = this.child.mixins
 67 |                  ? this.child.mixins
 68 |                     .map(mixin => mixin.props)
 69 |                     .filter(Boolean)
 70 |                     .reduce((a, b) => ({ ...a, ...b }), {})
 71 |                  : {}
 72 | 
 73 |     const props = Object.entries({ ...this.child.props, ...mixins })
 74 |       .map(([prop, def]) => ({
 75 |         [prop]: cast(def, prop in this.query ? this.query[prop] : def.default)
 76 |       }))
 77 |       .reduce((a, b) => ({ ...a, ...b }), {})
 78 | 
 79 |     const on = (this.child.events || []).map(name => ({
 80 |         [name]: event => this.$store.dispatch('log', ['[EVENT TRIGGER]', name, JSON.stringify(event)])
 81 |       }))
 82 |       .reduce((a, b) => ({ ...a, ...b }), {})
 83 | 
 84 |     const proxy = { child: this.child, props, on }
 85 | 
 86 |     let children = []
 87 |     const functions = compileToFunctions(`<div>${this.query.slot}</div>`)
 88 | 
 89 |     if (functions.staticRenderFns.length > 0)
 90 |       children = functions.staticRenderFns[0].call(this).children
 91 |     else if (functions.render)
 92 |       children = functions.render.call(this).children
 93 |     else
 94 |       children = [this.query.slot]
 95 | 
 96 |     // force indirect update for injections
 97 |     if (this._provided === null) {
 98 |       this.$nextTick(() => {
 99 |         this._watchers
100 |           .find(w => w.expression === 'query')
101 |           .cb.call(this, this.query)
102 |       })
103 |     }
104 | 
105 |     return h(this.layout, {
106 |       key: this.path,
107 |       props: { proxy },
108 |     }, children || null)
109 |   }
110 | }
111 | </script>
112 | 
113 | <style lang="stylus" scoped>
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/server/modules/layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 54.953 54.953'>
 4 |       <circle cx='45.021' cy='25.976' r='1' fill='#666'/>
 5 |       <circle cx='9.021' cy='25.976' r='1' fill='#666'/>
 6 |       <circle cx='12.021' cy='28.976' r='1' fill='#666'/>
 7 |       <circle cx='18.021' cy='28.976' r='1' fill='#666'/>
 8 |       <circle cx='15.021' cy='31.976' r='1' fill='#666'/>
 9 |       <circle cx='21.021' cy='31.976' r='1' fill='#666'/>
10 |       <circle cx='24.021' cy='34.976' r='1' fill='#666'/>
11 |       <circle cx='30.021' cy='34.976' r='1' fill='#666'/>
12 |       <circle cx='33.021' cy='31.976' r='1' fill='#666'/>
13 |       <circle cx='27.021' cy='37.976' r='1' fill='#666'/>
14 |       <circle cx='36.021' cy='28.976' r='1' fill='#666'/>
15 |       <circle cx='42.021' cy='28.976' r='1' fill='#666'/>
16 |       <circle cx='39.021' cy='31.976' r='1' fill='#666'/>
17 |       <path d='M45.559,32.796l9.394-5.367l-9.656-5.483l9.656-5.517L27.477,0.826L0,16.429l9.656,5.517L0,27.429l9.656,5.517L0,38.429l27.477,15.698l27.477-15.698l-9.656-5.483l0.071-0.041C45.439,32.879,45.497,32.837,45.559,32.796z M27.477,3.125l23.436,13.309l-7.637,4.364l0,0l-15.798,9.026L4.041,16.434L27.477,3.125z M11.129,23.409c0.162,0.333,0.497,0.567,0.892,0.567c0.27,0,0.512-0.109,0.692-0.283l2.262,1.292c-0.53,0.025-0.954,0.455-0.954,0.991c0,0.552,0.448,1,1,1s1-0.448,1-1c0-0.173-0.055-0.327-0.132-0.469l10.33,5.902c-0.116,0.163-0.198,0.352-0.198,0.567c0,0.552,0.448,1,1,1s1-0.448,1-1c0-0.051-0.021-0.094-0.029-0.143l10.052-5.743c0.059,0.496,0.465,0.885,0.977,0.885c0.552,0,1-0.448,1-1 c0-0.325-0.165-0.601-0.406-0.783l2.202-1.258c0.068,0.015,0.132,0.041,0.204,0.041c0.444,0,0.807-0.294,0.938-0.694l0.32-0.183l7.634,4.335l-1.983,1.133c-0.157-0.347-0.503-0.591-0.908-0.591c-0.552,0-1,0.448-1,1c0,0.216,0.083,0.405,0.199,0.568l-3.945,2.254l0,0l-6.388,3.65c0.078-0.142,0.134-0.298,0.134-0.472c0-0.552-0.448-1-1-1s-1,0.448-1,1c0,0.537,0.426,0.967,0.957,0.991l-2.263,1.293c-0.18-0.174-0.423-0.284-0.694-0.284c-0.552,0-1,0.448-1,1 c0,0.08,0.028,0.151,0.046,0.226l-4.59,2.622l-5.517-3.152c-0.13-0.401-0.494-0.696-0.939-0.696c-0.073,0-0.138,0.027-0.206,0.042l-2.201-1.257c0.241-0.183,0.407-0.458,0.407-0.784c0-0.552-0.448-1-1-1c-0.512,0-0.919,0.391-0.977,0.887L6.991,29.12c0.007-0.049,0.029-0.093,0.029-0.144c0-0.552-0.448-1-1-1c-0.239,0-0.449,0.095-0.621,0.235l-1.359-0.776L11.129,23.409z M50.912,38.434l-23.436,13.39L4.041,38.434l7.633-4.335l15.803,9.028l15.802-9.028L50.912,38.434z' fill='#666'/>
18 |     </svg>
19 | 
20 |     <select v-model="layout">
21 |       <option :key="i" v-for="(layout, i) in layouts">{{ layout }}</option>
22 |     </select>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import { mapState } from 'vuex'
28 | 
29 | export default {
30 |   computed: {
31 |     ...mapState(['layouts'])
32 |   },
33 | 
34 |   data() { return {
35 |     layout: null,
36 |   }; },
37 | 
38 |   watch: {
39 |     layout(val) {
40 |       this.$root.$emit('frame', 'layout', val)
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style lang="stylus" scoped>
47 | .layout
48 |   position relative
49 |   width 1rem
50 |   height 1rem
51 |   margin .5rem
52 |   cursor pointer
53 | 
54 |   svg
55 |     position absolute
56 |     left 0
57 |     top 0
58 |     width 100%
59 |     height 100%
60 |     pointer-events none
61 | 
62 |   select
63 |     width 100%
64 |     height 100%
65 |     border none
66 |     cursor pointer
67 |     outline none
68 |     font-size 0
69 |     -moz-appearance none
70 |     -webkit-appearance none
71 | 
72 |     &:-ms-expand
73 |       display none
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/server/modules/agents.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="agents">
  3 |     <search v-model="filter" v-if="fields > 5" />
  4 |     <agent name="<slot />" description="default slot as text">
  5 |       <text-agent multiline :value="$route.query['slot']" @input="value => set('slot', value)" />
  6 |     </agent>
  7 |     <h3 v-if="filtered_injects.length">injections</h3>
  8 |     <agent :key="`inject_${i}`" v-for="(inject, i) in filtered_injects"
  9 |            :name="inject.name" :description="inject.description">
 10 |       <text-agent :value="$route.query[inject.name]" @input="value => set(inject.name, value)" />
 11 |     </agent>
 12 |     <h3 v-if="filtered_props.length">props</h3>
 13 |     <agent :key="`agent_${i}`" v-for="(prop, i) in filtered_props"
 14 |            :name="prop.name" :description="prop.description">
 15 |       <component
 16 |         :is="AGENTS[prop.type]"
 17 |         :value="$route.query[prop.name]"
 18 |         @input="value => set(prop.name, value)"
 19 |         v-bind="prop.properties" />
 20 |     </agent>
 21 |     <h3 v-if="filtered_triggers.length">methods</h3>
 22 |     <agent :key="`trigger_${i}`" v-for="(trigger, i) in filtered_triggers"
 23 |            :name="trigger.name" :description="trigger.description">
 24 |       <trigger :trigger="trigger.name" />
 25 |     </agent>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import { mapState } from 'vuex'
 31 | 
 32 | import Search from '../components/search.vue'
 33 | 
 34 | import AGENTS from '../components/agents'
 35 | import Agent from '../components/agents/agent.vue'
 36 | import Trigger from '../components/agents/trigger.vue'
 37 | import TextAgent from '../components/agents/text.vue'
 38 | 
 39 | export default {
 40 |   components: { Search, Agent, Trigger, TextAgent },
 41 | 
 42 |   data() { return {
 43 |     AGENTS, filter: ''
 44 |   }; },
 45 | 
 46 |   computed: {
 47 |     ...mapState({
 48 |       props(state) {
 49 |         if (this.path in state.db)
 50 |           return state.db[this.path].agents || []
 51 | 
 52 |         return []
 53 |       },
 54 | 
 55 |       injects(state) {
 56 |         if (this.path in state.db)
 57 |           return state.db[this.path].injects || []
 58 | 
 59 |         return []
 60 |       },
 61 | 
 62 |       triggers(state) {
 63 |         if (this.path in state.db)
 64 |           return state.db[this.path].triggers || []
 65 | 
 66 |         return []
 67 |       },
 68 |     }),
 69 | 
 70 |     path() {
 71 |       return this.$route.path.substr(1)
 72 |     },
 73 | 
 74 |     fields() {
 75 |       return (this.props.length + this.injects.length + this.triggers.length)
 76 |     },
 77 | 
 78 |     filtered_props() {
 79 |       return this.props.filter(({ name }) => name.indexOf(this.filter) !== -1)
 80 |     },
 81 | 
 82 |     filtered_injects() {
 83 |       return this.injects.filter(({ name }) => name.indexOf(this.filter) !== -1)
 84 |     },
 85 | 
 86 |     filtered_triggers() {
 87 |       return this.triggers.filter(({ name }) => name.indexOf(this.filter) !== -1)
 88 |     },
 89 |   },
 90 | 
 91 |   watch: {
 92 |     '$route.path'(val) {
 93 |       this.$router.replace({
 94 |         query:  [...this.props, { name: 'slot' }]
 95 |                 .map(prop => ({ [prop.name]: prop.default || null }))
 96 |                 .reduce((w, o) => ({ ...w, ...o }), {})
 97 |       })
 98 |     },
 99 |   },
100 | 
101 |   methods: {
102 |     set(k, v) {
103 |       this.$router.replace({
104 |         query: { ...this.$route.query, [k]: v }
105 |       })
106 |     }
107 |   }
108 | }
109 | </script>
110 | 
111 | <style lang="stylus" scoped>
112 | @import('../vars.styl')
113 | 
114 | .agents
115 |   & > .search
116 |     padding 1rem
117 | 
118 |   & > hr
119 |     width 100%
120 |     margin 0
121 |     border none
122 |     border-top 1px solid $bd
123 | 
124 |     &:first-child, &:last-child, & + hr
125 |       display none
126 | 
127 |   .agent, .inject, .trigger
128 |     padding 1rem
129 |     border-bottom 1px solid $bd
130 | 
131 |   h3
132 |     margin 0
133 |     padding .5rem .5rem 1rem
134 |     border-top .25rem solid $bd
135 |     border-bottom 1px solid $bd
136 |     color $fg
137 |     font-size .75rem
138 |     font-weight bold
139 |     text-align right
140 | 
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/server/modules/panel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="panel" :class="toggle ? 'shown' : 'hidden'">
  3 |     <button class="toggle" @click="toggle = !toggle" />
  4 |     <div class="content">
  5 |       <section><slot /></section>
  6 |       <aside v-if="closet"><slot name="closet" /></aside>
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import { mapState } from 'vuex'
 13 | 
 14 | export default {
 15 |   props: {
 16 |     name: {
 17 |       type: String,
 18 |       required: true,
 19 |     },
 20 | 
 21 |     closet: {
 22 |       type: Boolean,
 23 |       default: false,
 24 |     }
 25 |   },
 26 | 
 27 |   data() { return {
 28 |     toggle: window.localStorage.getItem(`panel#${this.name}`) === 'true',
 29 |   }; },
 30 | 
 31 |   watch: {
 32 |     toggle(val) {
 33 |       window.localStorage.setItem(`panel#${this.name}`, val)
 34 |       this.$store.commit('fullscreen', val ? 1 : -1)
 35 |     },
 36 |   },
 37 | }
 38 | </script>
 39 | 
 40 | <style lang="stylus" scoped>
 41 | @import('../vars.styl')
 42 | 
 43 | .panel
 44 |   position absolute
 45 |   top 50%
 46 |   height 100vh
 47 |   z-index 3
 48 |   box-shadow 0px 0 1rem -.5rem rgba(#000, 0.5)
 49 |   transition transform .4s, border-width .4s
 50 | 
 51 |   &.left
 52 |     left 0
 53 | 
 54 |     &.hidden
 55 |       transform translate(calc(-100% + .25rem), -50%)
 56 |       border-right .25rem solid $fg
 57 | 
 58 |     & > .toggle
 59 |       left 100%
 60 | 
 61 |       &:before, &:after
 62 |         left 50%
 63 | 
 64 |       &:before
 65 |         transform rotate(45deg) translateX(-30%)
 66 | 
 67 |       &:after
 68 |         transform rotate(-45deg) translateX(-30%)
 69 | 
 70 |     &.shown > .toggle
 71 |       &:before, &:after
 72 |         left 25%
 73 |         width 50%
 74 | 
 75 |       &:before
 76 |         transform rotate(45deg) translateX(0)
 77 | 
 78 |       &:after
 79 |         transform rotate(-45deg) translateX(0)
 80 | 
 81 |   &.right
 82 |     right 0
 83 | 
 84 |     &.hidden
 85 |       transform translate(calc(100% - .25rem), -50%)
 86 |       border-left .25rem solid $fg
 87 | 
 88 |     & > .toggle
 89 |       right 100%
 90 | 
 91 |       &:before, &:after
 92 |         right 50%
 93 | 
 94 |       &:before
 95 |         transform rotate(135deg) translateX(-30%)
 96 | 
 97 |       &:after
 98 |         transform rotate(-135deg) translateX(-30%)
 99 | 
100 |     &.shown > .toggle
101 |       &:before, &:after
102 |         left 25%
103 |         width 50%
104 | 
105 |       &:before
106 |         transform rotate(135deg) translateX(0)
107 | 
108 |       &:after
109 |         transform rotate(-135deg) translateX(0)
110 | 
111 |   &.shown
112 |     transform translate(0, -50%)
113 |     border-width 0
114 | 
115 |   & > .toggle
116 |     position absolute
117 |     top calc(50% - 1.25rem)
118 |     width 2.5rem
119 |     height 2.5rem
120 |     border none
121 |     background transparent
122 |     cursor pointer
123 |     outline none
124 |     transition background .4s
125 | 
126 |     &:before, &:after
127 |       content ''
128 |       position absolute
129 |       top 50%
130 |       width 25%
131 |       height .25rem
132 |       background $fg
133 |       transition left .4s, width .4s, background .4s, transform .4s
134 | 
135 |     &:before
136 |       transform rotate(135deg) translateX(-30%)
137 | 
138 |     &:after
139 |       transform rotate(-135deg) translateX(-30%)
140 | 
141 |   & > .content
142 |     position relative
143 |     z-index 2
144 |     display flex
145 |     min-width 20vw
146 |     height 100%
147 |     max-height 100vh
148 |     overflow: scroll
149 |     background $vp
150 |     border 1px solid $bd
151 |     flex-direction column
152 | 
153 |     & > section
154 |       position relative
155 |       overflow scroll
156 |       flex 0 1 auto
157 |       color $fg
158 | 
159 |     & > aside
160 |       position relative
161 |       overflow scroll
162 |       flex 1 1 auto
163 |       height 30%
164 |       border-top 1px solid $bd
165 |       color $fg
166 |       background darken($vp, 3%)
167 | 
168 |       &:before
169 |         content ''
170 |         position sticky
171 |         display block
172 |         top 0
173 |         width 100%
174 |         height .5rem
175 |         margin-bottom -.25rem
176 |         background linear-gradient(to bottom, rgba(0,0,0,0.1) -50%, rgba(0,0,0,0) 100%)
177 |         pointer-events none
178 | 
179 | @media screen and (max-width: 768px)
180 |   .panel
181 |     min-width 80vw
182 | </style>
183 | 


--------------------------------------------------------------------------------
/src/client/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue"
  2 | import Vuex from "vuex"
  3 | import qs from 'query-string'
  4 | 
  5 | import connect from '../connector'
  6 | import expose from './api'
  7 | 
  8 | import { convert } from './types'
  9 | 
 10 | import layouts from './layouts'
 11 | 
 12 | Vue.use(Vuex);
 13 | 
 14 | // reactive routing
 15 | window.addEventListener('hashchange', () => store.commit('hash', window.location.hash))
 16 | 
 17 | // whiteroom <-> microscope communication
 18 | const whiteroom = connect(window.parent)
 19 | 
 20 | whiteroom.on(({ command, parameters }) => (
 21 |   command in store._mutations ? store.commit(command, parameters) : console.log(`${command} not found`)
 22 | ))
 23 | 
 24 | // pass the list of layouts to whiteroom
 25 | whiteroom.emit('layouts', Object.keys(layouts))
 26 | 
 27 | // userland api
 28 | expose({
 29 |   inspect: parameters => {
 30 |     store.commit('register', parameters)
 31 | 
 32 |     const { experiment, ...others } = parameters
 33 |     let { mixins, props, inject, events, triggers, methods } = experiment
 34 | 
 35 |     // merge mixins for props
 36 |     if (mixins)
 37 |       props = mixins.reduce((props, mixin) => ({ ...props, ...mixin.props }), props)
 38 | 
 39 |     // cannot clone validator functions
 40 |     if (props)
 41 |       Object.values(props).forEach(prop => delete prop.validator)
 42 | 
 43 |     // use public methods as triggers
 44 |     if (methods)
 45 |       triggers = Object
 46 |         .keys(methods)
 47 |         .filter(method => !method.startsWith('$') && !method.startsWith('_'))
 48 |         .map(method => ({ [method]: {} }))
 49 |         .reduce((triggers, method) => ({ ...triggers, ...method }), triggers || {})
 50 | 
 51 |     // pass the command upstairs
 52 |     whiteroom.emit('register', {
 53 |       ...others,
 54 | 
 55 |       // cast away prop types
 56 |       agents: Object.entries(props || {})
 57 |                     .map(([name, def]) => ({
 58 |                       ...def, name, type: convert(def)
 59 |                     })),
 60 | 
 61 |       inject: Object.entries(inject || {})
 62 |                     .map(([name, def]) => ({ ...def, name })),
 63 | 
 64 |       events: events || [],
 65 | 
 66 |       triggers: Object.entries(triggers || {})
 67 |                     .map(([name, def]) => ({ ...def, name })),
 68 |     })
 69 |   },
 70 | 
 71 |   device: ({ name, dimensions }) => {
 72 |     whiteroom.emit('devices', { [name]: dimensions })
 73 |   },
 74 | 
 75 |   layout: ({ name, file }) => {
 76 |     store.commit('layouts', { [name]: file })
 77 |     whiteroom.emit('layouts', [name])
 78 |   },
 79 | 
 80 |   log: parameters => {
 81 |     whiteroom.emit('log', parameters)
 82 |   }
 83 | })
 84 | 
 85 | // global scale helper function
 86 | const scale = fontsize => document
 87 |   .querySelectorAll('[scalable]')
 88 |   .forEach(el => el.style.fontSize = fontsize !== 1 ? `${fontsize}em` : null)
 89 | 
 90 | // store
 91 | const store = new Vuex.Store({
 92 |   state: {
 93 |     layouts: { ...layouts },
 94 |     layout: Object.values(layouts).shift(),
 95 | 
 96 |     db: {},
 97 |     path : '',
 98 |     query: {},
 99 | 
100 |     trigger: '',
101 |     fontsize: 1,
102 |   },
103 | 
104 |   mutations: {
105 |     hash(state, hash = '') {
106 |       const path = hash
107 |       .split('?')
108 |       .shift()
109 |       .replace(/^#\//, '')
110 | 
111 |       const query = hash.indexOf('?') !== -1
112 |                   ? qs.parse(hash.substr(hash.indexOf('?')))
113 |                   : {}
114 | 
115 |       if (state.path !== path) {
116 |         state.path = path
117 |         state.query = { ...query }
118 |       }
119 |       else {
120 |         state.query = { ...state.query, ...query }
121 |       }
122 | 
123 |       scale(state.fontsize)
124 |     },
125 | 
126 |     register(state, { path, experiment, ...parameters }) {
127 |       state.db = { ...state.db, [path]: experiment }
128 |     },
129 | 
130 |     layouts(state, payload) {
131 |       state.layouts = { ...state.layouts, ...payload }
132 |     },
133 | 
134 |     layout(state, name = '') {
135 |       if (name in state.layouts) {
136 |         state.layout = state.layouts[name]
137 |         setTimeout(scale, 0, state.fontsize)
138 |       }
139 |     },
140 | 
141 |     scale: (state, fontsize) => {
142 |       state.fontsize = fontsize
143 |       scale(state.fontsize)
144 |     },
145 | 
146 |     trigger(state, name = '') {
147 |       state.trigger = name
148 |     },
149 |   },
150 | 
151 |   actions: {
152 |     log(context, parameters) {
153 |       whiteroom.emit('log', parameters)
154 |     }
155 |   }
156 | });
157 | 
158 | // initialize store hash
159 | store.commit('hash', window.location.hash)
160 | 
161 | export default store;
162 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center"><img src="./logo.svg" width="150px"></p>
  2 | 
  3 | # Vue Whiteroom
  4 | 
  5 | ### white what?
  6 | 
  7 | `vue-whiteroom` is a javascript web-application which aim is to display vue components in a safely sealed environment where they can be manipulated while developing them.
  8 | 
  9 | > I personally think that the "whiteroom" vocabulary is more appropriate, since nowadays not so many people use storybook to display user stories, rather as a safe way to isolate components, as if they were bacterias to observe ; which explains the name of the project. The UI may not look fancy but the main idea behind it is to provide the maximum space available to display your component, as it is the main function of this application. Panels come on overlay and are foldable on purpose ; that said, i'd be more than happy to have some inputs to improve.
 10 | 
 11 | #### features
 12 | 
 13 | - [x] hot reload
 14 | - [x] _experiments_ (like "story objects") as plain Vue files
 15 | - [x] automatically generated knobs from `props` inspection
 16 | - [x] `props` can be extended to enhance knobs easily
 17 | - [x] multiple _layouts_
 18 | - [x] multiple _devices_
 19 | - [x] extensible _devices_ and _layouts_ declaration
 20 | - [x] multi level navigation
 21 | 
 22 | ### why not reuse?
 23 | 
 24 | while [storybook](https://github.com/storybooks/storybook) is an incredible project, it has been written with React for React. The abstraction layer is great, but doesn't work well with Vue.js (as for now, at the very least). An other project, [vue-play](https://github.com/vue-play/vue-play), was completing the task, but lacked of "knobs", and also doesn't look maintained for a year or so.
 25 | 
 26 | ### under the hood?
 27 | 
 28 | This is a basic "storybook" application, so the architecture is quite similar. The application is split in two parts, one rendered in the main frame, and the second one rendered in an iframe.
 29 | 
 30 | Your components are rendered in the iframe, and fed with property values from the url of the iframe. The main application has some knobs which are serialized and passed to the iframe's url, and voila.
 31 | 
 32 | ### how to run?
 33 | 
 34 | 1. Install it from npm `npm install --save-dev vue-whiteroom`
 35 | 2. Add `./node_modules/vue-whiteroom/bin/whiteroom` to your npm scripts
 36 | 3. Use the default entrypoint `./experiments` in your project
 37 | 
 38 | A basic entrypoint looks like this :
 39 | 
 40 | ```js
 41 | import { inspect } from 'vue-whiteroom/api'
 42 | 
 43 | import Demo1 from './demo1.vue'
 44 | inspect(Demo1)
 45 | ```
 46 | 
 47 | ### `vue-whiteroom/api` functions
 48 | 
 49 | - `inspect(VueObject, { path = VueObject.__file__, group = '', name = path, description = null })` : this function registers a new object to be inspected. If you come from other projects such as vue-play or storybook, it's almost similar as `.add(() => VueObject)`. The "group" property provides a simple way to add foldable navigation by categories.
 50 | 
 51 | - `device(name, css)` : this function adds the `name` device in the devices definition. `css` must contain at least `width` and `height` as normal css declaration.
 52 | 
 53 | - `layout(name, VueObject)` : this function adds the `name` layout in the list of available layouts. see next chapter about how to write a proper layout (there's a trick)
 54 | 
 55 | - `log(...parameters)` : this function will pass `parameters` to the cute log box, instead of using `console.log`. It's not overriden by default on purpose, but you can do it so easily it's almost mandatory.
 56 | 
 57 |     ```
 58 |     import { log } from 'vue-whiteroom/api'
 59 |     const _log = console.log;
 60 |     console.log = function() {
 61 |       log(Array.from(arguments))
 62 |       _log.apply(console, arguments)
 63 |     }
 64 |     ```
 65 | 
 66 | - `wrap(VueComponent)` : this function will return an auto-generated Vue file to handle your component. It will pass props along (but can't really guess for enums) ; injections will be passed, events will be _all_ listened to, and public functions (not starting with `_` or `$`) will be automatically registered as trigger.
 67 | 
 68 | ### configure my experiment
 69 | 
 70 | A simple experiment should be a Vue file rendering at least an element.
 71 | 
 72 | ```
 73 | <template>
 74 |   <div class="button">
 75 |     <slot />
 76 |   </div>
 77 | </template>
 78 | 
 79 | <style lang="stylus" scoped>
 80 | .button
 81 |   position relative
 82 |   overflow hidden
 83 |   display inline-block
 84 |   padding .5rem 1rem
 85 |   border .25rem solid #3eaf7c
 86 |   cursor pointer
 87 |   color #3eaf7c
 88 |   font-family -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
 89 |   font-weight bold
 90 |   text-transform uppercase
 91 |   transition color .3s
 92 | 
 93 |   &:before
 94 |     content ''
 95 |     position absolute
 96 |     z-index -1
 97 |     left -1rem
 98 |     top 0
 99 |     width 0
100 |     height 100%
101 |     transform skewX(-20deg)
102 |     transition width 1s, background .3s
103 | 
104 |   &:hover
105 |     color #fff
106 | 
107 |     &:before
108 |       width calc(100% + 2rem)
109 |       background #3eaf7c
110 | </style>
111 | ```
112 | 
113 | - Only the default slot is customizable (for now). It is available as a string.
114 | 
115 | - Properties will be automatically parsed and will match type and default value accordingly. If you want to customize the property to limit the values to a limited set, you can use a special `enum` property and your whiteroom will display a `<select>` box instead of the corresponding input.
116 | 
117 | ```
118 | <template>
119 |   <div class="button" :class="{ [color]: true, disabled }">
120 |     <slot>{{ label }}</slot>
121 |   </div>
122 | </template>
123 | 
124 | <script>
125 | export default {
126 |   props: {
127 |     label: {
128 |       type: String,
129 |       default: null,
130 |     },
131 | 
132 |     color: {
133 |       type: String,
134 |       default: 'green',
135 |       enum: ['red', 'green', 'blue']
136 |     },
137 | 
138 |     disabled: {
139 |       type: Boolean,
140 |       default: false,
141 |     },
142 |   },
143 | }
144 | </script>
145 | 
146 | <style>...</style>
147 | ```
148 | 
149 | - If you wish to use injections, they are also parsed and available automatically.
150 | 
151 | ```
152 | <template>
153 |   <div class="button" :class="{ [color]: true, disabled }">
154 |     <slot>{{ $t(_button_label) }}</slot>
155 |   </div>
156 | </template>
157 | 
158 | <script>
159 | export default {
160 |   inject: {
161 |     _button_label: {
162 |       default: 'missing-key'
163 |     },
164 |   },
165 | 
166 |   props: {
167 |     color: {
168 |       type: String,
169 |       default: 'green',
170 |       enum: ['red', 'green', 'blue']
171 |     },
172 | 
173 |     disabled: {
174 |       type: Boolean,
175 |       default: false,
176 |     },
177 |   },
178 | 
179 |   methods: {
180 |     // supposely vue-i18n
181 |     $t(key) {
182 |       return `label_${key}`
183 |     },
184 |   },
185 | }
186 | </script>
187 | ```
188 | 
189 | - If you want to call methods on your experiment, all _public_ methods (non `$`, `_`) can be automatically called. It should be noted that no arguments can be passed.
190 | 
191 | ```
192 | <template>
193 |   <div class="button" :class="{ [color]: true, disabled }" @click="onclick">
194 |     <slot>{{ $t(_button_label) }}</slot>
195 |   </div>
196 | </template>
197 | 
198 | <script>
199 | export default {
200 |   inject: {
201 |     _button_label {
202 |       default: 'missing-key'
203 |     },
204 |   },
205 | 
206 |   props: {
207 |     color: {
208 |       type: String,
209 |       default: 'green',
210 |       enum: ['red', 'green', 'blue']
211 |     },
212 | 
213 |     disabled: {
214 |       type: Boolean,
215 |       default: false,
216 |     },
217 |   },
218 | 
219 |   methods: {
220 |     onclick() { window.alert('you clicked !') }
221 |   },
222 | }
223 | </script>
224 | ```
225 | 
226 | 
227 | ### layouts
228 | 
229 | The real component will be passed to you in a `proxy` prop, along with props. Injections are automatically resolved, so there's no so much other things to care about.
230 | 
231 | You'll need to make it `abstract` and `functional` to avoid messing with parenting and connections with the rest of the application. After that, render the child as many times as necessary in the `render(h)` function. Don't forget to pass `children` along, as it contains the default `slot` string.
232 | 
233 | Here's the most basic example :
234 | 
235 | ```
236 | <script>
237 | export default {
238 |   abstract: true,
239 |   functional: true,
240 | 
241 |   render(h, { props, children }) {
242 |     const { child, ...options } = props.proxy
243 | 
244 |     return h(child, options, children)
245 |   }
246 | }
247 | </script>
248 | ```
249 | 
250 | Or, if you wanted something more sophisticated :
251 | 
252 | ```
253 | <script>
254 | export default {
255 |   abstract: true,
256 |   functional: true,
257 | 
258 |   render(h, { props, children }) {
259 |     const { child, ...options } = props.proxy
260 |     const instances = Array(4).fill('div')
261 |                               .map(div => h(div, null, [ h(child, options, children) ]))
262 | 
263 |     return h('div', { class: 'foolayout' }, instances)
264 |   }
265 | }
266 | </script>
267 | 
268 | <style lang="stylus" scoped>
269 | .foolayout
270 |   position absolute
271 |   width 100%
272 |   height 100%
273 | 
274 |   & > div
275 |     position absolute
276 |     width 50%
277 |     height 50%
278 | 
279 |   & > div:nth-child(2n + 1)
280 |     left 50%
281 | 
282 |   & > div:nth-child(2) ~ div
283 |     top 50%
284 | </style>
285 | ```
286 | 


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