feat: add bundle, debug tags

also update some styling

Author: wojtek-krysiak

bundler.js

@@ -7,7 +7,7 @@ const REACT_WRAPPER = process.env.IS_DEV ? 'src/components/react-wrapper.jsx' :
 
 const pathCrossEnv = path => (process.platform !== 'win32' ? path : path.replace(/\\/g, '/'))
 
-module.exports = function bundle(Components, out, config) {
+module.exports = function bundle(Components, functions, out, config) {
   if (!Components.length) {
     return
   }
@@ -18,6 +18,7 @@ module.exports = function bundle(Components, out, config) {
   let init = `
     window.reactComponents = {};\n
     window.vueComponents = {};\n
+    window.Components = {};\n
   `
   if (vueComponents.length) {
     init += `
@@ -28,6 +29,7 @@ module.exports = function bundle(Components, out, config) {
       window.VueWrapper = VueWrapper;\n
     `
   }
+
   if (reactComponents.length) {
     const reactWrapperRelPath = pathCrossEnv(
       path.relative(absoluteOut, path.join(__dirname, REACT_WRAPPER)),
@@ -50,6 +52,23 @@ module.exports = function bundle(Components, out, config) {
     import './styles/iframe.css';\n
   `
 
+  let functionImports = ''
+
+  if (functions && functions.length) {
+    functionImports = functions.map((fnDocLet, i) => {
+      const { name: displayName, meta } = fnDocLet
+      const { path: filePath, filename } = meta
+      const relativePath = pathCrossEnv(path.relative(absoluteOut, path.join(filePath, filename)))
+      const name = `FnComponent${i}`
+      return [
+        `import ${name} from '${relativePath}';`,
+        `Components['${displayName}'] = ${name};`,
+      ].join('\n')
+    }).join('\n\n')
+
+    functionImports = `${functionImports}\n\n`
+  }
+
   if (config.betterDocs.component) {
     if (config.betterDocs.component.wrapper) {
       const absolute = path.resolve(config.betterDocs.component.wrapper)
@@ -65,7 +84,7 @@ module.exports = function bundle(Components, out, config) {
     }
   }
 
-  const entryFile = init + Components.map((c, i) => {
+  const entryFile = init + functionImports + Components.map((c, i) => {
     const { displayName, filePath, type } = c.component
     const relativePath = pathCrossEnv(path.relative(absoluteOut, filePath))
     const name = `Component${i}`

navigation.js

@@ -31,4 +31,16 @@ exports.defineTags = (dictionary) => {
       },
     })
   })
+
+  dictionary.defineTag('debug', {
+    onTagged: (doclet, tag) => {
+      console.log({ doclet })
+    },
+  })
+
+  dictionary.defineTag('bundle', {
+    onTagged: (doclet) => {
+      doclet.bundle = true
+    },
+  })
 }

publish.js

@@ -501,7 +501,9 @@ exports.publish = function (taffyData, opts, tutorials) {
 
   view.tutorialsNav = buildNav(members, ['tutorials'], conf.betterDocs, env).global
 
-  bundler(members.components, outdir, conf)
+  const bundleFunctions = helper.find(data, { bundle: { isUndefined: false } })
+
+  bundler(members.components, bundleFunctions, outdir, conf)
   attachModuleSymbols(find({ longname: { left: 'module:' } }), members.modules)
 
   // generate the pretty-printed source files first so other pages can link to them

src/components/react-wrapper.jsx

@@ -22,6 +22,20 @@ class Wrapper extends React.Component {
     this.executeScript(example)
   }
 
+  componentDidMount() {
+    this.heightInterval = setInterval(() => {
+      this.computeHeight()
+    }, 1000)
+  }
+
+  componentDidUpdate() {
+    this.computeHeight()
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.heightInterval)
+  }
+
   executeScript(source) {
     const { uniqId } = this.props
     const script = document.createElement('script')
@@ -35,6 +49,7 @@ class Wrapper extends React.Component {
     }
     const wrapper = `window.component['${uniqId}'] = (() => {
       ${Object.keys(reactComponents).map(k => `const ${k} = reactComponents['${k}'];`).join('\n')}
+      ${Object.keys(Components).map(k => `const ${k} = Components['${k}'];`).join('\n')}
       try {
         ${source}
       } catch (error) {
@@ -74,20 +89,6 @@ class Wrapper extends React.Component {
     }
   }
 
-  componentDidUpdate() {
-    this.computeHeight()
-  }
-
-  componentDidMount() {
-    this.heightInterval = setInterval(() => {
-      this.computeHeight()
-    }, 1000)
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.heightInterval)
-  }
-
   render() {
     const { component, height } = this.state
     return (

src/navigation/build-nav.ts

@@ -44,7 +44,6 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn, env) {
             cssClasses.push('new')
           }
 
-
           itemsNav += `<li>${linktoFn(
             item.longname,
             displayName.replace(/\b(module|event):/g, ''),
@@ -114,8 +113,16 @@ function buildGroupNav(members, title, env) {
     globalNav = ''
 
     members.globals.forEach((g) => {
+      const cssClasses: Array<string> = []
+      if (g.deprecated) {
+        cssClasses.push('deprecated')
+      }
+
+      if (g.new) {
+        cssClasses.push('new')
+      }
       if (g.kind !== 'typedef' && !hasOwnProperty.call(seen, g.longname)) {
-        globalNav += `<li>${linkto(g.longname, g.name)}</li>`
+        globalNav += `<li>${linkto(g.longname, g.name, cssClasses.join(' '))}</li>`
       }
       seen[g.longname] = true
     })

styles/base/layout.sass

@@ -87,7 +87,8 @@ body
       color: #fff
       &:hover
         border-color: $red-active
-        color: #fff
+        color: $red-active
+        background: $white
     &:hover
       border-color: $red-active
       color: $red-active

styles/components/details.sass

@@ -1,12 +1,12 @@
 .details
-  margin-top: 20px
+  margin-top: 40px
   dt
     font-size: 20px
     border-left: 2px solid $blue
     padding-left: 16px
     margin-top: 10px
 
-  .tag-deprecated.important
+  .tag-deprecated
     background: $red-active
     color: $white
     border-left: 0px;
@@ -15,5 +15,12 @@
       border-bottom: 1px solid $red-active
       padding-bottom: 14px
 
-  .tag-new.important
-    border-color: $red-active
+  .tag-new
+    border-color: $red-active
+
+
+  dt.tag-see + dd.tag-see
+    margin-bottom: 40px
+
+  .important + dd
+    margin-bottom: 40px

tmpl/layout.tmpl

@@ -60,11 +60,11 @@ var search = env.conf.templates && env.conf.templates.search
                         </div>
                         <div class="main column is-8-tablet is-10-desktop">
                             <h4>
-                                Software House with a passion to both JavaScript and TypeScript.
+                                Software House with a passion for both JavaScript and TypeScript.
                             </h4>
                             <p class="buttons">
                                 <a class="button what-we-do" href="https://softwarebrothers.co/services">See what we do</a>
-                                <a class="button what-we-believe is-outlined" href="https://softwarebrothers.co/about-us">See what believe</a>
+                                <a class="button what-we-believe is-outlined" href="https://softwarebrothers.co/about-us">See what we believe in</a>
                             </p>
                         </div>
                     </div>

tmpl/members.tmpl

@@ -18,6 +18,12 @@ var self = this;
     <span class="code-name">
         <?js= name ?>
     </span>
+    <?js if (data.new) { ?>
+            <span class="tag-new" />
+    <?js } ?>
+    <?js if (data.deprecated) { ?>
+        <span class="tag-deprecated" />
+    <?js } ?>
     <?js if (data.optional) { ?>
         <span class='tag'>Optional</span>
     <?js }; ?>