added Options/DOM APIs

User · User · commit 4bcec63923d0 · 2017-07-18T15:46:50.000-04:00
diff --git a/apis/optionsdom.js b/apis/optionsdom.js
@@ -10,8 +10,8 @@ const EL = {
     name: 'el',
     type: 'string | HTMLElement',
     restriction: `only respected in instance created via ${colorArgs('new')}.`,
-    details: `Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or
-                        an actual HTMLElement. After the instance is mounted,
+    details: `Provide the Vue instance an existing DOM element to mount on. It can be a CSS
+                        selector string or an actual HTMLElement. After the instance is mounted,
                         the resolved element will be accessible as ${colorArgs('vm.$el')}.
                         If this option is available at instantiation, the instance will immediately enter
                         compilation; otherwise, the user will have to explicitly call ${colorArgs('vm.$mount()')} to manually
@@ -20,12 +20,61 @@ const EL = {
                         mounted element will be replaced with Vue-generated DOM in all cases. It is therefore
                         not recommended to mount the root instance to ${colorArgs('<html>')} or ${colorArgs('<body>')}.
                         If neither ${colorArgs('render')} function nor ${colorArgs('template')} option is present, the in-DOM HTML of
-                        the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.`
+                        the mounting DOM element will be extracted as the template. In this case,
+                        Runtime + Compiler build of Vue should be used.`
                         ,
 }
-const TEMPLATE = {}
-const RENDER = {}
-const RENDER_ERROR = {}
+                    // untested
+const TEMPLATE = {
+    category: 'Options/DOM',
+    name: 'template',
+    type: 'string',
+    details: `A string template to be used as the markup for the Vue instance.
+                        The template will replace the mounted element. Any existing markup inside the mounted
+                        element will be ignored, unless content distribution slots are present in the template.
+                        If the string starts with ${colorArgs('#')} it will be used as a querySelector and use the selected element’s
+                        innerHTML as the template string. This allows the use of the common ${colorArgs(`<script type="x-template">`)}
+                        trick to include templates. From a security perspective, you should only use Vue templates
+                        that you can trust. Never use user-generated content as your template.
+                        If render function is present in the Vue option, the template will be ignored.
+    
+    `
+}
+const RENDER = {
+    category: 'Options/DOM',
+    name: 'render',
+    type: '(createElement: () => VNode) => VNode',
+    details: `An alternative to string templates allowing you to leverage the full programmatic
+                        power of JavaScript. The render function receives a ${colorArgs('createElement')} method
+                        as it’s first argument used to create ${colorArgs('VNode')}s. If the component is a functional component,
+                        the render function also receives an extra argument ${colorArgs('context')}, which provides access to
+                        contextual data since functional components are instance-less.
+
+                        The ${colorArgs('render')} function has priority over the render function compiled from ${colorArgs('template')} option
+                        or in-DOM HTML template of the mounting element which is specified by the ${colorArgs('el')} option.
+    
+    `
+}
+const RENDER_ERROR = {
+    category: 'Options/DOM',
+    name: 'renderError',
+    type: '(createElement: () => VNode, error: Error) => VNode',
+    details: `${chalk.bold('Only works in development mode')}.
+                        Provide an alternative render output when the default ${colorArgs('render')} function encounters
+                        an error. The error will be passed to ${colorArgs('renderError')} as the second argument.
+                        This is particularly useful when used together with hot-reload`,
+    example: `
+                        ${colorArgs('new')} Vue({
+                            render (h) {
+                                ${colorArgs('throw new')} ${chalk.green('Error')}(${chalk.green("'oops'")})
+                            },
+                            renderError (h, err) {
+                                ${colorArgs('return')} h(${chalk.green("'pre'")}, { style: { color: ${chalk.green("'red'")} }}, err.stack)
+                            }
+                        }).$mount(${chalk.green("'#app'")})
+                        
+                            `
+}                           
 
 
 module.exports = {
diff --git a/vue-help.js b/vue-help.js
@@ -178,4 +178,22 @@ V.command('el', 'Options/DOM: #el').action(function(args, callback){
     const w = odom[0]
     this.log(O.logOptions(w))
     callback()
+})
+
+V.command('template', 'Options/DOM: #template').action(function(args, callback){
+    const w = odom[1]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('render', 'Options/DOM: #render').action(function(args, callback){
+    const w = odom[2]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('renderError', 'Options/DOM: #renderError').action(function(args, callback){
+    const w = odom[3]
+    this.log(O.logOptions(w))
+    callback()
 })
